Open izniburak opened 6 months ago
facing a similar issue, when I inspect I noticed that there is Svg that overly the whole graph lines area,
import React, {useEffect, useState} from 'react';
import {
View,
Text,
useWindowDimensions,
TouchableOpacity,
Alert,
} from 'react-native';
import tw from '../../../lib/tailwind';
import {useDeviceContext} from 'twrnc';
import {LineChart} from 'react-native-gifted-charts';
import colors from '../../theme/colors';
import {ProductType} from '../../types';
import {dateFormat} from '../../utils';
import {useTranslation} from 'react-i18next';
import {DATE_FORMAT_2} from '../../constant/indext';
type ProductGraphProps = {
data: any;
averagePrice: number;
};
function ProductGraph(props: ProductGraphProps) {
const {data, averagePrice} = props;
const [graphData, setGraphData] = useState<ProductType[]>();
const [selectIndex, setSelectIndex] = useState<number>();
useDeviceContext(tw);
const customDataPoint = (index: number) => {
return (
<View
style={{
zIndex: 1,
position: 'relative',
}}>
<TouchableOpacity
onPress={() => {
Alert.alert('Sd');
}}
style={{
width: 40,
height: 40,
backgroundColor: colors.white,
borderWidth: 4,
borderRadius: 10,
borderColor: colors.primary,
zIndex: 999,
}}>
<Text>asd</Text>
</TouchableOpacity>
</View>
);
};
const customLabel = (val: string) => {
return (
<View style={{width: 70, marginLeft: 7}}>
<Text
style={{
color: 'black',
fontSize: 9,
marginLeft: 12,
}}>
{dateFormat(val, DATE_FORMAT_2)}
</Text>
</View>
);
};
const handleArrangeFilterData = () => {
let arr = data?.map((item: ProductType, index: number) => ({
value: item?.price,
labelComponent: () => customLabel(item?.purchaseDate),
customDataPoint: () => customDataPoint(index),
}));
return arr;
};
const {height, width} = useWindowDimensions();
const {t} = useTranslation();
return (
<View style={tw`flex-1 pb-6 w-full`}>
<View style={tw`w-full py-7 flex justify-center items-center`}>
<Text style={tw`text-xl text-black`}>{t('Average')}</Text>
{/* <Text style={tw`text-xs text-black font-medium`}>Febs, 12 2024 </Text> */}
<View style={tw`flex-row`}>
<Text style={tw`text-2xl text-green pt-3`}>
{averagePrice.toFixed(2)}
</Text>
</View>
</View>
<View style={tw`mt-auto`}>
<LineChart
onPress={() => {
Alert.alert('er');
}}
height={height - 440}
thickness={3}
width={width - 80}
color={'black'}
// maxValue={600}
areaChart
yAxisTextStyle={{color: 'black'}}
data={handleArrangeFilterData(data)}
curved
startFillColor={colors.primary}
endFillColor={colors.primary}
startOpacity={0.7}
endOpacity={0.4}
// spacing={38}
rulesColor={colors.alto}
rulesType="solid"
// initialSpacing={10}
yAxisColor={colors.alto}
xAxisColor={colors.alto}
/>
</View>
</View>
);
}
export default ProductGraph;
Hi, I use v1.4.3 of the package. I have a question about the
onPress
functionality inLineChart
.I think it doesn't have an useful experience, because to press
dot
in the chart is very hard. I tried to usecustomDataPoint
prop and prepared a custom component withPressable
component in order to useonPress
. ButonPress
still didn't work.Apart from that, I also couldn't use
onPress
functionality with the chart texts in the X axis. Normally, when I useBarChart
and press the any text in X axis,onPress
is triggered. Why we don't use similar functionality withLineChart
?Also, I know that,
LineChart
has some props such asfocusEnabled
,onFocus
,onPress
to handle 'press' actions. But, as I said, I think the experience of the LineChart onPress events not good. I would be good if it has similar behaviour withBarChart
.Do you have any suggestion for that?
Did you figure it out?
Can try to use this function when use the custom component from "LineChart"
delayBeforeUnFocus={0}
focusedCustomDataPoint={() => {
console.log('hi');
}}
customDataPoint={(item: any, i: number) => {
return (
<Box
key={i}
ml={2}
mb={4}
h={12}
w={12}
borderWidth={3}
rounded="$full"
borderColor="#FF9F0A"
/>
);
}}
Hi, I use v1.4.3 of the package. I have a question about the
onPress
functionality inLineChart
.I think it doesn't have an useful experience, because to press
dot
in the chart is very hard. I tried to usecustomDataPoint
prop and prepared a custom component withPressable
component in order to useonPress
. ButonPress
still didn't work.Apart from that, I also couldn't use
onPress
functionality with the chart texts in the X axis. Normally, when I useBarChart
and press the any text in X axis,onPress
is triggered. Why we don't use similar functionality withLineChart
?Also, I know that,
LineChart
has some props such asfocusEnabled
,onFocus
,onPress
to handle 'press' actions. But, as I said, I think the experience of the LineChart onPress events not good. I would be good if it has similar behaviour withBarChart
.Do you have any suggestion for that?