gifted-charts-core 0.0.14 → 0.0.16
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/BarChart/Animated2DWithGradient.ts +4 -4
- package/src/BarChart/index.ts +1 -1
- package/src/BarChart/types.ts +1 -0
- package/src/LineChart/types.ts +2 -0
- package/src/PieChart/index.ts +13 -0
- package/src/PieChart/main.ts +12 -3
- package/src/PieChart/types.ts +5 -0
- package/src/utils/index.tsx +9 -1
package/package.json
CHANGED
|
@@ -13,7 +13,7 @@ export const getPropsForAnimated2DWithGradient = (props) => {
|
|
|
13
13
|
barBorderBottomLeftRadius,
|
|
14
14
|
barBorderBottomRightRadius,
|
|
15
15
|
barWidth,
|
|
16
|
-
|
|
16
|
+
barInnerComponent,
|
|
17
17
|
barStyle,
|
|
18
18
|
index,
|
|
19
19
|
opacity,
|
|
@@ -54,7 +54,7 @@ export const getPropsForAnimated2DWithGradient = (props) => {
|
|
|
54
54
|
focusedBarConfig,
|
|
55
55
|
item.frontColor,
|
|
56
56
|
frontColor,
|
|
57
|
-
isThreeD
|
|
57
|
+
isThreeD
|
|
58
58
|
);
|
|
59
59
|
const localGradientColor = item.gradientColor || gradientColor;
|
|
60
60
|
const localOpacity = opacity || 1;
|
|
@@ -118,8 +118,8 @@ export const getPropsForAnimated2DWithGradient = (props) => {
|
|
|
118
118
|
const commonPropsFor2Dand3Dbars: CommonPropsFor2Dand3DbarsType = {
|
|
119
119
|
barBackgroundPattern: item.barBackgroundPattern || barBackgroundPattern,
|
|
120
120
|
barInnerComponent: isFocused
|
|
121
|
-
? focusedBarConfig?.barInnerComponent ??
|
|
122
|
-
:
|
|
121
|
+
? focusedBarConfig?.barInnerComponent ?? barInnerComponent
|
|
122
|
+
: barInnerComponent,
|
|
123
123
|
patternId: item.patternId || patternId,
|
|
124
124
|
barWidth: localBarWidth,
|
|
125
125
|
barStyle: barStyle,
|
package/src/BarChart/index.ts
CHANGED
|
@@ -560,7 +560,7 @@ export const useBarChart = (props: extendedBarChartPropsType) => {
|
|
|
560
560
|
|
|
561
561
|
const animatedWidth = widthValue.interpolate({
|
|
562
562
|
inputRange: [0, 1],
|
|
563
|
-
outputRange: [0, totalWidth],
|
|
563
|
+
outputRange: [0, initialSpacing + totalWidth + endSpacing],
|
|
564
564
|
});
|
|
565
565
|
|
|
566
566
|
const getPropsCommonForBarAndStack = (item, index) => {
|
package/src/BarChart/types.ts
CHANGED
package/src/LineChart/types.ts
CHANGED
|
@@ -319,6 +319,7 @@ export type LineChartPropsType = {
|
|
|
319
319
|
onEndReached?: () => void;
|
|
320
320
|
onStartReached?: () => void;
|
|
321
321
|
endReachedOffset?: number;
|
|
322
|
+
onScroll?: Function;
|
|
322
323
|
|
|
323
324
|
showDataPointsForMissingValues?: boolean;
|
|
324
325
|
interpolateMissingValues?: boolean;
|
|
@@ -580,4 +581,5 @@ export type LineChartBicolorPropsType = {
|
|
|
580
581
|
adjustToWidth?: boolean;
|
|
581
582
|
getPointerProps?: Function;
|
|
582
583
|
formatYLabel?: (label: string) => string;
|
|
584
|
+
onScroll?: Function;
|
|
583
585
|
};
|
package/src/PieChart/index.ts
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { useEffect, useState } from "react";
|
|
2
2
|
import { PieChartPropsType } from "./types";
|
|
3
|
+
import { getTextSizeForPieLabels } from "../utils";
|
|
3
4
|
|
|
4
5
|
export const usePieChart = (props: PieChartPropsType) => {
|
|
5
6
|
const radius = props.radius || 120;
|
|
@@ -88,6 +89,16 @@ export const usePieChart = (props: PieChartPropsType) => {
|
|
|
88
89
|
isDataShifted = true;
|
|
89
90
|
}
|
|
90
91
|
});
|
|
92
|
+
const textSize = getTextSizeForPieLabels(props.textSize ?? 0, radius);
|
|
93
|
+
|
|
94
|
+
const paddingHorizontal =
|
|
95
|
+
props.paddingHorizontal ?? props.labelsPosition === "onBorder"
|
|
96
|
+
? (props.textBackgroundRadius ?? textSize) * 2 + 6
|
|
97
|
+
: 0;
|
|
98
|
+
const paddingVertical =
|
|
99
|
+
props.paddingVertical ?? props.labelsPosition === "onBorder"
|
|
100
|
+
? (props.textBackgroundRadius ?? textSize) * 2 + 6
|
|
101
|
+
: 0;
|
|
91
102
|
|
|
92
103
|
return {
|
|
93
104
|
radius,
|
|
@@ -115,5 +126,7 @@ export const usePieChart = (props: PieChartPropsType) => {
|
|
|
115
126
|
shiftInnerCenterY,
|
|
116
127
|
tiltAngle,
|
|
117
128
|
isDataShifted,
|
|
129
|
+
paddingHorizontal,
|
|
130
|
+
paddingVertical,
|
|
118
131
|
};
|
|
119
132
|
};
|
package/src/PieChart/main.ts
CHANGED
|
@@ -1,7 +1,14 @@
|
|
|
1
|
+
import { getTextSizeForPieLabels } from "../utils";
|
|
1
2
|
import { PieChartMainProps, pieDataItem } from "./types";
|
|
2
3
|
|
|
3
4
|
export const getPieChartMainProps = (props: PieChartMainProps) => {
|
|
4
|
-
const {
|
|
5
|
+
const {
|
|
6
|
+
isThreeD,
|
|
7
|
+
isBiggerPie,
|
|
8
|
+
paddingHorizontal,
|
|
9
|
+
paddingVertical,
|
|
10
|
+
extraRadiusForFocused,
|
|
11
|
+
} = props;
|
|
5
12
|
const propData = props.data;
|
|
6
13
|
const data: Array<pieDataItem> = [];
|
|
7
14
|
let itemHasInnerComponent = false;
|
|
@@ -41,8 +48,7 @@ export const getPieChartMainProps = (props: PieChartMainProps) => {
|
|
|
41
48
|
|
|
42
49
|
const showText = props.showText || false;
|
|
43
50
|
const textColor = props.textColor || "";
|
|
44
|
-
const textSize = props.textSize
|
|
45
|
-
|
|
51
|
+
const textSize = getTextSizeForPieLabels(props.textSize ?? 0, radius);
|
|
46
52
|
let tiltAngle = props.tiltAngle || "55deg";
|
|
47
53
|
if (
|
|
48
54
|
tiltAngle &&
|
|
@@ -160,5 +166,8 @@ export const getPieChartMainProps = (props: PieChartMainProps) => {
|
|
|
160
166
|
pData,
|
|
161
167
|
mData,
|
|
162
168
|
acc,
|
|
169
|
+
paddingHorizontal,
|
|
170
|
+
paddingVertical,
|
|
171
|
+
extraRadiusForFocused,
|
|
163
172
|
};
|
|
164
173
|
};
|
package/src/PieChart/types.ts
CHANGED
|
@@ -49,6 +49,8 @@ export type PieChartPropsType = {
|
|
|
49
49
|
pieInnerComponent?: (item?: pieDataItem, index?: number) => any;
|
|
50
50
|
pieInnerComponentHeight?: number;
|
|
51
51
|
pieInnerComponentWidth?: number;
|
|
52
|
+
paddingHorizontal?: number;
|
|
53
|
+
paddingVertical?: number;
|
|
52
54
|
};
|
|
53
55
|
export type pieDataItem = {
|
|
54
56
|
value: number;
|
|
@@ -79,4 +81,7 @@ export type pieDataItem = {
|
|
|
79
81
|
export interface PieChartMainProps extends PieChartPropsType {
|
|
80
82
|
setSelectedIndex: Function;
|
|
81
83
|
isBiggerPie?: boolean;
|
|
84
|
+
paddingHorizontal: number;
|
|
85
|
+
paddingVertical: number;
|
|
86
|
+
extraRadiusForFocused: number;
|
|
82
87
|
}
|
package/src/utils/index.tsx
CHANGED
|
@@ -707,7 +707,10 @@ export const getAxesAndRulesProps = (
|
|
|
707
707
|
secondaryYAxis: props.secondaryYAxis,
|
|
708
708
|
formatYLabel: props.formatYLabel,
|
|
709
709
|
};
|
|
710
|
-
if (
|
|
710
|
+
if (
|
|
711
|
+
(props.secondaryYAxis || props.lineConfig?.isSecondary) &&
|
|
712
|
+
maxValue !== undefined
|
|
713
|
+
) {
|
|
711
714
|
axesAndRulesProps.secondaryYAxis = { ...props.secondaryYAxis, maxValue };
|
|
712
715
|
}
|
|
713
716
|
|
|
@@ -1373,3 +1376,8 @@ export const getLineSegmentsForMissingValues = (
|
|
|
1373
1376
|
}
|
|
1374
1377
|
return segments;
|
|
1375
1378
|
};
|
|
1379
|
+
|
|
1380
|
+
export const getTextSizeForPieLabels = (
|
|
1381
|
+
textSize: number,
|
|
1382
|
+
radius: number
|
|
1383
|
+
): number => (textSize ? Math.min(textSize, radius / 5) : 16);
|