Segmented Control with Victory Charts

[dhanushm360]

I have two datasets and 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>
  );
}