Untitled

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>
  );
}