@quillsql/react 2.8.8 → 2.8.9

package/dist/Table.js

@@ -1,18 +1,16 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SpecialTable = 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 */
 // @ts-nocheck
-const react_1 = require("react");
-const Context_1 = require("./Context");
-const Chart_1 = require("./Chart");
-const dataFetcher_1 = require("./utils/dataFetcher");
+import { useContext, useEffect, useState } from 'react';
+import { ClientContext, DashboardContext, ThemeContext, DashboardFiltersContext, } from './Context';
+import { getData } from './utils/dataFetcher';
+import { valueFormatter } from './utils/valueFormatter';
+import { valueFormatterCSV } from './utils/valueFormatterCSV';
 const Table = ({ chartId, columns, rows, containerStyle, csvFilename, showDownloadCsvButton, LoadingComponent, }) => {
-    const { dispatch, dashboard } = (0, react_1.useContext)(Context_1.DashboardContext);
-    const { dashboardFilters } = (0, react_1.useContext)(Context_1.DashboardFiltersContext);
-    const [client, _] = (0, react_1.useContext)(Context_1.ClientContext);
-    const [theme] = (0, react_1.useContext)(Context_1.ThemeContext);
+    const { dispatch, dashboard } = useContext(DashboardContext);
+    const { dashboardFilters } = useContext(DashboardFiltersContext);
+    const [client, _] = useContext(ClientContext);
+    const [theme] = useContext(ThemeContext);
     const downloadCSV = (rows, name) => {
         // report.rows
         if (!rows.length) {
@@ -41,9 +39,9 @@ const Table = ({ chartId, columns, rows, containerStyle, csvFilename, showDownlo
         document.body.removeChild(downloadLink);
     };
     if (!chartId && rows && columns) {
-        return ((0, jsx_runtime_1.jsx)(SpecialTable, { showDownloadCsvButton: showDownloadCsvButton, csvFilename: csvFilename || 'table', columns: columns, rows: rows, height: containerStyle?.height || '100%', theme: theme, containerStyle: containerStyle, LoadingComponent: LoadingComponent }));
+        return (_jsx(SpecialTable, { showDownloadCsvButton: showDownloadCsvButton, csvFilename: csvFilename || 'table', columns: columns, rows: rows, height: containerStyle?.height || '100%', theme: theme, containerStyle: containerStyle, LoadingComponent: LoadingComponent }));
     }
-    return ((0, jsx_runtime_1.jsx)(ChartUpdater, { showDownloadCsvButton: showDownloadCsvButton, dispatch: dispatch, dashboard: dashboard, chartId: chartId, containerStyle: containerStyle, dashboardFilters: dashboardFilters, client: client, theme: theme, downloadCSV: downloadCSV, csvFilename: csvFilename, LoadingComponent: LoadingComponent }));
+    return (_jsx(ChartUpdater, { showDownloadCsvButton: showDownloadCsvButton, dispatch: dispatch, dashboard: dashboard, chartId: chartId, containerStyle: containerStyle, dashboardFilters: dashboardFilters, client: client, theme: theme, downloadCSV: downloadCSV, csvFilename: csvFilename, LoadingComponent: LoadingComponent }));
 };
 const compareValues = (a, b, column) => {
     const valueA = a[column];
@@ -62,13 +60,13 @@ const compareValues = (a, b, column) => {
     // For strings
     return valueA.localeCompare(valueB);
 };
-function SpecialTable({ columns, rows, height, containerStyle, loading, LoadingComponent, theme, showDownloadCsvButton = true, csvFilename, DownloadCSVButtonComponent, AddToDashboardButtonComponent, isTableChart = false, name, }) {
-    const [activeRows, setActiveRows] = (0, react_1.useState)([]);
-    const [page, setPage] = (0, react_1.useState)(1);
-    const [maxPage, setMaxPage] = (0, react_1.useState)(1);
-    const [sortColumn, setSortColumn] = (0, react_1.useState)(null);
-    const [sortDirection, setSortDirection] = (0, react_1.useState)('desc');
-    (0, react_1.useEffect)(() => {
+export function SpecialTable({ columns, rows, height, containerStyle, loading, LoadingComponent, theme, showDownloadCsvButton = true, csvFilename, DownloadCSVButtonComponent, AddToDashboardButtonComponent, isTableChart = false, name, }) {
+    const [activeRows, setActiveRows] = useState([]);
+    const [page, setPage] = useState(1);
+    const [maxPage, setMaxPage] = useState(1);
+    const [sortColumn, setSortColumn] = useState(null);
+    const [sortDirection, setSortDirection] = useState('desc');
+    useEffect(() => {
         const sortedRows = [...rows];
         if (sortColumn) {
             sortedRows.sort((a, b) => {
@@ -114,7 +112,7 @@ function SpecialTable({ columns, rows, height, containerStyle, loading, LoadingC
             const newRows = [];
             for (let i = 0; i < rows.length; i++) {
                 const newRow = {};
-                Object.keys(rows[i]).forEach((field) => (newRow[field] = (0, Chart_1.valueFormatter)({
+                Object.keys(rows[i]).forEach((field) => (newRow[field] = valueFormatterCSV({
                     value: rows[i][field],
                     field: field,
                     fields: columns,
@@ -128,7 +126,7 @@ function SpecialTable({ columns, rows, height, containerStyle, loading, LoadingC
             // Data rows
             for (const row of newRows) {
                 const values = fields.map((field) => {
-                    let value = JSON.stringify(row[field] || '');
+                    let value = JSON.stringify(row[field] ?? '');
                     if (value.includes('\\"')) {
                         value = value.replaceAll('\\"', '""');
                     }
@@ -172,7 +170,7 @@ function SpecialTable({ columns, rows, height, containerStyle, loading, LoadingC
         document.body.removeChild(downloadLink);
     };
     if (loading) {
-        return ((0, jsx_runtime_1.jsx)("div", { style: {
+        return (_jsx("div", { style: {
                 ...containerStyle,
                 // paddingLeft: 25,
                 // paddingRight: 25,
@@ -181,12 +179,14 @@ function SpecialTable({ columns, rows, height, containerStyle, loading, LoadingC
                 // overflow: 'visible',
                 width: '100%',
                 height: height || '100%',
+                display: 'flex',
+                flexDirection: 'column',
                 // overflow: 'hidden',
                 // @ts-ignore
                 // boxShadow: 'rgba(231, 231, 231, 0.5) 0px 1px 2px 0px',
-            }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
+            }, children: _jsxs("div", { style: {
                     height: '100%',
-                    overflow: 'scroll',
+                    overflow: 'auto',
                     borderRadius: 6,
                     border: '1px solid rgb(229, 231, 235)',
                     padding: 0,
@@ -199,7 +199,7 @@ function SpecialTable({ columns, rows, height, containerStyle, loading, LoadingC
                     justifyContent: 'center',
                     alignItems: 'center',
                     // maxHeight: 600,
-                }, children: [LoadingComponent && (0, jsx_runtime_1.jsx)(LoadingComponent, {}), !LoadingComponent && ((0, jsx_runtime_1.jsxs)("svg", { width: "24", height: "24", children: [(0, jsx_runtime_1.jsx)("circle", { cx: "12", cy: "12", r: "9.375", strokeWidth: "3.75", strokeDasharray: "calc(2 * 3.14 * 9.375 / 3) calc(2 * 3.14 * 9.375 * 2 / 3)", strokeDashoffset: "calc(2 * 3.14 * 9.375 / 6)", stroke: theme?.primaryTextColor || '#364153', fill: "none", transform: "rotate(-90 12 12)", children: (0, jsx_runtime_1.jsx)("animateTransform", { attributeName: "transform", attributeType: "XML", type: "rotate", from: "-180 12 12", to: "180 12 12", dur: "0.8s", repeatCount: "indefinite" }) }), (0, jsx_runtime_1.jsx)("circle", { cx: "12", cy: "12", r: "9.375", strokeWidth: "3.75", strokeDasharray: "calc(2 * 3.14 * 9.375 / 3) calc(2 * 3.14 * 9.375 * 1 / 3)", strokeDashoffset: "calc(2 * 3.14 * 9.375 / 3) calc(2 * 3.14 * 9.375 * 2 / 3)", stroke: '#ADB1B9', fill: "none", transform: "rotate(90 12 12)", children: (0, jsx_runtime_1.jsx)("animateTransform", { attributeName: "transform", attributeType: "XML", type: "rotate", from: "0 12 12", to: "360 12 12", dur: "0.8s", repeatCount: "indefinite" }) })] }))] }) }));
+                }, children: [LoadingComponent && _jsx(LoadingComponent, {}), !LoadingComponent && (_jsxs("svg", { width: "24", height: "24", children: [_jsx("circle", { cx: "12", cy: "12", r: "9.375", strokeWidth: "3.75", strokeDasharray: "calc(2 * 3.14 * 9.375 / 3) calc(2 * 3.14 * 9.375 * 2 / 3)", strokeDashoffset: "calc(2 * 3.14 * 9.375 / 6)", stroke: theme?.primaryTextColor || '#364153', fill: "none", transform: "rotate(-90 12 12)", children: _jsx("animateTransform", { attributeName: "transform", attributeType: "XML", type: "rotate", from: "-180 12 12", to: "180 12 12", dur: "0.8s", repeatCount: "indefinite" }) }), _jsx("circle", { cx: "12", cy: "12", r: "9.375", strokeWidth: "3.75", strokeDasharray: "calc(2 * 3.14 * 9.375 / 3) calc(2 * 3.14 * 9.375 * 1 / 3)", strokeDashoffset: "calc(2 * 3.14 * 9.375 / 3) calc(2 * 3.14 * 9.375 * 2 / 3)", stroke: '#ADB1B9', fill: "none", transform: "rotate(90 12 12)", children: _jsx("animateTransform", { attributeName: "transform", attributeType: "XML", type: "rotate", from: "0 12 12", to: "360 12 12", dur: "0.8s", repeatCount: "indefinite" }) })] }))] }) }));
     }
     if (!columns || !columns.length || !activeRows) {
         return null;
@@ -219,7 +219,7 @@ function SpecialTable({ columns, rows, height, containerStyle, loading, LoadingC
             return null;
         }
     }
-    return ((0, jsx_runtime_1.jsxs)("div", { style: {
+    return (_jsxs("div", { style: {
             ...containerStyle,
             // paddingLeft: 25,
             // paddingRight: 25,
@@ -232,7 +232,7 @@ function SpecialTable({ columns, rows, height, containerStyle, loading, LoadingC
             // overflow: 'hidden',
             // @ts-ignore
             // boxShadow: 'rgba(231, 231, 231, 0.5) 0px 1px 2px 0px',
-        }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+        }, children: [_jsx("div", { style: {
                     height: '100%',
                     overflow: 'auto',
                     borderRadius: 6,
@@ -243,12 +243,12 @@ function SpecialTable({ columns, rows, height, containerStyle, loading, LoadingC
                     boxSizing: 'border-box',
                     outline: 'none',
                     // maxHeight: 600,
-                }, children: (0, jsx_runtime_1.jsxs)("div", { role: "table", className: "table", style: { minWidth: '0px', width: '100%', height: '100%' }, children: [(0, jsx_runtime_1.jsx)("div", { className: "thead", children: (0, jsx_runtime_1.jsx)("div", { role: "row", className: "tr", style: {
+                }, children: _jsxs("div", { role: "table", className: "table", style: { minWidth: '0px', width: '100%', height: '100%' }, children: [_jsx("div", { className: "thead", children: _jsx("div", { role: "row", className: "tr", style: {
                                     display: 'flex',
                                     flex: '1 0 auto',
                                     minWidth: '100px',
                                     boxSizing: 'border-box',
-                                }, children: columns.map((column, index) => ((0, jsx_runtime_1.jsxs)("div", { onClick: () => toggleSort(column), 
+                                }, children: columns.map((column, index) => (_jsxs("div", { onClick: () => toggleSort(column), 
                                     // @ts-ignore
                                     style: {
                                         boxSizing: 'border-box',
@@ -274,7 +274,7 @@ function SpecialTable({ columns, rows, height, containerStyle, loading, LoadingC
                                         display: 'flex',
                                         flexDirection: 'row',
                                         justifyContent: 'space-between',
-                                    }, children: [(0, jsx_runtime_1.jsx)("div", { "aria-haspopup": "dialog", "aria-expanded": "false", "aria-controls": "mantine-r6-dropdown", 
+                                    }, children: [_jsx("div", { "aria-haspopup": "dialog", "aria-expanded": "false", "aria-controls": "mantine-r6-dropdown", 
                                             // @ts-ignore
                                             style: {
                                                 // fontFamily:
@@ -290,16 +290,16 @@ function SpecialTable({ columns, rows, height, containerStyle, loading, LoadingC
                                                 textOverflow: 'ellipsis',
                                                 whiteSpace: 'nowrap',
                                                 overflow: 'hidden',
-                                            }, children: column.label || column.field }), column.field === sortColumn && ((0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: theme?.primaryTextColor, height: "14px", width: "14px", style: {
+                                            }, children: column.label || column.field }), column.field === sortColumn && (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: theme?.primaryTextColor, height: "14px", width: "14px", style: {
                                                 transform: sortDirection === 'desc'
                                                     ? 'rotate(180deg)'
                                                     : undefined,
-                                            }, children: (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", d: "M10 3a.75.75 0 01.75.75v10.638l3.96-4.158a.75.75 0 111.08 1.04l-5.25 5.5a.75.75 0 01-1.08 0l-5.25-5.5a.75.75 0 111.08-1.04l3.96 4.158V3.75A.75.75 0 0110 3z", clipRule: "evenodd" }) }))] }, 'sqlcol' + index))) }) }), (0, jsx_runtime_1.jsx)("div", { role: "rowgroup", className: "tbody", children: activeRows.map((row, rowIndex) => ((0, jsx_runtime_1.jsx)("div", { role: "row", className: "tr", style: {
+                                            }, children: _jsx("path", { fillRule: "evenodd", d: "M10 3a.75.75 0 01.75.75v10.638l3.96-4.158a.75.75 0 111.08 1.04l-5.25 5.5a.75.75 0 01-1.08 0l-5.25-5.5a.75.75 0 111.08-1.04l3.96 4.158V3.75A.75.75 0 0110 3z", clipRule: "evenodd" }) }))] }, 'sqlcol' + index))) }) }), _jsx("div", { role: "rowgroup", className: "tbody", children: activeRows.map((row, rowIndex) => (_jsx("div", { role: "row", className: "tr", style: {
                                     display: 'flex',
                                     flex: '1 0 auto',
                                     minWidth: '100px',
                                     boxSizing: 'border-box',
-                                }, children: columns.map((column, columnIndex) => ((0, jsx_runtime_1.jsx)("div", { role: "cell", style: {
+                                }, children: columns.map((column, columnIndex) => (_jsx("div", { role: "cell", style: {
                                         boxSizing: 'border-box',
                                         flex: '150 0 auto',
                                         minWidth: '50px',
@@ -319,14 +319,14 @@ function SpecialTable({ columns, rows, height, containerStyle, loading, LoadingC
                                             ? '1px solid rgb(229, 231, 235)'
                                             : undefined,
                                         userSelect: 'none',
-                                    }, children: (0, jsx_runtime_1.jsx)("div", { style: {
+                                    }, children: _jsx("div", { style: {
                                             lineHeight: '24px',
                                             width: '100%',
                                             display: 'flex',
                                             cursor: 'default',
                                             position: 'relative',
                                             userSelect: 'none',
-                                        }, "data-testid": "static-cell", children: (0, jsx_runtime_1.jsx)("div", { "aria-haspopup": "dialog", "aria-expanded": "false", style: {
+                                        }, "data-testid": "static-cell", children: _jsx("div", { "aria-haspopup": "dialog", "aria-expanded": "false", style: {
                                                 fontFamily: theme?.fontFamily ||
                                                     'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"',
                                                 WebkitTapHighlightColor: 'transparent',
@@ -342,7 +342,7 @@ function SpecialTable({ columns, rows, height, containerStyle, loading, LoadingC
                                                 padding: '8px 16px',
                                                 userSelect: 'none',
                                             }, children: column.format
-                                                ? (0, Chart_1.valueFormatter)({
+                                                ? valueFormatter({
                                                     value: row[column.field],
                                                     field: column.field,
                                                     fields: columns,
@@ -353,7 +353,7 @@ function SpecialTable({ columns, rows, height, containerStyle, loading, LoadingC
                                                         : JSON.stringify(row[column.field])
                                                     : row[column.field].length > 55
                                                         ? row[column.field].substring(0, 52) + '...'
-                                                        : row[column.field] }) }) }, 'sqlcell' + columnIndex))) }, 'sqlrow' + rowIndex))) }), activeRows.length === 0 && ((0, jsx_runtime_1.jsx)("div", { style: {
+                                                        : row[column.field] }) }) }, 'sqlcell' + columnIndex))) }, 'sqlrow' + rowIndex))) }), activeRows.length === 0 && (_jsx("div", { style: {
                                 paddingTop: '60px',
                                 display: 'flex',
                                 flex: '1 0 auto',
@@ -362,7 +362,7 @@ function SpecialTable({ columns, rows, height, containerStyle, loading, LoadingC
                                 alignItems: 'center',
                                 fontSize: 13,
                                 color: theme?.secondaryTextColor || 'rgb(55, 65, 81)',
-                            }, children: "No results found for specified time period." }))] }) }), (0, jsx_runtime_1.jsx)("div", { style: { position: 'relative' }, children: (0, jsx_runtime_1.jsx)("div", { style: {
+                            }, children: "No results found for specified time period." }))] }) }), _jsx("div", { style: { position: 'relative' }, children: _jsx("div", { style: {
                         display: 'flex',
                         flex: '1 0 auto',
                         minWidth: '100px',
@@ -380,13 +380,13 @@ function SpecialTable({ columns, rows, height, containerStyle, loading, LoadingC
                         borderBottomRightRadius: 6,
                         borderBottomLeftRadius: 6,
                         width: '100%',
-                    }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
+                    }, children: _jsxs("div", { style: {
                             display: 'flex',
                             flexDirection: 'row',
                             alignItems: 'center',
                             justifyContent: 'space-between',
                             width: '100%',
-                        }, children: [(0, jsx_runtime_1.jsx)("button", { onClick: showDownloadCsvButton ? downloadCSV : undefined, style: {
+                        }, children: [_jsx("button", { onClick: showDownloadCsvButton ? downloadCSV : undefined, style: {
                                     fontSize: 14,
                                     paddingLeft: 12,
                                     fontFamily: theme?.fontFamily,
@@ -395,29 +395,28 @@ function SpecialTable({ columns, rows, height, containerStyle, loading, LoadingC
                                     fontWeight: 500,
                                     cursor: 'pointer',
                                     border: 'none',
-                                }, children: showDownloadCsvButton ? 'Download CSV' : '' }), (0, jsx_runtime_1.jsxs)("div", { style: {
+                                }, children: showDownloadCsvButton ? 'Download CSV' : '' }), _jsxs("div", { style: {
                                     display: 'flex',
                                     flexDirection: 'row',
                                     alignItems: 'center',
-                                }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
+                                }, children: [_jsxs("div", { style: {
                                             fontSize: 12,
                                             fontFamily: theme?.fontFamily,
                                             color: theme?.primaryTextColor,
-                                        }, children: [page, ' of ', maxPage] }), (0, jsx_runtime_1.jsx)("div", { style: { width: 8 } }), (0, jsx_runtime_1.jsx)("button", { onClick: decreasePage, style: {
+                                        }, children: [page, ' of ', maxPage] }), _jsx("div", { style: { width: 8 } }), _jsx("button", { onClick: decreasePage, style: {
                                             cursor: 'pointer',
                                             border: 'none',
                                             background: 'transparent',
-                                        }, children: (0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: theme?.chartLabelFontFamily || theme?.fontFamily, height: "16px", width: "16px", children: (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", d: "M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z", clipRule: "evenodd" }) }) }), (0, jsx_runtime_1.jsx)("button", { onClick: increasePage, style: {
+                                        }, children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: theme?.chartLabelFontFamily || theme?.fontFamily, height: "16px", width: "16px", children: _jsx("path", { fillRule: "evenodd", d: "M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z", clipRule: "evenodd" }) }) }), _jsx("button", { onClick: increasePage, style: {
                                             cursor: 'pointer',
                                             border: 'none',
                                             background: 'transparent',
-                                        }, children: (0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: theme?.chartLabelFontFamily || theme?.fontFamily, height: "16px", width: "16px", children: (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", d: "M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z", clipRule: "evenodd" }) }) }), (0, jsx_runtime_1.jsx)("div", { style: { width: 12 } })] })] }) }) })] }));
+                                        }, children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: theme?.chartLabelFontFamily || theme?.fontFamily, height: "16px", width: "16px", children: _jsx("path", { fillRule: "evenodd", d: "M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z", clipRule: "evenodd" }) }) }), _jsx("div", { style: { width: 12 } })] })] }) }) })] }));
 }
-exports.SpecialTable = SpecialTable;
 const ChartUpdater = ({ chartId, containerStyle, dashboard, dispatch, client, dashboardFilters, theme, downloadCSV, csvFilename, showDownloadCsvButton = true, LoadingComponent, }) => {
-    const [chartConfig, setChartConfig] = (0, react_1.useState)(null);
-    const [loading, setLoading] = (0, react_1.useState)(true);
-    (0, react_1.useEffect)(() => {
+    const [chartConfig, setChartConfig] = useState(null);
+    const [loading, setLoading] = useState(true);
+    useEffect(() => {
         let isSubscribed = true;
         async function getChartOptions() {
             if (isSubscribed) {
@@ -443,7 +442,7 @@ const ChartUpdater = ({ chartId, containerStyle, dashboard, dispatch, client, da
                         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);
                         dispatch({
@@ -486,7 +485,7 @@ const ChartUpdater = ({ chartId, containerStyle, dashboard, dispatch, client, da
     //     : null;
     // }, [dashboard, chartId, dateFilter]);
     if (!dashboard[chartId] || loading) {
-        return ((0, jsx_runtime_1.jsx)("div", { 
+        return (_jsx("div", { 
             // className="flex flex-col flex-1 h-[100%]"
             style: {
                 ...containerStyle,
@@ -497,36 +496,36 @@ const ChartUpdater = ({ chartId, containerStyle, dashboard, dispatch, client, da
                 display: 'flex',
                 flexDirection: 'column',
                 flex: 1,
-            }, children: (0, jsx_runtime_1.jsx)("div", { style: {
+            }, children: _jsx("div", { style: {
                     height: containerStyle?.height || 300,
                     width: '100%',
                     boxSizing: 'content-box',
-                }, 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: "#F9F9FA" }), (0, jsx_runtime_1.jsx)("defs", { fill: "#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: "#F9F9FA" }), _jsx("defs", { fill: "#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" }) })] }) }) }));
     }
-    return ((0, jsx_runtime_1.jsx)(SpecialTable, { showDownloadCsvButton: showDownloadCsvButton, csvFilename: csvFilename || dashboard[chartId].name, columns: dashboard[chartId].columns, rows: dashboard[chartId].rows, height: containerStyle?.height || '100%', theme: theme, containerStyle: containerStyle, LoadingComponent: LoadingComponent }));
+    return (_jsx(SpecialTable, { showDownloadCsvButton: showDownloadCsvButton, csvFilename: csvFilename || dashboard[chartId].name, columns: dashboard[chartId].columns, rows: dashboard[chartId].rows, height: containerStyle?.height || '100%', theme: theme, containerStyle: containerStyle, LoadingComponent: LoadingComponent }));
 };
 function Columns({ columns, data, theme, handleDownloadCSV, numToShow }) {
-    return ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column', height: '100%' }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+    return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', height: '100%' }, children: [_jsx("div", { style: {
                     display: 'flex',
                     flexDirection: 'row',
                     // overflowX: 'scroll',
                     // overflowY: 'hidden',
                     overflow: 'scroll',
                     height: '100%',
-                }, children: columns.map((elem) => ((0, jsx_runtime_1.jsx)(Column, { column: elem, data: data, theme: theme }, elem.field))) }), (0, jsx_runtime_1.jsxs)("div", { style: {
+                }, children: columns.map((elem) => (_jsx(Column, { column: elem, data: data, theme: theme }, elem.field))) }), _jsxs("div", { style: {
                     display: 'flex',
                     flexDirection: 'row',
                     alignItems: 'center',
                     justifyContent: 'space-between',
                     //   background: 'black',
-                }, children: [data.length > numToShow && ((0, jsx_runtime_1.jsxs)("div", { style: {
+                }, children: [data.length > numToShow && (_jsxs("div", { style: {
                             color: theme?.chartLabelColor,
                             boxSizing: 'content-box',
                             fontFamily: theme?.chartLabelFontFamily || theme?.fontFamily,
                             fontSize: theme?.fontSizeSmall || '0.875rem',
                             marginLeft: 12,
                             marginTop: 8,
-                        }, children: ["...", data.length - numToShow, " more"] })), (0, jsx_runtime_1.jsx)("div", { onClick: handleDownloadCSV, style: {
+                        }, children: ["...", data.length - numToShow, " more"] })), _jsx("div", { onClick: handleDownloadCSV, style: {
                             height: 40,
                             minHeight: 40,
                             color: theme?.primaryTextColor,
@@ -540,14 +539,14 @@ function Columns({ columns, data, theme, handleDownloadCSV, numToShow }) {
                         }, children: "Download CSV" })] })] }));
 }
 function Column({ column, data, theme }) {
-    return ((0, jsx_runtime_1.jsxs)("div", { style: {
+    return (_jsxs("div", { style: {
             paddingLeft: 20,
             paddingRight: 20,
             // width: 'max-content',
             display: 'inline-flex',
             flexDirection: 'column',
             whiteSpace: 'nowrap',
-        }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+        }, children: [_jsx("div", { style: {
                     height: 40,
                     minHeight: 40,
                     color: theme?.primaryTextColor,
@@ -555,10 +554,10 @@ function Column({ column, data, theme }) {
                     fontFamily: theme?.chartLabelFontFamily || theme?.fontFamily,
                     fontSize: theme?.fontSizeSmall || '0.875rem',
                     fontWeight: theme?.fontWeightMedium || '500',
-                }, children: column.label || column.field }), data.map((elem) => ((0, jsx_runtime_1.jsx)(Cell, { item: elem[column.field], theme: theme })))] }));
+                }, children: column.label || column.field }), data.map((elem) => (_jsx(Cell, { item: elem[column.field], theme: theme })))] }));
 }
 function Cell({ item, theme }) {
-    return ((0, jsx_runtime_1.jsx)("div", { style: {
+    return (_jsx("div", { style: {
             height: 40,
             minHeight: 40,
             whiteSpace: 'nowrap',
@@ -568,5 +567,4 @@ function Cell({ item, theme }) {
             color: theme?.chartLabelColor,
         }, children: item }));
 }
-exports.default = Table;
-//# sourceMappingURL=Table.js.map
+export default Table;

package/dist/TableChart.js

@@ -1,34 +1,8 @@
-"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.hexToRgbaWith10PercentAlpha = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /* eslint-disable react/display-name */
 // @ts-nocheck
-const react_1 = __importStar(require("react"));
-const Chart_1 = require("./Chart");
+import React, { useMemo } from 'react';
+import { valueFormatter } from './utils/valueFormatter';
 const getWidthsFromValues = (dataValues) => {
     let maxValue = -Infinity;
     dataValues.forEach((value) => {
@@ -40,7 +14,7 @@ const getWidthsFromValues = (dataValues) => {
         return Math.max((value / maxValue) * 100, 1);
     });
 };
-function hexToRgbaWith10PercentAlpha(hex) {
+export function hexToRgbaWith10PercentAlpha(hex) {
     // Convert the hex color to RGB
     const r = parseInt(hex.slice(1, 3), 16);
     const g = parseInt(hex.slice(3, 5), 16);
@@ -50,26 +24,25 @@ function hexToRgbaWith10PercentAlpha(hex) {
     // Return the color as an rgba string
     return `rgba(${r}, ${g}, ${b}, ${alpha})`;
 }
-exports.hexToRgbaWith10PercentAlpha = hexToRgbaWith10PercentAlpha;
 function Columns({ columns, data, theme }) {
-    return ((0, jsx_runtime_1.jsx)("div", { style: {
+    return (_jsx("div", { style: {
             display: 'flex',
             flexDirection: 'row',
             // overflowX: 'scroll',
             // overflowY: 'hidden',
             overflow: 'scroll',
             height: '100%',
-        }, children: columns.map((elem) => ((0, jsx_runtime_1.jsx)(Column, { column: elem, data: data, theme: theme }, elem.field))) }));
+        }, children: columns.map((elem) => (_jsx(Column, { column: elem, data: data, theme: theme }, elem.field))) }));
 }
 function Column({ column, data, theme }) {
-    return ((0, jsx_runtime_1.jsxs)("div", { style: {
+    return (_jsxs("div", { style: {
             paddingLeft: 20,
             paddingRight: 20,
             // width: 'max-content',
             display: 'inline-flex',
             flexDirection: 'column',
             whiteSpace: 'nowrap',
-        }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+        }, children: [_jsx("div", { style: {
                     height: 40,
                     minHeight: 40,
                     color: theme?.primaryTextColor,
@@ -77,10 +50,10 @@ function Column({ column, data, theme }) {
                     fontFamily: theme?.chartLabelFontFamily || theme?.fontFamily,
                     fontSize: theme?.fontSizeSmall || '0.875rem',
                     fontWeight: theme?.fontWeightMedium || '500',
-                }, children: column.label }), data.map((elem) => ((0, jsx_runtime_1.jsx)(Cell, { item: elem[column.field], theme: theme })))] }));
+                }, children: column.label }), data.map((elem) => (_jsx(Cell, { item: elem[column.field], theme: theme })))] }));
 }
 function Cell({ item, theme }) {
-    return ((0, jsx_runtime_1.jsx)("div", { style: {
+    return (_jsx("div", { style: {
             height: 40,
             minHeight: 40,
             whiteSpace: 'nowrap',
@@ -90,18 +63,18 @@ function Cell({ item, theme }) {
             color: theme?.chartLabelColor,
         }, children: item }));
 }
-const TableChart = react_1.default.forwardRef((props, ref) => {
+const TableChart = React.forwardRef((props, ref) => {
     const { data = [], yAxisFields, containerStyle, theme, ...other } = props;
     // const widths = getWidthsFromValues(
     //   data.map(item => item[yAxisFields[0].field])
     // );
     const NUM_TO_SHOW = Math.floor(containerStyle?.height / 40) - 1 || 6;
-    const memoizedData = (0, react_1.useMemo)(() => {
+    const memoizedData = useMemo(() => {
         return data.slice(0, NUM_TO_SHOW).map((item) => {
             const fieldsWithFormattedValues = {};
             for (const field of yAxisFields) {
                 const value = item[field.field];
-                fieldsWithFormattedValues[field.field] = (0, Chart_1.valueFormatter)({
+                fieldsWithFormattedValues[field.field] = valueFormatter({
                     value,
                     field: field.field,
                     fields: yAxisFields,
@@ -111,7 +84,7 @@ const TableChart = react_1.default.forwardRef((props, ref) => {
         });
     }, [data, NUM_TO_SHOW]);
     if (!memoizedData.length) {
-        return ((0, jsx_runtime_1.jsx)("div", { ref: ref, style: {
+        return (_jsx("div", { ref: ref, style: {
                 // width: '100%',
                 boxSizing: 'content-box',
                 height: '100%',
@@ -126,7 +99,7 @@ const TableChart = react_1.default.forwardRef((props, ref) => {
                 justifyContent: 'space-between',
             }, ...other }));
     }
-    return ((0, jsx_runtime_1.jsxs)("div", { style: {
+    return (_jsxs("div", { style: {
             boxSizing: 'content-box',
             height: containerStyle?.height || '100%',
             marginTop: 20,
@@ -135,7 +108,7 @@ const TableChart = react_1.default.forwardRef((props, ref) => {
             marginLeft: '1rem',
             flexDirection: 'column',
             // justifyContent: 'space-between',
-        }, children: [(0, jsx_runtime_1.jsx)(Columns, { columns: yAxisFields, data: memoizedData, theme: theme }), data.length > NUM_TO_SHOW && ((0, jsx_runtime_1.jsxs)("div", { style: {
+        }, children: [_jsx(Columns, { columns: yAxisFields, data: memoizedData, theme: theme }), data.length > NUM_TO_SHOW && (_jsxs("div", { style: {
                     color: theme?.chartLabelColor,
                     boxSizing: 'content-box',
                     fontFamily: theme?.chartLabelFontFamily || theme?.fontFamily,
@@ -314,5 +287,4 @@ const TableChart = react_1.default.forwardRef((props, ref) => {
     //   </div>
     // );
 });
-exports.default = TableChart;
-//# sourceMappingURL=TableChart.js.map
+export default TableChart;

package/dist/assets/ArrowDownHeadIcon.js

@@ -1,6 +1,3 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const ArrowDownHeadIcon = ({ ...props }) => ((0, jsx_runtime_1.jsxs)("svg", { ...props, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "24", height: "24", children: [(0, jsx_runtime_1.jsx)("path", { fill: "none", d: "M0 0h24v24H0z" }), (0, jsx_runtime_1.jsx)("path", { fill: "currentColor", d: "M12 13.172l4.95-4.95 1.414 1.414L12 16 5.636 9.636 7.05 8.222z" })] }));
-exports.default = ArrowDownHeadIcon;
-//# sourceMappingURL=ArrowDownHeadIcon.js.map
+import { jsx as _jsx } from "react/jsx-runtime";
+const ArrowDownHeadIcon = ({ ...props }) => (_jsx("svg", { ...props, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "24", height: "24", children: _jsx("path", { fill: "currentColor", d: "M12 13.172l4.95-4.95 1.414 1.414L12 16 5.636 9.636 7.05 8.222z" }) }));
+export default ArrowDownHeadIcon;

package/dist/assets/ArrowDownIcon.js

@@ -1,6 +1,3 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const ArrowDownIcon = ({ ...props }) => ((0, jsx_runtime_1.jsxs)("svg", { ...props, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "24", height: "24", children: [(0, jsx_runtime_1.jsx)("path", { fill: "none", d: "M0 0h24v24H0z" }), (0, jsx_runtime_1.jsx)("path", { fill: "currentColor", d: "M13 16.172l5.364-5.364 1.414 1.414L12 20l-7.778-7.778 1.414-1.414L11 16.172V4h2v12.172z" })] }));
-exports.default = ArrowDownIcon;
-//# sourceMappingURL=ArrowDownIcon.js.map
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const ArrowDownIcon = ({ ...props }) => (_jsxs("svg", { ...props, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "24", height: "24", children: [_jsx("path", { fill: "none", d: "M0 0h24v24H0z" }), _jsx("path", { fill: "currentColor", d: "M13 16.172l5.364-5.364 1.414 1.414L12 20l-7.778-7.778 1.414-1.414L11 16.172V4h2v12.172z" })] }));
+export default ArrowDownIcon;

package/dist/assets/ArrowDownRightIcon.js

@@ -1,6 +1,3 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const ArrowDownRightIcon = ({ ...props }) => ((0, jsx_runtime_1.jsxs)("svg", { ...props, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "24", height: "24", children: [(0, jsx_runtime_1.jsx)("path", { fill: "none", d: "M0 0h24v24H0z" }), (0, jsx_runtime_1.jsx)("path", { fill: "currentColor", d: "M14.59 16.004L5.982 7.397l1.414-1.414 8.607 8.606V7.004h2v11h-11v-2z" })] }));
-exports.default = ArrowDownRightIcon;
-//# sourceMappingURL=ArrowDownRightIcon.js.map
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const ArrowDownRightIcon = ({ ...props }) => (_jsxs("svg", { ...props, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "24", height: "24", children: [_jsx("path", { fill: "none", d: "M0 0h24v24H0z" }), _jsx("path", { fill: "currentColor", d: "M14.59 16.004L5.982 7.397l1.414-1.414 8.607 8.606V7.004h2v11h-11v-2z" })] }));
+export default ArrowDownRightIcon;

package/dist/assets/ArrowLeftHeadIcon.js

@@ -1,6 +1,3 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const ArrowLeftHeadIcon = ({ ...props }) => ((0, jsx_runtime_1.jsxs)("svg", { ...props, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", children: [(0, jsx_runtime_1.jsx)("path", { fill: "none", d: "M0 0h24v24H0z" }), (0, jsx_runtime_1.jsx)("path", { d: "M10.828 12l4.95 4.95-1.414 1.414L8 12l6.364-6.364 1.414 1.414z" })] }));
-exports.default = ArrowLeftHeadIcon;
-//# sourceMappingURL=ArrowLeftHeadIcon.js.map
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const ArrowLeftHeadIcon = ({ ...props }) => (_jsxs("svg", { ...props, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", children: [_jsx("path", { fill: "none", d: "M0 0h24v24H0z" }), _jsx("path", { d: "M10.828 12l4.95 4.95-1.414 1.414L8 12l6.364-6.364 1.414 1.414z" })] }));
+export default ArrowLeftHeadIcon;

package/dist/assets/ArrowRightHeadIcon.js

@@ -1,6 +1,3 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const ArrowRightHeadIcon = ({ ...props }) => ((0, jsx_runtime_1.jsxs)("svg", { ...props, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", children: [(0, jsx_runtime_1.jsx)("path", { fill: "none", d: "M0 0h24v24H0z" }), (0, jsx_runtime_1.jsx)("path", { d: "M13.172 12l-4.95-4.95 1.414-1.414L16 12l-6.364 6.364-1.414-1.414z" })] }));
-exports.default = ArrowRightHeadIcon;
-//# sourceMappingURL=ArrowRightHeadIcon.js.map
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const ArrowRightHeadIcon = ({ ...props }) => (_jsxs("svg", { ...props, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", children: [_jsx("path", { fill: "none", d: "M0 0h24v24H0z" }), _jsx("path", { d: "M13.172 12l-4.95-4.95 1.414-1.414L16 12l-6.364 6.364-1.414-1.414z" })] }));
+export default ArrowRightHeadIcon;

package/dist/assets/ArrowRightIcon.js

@@ -1,6 +1,3 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const ArrowRightIcon = ({ ...props }) => ((0, jsx_runtime_1.jsxs)("svg", { ...props, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "24", height: "24", children: [(0, jsx_runtime_1.jsx)("path", { fill: "none", d: "M0 0h24v24H0z" }), (0, jsx_runtime_1.jsx)("path", { fill: "currentColor", d: "M16.172 11l-5.364-5.364 1.414-1.414L20 12l-7.778 7.778-1.414-1.414L16.172 13H4v-2z" })] }));
-exports.default = ArrowRightIcon;
-//# sourceMappingURL=ArrowRightIcon.js.map
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const ArrowRightIcon = ({ ...props }) => (_jsxs("svg", { ...props, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "24", height: "24", children: [_jsx("path", { fill: "none", d: "M0 0h24v24H0z" }), _jsx("path", { fill: "currentColor", d: "M16.172 11l-5.364-5.364 1.414-1.414L20 12l-7.778 7.778-1.414-1.414L16.172 13H4v-2z" })] }));
+export default ArrowRightIcon;