gifted-charts-core 0.1.1 → 0.1.2
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/package.json +1 -1
- package/src/PieChart/pro.d.ts +9 -0
- package/src/PieChart/pro.js +49 -5
- package/src/PieChart/pro.ts +44 -6
- package/src/PieChart/types.d.ts +3 -0
- package/src/PieChart/types.ts +3 -0
package/package.json
CHANGED
package/src/PieChart/pro.d.ts
CHANGED
|
@@ -1,10 +1,16 @@
|
|
|
1
1
|
import { PieChartPropsType, pieDataItem } from './types';
|
|
2
2
|
import { LabelsPosition } from '../utils/types';
|
|
3
|
+
interface IsvgProps {
|
|
4
|
+
height: number;
|
|
5
|
+
width: number;
|
|
6
|
+
viewBox: string;
|
|
7
|
+
}
|
|
3
8
|
interface IusePiePro {
|
|
4
9
|
radius: number;
|
|
5
10
|
total: number;
|
|
6
11
|
donut?: boolean;
|
|
7
12
|
strokeWidth: number;
|
|
13
|
+
maxStrokeWidth: number;
|
|
8
14
|
isAnimated?: boolean;
|
|
9
15
|
animationDuration: number;
|
|
10
16
|
initial: string;
|
|
@@ -17,6 +23,9 @@ interface IusePiePro {
|
|
|
17
23
|
y: number;
|
|
18
24
|
};
|
|
19
25
|
labelsPosition: LabelsPosition;
|
|
26
|
+
heightFactor: number;
|
|
27
|
+
height: number;
|
|
28
|
+
svgProps: IsvgProps;
|
|
20
29
|
}
|
|
21
30
|
export declare const usePiePro: (props: PieChartPropsType) => IusePiePro;
|
|
22
31
|
export {};
|
package/src/PieChart/pro.js
CHANGED
|
@@ -1,10 +1,43 @@
|
|
|
1
|
+
var __read = (this && this.__read) || function (o, n) {
|
|
2
|
+
var m = typeof Symbol === "function" && o[Symbol.iterator];
|
|
3
|
+
if (!m) return o;
|
|
4
|
+
var i = m.call(o), r, ar = [], e;
|
|
5
|
+
try {
|
|
6
|
+
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
|
|
7
|
+
}
|
|
8
|
+
catch (error) { e = { error: error }; }
|
|
9
|
+
finally {
|
|
10
|
+
try {
|
|
11
|
+
if (r && !r.done && (m = i["return"])) m.call(i);
|
|
12
|
+
}
|
|
13
|
+
finally { if (e) throw e.error; }
|
|
14
|
+
}
|
|
15
|
+
return ar;
|
|
16
|
+
};
|
|
17
|
+
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
|
|
18
|
+
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
|
|
19
|
+
if (ar || !(i in from)) {
|
|
20
|
+
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
|
|
21
|
+
ar[i] = from[i];
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
return to.concat(ar || Array.prototype.slice.call(from));
|
|
25
|
+
};
|
|
1
26
|
import { defaultAnimationDuration } from '../utils/constants';
|
|
2
27
|
export var usePiePro = function (props) {
|
|
3
28
|
var _a, _b;
|
|
4
|
-
var data = props.data, isAnimated = props.isAnimated, donut = props.donut, semiCircle = props.semiCircle, _c = props.radius, radius = _c === void 0 ? 120 : _c, _d = props.innerRadius, innerRadius = _d === void 0 ? donut ? radius / 2.5 : 0 : _d, _e = props.strokeWidth, strokeWidth = _e === void 0 ? 0 : _e, _f = props.edgesRadius, edgesRadius = _f === void 0 ? 0 : _f, _g = props.startAngle, startAngle = _g === void 0 ? 0 : _g;
|
|
29
|
+
var data = props.data, isAnimated = props.isAnimated, donut = props.donut, semiCircle = props.semiCircle, _c = props.radius, radius = _c === void 0 ? 120 : _c, _d = props.innerRadius, innerRadius = _d === void 0 ? donut ? radius / 2.5 : 0 : _d, _e = props.strokeWidth, strokeWidth = _e === void 0 ? 0 : _e, _f = props.edgesRadius, edgesRadius = _f === void 0 ? 0 : _f, _g = props.startAngle, startAngle = _g === void 0 ? 0 : _g, ring = props.ring;
|
|
5
30
|
var endAngle = (_a = props.endAngle) !== null && _a !== void 0 ? _a : startAngle + Math.PI * (semiCircle ? 1 : 2);
|
|
6
31
|
var total = data.reduce(function (acc, item) { return acc + (item === null || item === void 0 ? void 0 : item.value); }, 0);
|
|
7
32
|
var animationDuration = (_b = props.animationDuration) !== null && _b !== void 0 ? _b : defaultAnimationDuration;
|
|
33
|
+
var maxStrokeWidth = Math.max.apply(Math, __spreadArray(__spreadArray([], __read(data.map(function (item) { var _a; return (_a = item.strokeWidth) !== null && _a !== void 0 ? _a : 0; })), false), [strokeWidth], false));
|
|
34
|
+
var heightFactor = semiCircle ? 1 : 2;
|
|
35
|
+
var height = radius + maxStrokeWidth;
|
|
36
|
+
var svgProps = {
|
|
37
|
+
height: (radius + maxStrokeWidth) * 2,
|
|
38
|
+
width: (radius + maxStrokeWidth) * 2,
|
|
39
|
+
viewBox: "".concat(-maxStrokeWidth, " ").concat(-maxStrokeWidth - (semiCircle ? height / 2 : 0), " ").concat((radius + maxStrokeWidth) * 2, " ").concat((radius + maxStrokeWidth) * 2)
|
|
40
|
+
};
|
|
8
41
|
// let endAngleLocal = 0
|
|
9
42
|
var addValues = function (index) {
|
|
10
43
|
var _a;
|
|
@@ -80,7 +113,9 @@ export var usePiePro = function (props) {
|
|
|
80
113
|
var _a = getCoordinates(0, (radius - innerRadius) / (radius / 20)), startInnerX = _a.startInnerX, startInnerY = _a.startInnerY, startOuterX = _a.startOuterX, startOuterY = _a.startOuterY;
|
|
81
114
|
return "M".concat(startInnerX, ",").concat(startInnerY, " L").concat(startOuterX, ",").concat(startOuterY, " ");
|
|
82
115
|
}
|
|
83
|
-
return
|
|
116
|
+
return ring
|
|
117
|
+
? "M".concat(radius * 2, ",").concat(radius)
|
|
118
|
+
: "M".concat(radius + innerRadius, ",").concat(radius, " h").concat(radius - innerRadius, " ");
|
|
84
119
|
};
|
|
85
120
|
var getPath = function (index, totalParam) {
|
|
86
121
|
var _a, _b;
|
|
@@ -91,8 +126,13 @@ export var usePiePro = function (props) {
|
|
|
91
126
|
? 1
|
|
92
127
|
: 0;
|
|
93
128
|
var arc = "A".concat(radius + ((_b = props.strokeWidth) !== null && _b !== void 0 ? _b : 0) / 2, ",").concat(radius, " 0 ").concat(isLargeArc, " 0 ");
|
|
94
|
-
var path = "".concat(arc, " ").concat(endOuterX, ", ").concat(endOuterY, "
|
|
95
|
-
|
|
129
|
+
var path = "".concat(arc, " ").concat(endOuterX, ", ").concat(endOuterY, " ");
|
|
130
|
+
if (!ring) {
|
|
131
|
+
path += "L".concat(radius, ",").concat(radius, " ");
|
|
132
|
+
}
|
|
133
|
+
initial = ring
|
|
134
|
+
? "M".concat(endOuterX, ",").concat(endOuterY, " ")
|
|
135
|
+
: "M".concat(radius, ",").concat(radius, " L").concat(endOuterX, ",").concat(endOuterY);
|
|
96
136
|
return path;
|
|
97
137
|
};
|
|
98
138
|
var getDonutPath = function (index, item, totalParam) {
|
|
@@ -153,6 +193,7 @@ export var usePiePro = function (props) {
|
|
|
153
193
|
total: total,
|
|
154
194
|
donut: donut,
|
|
155
195
|
strokeWidth: strokeWidth,
|
|
196
|
+
maxStrokeWidth: maxStrokeWidth,
|
|
156
197
|
isAnimated: isAnimated,
|
|
157
198
|
animationDuration: animationDuration,
|
|
158
199
|
initial: initial,
|
|
@@ -161,6 +202,9 @@ export var usePiePro = function (props) {
|
|
|
161
202
|
getStartCaps: getStartCaps,
|
|
162
203
|
getEndCaps: getEndCaps,
|
|
163
204
|
getTextCoordinates: getTextCoordinates,
|
|
164
|
-
labelsPosition: labelsPosition
|
|
205
|
+
labelsPosition: labelsPosition,
|
|
206
|
+
heightFactor: heightFactor,
|
|
207
|
+
height: height,
|
|
208
|
+
svgProps: svgProps
|
|
165
209
|
};
|
|
166
210
|
};
|
package/src/PieChart/pro.ts
CHANGED
|
@@ -2,11 +2,18 @@ import { defaultAnimationDuration } from '../utils/constants'
|
|
|
2
2
|
import { PieChartPropsType, pieDataItem } from './types'
|
|
3
3
|
import { LabelsPosition } from '../utils/types'
|
|
4
4
|
|
|
5
|
+
interface IsvgProps {
|
|
6
|
+
height: number
|
|
7
|
+
width: number
|
|
8
|
+
viewBox: string
|
|
9
|
+
}
|
|
10
|
+
|
|
5
11
|
interface IusePiePro {
|
|
6
12
|
radius: number
|
|
7
13
|
total: number
|
|
8
14
|
donut?: boolean
|
|
9
15
|
strokeWidth: number
|
|
16
|
+
maxStrokeWidth: number
|
|
10
17
|
isAnimated?: boolean
|
|
11
18
|
animationDuration: number
|
|
12
19
|
initial: string
|
|
@@ -19,6 +26,9 @@ interface IusePiePro {
|
|
|
19
26
|
labelPos?: LabelsPosition
|
|
20
27
|
) => { x: number; y: number }
|
|
21
28
|
labelsPosition: LabelsPosition
|
|
29
|
+
heightFactor: number
|
|
30
|
+
height: number
|
|
31
|
+
svgProps: IsvgProps
|
|
22
32
|
}
|
|
23
33
|
|
|
24
34
|
export const usePiePro = (props: PieChartPropsType): IusePiePro => {
|
|
@@ -31,12 +41,29 @@ export const usePiePro = (props: PieChartPropsType): IusePiePro => {
|
|
|
31
41
|
innerRadius = donut ? radius / 2.5 : 0,
|
|
32
42
|
strokeWidth = 0,
|
|
33
43
|
edgesRadius = 0,
|
|
34
|
-
startAngle = 0
|
|
44
|
+
startAngle = 0,
|
|
45
|
+
ring
|
|
35
46
|
} = props
|
|
36
47
|
let endAngle = props.endAngle ?? startAngle + Math.PI * (semiCircle ? 1 : 2)
|
|
37
48
|
const total = data.reduce((acc, item) => acc + item?.value, 0)
|
|
38
49
|
const animationDuration = props.animationDuration ?? defaultAnimationDuration
|
|
39
50
|
|
|
51
|
+
const maxStrokeWidth = Math.max(
|
|
52
|
+
...data.map((item) => item.strokeWidth ?? 0),
|
|
53
|
+
strokeWidth
|
|
54
|
+
)
|
|
55
|
+
|
|
56
|
+
const heightFactor = semiCircle ? 1 : 2
|
|
57
|
+
const height = radius + maxStrokeWidth
|
|
58
|
+
|
|
59
|
+
const svgProps = {
|
|
60
|
+
height: (radius + maxStrokeWidth) * 2,
|
|
61
|
+
width: (radius + maxStrokeWidth) * 2,
|
|
62
|
+
viewBox: `${-maxStrokeWidth} ${
|
|
63
|
+
-maxStrokeWidth - (semiCircle ? height / 2 : 0)
|
|
64
|
+
} ${(radius + maxStrokeWidth) * 2} ${(radius + maxStrokeWidth) * 2}`
|
|
65
|
+
}
|
|
66
|
+
|
|
40
67
|
// let endAngleLocal = 0
|
|
41
68
|
|
|
42
69
|
const addValues = (index: number) => {
|
|
@@ -130,7 +157,9 @@ export const usePiePro = (props: PieChartPropsType): IusePiePro => {
|
|
|
130
157
|
|
|
131
158
|
return `M${startInnerX},${startInnerY} L${startOuterX},${startOuterY} `
|
|
132
159
|
}
|
|
133
|
-
return
|
|
160
|
+
return ring
|
|
161
|
+
? `M${radius * 2},${radius}`
|
|
162
|
+
: `M${radius + innerRadius},${radius} h${radius - innerRadius} `
|
|
134
163
|
}
|
|
135
164
|
const getPath = (index: number, totalParam?: number) => {
|
|
136
165
|
const { endOuterX, endOuterY } = getCoordinates(
|
|
@@ -150,10 +179,15 @@ export const usePiePro = (props: PieChartPropsType): IusePiePro => {
|
|
|
150
179
|
const arc = `A${
|
|
151
180
|
radius + (props.strokeWidth ?? 0) / 2
|
|
152
181
|
},${radius} 0 ${isLargeArc} 0 `
|
|
153
|
-
|
|
154
|
-
|
|
182
|
+
let path = `${arc} ${endOuterX}, ${endOuterY} `
|
|
183
|
+
|
|
184
|
+
if (!ring) {
|
|
185
|
+
path += `L${radius},${radius} `
|
|
186
|
+
}
|
|
155
187
|
|
|
156
|
-
initial =
|
|
188
|
+
initial = ring
|
|
189
|
+
? `M${endOuterX},${endOuterY} `
|
|
190
|
+
: `M${radius},${radius} L${endOuterX},${endOuterY}`
|
|
157
191
|
|
|
158
192
|
return path
|
|
159
193
|
}
|
|
@@ -258,6 +292,7 @@ export const usePiePro = (props: PieChartPropsType): IusePiePro => {
|
|
|
258
292
|
total,
|
|
259
293
|
donut,
|
|
260
294
|
strokeWidth,
|
|
295
|
+
maxStrokeWidth,
|
|
261
296
|
isAnimated,
|
|
262
297
|
animationDuration,
|
|
263
298
|
initial,
|
|
@@ -266,6 +301,9 @@ export const usePiePro = (props: PieChartPropsType): IusePiePro => {
|
|
|
266
301
|
getStartCaps,
|
|
267
302
|
getEndCaps,
|
|
268
303
|
getTextCoordinates,
|
|
269
|
-
labelsPosition
|
|
304
|
+
labelsPosition,
|
|
305
|
+
heightFactor,
|
|
306
|
+
height,
|
|
307
|
+
svgProps
|
|
270
308
|
}
|
|
271
309
|
}
|
package/src/PieChart/types.d.ts
CHANGED
|
@@ -5,6 +5,7 @@ export interface PieChartPropsType {
|
|
|
5
5
|
radius?: number;
|
|
6
6
|
isThreeD?: boolean;
|
|
7
7
|
donut?: boolean;
|
|
8
|
+
ring?: boolean;
|
|
8
9
|
innerRadius?: number;
|
|
9
10
|
shadow?: boolean;
|
|
10
11
|
innerCircleColor?: ColorValue;
|
|
@@ -16,6 +17,7 @@ export interface PieChartPropsType {
|
|
|
16
17
|
shadowWidth?: number;
|
|
17
18
|
strokeWidth?: number;
|
|
18
19
|
strokeColor?: string;
|
|
20
|
+
strokeDashArray?: number[];
|
|
19
21
|
backgroundColor?: string;
|
|
20
22
|
data: pieDataItem[];
|
|
21
23
|
semiCircle?: boolean;
|
|
@@ -79,6 +81,7 @@ export interface pieDataItem {
|
|
|
79
81
|
onPress?: Function;
|
|
80
82
|
onLabelPress?: Function;
|
|
81
83
|
strokeWidth?: number;
|
|
84
|
+
strokeDashArray?: number[];
|
|
82
85
|
strokeColor?: string;
|
|
83
86
|
focused?: boolean;
|
|
84
87
|
peripheral?: boolean;
|
package/src/PieChart/types.ts
CHANGED
|
@@ -6,6 +6,7 @@ export interface PieChartPropsType {
|
|
|
6
6
|
radius?: number
|
|
7
7
|
isThreeD?: boolean
|
|
8
8
|
donut?: boolean
|
|
9
|
+
ring?: boolean
|
|
9
10
|
innerRadius?: number
|
|
10
11
|
shadow?: boolean
|
|
11
12
|
innerCircleColor?: ColorValue
|
|
@@ -17,6 +18,7 @@ export interface PieChartPropsType {
|
|
|
17
18
|
shadowWidth?: number
|
|
18
19
|
strokeWidth?: number
|
|
19
20
|
strokeColor?: string
|
|
21
|
+
strokeDashArray?: number[]
|
|
20
22
|
backgroundColor?: string
|
|
21
23
|
data: pieDataItem[]
|
|
22
24
|
semiCircle?: boolean
|
|
@@ -82,6 +84,7 @@ export interface pieDataItem {
|
|
|
82
84
|
onPress?: Function
|
|
83
85
|
onLabelPress?: Function
|
|
84
86
|
strokeWidth?: number
|
|
87
|
+
strokeDashArray?: number[]
|
|
85
88
|
strokeColor?: string
|
|
86
89
|
focused?: boolean
|
|
87
90
|
peripheral?: boolean
|