@quillsql/react 1.6.9 → 1.7.1

package/lib/PieChart.js

@@ -1,40 +1,35 @@
-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];
-        }
+"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]; } };
     }
-    return to.concat(ar || Array.prototype.slice.call(from));
+    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;
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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");
 /* eslint-disable @typescript-eslint/ban-ts-comment */
 /* eslint-disable react/display-name */
 // @ts-nocheck
-import React, { useRef, useState, useEffect } from 'react';
-import { Pie, PieChart, ResponsiveContainer, Tooltip, Legend } from 'recharts';
+const react_1 = __importStar(require("react"));
+const recharts_1 = require("recharts");
 // const data = [
 //   {
 //     name: 'Project Nile',
@@ -133,20 +128,20 @@ import { Pie, PieChart, ResponsiveContainer, Tooltip, Legend } from 'recharts';
 //     pct_of_the_total: 0.00522734435854761,
 //   },
 // ];
-var useOnWindowResize = function (handler, initialWindowSize) {
-    var _a = useState(initialWindowSize), windowSize = _a[0], setWindowSize = _a[1];
-    useEffect(function () {
-        var handleResize = function () {
+const useOnWindowResize = (handler, initialWindowSize) => {
+    const [windowSize, setWindowSize] = (0, react_1.useState)(initialWindowSize);
+    (0, react_1.useEffect)(() => {
+        const handleResize = () => {
             setWindowSize(window.innerWidth);
             handler();
         };
         handleResize();
         window.addEventListener('resize', handleResize);
-        return function () { return window.removeEventListener('resize', handleResize); };
+        return () => window.removeEventListener('resize', handleResize);
     }, [handler, windowSize]);
 };
-var ChartLegend = function (categories, colors) {
-    var legendRef = useRef(null);
+const ChartLegend = (categories, colors) => {
+    const legendRef = (0, react_1.useRef)(null);
     //   useOnWindowResize(() => {
     //     const calculateHeight = (height: number | undefined) =>
     //       height
@@ -154,28 +149,28 @@ var ChartLegend = function (categories, colors) {
     //         : 60; // default height
     //     setLegendHeight(calculateHeight(legendRef.current?.clientHeight));
     //   });
-    return (_jsx("div", __assign({ ref: legendRef, className: "qq-flex qq-items-center qq-justify-end" }, { children: _jsx(Legend
+    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
         // @ts-ignore
         , { 
             // @ts-ignore
-            categories: categories, colors: colors }) })));
+            categories: categories, colors: colors }) }));
 };
-var iconVariantValues = [
+const iconVariantValues = [
     'simple',
     'light',
     'shadow',
     'solid',
     'outlined',
 ];
-var deltaTypeValues = [
+const deltaTypeValues = [
     'increase',
     'moderateIncrease',
     'decrease',
     'moderateDecrease',
     'unchanged',
 ];
-var sizeValues = ['xs', 'sm', 'md', 'lg', 'xl'];
-var colorValues = [
+const sizeValues = ['xs', 'sm', 'md', 'lg', 'xl'];
+const colorValues = [
     'slate',
     'gray',
     'zinc',
@@ -199,7 +194,7 @@ var colorValues = [
     'pink',
     'rose',
 ];
-var justifyContentValues = [
+const justifyContentValues = [
     'start',
     'end',
     'center',
@@ -207,19 +202,17 @@ var justifyContentValues = [
     'around',
     'evenly',
 ];
-var alignItemsValues = [
+const alignItemsValues = [
     'start',
     'end',
     'center',
     'baseline',
     'stretch',
 ];
-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);
-};
+const defaultValueFormatter = (value) => (value * 1).toFixed(1) + '%';
+exports.defaultValueFormatter = defaultValueFormatter;
+const sumNumericArray = (arr) => arr.reduce((prefixSum, num) => prefixSum + num, 0);
+exports.sumNumericArray = sumNumericArray;
 // export const parseData = (data: any[], colors: any[]) =>
 //   data.map((dataPoint: any, idx: number) => {
 //     const baseColor = idx < colors.length ? colors[idx] : BaseColors.Gray;
@@ -231,112 +224,108 @@ export var sumNumericArray = function (arr) {
 //     };
 //   });
 // @ts-ignore
-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);
+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);
     if (totalValue !== 100) {
-        slicedData.forEach(function (dataPoint) {
+        slicedData.forEach(dataPoint => {
             dataPoint[valueKey] = (Number(dataPoint[valueKey]) * 100) / totalValue;
         });
         totalValue = 100;
     }
-    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 });
+    const parsedData = slicedData.map((dataPoint, idx) => {
+        const baseColor = idx < colors.length ? colors[idx] : colors[colors.length - 1];
+        return {
+            ...dataPoint,
+            color: baseColor,
+            fill: baseColor,
+        };
     });
     if (data.length > maxItems) {
-        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));
+        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,
+        });
     }
     return parsedData;
 };
