@harveylx/react-native-gifted-charts 1.4.70

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 '@harveylx/gifted-charts-core';
+export declare const PieChart: (props: PieChartPropsType) => import("react/jsx-runtime").JSX.Element | null;

package/dist/PieChart/index.js

@@ -0,0 +1,146 @@
+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);
+};
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { View, Text } from 'react-native';
+import { PieChartMain } from './main';
+import { pieColors, usePieChart } from '@harveylx/gifted-charts-core';
+import { isWebApp } from '../utils';
+import { useState } from 'react';
+export var PieChart = function (props) {
+    if (!props.data)
+        return null;
+    var _a = usePieChart(props), radius = _a.radius, extraRadius = _a.extraRadius, 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, data = _a.data, showTooltip = _a.showTooltip, tooltipHorizontalShift = _a.tooltipHorizontalShift, tooltipVerticalShift = _a.tooltipVerticalShift, tooltipComponent = _a.tooltipComponent, getTooltipText = _a.getTooltipText, tooltipBackgroundColor = _a.tooltipBackgroundColor, tooltipBorderRadius = _a.tooltipBorderRadius, tooltipWidth = _a.tooltipWidth, tooltipTextNoOfLines = _a.tooltipTextNoOfLines, textColor = _a.textColor, textSize = _a.textSize, font = _a.font, fontWeight = _a.fontWeight, fontStyle = _a.fontStyle, tooltipSelectedIndex = _a.tooltipSelectedIndex, setTooltipSelectedIndex = _a.setTooltipSelectedIndex;
+    var _b = __read(useState(0), 2), touchX = _b[0], setTouchX = _b[1];
+    var _c = __read(useState(0), 2), touchY = _c[0], setTouchY = _c[1];
+    var renderInnerCircle = function (innerRadius, innerCircleBorderWidth) {
+        var _a, _b;
+        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 +
+                            extraRadius +
+                            paddingHorizontal / 2,
+                        top: canvasHeight / 2 -
+                            innerRadius +
+                            shiftInnerCenterY +
+                            extraRadius +
+                            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,
+                    },
+                ], pointerEvents: "box-none", children: _jsx(View, { style: { marginTop: semiCircle ? -0.5 * innerRadius : 0 }, children: (_b = (_a = props.centerLabelComponent) === null || _a === void 0 ? void 0 : _a.call(props, selectedIndex)) !== null && _b !== void 0 ? _b : null }) }));
+        }
+        return null;
+    };
+    var renderTooltip = function () {
+        var _a, _b;
+        return (_jsx(View, { style: {
+                position: 'absolute',
+                left: touchX > (radius + extraRadius) * 1.5
+                    ? props.tooltipHorizontalShift
+                        ? touchX - tooltipHorizontalShift
+                        : touchX -
+                            (tooltipWidth !== null && tooltipWidth !== void 0 ? tooltipWidth : getTooltipText(tooltipSelectedIndex).length * 10)
+                    : touchX - tooltipHorizontalShift,
+                top: touchY < 30
+                    ? props.tooltipVerticalShift
+                        ? touchY - tooltipVerticalShift
+                        : touchY
+                    : touchY - tooltipVerticalShift,
+            }, children: data[tooltipSelectedIndex].tooltipComponent ? ((_b = (_a = data[tooltipSelectedIndex]).tooltipComponent) === null || _b === void 0 ? void 0 : _b.call(_a)) : tooltipComponent ? (tooltipComponent(tooltipSelectedIndex)) : (_jsx(View, { style: {
+                    backgroundColor: tooltipBackgroundColor,
+                    borderRadius: tooltipBorderRadius,
+                    paddingHorizontal: 8,
+                    paddingBottom: 8,
+                    paddingTop: 4,
+                    width: tooltipWidth,
+                }, children: _jsx(Text, { numberOfLines: tooltipTextNoOfLines, style: {
+                        color: data[tooltipSelectedIndex].textColor ||
+                            textColor ||
+                            'white',
+                        textAlign: 'center',
+                        fontSize: textSize,
+                        fontFamily: font,
+                        fontWeight: fontWeight,
+                        fontStyle: fontStyle,
+                    }, children: getTooltipText(tooltipSelectedIndex) }) })) }));
+    };
+    return (_jsxs(View, { style: {
+            height: (radius + extraRadius + paddingVertical / 2) *
+                (props.semiCircle ? 1 : 2),
+            width: (radius + extraRadius + paddingHorizontal / 2) * 2,
+            overflow: 'hidden',
+        }, children: [_jsx(View, { style: { position: 'absolute' }, children: _jsx(PieChartMain, __assign({}, props, { setTouchX: setTouchX, setTouchY: setTouchY, tooltipSelectedIndex: tooltipSelectedIndex, setTooltipSelectedIndex: setTooltipSelectedIndex, setSelectedIndex: setSelectedIndex, paddingHorizontal: paddingHorizontal, paddingVertical: paddingVertical, extraRadius: extraRadius })) }), 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: -extraRadius,
+                    left: -extraRadius,
+                    zIndex: isWebApp ? -1 : 0, // was not getting displayed in web (using Expo)
+                }, children: _jsx(PieChartMain, __assign({}, props, { setTouchX: setTouchX, setTouchY: setTouchY, tooltipSelectedIndex: tooltipSelectedIndex, setTooltipSelectedIndex: setTooltipSelectedIndex, data: [
+                        __assign(__assign({}, props.data[selectedIndex]), { color: props.showGradient
+                                ? "url(#grad".concat(selectedIndex, ")")
+                                : props.data[selectedIndex].color ||
+                                    pieColors[selectedIndex % 9] }),
+                        {
+                            value: total - props.data[selectedIndex].value,
+                            peripheral: true,
+                            strokeWidth: 0,
+                        },
+                    ], radius: radius + extraRadius, initialAngle: startAngle, innerRadius: props.innerRadius || radius / 2.5, isBiggerPie: true, setSelectedIndex: setSelectedIndex, paddingHorizontal: paddingHorizontal, paddingVertical: paddingVertical, extraRadius: extraRadius })) })), renderInnerCircle(innerRadius - inwardExtraLengthForFocused, inwardExtraLengthForFocused ? 0 : innerCircleBorderWidth), showTooltip && tooltipSelectedIndex !== -1 ? renderTooltip() : null] }));
+};

