Untitled

import React, { useCallback, useState } from 'react';
import { Dimensions, StyleSheet } from 'react-native';
import { Text, Typography, View } from 'react-native-ui-lib';
import { useTranslation } from 'react-i18next';
import { VictoryArea, VictoryAxis, VictoryChart, VictoryScatter, VictoryTheme } from 'victory-native';

import { useColors } from '../../../hooks';
import { useSymbol } from '../../../hooks/useSymbol';
import { SecondaryTabs } from '../../ui/SecondaryTabs';
import { GradientArea } from './GradientArea';
import { indicatorTypeDisplay } from '../../../features/functions';
import { useEtrader } from '../../../context';
import { Icon } from '../../ui';
import { formattedByLanguage } from '../../../utils/formatCurrency';

const { width } = Dimensions.get('screen');

export function LineChart({ item }: any) {
  const { colors } = useColors();
  const { i18n } = useTranslation();
  const {
    store: { watchlist },
  } = useEtrader();
  const [isSelected, setIsSelected] = useState<string[] | string>([]);
  const { symbol } = useSymbol({ item });
  const indicators = symbol && watchlist && indicatorTypeDisplay(symbol, watchlist);

  const bottomTabs: any[] = [
    { desc: '2', label: '1D', selected: true, key: '1' },
    { desc: '2', label: '5D', selected: false, key: '2' },
    { desc: '(2)', label: '1M', selected: false, key: '3' },
    { label: '1Y', selected: false, key: '4' },
    { desc: '2', label: '5Y', selected: false, key: '5' },
    { desc: '2', label: 'ALL', selected: false, key: '6' },
  ];

  const data = [
    { x: 1, y: 2 },
    { x: 5, y: 60 },
    { x: 9, y: 1 },
    { x: 25, y: 46 },
    { x: 30, y: 3 },
  ];

  const scatterData = data.slice(-1);

  const getAmountColor = () => {
    let color = colors.secondaryText;

    if (symbol?.difference) {
      if (symbol?.difference > 0) {
        color = colors.greenPrice;
      }

      if (symbol?.difference < 0) {
        color = colors.redPrice;
      }
    }

    return color;
  };

  const marginHor = useCallback(() => <View marginH-4 />, []);
  const gradientColorStops = [{ offset: 0.3, color: colors.chartLineColor, stopOpacity: 0.3 }];
  const gradientStrokeStops = [{ offset: 0.3, color: colors.action, opacity: 0.9 }];

  return (
    <View>
      <View>
        <View row spread>
          <View>
            <Text color={colors.primaryText} heading1>
              {formattedByLanguage(i18n, indicators?.main) || '0.00'}
            </Text>
          </View>
          <View row>
            <Icon name="star" width={24} fill={colors.secondaryText} />
            {marginHor()}
            <Icon name="alert" width={24} fill={colors.action} />
          </View>
        </View>
        <View row>
          <Text digits4 color={getAmountColor()}>
            {indicators?.second || '0.00'}
          </Text>
          {marginHor()}
          <Text digits4 color={getAmountColor()}>
            {indicators?.third || '0.00'}
          </Text>
        </View>
        <View row marginT-4>
          <Icon fill={colors.action} name={symbol?.isRealTime ? 'live' : 'late'} width={14} height={14} />
          {marginHor()}
          <Text body3 color={colors.secondaryText}>
            12:04:22
          </Text>
        </View>
      </View>

      <VictoryChart width={width} height={160} theme={VictoryTheme.grayscale} padding={{ left: 5, right: 80, top: 20 }}>
        <VictoryAxis
          dependentAxis
          domain={{ x: [0, 30], y: [10, 20] }} // gelen veriye göre
          tickValues={[1, 20, 40, 60]} // değerler
          orientation="right"
          standalone={false}
          style={{
            axis: { stroke: colors.action, strokeWidth: 0 },
            tickLabels: {
              fill: colors.secondaryText,
              ...Typography.body3,
            },
          }}
        />
        <VictoryArea
          data={data}
          interpolation="monotoneX"
          animate={{
            duration: 2000,
            onLoad: { duration: 1000 },
          }}
          //gradient component kullanımı buradadır @@@@@@
          dataComponent={
            <GradientArea gradientColorStops={gradientColorStops} gradientStrokeStops={gradientStrokeStops} />
          }
        />

        <VictoryScatter data={scatterData} size={4} style={{ data: { fill: colors.action } }} />
      </VictoryChart>
      <SecondaryTabs
        extraStyle={styles.tabs}
        data={bottomTabs}
        fillScreen
        zeroSelected={false}
        isSelected={isSelected}
        setIsSelected={setIsSelected}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  tabs: { paddingVertical: 10, marginTop: 20 },
});