Skip to content

Commit f7b95cb

Browse files
Abhinandan-KushwahaAbhinandan-Kushwaha
committed
refactors and adjustments related to xAxisThickness and yAxisOffset
1 parent 315b580 commit f7b95cb

File tree

14 files changed

+344
-225
lines changed

14 files changed

+344
-225
lines changed

‎examples/audience-requested-charts/animOnDataChange.tsx

Lines changed: 179 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,179 @@
1+
import React, {useEffect, useState} from 'react';
2+
import {Text, View} from 'react-native';
3+
import {LineChart} from '../../src/LineChart';
4+
import {ruleTypes, clone} from 'gifted-charts-core';
5+
6+
// Fördefinierade sökvägar för moduler
7+
8+
const AnimOnDataChange = () => {
9+
const lcomp = v => (
10+
<Text style={{width: 50, color: 'white', fontWeight: 'bold'}}>{v}</Text>
11+
);
12+
const dPoint = () => {
13+
return (
14+
<View
15+
style={{
16+
width: 14,
17+
height: 14,
18+
backgroundColor: 'white',
19+
borderWidth: 3,
20+
borderRadius: 7,
21+
borderColor: '#07BAD1',
22+
}}
23+
/>
24+
);
25+
};
26+
const latestData = [
27+
{
28+
value: 350,
29+
labelComponent: () => lcomp('22 Nov'),
30+
customDataPoint: dPoint,
31+
},
32+
{
33+
value: 370,
34+
hideDataPoint: true,
35+
},
36+
{
37+
value: 460,
38+
customDataPoint: dPoint,
39+
},
40+
{
41+
value: 500,
42+
hideDataPoint: true,
43+
},
44+
{
45+
value: 570,
46+
labelComponent: () => lcomp('24 Nov'),
47+
customDataPoint: dPoint,
48+
},
49+
{
50+
value: 560,
51+
hideDataPoint: true,
52+
},
53+
{
54+
value: 590,
55+
customDataPoint: dPoint,
56+
},
57+
{
58+
value: 490,
59+
hideDataPoint: true,
60+
},
61+
{
62+
value: 280,
63+
labelComponent: () => lcomp('26 Nov'),
64+
customDataPoint: dPoint,
65+
},
66+
{
67+
value: 370,
68+
hideDataPoint: true,
69+
},
70+
{
71+
value: 350,
72+
customDataPoint: dPoint,
73+
},
74+
{
75+
value: 460,
76+
hideDataPoint: true,
77+
},
78+
{
79+
value: 520,
80+
labelComponent: () => lcomp('28 Nov'),
81+
customDataPoint: dPoint,
82+
},
83+
{
84+
value: 490,
85+
hideDataPoint: true,
86+
},
87+
{
88+
value: 370,
89+
hideDataPoint: true,
90+
},
91+
{
92+
value: 350,
93+
customDataPoint: dPoint,
94+
},
95+
{
96+
value: 460,
97+
labelComponent: () => lcomp('28 Nov'),
98+
customDataPoint: dPoint,
99+
},
100+
{
101+
value: 270,
102+
hideDataPoint: true,
103+
},
104+
{
105+
value: 350,
106+
customDataPoint: dPoint,
107+
},
108+
];
109+
const [currentData, setCurrentData] = useState(clone(latestData));
110+
useEffect(() => {
111+
setTimeout(() => {
112+
const newData = latestData.map(item => {
113+
return {
114+
...item,
115+
value: 250,
116+
};
117+
});
118+
setCurrentData(newData);
119+
}, 1500);
120+
121+
setTimeout(() => {
122+
const newData = latestData.map(item => {
123+
return {
124+
...item,
125+
value: item.value - 50,
126+
};
127+
});
128+
setCurrentData(newData);
129+
}, 2500);
130+
131+
setTimeout(() => {
132+
const newData = latestData.map(item => {
133+
return {
134+
...item,
135+
value: 500 - item.value,
136+
};
137+
});
138+
setCurrentData(newData);
139+
}, 3500);
140+
}, []);
141+
142+
return (
143+
<View>
144+
<View
145+
style={{
146+
paddingVertical: 50,
147+
backgroundColor: '#414141',
148+
}}>
149+
<LineChart
150+
isAnimated
151+
thickness={3}
152+
color="#07BAD1"
153+
maxValue={600}
154+
noOfSections={3}
155+
animateOnDataChange
156+
animationDuration={1000}
157+
onDataChangeAnimationDuration={500}
158+
areaChart
159+
yAxisTextStyle={{color: 'lightgray'}}
160+
data={currentData}
161+
hideDataPoints
162+
startFillColor={'rgb(84,219,234)'}
163+
endFillColor={'rgb(84,219,234)'}
164+
startOpacity={0.4}
165+
endOpacity={0.1}
166+
spacing={22}
167+
backgroundColor="#414141"
168+
rulesColor="gray"
169+
rulesType={ruleTypes.SOLID}
170+
initialSpacing={10}
171+
yAxisColor="lightgray"
172+
xAxisColor="lightgray"
173+
/>
174+
</View>
175+
</View>
176+
);
177+
};
178+
179+
export default AnimOnDataChange;

