react-native-gifted-charts 1.4.20 → 1.4.22

package/dist/PopulationPyramid/index.js

@@ -0,0 +1,130 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Fragment } from 'react';
+import { View } from 'react-native';
+import { ruleTypes, usePopulationPyramid, } from 'gifted-charts-core';
+import { ClipPath, Line, Rect, Svg, Text as SvgText, Use, } from 'react-native-svg';
+import { screenWidth } from '../utils';
+export var PopulationPyramid = function (props) {
+    var _a, _b, _c, _d;
+    var _e = usePopulationPyramid(__assign(__assign({}, props), { screenWidth: screenWidth })), width = _e.width, verticalMarginBetweenBars = _e.verticalMarginBetweenBars, barsMapToYAxisSections = _e.barsMapToYAxisSections, data = _e.data, hideRules = _e.hideRules, yAxisColor = _e.yAxisColor, xAxisColor = _e.xAxisColor, xAxisThickness = _e.xAxisThickness, xAxisType = _e.xAxisType, xAxisNoOfSections = _e.xAxisNoOfSections, showXAxisIndices = _e.showXAxisIndices, showXAxisLabelTexts = _e.showXAxisLabelTexts, xAxisLabelShiftX = _e.xAxisLabelShiftX, xAxisLabelPrefix = _e.xAxisLabelPrefix, xAxisLabelSuffix = _e.xAxisLabelSuffix, formatXAxisLabels = _e.formatXAxisLabels, showVerticalLines = _e.showVerticalLines, showYAxisIndices = _e.showYAxisIndices, yAxisIndicesWidth = _e.yAxisIndicesWidth, yAxisIndicesHeight = _e.yAxisIndicesHeight, yAxisIndicesColor = _e.yAxisIndicesColor, yAxisLabelFontSize = _e.yAxisLabelFontSize, yAxisLabelFontStyle = _e.yAxisLabelFontStyle, yAxisLabelFontWeight = _e.yAxisLabelFontWeight, yAxisLabelFontFamily = _e.yAxisLabelFontFamily, yAxisLabelColor = _e.yAxisLabelColor, yAxisLabelTextMarginRight = _e.yAxisLabelTextMarginRight, yAxisLabelTexts = _e.yAxisLabelTexts, showValuesAsBarLabels = _e.showValuesAsBarLabels, rulesThickness = _e.rulesThickness, rulesColor = _e.rulesColor, rulesType = _e.rulesType, dashWidth = _e.dashWidth, dashGap = _e.dashGap, leftBarLabelWidth = _e.leftBarLabelWidth, leftBarLabelFontSize = _e.leftBarLabelFontSize, leftBarLabelColor = _e.leftBarLabelColor, leftBarLabelFontStyle = _e.leftBarLabelFontStyle, leftBarLabelFontWeight = _e.leftBarLabelFontWeight, leftBarLabelFontFamily = _e.leftBarLabelFontFamily, leftBarLabelPrefix = _e.leftBarLabelPrefix, leftBarLabelSuffix = _e.leftBarLabelSuffix, rightBarLabelFontSize = _e.rightBarLabelFontSize, rightBarLabelColor = _e.rightBarLabelColor, rightBarLabelFontStyle = _e.rightBarLabelFontStyle, rightBarLabelFontWeight = _e.rightBarLabelFontWeight, rightBarLabelFontFamily = _e.rightBarLabelFontFamily, rightBarLabelPrefix = _e.rightBarLabelPrefix, rightBarLabelSuffix = _e.rightBarLabelSuffix, formatBarLabels = _e.formatBarLabels, showMidAxis = _e.showMidAxis, midAxisLabelFontSize = _e.midAxisLabelFontSize, midAxisLabelColor = _e.midAxisLabelColor, midAxisLabelFontStyle = _e.midAxisLabelFontStyle, midAxisLabelFontWeight = _e.midAxisLabelFontWeight, midAxisLabelFontFamily = _e.midAxisLabelFontFamily, leftBarColor = _e.leftBarColor, rightBarColor = _e.rightBarColor, leftBarBorderColor = _e.leftBarBorderColor, rightBarBorderColor = _e.rightBarBorderColor, leftBarBorderWidth = _e.leftBarBorderWidth, rightBarBorderWidth = _e.rightBarBorderWidth, leftBarBorderRadius = _e.leftBarBorderRadius, rightBarBorderRadius = _e.rightBarBorderRadius, allCornersRounded = _e.allCornersRounded, showSurplus = _e.showSurplus, showSurplusLeft = _e.showSurplusLeft, showSurplusRight = _e.showSurplusRight, leftSurplusColor = _e.leftSurplusColor, leftSurplusBorderColor = _e.leftSurplusBorderColor, rightSurplusColor = _e.rightSurplusColor, rightSurplusBorderColor = _e.rightSurplusBorderColor, leftSurplusBorderWidth = _e.leftSurplusBorderWidth, rightSurplusBorderWidth = _e.rightSurplusBorderWidth, yAxisLabelWidth = _e.yAxisLabelWidth, noOfSections = _e.noOfSections, stepHeight = _e.stepHeight, containerHeightWithXaxisLabels = _e.containerHeightWithXaxisLabels, mid = _e.mid, barWidthFactor = _e.barWidthFactor, leftXAfterMid = _e.leftXAfterMid, rightXAfterMid = _e.rightXAfterMid, yAxisLineProps = _e.yAxisLineProps, midAxisLineCommonProps = _e.midAxisLineCommonProps, xAxisIndicesCommonProps = _e.xAxisIndicesCommonProps, verticalLinesCommonProps = _e.verticalLinesCommonProps, xAxisLabelsCommonProps = _e.xAxisLabelsCommonProps, getXLabel = _e.getXLabel;
+    return (_jsx(View, { style: { height: containerHeightWithXaxisLabels, width: width }, children: _jsxs(Svg, { fill: 'none', children: [_jsx(Line, __assign({}, yAxisLineProps)), Array.from(Array(noOfSections)).map(function (item, index) {
+                    var _a;
+                    var isLast = index === noOfSections - 1;
+                    var y = stepHeight * (index + 1);
+                    var rulesProps = {
+                        x1: yAxisLabelWidth,
+                        y1: y,
+                        x2: width,
+                        y2: y,
+                        stroke: isLast ? xAxisColor : rulesColor,
+                        strokeWidth: isLast ? xAxisThickness : rulesThickness,
+                    };
+                    if ((isLast && xAxisType !== ruleTypes.SOLID) ||
+                        (!isLast && rulesType !== ruleTypes.SOLID)) {
+                        rulesProps.strokeDasharray = [dashWidth, dashGap];
+                    }
+                    else {
+                        delete rulesProps.strokeDasharray;
+                    }
+                    return (_jsxs(Fragment, { children: [!hideRules || isLast ? _jsx(Line, __assign({}, rulesProps)) : null, showYAxisIndices ? (_jsx(Line, { x1: yAxisLabelWidth - yAxisIndicesWidth / 2, y1: y, x2: yAxisLabelWidth + yAxisIndicesWidth / 2, y2: y, stroke: yAxisIndicesColor, strokeWidth: yAxisIndicesHeight })) : null, !barsMapToYAxisSections ? (_jsx(SvgText, { x: yAxisLabelWidth - yAxisLabelTextMarginRight, y: stepHeight * (index + 0.5) + yAxisLabelFontSize / 2 - 2, stroke: yAxisLabelColor, fontSize: yAxisLabelFontSize, fontStyle: yAxisLabelFontStyle, fontWeight: yAxisLabelFontWeight, fontFamily: yAxisLabelFontFamily, textAnchor: "end", children: (_a = yAxisLabelTexts[index]) !== null && _a !== void 0 ? _a : '' })) : null] }, 'rule' + index));
+                }), Array.from(Array(xAxisNoOfSections)).map(function (item, index) {
+                    var x = leftXAfterMid - (leftXAfterMid * index) / xAxisNoOfSections;
+                    var unformattedXLabel = getXLabel(index);
+                    var xLabel = formatXAxisLabels
+                        ? formatXAxisLabels(unformattedXLabel)
+                        : unformattedXLabel;
+                    return (_jsxs(Fragment, { children: [showVerticalLines ? (_jsx(Line, __assign({}, verticalLinesCommonProps, { x1: x, x2: x }))) : null, showXAxisIndices ? (_jsx(Line, __assign({}, xAxisIndicesCommonProps, { x1: x, x2: x }))) : null, showXAxisLabelTexts ? (_jsx(SvgText, __assign({}, xAxisLabelsCommonProps, { x: x + xAxisLabelShiftX, textAnchor: "middle", children: xAxisLabelPrefix + xLabel + xAxisLabelSuffix }))) : null] }, 'x-axis' + index));
+                }), Array.from(Array(xAxisNoOfSections)).map(function (item, index) {
+                    if (!index && !showMidAxis)
+                        return null;
+                    var x = leftXAfterMid + (leftXAfterMid * index) / xAxisNoOfSections;
+                    var unformattedXLabel = getXLabel(index);
+                    var xLabel = formatXAxisLabels
+                        ? formatXAxisLabels(unformattedXLabel)
+                        : unformattedXLabel;
+                    return (_jsxs(Fragment, { children: [showVerticalLines ? (_jsx(Line, __assign({}, verticalLinesCommonProps, { x1: x, x2: x }))) : null, showXAxisIndices ? (_jsx(Line, __assign({}, xAxisIndicesCommonProps, { x1: x, x2: x }))) : null, showXAxisLabelTexts ? (_jsx(SvgText, __assign({}, xAxisLabelsCommonProps, { x: x + xAxisLabelShiftX, textAnchor: "middle", children: xAxisLabelPrefix + xLabel + xAxisLabelSuffix }))) : null] }, 'x-axis' + index));
+                }), data.map(function (item, index) {
+                    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19;
+                    var leftWidth = item.left * barWidthFactor;
+                    var rightWidth = item.right * barWidthFactor;
+                    var y = stepHeight * index + verticalMarginBetweenBars;
+                    var leftSurplusWidth = leftWidth - rightWidth;
+                    var rightSurplusWidth = rightWidth - leftWidth;
+                    var leftRadius = (_b = (_a = item.leftBarBorderRadius) !== null && _a !== void 0 ? _a : item.barBorderRadius) !== null && _b !== void 0 ? _b : leftBarBorderRadius;
+                    var rightRadius = (_d = (_c = item.rightBarBorderRadius) !== null && _c !== void 0 ? _c : item.barBorderRadius) !== null && _d !== void 0 ? _d : rightBarBorderRadius;
+                    var leftBorderWidth = (_f = (_e = item.leftBarBorderWidth) !== null && _e !== void 0 ? _e : item.barBorderWidth) !== null && _f !== void 0 ? _f : leftBarBorderWidth;
+                    var rightBorderWidth = (_h = (_g = item.rightBarBorderWidth) !== null && _g !== void 0 ? _g : item.barBorderWidth) !== null && _h !== void 0 ? _h : rightBarBorderWidth;
+                    var unFormattedLeftBarLabel = (_j = item.leftBarLabel) !== null && _j !== void 0 ? _j : (showValuesAsBarLabels ? item.left.toString() : '');
+                    var leftBarLabel = formatBarLabels
+                        ? formatBarLabels(unFormattedLeftBarLabel)
+                        : unFormattedLeftBarLabel;
+                    var unFormattedRightBarLabel = (_k = item.rightBarLabel) !== null && _k !== void 0 ? _k : (showValuesAsBarLabels ? item.right.toString() : '');
+                    var rightBarLabel = formatBarLabels
+                        ? formatBarLabels(unFormattedRightBarLabel)
+                        : unFormattedRightBarLabel;
+                    var leftLabelFontSize = (_l = item.leftBarLabelFontSize) !== null && _l !== void 0 ? _l : leftBarLabelFontSize;
+                    var leftLabelX = leftXAfterMid -
+                        leftWidth -
+                        leftBarBorderWidth / 2 -
+                        yAxisLabelWidth / 2 -
+                        leftBarLabelWidth / 2 +
+                        28 -
+                        (leftBarLabel.length * leftLabelFontSize) / 2 +
+                        ((_o = (_m = item.leftBarLabelShift) !== null && _m !== void 0 ? _m : props.leftBarLabelShift) !== null && _o !== void 0 ? _o : 0);
+                    var rightLabelX = rightXAfterMid +
+                        rightBarBorderWidth / 2 +
+                        rightWidth +
+                        3 +
+                        ((_q = (_p = item.rightBarLabelShift) !== null && _p !== void 0 ? _p : props.rightBarLabelShift) !== null && _q !== void 0 ? _q : 0);
+                    var leftBarCommonProps = {
+                        x: leftXAfterMid - leftWidth - leftBarBorderWidth / 2,
+                        y: y,
+                        width: leftWidth,
+                        height: stepHeight - verticalMarginBetweenBars * 2,
+                        rx: leftRadius,
+                        ry: leftRadius,
+                    };
+                    var rightBarCommonProps = {
+                        x: rightXAfterMid + rightBarBorderWidth / 2,
+                        y: y,
+                        width: rightWidth,
+                        height: stepHeight - verticalMarginBetweenBars * 2,
+                        rx: rightRadius,
+                        ry: rightRadius,
+                    };
+                    return (_jsxs(Fragment, { children: [barsMapToYAxisSections ? (_jsx(SvgText, { x: yAxisLabelWidth - yAxisLabelTextMarginRight, y: stepHeight * (index + 0.5) + yAxisLabelFontSize / 2 - 2, stroke: yAxisLabelColor, fontSize: yAxisLabelFontSize, fontStyle: yAxisLabelFontStyle, fontWeight: yAxisLabelFontWeight, fontFamily: yAxisLabelFontFamily, textAnchor: "end", children: (_s = (_r = item.yAxisLabel) !== null && _r !== void 0 ? _r : yAxisLabelTexts[index]) !== null && _s !== void 0 ? _s : '' })) : null, _jsx(Rect, __assign({}, leftBarCommonProps, { fill: (_t = item.leftBarColor) !== null && _t !== void 0 ? _t : leftBarColor, stroke: (_u = item.leftBarBorderColor) !== null && _u !== void 0 ? _u : leftBarBorderColor, strokeWidth: leftBorderWidth })), _jsx(ClipPath, { id: 'cp-left' + index, children: _jsx(Rect, __assign({}, leftBarCommonProps)) }), !allCornersRounded && leftWidth >= leftRadius ? (_jsxs(_Fragment, { children: [_jsx(Rect, { x: leftXAfterMid - leftRadius, y: y, width: leftRadius, height: stepHeight - verticalMarginBetweenBars * 2, fill: (_v = item.leftBarColor) !== null && _v !== void 0 ? _v : leftBarColor }), leftBorderWidth ? (_jsxs(_Fragment, { children: [_jsx(Line, { x1: leftXAfterMid - leftRadius, y1: y, x2: leftXAfterMid, y2: y, stroke: (_w = item.leftBarBorderColor) !== null && _w !== void 0 ? _w : leftBarBorderColor, strokeWidth: leftBorderWidth }), _jsx(Line, { x1: leftXAfterMid - leftRadius, y1: y + stepHeight - verticalMarginBetweenBars * 2, x2: leftXAfterMid, y2: y + stepHeight - verticalMarginBetweenBars * 2, stroke: (_x = item.leftBarBorderColor) !== null && _x !== void 0 ? _x : leftBarBorderColor, strokeWidth: leftBorderWidth })] })) : null] })) : null, leftBarLabel !== '' ? (_jsx(SvgText, { x: leftLabelX, y: stepHeight * (index + 0.5) + yAxisLabelFontSize / 2 - 2, stroke: (_y = item.leftBarLabelColor) !== null && _y !== void 0 ? _y : leftBarLabelColor, fontSize: leftLabelFontSize, fontStyle: (_z = item.leftBarLabelFontStyle) !== null && _z !== void 0 ? _z : leftBarLabelFontStyle, fontWeight: (_0 = item.leftBarLabelFontWeight) !== null && _0 !== void 0 ? _0 : leftBarLabelFontWeight, fontFamily: (_1 = item.leftBarLabelFontFamily) !== null && _1 !== void 0 ? _1 : leftBarLabelFontFamily, textAnchor: "start", children: leftBarLabelPrefix + leftBarLabel + leftBarLabelSuffix })) : null, _jsx(Rect, __assign({}, rightBarCommonProps, { fill: (_2 = item.rightBarColor) !== null && _2 !== void 0 ? _2 : rightBarColor, stroke: (_3 = item.rightBarBorderColor) !== null && _3 !== void 0 ? _3 : rightBarBorderColor, strokeWidth: rightBorderWidth })), _jsx(ClipPath, { id: 'cp-right' + index, children: _jsx(Rect, __assign({}, rightBarCommonProps)) }), !allCornersRounded && rightWidth >= rightRadius ? (_jsxs(_Fragment, { children: [_jsx(Rect, { x: rightXAfterMid, y: y, width: rightRadius, height: stepHeight - verticalMarginBetweenBars * 2, fill: (_4 = item.rightBarColor) !== null && _4 !== void 0 ? _4 : rightBarColor }), rightBorderWidth ? (_jsxs(_Fragment, { children: [_jsx(Line, { x1: rightXAfterMid, y1: y, x2: rightXAfterMid + rightRadius, y2: y, stroke: (_5 = item.rightBarBorderColor) !== null && _5 !== void 0 ? _5 : rightBarBorderColor, strokeWidth: rightBorderWidth }), _jsx(Line, { x1: rightXAfterMid, y1: y + stepHeight - verticalMarginBetweenBars * 2, x2: rightXAfterMid + rightRadius, y2: y + stepHeight - verticalMarginBetweenBars * 2, stroke: (_6 = item.rightBarBorderColor) !== null && _6 !== void 0 ? _6 : rightBarBorderColor, strokeWidth: rightBorderWidth })] })) : null] })) : null, rightBarLabel !== '' ? (_jsx(SvgText, { x: rightLabelX, y: stepHeight * (index + 0.5) + yAxisLabelFontSize / 2 - 2, stroke: (_7 = item.rightBarLabelColor) !== null && _7 !== void 0 ? _7 : rightBarLabelColor, fontSize: (_8 = item.rightBarLabelFontSize) !== null && _8 !== void 0 ? _8 : rightBarLabelFontSize, fontStyle: (_9 = item.rightBarLabelFontStyle) !== null && _9 !== void 0 ? _9 : rightBarLabelFontStyle, fontWeight: (_10 = item.rightBarLabelFontWeight) !== null && _10 !== void 0 ? _10 : rightBarLabelFontWeight, fontFamily: (_11 = item.rightBarLabelFontFamily) !== null && _11 !== void 0 ? _11 : rightBarLabelFontFamily, textAnchor: "start", children: rightBarLabelPrefix + rightBarLabel + rightBarLabelSuffix })) : null, (showSurplus ||
+                                showSurplusLeft ||
+                                item.showSurplus ||
+                                item.showSurplusLeft) &&
+                                leftSurplusWidth > 0 ? (_jsxs(_Fragment, { children: [_jsx(Rect, { id: 'l-spls' + index, x: leftXAfterMid - leftWidth - leftBarBorderWidth / 2, y: y, width: leftSurplusWidth, height: stepHeight - verticalMarginBetweenBars * 2, stroke: (_12 = item.leftSurplusBorderColor) !== null && _12 !== void 0 ? _12 : leftSurplusBorderColor, strokeWidth: (_13 = item.leftSurplusBorderWidth) !== null && _13 !== void 0 ? _13 : leftSurplusBorderWidth }), _jsx(Use, { fill: (_14 = item.leftSurplusColor) !== null && _14 !== void 0 ? _14 : leftSurplusColor, clipPath: '#cp-left' + index, href: '#l-spls' + index }), leftSurplusWidth >= leftRadius ? (_jsxs(_Fragment, { children: [_jsx(Rect, { id: 'hide-in-left' + index, x: leftXAfterMid -
+                                                    leftWidth -
+                                                    leftBarBorderWidth +
+                                                    leftSurplusWidth -
+                                                    leftRadius, y: y, width: leftRadius, height: stepHeight - verticalMarginBetweenBars * 2 }), _jsx(Use, { fill: (_15 = item.leftSurplusColor) !== null && _15 !== void 0 ? _15 : leftSurplusColor, clipPath: "url(#cp-left".concat(index, ")"), href: '#hide-in-left' + index })] })) : null] })) : null, (showSurplus ||
+                                showSurplusRight ||
+                                item.showSurplus ||
+                                item.showSurplusRight) &&
+                                rightSurplusWidth > 0 ? (_jsxs(_Fragment, { children: [_jsx(Rect, { id: 'r-spls' + index, x: rightXAfterMid +
+                                            rightBarBorderWidth / 2 +
+                                            rightWidth -
+                                            rightSurplusWidth, y: y, width: rightSurplusWidth, height: stepHeight - verticalMarginBetweenBars * 2, stroke: (_16 = item.rightSurplusBorderColor) !== null && _16 !== void 0 ? _16 : rightSurplusBorderColor, strokeWidth: (_17 = item.rightSurplusBorderWidth) !== null && _17 !== void 0 ? _17 : rightSurplusBorderWidth }), _jsx(Use, { fill: (_18 = item.rightSurplusColor) !== null && _18 !== void 0 ? _18 : rightSurplusColor, clipPath: '#cp-right' + index, href: '#r-spls' + index }), rightSurplusWidth >= rightRadius ? (_jsxs(_Fragment, { children: [_jsx(Rect, { id: 'hide-in-right' + index, x: rightXAfterMid +
+                                                    rightBarBorderWidth / 2 +
+                                                    rightWidth -
+                                                    rightSurplusWidth, y: y, width: rightRadius, height: stepHeight - verticalMarginBetweenBars * 2 }), _jsx(Use, { fill: (_19 = item.rightSurplusColor) !== null && _19 !== void 0 ? _19 : rightSurplusColor, clipPath: "url(#cp-right".concat(index, ")"), href: '#hide-in-right' + index })] })) : null] })) : null] }, 'bars' + index));
+                }), showMidAxis ? (_jsxs(_Fragment, { children: [_jsx(Line, __assign({}, midAxisLineCommonProps, { stroke: (_b = (_a = props.midAxisLeftColor) !== null && _a !== void 0 ? _a : props.midAxisColor) !== null && _b !== void 0 ? _b : yAxisColor, x1: leftXAfterMid, x2: leftXAfterMid })), _jsx(Line, __assign({}, midAxisLineCommonProps, { stroke: (_d = (_c = props.midAxisRightColor) !== null && _c !== void 0 ? _c : props.midAxisColor) !== null && _d !== void 0 ? _d : yAxisColor, x1: rightXAfterMid, x2: rightXAfterMid })), data.map(function (item, index) {
+                            var _a, _b, _c, _d, _e, _f;
+                            var y = stepHeight * (index + 0.5);
+                            return (_jsx(SvgText, { x: mid, y: y + midAxisLabelFontSize / 2, stroke: (_a = item.midAxisLabelColor) !== null && _a !== void 0 ? _a : midAxisLabelColor, fontSize: (_b = item.midAxisLabelFontSize) !== null && _b !== void 0 ? _b : midAxisLabelFontSize, fontStyle: (_c = item.midAxisLabelFontStyle) !== null && _c !== void 0 ? _c : midAxisLabelFontStyle, fontWeight: (_d = item.midAxisLabelFontWeight) !== null && _d !== void 0 ? _d : midAxisLabelFontWeight, fontFamily: (_e = item.midAxisLabelFontFamily) !== null && _e !== void 0 ? _e : midAxisLabelFontFamily, textAnchor: "middle", children: (_f = item.midAxisLabel) !== null && _f !== void 0 ? _f : '' }, 'ml' + index));
+                        })] })) : null] }) }));
+};