package/dist/PieChart/main.d.ts

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

package/dist/PieChart/main.js

@@ -0,0 +1,178 @@
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { useState } from 'react';
+import { Pressable, View } from 'react-native';
+import Svg, { Path, Circle, Text as SvgText, Defs, RadialGradient, Stop, G, Line, } from 'react-native-svg';
+import { getPieChartMainProps, pieColors, } from '@harveylx/gifted-charts-core';
+import { isWebApp, rnVersion } from '../utils';
+export var PieChartMain = function (props) {
+    var _a;
+    var _b = getPieChartMainProps(props), isThreeD = _b.isThreeD, isBiggerPie = _b.isBiggerPie, data = _b.data, showInnerComponent = _b.showInnerComponent, radius = _b.radius, canvasWidth = _b.canvasWidth, canvasHeight = _b.canvasHeight, shadowWidth = _b.shadowWidth, backgroundColor = _b.backgroundColor, shadowColor = _b.shadowColor, semiCircle = _b.semiCircle, pi = _b.pi, initialAngle = _b.initialAngle, shadow = _b.shadow, donut = _b.donut, strokeWidth = _b.strokeWidth, strokeColor = _b.strokeColor, innerRadius = _b.innerRadius, showText = _b.showText, textColor = _b.textColor, textSize = _b.textSize, tiltAngle = _b.tiltAngle, labelsPosition = _b.labelsPosition, showTextBackground = _b.showTextBackground, textBackgroundColor = _b.textBackgroundColor, showValuesAsLabels = _b.showValuesAsLabels, showGradient = _b.showGradient, gradientCenterColor = _b.gradientCenterColor, minShiftX = _b.minShiftX, minShiftY = _b.minShiftY, total = _b.total, horizAdjustment = _b.horizAdjustment, vertAdjustment = _b.vertAdjustment, cx = _b.cx, cy = _b.cy, mData = _b.mData, paddingHorizontal = _b.paddingHorizontal, paddingVertical = _b.paddingVertical, extraRadius = _b.extraRadius, showExternalLabels = _b.showExternalLabels, getExternaLabelProperties = _b.getExternaLabelProperties, coordinates = _b.coordinates, onPressed = _b.onPressed, font = _b.font, fontWeight = _b.fontWeight, fontStyle = _b.fontStyle, edgesPressable = _b.edgesPressable;
+    var setTouchX = props.setTouchX, setTouchY = props.setTouchY;
+    var prevSide = 'right';
+    var prevLabelComponentX = 0;
+    var wasFirstItemOnPole = false;
+    var _c = __read(useState(0), 2), top = _c[0], setTop = _c[1];
+    var _d = __read(useState(0), 2), left = _d[0], setLeft = _d[1];
+    var onPressHandler = function (e) {
+        var x = 0, y = 0;
+        if (isWebApp) {
+            x = e.clientX - left;
+            y = e.clientY - top;
+        }
+        else {
+            x = e.nativeEvent.locationX;
+            y = e.nativeEvent.locationY;
+        }
+        x -= extraRadius;
+        y -= extraRadius;
+        setTouchX(x);
+        setTouchY(y);
+        var r = Math.sqrt(Math.pow((x - cx), 2) + Math.pow((y - cy), 2));
+        if (r > radius || (donut && r < innerRadius))
+            return;
+        var a = Math.atan2(y - cy, x - cx);
+        for (var index = 0; index < data.length; index++) {
+            var angle = coordinates[index];
+            var sx = angle.sx, sy = angle.sy, ax = angle.ax, ay = angle.ay;
+            var startAngle = Math.atan2(sy - cy, sx - cx);
+            var endAngle = Math.atan2(ay - cy, ax - cx);
+            if (startAngle < endAngle) {
+                if (startAngle < a && a < endAngle) {
+                    onPressed(data[index], index);
+                    break;
+                }
+            }
+            else {
+                if (a > startAngle || a < endAngle) {
+                    onPressed(data[index], index);
+                    break;
+                }
+            }
+        }
+    };
+    return (_jsx(Pressable, { onPress: onPressHandler, pointerEvents: isBiggerPie && !edgesPressable ? 'none' : 'auto', children: _jsxs(View, { pointerEvents: "box-only", onLayout: function (e) {
+                if (!isWebApp)
+                    return;
+                setTop(e.nativeEvent.layout.top);
+                setLeft(e.nativeEvent.layout.left);
+            }, style: [
+                {
+                    backgroundColor: backgroundColor,
+                    height: semiCircle
+                        ? (canvasHeight + paddingVertical) / 2 + extraRadius
+                        : canvasHeight + paddingVertical + extraRadius * 2,
+                    width: canvasWidth + paddingHorizontal + extraRadius * 2,
+                    overflow: 'hidden',
+                },
+                isThreeD && { transform: [{ rotateX: tiltAngle }] },
+            ], children: [_jsxs(Svg, { pointerEvents: rnVersion >= 720000 ? 'box-none' : 'auto', viewBox: "".concat(strokeWidth / -2 + minShiftX - extraRadius - paddingHorizontal / 2, " ").concat(strokeWidth / -2 + minShiftY - extraRadius - paddingVertical / 2, " ").concat((radius + extraRadius + strokeWidth) * 2 +
+                        paddingHorizontal +
+                        horizAdjustment +
+                        (horizAdjustment ? strokeWidth : 0), " ").concat((radius + extraRadius + strokeWidth) * 2 +
+                        paddingVertical +
+                        vertAdjustment +
+                        (vertAdjustment ? strokeWidth : 0)), height: (radius + extraRadius) * 2 + strokeWidth + paddingVertical, width: (radius + extraRadius) * 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 || !total ? (_jsx(_Fragment, { children: _jsx(Circle, { cx: cx, cy: cy, r: radius, fill: showGradient
+                                    ? "url(#grad".concat(0, ")")
+                                    : ((_a = data[0]) === null || _a === void 0 ? void 0 : _a.color) || pieColors[0 % 9] }) })) : (data.map(function (item, index) {
+                            var _a = coordinates[index], sx = _a.sx, sy = _a.sy, ax = _a.ax, ay = _a.ay;
+                            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
+                                    ? 'none'
+                                    : showGradient
+                                        ? "url(#grad".concat(index, ")")
+                                        : item.color || pieColors[index % 9] }, index + 'a'));
+                        })), (showText || showInnerComponent || showExternalLabels) &&
+                            data.map(function (item, index) {
+                                var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+                                var localPieInnerComponent = (_a = item.pieInnerComponent) !== null && _a !== void 0 ? _a : props.pieInnerComponent;
+                                var pieInnerComponentHeight = (_b = props.pieInnerComponentHeight) !== null && _b !== void 0 ? _b : 0;
+                                var pieInnerComponentWidth = (_c = props.pieInnerComponentWidth) !== null && _c !== void 0 ? _c : 0;
+                                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;
+                                    }
+                                }
+                                var _k = getExternaLabelProperties(item, mx, my, cx, cy, prevSide, prevLabelComponentX, index === data.length - 1, // isLast
+                                wasFirstItemOnPole), labelLineColor = _k.labelLineColor, labelLineThickness = _k.labelLineThickness, labelComponentHeight = _k.labelComponentHeight, inX = _k.inX, inY = _k.inY, outX = _k.outX, outY = _k.outY, finalX = _k.finalX, labelComponentX = _k.labelComponentX, labelComponentY = _k.labelComponentY, localExternalLabelComponent = _k.localExternalLabelComponent, isRightHalf = _k.isRightHalf;
+                                prevSide = isRightHalf ? 'right' : 'left';
+                                prevLabelComponentX = labelComponentX;
+                                if (index === 0)
+                                    wasFirstItemOnPole = labelComponentY !== outY;
+                                return (_jsxs(React.Fragment, { children: [showExternalLabels ? (_jsxs(G, { children: [_jsx(Line, { x1: inX, x2: outX, y1: inY, y2: outY, stroke: labelLineColor, strokeWidth: labelLineThickness }), _jsx(Line, { x1: outX, x2: finalX, y1: outY, y2: outY, stroke: labelLineColor, strokeWidth: labelLineThickness }), localExternalLabelComponent ? (_jsx(G, { x: labelComponentX, y: labelComponentY + labelComponentHeight / 2, children: (_d = localExternalLabelComponent === null || localExternalLabelComponent === void 0 ? void 0 : localExternalLabelComponent(item, index)) !== null && _d !== void 0 ? _d : null })) : null] })) : null, showTextBackground ? (_jsx(Circle, { cx: x + ((_f = (_e = item.shiftTextBackgroundX) !== null && _e !== void 0 ? _e : item.shiftTextX) !== null && _f !== void 0 ? _f : 0), cy: y +
+                                                ((_h = (_g = item.shiftTextBackgroundY) !== null && _g !== void 0 ? _g : item.shiftTextY) !== null && _h !== void 0 ? _h : 0) -
+                                                (item.textSize || textSize) / 4, r: item.textBackgroundRadius ||
+                                                props.textBackgroundRadius ||
+                                                item.textSize ||
+                                                textSize, fill: item.textBackgroundColor || textBackgroundColor })) : null, showText && (_jsx(SvgText, { fill: item.textColor ||
+                                                textColor ||
+                                                pieColors[(index + 2) % 9], fontSize: item.textSize || textSize, fontFamily: item.font || font, fontWeight: item.fontWeight || fontWeight, fontStyle: item.fontStyle || fontStyle || 'normal', x: x +
+                                                (item.shiftTextX || 0) -
+                                                (item.textSize || textSize) / 1.8, y: y + (item.shiftTextY || 0), children: item.text || (showValuesAsLabels ? item.value + '' : '') })), localPieInnerComponent ? (_jsx(G, { x: x - pieInnerComponentHeight / 2, y: y - pieInnerComponentWidth / 2, children: (_j = localPieInnerComponent === null || localPieInnerComponent === void 0 ? void 0 : localPieInnerComponent(item, index)) !== null && _j !== void 0 ? _j : 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 '@harveylx/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 '@harveylx/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' : 'none');
+                            var strokeDashArrayLocal = (_d = item.strokeDashArray) !== null && _d !== void 0 ? _d : strokeDashArray;
+                            return (_jsx(AnimatedPath, { id: "renderPath", d: isAnimated ? animatedPaths[index] : dFinal[index], fill: ring
+                                    ? 'none'
+                                    : 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 '@harveylx/gifted-charts-core';
+export declare const PopulationPyramid: (props: PopulationPyramidPropsType) => import("react/jsx-runtime").JSX.Element;