@quillsql/react 2.8.5 → 2.8.6

package/dist/Chart.js

@@ -1,48 +1,19 @@
-"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;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ChartTooltipRow = exports.ChartTooltipFrame = exports.valueFormatter = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 /* eslint-disable @typescript-eslint/ban-ts-comment */
 // @ts-nocheck
-const react_1 = require("react");
-const aggregate_1 = require("./utils/aggregate");
-const ReportBuilder_1 = require("./ReportBuilder");
-const recharts_1 = require("recharts");
-const date_fns_1 = require("date-fns");
-const date_fns_tz_1 = require("date-fns-tz");
-const BarList_1 = __importDefault(require("./BarList"));
-const PieChart_1 = __importStar(require("./PieChart"));
-const Context_1 = require("./Context");
-const Table_1 = require("./Table");
-const dataFetcher_1 = require("./utils/dataFetcher");
-const PivotModal_1 = require("./internals/ReportBuilder/PivotModal");
-const colorToHex_1 = require("./utils/colorToHex");
+import { useState, useEffect, useContext, useMemo } from 'react';
+import { aggregate } from './utils/aggregate';
+import { getPostgresBasicType } from './ReportBuilder';
+import { Area, CartesianGrid, ComposedChart as ReChartsAreaChart, ResponsiveContainer, Tooltip, XAxis, YAxis, Bar, BarChart as ReChartsBarChart, } from 'recharts';
+import { differenceInHours, endOfWeek, format, isValid, startOfWeek, } from 'date-fns';
+import { utcToZonedTime } from 'date-fns-tz';
+import BarList from './BarList';
+import PieChart, { findComplementaryAndAnalogousColors } from './PieChart';
+import { ClientContext, DashboardContext, ThemeContext, DashboardFiltersContext, DateFilterContext, } from './Context';
+import { SpecialTable } from './Table';
+import { getData } from './utils/dataFetcher';
+import { generatePivotTable, generatePivotTableYAxis, } from './internals/ReportBuilder/PivotModal';
+import { COLOR_TO_HEX } from './utils/colorToHex';
 const colorValues = [
     'slate',
     'silver',
@@ -82,8 +53,8 @@ function selectColor(element, colors, index) {
         return color;
     }
     // If the element is a comparison, make the color grayscale.
-    if (Object.keys(colorToHex_1.COLOR_TO_HEX).includes(color)) {
-        const colorHex = colorToHex_1.COLOR_TO_HEX[color];
+    if (Object.keys(COLOR_TO_HEX).includes(color)) {
+        const colorHex = COLOR_TO_HEX[color];
         const rgbArray = hexToRGB(colorHex);
         return toGrayscale(rgbArray);
     }
@@ -159,7 +130,7 @@ function toGrayscale(rgba) {
 //     'The Pragmatic Engineer': 1726,
 //   },
 // ];
-const valueFormatter = ({ value, field, fields }) => {
+export const valueFormatter = ({ value, field, fields }) => {
     if (value === undefined ||
         value === null ||
         field === undefined ||
@@ -241,32 +212,32 @@ const valueFormatter = ({ value, field, fields }) => {
         formatType === 'yyyy' ||
         formatType === 'wo, yyyy') {
         const dateValue = new Date(value);
-        const utcDate = (0, date_fns_tz_1.utcToZonedTime)(dateValue, 'UTC');
-        if (!(0, date_fns_1.isValid)(utcDate)) {
+        const utcDate = utcToZonedTime(dateValue, 'UTC');
+        if (!isValid(utcDate)) {
             return 'Invalid date';
         }
         if (formatType === 'yyyy') {
-            return (0, date_fns_1.format)(utcDate, 'yyyy');
+            return format(utcDate, 'yyyy');
         }
         if (formatType === 'MMM_yyyy') {
-            return (0, date_fns_1.format)(utcDate, 'MMM yyyy');
+            return format(utcDate, 'MMM yyyy');
         }
         if (formatType === 'MMM_dd_yyyy') {
-            return (0, date_fns_1.format)(utcDate, 'dd MMM yyyy');
+            return format(utcDate, 'dd MMM yyyy');
         }
         if (formatType === 'hh_ap_pm') {
-            return (0, date_fns_1.format)(utcDate, 'hh:mm aa');
+            return format(utcDate, 'hh:mm aa');
         }
         if (formatType === 'MMM_dd-MMM_dd') {
-            const start = (0, date_fns_1.startOfWeek)(utcDate, { weekStartsOn: 1 }); // Monday
-            const end = (0, date_fns_1.endOfWeek)(utcDate, { weekStartsOn: 1 }); // Sunday
+            const start = startOfWeek(utcDate, { weekStartsOn: 1 }); // Monday
+            const end = endOfWeek(utcDate, { weekStartsOn: 1 }); // Sunday
             let formattedDate = '';
             // Check if start and end are in the same month
-            if ((0, date_fns_1.format)(start, 'MMM') === (0, date_fns_1.format)(end, 'MMM')) {
-                formattedDate = `${(0, date_fns_1.format)(start, 'MMM dd')} - ${(0, date_fns_1.format)(end, 'dd')}`;
+            if (format(start, 'MMM') === format(end, 'MMM')) {
+                formattedDate = `${format(start, 'MMM dd')} - ${format(end, 'dd')}`;
             }
             else {
-                formattedDate = `${(0, date_fns_1.format)(start, 'MMM dd')} - ${(0, date_fns_1.format)(end, 'MMM dd')}`;
+                formattedDate = `${format(start, 'MMM dd')} - ${format(end, 'MMM dd')}`;
             }
             return formattedDate;
         }
@@ -292,7 +263,7 @@ const valueFormatter = ({ value, field, fields }) => {
         }
         if (formatType === 'MMM_dd_hh:mm_ap_pm') {
             const formatStr = utcDate.getMinutes() === 0 ? 'MMM do h a' : 'MMM do h:mm a';
-            let formattedTime = (0, date_fns_1.format)(utcDate, formatStr);
+            let formattedTime = format(utcDate, formatStr);
             formattedTime =
                 formattedTime.slice(0, -2) + formattedTime.slice(-2).toLowerCase();
             return formattedTime;
@@ -309,7 +280,6 @@ const valueFormatter = ({ value, field, fields }) => {
     }
     return value.toString();
 };
-exports.valueFormatter = valueFormatter;
 const yAxisFields = [
     { field: 'avg_days', label: 'average days' },
     { field: 'median_days', label: 'median days' },
@@ -318,7 +288,7 @@ const labelFormatter = (name) => {
     // return yAxisFields.filter(elem => elem.field === name)[0].label;
     return name;
 };
-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',
         overflow: 'hidden',
@@ -327,8 +297,7 @@ 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: {
         marginRight: '24px',
         display: 'flex',
         alignItems: 'center',
@@ -336,13 +305,13 @@ const ChartTooltipRow = ({ value, name, color, theme, }) => ((0, jsx_runtime_1.j
         width: '100%',
         paddingTop: 2,
         paddingBottom: 2,
-    }, children: [(0, jsx_runtime_1.jsxs)("div", { 
+    }, children: [_jsxs("div", { 
             // className="qq-flex qq-items-center qq-space-x-2"
             style: {
                 // marginLeft: '0.5rem',
                 display: 'flex',
                 alignItems: 'center',
-            }, children: [(0, jsx_runtime_1.jsx)("span", { style: {
+            }, children: [_jsx("span", { style: {
                         background: color,
                         borderWidth: 2,
                         borderStyle: 'solid',
@@ -353,7 +322,7 @@ const ChartTooltipRow = ({ value, name, color, theme, }) => ((0, jsx_runtime_1.j
                         borderRadius: 100,
                         marginRight: 6,
                         boxSizing: 'border-box',
-                    } }), (0, jsx_runtime_1.jsx)("p", { 
+                    } }), _jsx("p", { 
                     // className={twMerge(
                     //   'font-medium tabular-nums text-right whitespace-nowrap',
                     //   'text-[#212121] !important'
@@ -365,7 +334,7 @@ const ChartTooltipRow = ({ value, name, color, theme, }) => ((0, jsx_runtime_1.j
                         color: theme?.primaryTextColor,
                         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,
@@ -377,11 +346,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 ChartTooltip = ({ active, payload, label, label2, colors, valueFormatter, dateFormatter, theme, }) => {
     if (active && payload) {
         if (label2) {
-            return ((0, jsx_runtime_1.jsx)(exports.ChartTooltipFrame, { theme: theme, children: payload.map(({ value, name }, idx) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [idx === 0 && ((0, jsx_runtime_1.jsx)("div", { style: {
+            return (_jsx(ChartTooltipFrame, { theme: theme, children: payload.map(({ value, name }, idx) => (_jsxs(_Fragment, { children: [idx === 0 && (_jsx("div", { style: {
                                 borderStyle: 'solid',
                                 borderBottomColor: theme?.borderColor || '#E5E7EB',
                                 background: theme?.backgroundColor || 'white',
@@ -395,7 +363,7 @@ const ChartTooltip = ({ active, payload, label, label2, colors, valueFormatter,
                                 paddingRight: '16px',
                                 paddingTop: '8px',
                                 paddingBottom: '8px',
-                            }, children: (0, jsx_runtime_1.jsx)("p", { style: {
+                            }, children: _jsx("p", { style: {
                                     textAlign: 'left',
                                     marginTop: 0,
                                     marginBottom: 0,
@@ -405,7 +373,7 @@ const ChartTooltip = ({ active, payload, label, label2, colors, valueFormatter,
                                     fontWeight: theme?.boldFontWeight || '500',
                                     paddingTop: 2,
                                     paddingBottom: 2,
-                                }, children: labelFormatter(name) }) })), (0, jsx_runtime_1.jsx)("div", { 
+                                }, children: labelFormatter(name) }) })), _jsx("div", { 
                             // className="qq-px-4 qq-space-y-1 qq-py-2 qq-px-4"
                             style: {
                                 paddingRight: '16px',
@@ -413,18 +381,18 @@ const ChartTooltip = ({ active, payload, label, label2, colors, valueFormatter,
                                 paddingTop: idx === 0 && '8px',
                                 paddingBottom: '8px',
                                 // marginTop: '0.25rem',
-                            }, children: (0, jsx_runtime_1.jsx)(exports.ChartTooltipRow, { name: valueFormatter(value), value: !isNaN(new Date(idx === 0 ? label : label2)) &&
+                            }, children: _jsx(ChartTooltipRow, { name: valueFormatter(value), value: !isNaN(new Date(idx === 0 ? label : label2)) &&
                                     dateFormatter
                                     ? dateFormatter(idx === 0 ? label : label2)
                                     : !isNaN(new Date(idx === 0 ? label : label2))
-                                        ? (0, date_fns_1.format)(new Date(idx === 0 ? label : label2), 'MMM yyyy')
+                                        ? format(new Date(idx === 0 ? label : label2), 'MMM yyyy')
                                         : idx === 0
                                             ? label
                                             : label2, 
                                 // color={categoryColors.get(name) ?? BaseColors.Blue}
                                 color: colors[idx], theme: theme }, `id-${idx}`) })] }))) }));
         }
-        return ((0, jsx_runtime_1.jsxs)(exports.ChartTooltipFrame, { theme: theme, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+        return (_jsxs(ChartTooltipFrame, { theme: theme, children: [_jsx("div", { style: {
                         borderStyle: 'solid',
                         borderBottomColor: theme?.borderColor || '#E5E7EB',
                         background: theme?.backgroundColor || 'white',
@@ -438,7 +406,7 @@ const ChartTooltip = ({ active, payload, label, label2, colors, valueFormatter,
                         paddingRight: '16px',
                         paddingTop: '8px',
                         paddingBottom: '8px',
-                    }, children: (0, jsx_runtime_1.jsx)("p", { style: {
+                    }, children: _jsx("p", { style: {
                             textAlign: 'left',
                             marginTop: 0,
                             marginBottom: 0,
@@ -451,8 +419,8 @@ const ChartTooltip = ({ active, payload, label, label2, colors, valueFormatter,
                         }, children: !isNaN(new Date(label)) && dateFormatter
                             ? dateFormatter(label)
                             : !isNaN(new Date(label))
-                                ? (0, date_fns_1.format)(new Date(label), 'MMM yyyy')
-                                : label }) }), (0, jsx_runtime_1.jsx)("div", { 
+                                ? format(new Date(label), 'MMM yyyy')
+                                : label }) }), _jsx("div", { 
                     // className="qq-px-4 qq-space-y-1 qq-py-2 qq-px-4"
                     style: {
                         paddingRight: '16px',
@@ -460,7 +428,7 @@ const ChartTooltip = ({ active, payload, label, label2, colors, valueFormatter,
                         paddingTop: '8px',
                         paddingBottom: '8px',
                         // marginTop: '0.25rem',
-                    }, children: payload.map(({ value, name }, idx) => ((0, jsx_runtime_1.jsx)(exports.ChartTooltipRow, { value: valueFormatter(value), name: labelFormatter(name), 
+                    }, children: payload.map(({ value, name }, idx) => (_jsx(ChartTooltipRow, { value: valueFormatter(value), name: labelFormatter(name), 
                         // color={categoryColors.get(name) ?? BaseColors.Blue}
                         color: colors[idx], theme: theme }, `id-${idx}`))) })] }));
     }
@@ -478,7 +446,7 @@ function isDate(str) {
     return !isNaN(Date.parse(str));
 }
 function areDatesNearby(dateStr1, dateStr2) {
-    return Math.abs((0, date_fns_1.differenceInHours)(dateStr1, dateStr2)) < 24;
+    return Math.abs(differenceInHours(dateStr1, dateStr2)) < 24;
 }
 function isEquivalent(filters1, filters2) {
     if (Object.keys(filters2).length !== Object.keys(filters1).length) {
@@ -522,9 +490,9 @@ function didFiltersChange(dashboardItem, filters) {
 const Chart = ({ chartId, config, colors, containerStyle, query, 
 //chartFilters
 SelectComponent, DatePickerComponent, }) => {
-    const { dateFilter, setDateFilter } = (0, react_1.useContext)(Context_1.DateFilterContext);
-    const { dispatch, dashboard } = (0, react_1.useContext)(Context_1.DashboardContext);
-    const { dashboardFilters } = (0, react_1.useContext)(Context_1.DashboardFiltersContext);
+    const { dateFilter, setDateFilter } = useContext(DateFilterContext);
+    const { dispatch, dashboard } = useContext(DashboardContext);
+    const { dashboardFilters } = useContext(DashboardFiltersContext);
     // const [chartFilters, setChartFilters] = useState({
     //   chart_filter: {
     //     table: 'transactions',
@@ -542,16 +510,16 @@ SelectComponent, DatePickerComponent, }) => {
     //     ],
     //   },
     // });
-    const [client, _] = (0, react_1.useContext)(Context_1.ClientContext);
-    const [theme] = (0, react_1.useContext)(Context_1.ThemeContext);
-    const chartColors = (0, react_1.useMemo)(() => {
+    const [client, _] = useContext(ClientContext);
+    const [theme] = useContext(ThemeContext);
+    const chartColors = useMemo(() => {
         return colors?.length
             ? colors
             : theme && theme.chartColors.length
                 ? theme.chartColors
                 : ['#4E80EE', '#E14F62', '#55B5A6', '#E9A23B', '#6466E9', '#55B685'];
     }, [colors]);
-    return ((0, jsx_runtime_1.jsx)(ChartUpdater, { config: config, dispatch: dispatch, dashboard: dashboard, chartId: chartId, containerStyle: containerStyle, colors: chartColors, client: client, theme: theme, 
+    return (_jsx(ChartUpdater, { config: config, dispatch: dispatch, dashboard: dashboard, chartId: chartId, containerStyle: containerStyle, colors: chartColors, client: client, theme: theme, 
         // isDateFilter={dateFilter}
         dateFilter: dateFilter, dashboardFilters: dashboardFilters, 
         // chartFilters={chartFilters}
@@ -565,10 +533,10 @@ dashboardFilters,
 // chartFilters,
 // setChartFilters,
 query, SelectComponent, DatePickerComponent, }) => {
-    const [loading, setLoading] = (0, react_1.useState)(false);
-    const [isComparison, setIsComparison] = (0, react_1.useState)(false);
-    const [bucketData, setBucketData] = (0, react_1.useState)(null);
-    (0, react_1.useEffect)(() => {
+    const [loading, setLoading] = useState(false);
+    const [isComparison, setIsComparison] = useState(false);
+    const [bucketData, setBucketData] = useState(null);
+    useEffect(() => {
         let isSubscribed = true;
         async function getChartOptions() {
             if (dashboard[chartId] &&
@@ -598,7 +566,7 @@ query, SelectComponent, DatePickerComponent, }) => {
                         id: chartId,
                         filters: [...Object.values(dashboardFilters)],
                     };
-                    const resp = await (0, dataFetcher_1.getData)(client, 'itempost', 'omit', hostedBody, cloudBody);
+                    const resp = await getData(client, 'itempost', 'omit', hostedBody, cloudBody);
                     if (resp) {
                         setLoading(false);
                         setIsComparison(!!resp.comparisonRows);
@@ -640,7 +608,7 @@ query, SelectComponent, DatePickerComponent, }) => {
             isSubscribed = false;
         };
     }, [dashboardFilters, client, chartId]);
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         if (!dashboardFilters ||
             !chartId ||
             !dashboard[chartId] ||
@@ -650,7 +618,7 @@ query, SelectComponent, DatePickerComponent, }) => {
         }
         const dateFilter = Object.values(dashboardFilters).find(filter => filter.filterType == 'date_range');
         if (dateFilter && dashboard[chartId].rows.length) {
-            const aggregatedObj = (0, aggregate_1.aggregate)(dashboard[chartId], dashboard[chartId].buckets, dateFilter);
+            const aggregatedObj = aggregate(dashboard[chartId], dashboard[chartId].buckets, dateFilter);
             setBucketData({
                 name: dashboard[chartId].name,
                 xAxisFormat: aggregatedObj.xAxisFormat,
@@ -660,10 +628,10 @@ query, SelectComponent, DatePickerComponent, }) => {
             });
         }
         const stringFilters = dashboard[chartId].buckets.filter(bucket => {
-            return ((0, ReportBuilder_1.getPostgresBasicType)(dashboard[chartId].fields.find(field => field.name === bucket.field)) === 'string');
+            return (getPostgresBasicType(dashboard[chartId].fields.find(field => field.name === bucket.field)) === 'string');
         });
         if (stringFilters.length && dashboard[chartId].rows.length) {
-            const aggregatedObj = (0, aggregate_1.aggregate)(dashboard[chartId], dashboard[chartId].buckets, null);
+            const aggregatedObj = aggregate(dashboard[chartId], dashboard[chartId].buckets, null);
             setBucketData({
                 name: dashboard[chartId].name,
                 xAxisFormat: aggregatedObj.xAxisFormat,
@@ -698,16 +666,16 @@ query, SelectComponent, DatePickerComponent, }) => {
     //   }
     // };
     const dateFilter = Object.values(dashboardFilters).find(filter => filter.filterType == 'date_range');
-    const pivotTable = (0, react_1.useMemo)(() => {
+    const pivotTable = useMemo(() => {
         const pivot = dashboard[chartId]?.pivot || config?.pivot;
         const data = dashboard[chartId] ? dashboard[chartId] : config;
         return pivot && data?.rows
-            ? (0, PivotModal_1.generatePivotTable)(pivot, data.rows, dateFilter?.startDate
+            ? generatePivotTable(pivot, data.rows, dateFilter?.startDate
                 ? [dateFilter?.startDate, dateFilter?.endDate, null]
                 : [null, null, null])
             : null;
     }, [dashboard, chartId, config, dateFilter]);
-    const pivotTableYAxis = (0, react_1.useMemo)(() => {
+    const pivotTableYAxis = useMemo(() => {
         if (!pivotTable) {
             return null;
         }
@@ -716,11 +684,11 @@ query, SelectComponent, DatePickerComponent, }) => {
             ? config.yAxisFields
             : dashboard[chartId]?.yAxisFields;
         return yAxisFields
-            ? (0, PivotModal_1.generatePivotTableYAxis)(pivot, pivotTable.columns, yAxisFields?.[0]?.format)
+            ? generatePivotTableYAxis(pivot, pivotTable.columns, yAxisFields?.[0]?.format)
             : null;
     }, [pivotTable]);
     if (!config && (!dashboard[chartId] || loading)) {
-        return ((0, jsx_runtime_1.jsx)("div", { 
+        return (_jsx("div", { 
             // className="flex flex-col flex-1 h-[100%]"
             style: {
                 ...containerStyle,
@@ -731,13 +699,13 @@ query, SelectComponent, DatePickerComponent, }) => {
                 // display: 'flex',
                 // flexDirection: 'column',
                 // flex: 1,
-            }, children: (0, jsx_runtime_1.jsx)("div", { style: {
+            }, children: _jsx("div", { style: {
                     height: containerStyle?.height,
                     width: '100%',
                     boxSizing: 'content-box',
                     borderRadius: 8,
                     overflow: 'hidden',
-                }, children: (0, jsx_runtime_1.jsxs)("svg", { width: "100%", height: "100%", xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", children: [(0, jsx_runtime_1.jsx)("rect", { width: "100%", height: "100%", fill: theme?.loadingStateBackgroundColor || '#F9F9FA' }), (0, jsx_runtime_1.jsx)("defs", { fill: theme?.loadingStateBackgroundColor || '#F9F9FA', children: (0, jsx_runtime_1.jsxs)("linearGradient", { id: "skeletonGradient", x1: "0%", y1: "0%", x2: "10%", y2: "0%", gradientUnits: "userSpaceOnUse", children: [(0, jsx_runtime_1.jsx)("stop", { offset: "0%", stopColor: "rgba(255,255,255,0)" }), (0, jsx_runtime_1.jsx)("stop", { offset: "50%", stopColor: "#FEFEFE" }), (0, jsx_runtime_1.jsx)("stop", { offset: "100%", stopColor: "rgba(255,255,255,0)" }), (0, jsx_runtime_1.jsx)("animate", { attributeName: "x1", from: "-100%", to: "100%", dur: "2s", repeatCount: "indefinite" }), (0, jsx_runtime_1.jsx)("animate", { attributeName: "x2", from: "-50%", to: "150%", dur: "2s", repeatCount: "indefinite" })] }) }), (0, jsx_runtime_1.jsx)("rect", { width: "50%", height: "100%", fill: "url(#skeletonGradient)", children: (0, jsx_runtime_1.jsx)("animate", { attributeName: "x", from: "-100%", to: "100%", dur: "2s", repeatCount: "indefinite" }) })] }) }) }));
+                }, children: _jsxs("svg", { width: "100%", height: "100%", xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", children: [_jsx("rect", { width: "100%", height: "100%", fill: theme?.loadingStateBackgroundColor || '#F9F9FA' }), _jsx("defs", { fill: theme?.loadingStateBackgroundColor || '#F9F9FA', children: _jsxs("linearGradient", { id: "skeletonGradient", x1: "0%", y1: "0%", x2: "10%", y2: "0%", gradientUnits: "userSpaceOnUse", children: [_jsx("stop", { offset: "0%", stopColor: "rgba(255,255,255,0)" }), _jsx("stop", { offset: "50%", stopColor: "#FEFEFE" }), _jsx("stop", { offset: "100%", stopColor: "rgba(255,255,255,0)" }), _jsx("animate", { attributeName: "x1", from: "-100%", to: "100%", dur: "2s", repeatCount: "indefinite" }), _jsx("animate", { attributeName: "x2", from: "-50%", to: "150%", dur: "2s", repeatCount: "indefinite" })] }) }), _jsx("rect", { width: "50%", height: "100%", fill: "url(#skeletonGradient)", children: _jsx("animate", { attributeName: "x", from: "-100%", to: "100%", dur: "2s", repeatCount: "indefinite" }) })] }) }) }));
     }
     if (config?.chartType === 'pie' || dashboard[chartId]?.chartType === 'pie') {
         const rows = pivotTable
@@ -753,7 +721,7 @@ query, SelectComponent, DatePickerComponent, }) => {
         const xAxisField = config
             ? config.xAxisField
             : dashboard[chartId].xAxisField;
-        return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(PieChart_1.default
+        return (_jsx(_Fragment, { children: _jsx(PieChart
             // @ts-ignore
             , { 
                 // @ts-ignore
@@ -768,12 +736,12 @@ query, SelectComponent, DatePickerComponent, }) => {
     if (config?.chartType === 'table' ||
         dashboard[chartId]?.chartType === 'table') {
         const data = dashboard[chartId] ? dashboard[chartId] : config;
-        return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(Table_1.SpecialTable, { rows: pivotTable?.rows || data.rows, columns: pivotTable?.columns || data.columns || data.yAxisFields, height: '400px', containerStyle: {
+        return (_jsx(_Fragment, { children: _jsx(SpecialTable, { rows: pivotTable?.rows || data.rows, columns: pivotTable?.columns || data.columns || data.yAxisFields, height: '400px', containerStyle: {
                     ...containerStyle,
                 }, theme: theme, isTableChart: true, name: data.name }) }));
     }
     if (config?.chartType === 'bar' || dashboard[chartId]?.chartType === 'bar') {
-        return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(BarList_1.default, { data: pivotTable
+        return (_jsx(_Fragment, { children: _jsx(BarList, { data: pivotTable
                     ? pivotTable.rows
                     : config
                         ? (config.bucketedRows &&
@@ -811,7 +779,7 @@ query, SelectComponent, DatePickerComponent, }) => {
     }
     if (config?.chartType === 'column' ||
         dashboard[chartId]?.chartType === 'column') {
-        return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(BarChart, { colors: colors, theme: theme, yAxisFields: yAxisFields, 
+        return (_jsx(_Fragment, { children: _jsx(BarChart, { colors: colors, theme: theme, yAxisFields: yAxisFields, 
                 // @ts-ignore
                 data: pivotTable
                     ? pivotTable.rows
@@ -839,7 +807,7 @@ query, SelectComponent, DatePickerComponent, }) => {
     if (config?.chartType === 'metric' ||
         dashboard[chartId]?.chartType === 'metric') {
         const data = dashboard[chartId] ? dashboard[chartId] : config;
-        return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)("div", { style: {
+        return (_jsx(_Fragment, { children: _jsx("div", { style: {
                     fontFamily: theme?.fontFamily,
                     fontSize: 32,
                     color: theme?.primaryTextColor,
@@ -859,7 +827,7 @@ query, SelectComponent, DatePickerComponent, }) => {
                     display: 'flex',
                     flexDirection: 'column',
                 }, children: data.rows.length > 0 &&
-                    (0, exports.valueFormatter)({
+                    valueFormatter({
                         value: data.rows[0][data.xAxisField],
                         field: data.xAxisField,
                         fields: [
@@ -870,7 +838,7 @@ query, SelectComponent, DatePickerComponent, }) => {
                         ],
                     }) }) }));
     }
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(LineChart, { colors: colors, yAxisFields: yAxisFields, 
+    return (_jsx(_Fragment, { children: _jsx(LineChart, { colors: colors, yAxisFields: yAxisFields, 
             // @ts-ignore
             data: pivotTable
                 ? pivotTable.rows
@@ -953,12 +921,12 @@ const CustomizedTick = ({ x, y, payload, theme, }) => {
     const maxLength = 10;
     const value = payload.value;
     const truncatedValue = value.length > maxLength ? value.substring(0, maxLength) + '...' : value;
-    return ((0, jsx_runtime_1.jsx)("text", { xlinkTitle: value, fill: theme?.chartLabelColor, fontSize: 12, x: x, y: y + 15, width: 30, textAnchor: "middle", children: truncatedValue }));
+    return (_jsx("text", { xlinkTitle: value, fill: theme?.chartLabelColor, fontSize: 12, x: x, y: y + 15, width: 30, textAnchor: "middle", children: truncatedValue }));
 };
 function BarChart({ colors, yAxisFields, data, containerStyle, xAxisField, xAxisLabel, xAxisFormat, theme, comparison, }) {
-    const newColors = (0, PieChart_1.findComplementaryAndAnalogousColors)(colors[0], colors[1]);
+    const newColors = findComplementaryAndAnalogousColors(colors[0], colors[1]);
     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%',
@@ -969,12 +937,12 @@ function BarChart({ colors, yAxisFields, data, containerStyle, xAxisField, xAxis
                 color: theme.secondaryTextColor,
             }, children: "No results found for specified time period." }));
     }
-    return ((0, jsx_runtime_1.jsx)("div", { style: {
+    return (_jsx("div", { style: {
             ...containerStyle,
             boxSizing: 'content-box',
-        }, children: (0, jsx_runtime_1.jsx)(recharts_1.ResponsiveContainer, { width: "100%", height: '100%', children: (0, jsx_runtime_1.jsxs)(recharts_1.BarChart, { data: data, 
+        }, children: _jsx(ResponsiveContainer, { width: "100%", height: '100%', children: _jsxs(ReChartsBarChart, { data: data, 
                 // stackOffset={'none'}
-                layout: 'horizontal', children: [(0, jsx_runtime_1.jsx)(recharts_1.CartesianGrid, { strokeDasharray: "3 3", horizontal: true, vertical: false }), (0, jsx_runtime_1.jsx)(recharts_1.YAxis
+                layout: 'horizontal', children: [_jsx(CartesianGrid, { strokeDasharray: "3 3", horizontal: true, vertical: false }), _jsx(YAxis
                     // width={56}
                     , { 
                         // width={56}
@@ -986,11 +954,11 @@ function BarChart({ colors, yAxisFields, data, containerStyle, xAxisField, xAxis
                         tick: { transform: 'translate(-3, 0)' }, style: {
                             fontSize: '12px',
                             fontFamily: theme.chartLabelFontFamily,
-                        }, tickFormatter: tick => (0, exports.valueFormatter)({
+                        }, tickFormatter: tick => valueFormatter({
                             value: tick,
                             field: yAxisFields[0].field || 'what',
                             fields: yAxisFields,
-                        }) }), (0, jsx_runtime_1.jsx)(recharts_1.XAxis, { hide: false, dataKey: xAxisField, 
+                        }) }), _jsx(XAxis, { hide: false, dataKey: xAxisField, 
                         // interval="preserveStartEnd"
                         tick: { transform: 'translate(0, 6)' }, 
                         //padding between labels and axis
@@ -999,27 +967,27 @@ function BarChart({ colors, yAxisFields, data, containerStyle, xAxisField, xAxis
                             // TODO: generalize
                             fontFamily: theme.chartLabelFontFamily,
                             marginTop: '20px',
-                        }, tickLine: false, axisLine: false, tickFormatter: tick => (0, exports.valueFormatter)({
+                        }, tickLine: false, axisLine: false, tickFormatter: tick => valueFormatter({
                             value: tick,
                             field: xAxisField,
                             fields: [{ field: xAxisField, format: xAxisFormat }],
-                        }) }), (0, jsx_runtime_1.jsx)(recharts_1.Tooltip, { wrapperStyle: { outline: 'none', zIndex: 2 }, isAnimationActive: false, cursor: { fill: '#d1d5db', opacity: '0.15' }, content: ({ active, payload, label }) => {
+                        }) }), _jsx(Tooltip, { wrapperStyle: { outline: 'none', zIndex: 2 }, isAnimationActive: false, cursor: { fill: '#d1d5db', opacity: '0.15' }, content: ({ active, payload, label }) => {
                             let label2;
                             if (comparison &&
                                 payload?.length > 1 &&
                                 payload[0].payload[xAxisField + '2']) {
                                 label2 = payload[0].payload[xAxisField + '2'];
                             }
-                            return ((0, jsx_runtime_1.jsx)(ChartTooltip, { theme: theme, active: active, payload: payload, label: label, label2: label2, dateFormatter: value => (0, exports.valueFormatter)({
+                            return (_jsx(ChartTooltip, { theme: theme, active: active, payload: payload, label: label, label2: label2, dateFormatter: value => valueFormatter({
                                     value,
                                     field: xAxisField,
                                     fields: [{ field: xAxisField, format: xAxisFormat }],
-                                }), valueFormatter: value => (0, exports.valueFormatter)({
+                                }), valueFormatter: value => valueFormatter({
                                     value,
                                     field: payload[0].dataKey,
                                     fields: yAxisFields,
                                 }), colors: colors }));
-                        }, position: { y: 0 } }), yAxisFields.map((elem, index) => ((0, jsx_runtime_1.jsx)(recharts_1.Bar, { name: elem.label, dataKey: elem.field, type: "linear", 
+                        }, position: { y: 0 } }), yAxisFields.map((elem, index) => (_jsx(Bar, { name: elem.label, dataKey: elem.field, type: "linear", 
                         // stackId={stack || relative ? "a" : undefined}
                         fill: selectColor(elem, colors, index), 
                         // barSize={20}
@@ -1038,7 +1006,7 @@ function LineChart({ colors, yAxisFields, data, containerStyle, xAxisField, xAxi
         return null;
     }
     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%',
@@ -1049,7 +1017,7 @@ function LineChart({ colors, yAxisFields, data, containerStyle, xAxisField, xAxi
                 color: theme.secondaryTextColor,
             }, children: "No results found for specified time period." }));
     }
-    return ((0, jsx_runtime_1.jsx)("div", { style: { ...containerStyle, boxSizing: 'content-box' }, children: (0, jsx_runtime_1.jsx)(recharts_1.ResponsiveContainer, { width: "100%", height: '100%', children: (0, jsx_runtime_1.jsxs)(recharts_1.ComposedChart, { data: data, children: [(0, jsx_runtime_1.jsx)(recharts_1.CartesianGrid, { strokeDasharray: "3 3", horizontal: true, vertical: false }), (0, jsx_runtime_1.jsx)(recharts_1.XAxis
+    return (_jsx("div", { style: { ...containerStyle, boxSizing: 'content-box' }, children: _jsx(ResponsiveContainer, { width: "100%", height: '100%', children: _jsxs(ReChartsAreaChart, { data: data, children: [_jsx(CartesianGrid, { strokeDasharray: "3 3", horizontal: true, vertical: false }), _jsx(XAxis
                     //   hide={!showXAxis}
                     , { 
                         //   hide={!showXAxis}
@@ -1069,11 +1037,11 @@ function LineChart({ colors, yAxisFields, data, containerStyle, xAxisField, xAxi
                         // interval="preserveStartEnd"
                         interval: "preserveStartEnd", 
                         // interval={0}
-                        tickLine: false, axisLine: false, padding: { left: 10, right: 10 }, minTickGap: 5, tickFormatter: tick => (0, exports.valueFormatter)({
+                        tickLine: false, axisLine: false, padding: { left: 10, right: 10 }, minTickGap: 5, tickFormatter: tick => valueFormatter({
                             value: tick,
                             field: xAxisField,
                             fields: [{ field: xAxisField, format: xAxisFormat }],
-                        }) }), (0, jsx_runtime_1.jsx)(recharts_1.YAxis
+                        }) }), _jsx(YAxis
                     // textAnchor="left"
                     // tickMargin={11}
                     , { 
@@ -1090,25 +1058,25 @@ function LineChart({ colors, yAxisFields, data, containerStyle, xAxisField, xAxi
                                 theme?.fontFamily ||
                                 'Inter; Helvetica',
                             color: theme?.chartLabelColor || '#666666',
-                        }, tickFormatter: value => (0, exports.valueFormatter)({
+                        }, tickFormatter: value => valueFormatter({
                             value,
                             field: yAxisFields[0].field,
                             fields: [
                                 ...yAxisFields,
                                 { field: xAxisField, format: xAxisFormat },
                             ],
-                        }) }), (0, jsx_runtime_1.jsx)(recharts_1.Tooltip, { wrapperStyle: { outline: 'none' }, isAnimationActive: false, cursor: { stroke: '#d1d5db', strokeWidth: 1 }, content: ({ active, payload, label }) => {
+                        }) }), _jsx(Tooltip, { wrapperStyle: { outline: 'none' }, isAnimationActive: false, cursor: { stroke: '#d1d5db', strokeWidth: 1 }, content: ({ active, payload, label }) => {
                             let label2;
                             if (comparison &&
                                 payload?.length > 1 &&
                                 payload[0].payload[xAxisField + '2']) {
                                 label2 = payload[0].payload[xAxisField + '2'];
                             }
-                            return ((0, jsx_runtime_1.jsx)(ChartTooltip, { active: active, payload: payload, label: label, label2: label2, dateFormatter: value => (0, exports.valueFormatter)({
+                            return (_jsx(ChartTooltip, { active: active, payload: payload, label: label, label2: label2, dateFormatter: value => valueFormatter({
                                     value,
                                     field: xAxisField,
                                     fields: [{ field: xAxisField, format: xAxisFormat }],
-                                }), valueFormatter: value => (0, exports.valueFormatter)({
+                                }), valueFormatter: value => valueFormatter({
                                     value,
                                     field: payload[0].dataKey,
                                     fields: [
@@ -1116,9 +1084,9 @@ function LineChart({ colors, yAxisFields, data, containerStyle, xAxisField, xAxi
                                         { field: xAxisField, format: xAxisFormat },
                                     ],
                                 }), colors: colors, theme: theme }));
-                        }, position: { y: 0 } }), yAxisFields.map((elem, index) => ((0, jsx_runtime_1.jsx)("defs", { children: (0, jsx_runtime_1.jsxs)("linearGradient", { id: `gradient${index}`, x1: "0", y1: "0", x2: "0", y2: "1", children: [(0, jsx_runtime_1.jsx)("stop", { offset: "5%", stopColor: selectColor(elem, colors, index), stopOpacity: 0.4 }), (0, jsx_runtime_1.jsx)("stop", { offset: "95%", stopColor: 'rgba(0,0,0,0)', stopOpacity: 0 })] }) }, `defs${elem.field + index}`))), yAxisFields.map((elem, index) => ((0, jsx_runtime_1.jsx)(recharts_1.Area, { name: elem.label, type: "linear", dataKey: elem.field, stroke: selectColor(elem, colors, index), 
+                        }, position: { y: 0 } }), yAxisFields.map((elem, index) => (_jsx("defs", { children: _jsxs("linearGradient", { id: `gradient${index}`, x1: "0", y1: "0", x2: "0", y2: "1", children: [_jsx("stop", { offset: "5%", stopColor: selectColor(elem, colors, index), stopOpacity: 0.4 }), _jsx("stop", { offset: "95%", stopColor: 'rgba(0,0,0,0)', stopOpacity: 0 })] }) }, `defs${elem.field + index}`))), yAxisFields.map((elem, index) => (_jsx(Area, { name: elem.label, type: "linear", dataKey: elem.field, stroke: selectColor(elem, colors, index), 
                         // if hide area
                         // fill="transparent"
                         fill: `url(#gradient${index})`, strokeWidth: 2, dot: false, isAnimationActive: true }, elem.field)))] }) }) }));
 }
-exports.default = Chart;
+export default Chart;