package/dist/index.d.ts

@@ -0,0 +1,7 @@
+export { BarChart } from './BarChart';
+export { PieChart } from './PieChart';
+export { PieChartPro } from './PieChartPro';
+export { LineChart } from './LineChart';
+export { LineChartBicolor } from './LineChart/LineChartBicolor';
+export { PopulationPyramid } from './PopulationPyramid';
+export { type barDataItem, type stackDataItem, type BarChartPropsType, type StackedBarChartPropsType, type pieDataItem, type PieChartPropsType, type lineDataItem, type bicolorLineDataItem, type LineChartPropsType, type LineChartBicolorPropsType, type popnPyramidDataItem, type PopulationPyramidPropsType, chartTypes, ruleTypes, yAxisSides, EdgePosition, type DataSet, type Linecap } from 'gifted-charts-core';

package/dist/index.js

@@ -0,0 +1,7 @@
+export { BarChart } from './BarChart';
+export { PieChart } from './PieChart';
+export { PieChartPro } from './PieChartPro';
+export { LineChart } from './LineChart';
+export { LineChartBicolor } from './LineChart/LineChartBicolor';
+export { PopulationPyramid } from './PopulationPyramid';
+export { chartTypes, ruleTypes, yAxisSides, EdgePosition } from 'gifted-charts-core';

