I have two datasets. I want to use segmented control to change between datasets using victory-native. I have implemented a segmented control that uses indexes to change between datasets. How can I visualize that on charts using victory-native? My goal is to switch between datasets when the user interacts with the segmented control and update that on the graph.
Data.ts
function getDataSetOne() { return [ { x: 1, y: 12, }, { x: 2, y: 23, }, { x: 3, y: 32, }, { x: 4, y: 23, }, { x: 5, y: 44, }, { x: 6, y: 31, }, { x: 7, y: 36, }, ];}function getDataSetTwo() { return [ { x: 1, y: 12, }, { x: 2, y:12, }, { x: 3, y: 12, }, { x: 4, y: 11, }, { x: 5, y: 11, }, { x: 6, y: 11, }, { x: 7, y: 12, }, ];}export const graphs = [ { label: 'D', value: 1, data: (getDataSetOne()), }, { label: 'W', value: 2, data: (getDataSetTwo()), },] as const;export type GraphIndex = 0 | 1;Graph.tsx
const BUTTON_WIDTH = (width - 32) / graphs.length;const Graph = (props: Props) => { const previous = useSharedValue<GraphIndex>(0); const current = useSharedValue<GraphIndex>(0); const transition = useSharedValue(0); const styles = getStyles(); const tickValues = getTickValues(); const style = useAnimatedStyle(() => ({ transform: [{ translateX: withTiming(BUTTON_WIDTH * current.value) }], })); // segmented control mapping over indexes in graphs array in Data.ts const graphPicker = graphs.map((graph, index) => { return (<TouchableWithoutFeedback key={graph.label} onPress={() => { previous.value = current.value; transition.value = 0; current.value = index as GraphIndex; transition.value = withTiming(1); }}><Animated.View style={[styles1.labelContainer]}><Text style={styles1.label}>{graph.label}</Text></Animated.View></TouchableWithoutFeedback> ); }) return (<View><View style={styles1.selection}><View style={StyleSheet.absoluteFill}><Animated.View style={[styles1.backgroundSelection, style]} /></View></View><View style={{ marginTop: 90, marginLeft: 0 }}><VictoryChart width={SELECTION_WIDTH} height={345}><VictoryAxis scale="time" standalone={false} style={styles.axisYears} tickValues={tickValues} tickFormat={(x) => { return x.getDate(); }} /><VictoryAxis dependentAxis domain={[0, 100]} offsetX={55} orientation="left" standalone={false} style={styles.axisOne} /><VictoryLine animate={{ onExit: { duration: 300, before: () => ({ _y: 0, }), }, }} containerComponent={<VictoryCursorContainer cursorLabel={() => <View>hi</View>} /> } data={dataSetOne} //??? domain={{ x: [ 1, 7 ], y: [0, 100], }} interpolation="basis" scale={{ x: "time", y: "linear" }} standalone={true} style={styles.lineOne} /><VictoryBar containerComponent={<VictoryVoronoiContainer />} labelComponent={<VictoryTooltip />} labels={({ datum }) => datum.y} animate={{ onExit: { duration: 300, before: () => ({ _y: 0, }), }, }} data={dataSetTwo} domain={{ x: [ 1, 7 ], y: [0, 100], }} scale={{ x: "time", y: "linear" }} standalone={true} style={styles.lineTwo} /></VictoryChart></View></View> );}