-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;
+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, }) => {
     if (active && payload[0]) {
-        var payloadRow = payload[0];
-        return (_jsx(ChartTooltipFrame, __assign({ theme: theme }, { children: _jsx("div", __assign({ 
+        const payloadRow = payload[0];
+        return ((0, jsx_runtime_1.jsx)(exports.ChartTooltipFrame, { theme: theme, children: (0, jsx_runtime_1.jsx)("div", { 
                 //   style={{ transform: 'translateX(-120px)' }}
                 // className={twMerge('qq-px-4', 'qq-py-2')}
                 style: {
@@ -344,41 +333,42 @@ export var DonutChartTooltip = function (_a) {
                     paddingRight: '1rem',
                     paddingTop: '8px',
                     paddingBottom: '8px',
-                } }, { children: _jsx(ChartTooltipRow, { value: valueFormatter(payloadRow.value), name: payloadRow.name, color: payloadRow.payload.color, theme: theme }) })) })));
+                }, children: (0, jsx_runtime_1.jsx)(exports.ChartTooltipRow, { value: valueFormatter(payloadRow.value), name: payloadRow.name, color: payloadRow.payload.color, theme: theme }) }) }));
     }
     return null;
 };
+exports.DonutChartTooltip = DonutChartTooltip;
 // @ts-ignore