package/dist/utils/index.d.ts

@@ -0,0 +1,2 @@
+export declare const rnVersion: number;
+export declare const screenWidth: number;

package/dist/utils/index.js

@@ -0,0 +1,12 @@
+var _a, _b;
+import { Dimensions } from 'react-native';
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+var versionString = require('react-native/package.json').version;
+var versionAr = (_b = (_a = versionString === null || versionString === void 0 ? void 0 : versionString.split) === null || _a === void 0 ? void 0 : _a.call(versionString, '.')) !== null && _b !== void 0 ? _b : '';
+var msb = Number(versionAr[0]);
+var mid = Number(versionAr[1]);
+var lsb = Number(versionAr[2]);
+export var rnVersion = (!isNaN(msb) ? msb : 0) * 1000000 +
+    (!isNaN(mid) ? mid : 0) * 10000 +
+    (!isNaN(lsb) ? lsb : 0);
+export var screenWidth = Dimensions.get('window').width;

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "react-native-gifted-charts",
-  "version": "1.4.20",
+  "version": "1.4.22",
   "description": "The most complete library for Bar, Line, Area, Pie, Donut, Stacked Bar and Population Pyramid charts in React Native. Allows 2D, 3D, gradient, animations and live data updates.",
-  "main": "src/index.tsx",
+  "main": "dist/index.js",
   "files": [
-    "src"
+    "dist"
   ],
   "scripts": {
     "android": "react-native run-android",
-    "build": "tsc -p .",
+    "build": "tsc -p . && ./build.sh",
     "ios": "react-native run-ios",
     "start": "react-native start",
     "test": "jest",
@@ -25,28 +25,29 @@
     "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
-    "gifted-charts-core": "^0.1.19"
+    "gifted-charts-core": "^0.1.21"
   },
   "devDependencies": {
-    "@babel/core": "^7.22.5",
-    "@babel/runtime": "^7.22.5",
+    "@babel/cli": "^7.24.8",
+    "@babel/core": "^7.24.9",
+    "@babel/runtime": "^7.25.0",
     "@react-native-community/eslint-config": "^3.2.0",
-    "@types/jest": "^29.5.2",
-    "@types/node": "^20.3.3",
-    "@types/react": "^18.2.14",
-    "@types/react-dom": "^18.2.6",
-    "@types/react-native": "^0.72.2",
-    "babel-jest": "^29.5.0",
-    "eslint": "^8.44.0",
-    "jest": "^29.5.0",
-    "metro-react-native-babel-preset": "^0.76.7",
+    "@react-native/metro-config": "^0.74.85",
+    "@types/jest": "^29.5.12",
+    "@types/node": "^22.0.0",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "babel-jest": "^29.7.0",
+    "eslint": "^9.8.0",
+    "jest": "^29.7.0",
+    "metro-react-native-babel-preset": "^0.77.0",
     "react": "^18.2.0",
-    "react-native": "^0.73.2",
+    "react-native": "^0.74.3",
     "react-native-linear-gradient": "^2.8.3",
-    "react-native-svg": "^14.1.0",
+    "react-native-svg": "^15.4.0",
     "react-test-renderer": "18.2.0",
-    "ts-jest": "^29.1.1",
-    "typescript": "^5.1.6"
+    "ts-jest": "^29.2.3",
+    "typescript": "^5.5.4"
   },
   "peerDependencies": {
     "react": "*",

package/src/BarChart/Animated2DWithGradient.tsx

@@ -1,197 +0,0 @@
-import React, {useEffect, useState} from 'react';
-import {View, LayoutAnimation, Platform, UIManager, Text} from 'react-native';
-import Svg, {Defs, Rect} from 'react-native-svg';
-import Cap from '../Components/BarSpecificComponents/cap';
-import LinearGradient from '../Components/common/LinearGradient';
-import {Animated2DWithGradientPropsType} from 'gifted-charts-core';
-
-if (Platform.OS === 'android') {
-  UIManager.setLayoutAnimationEnabledExperimental &&
-    UIManager.setLayoutAnimationEnabledExperimental(true);
-}
-
-const Animated2DWithGradient = (props: Animated2DWithGradientPropsType) => {
-  const {
-    barBackgroundPattern,
-    patternId,
-    barWidth,
-    barStyle,
-    item,
-    index,
-    opacity,
-    animationDuration,
-    noGradient,
-    noAnimation,
-    barMarginBottom,
-    barInnerComponent,
-    intactTopLabel,
-    showValuesAsTopLabel,
-    topLabelContainerStyle,
-    topLabelTextStyle,
-    commonStyleForBar,
-    barStyleWithBackground,
-    yAxisOffset,
-  } = props;
-  const [height, setHeight] = useState(noAnimation ? props.height : 0.2);
-  const [initialRender, setInitialRender] = useState(
-    noAnimation ? false : true,
-  );
-
-  useEffect(() => {
-    if (!noAnimation) {
-      if (initialRender) {
-        setTimeout(() => layoutAppear(), 20);
-      } else {
-        elevate();
-      }
-    } else {
-      setHeight(props.height);
-    }
-  }, [props.height]);
-
-  const elevate = () => {
-    LayoutAnimation.configureNext({
-      duration: animationDuration,
-      update: {type: 'linear', property: 'scaleXY'},
-    });
-    setHeight(props.height);
-  };
-
-  const layoutAppear = () => {
-    LayoutAnimation.configureNext({
-      duration: Platform.OS == 'ios' ? animationDuration : 20,
-      create: {type: 'linear', property: 'opacity'},
-      update: {type: 'linear', property: 'scaleXY'},
-    });
-    setInitialRender(false);
-    setTimeout(() => elevate(), Platform.OS == 'ios' ? 10 : 100);
-  };
-
-  return (
-    <>
-      {!initialRender && (
-        <View
-          style={{
-            position: 'absolute',
-            bottom: 0,
-            width: '100%',
-            overflow: 'hidden',
-            height:
-              (noAnimation
-                ? Math.max(props.minHeight, Math.abs(height))
-                : height) - (barMarginBottom || 0),
-          }}>
-          <View
-            style={[
-              {
-                width: '100%',
-                height:
-                  (noAnimation
-                    ? Math.max(props.minHeight, Math.abs(height))
-                    : height) - (barMarginBottom || 0),
-              },
-              item.barStyle || barStyle,
-            ]}>
-            {noGradient ? (
-              <View style={barStyleWithBackground}>
-                {props.cappedBars && item.value ? (
-                  <Cap
-                    capThicknessFromItem={item.capThickness}
-                    capThicknessFromProps={props.capThickness}
-                    capColorFromItem={item.capColor}
-                    capColorFromProps={props.capColor}
-                    capRadiusFromItem={item.capRadius}
-                    capRadiusFromProps={props.capRadius}
-                  />
-                ) : null}
-              </View>
-            ) : (
-              <LinearGradient
-                style={commonStyleForBar}
-                start={{x: 0, y: 0}}
-                end={{x: 1, y: 1}}
-                colors={[
-                  item.gradientColor || props.gradientColor || 'white',
-                  item.frontColor || props.frontColor || 'black',
-                ]}>
-                {props.cappedBars && (
-                  <View
-                    style={{
-                      position: 'absolute',
-                      width: '100%',
-                      height:
-                        item.capThickness === 0
-                          ? 0
-                          : item.capThickness || props.capThickness || 6,
-                      backgroundColor:
-                        item.capColor || props.capColor || 'black',
-                      borderTopLeftRadius:
-                        item.capRadius === 0
-                          ? 0
-                          : item.capRadius || props.capRadius || 0,
-                      borderTopRightRadius:
-                        item.capRadius === 0
-                          ? 0
-                          : item.capRadius || props.capRadius || 0,
-                    }}
-                  />
-                )}
-              </LinearGradient>
-            )}
-            {(item.barBackgroundPattern || barBackgroundPattern) && (
-              <Svg>
-                <Defs>
-                  {item.barBackgroundPattern
-                    ? item.barBackgroundPattern()
-                    : barBackgroundPattern?.()}
-                </Defs>
-                <Rect
-                  stroke="transparent"
-                  x="1"
-                  y="1"
-                  width={item.barWidth || props.barWidth || 30}
-                  height={noAnimation ? Math.abs(height) : height}
-                  fill={`url(#${item.patternId || patternId})`}
-                />
-              </Svg>
-            )}
-            {barInnerComponent ? (
-              <View style={{height: '100%', width: '100%'}}>
-                {barInnerComponent(item, index)}
-              </View>
-            ) : null}
-          </View>
-        </View>
-      )}
-      {item.topLabelComponent || showValuesAsTopLabel ? (
-        <View
-          style={[
-            {
-              position: 'absolute',
-              top: (item.barWidth || barWidth || 30) * -1,
-              height: item.barWidth || barWidth || 30,
-              width: item.barWidth || barWidth || 30,
-              justifyContent:
-                (props.horizontal && !intactTopLabel) || item.value < 0
-                  ? 'center'
-                  : 'flex-end',
-              alignItems: 'center',
-              opacity: opacity,
-            },
-            item.value < 0 && {transform: [{rotate: '180deg'}]},
-            props.horizontal &&
-              !intactTopLabel && {transform: [{rotate: '270deg'}]},
-            topLabelContainerStyle ?? item.topLabelContainerStyle,
-          ]}>
-          {showValuesAsTopLabel ? (
-            <Text style={topLabelTextStyle}>{item.value + yAxisOffset}</Text>
-          ) : (
-            item.topLabelComponent?.()
-          )}
-        </View>
-      ) : null}
-    </>
-  );
-};
-
-export default Animated2DWithGradient;