Untitled
unknown
plain_text
2 years ago
3.6 kB
7
Indexable
import React, { useState } from 'react'; import { View, Text } from 'react-native-ui-lib'; import { VictoryChart, VictoryArea, VictoryAxis, VictoryTooltip, VictoryVoronoiContainer, VictoryScatter, } from 'victory-native'; import { StyleSheet } from 'react-native'; import { useTranslation } from 'react-i18next'; import { useColors } from '../../../hooks/useColors'; import { GradientArea } from './GradientArea'; export function HistoricalChart() { const { colors }: any = useColors(); const { t } = useTranslation(); const data = [ { x: 'Sep 2021', days: 60 }, { x: 'Oct 2021', days: 70 }, { x: 'Nov 2021', days: 100 }, { x: 'Dec 2021', days: 95 }, { x: 'Jen 2021', days: 100 }, { x: 'Feb 2021', days: 75 }, { x: 'Mar 2021', days: 70 }, { x: 'Apr 2021', days: 65 }, { x: 'May 2021', days: 65 }, { x: 'June 2021', days: 65 }, { x: 'July 2021', days: 70 }, { x: 'Aug 2022', days: 90 }, ]; const CustomTickLabel = (props: any) => { const { x, text, index } = props; const splitText = text.split(' '); const transparentIndices = [2, 3, 5, 6, 8, 9, 11]; const isTransparent = transparentIndices.includes(index + 1); return ( <View style={{ position: 'absolute', left: x, top: -60 }}> {splitText.map((split: any, i: any) => ( <Text key={i} style={{ color: isTransparent ? 'transparent' : colors.secondaryText, fontSize: 11, }}> {split} </Text> ))} </View> ); }; const [scatterData, setScatterData] = useState([{ x: 'Dec 2021', days: 95 }]); const handleTooltipPress = dataPoint => { // Update the scatterData state with the clicked data point setScatterData([dataPoint]); }; console.log(scatterData); return ( <View center> <VictoryChart height={269} marginT-20 containerComponent={<VictoryVoronoiContainer />}> <VictoryAxis tickFormat={x => x} style={{ axis: { stroke: 'none' }, ticks: { stroke: 'none' }, }} tickLabelComponent={<CustomTickLabel />} tickCount={15} /> <VictoryAxis dependentAxis style={{ axis: { stroke: 'none' }, ticks: { stroke: 'none' }, tickLabels: { fill: colors.secondaryText, fontSize: 11, }, }} /> <VictoryArea data={data} x="x" y="days" style={{ data: { fillOpacity: 0.3 } }} dataComponent={ <GradientArea gradientColorStops={[{ color: colors.action }, { offset: 1, color: 'transparent', stopOpacity: 0.3 }]} gradientStrokeStops={[{ color: colors.action }]} strokeWidth={2} /> } labels={({ datum }) => ` ${datum.days} days`} labelComponent={ <VictoryTooltip style={{ fontSize: 12, fill: colors.primaryText }} flyoutStyle={{ fill: 'transparent', strokeWidth: 0, }} renderInPortal={false} events={{ onClick: (evt, data) => handleTooltipPress(data.datum) }} /> } /> <VictoryScatter data={scatterData} x="x" y="days" size={5} style={{ data: { fill: colors.action }, }} /> </VictoryChart> </View> ); }
Editor is loading...