react-native-gifted-charts 1.4.51 → 1.4.53
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
CHANGED
|
@@ -48,7 +48,7 @@ See the **[release changes by version here.](release-notes/release-notes.md)**
|
|
|
48
48
|
<td><img src='/demos/crossHair.gif' alt='' height=280 /></td>
|
|
49
49
|
<td><img src='/demos/movingBars.gif' alt='' width=270 height=300/></td>
|
|
50
50
|
<tr>
|
|
51
|
-
<td><img src='/demos/radar.png' alt='' height=280 width=
|
|
51
|
+
<td><img src='/demos/radar.png' alt='' height=280 width=320/></td>
|
|
52
52
|
<td><img src='/demos/ppnLabelled.png' alt='' height=280 width=300/></td>
|
|
53
53
|
</tr>
|
|
54
54
|
</table>
|
|
@@ -113,7 +113,7 @@ const data=[ {value:50}, {value:80}, {value:90}, {value:70} ]
|
|
|
113
113
|
**2. [LineChart and AreaChart props](docs/LineChart/LineChartProps.md)** \
|
|
114
114
|
**3. [PieChart and DonutChart props](docs/PieChart/PieChartProps.md)** \
|
|
115
115
|
**4. [Population Pyramid props](docs/PopulationPyramid/PopulationPyramid.md)** \
|
|
116
|
-
**5. [RadarChart props](docs/
|
|
116
|
+
**5. [RadarChart props](docs/RadarChart/RadarChartProps.md)**
|
|
117
117
|
|
|
118
118
|
## Contributing
|
|
119
119
|
|
|
@@ -4,7 +4,7 @@ import Svg, { Line } from 'react-native-svg';
|
|
|
4
4
|
import { getTopAndLeftForStripAndLabel, } from 'gifted-charts-core';
|
|
5
5
|
export var StripAndLabel = function (props) {
|
|
6
6
|
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
7
|
-
var pointerX = props.pointerX, pointerLabelWidth = props.pointerLabelWidth, pointerRadius = props.pointerRadius, pointerWidth = props.pointerWidth, pointerYLocal = props.pointerYLocal, pointerStripUptoDataPoint = props.pointerStripUptoDataPoint, pointerStripHeight = props.pointerStripHeight, pointerItemLocal = props.pointerItemLocal, showPointerStrip = props.showPointerStrip, pointerStripWidth = props.pointerStripWidth, containerHeight = props.containerHeight, xAxisThickness = props.xAxisThickness, pointerStripColor = props.pointerStripColor, pointerConfig = props.pointerConfig, pointerLabelComponent = props.pointerLabelComponent, secondaryPointerItem = props.secondaryPointerItem, pointerItemsForSet = props.pointerItemsForSet, secondaryPointerItemsForSet = props.secondaryPointerItemsForSet, pointerEvents = props.pointerEvents, isBarChart = props.isBarChart, pointerIndex = props.pointerIndex, hasDataSet = props.hasDataSet, containsNegative = props.containsNegative, horizontalStripConfig = props.horizontalStripConfig, screenWidth = props.screenWidth;
|
|
7
|
+
var pointerX = props.pointerX, pointerLabelWidth = props.pointerLabelWidth, pointerRadius = props.pointerRadius, pointerWidth = props.pointerWidth, pointerYLocal = props.pointerYLocal, pointerStripUptoDataPoint = props.pointerStripUptoDataPoint, pointerStripHeight = props.pointerStripHeight, pointerItemLocal = props.pointerItemLocal, showPointerStrip = props.showPointerStrip, pointerStripWidth = props.pointerStripWidth, containerHeight = props.containerHeight, xAxisThickness = props.xAxisThickness, pointerStripColor = props.pointerStripColor, pointerConfig = props.pointerConfig, pointerLabelComponent = props.pointerLabelComponent, secondaryPointerItem = props.secondaryPointerItem, pointerItemsForSet = props.pointerItemsForSet, secondaryPointerItemsForSet = props.secondaryPointerItemsForSet, pointerEvents = props.pointerEvents, isBarChart = props.isBarChart, pointerIndex = props.pointerIndex, hasDataSet = props.hasDataSet, containsNegative = props.containsNegative, horizontalStripConfig = props.horizontalStripConfig, screenWidth = props.screenWidth, width = props.width;
|
|
8
8
|
var _j = getTopAndLeftForStripAndLabel(props), top = _j.top, left = _j.left;
|
|
9
9
|
if (isNaN(top) || typeof top !== 'number')
|
|
10
10
|
return null;
|
|
@@ -17,7 +17,7 @@ export var StripAndLabel = function (props) {
|
|
|
17
17
|
position: 'absolute',
|
|
18
18
|
left: -pointerStripWidth / 4,
|
|
19
19
|
top: containsNegative ? 0 : -pointerYLocal + 8 + xAxisThickness,
|
|
20
|
-
width:
|
|
20
|
+
width: width,
|
|
21
21
|
height: containerHeight,
|
|
22
22
|
}, children: [_jsxs(Svg, { children: [_jsx(Line, { stroke: pointerStripColor, strokeWidth: pointerStripWidth, strokeDasharray: (pointerConfig === null || pointerConfig === void 0 ? void 0 : pointerConfig.strokeDashArray)
|
|
23
23
|
? pointerConfig === null || pointerConfig === void 0 ? void 0 : pointerConfig.strokeDashArray
|
package/dist/LineChart/index.js
CHANGED
|
@@ -360,7 +360,7 @@ export var LineChart = function (props) {
|
|
|
360
360
|
if (!item.onPress && !props.onPress && focusEnabled) {
|
|
361
361
|
handleUnFocus();
|
|
362
362
|
}
|
|
363
|
-
} })) }, index)), dataPointLabelComponent ? (!showTextOnFocus || index === selectedIndex ? (_jsx(ForeignObject, { height: svgHeight, width:
|
|
363
|
+
} })) }, index)), dataPointLabelComponent ? (!showTextOnFocus || index === selectedIndex ? (_jsx(ForeignObject, { height: svgHeight, width: dataPointLabelWidth, x: initialSpacing +
|
|
364
364
|
(item.dataPointLabelShiftX ||
|
|
365
365
|
props.dataPointLabelShiftX ||
|
|
366
366
|
0) -
|
package/dist/RadarChart/index.js
CHANGED
|
@@ -1,24 +1,35 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { Fragment } from 'react';
|
|
2
3
|
import { View } from 'react-native';
|
|
3
4
|
import Svg, { Line, Polygon, Circle, Text as SvgText, Defs, RadialGradient, Stop, } from 'react-native-svg';
|
|
4
5
|
import { useRadarChart } from 'gifted-charts-core';
|
|
5
6
|
export var RadarChart = function (props) {
|
|
6
|
-
var _a = useRadarChart(props), data = _a.data, center = _a.center, radius = _a.radius, chartSize = _a.chartSize, polarToCartesian = _a.polarToCartesian, labels = _a.labels, labelConfigArray = _a.labelConfigArray, labelsPositionOffset = _a.labelsPositionOffset,
|
|
7
|
-
return (_jsx(View, { style: { justifyContent: 'center', alignItems: 'center' }, children: _jsxs(Svg, { height: chartSize, width: chartSize, children: [
|
|
7
|
+
var _a = useRadarChart(props), data = _a.data, dataSet = _a.dataSet, center = _a.center, radius = _a.radius, chartSize = _a.chartSize, polarToCartesian = _a.polarToCartesian, labels = _a.labels, labelConfigArray = _a.labelConfigArray, labelsPositionOffset = _a.labelsPositionOffset, dataLabelsConfigArray = _a.dataLabelsConfigArray, maxValue = _a.maxValue, dataLabels = _a.dataLabels, dataLabelsArray = _a.dataLabelsArray, gridSections = _a.gridSections, gridFill = _a.gridFill, fontSize = _a.fontSize, stroke = _a.stroke, textAnchor = _a.textAnchor, alignmentBaseline = _a.alignmentBaseline, fontWeight = _a.fontWeight, fontFamily = _a.fontFamily, dataLabelsPositionOffset = _a.dataLabelsPositionOffset, polygonStroke = _a.polygonStroke, polygonStrokeWidth = _a.polygonStrokeWidth, polygonStrokeDashArray = _a.polygonStrokeDashArray, polygonFill = _a.polygonFill, polygonGradientColor = _a.polygonGradientColor, polygonShowGradient = _a.polygonShowGradient, polygonOpacity = _a.polygonOpacity, polygonGradientOpacity = _a.polygonGradientOpacity, asterLinesStroke = _a.asterLinesStroke, asterLinesStrokeWidth = _a.asterLinesStrokeWidth, asterLinesStrokeDashArray = _a.asterLinesStrokeDashArray, polygonPoints = _a.polygonPoints, polygonPointsArray = _a.polygonPointsArray, polygonConfigArray = _a.polygonConfigArray, angleStep = _a.angleStep, circular = _a.circular, hideGrid = _a.hideGrid, hideAsterLines = _a.hideAsterLines, getGridLevelProps = _a.getGridLevelProps;
|
|
8
|
+
return (_jsx(View, { style: { justifyContent: 'center', alignItems: 'center' }, children: _jsxs(Svg, { height: chartSize, width: chartSize, children: [(polygonConfigArray === null || polygonConfigArray === void 0 ? void 0 : polygonConfigArray.length) ? (polygonConfigArray.map(function (polygonConfigItem, index) {
|
|
9
|
+
var fill = polygonConfigItem.fill, gradientColor = polygonConfigItem.gradientColor, opacity = polygonConfigItem.opacity, gradientOpacity = polygonConfigItem.gradientOpacity;
|
|
10
|
+
return (_jsx(Defs, { children: _jsxs(RadialGradient, { id: "polygon-".concat(index), cx: center, cy: center, rx: radius, ry: radius, fx: "50%", fy: "50%", gradientUnits: "userSpaceOnUse", children: [_jsx(Stop, { offset: "0%", stopColor: gradientColor, stopOpacity: gradientOpacity }), _jsx(Stop, { offset: "100%", stopColor: fill, stopOpacity: opacity })] }, "polygon-".concat(index)) }));
|
|
11
|
+
})) : polygonShowGradient ? (_jsx(Defs, { children: _jsxs(RadialGradient, { id: 'polygon', cx: center, cy: center, rx: radius, ry: radius, fx: "50%", fy: "50%", gradientUnits: "userSpaceOnUse", children: [_jsx(Stop, { offset: "0%", stopColor: polygonGradientColor, stopOpacity: polygonGradientOpacity }), _jsx(Stop, { offset: "100%", stopColor: polygonFill, stopOpacity: polygonOpacity })] }, 'polygon') })) : null, hideGrid
|
|
8
12
|
? null
|
|
9
13
|
: gridSections.map(function (l, ind) {
|
|
10
14
|
var _a = getGridLevelProps(l, ind), level = _a.level, gridGradientColorLocal = _a.gridGradientColorLocal, gridFillColorLocal = _a.gridFillColorLocal, gridOpacityLocal = _a.gridOpacityLocal, gridGradientOpacityLocal = _a.gridGradientOpacityLocal, gridStrokeLocal = _a.gridStrokeLocal, gridStrokeWidthLocal = _a.gridStrokeWidthLocal, gridShowGradientLocal = _a.gridShowGradientLocal, gridStrokeDashArrayLocal = _a.gridStrokeDashArrayLocal, levelPolygonPoints = _a.levelPolygonPoints, r = _a.r;
|
|
11
|
-
return (_jsxs(
|
|
12
|
-
}),
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
var
|
|
20
|
-
var
|
|
21
|
-
|
|
15
|
+
return (_jsxs(Fragment, { children: [_jsx(Defs, { children: _jsxs(RadialGradient, { id: 'grad' + level, cx: center, cy: center, rx: r, ry: r, fx: "50%", fy: "50%", gradientUnits: "userSpaceOnUse", children: [_jsx(Stop, { offset: "".concat(100 - 100 / level, "%"), stopColor: gridGradientColorLocal, stopOpacity: gridGradientOpacityLocal }), _jsx(Stop, { offset: "100%", stopColor: gridFillColorLocal, stopOpacity: gridOpacityLocal })] }, level + '') }), circular ? (_jsx(Circle, { cx: center, cy: center, r: r, stroke: gridStrokeLocal, strokeWidth: gridStrokeWidthLocal, strokeDasharray: gridStrokeDashArrayLocal, fill: gridShowGradientLocal ? "url(#grad".concat(level, ")") : gridFill }, "grid-".concat(level))) : (_jsx(Polygon, { points: levelPolygonPoints, stroke: gridStrokeLocal, strokeWidth: gridStrokeWidthLocal, strokeDasharray: gridStrokeDashArrayLocal, fill: gridShowGradientLocal ? "url(#grad".concat(level, ")") : gridFill }, "grid-".concat(level)))] }, "fragment-".concat(level)));
|
|
16
|
+
}), dataSet ? (polygonConfigArray === null || polygonConfigArray === void 0 ? void 0 : polygonConfigArray.map(function (item, index) {
|
|
17
|
+
var polygonPoints = polygonPointsArray[index];
|
|
18
|
+
var stroke = item.stroke, strokeWidth = item.strokeWidth, strokeDashArray = item.strokeDashArray, fill = item.fill, showGradient = item.showGradient, opacity = item.opacity;
|
|
19
|
+
return (_jsx(Polygon, { points: polygonPoints, fill: showGradient ? 'url(#polygon)' : fill, stroke: stroke, strokeWidth: strokeWidth, strokeDasharray: strokeDashArray, opacity: opacity }, "polygon-".concat(index)));
|
|
20
|
+
})) : (_jsx(Polygon, { points: polygonPoints, fill: polygonShowGradient ? 'url(#polygon)' : polygonFill, stroke: polygonStroke, strokeWidth: polygonStrokeWidth, strokeDasharray: polygonStrokeDashArray, opacity: polygonOpacity })), (dataSet === null || dataSet === void 0 ? void 0 : dataSet.length) && (dataLabelsArray === null || dataLabelsArray === void 0 ? void 0 : dataLabelsArray.length) ? (dataLabelsArray === null || dataLabelsArray === void 0 ? void 0 : dataLabelsArray.map(function (labels, index) {
|
|
21
|
+
var dataItem = dataSet[index];
|
|
22
|
+
return labels === null || labels === void 0 ? void 0 : labels.map(function (label, labelIndex) {
|
|
23
|
+
var _a, _b, _c;
|
|
24
|
+
var _d = polarToCartesian(labelIndex * angleStep, dataItem[labelIndex] + dataLabelsPositionOffset), x = _d.x, y = _d.y;
|
|
25
|
+
var _e = (_a = dataLabelsConfigArray === null || dataLabelsConfigArray === void 0 ? void 0 : dataLabelsConfigArray[labelIndex]) !== null && _a !== void 0 ? _a : {}, dataLabelsFontSize = _e.fontSize, dataLabelsColor = _e.stroke, dataLabelsTextAnchor = _e.textAnchor, dataLabelsAlignmentBaseline = _e.alignmentBaseline, dataLabelsFontWeight = _e.fontWeight, dataLabelsFontFamily = _e.fontFamily;
|
|
26
|
+
return (_jsx(SvgText, { x: x, y: y, fontSize: dataLabelsFontSize, fill: dataLabelsColor, fontWeight: dataLabelsFontWeight, fontFamily: dataLabelsFontFamily, textAnchor: (_b = dataLabelsTextAnchor) !== null && _b !== void 0 ? _b : 'middle', alignmentBaseline: (_c = dataLabelsAlignmentBaseline) !== null && _c !== void 0 ? _c : 'middle', children: label }, "data-label-".concat(index, "-").concat(labelIndex)));
|
|
27
|
+
});
|
|
28
|
+
})) : (dataLabels === null || dataLabels === void 0 ? void 0 : dataLabels.length) ? (_jsx(SvgText, { children: dataLabels.map(function (label, index) {
|
|
29
|
+
var _a, _b, _c;
|
|
30
|
+
var _d = polarToCartesian(index * angleStep, data[index] + dataLabelsPositionOffset), x = _d.x, y = _d.y;
|
|
31
|
+
var _e = (_a = dataLabelsConfigArray === null || dataLabelsConfigArray === void 0 ? void 0 : dataLabelsConfigArray[index]) !== null && _a !== void 0 ? _a : {}, dataLabelsFontSize = _e.fontSize, dataLabelsColor = _e.stroke, dataLabelsTextAnchor = _e.textAnchor, dataLabelsAlignmentBaseline = _e.alignmentBaseline, dataLabelsFontWeight = _e.fontWeight, dataLabelsFontFamily = _e.fontFamily;
|
|
32
|
+
return (_jsx(SvgText, { x: x, y: y, fontSize: dataLabelsFontSize, fill: dataLabelsColor, fontWeight: dataLabelsFontWeight, fontFamily: dataLabelsFontFamily, textAnchor: (_b = dataLabelsTextAnchor) !== null && _b !== void 0 ? _b : 'middle', alignmentBaseline: (_c = dataLabelsAlignmentBaseline) !== null && _c !== void 0 ? _c : 'middle', children: label }, "data-label-".concat(index)));
|
|
22
33
|
}) })) : null, hideAsterLines
|
|
23
34
|
? null
|
|
24
35
|
: labels.map(function (_, index) {
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-native-gifted-charts",
|
|
3
|
-
"version": "1.4.
|
|
4
|
-
"description": "The most complete library for Bar, Line, Area, Pie, Donut, Stacked Bar
|
|
3
|
+
"version": "1.4.53",
|
|
4
|
+
"description": "The most complete library for Bar, Line, Area, Pie, Donut, Stacked Bar, Population Pyramid and Radar charts in React Native. Allows 2D, 3D, gradient, animations and live data updates.",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"files": [
|
|
7
7
|
"dist"
|
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
"registry": "https://registry.npmjs.org/"
|
|
27
27
|
},
|
|
28
28
|
"dependencies": {
|
|
29
|
-
"gifted-charts-core": "0.1.
|
|
29
|
+
"gifted-charts-core": "0.1.55"
|
|
30
30
|
},
|
|
31
31
|
"devDependencies": {
|
|
32
32
|
"@babel/cli": "^7.24.8",
|
|
@@ -75,6 +75,8 @@
|
|
|
75
75
|
"donut",
|
|
76
76
|
"area",
|
|
77
77
|
"line",
|
|
78
|
+
"radar",
|
|
79
|
+
"star",
|
|
78
80
|
"population",
|
|
79
81
|
"pyramid",
|
|
80
82
|
"react",
|