admin 管理员组

文章数量: 1086019

I'm trying to plot a graph with Victory native that's use multi press tooltip. The problem that I'm having is that when i click it on the graph it does not show me the y axis value (which is price in my case). My datas come in this format :

{
    "day": "03/2024",
    "highTmp": 253976.62
}

As you can see day it's a string of data to axis x and highTmp is a number to axis y. Here's how my graph looks my graph when i click

As you see, it's show me the circle right an if i move it the circle also move

My code look's like this:

import { View,StyleSheet, Text, ActivityIndicator } from 'react-native';
import {  CartesianChart, Line, useChartPressState,useChartTransformState, useLinePath, useAnimatedPath, type PointsArray} from 'victory-native';
import type { SharedValue } from 'react-native-reanimated';
import React, {useEffect, useState} from 'react';
import inter from '../../assets/fonts/Inter-Italic-VariableFont_opsz,wght.ttf';
import { Circle, useFont } from '@shopify/react-native-skia';
import GraphDatas from '../conections/api_graphics';
import CoinButton from '../buttonCoin/buttonCoin';

interface DataFetchHist{
  id ?: string;
  price ?: number;
  name ?: string;
  data ?:number;
  day ?: number;
  highTmp ?: number;
  selectedItem?:string;
  setSelectedItem: React.Dispatch<React.SetStateAction<string>>;
}

const INIT_STATE = { x:0, y: { highTmp: 0 } } as const;

export const Graph = ({selectedItem,setSelectedItem }:DataFetchHist ) => {
  const {datasHist, loading, error} = GraphDatas();
  const [pricesCoin, setPrices] = useState([]);
  const [formattedData, setFormattedData] = useState<{ day: string; highTmp: number }[]>([]);

  const { state: firstPress, isActive: isFirstPressActive } = useChartPressState(INIT_STATE);
  const { state: secondPress, isActive: isSecondPressActive } = useChartPressState(INIT_STATE);
  const font = useFont(inter,12);

  const [finalArray, setFinalArray] = useState();

. . .

  return (
    <>
    <View style={styles.coinButton}>
      <CoinButton selectedItem={selectedItem} setSelectedItem={setSelectedItem}/>
    </View>
    <View style={styles.graph}>
      {formattedData.length > 0 ? (
        <CartesianChart

          data={formattedData}
          xKey="day"

          yKeys={['highTmp']}
          padding={{ left: 5, top: 90, bottom: 0, right: 5 }}
          domainPadding={{ left: 5, right: 0 }}

          chartPressState={[firstPress, secondPress]}


          axisOptions={{
            font,labelColor:'black', lineColor:'transparent',
          }}
        >
          {({ points }) => (
            <>
              <Line points={points.highTmp}
               color="#16C784"
                strokeWidth={3}

                connectMissingData={true}
                opacity = {4}
                animate={{ type: 'spring', duration: 600 }}
                />
                {isFirstPressActive && (
                  <ToolTip
                    x={firstPress.x.position}
                    y={firstPress.y.highTmp.position}/>)}
                {isSecondPressActive && (
                  <ToolTip
                    x={secondPress.x.position}
                    y={secondPress.y.highTmp.position} />)}
            </>
          )}
        </CartesianChart>
      ) : (
        <View style={styles.loadingContainer}>
            <ActivityIndicator size="large" color="#0000ff" />
        </View>
          )}
    </View>
    </>

  );
};


function ToolTip({ x, y }: { x: SharedValue<number>; y: SharedValue<number> }) {
  return <Circle cx={x} cy={y} r={5} color="black" />;
}

const styles = StyleSheet.create({
  coinButton:{
    // backgroundColor:'red',
    width:'auto',
    height: 100,
    // alignItems:'flex-end',
    marginTop:10,
    left:130,
    zIndex:3,
    // color:'red',
  },
graph:{
  width: '100%',
  height: '40%',
  backgroundColor:'white',
  // backgroundColor:'#011631',
  display:'flex',
  justifyContent:'center',
  fontSize:10,
  color:'black',
  marginTop:-100,
  zIndex:0, //******************voltar para 0 ************** */
  // fontStyle:'italic',
},
});


export default Graph;

I guess the problem it's happening because x axis is a string but i pass as a number, so i tried to change the tooltip to accept string in x axis but does not worked:

ToolTip({ x, y }: { x: SharedValue<string>;

And if i hover the chartPressState it show's me this error :

Type 'ChartPressState<{ readonly x: 0; readonly y: { readonly highTmp: 0; }; }>' is not assignable to type 'ChartPressState<{ x: string; y: Record<"highTmp", number>; }>'.
  The types of 'x.value.value' are incompatible between these types.
    Type 'number' is not assignable to type 'string'

本文标签： typescriptVictory native multi press doesn39t work in my graphStack Overflow

版权声明：本文标题：typescript - Victory native multi press doesn&#39;t work in my graph - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://roclinux.cn/p/1744084472a2530862.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。