@quillsql/react 1.7.1 → 1.7.2

package/lib/PieChart.js

@@ -1,35 +1,40 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
+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 __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
     }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
+    return to.concat(ar || Array.prototype.slice.call(from));
 };
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.findComplementaryAndAnalogousColors = exports.DonutChartTooltip = exports.ChartTooltipRow = exports.ChartTooltipFrame = exports.parseLabelInput = exports.parseData = exports.sumNumericArray = exports.defaultValueFormatter = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /* eslint-disable @typescript-eslint/ban-ts-comment */
 /* eslint-disable react/display-name */
 // @ts-nocheck
-const react_1 = __importStar(require("react"));
-const recharts_1 = require("recharts");
+import React, { useRef, useState, useEffect } from 'react';
+import { Pie, PieChart, ResponsiveContainer, Tooltip, Legend } from 'recharts';
 // const data = [
 //   {
 //     name: 'Project Nile',
@@ -128,20 +133,20 @@ const recharts_1 = require("recharts");
 //     pct_of_the_total: 0.00522734435854761,
 //   },
 // ];
-const useOnWindowResize = (handler, initialWindowSize) => {
-    const [windowSize, setWindowSize] = (0, react_1.useState)(initialWindowSize);
-    (0, react_1.useEffect)(() => {
-        const handleResize = () => {
+var useOnWindowResize = function (handler, initialWindowSize) {
+    var _a = useState(initialWindowSize), windowSize = _a[0], setWindowSize = _a[1];
+    useEffect(function () {
+        var handleResize = function () {
             setWindowSize(window.innerWidth);
             handler();
         };
         handleResize();
         window.addEventListener('resize', handleResize);
-        return () => window.removeEventListener('resize', handleResize);
+        return function () { return window.removeEventListener('resize', handleResize); };
     }, [handler, windowSize]);
 };
-const ChartLegend = (categories, colors) => {
-    const legendRef = (0, react_1.useRef)(null);
+var ChartLegend = function (categories, colors) {
+    var legendRef = useRef(null);
     //   useOnWindowResize(() => {
     //     const calculateHeight = (height: number | undefined) =>
     //       height
@@ -149,28 +154,28 @@ const ChartLegend = (categories, colors) => {
     //         : 60; // default height
     //     setLegendHeight(calculateHeight(legendRef.current?.clientHeight));
     //   });
-    return ((0, jsx_runtime_1.jsx)("div", { ref: legendRef, className: "qq-flex qq-items-center qq-justify-end", children: (0, jsx_runtime_1.jsx)(recharts_1.Legend
+    return (_jsx("div", __assign({ ref: legendRef, className: "qq-flex qq-items-center qq-justify-end" }, { children: _jsx(Legend
         // @ts-ignore
         , { 
             // @ts-ignore
-            categories: categories, colors: colors }) }));
+            categories: categories, colors: colors }) })));
 };
-const iconVariantValues = [
+var iconVariantValues = [
     'simple',
     'light',
     'shadow',
     'solid',
     'outlined',
 ];
-const deltaTypeValues = [
+var deltaTypeValues = [
     'increase',
     'moderateIncrease',
     'decrease',
     'moderateDecrease',
     'unchanged',
 ];
-const sizeValues = ['xs', 'sm', 'md', 'lg', 'xl'];
-const colorValues = [
+var sizeValues = ['xs', 'sm', 'md', 'lg', 'xl'];
+var colorValues = [
     'slate',
     'gray',
     'zinc',
@@ -194,7 +199,7 @@ const colorValues = [
     'pink',
     'rose',
 ];
-const justifyContentValues = [
+var justifyContentValues = [
     'start',
     'end',
     'center',
@@ -202,17 +207,19 @@ const justifyContentValues = [
     'around',
     'evenly',
 ];
-const alignItemsValues = [
+var alignItemsValues = [
     'start',
     'end',
     'center',
     'baseline',
     'stretch',
 ];
-const defaultValueFormatter = (value) => (value * 1).toFixed(1) + '%';
-exports.defaultValueFormatter = defaultValueFormatter;
-const sumNumericArray = (arr) => arr.reduce((prefixSum, num) => prefixSum + num, 0);
-exports.sumNumericArray = sumNumericArray;
+export var defaultValueFormatter = function (value) {
+    return (value * 1).toFixed(1) + '%';
+};
+export var sumNumericArray = function (arr) {
+    return arr.reduce(function (prefixSum, num) { return prefixSum + num; }, 0);
+};
 // export const parseData = (data: any[], colors: any[]) =>
 //   data.map((dataPoint: any, idx: number) => {
 //     const baseColor = idx < colors.length ? colors[idx] : BaseColors.Gray;
@@ -224,108 +231,112 @@ exports.sumNumericArray = sumNumericArray;
 //     };
 //   });
 // @ts-ignore
-const parseData = (data, colors, categoryKey, valueKey) => {
-    const maxItems = 20;
-    const slicedData = data.slice(0, maxItems);
-    let totalValue = slicedData.reduce((acc, dataPoint) => acc + Number(dataPoint[valueKey]), 0);
+export var parseData = function (data, colors, categoryKey, valueKey) {
+    var _a;
+    var maxItems = 20;
+    var slicedData = data.slice(0, maxItems);
+    var totalValue = slicedData.reduce(function (acc, dataPoint) { return acc + Number(dataPoint[valueKey]); }, 0);
     if (totalValue !== 100) {
-        slicedData.forEach(dataPoint => {
+        slicedData.forEach(function (dataPoint) {
             dataPoint[valueKey] = (Number(dataPoint[valueKey]) * 100) / totalValue;
         });
         totalValue = 100;
     }
-    const parsedData = slicedData.map((dataPoint, idx) => {
-        const baseColor = idx < colors.length ? colors[idx] : colors[colors.length - 1];
-        return {
-            ...dataPoint,
-            color: baseColor,
-            fill: baseColor,
-        };
+    var parsedData = slicedData.map(function (dataPoint, idx) {
+        var baseColor = idx < colors.length ? colors[idx] : colors[colors.length - 1];
+        return __assign(__assign({}, dataPoint), { color: baseColor, fill: baseColor });
     });
     if (data.length > maxItems) {
-        const otherData = data.slice(maxItems);
-        const otherSum = otherData.reduce((acc, dataPoint) => acc + Number(dataPoint[valueKey]), 0);
-        const otherColor = colors[colors.length - 1];
-        const normalizedOtherSum = (otherSum * 100) / totalValue;
-        parsedData.push({
-            [categoryKey]: 'Other',
-            [valueKey]: normalizedOtherSum,
-            color: otherColor,
-            fill: otherColor,
-        });
+        var otherData = data.slice(maxItems);
+        var otherSum = otherData.reduce(function (acc, dataPoint) { return acc + Number(dataPoint[valueKey]); }, 0);
+        var otherColor = colors[colors.length - 1];
+        var normalizedOtherSum = (otherSum * 100) / totalValue;
+        parsedData.push((_a = {},
+            _a[categoryKey] = 'Other',
+            _a[valueKey] = normalizedOtherSum,
+            _a.color = otherColor,
+            _a.fill = otherColor,
+            _a));
     }
     return parsedData;
 };
-exports.parseData = parseData;
-const calculateDefaultLabel = (data, category) => (0, exports.sumNumericArray)(data.map(dataPoint => dataPoint[category]));
-const parseLabelInput = (labelInput, valueFormatter, data, category) => labelInput
-    ? labelInput
-    : valueFormatter(calculateDefaultLabel(data, category));
-exports.parseLabelInput = parseLabelInput;
-const ChartTooltipFrame = ({ children, theme, }) => ((0, jsx_runtime_1.jsx)("div", { style: {
-        borderStyle: 'solid',
-        borderColor: theme?.borderColor || '#E5E7EB',
-        borderWidth: 1,
-        background: theme?.backgroundColor || '#ffffff',
-        fontSize: theme?.fontSize || '14px',
-        borderRadius: '6px',
-        boxShadow: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
-    }, children: children }));
-exports.ChartTooltipFrame = ChartTooltipFrame;
-const ChartTooltipRow = ({ value, name, color, theme, }) => ((0, jsx_runtime_1.jsxs)("div", { style: {
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        minWidth: 120,
-        // minHeight: 27,
-        // margin: '0 2rem',
-    }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'space-between',
-                // margin: '0 0.5rem',
-                // minWidth: 120,
-            }, children: [(0, jsx_runtime_1.jsx)("span", { style: {
-                        background: color,
-                        borderWidth: 2,
-                        borderStyle: 'solid',
-                        borderColor: 'white',
-                        height: '8px',
-                        width: '8px',
-                        boxShadow: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
-                        borderRadius: '9999px',
-                        marginRight: 5,
-                    } }), (0, jsx_runtime_1.jsx)("p", { 
-                    // className={twMerge(
-                    //   'font-medium tabular-nums text-right whitespace-nowrap',
-                    //   'text-[#212121] !important'
-                    // )}
-                    style: {
-                        marginTop: 0,
-                        marginBottom: 0,
-                        fontFamily: theme?.fontFamily,
-                        color: theme?.primaryTextColor,
-                        paddingTop: 2,
-                        paddingBottom: 2,
-                        fontSize: theme?.fontSizeSmall || '14px',
-                        fontWeight: theme?.fontWeightMedium || '500',
-                    }, children: value })] }), (0, jsx_runtime_1.jsx)("p", { style: {
-                marginTop: 0,
-                marginBottom: 0,
-                fontFamily: theme?.fontFamily,
-                color: theme?.secondaryTextColor,
-                whiteSpace: 'nowrap',
-                overflow: 'hidden',
-                textOverflow: 'ellipsis',
-                textAlign: 'right',
-                fontSize: theme?.fontSizeSmall || '14px',
-                fontWeight: theme?.fontWeightNormal || '400',
-            }, children: name })] }));
-exports.ChartTooltipRow = ChartTooltipRow;
-const DonutChartTooltip = ({ active, payload, valueFormatter, theme, }) => {
+var calculateDefaultLabel = function (data, category) {
+    return sumNumericArray(data.map(function (dataPoint) { return dataPoint[category]; }));
+};
+export var parseLabelInput = function (labelInput, valueFormatter, data, category) {
+    return labelInput
+        ? labelInput
+        : valueFormatter(calculateDefaultLabel(data, category));
+};
+export var ChartTooltipFrame = function (_a) {
+    var children = _a.children, theme = _a.theme;
+    return (_jsx("div", __assign({ style: {
+            borderStyle: 'solid',
+            borderColor: (theme === null || theme === void 0 ? void 0 : theme.borderColor) || '#E5E7EB',
+            borderWidth: 1,
+            background: (theme === null || theme === void 0 ? void 0 : theme.backgroundColor) || '#ffffff',
+            fontSize: (theme === null || theme === void 0 ? void 0 : theme.fontSize) || '14px',
+            borderRadius: '6px',
+            boxShadow: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
+        } }, { children: children })));
+};
+export var ChartTooltipRow = function (_a) {
+    var value = _a.value, name = _a.name, color = _a.color, theme = _a.theme;
+    return (_jsxs("div", __assign({ style: {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            minWidth: 120,
+            // minHeight: 27,
+            // margin: '0 2rem',
+        } }, { children: [_jsxs("div", __assign({ style: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                    // margin: '0 0.5rem',
+                    // minWidth: 120,
+                } }, { children: [_jsx("span", { style: {
+                            background: color,
+                            borderWidth: 2,
+                            borderStyle: 'solid',
+                            borderColor: 'white',
+                            height: '8px',
+                            width: '8px',
+                            boxShadow: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
+                            borderRadius: '9999px',
+                            marginRight: 5,
+                        } }), _jsx("p", __assign({ 
+                        // className={twMerge(
+                        //   'font-medium tabular-nums text-right whitespace-nowrap',
+                        //   'text-[#212121] !important'
+                        // )}
+                        style: {
+                            marginTop: 0,
+                            marginBottom: 0,
+                            fontFamily: theme === null || theme === void 0 ? void 0 : theme.fontFamily,
+                            color: theme === null || theme === void 0 ? void 0 : theme.primaryTextColor,
+                            paddingTop: 2,
+                            paddingBottom: 2,
+                            fontSize: (theme === null || theme === void 0 ? void 0 : theme.fontSizeSmall) || '14px',
+                            fontWeight: (theme === null || theme === void 0 ? void 0 : theme.fontWeightMedium) || '500',
+                        } }, { children: value }))] })), _jsx("p", __assign({ style: {
+                    marginTop: 0,
+                    marginBottom: 0,
+                    fontFamily: theme === null || theme === void 0 ? void 0 : theme.fontFamily,
+                    color: theme === null || theme === void 0 ? void 0 : theme.secondaryTextColor,
+                    whiteSpace: 'nowrap',
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                    textAlign: 'right',
+                    fontSize: (theme === null || theme === void 0 ? void 0 : theme.fontSizeSmall) || '14px',
+                    fontWeight: (theme === null || theme === void 0 ? void 0 : theme.fontWeightNormal) || '400',
+                } }, { children: name }))] })));
+};
+export var DonutChartTooltip = function (_a) {
+    var active = _a.active, payload = _a.payload, valueFormatter = _a.valueFormatter, theme = _a.theme;
     if (active && payload[0]) {
-        const payloadRow = payload[0];
-        return ((0, jsx_runtime_1.jsx)(exports.ChartTooltipFrame, { theme: theme, children: (0, jsx_runtime_1.jsx)("div", { 
+        var payloadRow = payload[0];
+        return (_jsx(ChartTooltipFrame, __assign({ theme: theme }, { children: _jsx("div", __assign({ 
                 //   style={{ transform: 'translateX(-120px)' }}
                 // className={twMerge('qq-px-4', 'qq-py-2')}
                 style: {
@@ -333,42 +344,41 @@ const DonutChartTooltip = ({ active, payload, valueFormatter, theme, }) => {
                     paddingRight: '1rem',
                     paddingTop: '8px',
                     paddingBottom: '8px',
-                }, children: (0, jsx_runtime_1.jsx)(exports.ChartTooltipRow, { value: valueFormatter(payloadRow.value), name: payloadRow.name, color: payloadRow.payload.color, theme: theme }) }) }));
+                } }, { children: _jsx(ChartTooltipRow, { value: valueFormatter(payloadRow.value), name: payloadRow.name, color: payloadRow.payload.color, theme: theme }) })) })));
     }
     return null;
 };
-exports.DonutChartTooltip = DonutChartTooltip;
 // @ts-ignore
-function findComplementaryAndAnalogousColors(color1, color2) {
+export function findComplementaryAndAnalogousColors(color1, color2) {
     // Calculate the hue of the first color
-    const color1HSL = rgbToHsl(hexToRgb(color1));
-    const color2HSL = rgbToHsl(hexToRgb(color2));
-    const color1Hue = color1HSL.h;
+    var color1HSL = rgbToHsl(hexToRgb(color1));
+    var color2HSL = rgbToHsl(hexToRgb(color2));
+    var color1Hue = color1HSL.h;
     // Calculate the complementary color of the first color
-    const complementaryHue = (color1Hue + 180) % 360;
-    const complementaryColor = hslToRgb({
+    var complementaryHue = (color1Hue + 180) % 360;
+    var complementaryColor = hslToRgb({
         h: complementaryHue,
         s: color1HSL.s,
         l: color1HSL.l,
     });
     // Find an analogous hue to the first color
-    const analogousHue1 = (color1Hue + 30) % 360;
-    const analogousHue2 = (color1Hue - 30 + 360) % 360;
+    var analogousHue1 = (color1Hue + 30) % 360;
+    var analogousHue2 = (color1Hue - 30 + 360) % 360;
     // Convert the analogous hues back to RGB colors
-    const analogousColor1 = hslToRgb({
+    var analogousColor1 = hslToRgb({
         h: analogousHue1,
         s: color1HSL.s,
         l: color1HSL.l,
     });
-    const analogousColor2 = hslToRgb({
+    var analogousColor2 = hslToRgb({
         h: analogousHue2,
         s: color1HSL.s,
         l: color1HSL.l,
     });
     // Calculate the average hue between the two colors
-    const avgHue = (color1HSL.h + color2HSL.h) / 2;
+    var avgHue = (color1HSL.h + color2HSL.h) / 2;
     // Generate a new HSL object with the average hue and the same saturation and lightness as color1
-    const analogousHsl = { h: avgHue, s: color1HSL.s, l: color1HSL.l };
+    var analogousHsl = { h: avgHue, s: color1HSL.s, l: color1HSL.l };
     return [
         color1,
         color2,
@@ -378,31 +388,30 @@ function findComplementaryAndAnalogousColors(color1, color2) {
         // rgbToHex(analogousColor2),
     ];
 }
-exports.findComplementaryAndAnalogousColors = findComplementaryAndAnalogousColors;
 // @ts-ignore
 function hexToRgb(hex) {
-    const r = parseInt(hex.substring(1, 3), 16);
-    const g = parseInt(hex.substring(3, 5), 16);
-    const b = parseInt(hex.substring(5, 7), 16);
-    return { r, g, b };
+    var r = parseInt(hex.substring(1, 3), 16);
+    var g = parseInt(hex.substring(3, 5), 16);
+    var b = parseInt(hex.substring(5, 7), 16);
+    return { r: r, g: g, b: b };
 }
 // @ts-ignore
 function rgbToHex(rgb) {
-    const rHex = rgb.r.toString(16).padStart(2, '0');
-    const gHex = rgb.g.toString(16).padStart(2, '0');
-    const bHex = rgb.b.toString(16).padStart(2, '0');
-    return `#${rHex}${gHex}${bHex}`;
+    var rHex = rgb.r.toString(16).padStart(2, '0');
+    var gHex = rgb.g.toString(16).padStart(2, '0');
+    var bHex = rgb.b.toString(16).padStart(2, '0');
+    return "#".concat(rHex).concat(gHex).concat(bHex);
 }
 // @ts-ignore
 function rgbToHsl(rgb) {
-    const r = rgb.r / 255;
-    const g = rgb.g / 255;
-    const b = rgb.b / 255;
-    const max = Math.max(r, g, b);
-    const min = Math.min(r, g, b);
-    const h = 0, s = 0, l = (max + min) / 2;
+    var r = rgb.r / 255;
+    var g = rgb.g / 255;
+    var b = rgb.b / 255;
+    var max = Math.max(r, g, b);
+    var min = Math.min(r, g, b);
+    var h = 0, s = 0, l = (max + min) / 2;
     if (max !== min) {
-        const d = max - min;
+        var d = max - min;
         s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
         switch (max) {
             case r:
@@ -421,16 +430,16 @@ function rgbToHsl(rgb) {
 }
 // @ts-ignore
 function hslToRgb(hsl) {
-    const h = hsl.h / 360;
-    const s = hsl.s / 100;
-    const l = hsl.l / 100;
-    let r, g, b;
+    var h = hsl.h / 360;
+    var s = hsl.s / 100;
+    var l = hsl.l / 100;
+    var r, g, b;
     if (s === 0) {
         r = g = b = l;
     }
     else {
         // @ts-ignore
-        const hue2rgb = (p, q, t) => {
+        var hue2rgb = function (p, q, t) {
             if (t < 0)
                 t += 1;
             if (t > 1)
@@ -443,8 +452,8 @@ function hslToRgb(hsl) {
                 return p + (q - p) * (2 / 3 - t) * 6;
             return p;
         };
-        const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
-        const p = 2 * l - q;
+        var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+        var p = 2 * l - q;
         r = hue2rgb(p, q, h + 1 / 3);
         g = hue2rgb(p, q, h);
         b = hue2rgb(p, q, h - 1 / 3);
@@ -457,21 +466,21 @@ function hslToRgb(hsl) {
 }
 // @ts-ignore
 function generateColorGradientSteps(n, colors) {
-    const numColors = colors.length;
+    var numColors = colors.length;
     // If there are fewer than two colors, return the original array
     if (numColors < 2) {
         return colors;
     }
     // Initialize the output array with the first color
-    const output = [colors[0]];
+    var output = [colors[0]];
     // Calculate the number of gradient steps between each pair of colors
-    const stepsPerPair = Math.floor(n / (numColors - 1));
+    var stepsPerPair = Math.floor(n / (numColors - 1));
     // Generate the gradient steps for each pair of colors
-    for (let i = 1; i < numColors; i++) {
-        const color1 = colors[i - 1];
-        const color2 = colors[i];
-        const gradientSteps = generateGradientSteps(color1, color2, stepsPerPair);
-        output.push(...gradientSteps);
+    for (var i = 1; i < numColors; i++) {
+        var color1 = colors[i - 1];
+        var color2 = colors[i];
+        var gradientSteps = generateGradientSteps(color1, color2, stepsPerPair);
+        output.push.apply(output, gradientSteps);
     }
     // If there are remaining steps, add the last color as a stopgap measure
     while (output.length < n) {
@@ -482,72 +491,67 @@ function generateColorGradientSteps(n, colors) {
 //@ts-ignore
 function generateGradientSteps(color1, color2, n) {
     // Convert the colors to RGB objects
-    const rgb1 = hexToRgb(color1);
-    const rgb2 = hexToRgb(color2);
+    var rgb1 = hexToRgb(color1);
+    var rgb2 = hexToRgb(color2);
     // Calculate the RGB color difference between the two colors
-    const diffR = rgb2.r - rgb1.r;
-    const diffG = rgb2.g - rgb1.g;
-    const diffB = rgb2.b - rgb1.b;
+    var diffR = rgb2.r - rgb1.r;
+    var diffG = rgb2.g - rgb1.g;
+    var diffB = rgb2.b - rgb1.b;
     // Calculate the RGB gradient step size between the two colors
-    const stepR = diffR / (n + 1);
-    const stepG = diffG / (n + 1);
-    const stepB = diffB / (n + 1);
+    var stepR = diffR / (n + 1);
+    var stepG = diffG / (n + 1);
+    var stepB = diffB / (n + 1);
     // Generate the RGB gradient steps
-    const gradientSteps = [];
-    for (let i = 1; i <= n; i++) {
-        const r = Math.round(rgb1.r + stepR * i);
-        const g = Math.round(rgb1.g + stepG * i);
-        const b = Math.round(rgb1.b + stepB * i);
-        gradientSteps.push(rgbToHex({ r, g, b }));
+    var gradientSteps = [];
+    for (var i = 1; i <= n; i++) {
+        var r = Math.round(rgb1.r + stepR * i);
+        var g = Math.round(rgb1.g + stepG * i);
+        var b = Math.round(rgb1.b + stepB * i);
+        gradientSteps.push(rgbToHex({ r: r, g: g, b: b }));
     }
     return gradientSteps;
 }
-const PieChartWrapper = react_1.default.forwardRef((props, ref) => {
-    const { category = 'pct_of_the_total', index = 'status', data, colors = [], variant = 'donut', valueFormatter = exports.defaultValueFormatter, label, showLabel = true, showAnimation = true, showTooltip = true, className, containerStyle, theme, ...other } = props;
-    const isDonut = variant == 'donut';
-    const parsedLabelInput = (0, exports.parseLabelInput)(label, valueFormatter, data, category);
-    const newColors = generateColorGradientSteps(data.length, findComplementaryAndAnalogousColors(colors[0], colors[1]));
-    return ((0, jsx_runtime_1.jsx)("div", { ref: ref, style: {
-            ...containerStyle,
-            width: '100%',
+var PieChartWrapper = React.forwardRef(function (props, ref) {
+    var _a = props.category, category = _a === void 0 ? 'pct_of_the_total' : _a, _b = props.index, index = _b === void 0 ? 'status' : _b, data = props.data, _c = props.colors, colors = _c === void 0 ? [] : _c, _d = props.variant, variant = _d === void 0 ? 'donut' : _d, _e = props.valueFormatter, valueFormatter = _e === void 0 ? defaultValueFormatter : _e, label = props.label, _f = props.showLabel, showLabel = _f === void 0 ? true : _f, _g = props.showAnimation, showAnimation = _g === void 0 ? true : _g, _h = props.showTooltip, showTooltip = _h === void 0 ? true : _h, className = props.className, containerStyle = props.containerStyle, theme = props.theme, other = __rest(props, ["category", "index", "data", "colors", "variant", "valueFormatter", "label", "showLabel", "showAnimation", "showTooltip", "className", "containerStyle", "theme"]);
+    var isDonut = variant == 'donut';
+    var parsedLabelInput = parseLabelInput(label, valueFormatter, data, category);
+    var newColors = generateColorGradientSteps(data.length, findComplementaryAndAnalogousColors(colors[0], colors[1]));
+    return (_jsx("div", __assign({ ref: ref, style: __assign(__assign({}, containerStyle), { width: '100%', 
             // height: '100%',
-            display: 'flex',
-            flexDirection: 'row',
-            alignItems: 'center',
-            boxSizing: 'content-box',
-        }, ...other, children: (0, jsx_runtime_1.jsx)(recharts_1.ResponsiveContainer, { width: "100%", height: "100%", children: (0, jsx_runtime_1.jsxs)(recharts_1.PieChart, { children: [(0, jsx_runtime_1.jsx)(recharts_1.Pie
+            display: 'flex', flexDirection: 'row', alignItems: 'center', boxSizing: 'content-box' }) }, other, { children: _jsx(ResponsiveContainer, __assign({ width: "100%", height: "100%" }, { children: _jsxs(PieChart, { children: [_jsx(Pie
                     //   style={{ transform: 'translateX(-120px)' }}
                     , { 
                         //   style={{ transform: 'translateX(-120px)' }}
-                        data: (0, exports.parseData)(data, colors.length >= data.length
+                        data: parseData(data, colors.length >= data.length
                             ? colors
-                            : generateColorGradientSteps(Math.min(21, data.length), [
-                                ...findComplementaryAndAnalogousColors(colors[0], colors[1]),
-                                ...colors.slice(2),
-                            ]), index, category), cx: "50%", cy: "50%", startAngle: 90, endAngle: -270, innerRadius: isDonut ? '70%' : '0%', outerRadius: "100%", paddingAngle: 0, dataKey: category, nameKey: index, isAnimationActive: true }), (0, jsx_runtime_1.jsx)(recharts_1.Tooltip, { wrapperStyle: {
+                            : generateColorGradientSteps(Math.min(21, data.length), __spreadArray(__spreadArray([], findComplementaryAndAnalogousColors(colors[0], colors[1]), true), colors.slice(2), true)), index, category), cx: "50%", cy: "50%", startAngle: 90, endAngle: -270, innerRadius: isDonut ? '70%' : '0%', outerRadius: "100%", paddingAngle: 0, dataKey: category, nameKey: index, isAnimationActive: true }), _jsx(Tooltip, { wrapperStyle: {
                             outline: 'none',
-                        }, content: ({ active, payload }) => ((0, jsx_runtime_1.jsx)(exports.DonutChartTooltip, { active: active, payload: payload, valueFormatter: valueFormatter, theme: theme })) })] }) }) }));
+                        }, content: function (_a) {
+                            var active = _a.active, payload = _a.payload;
+                            return (_jsx(DonutChartTooltip, { active: active, payload: payload, valueFormatter: valueFormatter, theme: theme }));
+                        } })] }) })) })));
 });
-function Legend2({ payload, colors }) {
-    return ((0, jsx_runtime_1.jsx)("div", { children: payload.map((item, idx) => {
+function Legend2(_a) {
+    var payload = _a.payload, colors = _a.colors;
+    return (_jsx("div", { children: payload.map(function (item, idx) {
             if (idx > 9) {
                 return null;
             }
-            return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { style: {
+            return (_jsxs("div", { children: [_jsx("div", { style: {
                             height: 8,
                             width: 8,
                             borderRadius: 8,
                             background: colors[idx],
                             marginRight: 8,
                             marginTop: 2,
-                        } }), (0, jsx_runtime_1.jsx)("div", { style: {
+                        } }), _jsx("div", __assign({ style: {
                             whiteSpace: 'nowrap',
                             overflow: 'hidden',
                             textOverflow: 'ellipsis',
                             display: 'block',
                             maxWidth: 120,
-                        }, children: item.value })] }, item.value));
+                        } }, { children: item.value }))] }, item.value));
         }) }));
 }
-exports.default = PieChartWrapper;
+export default PieChartWrapper;
 //# sourceMappingURL=PieChart.js.map