‎examples/index.tsx

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import RoundStackBar from './BarChart/RoundStackBar';
1616
import StackWithNegative from './BarChart/StackWithNegative';
1717
import CappedBars from './BarChart/CappedBars';
1818
import BarWithGradient from './BarChart/BarWithGradient';
19+
import BarChartWithGivenNumberOfVerticalLines from './BarChart/BarChartWithGivenNumberOfVerticalLines';
1920

2021
import LineChartTwo from './LineChart/LineChartTwo';
2122
import LineChartEndReached from './LineChart/LineChartEndReached';
@@ -72,6 +73,9 @@ const Examples = () => {
7273
const BarAndStackCharts = () => {
7374
return (
7475
<View>
76+
<BarChartWithGivenNumberOfVerticalLines />
77+
<Separator />
78+
7579
<SimpleBlueBars />
7680
<Separator />
7781

‎src/BarChart/Animated2DWithGradient.tsx

Lines changed: 6 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ const Animated2DWithGradient = (props: Animated2DWithGradientPropsType) => {
3232
topLabelTextStyle,
3333
commonStyleForBar,
3434
barStyleWithBackground,
35+
yAxisOffset,
3536
} = props;
3637
const [height, setHeight] = useState(noAnimation ? props.height : 0.2);
3738
const [initialRender, setInitialRender] = useState(
@@ -72,16 +73,12 @@ const Animated2DWithGradient = (props: Animated2DWithGradientPropsType) => {
7273
<View
7374
style={{
7475
position: 'absolute',
75-
bottom: 0,
76+
bottom: -0.5,
7677
width: '100%',
7778
overflow: 'hidden',
7879
height:
7980
(noAnimation
80-
? Math.max(
81-
props.minHeight,
82-
(Math.abs(item.value) * (containerHeight || 200)) /
83-
(maxValue || 200),
84-
)
81+
? Math.max(props.minHeight, Math.abs(height))
8582
: height) - (barMarginBottom || 0),
8683
}}>
8784
<View
@@ -90,11 +87,7 @@ const Animated2DWithGradient = (props: Animated2DWithGradientPropsType) => {
9087
width: '100%',
9188
height:
9289
(noAnimation
93-
? Math.max(
94-
props.minHeight,
95-
(Math.abs(item.value) * (containerHeight || 200)) /
96-
(maxValue || 200),
97-
)
90+
? Math.max(props.minHeight, Math.abs(height))
9891
: height) - (barMarginBottom || 0),
9992
},
10093
item.barStyle || barStyle,
@@ -157,12 +150,7 @@ const Animated2DWithGradient = (props: Animated2DWithGradientPropsType) => {
157150
x="1"
158151
y="1"
159152
width={item.barWidth || props.barWidth || 30}
160-
height={
161-
noAnimation
162-
? (Math.abs(item.value) * (containerHeight || 200)) /
163-
(maxValue || 200)
164-
: height
165-
}
153+
height={noAnimation ? Math.abs(height) : height}
166154
fill={`url(#${item.patternId || patternId})`}
167155
/>
168156
</Svg>
@@ -196,7 +184,7 @@ const Animated2DWithGradient = (props: Animated2DWithGradientPropsType) => {
196184
topLabelContainerStyle ?? item.topLabelContainerStyle,
197185
]}>
198186
{showValuesAsTopLabel ? (
199-
<Text style={topLabelTextStyle}>{item.value}</Text>
187+
<Text style={topLabelTextStyle}>{item.value + yAxisOffset}</Text>
200188
) : (
201189
item.topLabelComponent?.()
202190
)}

‎src/BarChart/RenderBars.tsx

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import {
99
getPropsForAnimated2DWithGradient,
1010
RenderBarsPropsType,
1111
barDataItem,
12+
AxesAndRulesDefaults,
1213
} from 'gifted-charts-core';
1314

1415
const RenderBars = (props: RenderBarsPropsType) => {
@@ -40,7 +41,7 @@ const RenderBars = (props: RenderBarsPropsType) => {
4041
initialSpacing,
4142
selectedIndex,
4243
setSelectedIndex,
43-
xAxisThickness,
44+
xAxisThickness = AxesAndRulesDefaults.xAxisThickness,
4445
horizontal,
4546
rtl,
4647
intactTopLabel,
@@ -49,12 +50,13 @@ const RenderBars = (props: RenderBarsPropsType) => {
4950
topLabelTextStyle,
5051
pointerConfig,
5152
noOfSectionsBelowXAxis,
53+
yAxisOffset,
5254
} = props;
5355

5456
const barHeight = Math.max(
5557
minHeight,
5658
(Math.abs(item.value) * (containerHeight || 200)) / (maxValue || 200) -
57-
(xAxisThickness ?? 0),
59+
xAxisThickness,
5860
);
5961

6062
const {
@@ -128,7 +130,7 @@ const RenderBars = (props: RenderBarsPropsType) => {
128130
<Text
129131
style={[
130132
{textAlign: 'center'},
131-
rtl && {transform: [{rotate: '180deg'}]},
133+
rtl && horizontal && {transform: [{rotate: '180deg'}]},
132134
labelTextStyle,
133135
]}
134136
numberOfLines={xAxisTextNumberOfLines}>
@@ -190,7 +192,7 @@ const RenderBars = (props: RenderBarsPropsType) => {
190192
<Text
191193
style={[
192194
{textAlign: 'center'},
193-
rtl && {transform: [{rotate: '180deg'}]},
195+
rtl && horizontal && {transform: [{rotate: '180deg'}]},
194196
labelTextStyle,
195197
]}
196198
numberOfLines={xAxisTextNumberOfLines}>
@@ -262,7 +264,7 @@ const RenderBars = (props: RenderBarsPropsType) => {
262264
topLabelContainerStyle ?? item.topLabelContainerStyle,
263265
]}>
264266
{showValuesAsTopLabel ? (
265-
<Text style={topLabelTextStyle}>{item.value}</Text>
267+
<Text style={topLabelTextStyle}>{item.value + yAxisOffset}</Text>
266268
) : (
267269
item.topLabelComponent?.()
268270
)}
@@ -280,7 +282,7 @@ const RenderBars = (props: RenderBarsPropsType) => {
280282
const barWrapperStyle = [
281283
{
282284
// overflow: 'visible',
283-
marginBottom: 60 + barMarginBottom + xAxisLabelsVerticalShift,
285+
marginBottom: 60 + barMarginBottom + xAxisLabelsVerticalShift - 0.5,
284286
width: commonPropsFor2Dand3Dbars.barWidth,
285287
height: barHeight,
286288
marginRight: spacing,

‎src/BarChart/index.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,10 @@ import {Animated, Easing, View} from 'react-native';
33
import RenderBars from './RenderBars';
44
import RenderStackBars from './RenderStackBars';
55
import BarAndLineChartsWrapper from '../Components/BarAndLineChartsWrapper';
6-
import {BarChartPropsType, useBarChart, screenWidth} from 'gifted-charts-core';
6+
import {BarChartPropsType, useBarChart} from 'gifted-charts-core';
77
import {StripAndLabel} from '../Components/common/StripAndLabel';
88
import {Pointer} from '../Components/common/Pointer';
9+
import {screenWidth} from '../utils';
910

1011
export const BarChart = (props: BarChartPropsType) => {
1112
const heightValue = useMemo(() => new Animated.Value(0), []);

‎src/Components/AnimatedThreeDBar/index.tsx

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -49,8 +49,9 @@ const triangleStyles = StyleSheet.create({
4949
});
5050

5151
const AnimatedThreeDBar = (props: animatedBarPropTypes) => {
52+
const heightCopy = props.height;
5253
const [height, setHeight] = useState(
53-
props.isAnimated ? (Platform.OS === 'ios' ? 0 : 20) : props.height,
54+
props.isAnimated ? (Platform.OS === 'ios' ? 0 : 20) : heightCopy,
5455
);
5556

5657
const {
@@ -134,7 +135,7 @@ const AnimatedThreeDBar = (props: animatedBarPropTypes) => {
134135
<View
135136
style={{
136137
width: barWidth,
137-
height: barWidth * 0.4,
138+
height: barWidth,
138139
// left: width / 2,
139140
backgroundColor: topColor,
140141
opacity: opacity,
@@ -145,7 +146,7 @@ const AnimatedThreeDBar = (props: animatedBarPropTypes) => {
145146
style={{
146147
position: 'absolute',
147148
top: sideWidth / -2,
148-
left: barWidth,
149+
left: barWidth - 1,
149150
}}>
150151
<TriangleCorner
151152
color={topColor}
@@ -158,23 +159,23 @@ const AnimatedThreeDBar = (props: animatedBarPropTypes) => {
158159

159160
{/*******************************************************************/}
160161

161-
<View style={{marginTop: sideWidth / -2}}>
162+
<View style={{marginTop: sideWidth / -2 - 1}}>
162163
<TriangleCorner
163164
color={height ? sideColor : 'transparent'}
164165
width={sideWidth}
165166
style={{transform: [{rotate: '-90deg'}], opacity: opacity}}
166167
/>
167168
<View
168169
style={{
169-
width: sideWidth / 2,
170+
width: sideWidth / 2 + 1,
170171
height: height - sideWidth / 2, //animatedSideHeight
171172
backgroundColor: sideColor,
172173
opacity: opacity,
173174
}}
174175
/>
175176
<TriangleCorner
176177
color={height ? sideColor : 'transparent'}
177-
width={sideWidth}
178+
width={sideWidth + 1}
178179
style={{transform: [{rotate: '90deg'}], opacity: opacity}}
179180
/>
180181
</View>

0 commit comments

Comments
 (0)