@quillsql/react 2.8.5 → 2.8.7

package/dist/PieChart.js

@@ -1,35 +1,9 @@
-"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]; } };
-    }
-    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;
-};
-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',
@@ -129,8 +103,8 @@ const recharts_1 = require("recharts");
 //   },
 // ];
 const useOnWindowResize = (handler, initialWindowSize) => {
-    const [windowSize, setWindowSize] = (0, react_1.useState)(initialWindowSize);
-    (0, react_1.useEffect)(() => {
+    const [windowSize, setWindowSize] = useState(initialWindowSize);
+    useEffect(() => {
         const handleResize = () => {
             setWindowSize(window.innerWidth);
             handler();
@@ -141,7 +115,7 @@ const useOnWindowResize = (handler, initialWindowSize) => {
     }, [handler, windowSize]);
 };
 const ChartLegend = (categories, colors) => {
-    const legendRef = (0, react_1.useRef)(null);
+    const legendRef = useRef(null);
     //   useOnWindowResize(() => {
     //     const calculateHeight = (height: number | undefined) =>
     //       height
@@ -149,7 +123,7 @@ 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", { ref: legendRef, className: "qq-flex qq-items-center qq-justify-end", children: _jsx(Legend
         // @ts-ignore
         , { 
             // @ts-ignore
@@ -209,10 +183,8 @@ const alignItemsValues = [
     '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 const defaultValueFormatter = (value) => (value * 1).toFixed(1) + '%';
+export const sumNumericArray = (arr) => arr.reduce((prefixSum, num) => 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,7 +196,7 @@ exports.sumNumericArray = sumNumericArray;
 //     };
 //   });
 // @ts-ignore
-const parseData = (data, colors, categoryKey, valueKey) => {
+export 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);
@@ -256,13 +228,11 @@ const parseData = (data, colors, categoryKey, valueKey) => {
     }
     return parsedData;
 };
-exports.parseData = parseData;
-const calculateDefaultLabel = (data, category) => (0, exports.sumNumericArray)(data.map(dataPoint => dataPoint[category]));
-const parseLabelInput = (labelInput, valueFormatter, data, category) => labelInput
+const calculateDefaultLabel = (data, category) => sumNumericArray(data.map(dataPoint => dataPoint[category]));
+export 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: {
+export const ChartTooltipFrame = ({ children, theme, }) => (_jsx("div", { style: {
         borderStyle: 'solid',
         borderColor: theme?.borderColor || '#E5E7EB',
         borderWidth: 1,
@@ -271,21 +241,20 @@ const ChartTooltipFrame = ({ children, theme, }) => ((0, jsx_runtime_1.jsx)("div
         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: {
+export const ChartTooltipRow = ({ value, name, color, theme, }) => (_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: {
+    }, children: [_jsxs("div", { style: {
                 display: 'flex',
                 alignItems: 'center',
                 justifyContent: 'space-between',
                 // margin: '0 0.5rem',
                 // minWidth: 120,
-            }, children: [(0, jsx_runtime_1.jsx)("span", { style: {
+            }, children: [_jsx("span", { style: {
                         background: color,
                         borderWidth: 2,
                         borderStyle: 'solid',
@@ -295,7 +264,7 @@ const ChartTooltipRow = ({ value, name, color, theme, }) => ((0, jsx_runtime_1.j
                         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", { 
+                    } }), _jsx("p", { 
                     // className={twMerge(
                     //   'font-medium tabular-nums text-right whitespace-nowrap',
                     //   'text-[#212121] !important'
@@ -309,7 +278,7 @@ const ChartTooltipRow = ({ value, name, color, theme, }) => ((0, jsx_runtime_1.j
                         paddingBottom: 2,
                         fontSize: theme?.fontSizeSmall || '14px',
                         fontWeight: theme?.fontWeightMedium || '500',
-                    }, children: value })] }), (0, jsx_runtime_1.jsx)("p", { style: {
+                    }, children: value })] }), _jsx("p", { style: {
                 marginTop: 0,
                 marginBottom: 0,
                 fontFamily: theme?.fontFamily,
@@ -321,11 +290,10 @@ const ChartTooltipRow = ({ value, name, color, theme, }) => ((0, jsx_runtime_1.j
                 fontSize: theme?.fontSizeSmall || '14px',
                 fontWeight: theme?.fontWeightNormal || '400',
             }, children: name })] }));
-exports.ChartTooltipRow = ChartTooltipRow;
-const DonutChartTooltip = ({ active, payload, valueFormatter, theme, }) => {
+export const DonutChartTooltip = ({ active, payload, valueFormatter, 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", { 
+        return (_jsx(ChartTooltipFrame, { theme: theme, children: _jsx("div", { 
                 //   style={{ transform: 'translateX(-120px)' }}
                 // className={twMerge('qq-px-4', 'qq-py-2')}
                 style: {
@@ -333,13 +301,12 @@ 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));
@@ -378,7 +345,6 @@ function findComplementaryAndAnalogousColors(color1, color2) {
         // rgbToHex(analogousColor2),
     ];
 }
-exports.findComplementaryAndAnalogousColors = findComplementaryAndAnalogousColors;
 // @ts-ignore
 function hexToRgb(hex) {
     const r = parseInt(hex.substring(1, 3), 16);
@@ -502,12 +468,12 @@ function generateGradientSteps(color1, color2, n) {
     }
     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 PieChartWrapper = React.forwardRef((props, ref) => {
+    const { category = 'pct_of_the_total', index = 'status', data, colors = [], variant = 'donut', valueFormatter = 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 parsedLabelInput = parseLabelInput(label, valueFormatter, data, category);
     if (!data || data.length === 0) {
-        return ((0, jsx_runtime_1.jsx)("div", { style: {
+        return (_jsx("div", { style: {
                 display: 'flex',
                 flex: '1 0 auto',
                 height: '100%',
@@ -522,7 +488,7 @@ const PieChartWrapper = react_1.default.forwardRef((props, ref) => {
     //   data.length,
     //   findComplementaryAndAnalogousColors(colors[0], colors[1])
     // );
-    return ((0, jsx_runtime_1.jsx)("div", { ref: ref, style: {
+    return (_jsx("div", { ref: ref, style: {
             ...containerStyle,
             width: '100%',
             // height: '100%',
@@ -530,32 +496,32 @@ const PieChartWrapper = react_1.default.forwardRef((props, ref) => {
             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
+        }, ...other, children: _jsx(ResponsiveContainer, { 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: {
+                            ]), 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: ({ active, payload }) => (_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) => {
+    return (_jsx("div", { children: payload.map((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", { style: {
                             whiteSpace: 'nowrap',
                             overflow: 'hidden',
                             textOverflow: 'ellipsis',
@@ -564,4 +530,4 @@ function Legend2({ payload, colors }) {
                         }, children: item.value })] }, item.value));
         }) }));
 }
-exports.default = PieChartWrapper;
+export default PieChartWrapper;

package/dist/QuillProvider.js

@@ -1,7 +1,5 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const Context_1 = require("./Context");
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ContextProvider } from './Context';
 const defaultTheme = {
     fontFamily: 'Inter; Helvetica',
     backgroundColor: '#FFFFFF',
@@ -27,6 +25,6 @@ const defaultTheme = {
     loadingStateBackgroundColor: '#F9F9FA',
 };
 const QuillProvider = ({ organizationId, publicKey, queryEndpoint, queryHeaders, environment, children, theme = defaultTheme, withCredentials = false, }) => {
-    return ((0, jsx_runtime_1.jsx)(Context_1.ContextProvider, { initialTheme: theme, publicKey: publicKey, environment: environment, customerId: organizationId, queryEndpoint: queryEndpoint, queryHeaders: queryHeaders, withCredentials: withCredentials, children: children }));
+    return (_jsx(ContextProvider, { initialTheme: theme, publicKey: publicKey, environment: environment, customerId: organizationId, queryEndpoint: queryEndpoint, queryHeaders: queryHeaders, withCredentials: withCredentials, children: children }));
 };
-exports.default = QuillProvider;
+export default QuillProvider;