react-native-gifted-charts 1.3.33 → 1.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +9 -2
- package/package.json +2 -1
- package/src/BarChart/Animated2DWithGradient.tsx +13 -154
- package/src/BarChart/RenderBars.tsx +29 -179
- package/src/BarChart/RenderStackBars.tsx +22 -104
- package/src/BarChart/index.tsx +87 -686
- package/src/Components/AnimatedThreeDBar/index.tsx +16 -48
- package/src/Components/BarAndLineChartsWrapper/index.tsx +38 -283
- package/src/Components/BarAndLineChartsWrapper/renderHorizSections.tsx +17 -339
- package/src/Components/BarAndLineChartsWrapper/renderLineInBarChart/index.tsx +147 -0
- package/src/Components/BarAndLineChartsWrapper/renderLineInBarChart/renderDataPoints.tsx +157 -0
- package/src/Components/BarAndLineChartsWrapper/renderLineInBarChart/renderSpecificDataPoints.tsx +86 -0
- package/src/Components/BarAndLineChartsWrapper/renderLineInBarChart/renderSpecificVerticalLines.tsx +42 -0
- package/src/Components/BarAndLineChartsWrapper/renderVerticalLines.tsx +1 -1
- package/src/Components/BarSpecificComponents/cap.tsx +1 -1
- package/src/Components/common/StripAndLabel.tsx +3 -56
- package/src/Components/lineSvg.tsx +1 -1
- package/src/LineChart/LineChartBicolor.tsx +80 -516
- package/src/LineChart/index.tsx +266 -1778
- package/src/PieChart/index.tsx +20 -84
- package/src/PieChart/main.tsx +47 -119
- package/src/PopulationPyramid/index.tsx +90 -203
- package/src/index.tsx +2 -14
- package/src/BarChart/types.ts +0 -394
- package/src/Components/BarAndLineChartsWrapper/renderLineInBarChart.tsx +0 -402
- package/src/LineChart/types.ts +0 -575
- package/src/PieChart/types.ts +0 -77
- package/src/PopulationPyramid/types.ts +0 -200
- package/src/utils/constants.ts +0 -333
- package/src/utils/index.tsx +0 -1137
- package/src/utils/types.ts +0 -360
package/src/PieChart/index.tsx
CHANGED
|
@@ -1,95 +1,31 @@
|
|
|
1
|
-
import React
|
|
1
|
+
import React from 'react';
|
|
2
2
|
import {View} from 'react-native';
|
|
3
3
|
import {PieChartMain} from './main';
|
|
4
|
-
import {pieColors} from '
|
|
5
|
-
import { PieChartPropsType } from './types';
|
|
4
|
+
import {PieChartPropsType, pieColors, usePieChart} from 'gifted-charts-core';
|
|
6
5
|
|
|
7
6
|
export const PieChart = (props: PieChartPropsType) => {
|
|
8
|
-
const radius = props.radius || 120;
|
|
9
|
-
const extraRadiusForFocused =
|
|
10
|
-
props.extraRadiusForFocused ??
|
|
11
|
-
(props.focusOnPress || props.sectionAutoFocus ? radius / 10 : 0);
|
|
12
|
-
const pi = props.semiCircle ? Math.PI / 2 : Math.PI;
|
|
13
|
-
const [selectedIndex, setSelectedIndex] = useState(-1); // at the start, nothing is selected
|
|
14
|
-
// because we're going to use a useEffect, we need startAngle and total to be state variables
|
|
15
|
-
const [startAngle, setStartAngle] = useState(
|
|
16
|
-
props.initialAngle || (props.semiCircle ? -pi : 0),
|
|
17
|
-
);
|
|
18
|
-
const [total, setTotal] = useState(0);
|
|
19
|
-
|
|
20
|
-
useEffect(() => {
|
|
21
|
-
// Update the total, this could be use to replace the forEach : const newTotal = props.data.reduce((acc, item) => acc + item.value, 0);
|
|
22
|
-
let newTotal = 0;
|
|
23
|
-
props.data.forEach(item => {
|
|
24
|
-
newTotal += item.value;
|
|
25
|
-
});
|
|
26
|
-
setTotal(newTotal);
|
|
27
|
-
|
|
28
|
-
// Update selectedIndex based on focused item
|
|
29
|
-
const newSelectedIndex = props.data.findIndex(
|
|
30
|
-
item => item.focused === true,
|
|
31
|
-
);
|
|
32
|
-
setSelectedIndex(newSelectedIndex);
|
|
33
|
-
|
|
34
|
-
// Calculate the new start angle
|
|
35
|
-
let newStartAngle = props.initialAngle || (props.semiCircle ? -pi : 0);
|
|
36
|
-
if (newSelectedIndex !== -1) {
|
|
37
|
-
// it was !== 0 here before, which would not work, it's either !==-1 or >=0
|
|
38
|
-
// This could be used to replace the for loop that was used before
|
|
39
|
-
const sumBeforeSelectedIndex = props.data
|
|
40
|
-
.slice(0, newSelectedIndex)
|
|
41
|
-
.reduce((acc, item) => acc + item.value, 0);
|
|
42
|
-
setStartAngle(
|
|
43
|
-
newStartAngle + (2 * pi * sumBeforeSelectedIndex) / (newTotal || 1),
|
|
44
|
-
);
|
|
45
|
-
} else {
|
|
46
|
-
setStartAngle(newStartAngle);
|
|
47
|
-
}
|
|
48
|
-
}, [props.data, props.initialAngle, props.semiCircle]);
|
|
49
|
-
|
|
50
|
-
useEffect(() => {
|
|
51
|
-
if (selectedIndex !== -1) {
|
|
52
|
-
const newStartAngle = props.initialAngle || (props.semiCircle ? -pi : 0);
|
|
53
|
-
let start = 0;
|
|
54
|
-
for (let i = 0; i < selectedIndex; i++) {
|
|
55
|
-
start += props.data[i].value;
|
|
56
|
-
}
|
|
57
|
-
if (total) {
|
|
58
|
-
setStartAngle(newStartAngle + (2 * pi * start) / (total || 1));
|
|
59
|
-
}
|
|
60
|
-
}
|
|
61
|
-
}, [selectedIndex]);
|
|
62
|
-
|
|
63
7
|
const {
|
|
64
|
-
|
|
8
|
+
radius,
|
|
9
|
+
extraRadiusForFocused,
|
|
10
|
+
selectedIndex,
|
|
11
|
+
setSelectedIndex,
|
|
12
|
+
startAngle,
|
|
13
|
+
total,
|
|
65
14
|
donut,
|
|
66
15
|
isThreeD,
|
|
67
16
|
semiCircle,
|
|
68
|
-
inwardExtraLengthForFocused
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
const innerCircleBorderColor = props.innerCircleBorderColor || 'lightgray';
|
|
81
|
-
const shiftInnerCenterX = props.shiftInnerCenterX || 0;
|
|
82
|
-
const shiftInnerCenterY = props.shiftInnerCenterY || 0;
|
|
83
|
-
|
|
84
|
-
let tiltAngle = props.tiltAngle || '55deg';
|
|
85
|
-
|
|
86
|
-
let isDataShifted = false;
|
|
87
|
-
|
|
88
|
-
data.forEach((item: any) => {
|
|
89
|
-
if (item.shiftX || item.shiftY) {
|
|
90
|
-
isDataShifted = true;
|
|
91
|
-
}
|
|
92
|
-
});
|
|
17
|
+
inwardExtraLengthForFocused,
|
|
18
|
+
canvasWidth,
|
|
19
|
+
canvasHeight,
|
|
20
|
+
innerRadius,
|
|
21
|
+
innerCircleColor,
|
|
22
|
+
innerCircleBorderWidth,
|
|
23
|
+
innerCircleBorderColor,
|
|
24
|
+
shiftInnerCenterX,
|
|
25
|
+
shiftInnerCenterY,
|
|
26
|
+
tiltAngle,
|
|
27
|
+
isDataShifted,
|
|
28
|
+
} = usePieChart(props);
|
|
93
29
|
|
|
94
30
|
const renderInnerCircle = (innerRadius, innerCircleBorderWidth) => {
|
|
95
31
|
if (props.centerLabelComponent || (donut && !isDataShifted)) {
|
package/src/PieChart/main.tsx
CHANGED
|
@@ -9,126 +9,54 @@ import Svg, {
|
|
|
9
9
|
Stop,
|
|
10
10
|
G,
|
|
11
11
|
} from 'react-native-svg';
|
|
12
|
-
import {
|
|
13
|
-
|
|
14
|
-
|
|
12
|
+
import {
|
|
13
|
+
getPieChartMainProps,
|
|
14
|
+
PieChartMainProps,
|
|
15
|
+
pieColors,
|
|
16
|
+
rnVersion,
|
|
17
|
+
} from 'gifted-charts-core';
|
|
15
18
|
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
const showText = props.showText || false;
|
|
59
|
-
const textColor = props.textColor || '';
|
|
60
|
-
const textSize = props.textSize ? Math.min(props.textSize, radius / 5) : 16;
|
|
61
|
-
let tiltAngle = props.tiltAngle || '55deg';
|
|
62
|
-
if (
|
|
63
|
-
tiltAngle &&
|
|
64
|
-
!isNaN(Number(tiltAngle)) &&
|
|
65
|
-
!(tiltAngle + '').endsWith('deg')
|
|
66
|
-
) {
|
|
67
|
-
tiltAngle += 'deg';
|
|
68
|
-
}
|
|
69
|
-
// const tilt = props.tilt ? Math.min(props.tilt, 1) : props.isThreeD ? 0.5 : 1;
|
|
70
|
-
const labelsPosition = props.labelsPosition
|
|
71
|
-
? props.labelsPosition
|
|
72
|
-
: donut || props.centerLabelComponent
|
|
73
|
-
? 'outward'
|
|
74
|
-
: 'mid';
|
|
75
|
-
|
|
76
|
-
const showTextBackground = props.showTextBackground || false;
|
|
77
|
-
const textBackgroundColor = props.textBackgroundColor || 'white';
|
|
78
|
-
const showValuesAsLabels = props.showValuesAsLabels || false;
|
|
79
|
-
const showGradient = props.showGradient || false;
|
|
80
|
-
const gradientCenterColor = props.gradientCenterColor || 'white';
|
|
81
|
-
const toggleFocusOnPress = props.toggleFocusOnPress ?? true;
|
|
82
|
-
|
|
83
|
-
let minShiftX = 0,
|
|
84
|
-
maxShiftX = 0,
|
|
85
|
-
minShiftY = 0,
|
|
86
|
-
maxShiftY = 0,
|
|
87
|
-
total = 0;
|
|
88
|
-
|
|
89
|
-
data.forEach((item: any) => {
|
|
90
|
-
if (item.shiftX || item.shiftY) {
|
|
91
|
-
if (minShiftX > item.shiftX) {
|
|
92
|
-
minShiftX = item.shiftX;
|
|
93
|
-
}
|
|
94
|
-
if (minShiftY > item.shiftY) {
|
|
95
|
-
minShiftY = item.shiftY;
|
|
96
|
-
}
|
|
97
|
-
if (maxShiftX < item.shiftX) {
|
|
98
|
-
maxShiftX = item.shiftX;
|
|
99
|
-
}
|
|
100
|
-
if (maxShiftY < item.shiftY) {
|
|
101
|
-
maxShiftY = item.shiftY;
|
|
102
|
-
}
|
|
103
|
-
}
|
|
104
|
-
});
|
|
105
|
-
|
|
106
|
-
const horizAdjustment = maxShiftX - minShiftX;
|
|
107
|
-
const vertAdjustment = maxShiftY - minShiftY;
|
|
108
|
-
|
|
109
|
-
if (semiCircle) {
|
|
110
|
-
pi = Math.PI / 2;
|
|
111
|
-
}
|
|
112
|
-
|
|
113
|
-
let cx = radius,
|
|
114
|
-
cy = radius;
|
|
115
|
-
|
|
116
|
-
total =
|
|
117
|
-
data && data.length
|
|
118
|
-
? data.map(item => item.value).reduce((v, a) => v + a)
|
|
119
|
-
: 0;
|
|
120
|
-
let acc = 0;
|
|
121
|
-
let pData = data.map(item => {
|
|
122
|
-
acc += item.value / total;
|
|
123
|
-
return acc;
|
|
124
|
-
});
|
|
125
|
-
acc = 0;
|
|
126
|
-
let mData = data.map(item => {
|
|
127
|
-
let pAcc = acc;
|
|
128
|
-
acc += item.value / total;
|
|
129
|
-
return pAcc + (acc - pAcc) / 2;
|
|
130
|
-
});
|
|
131
|
-
pData = [0, ...pData];
|
|
19
|
+
export const PieChartMain = (props: PieChartMainProps) => {
|
|
20
|
+
const {
|
|
21
|
+
isThreeD,
|
|
22
|
+
isBiggerPie,
|
|
23
|
+
data,
|
|
24
|
+
showInnerComponent,
|
|
25
|
+
radius,
|
|
26
|
+
canvasWidth,
|
|
27
|
+
canvasHeight,
|
|
28
|
+
shadowWidth,
|
|
29
|
+
backgroundColor,
|
|
30
|
+
shadowColor,
|
|
31
|
+
semiCircle,
|
|
32
|
+
pi,
|
|
33
|
+
initialAngle,
|
|
34
|
+
shadow,
|
|
35
|
+
donut,
|
|
36
|
+
strokeWidth,
|
|
37
|
+
strokeColor,
|
|
38
|
+
innerRadius,
|
|
39
|
+
showText,
|
|
40
|
+
textColor,
|
|
41
|
+
textSize,
|
|
42
|
+
tiltAngle,
|
|
43
|
+
labelsPosition,
|
|
44
|
+
showTextBackground,
|
|
45
|
+
textBackgroundColor,
|
|
46
|
+
showValuesAsLabels,
|
|
47
|
+
showGradient,
|
|
48
|
+
gradientCenterColor,
|
|
49
|
+
toggleFocusOnPress,
|
|
50
|
+
minShiftX,
|
|
51
|
+
minShiftY,
|
|
52
|
+
total,
|
|
53
|
+
horizAdjustment,
|
|
54
|
+
vertAdjustment,
|
|
55
|
+
cx,
|
|
56
|
+
cy,
|
|
57
|
+
pData,
|
|
58
|
+
mData,
|
|
59
|
+
} = getPieChartMainProps(props);
|
|
132
60
|
|
|
133
61
|
return (
|
|
134
62
|
<View
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import React, {Fragment} from 'react';
|
|
2
2
|
import {View} from 'react-native';
|
|
3
|
-
import {PopulationPyramidPropsType, RulesProps} from './types';
|
|
4
3
|
import {
|
|
5
|
-
|
|
6
|
-
|
|
4
|
+
PopulationPyramidPropsType,
|
|
5
|
+
RulesProps,
|
|
7
6
|
ruleTypes,
|
|
8
|
-
|
|
7
|
+
usePopulationPyramid,
|
|
8
|
+
} from 'gifted-charts-core';
|
|
9
9
|
import {
|
|
10
10
|
ClipPath,
|
|
11
11
|
Line,
|
|
@@ -17,208 +17,95 @@ import {
|
|
|
17
17
|
|
|
18
18
|
export const PopulationPyramid = (props: PopulationPyramidPropsType) => {
|
|
19
19
|
const {
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
barsMapToYAxisSections = populationDefaults.barsMapToYAxisSections,
|
|
20
|
+
width,
|
|
21
|
+
verticalMarginBetweenBars,
|
|
22
|
+
barsMapToYAxisSections,
|
|
24
23
|
data,
|
|
25
|
-
hideRules
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
xAxisIndicesHeight = populationDefaults.xAxisIndicesHeight,
|
|
37
|
-
xAxisIndicesColor = populationDefaults.xAxisIndicesColor,
|
|
38
|
-
xAxisIndicesShiftY = 0,
|
|
39
|
-
showXAxisLabelTexts = populationDefaults.showXAxisLabelTexts,
|
|
40
|
-
xAxisLabelFontSize = populationDefaults.defaultFontSize,
|
|
41
|
-
xAxisLabelFontStyle = populationDefaults.defaultFontStyle,
|
|
42
|
-
xAxisLabelFontWeight = populationDefaults.defaultFontWeight,
|
|
43
|
-
xAxisLabelFontFamily = populationDefaults.defaultFontFamily,
|
|
44
|
-
xAxisLabelColor = populationDefaults.defaultFontColor,
|
|
45
|
-
xAxisLabelShiftX = 0,
|
|
46
|
-
xAxisLabelShiftY = 0,
|
|
47
|
-
xAxisLabelPrefix = populationDefaults.prefix,
|
|
48
|
-
xAxisLabelSuffix = populationDefaults.suffix,
|
|
24
|
+
hideRules,
|
|
25
|
+
yAxisColor,
|
|
26
|
+
xAxisColor,
|
|
27
|
+
xAxisThickness,
|
|
28
|
+
xAxisType,
|
|
29
|
+
xAxisNoOfSections,
|
|
30
|
+
showXAxisIndices,
|
|
31
|
+
showXAxisLabelTexts,
|
|
32
|
+
xAxisLabelShiftX,
|
|
33
|
+
xAxisLabelPrefix,
|
|
34
|
+
xAxisLabelSuffix,
|
|
49
35
|
formatXAxisLabels,
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
leftBarLabelFontWeight = props.barLabelFontWeight ??
|
|
84
|
-
populationDefaults.defaultFontWeight,
|
|
85
|
-
leftBarLabelFontFamily = props.barLabelFontFamily ??
|
|
86
|
-
populationDefaults.defaultFontFamily,
|
|
87
|
-
leftBarLabelPrefix = populationDefaults.prefix,
|
|
88
|
-
leftBarLabelSuffix = populationDefaults.suffix,
|
|
89
|
-
|
|
90
|
-
rightBarLabelWidth = populationDefaults.rightBarLabelWidth,
|
|
91
|
-
rightBarLabelFontSize = props.barLabelFontSize ??
|
|
92
|
-
populationDefaults.defaultFontSize,
|
|
93
|
-
rightBarLabelColor = props.barLabelColor ??
|
|
94
|
-
populationDefaults.defaultFontColor,
|
|
95
|
-
rightBarLabelFontStyle = props.barLabelFontStyle ??
|
|
96
|
-
populationDefaults.defaultFontStyle,
|
|
97
|
-
rightBarLabelFontWeight = props.barLabelFontWeight ??
|
|
98
|
-
populationDefaults.defaultFontWeight,
|
|
99
|
-
rightBarLabelFontFamily = props.barLabelFontFamily ??
|
|
100
|
-
populationDefaults.defaultFontFamily,
|
|
101
|
-
rightBarLabelPrefix = populationDefaults.prefix,
|
|
102
|
-
rightBarLabelSuffix = populationDefaults.suffix,
|
|
36
|
+
showVerticalLines,
|
|
37
|
+
showYAxisIndices,
|
|
38
|
+
yAxisIndicesWidth,
|
|
39
|
+
yAxisIndicesHeight,
|
|
40
|
+
yAxisIndicesColor,
|
|
41
|
+
yAxisLabelFontSize,
|
|
42
|
+
yAxisLabelFontStyle,
|
|
43
|
+
yAxisLabelFontWeight,
|
|
44
|
+
yAxisLabelFontFamily,
|
|
45
|
+
yAxisLabelColor,
|
|
46
|
+
yAxisLabelTextMarginRight,
|
|
47
|
+
yAxisLabelTexts,
|
|
48
|
+
showValuesAsBarLabels,
|
|
49
|
+
rulesThickness,
|
|
50
|
+
rulesColor,
|
|
51
|
+
rulesType,
|
|
52
|
+
dashWidth,
|
|
53
|
+
dashGap,
|
|
54
|
+
leftBarLabelWidth,
|
|
55
|
+
leftBarLabelFontSize,
|
|
56
|
+
leftBarLabelColor,
|
|
57
|
+
leftBarLabelFontStyle,
|
|
58
|
+
leftBarLabelFontWeight,
|
|
59
|
+
leftBarLabelFontFamily,
|
|
60
|
+
leftBarLabelPrefix,
|
|
61
|
+
leftBarLabelSuffix,
|
|
62
|
+
rightBarLabelFontSize,
|
|
63
|
+
rightBarLabelColor,
|
|
64
|
+
rightBarLabelFontStyle,
|
|
65
|
+
rightBarLabelFontWeight,
|
|
66
|
+
rightBarLabelFontFamily,
|
|
67
|
+
rightBarLabelPrefix,
|
|
68
|
+
rightBarLabelSuffix,
|
|
103
69
|
formatBarLabels,
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
const containerHeight = props.stepHeight
|
|
144
|
-
? props.stepHeight * noOfSections
|
|
145
|
-
: height;
|
|
146
|
-
const stepHeight = props.stepHeight ?? containerHeight / noOfSections;
|
|
147
|
-
|
|
148
|
-
const xAxisLabelsHeight = 80;
|
|
149
|
-
const containerHeightWithXaxisLabels = containerHeight + xAxisLabelsHeight;
|
|
150
|
-
|
|
151
|
-
const mid = (width + yAxisLabelWidth) / 2;
|
|
152
|
-
|
|
153
|
-
const leftMax = Math.max(...data.map(item => item.left));
|
|
154
|
-
const rightMax = Math.max(...data.map(item => item.right));
|
|
155
|
-
|
|
156
|
-
const max = Math.max(leftMax, rightMax);
|
|
157
|
-
|
|
158
|
-
const xAxisRoundToDigits =
|
|
159
|
-
props.xAxisRoundToDigits ??
|
|
160
|
-
(max < 0.1 ? 3 : max < 1 ? 2 : max < 10 ? 1 : 0);
|
|
161
|
-
|
|
162
|
-
const midAxisAndLabelWidth =
|
|
163
|
-
(showMidAxis ? midAxisLabelWidth : 0) / 2 +
|
|
164
|
-
Math.max(leftBarLabelWidth, rightBarLabelWidth);
|
|
165
|
-
const barWidthFactor =
|
|
166
|
-
((width - yAxisLabelWidth) / 2 - midAxisAndLabelWidth) / max;
|
|
167
|
-
|
|
168
|
-
const leftXAfterMid = mid - (showMidAxis ? midAxisLabelWidth / 2 : 0);
|
|
169
|
-
const rightXAfterMid = mid + (showMidAxis ? midAxisLabelWidth / 2 : 0);
|
|
170
|
-
|
|
171
|
-
const yAxisLineProps: RulesProps = {
|
|
172
|
-
x1: yAxisLabelWidth,
|
|
173
|
-
y1: 0,
|
|
174
|
-
x2: yAxisLabelWidth,
|
|
175
|
-
y2: containerHeight,
|
|
176
|
-
stroke: yAxisColor,
|
|
177
|
-
strokeWidth: yAxisThickness,
|
|
178
|
-
};
|
|
179
|
-
if (props.yAxisStrokeDashArray?.length === 2) {
|
|
180
|
-
yAxisLineProps.strokeDasharray = props.yAxisStrokeDashArray;
|
|
181
|
-
}
|
|
182
|
-
|
|
183
|
-
const midAxisLineCommonProps: RulesProps = {
|
|
184
|
-
y1: 0,
|
|
185
|
-
y2: containerHeight,
|
|
186
|
-
strokeWidth: props.midAxisThickness ?? yAxisThickness,
|
|
187
|
-
};
|
|
188
|
-
if (props.midAxisStrokeDashArray?.length === 2) {
|
|
189
|
-
midAxisLineCommonProps.strokeDasharray = props.midAxisStrokeDashArray;
|
|
190
|
-
}
|
|
191
|
-
|
|
192
|
-
const xAxisLabelY =
|
|
193
|
-
containerHeight + xAxisLabelFontSize + 6 + xAxisLabelShiftY;
|
|
194
|
-
const xAxisIndicesCommonProps = {
|
|
195
|
-
y1: containerHeight - xAxisIndicesHeight / 2 + xAxisIndicesShiftY,
|
|
196
|
-
y2: containerHeight + xAxisIndicesHeight / 2 + xAxisIndicesShiftY,
|
|
197
|
-
stroke: xAxisIndicesColor,
|
|
198
|
-
strokeWidth: xAxisIndicesWidth,
|
|
199
|
-
};
|
|
200
|
-
const verticalLinesCommonProps: RulesProps = {
|
|
201
|
-
y1: 0,
|
|
202
|
-
y2: containerHeight,
|
|
203
|
-
stroke: verticalLinesColor,
|
|
204
|
-
strokeWidth: verticalLinesThickness,
|
|
205
|
-
};
|
|
206
|
-
if (verticalLinesType !== ruleTypes.SOLID) {
|
|
207
|
-
verticalLinesCommonProps.strokeDasharray = verticalLinesStrokeDashArray;
|
|
208
|
-
}
|
|
209
|
-
const xAxisLabelsCommonProps = {
|
|
210
|
-
y: xAxisLabelY + xAxisLabelShiftY,
|
|
211
|
-
stroke: xAxisLabelColor,
|
|
212
|
-
fontSize: xAxisLabelFontSize,
|
|
213
|
-
fontStyle: xAxisLabelFontStyle,
|
|
214
|
-
fontWeight: xAxisLabelFontWeight,
|
|
215
|
-
fontFamily: xAxisLabelFontFamily,
|
|
216
|
-
};
|
|
217
|
-
|
|
218
|
-
const getXLabel = (index: number) =>
|
|
219
|
-
((leftXAfterMid * index) / xAxisNoOfSections / barWidthFactor)
|
|
220
|
-
.toFixed(xAxisRoundToDigits)
|
|
221
|
-
.toString();
|
|
70
|
+
showMidAxis,
|
|
71
|
+
midAxisLabelFontSize,
|
|
72
|
+
midAxisLabelColor,
|
|
73
|
+
midAxisLabelFontStyle,
|
|
74
|
+
midAxisLabelFontWeight,
|
|
75
|
+
midAxisLabelFontFamily,
|
|
76
|
+
leftBarColor,
|
|
77
|
+
rightBarColor,
|
|
78
|
+
leftBarBorderColor,
|
|
79
|
+
rightBarBorderColor,
|
|
80
|
+
leftBarBorderWidth,
|
|
81
|
+
rightBarBorderWidth,
|
|
82
|
+
leftBarBorderRadius,
|
|
83
|
+
rightBarBorderRadius,
|
|
84
|
+
allCornersRounded,
|
|
85
|
+
showSurplus,
|
|
86
|
+
showSurplusLeft,
|
|
87
|
+
showSurplusRight,
|
|
88
|
+
leftSurplusColor,
|
|
89
|
+
leftSurplusBorderColor,
|
|
90
|
+
rightSurplusColor,
|
|
91
|
+
rightSurplusBorderColor,
|
|
92
|
+
leftSurplusBorderWidth,
|
|
93
|
+
rightSurplusBorderWidth,
|
|
94
|
+
yAxisLabelWidth,
|
|
95
|
+
noOfSections,
|
|
96
|
+
stepHeight,
|
|
97
|
+
containerHeightWithXaxisLabels,
|
|
98
|
+
mid,
|
|
99
|
+
barWidthFactor,
|
|
100
|
+
leftXAfterMid,
|
|
101
|
+
rightXAfterMid,
|
|
102
|
+
yAxisLineProps,
|
|
103
|
+
midAxisLineCommonProps,
|
|
104
|
+
xAxisIndicesCommonProps,
|
|
105
|
+
verticalLinesCommonProps,
|
|
106
|
+
xAxisLabelsCommonProps,
|
|
107
|
+
getXLabel,
|
|
108
|
+
} = usePopulationPyramid(props);
|
|
222
109
|
|
|
223
110
|
return (
|
|
224
111
|
<View style={{height: containerHeightWithXaxisLabels, width}}>
|
package/src/index.tsx
CHANGED
|
@@ -8,22 +8,10 @@ export {
|
|
|
8
8
|
barDataItem,
|
|
9
9
|
stackDataItem,
|
|
10
10
|
BarChartPropsType,
|
|
11
|
-
StackedBarChartPropsType,
|
|
12
|
-
} from './BarChart/types';
|
|
13
|
-
|
|
14
|
-
export {pieDataItem, PieChartPropsType} from './PieChart/types';
|
|
15
|
-
|
|
16
|
-
export {
|
|
11
|
+
StackedBarChartPropsType,pieDataItem, PieChartPropsType,
|
|
17
12
|
lineDataItem,
|
|
18
13
|
bicolorLineDataItem,
|
|
19
14
|
LineChartPropsType,
|
|
20
15
|
LineChartBicolorPropsType,
|
|
21
|
-
} from './LineChart/types';
|
|
22
|
-
|
|
23
|
-
export {
|
|
24
16
|
popnPyramidDataItem,
|
|
25
|
-
PopulationPyramidPropsType,
|
|
26
|
-
} from './PopulationPyramid/types';
|
|
27
|
-
|
|
28
|
-
export {chartTypes, yAxisSides, ruleTypes} from './utils/constants';
|
|
29
|
-
export {CurveType, EdgePosition} from './utils/types';
|
|
17
|
+
PopulationPyramidPropsType,chartTypes, yAxisSides, EdgePosition} from 'gifted-charts-core';
|