-export function findComplementaryAndAnalogousColors(color1, color2) {
+function findComplementaryAndAnalogousColors(color1, color2) {
     // Calculate the hue of the first color
-    var color1HSL = rgbToHsl(hexToRgb(color1));
-    var color2HSL = rgbToHsl(hexToRgb(color2));
-    var color1Hue = color1HSL.h;
+    const color1HSL = rgbToHsl(hexToRgb(color1));
+    const color2HSL = rgbToHsl(hexToRgb(color2));
+    const color1Hue = color1HSL.h;
     // Calculate the complementary color of the first color
-    var complementaryHue = (color1Hue + 180) % 360;
-    var complementaryColor = hslToRgb({
+    const complementaryHue = (color1Hue + 180) % 360;
+    const complementaryColor = hslToRgb({
         h: complementaryHue,
         s: color1HSL.s,
         l: color1HSL.l,
     });
     // Find an analogous hue to the first color
-    var analogousHue1 = (color1Hue + 30) % 360;
-    var analogousHue2 = (color1Hue - 30 + 360) % 360;
+    const analogousHue1 = (color1Hue + 30) % 360;
+    const analogousHue2 = (color1Hue - 30 + 360) % 360;
     // Convert the analogous hues back to RGB colors
-    var analogousColor1 = hslToRgb({
+    const analogousColor1 = hslToRgb({
         h: analogousHue1,
         s: color1HSL.s,
         l: color1HSL.l,
     });
-    var analogousColor2 = hslToRgb({
+    const analogousColor2 = hslToRgb({
         h: analogousHue2,
         s: color1HSL.s,
         l: color1HSL.l,
     });
     // Calculate the average hue between the two colors
-    var avgHue = (color1HSL.h + color2HSL.h) / 2;
+    const avgHue = (color1HSL.h + color2HSL.h) / 2;
     // Generate a new HSL object with the average hue and the same saturation and lightness as color1
-    var analogousHsl = { h: avgHue, s: color1HSL.s, l: color1HSL.l };
+    const analogousHsl = { h: avgHue, s: color1HSL.s, l: color1HSL.l };
     return [
         color1,
         color2,
@@ -388,30 +378,31 @@ export function findComplementaryAndAnalogousColors(color1, color2) {
         // rgbToHex(analogousColor2),
     ];
 }
+exports.findComplementaryAndAnalogousColors = findComplementaryAndAnalogousColors;
 // @ts-ignore
 function hexToRgb(hex) {
-    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 };
+    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 };
 }
 // @ts-ignore
 function rgbToHex(rgb) {
-    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);
+    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}`;
 }
 // @ts-ignore
 function rgbToHsl(rgb) {
-    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;
+    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;
     if (max !== min) {
-        var d = max - min;
+        const d = max - min;
         s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
         switch (max) {
             case r:
@@ -430,16 +421,16 @@ function rgbToHsl(rgb) {
 }
 // @ts-ignore
 function hslToRgb(hsl) {
-    var h = hsl.h / 360;
-    var s = hsl.s / 100;
-    var l = hsl.l / 100;
-    var r, g, b;
+    const h = hsl.h / 360;
+    const s = hsl.s / 100;
+    const l = hsl.l / 100;
+    let r, g, b;
     if (s === 0) {
         r = g = b = l;
     }
     else {
         // @ts-ignore
-        var hue2rgb = function (p, q, t) {
+        const hue2rgb = (p, q, t) => {
             if (t < 0)
                 t += 1;
             if (t > 1)
@@ -452,8 +443,8 @@ function hslToRgb(hsl) {
                 return p + (q - p) * (2 / 3 - t) * 6;
             return p;
         };
-        var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
-        var p = 2 * l - q;
+        const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+        const p = 2 * l - q;
         r = hue2rgb(p, q, h + 1 / 3);
         g = hue2rgb(p, q, h);
         b = hue2rgb(p, q, h - 1 / 3);
@@ -466,21 +457,21 @@ function hslToRgb(hsl) {
 }
 // @ts-ignore
 function generateColorGradientSteps(n, colors) {
-    var numColors = colors.length;
+    const 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
-    var output = [colors[0]];
+    const output = [colors[0]];
     // Calculate the number of gradient steps between each pair of colors
-    var stepsPerPair = Math.floor(n / (numColors - 1));
+    const stepsPerPair = Math.floor(n / (numColors - 1));
     // Generate the gradient steps for each pair of colors
-    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);
+    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);
     }
     // If there are remaining steps, add the last color as a stopgap measure
     while (output.length < n) {
@@ -491,67 +482,72 @@ function generateColorGradientSteps(n, colors) {
 //@ts-ignore
 function generateGradientSteps(color1, color2, n) {
     // Convert the colors to RGB objects
-    var rgb1 = hexToRgb(color1);
-    var rgb2 = hexToRgb(color2);
+    const rgb1 = hexToRgb(color1);
+    const rgb2 = hexToRgb(color2);
     // Calculate the RGB color difference between the two colors
-    var diffR = rgb2.r - rgb1.r;
-    var diffG = rgb2.g - rgb1.g;
-    var diffB = rgb2.b - rgb1.b;
+    const diffR = rgb2.r - rgb1.r;
+    const diffG = rgb2.g - rgb1.g;
+    const diffB = rgb2.b - rgb1.b;
     // Calculate the RGB gradient step size between the two colors
-    var stepR = diffR / (n + 1);
-    var stepG = diffG / (n + 1);
-    var stepB = diffB / (n + 1);
+    const stepR = diffR / (n + 1);
+    const stepG = diffG / (n + 1);
+    const stepB = diffB / (n + 1);
     // Generate the RGB gradient steps
-    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 }));
+    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 }));
     }
     return gradientSteps;
 }
-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%', 
+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%',
             // height: '100%',
-            display: 'flex', flexDirection: 'row', alignItems: 'center', boxSizing: 'content-box' }) }, other, { children: _jsx(ResponsiveContainer, __assign({ width: "100%", height: "100%" }, { children: _jsxs(PieChart, { children: [_jsx(Pie
+            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
                     //   style={{ transform: 'translateX(-120px)' }}
                     , { 
                         //   style={{ transform: 'translateX(-120px)' }}
-                        data: parseData(data, colors.length >= data.length
+                        data: (0, exports.parseData)(data, colors.length >= data.length
                             ? colors
-                            : 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: {
+                            : 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: {
                             outline: 'none',
-                        }, content: function (_a) {
-                            var active = _a.active, payload = _a.payload;
-                            return (_jsx(DonutChartTooltip, { active: active, payload: payload, valueFormatter: valueFormatter, theme: theme }));
-                        } })] }) })) })));
+                        }, content: ({ active, payload }) => ((0, jsx_runtime_1.jsx)(exports.DonutChartTooltip, { active: active, payload: payload, valueFormatter: valueFormatter, theme: theme })) })] }) }) }));
 });
-function Legend2(_a) {
-    var payload = _a.payload, colors = _a.colors;
-    return (_jsx("div", { children: payload.map(function (item, idx) {
+function Legend2({ payload, colors }) {
+    return ((0, jsx_runtime_1.jsx)("div", { children: payload.map((item, idx) => {
             if (idx > 9) {
                 return null;
             }
-            return (_jsxs("div", { children: [_jsx("div", { style: {
+            return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { style: {
                             height: 8,
                             width: 8,
                             borderRadius: 8,
                             background: colors[idx],
                             marginRight: 8,
                             marginTop: 2,
-                        } }), _jsx("div", __assign({ style: {
+                        } }), (0, jsx_runtime_1.jsx)("div", { style: {
                             whiteSpace: 'nowrap',
                             overflow: 'hidden',
                             textOverflow: 'ellipsis',
                             display: 'block',
                             maxWidth: 120,
-                        } }, { children: item.value }))] }, item.value));
+                        }, children: item.value })] }, item.value));
         }) }));
 }
-export default PieChartWrapper;
+exports.default = PieChartWrapper;
 //# sourceMappingURL=PieChart.js.map