react-native-gifted-charts 1.4.20 → 1.4.22

package/dist/LineChart/styles.d.ts

@@ -0,0 +1,43 @@
+export declare const styles: {
+    container: {
+        width: "100%";
+        marginBottom: number;
+        marginRight: number;
+    };
+    horizBar: {
+        flexDirection: "row";
+    };
+    leftLabel: {
+        justifyContent: "center";
+        alignItems: "center";
+    };
+    lastLeftLabel: {
+        justifyContent: "center";
+        alignItems: "center";
+    };
+    leftPart: {
+        justifyContent: "center";
+    };
+    lastLeftPart: {
+        justifyContent: "flex-end";
+    };
+    line: {
+        width: "100%";
+        height: number;
+        backgroundColor: string;
+        opacity: number;
+    };
+    lastLine: {
+        width: "100%";
+        height: number;
+        backgroundColor: string;
+    };
+    bottomLabel: {
+        width: "100%";
+    };
+    customDataPointContainer: {
+        position: "absolute";
+        justifyContent: "center";
+        alignItems: "center";
+    };
+};

package/dist/LineChart/styles.js

@@ -0,0 +1,46 @@
+import { StyleSheet } from 'react-native';
+export var styles = StyleSheet.create({
+    container: {
+        width: '100%',
+        marginBottom: 40,
+        marginRight: 40,
+    },
+    horizBar: {
+        flexDirection: 'row',
+    },
+    leftLabel: {
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    lastLeftLabel: {
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    leftPart: {
+        justifyContent: 'center',
+        // width: '100%',
+    },
+    lastLeftPart: {
+        justifyContent: 'flex-end',
+        // width: '100%',
+    },
+    line: {
+        width: '100%',
+        height: 1,
+        backgroundColor: 'gray',
+        opacity: 0.5,
+    },
+    lastLine: {
+        width: '100%',
+        height: 1,
+        backgroundColor: 'black',
+    },
+    bottomLabel: {
+        width: '100%',
+    },
+    customDataPointContainer: {
+        position: 'absolute',
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+});

package/dist/PieChart/index.d.ts

@@ -0,0 +1,2 @@
+import { PieChartPropsType } from 'gifted-charts-core';
+export declare const PieChart: (props: PieChartPropsType) => import("react/jsx-runtime").JSX.Element | null;

package/dist/PieChart/index.js

@@ -0,0 +1,99 @@
+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 } from "react/jsx-runtime";
+import { View } from 'react-native';
+import { PieChartMain } from './main';
+import { pieColors, usePieChart } from 'gifted-charts-core';
+export var PieChart = function (props) {
+    var _a = usePieChart(props), radius = _a.radius, extraRadiusForFocused = _a.extraRadiusForFocused, selectedIndex = _a.selectedIndex, setSelectedIndex = _a.setSelectedIndex, startAngle = _a.startAngle, total = _a.total, donut = _a.donut, isThreeD = _a.isThreeD, semiCircle = _a.semiCircle, inwardExtraLengthForFocused = _a.inwardExtraLengthForFocused, canvasWidth = _a.canvasWidth, canvasHeight = _a.canvasHeight, innerRadius = _a.innerRadius, innerCircleColor = _a.innerCircleColor, innerCircleBorderWidth = _a.innerCircleBorderWidth, innerCircleBorderColor = _a.innerCircleBorderColor, shiftInnerCenterX = _a.shiftInnerCenterX, shiftInnerCenterY = _a.shiftInnerCenterY, tiltAngle = _a.tiltAngle, isDataShifted = _a.isDataShifted, paddingHorizontal = _a.paddingHorizontal, paddingVertical = _a.paddingVertical;
+    var renderInnerCircle = function (innerRadius, innerCircleBorderWidth) {
+        if (props.centerLabelComponent || (donut && !isDataShifted)) {
+            return (_jsx(View, { style: [
+                    {
+                        height: innerRadius * 2,
+                        width: innerRadius * 2,
+                        borderRadius: innerRadius,
+                        position: 'absolute',
+                        // zIndex: 100,
+                        alignSelf: 'center',
+                        backgroundColor: innerCircleColor,
+                        left: canvasWidth / 2 -
+                            innerRadius +
+                            shiftInnerCenterX +
+                            extraRadiusForFocused +
+                            paddingHorizontal / 2,
+                        top: canvasHeight / 2 -
+                            innerRadius +
+                            shiftInnerCenterY +
+                            extraRadiusForFocused +
+                            paddingVertical / 2,
+                        borderWidth: innerCircleBorderWidth,
+                        borderColor: innerCircleBorderColor,
+                        justifyContent: 'center',
+                        alignItems: 'center',
+                    },
+                    isThreeD && {
+                        borderTopWidth: innerCircleBorderWidth * 5,
+                        borderLeftWidth: shiftInnerCenterX
+                            ? innerCircleBorderWidth * 2
+                            : innerCircleBorderWidth,
+                        transform: [{ rotateX: tiltAngle }],
+                    },
+                    semiCircle &&
+                        isThreeD && {
+                        borderTopWidth: isThreeD
+                            ? innerCircleBorderWidth * 5
+                            : innerCircleBorderWidth,
+                        borderLeftWidth: 0.5,
+                        borderLeftColor: innerCircleColor,
+                        borderBottomWidth: 0,
+                        borderRightWidth: 0.5,
+                        borderRightColor: innerCircleColor,
+                    },
+                ], children: _jsx(View, { style: { marginTop: semiCircle ? -0.5 * innerRadius : 0 }, children: props.centerLabelComponent ? props.centerLabelComponent() : null }) }));
+        }
+        return null;
+    };
+    if (!total)
+        return null;
+    return (_jsxs(View, { style: {
+            height: (radius + extraRadiusForFocused + paddingVertical / 2) *
+                (props.semiCircle ? 1 : 2),
+            width: (radius + extraRadiusForFocused + paddingHorizontal / 2) * 2,
+            overflow: 'hidden',
+        }, children: [_jsx(View, { style: { position: 'absolute' }, children: _jsx(PieChartMain, __assign({}, props, { selectedIndex: selectedIndex, setSelectedIndex: setSelectedIndex, paddingHorizontal: paddingHorizontal, paddingVertical: paddingVertical, extraRadiusForFocused: extraRadiusForFocused })) }), renderInnerCircle(innerRadius, innerCircleBorderWidth), props.data.length > 1 &&
+                props.data[selectedIndex] && // don't forget to add this one so there are no errors when the data is empty / updating
+                (props.focusOnPress || props.sectionAutoFocus) &&
+                selectedIndex !== -1 && (_jsx(View, { pointerEvents: "box-none", style: {
+                    position: 'absolute',
+                    top: -extraRadiusForFocused,
+                    left: -extraRadiusForFocused,
+                }, children: _jsx(PieChartMain, __assign({}, props, { data: [
+                        {
+                            value: props.data[selectedIndex].value,
+                            text: props.data[selectedIndex].text,
+                            color: props.data[selectedIndex].color ||
+                                pieColors[selectedIndex % 9],
+                            strokeColor: props.data[selectedIndex].strokeColor || undefined,
+                            strokeWidth: props.data[selectedIndex].strokeWidth || undefined,
+                            gradientCenterColor: props.data[selectedIndex].gradientCenterColor || undefined,
+                            shiftTextX: props.data[selectedIndex].shiftTextX || undefined,
+                            shiftTextY: props.data[selectedIndex].shiftTextY || undefined,
+                        },
+                        {
+                            value: total - props.data[selectedIndex].value,
+                            onPress: function () { return alert('black'); },
+                            peripheral: true,
+                            strokeWidth: 0,
+                        },
+                    ], radius: radius + extraRadiusForFocused, initialAngle: startAngle, innerRadius: props.innerRadius || radius / 2.5, isBiggerPie: true, setSelectedIndex: setSelectedIndex, paddingHorizontal: paddingHorizontal, paddingVertical: paddingVertical, extraRadiusForFocused: extraRadiusForFocused })) })), renderInnerCircle(innerRadius - inwardExtraLengthForFocused, inwardExtraLengthForFocused ? 0 : innerCircleBorderWidth)] }));
+};

package/dist/PieChart/main.d.ts

@@ -0,0 +1,2 @@
+import { PieChartMainProps } from 'gifted-charts-core';
+export declare const PieChartMain: (props: PieChartMainProps) => import("react/jsx-runtime").JSX.Element;

package/dist/PieChart/main.js

@@ -0,0 +1,182 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React from 'react';
+import { View } from 'react-native';
+import Svg, { Path, Circle, Text as SvgText, Defs, RadialGradient, Stop, G, } from 'react-native-svg';
+import { getPieChartMainProps, pieColors, } from 'gifted-charts-core';
+import { rnVersion } from '../utils';
+export var PieChartMain = function (props) {
+    var _a = getPieChartMainProps(props), isThreeD = _a.isThreeD, isBiggerPie = _a.isBiggerPie, data = _a.data, showInnerComponent = _a.showInnerComponent, radius = _a.radius, canvasWidth = _a.canvasWidth, canvasHeight = _a.canvasHeight, shadowWidth = _a.shadowWidth, backgroundColor = _a.backgroundColor, shadowColor = _a.shadowColor, semiCircle = _a.semiCircle, pi = _a.pi, initialAngle = _a.initialAngle, shadow = _a.shadow, donut = _a.donut, strokeWidth = _a.strokeWidth, strokeColor = _a.strokeColor, innerRadius = _a.innerRadius, showText = _a.showText, textColor = _a.textColor, textSize = _a.textSize, tiltAngle = _a.tiltAngle, labelsPosition = _a.labelsPosition, showTextBackground = _a.showTextBackground, textBackgroundColor = _a.textBackgroundColor, showValuesAsLabels = _a.showValuesAsLabels, showGradient = _a.showGradient, gradientCenterColor = _a.gradientCenterColor, toggleFocusOnPress = _a.toggleFocusOnPress, minShiftX = _a.minShiftX, minShiftY = _a.minShiftY, total = _a.total, horizAdjustment = _a.horizAdjustment, vertAdjustment = _a.vertAdjustment, cx = _a.cx, cy = _a.cy, pData = _a.pData, mData = _a.mData, paddingHorizontal = _a.paddingHorizontal, paddingVertical = _a.paddingVertical, extraRadiusForFocused = _a.extraRadiusForFocused;
+    return (_jsxs(View, { pointerEvents: "box-none", style: [
+            {
+                backgroundColor: backgroundColor,
+                height: semiCircle
+                    ? (canvasHeight + paddingVertical) / 2 + extraRadiusForFocused
+                    : canvasHeight + paddingVertical + extraRadiusForFocused * 2,
+                width: canvasWidth + paddingHorizontal + extraRadiusForFocused * 2,
+                overflow: 'hidden',
+            },
+            isThreeD && { transform: [{ rotateX: tiltAngle }] },
+        ], children: [_jsxs(Svg, { pointerEvents: rnVersion >= 720000 ? 'box-none' : 'auto', viewBox: "".concat(strokeWidth / -2 + minShiftX - extraRadiusForFocused - paddingHorizontal / 2, " ").concat(strokeWidth / -2 +
+                    minShiftY -
+                    extraRadiusForFocused -
+                    paddingVertical / 2, " ").concat((radius + extraRadiusForFocused + strokeWidth) * 2 +
+                    paddingHorizontal +
+                    horizAdjustment +
+                    (horizAdjustment ? strokeWidth : 0), " ").concat((radius + extraRadiusForFocused + strokeWidth) * 2 +
+                    paddingVertical +
+                    vertAdjustment +
+                    (vertAdjustment ? strokeWidth : 0)), height: (radius + extraRadiusForFocused) * 2 + strokeWidth + paddingVertical, width: (radius + extraRadiusForFocused) * 2 + strokeWidth + paddingHorizontal, children: [_jsx(Defs, { children: data.map(function (item, index) {
+                            return (_jsxs(RadialGradient, { id: 'grad' + index, cx: "50%", cy: "50%", rx: "50%", ry: "50%", fx: "50%", fy: "50%", gradientUnits: "userSpaceOnUse", children: [_jsx(Stop, { offset: "0%", stopColor: item.gradientCenterColor || gradientCenterColor, stopOpacity: "1" }), _jsx(Stop, { offset: "100%", stopColor: item.color || pieColors[index % 9], stopOpacity: "1" })] }, index + ''));
+                        }) }), data.length === 1 ? (_jsx(_Fragment, { children: _jsx(Circle, { cx: cx, cy: cy, r: radius, fill: showGradient
+                                ? "url(#grad".concat(0, ")")
+                                : data[0].color || pieColors[0 % 9], onPress: function () {
+                                data[0].onPress
+                                    ? data[0].onPress()
+                                    : props.onPress
+                                        ? props.onPress(data[0], 0)
+                                        : null;
+                            } }) })) : (data.map(function (item, index) {
+                        // console.log('index', index);
+                        var nextItem;
+                        if (index === pData.length - 1)
+                            nextItem = pData[0];
+                        else
+                            nextItem = pData[index + 1];
+                        var sx = cx * (1 + Math.sin(2 * pi * pData[index] + initialAngle)) +
+                            (item.shiftX || 0);
+                        var sy = cy * (1 - Math.cos(2 * pi * pData[index] + initialAngle)) +
+                            (item.shiftY || 0);
+                        var ax = cx * (1 + Math.sin(2 * pi * nextItem + initialAngle)) +
+                            (item.shiftX || 0);
+                        var ay = cy * (1 - Math.cos(2 * pi * nextItem + initialAngle)) +
+                            (item.shiftY || 0);
+                        if (isBiggerPie && index)
+                            return null;
+                        return (_jsx(Path, { d: "M ".concat(cx + (item.shiftX || 0), " ").concat(cy + (item.shiftY || 0), " L ").concat(sx, " ").concat(sy, " A ").concat(radius, " ").concat(radius, " 0 ").concat(semiCircle ? 0 : data[index].value > total / 2 ? 1 : 0, " 1 ").concat(ax, " ").concat(ay, " L ").concat(cx + (item.shiftX || 0), " ").concat(cy + (item.shiftY || 0)), stroke: item.strokeColor || strokeColor, strokeWidth: props.focusOnPress && props.selectedIndex === index
+                                ? 0
+                                : item.strokeWidth === 0
+                                    ? 0
+                                    : item.strokeWidth || strokeWidth, fill: props.selectedIndex === index || item.peripheral
+                                ? 'transparent'
+                                : showGradient
+                                    ? "url(#grad".concat(index, ")")
+                                    : item.color || pieColors[index % 9], onPress: function () {
+                                if (item.onPress) {
+                                    item.onPress();
+                                }
+                                else if (props.onPress) {
+                                    props.onPress(item, index);
+                                }
+                                if (props.focusOnPress) {
+                                    if (props.selectedIndex === index || props.isBiggerPie) {
+                                        if (toggleFocusOnPress) {
+                                            props.setSelectedIndex(-1);
+                                        }
+                                    }
+                                    else {
+                                        props.setSelectedIndex(index);
+                                    }
+                                }
+                            } }, index + 'a'));
+                    })), (showText || showInnerComponent) &&
+                        data.map(function (item, index) {
+                            var _a, _b, _c, _d, _e, _f;
+                            var localPieInnerComponent = (_a = item.pieInnerComponent) !== null && _a !== void 0 ? _a : props.pieInnerComponent;
+                            if (isBiggerPie && index)
+                                return null;
+                            if (!props.data[index].value)
+                                return null;
+                            var mx = cx * (1 + Math.sin(2 * pi * mData[index] + initialAngle));
+                            var my = cy * (1 - Math.cos(2 * pi * mData[index] + initialAngle));
+                            var midx = (mx + cx) / 2;
+                            var midy = (my + cy) / 2;
+                            var x = midx, y = midy;
+                            var labelPosition = item.labelPosition || labelsPosition;
+                            if (labelPosition === 'onBorder') {
+                                x = mx;
+                                y = my;
+                            }
+                            else if (labelPosition === 'outward') {
+                                x = (midx + mx) / 2;
+                                y = (midy + my) / 2;
+                            }
+                            else if (labelPosition === 'inward') {
+                                x = (midx + cx) / 2;
+                                y = (midy + cy) / 2;
+                            }
+                            x += item.shiftX || 0;
+                            y += item.shiftY || 0;
+                            if (data.length === 1) {
+                                if (donut) {
+                                    y =
+                                        (radius -
+                                            innerRadius +
+                                            (item.textBackgroundRadius ||
+                                                props.textBackgroundRadius ||
+                                                item.textSize ||
+                                                textSize)) /
+                                            2;
+                                }
+                                else {
+                                    y = cy;
+                                }
+                            }
+                            return (_jsxs(React.Fragment, { children: [showTextBackground ? (_jsx(Circle, { cx: x + ((_c = (_b = item.shiftTextBackgroundX) !== null && _b !== void 0 ? _b : item.shiftTextX) !== null && _c !== void 0 ? _c : 0), cy: y +
+                                            ((_e = (_d = item.shiftTextBackgroundY) !== null && _d !== void 0 ? _d : item.shiftTextY) !== null && _e !== void 0 ? _e : 0) -
+                                            (item.textSize || textSize) / 4, r: item.textBackgroundRadius ||
+                                            props.textBackgroundRadius ||
+                                            item.textSize ||
+                                            textSize, fill: item.textBackgroundColor || textBackgroundColor, onPress: function () {
+                                            item.onLabelPress
+                                                ? item.onLabelPress()
+                                                : props.onLabelPress
+                                                    ? props.onLabelPress(item, index)
+                                                    : item.onPress
+                                                        ? item.onPress()
+                                                        : props.onPress
+                                                            ? props.onPress(item, index)
+                                                            : null;
+                                            if (props.focusOnPress) {
+                                                if (props.selectedIndex === index) {
+                                                    if (toggleFocusOnPress) {
+                                                        props.setSelectedIndex(-1);
+                                                    }
+                                                }
+                                                else {
+                                                    props.setSelectedIndex(index);
+                                                }
+                                            }
+                                        } })) : null, _jsx(SvgText, { fill: item.textColor || textColor || pieColors[(index + 2) % 9], fontSize: item.textSize || textSize, fontFamily: item.font || props.font, fontWeight: item.fontWeight || props.fontWeight, fontStyle: item.fontStyle || props.fontStyle || 'normal', x: x +
+                                            (item.shiftTextX || 0) -
+                                            (item.textSize || textSize) / 1.8, y: y + (item.shiftTextY || 0), onPress: function () {
+                                            item.onLabelPress
+                                                ? item.onLabelPress()
+                                                : props.onLabelPress
+                                                    ? props.onLabelPress(item, index)
+                                                    : item.onPress
+                                                        ? item.onPress()
+                                                        : props.onPress
+                                                            ? props.onPress(item, index)
+                                                            : null;
+                                            if (props.focusOnPress) {
+                                                if (props.selectedIndex === index) {
+                                                    if (toggleFocusOnPress) {
+                                                        props.setSelectedIndex(-1);
+                                                    }
+                                                }
+                                                else {
+                                                    props.setSelectedIndex(index);
+                                                }
+                                            }
+                                        }, children: item.text || (showValuesAsLabels ? item.value + '' : '') }), localPieInnerComponent ? (_jsx(G, { x: x, y: y, children: (_f = localPieInnerComponent === null || localPieInnerComponent === void 0 ? void 0 : localPieInnerComponent(item, index)) !== null && _f !== void 0 ? _f : null })) : null] }, index));
+                        })] }), isThreeD && shadow && !semiCircle ? (_jsx(View, { style: {
+                    width: radius * 2,
+                    height: radius * 2,
+                    backgroundColor: shadowColor,
+                    borderRadius: radius,
+                    position: 'absolute',
+                    top: shadowWidth + paddingVertical / 2,
+                    left: paddingHorizontal / 2,
+                    zIndex: -1,
+                } })) : null] }));
+};

package/dist/PieChartPro/index.d.ts

@@ -0,0 +1,2 @@
+import { PieChartPropsType } from 'gifted-charts-core';
+export declare const PieChartPro: (props: PieChartPropsType) => import("react/jsx-runtime").JSX.Element;

package/dist/PieChartPro/index.js

@@ -0,0 +1,124 @@
+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 { useEffect } from 'react';
+import { pieColors, usePiePro, } from 'gifted-charts-core';
+import { Defs, Path, Stop, Svg, Text as SvgText, RadialGradient, } from 'react-native-svg';
+import { Animated, View } from 'react-native';
+export var PieChartPro = function (props) {
+    var _a = usePiePro(props), radius = _a.radius, total = _a.total, donut = _a.donut, strokeWidth = _a.strokeWidth, maxStrokeWidth = _a.maxStrokeWidth, animationDuration = _a.animationDuration, initial = _a.initial, dInitial = _a.dInitial, dFinal = _a.dFinal, getStartCaps = _a.getStartCaps, getEndCaps = _a.getEndCaps, getTextCoordinates = _a.getTextCoordinates, height = _a.height, heightFactor = _a.heightFactor, svgProps = _a.svgProps;
+    var data = props.data, curvedStartEdges = props.curvedStartEdges, curvedEndEdges = props.curvedEndEdges, _b = props.edgesRadius, edgesRadius = _b === void 0 ? 0 : _b, showGradient = props.showGradient, ring = props.ring, centerLabelComponent = props.centerLabelComponent, strokeDashArray = props.strokeDashArray, semiCircle = props.semiCircle;
+    var isAnimated = props.isAnimated;
+    if (!props.semiCircle && data.some(function (dataItem) { return dataItem.value > total / 2; })) {
+        // if we have an obtuse arc, we cant animate
+        isAnimated = false;
+    }
+    var AnimatedPath = Animated.createAnimatedComponent(Path);
+    var AnimatedText = Animated.createAnimatedComponent(SvgText);
+    var animatedValues = data.map(function (i) { return new Animated.Value(0); });
+    var animatedOpacityValue = new Animated.Value(0);
+    var animatedPaths = data.map(function (item, index) {
+        var _a;
+        return (_a = animatedValues[index]) === null || _a === void 0 ? void 0 : _a.interpolate({
+            inputRange: [0, 1],
+            outputRange: [dInitial[index], dFinal[index]],
+        });
+    });
+    var animatedOpacity = animatedOpacityValue.interpolate({
+        inputRange: [0, 1],
+        outputRange: [0, 1],
+    });
+    useEffect(function () {
+        Animated.timing(animatedOpacityValue, {
+            toValue: 1,
+            duration: 10,
+            useNativeDriver: true,
+            delay: animationDuration,
+        }).start();
+        animatedValues.forEach(function (animatedValue) {
+            return Animated.timing(animatedValue, {
+                toValue: 1,
+                duration: animationDuration,
+                useNativeDriver: true,
+            }).start();
+        });
+    }, [data]);
+    var adjustHeight = height * heightFactor;
+    var rnSvgProps = semiCircle ? {} : svgProps;
+    return (_jsxs(View, { style: {
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            height: adjustHeight,
+            width: height * 2,
+        }, children: [_jsx(View, { style: semiCircle
+                    ? { position: 'absolute', bottom: 0 }
+                    : { position: 'absolute' }, children: centerLabelComponent ? centerLabelComponent() : null }), _jsx(Svg, __assign({}, rnSvgProps, { viewBox: semiCircle
+                    ? ""
+                    : "".concat(-maxStrokeWidth * 1.5, " ").concat(-maxStrokeWidth - (semiCircle ? height / 2 : 0), " ").concat(adjustHeight, " ").concat(adjustHeight), transform: semiCircle
+                    ? []
+                    : [{ scaleY: maxStrokeWidth ? 1 + maxStrokeWidth / (radius * 2) : 1 }], children: total ? (_jsxs(_Fragment, { children: [_jsx(Defs, { children: data.map(function (item, index) {
+                                return (_jsxs(RadialGradient, { id: 'grad' + index, cx: "50%", cy: "50%", rx: "50%", ry: "50%", fx: "50%", fy: "50%", gradientUnits: "userSpaceOnUse", children: [_jsx(Stop, { offset: "0%", stopColor: item.gradientCenterColor, stopOpacity: "1" }), _jsx(Stop, { offset: "100%", stopColor: item.color || pieColors[index % 9], stopOpacity: "1" })] }, index + ''));
+                            }) }), data.map(function (item, index) {
+                            var _a, _b, _c, _d;
+                            var borderWidth = (_a = item.strokeWidth) !== null && _a !== void 0 ? _a : strokeWidth;
+                            var borderColor = (_c = (_b = item.strokeColor) !== null && _b !== void 0 ? _b : props.strokeColor) !== null && _c !== void 0 ? _c : (borderWidth ? 'black' : 'transparent');
+                            var strokeDashArrayLocal = (_d = item.strokeDashArray) !== null && _d !== void 0 ? _d : strokeDashArray;
+                            return (_jsx(AnimatedPath, { id: "renderPath", d: isAnimated ? animatedPaths[index] : dFinal[index], fill: ring
+                                    ? 'transparent'
+                                    : showGradient
+                                        ? "url(#grad".concat(index, ")")
+                                        : data[index].color || pieColors[index % 9], strokeWidth: borderWidth, strokeDasharray: strokeDashArrayLocal, stroke: borderColor }, "path".concat(index)));
+                        }), donut
+                            ? data.map(function (item, index) {
+                                if (curvedStartEdges ||
+                                    edgesRadius ||
+                                    item.isStartEdgeCurved ||
+                                    item.startEdgeRadius)
+                                    return (_jsx(AnimatedPath, { d: "".concat(initial, " ").concat(getStartCaps(index, item)), opacity: isAnimated ? animatedOpacity : 1, fill: showGradient
+                                            ? "url(#grad".concat(index, ")")
+                                            : data[index].color || pieColors[index % 9] }, "cap".concat(index)));
+                                return null;
+                            })
+                            : null, donut
+                            ? data.map(function (item, index) {
+                                if (curvedEndEdges ||
+                                    edgesRadius ||
+                                    item.isEndEdgeCurved ||
+                                    item.endEdgeRadius)
+                                    return (_jsx(Path, { d: "".concat(initial, " ").concat(getEndCaps(index, item)), fill: showGradient
+                                            ? "url(#grad".concat(index, ")")
+                                            : data[index].color || pieColors[index % 9] }, "cap".concat(index)));
+                                return null;
+                            })
+                            : null, data.map(function (item, index) {
+                            var _a, _b;
+                            var _c = getTextCoordinates(index, item.labelPosition), x = _c.x, y = _c.y;
+                            return (_jsx(AnimatedText, { 
+                                // style={{ pointerEvents: 'all' }}
+                                fill: item.textColor ||
+                                    props.textColor ||
+                                    pieColors[(index + 2) % 9], opacity: isAnimated ? animatedOpacity : 1, fontSize: item.textSize || props.textSize, fontFamily: item.font || props.font, fontWeight: item.fontWeight || props.fontWeight, fontStyle: item.fontStyle || props.fontStyle || 'normal', x: x +
+                                    (item.shiftTextX || 0) -
+                                    ((_b = (_a = item.textSize) !== null && _a !== void 0 ? _a : props.textSize) !== null && _b !== void 0 ? _b : 0) / 1.8, y: y + (item.shiftTextY || 0), onPress: function () {
+                                    var _a;
+                                    item.onLabelPress
+                                        ? item.onLabelPress()
+                                        : props.onLabelPress
+                                            ? props.onLabelPress(item, index)
+                                            : item.onPress
+                                                ? item.onPress()
+                                                : (_a = props.onPress) === null || _a === void 0 ? void 0 : _a.call(props, item, index);
+                                }, children: item.text ||
+                                    (props.showValuesAsLabels ? item.value + '' : '') }, "label".concat(index)));
+                        })] })) : null }))] }));
+};

package/dist/PopulationPyramid/index.d.ts

@@ -0,0 +1,2 @@
+import { PopulationPyramidPropsType } from 'gifted-charts-core';
+export declare const PopulationPyramid: (props: PopulationPyramidPropsType) => import("react/jsx-runtime").JSX.Element;