@quillsql/react 1.7.1 → 1.7.2

package/lib/Table.js

@@ -1,43 +1,89 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
 };
-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 axios_1 = __importDefault(require("axios"));
-const Context_1 = require("./Context");
-const react_loading_skeleton_1 = __importDefault(require("react-loading-skeleton"));
-const Chart_1 = require("./Chart");
-const react_loader_spinner_1 = require("react-loader-spinner");
-const Table = ({ chartId, columns, rows, containerStyle, csvFilename, }) => {
-    const { dispatch, dashboard } = (0, react_1.useContext)(Context_1.DashboardContext);
-    const [client, _] = (0, react_1.useContext)(Context_1.ClientContext);
-    const [theme] = (0, react_1.useContext)(Context_1.ThemeContext);
-    const downloadCSV = (rows, name) => {
+import { useContext, useEffect, useMemo, useState } from 'react';
+import axios from 'axios';
+import { ClientContext, DashboardContext, ThemeContext, } from './Context';
+import Skeleton from 'react-loading-skeleton';
+import { valueFormatter } from './Chart';
+import { TailSpin } from 'react-loader-spinner';
+var Table = function (_a) {
+    var chartId = _a.chartId, columns = _a.columns, rows = _a.rows, containerStyle = _a.containerStyle, csvFilename = _a.csvFilename;
+    var _b = useContext(DashboardContext), dispatch = _b.dispatch, dashboard = _b.dashboard;
+    var _c = useContext(ClientContext), client = _c[0], _ = _c[1];
+    var theme = useContext(ThemeContext)[0];
+    var downloadCSV = function (rows, name) {
         // report.rows
         if (!rows.length) {
             return;
         }
-        const json = rows; // JSON data passed as a prop
-        const fields = Object.keys(json[0]); // Assumes all objects have same keys
-        const csvRows = [];
+        var json = rows; // JSON data passed as a prop
+        var fields = Object.keys(json[0]); // Assumes all objects have same keys
+        var csvRows = [];
         // Header row
         csvRows.push(fields.join(','));
-        // Data rows
-        for (const row of json) {
-            const values = fields.map(field => JSON.stringify(row[field] || ''));
+        var _loop_1 = function (row) {
+            var values = fields.map(function (field) { return JSON.stringify(row[field] || ''); });
             csvRows.push(values.join(','));
+        };
+        // Data rows
+        for (var _i = 0, json_1 = json; _i < json_1.length; _i++) {
+            var row = json_1[_i];
+            _loop_1(row);
         }
         // Create CSV string and create a 'blob' with it
-        const csvString = csvRows.join('\r\n');
-        const csvBlob = new Blob([csvString], { type: 'text/csv' });
+        var csvString = csvRows.join('\r\n');
+        var csvBlob = new Blob([csvString], { type: 'text/csv' });
         // Create a download link and click it
-        const downloadLink = document.createElement('a');
-        downloadLink.download = `${name}.csv`;
+        var downloadLink = document.createElement('a');
+        downloadLink.download = "".concat(name, ".csv");
         downloadLink.href = URL.createObjectURL(csvBlob);
         downloadLink.style.display = 'none';
         document.body.appendChild(downloadLink);
@@ -45,32 +91,37 @@ const Table = ({ chartId, columns, rows, containerStyle, csvFilename, }) => {
         document.body.removeChild(downloadLink);
     };
     if (!chartId && rows && columns) {
-        return ((0, jsx_runtime_1.jsx)(SpecialTable, { showDownloadCsvButton: true, csvFilename: csvFilename || 'table', columns: columns, rows: rows, height: containerStyle?.height || '100%', theme: theme }));
+        return (_jsx(SpecialTable, { showDownloadCsvButton: true, csvFilename: csvFilename || 'table', columns: columns, rows: rows, height: (containerStyle === null || containerStyle === void 0 ? void 0 : containerStyle.height) || '100%', theme: theme }));
     }
-    return ((0, jsx_runtime_1.jsx)(ChartUpdater, { dispatch: dispatch, dashboard: dashboard, chartId: chartId, containerStyle: containerStyle, client: client, theme: theme, downloadCSV: downloadCSV, csvFilename: csvFilename }));
+    return (_jsx(ChartUpdater, { dispatch: dispatch, dashboard: dashboard, chartId: chartId, containerStyle: containerStyle, client: client, theme: theme, downloadCSV: downloadCSV, csvFilename: csvFilename }));
 };
-function SpecialTable({ columns, rows, height, containerStyle, loading, LoadingComponent, theme, showDownloadCsvButton, csvFilename, DownloadCSVButtonComponent, AddToDashboardButtonComponent, }) {
-    const downloadCSV = () => {
+export function SpecialTable(_a) {
+    var columns = _a.columns, rows = _a.rows, height = _a.height, containerStyle = _a.containerStyle, loading = _a.loading, LoadingComponent = _a.LoadingComponent, theme = _a.theme, showDownloadCsvButton = _a.showDownloadCsvButton, csvFilename = _a.csvFilename, DownloadCSVButtonComponent = _a.DownloadCSVButtonComponent, AddToDashboardButtonComponent = _a.AddToDashboardButtonComponent;
+    var downloadCSV = function () {
         // report.rows
         if (!rows.length) {
             return;
         }
-        const json = rows; // JSON data passed as a prop
-        const fields = Object.keys(json[0]); // Assumes all objects have same keys
-        const csvRows = [];
+        var json = rows; // JSON data passed as a prop
+        var fields = Object.keys(json[0]); // Assumes all objects have same keys
+        var csvRows = [];
         // Header row
         csvRows.push(fields.join(','));
-        // Data rows
-        for (const row of json) {
-            const values = fields.map(field => JSON.stringify(row[field] || ''));
+        var _loop_2 = function (row) {
+            var values = fields.map(function (field) { return JSON.stringify(row[field] || ''); });
             csvRows.push(values.join(','));
+        };
+        // Data rows
+        for (var _i = 0, json_2 = json; _i < json_2.length; _i++) {
+            var row = json_2[_i];
+            _loop_2(row);
         }
         // Create CSV string and create a 'blob' with it
-        const csvString = csvRows.join('\r\n');
-        const csvBlob = new Blob([csvString], { type: 'text/csv' });
+        var csvString = csvRows.join('\r\n');
+        var csvBlob = new Blob([csvString], { type: 'text/csv' });
         // Create a download link and click it
-        const downloadLink = document.createElement('a');
-        downloadLink.download = `${csvFilename}.csv`;
+        var downloadLink = document.createElement('a');
+        downloadLink.download = "".concat(csvFilename, ".csv");
         downloadLink.href = URL.createObjectURL(csvBlob);
         downloadLink.style.display = 'none';
         document.body.appendChild(downloadLink);
@@ -78,19 +129,13 @@ function SpecialTable({ columns, rows, height, containerStyle, loading, LoadingC
         document.body.removeChild(downloadLink);
     };
     if (loading) {
-        return ((0, jsx_runtime_1.jsx)("div", { style: {
-                ...containerStyle,
+        return (_jsx("div", __assign({ style: __assign(__assign({}, containerStyle), { 
                 // paddingLeft: 25,
                 // paddingRight: 25,
                 // borderRadius: 8,
                 // marginTop: 25,
                 // overflow: 'visible',
-                width: '100%',
-                height: height,
-                // overflow: 'hidden',
-                // @ts-ignore
-                // boxShadow: 'rgba(231, 231, 231, 0.5) 0px 1px 2px 0px',
-            }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
+                width: '100%', height: height }) }, { children: _jsxs("div", __assign({ style: {
                     height: '100%',
                     overflow: 'scroll',
                     borderRadius: 6,
@@ -105,24 +150,18 @@ 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.jsx)(react_loader_spinner_1.TailSpin, { height: 36, width: 36, color: "#364153" }))] }) }));
+                } }, { children: [LoadingComponent && _jsx(LoadingComponent, {}), !LoadingComponent && (_jsx(TailSpin, { height: 36, width: 36, color: "#364153" }))] })) })));
     }
     if (!columns || !columns.length || !rows) {
         return null;
     }
     if (showDownloadCsvButton) {
-        return ((0, jsx_runtime_1.jsxs)("div", { style: {
-                ...containerStyle,
+        return (_jsxs("div", __assign({ style: __assign(__assign({}, containerStyle), { 
                 // paddingLeft: 25,
                 // paddingRight: 25,
                 // borderRadius: 8,
                 // marginTop: 25,
-                overflow: 'visible',
-                height: height,
-                // overflow: 'hidden',
-                // @ts-ignore
-                // boxShadow: 'rgba(231, 231, 231, 0.5) 0px 1px 2px 0px',
-            }, children: [(0, jsx_runtime_1.jsx)("div", { style: { height: 50, background: 'white' }, className: "thead", children: (0, jsx_runtime_1.jsxs)("div", { role: "row", className: "tr", style: {
+                overflow: 'visible', height: height }) }, { children: [_jsx("div", __assign({ style: { height: 50, background: 'white' }, className: "thead" }, { children: _jsxs("div", __assign({ role: "row", className: "tr", style: {
                             display: 'flex',
                             flex: '1 0 auto',
                             minWidth: '100px',
@@ -131,20 +170,20 @@ function SpecialTable({ columns, rows, height, containerStyle, loading, LoadingC
                             height: 50,
                             // position: 'absolute',
                             // bottom: 0,
-                        }, children: [DownloadCSVButtonComponent && ((0, jsx_runtime_1.jsx)(DownloadCSVButtonComponent, { onClick: downloadCSV })), !DownloadCSVButtonComponent && ((0, jsx_runtime_1.jsx)("div", { onClick: downloadCSV, style: {
+                        } }, { children: [DownloadCSVButtonComponent && (_jsx(DownloadCSVButtonComponent, { onClick: downloadCSV })), !DownloadCSVButtonComponent && (_jsx("div", __assign({ onClick: downloadCSV, style: {
                                     height: 40,
                                     minHeight: 40,
-                                    color: theme?.primaryTextColor,
+                                    color: theme === null || theme === void 0 ? void 0 : theme.primaryTextColor,
                                     boxSizing: 'content-box',
-                                    fontFamily: theme?.chartLabelFontFamily || theme?.fontFamily,
-                                    fontSize: theme?.fontSizeSmall || '14px',
-                                    fontWeight: theme?.fontWeightMedium || '500',
+                                    fontFamily: (theme === null || theme === void 0 ? void 0 : theme.chartLabelFontFamily) || (theme === null || theme === void 0 ? void 0 : theme.fontFamily),
+                                    fontSize: (theme === null || theme === void 0 ? void 0 : theme.fontSizeSmall) || '14px',
+                                    fontWeight: (theme === null || theme === void 0 ? void 0 : theme.fontWeightMedium) || '500',
                                     // marginTop: 8,
                                     marginLeft: 20,
                                     alignItems: 'center',
                                     display: 'flex',
                                     cursor: 'pointer',
-                                }, children: "Download CSV" }))] }) }), (0, jsx_runtime_1.jsx)("div", { style: {
+                                } }, { children: "Download CSV" })))] })) })), _jsx("div", __assign({ style: {
                         height: 'calc(100% - 50px)',
                         overflow: 'scroll',
                         borderRadius: 6,
@@ -155,12 +194,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' }, children: [(0, jsx_runtime_1.jsx)("div", { className: "thead", children: (0, jsx_runtime_1.jsx)("div", { role: "row", className: "tr", style: {
+                    } }, { children: _jsxs("div", __assign({ role: "table", className: "table", style: { minWidth: '0px' } }, { children: [_jsx("div", __assign({ className: "thead" }, { children: _jsx("div", __assign({ 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", { 
+                                    } }, { children: columns.map(function (column, index) { return (_jsxs("div", __assign({ 
                                         // @ts-ignore
                                         style: {
                                             boxSizing: 'border-box',
@@ -178,28 +217,28 @@ function SpecialTable({ columns, rows, height, containerStyle, loading, LoadingC
                                             margin: '0px',
                                             textOverflow: 'ellipsis',
                                             minHeight: '36px',
-                                        }, children: [(0, jsx_runtime_1.jsx)("div", { style: { width: 16 } }), (0, jsx_runtime_1.jsx)("div", { "aria-haspopup": "dialog", "aria-expanded": "false", "aria-controls": "mantine-r6-dropdown", 
+                                        } }, { children: [_jsx("div", { style: { width: 16 } }), _jsx("div", __assign({ "aria-haspopup": "dialog", "aria-expanded": "false", "aria-controls": "mantine-r6-dropdown", 
                                                 // @ts-ignore
                                                 style: {
                                                     // fontFamily:
                                                     //   'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"',
                                                     WebkitTapHighlightColor: 'transparent',
-                                                    fontFamily: theme?.fontFamily,
+                                                    fontFamily: theme === null || theme === void 0 ? void 0 : theme.fontFamily,
                                                     // color: 'rgb(55, 65, 81)',
-                                                    color: theme?.primaryTextColor,
+                                                    color: theme === null || theme === void 0 ? void 0 : theme.primaryTextColor,
                                                     textDecoration: 'none',
-                                                    fontSize: theme?.fontSizeSmall || '14px',
-                                                    fontWeight: theme?.fontWeightMedium || '500',
+                                                    fontSize: (theme === null || theme === void 0 ? void 0 : theme.fontSizeSmall) || '14px',
+                                                    fontWeight: (theme === null || theme === void 0 ? void 0 : theme.fontWeightMedium) || '500',
                                                     lineHeight: '20px',
                                                     textOverflow: 'ellipsis',
                                                     whiteSpace: 'nowrap',
                                                     overflow: 'hidden',
-                                                }, children: column.label })] }, 'sqlcol' + index))) }) }), (0, jsx_runtime_1.jsx)("div", { role: "rowgroup", className: "tbody", children: !rows.length ? ((0, jsx_runtime_1.jsx)("div", { role: "row", className: "tr", style: {
+                                                } }, { children: column.label }))] }), 'sqlcol' + index)); }) })) })), _jsx("div", __assign({ role: "rowgroup", className: "tbody" }, { children: !rows.length ? (_jsx("div", __assign({ role: "row", className: "tr", style: {
                                         display: 'flex',
                                         flex: '1 0 auto',
                                         minWidth: '100px',
                                         boxSizing: 'border-box',
-                                    }, children: (0, jsx_runtime_1.jsx)("div", { role: "cell", className: "td airplane-1h7muk6", style: {
+                                    } }, { children: _jsx("div", __assign({ role: "cell", className: "td airplane-1h7muk6", style: {
                                             boxSizing: 'border-box',
                                             flex: '150 0 auto',
                                             minWidth: '50px',
@@ -211,32 +250,32 @@ function SpecialTable({ columns, rows, height, containerStyle, loading, LoadingC
                                             borderRight: '1px solid rgb(229, 231, 235)',
                                             overflow: 'hidden',
                                             borderTop: '1px solid rgb(229, 231, 235)',
-                                        }, children: (0, jsx_runtime_1.jsx)("div", { style: {
+                                        } }, { children: _jsx("div", __assign({ style: {
                                                 lineHeight: '24px',
                                                 width: '100%',
                                                 display: 'flex',
                                                 cursor: 'default',
                                                 position: 'relative',
-                                            }, className: "airplane-gowkln", "data-testid": "static-cell", children: (0, jsx_runtime_1.jsx)("div", { className: "airplane-Text-root airplane-mzqt6k", "aria-haspopup": "dialog", "aria-expanded": "false", "aria-controls": "mantine-r8-dropdown", id: "mantine-r8-target", style: {
-                                                    fontFamily: theme?.fontFamily ||
+                                            }, className: "airplane-gowkln", "data-testid": "static-cell" }, { children: _jsx("div", __assign({ className: "airplane-Text-root airplane-mzqt6k", "aria-haspopup": "dialog", "aria-expanded": "false", "aria-controls": "mantine-r8-dropdown", id: "mantine-r8-target", style: {
+                                                    fontFamily: (theme === null || theme === void 0 ? void 0 : theme.fontFamily) ||
                                                         'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"',
                                                     WebkitTapHighlightColor: 'transparent',
                                                     // color: 'rgb(55, 65, 81)',
-                                                    color: theme?.secondaryTextColor || 'rgb(55, 65, 81)',
+                                                    color: (theme === null || theme === void 0 ? void 0 : theme.secondaryTextColor) || 'rgb(55, 65, 81)',
                                                     textDecoration: 'none',
                                                     fontWeight: 400,
-                                                    fontSize: theme?.fontSizeSmall || '14px',
+                                                    fontSize: (theme === null || theme === void 0 ? void 0 : theme.fontSizeSmall) || '14px',
                                                     lineHeight: '20px',
                                                     textOverflow: 'ellipsis',
                                                     whiteSpace: 'nowrap',
                                                     overflow: 'hidden',
                                                     padding: '8px 16px',
-                                                }, children: "No rows returned" }) }) }, 'sqlcell0') }, 'sqlrow0')) : (rows.map((row, rowIndex) => ((0, jsx_runtime_1.jsx)("div", { role: "row", className: "tr", style: {
+                                                } }, { children: "No rows returned" })) })) }), 'sqlcell0') }), 'sqlrow0')) : (rows.map(function (row, rowIndex) { return (_jsx("div", __assign({ 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", className: "td airplane-1h7muk6", style: {
+                                    } }, { children: columns.map(function (column, columnIndex) { return (_jsx("div", __assign({ role: "cell", className: "td airplane-1h7muk6", style: {
                                             boxSizing: 'border-box',
                                             flex: '150 0 auto',
                                             minWidth: '50px',
@@ -251,46 +290,40 @@ function SpecialTable({ columns, rows, height, containerStyle, loading, LoadingC
                                             borderBottom: rowIndex === rows.length - 1
                                                 ? '1px solid rgb(229, 231, 235)'
                                                 : undefined,
-                                        }, children: (0, jsx_runtime_1.jsx)("div", { style: {
+                                        } }, { children: _jsx("div", __assign({ style: {
                                                 lineHeight: '24px',
                                                 width: '100%',
                                                 display: 'flex',
                                                 cursor: 'default',
                                                 position: 'relative',
-                                            }, className: "airplane-gowkln", "data-testid": "static-cell", children: (0, jsx_runtime_1.jsx)("div", { className: "airplane-Text-root airplane-mzqt6k", "aria-haspopup": "dialog", "aria-expanded": "false", "aria-controls": "mantine-r8-dropdown", id: "mantine-r8-target", style: {
-                                                    fontFamily: theme?.fontFamily ||
+                                            }, className: "airplane-gowkln", "data-testid": "static-cell" }, { children: _jsx("div", __assign({ className: "airplane-Text-root airplane-mzqt6k", "aria-haspopup": "dialog", "aria-expanded": "false", "aria-controls": "mantine-r8-dropdown", id: "mantine-r8-target", style: {
+                                                    fontFamily: (theme === null || theme === void 0 ? void 0 : theme.fontFamily) ||
                                                         'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"',
                                                     WebkitTapHighlightColor: 'transparent',
                                                     // color: 'rgb(55, 65, 81)',
-                                                    color: theme?.secondaryTextColor || 'rgb(55, 65, 81)',
+                                                    color: (theme === null || theme === void 0 ? void 0 : theme.secondaryTextColor) || 'rgb(55, 65, 81)',
                                                     textDecoration: 'none',
                                                     fontWeight: 400,
-                                                    fontSize: theme?.fontSizeSmall || '14px',
+                                                    fontSize: (theme === null || theme === void 0 ? void 0 : theme.fontSizeSmall) || '14px',
                                                     lineHeight: '20px',
                                                     textOverflow: 'ellipsis',
                                                     whiteSpace: 'nowrap',
                                                     overflow: 'hidden',
                                                     padding: '8px 16px',
-                                                }, children: typeof row[column.field] === 'object'
+                                                } }, { children: typeof row[column.field] === 'object'
                                                     ? JSON.stringify(row[column.field]).length > 55
                                                         ? JSON.stringify(row[column.field]).substring(0, 52) + '...'
                                                         : JSON.stringify(row[column.field])
                                                     : row[column.field].length > 55
                                                         ? row[column.field].substring(0, 52) + '...'
-                                                        : row[column.field] }) }) }, 'sqlcell' + columnIndex))) }, 'sqlrow' + rowIndex)))) })] }) })] }));
+                                                        : row[column.field] })) })) }), 'sqlcell' + columnIndex)); }) }), 'sqlrow' + rowIndex)); })) }))] })) }))] })));
     }
-    return ((0, jsx_runtime_1.jsx)("div", { style: {
-            ...containerStyle,
+    return (_jsx("div", __assign({ style: __assign(__assign({}, containerStyle), { 
             // paddingLeft: 25,
             // paddingRight: 25,
             // borderRadius: 8,
             // marginTop: 25,
-            overflow: 'visible',
-            height: height,
-            // overflow: 'hidden',
-            // @ts-ignore
-            // boxShadow: 'rgba(231, 231, 231, 0.5) 0px 1px 2px 0px',
-        }, children: (0, jsx_runtime_1.jsx)("div", { style: {
+            overflow: 'visible', height: height }) }, { children: _jsx("div", __assign({ style: {
                 height: '100%',
                 overflow: 'scroll',
                 borderRadius: 6,
@@ -301,12 +334,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' }, children: [(0, jsx_runtime_1.jsx)("div", { className: "thead", children: (0, jsx_runtime_1.jsx)("div", { role: "row", className: "tr", style: {
+            } }, { children: _jsxs("div", __assign({ role: "table", className: "table", style: { minWidth: '0px' } }, { children: [_jsx("div", __assign({ className: "thead" }, { children: _jsx("div", __assign({ 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", { 
+                            } }, { children: columns.map(function (column, index) { return (_jsxs("div", __assign({ 
                                 // @ts-ignore
                                 style: {
                                     boxSizing: 'border-box',
@@ -324,28 +357,28 @@ function SpecialTable({ columns, rows, height, containerStyle, loading, LoadingC
                                     margin: '0px',
                                     textOverflow: 'ellipsis',
                                     minHeight: '36px',
-                                }, children: [(0, jsx_runtime_1.jsx)("div", { style: { width: 16 } }), (0, jsx_runtime_1.jsx)("div", { "aria-haspopup": "dialog", "aria-expanded": "false", "aria-controls": "mantine-r6-dropdown", 
+                                } }, { children: [_jsx("div", { style: { width: 16 } }), _jsx("div", __assign({ "aria-haspopup": "dialog", "aria-expanded": "false", "aria-controls": "mantine-r6-dropdown", 
                                         // @ts-ignore
                                         style: {
                                             // fontFamily:
                                             //   'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"',
                                             WebkitTapHighlightColor: 'transparent',
-                                            fontFamily: theme?.fontFamily,
+                                            fontFamily: theme === null || theme === void 0 ? void 0 : theme.fontFamily,
                                             // color: 'rgb(55, 65, 81)',
-                                            color: theme?.primaryTextColor,
+                                            color: theme === null || theme === void 0 ? void 0 : theme.primaryTextColor,
                                             textDecoration: 'none',
-                                            fontSize: theme?.fontSizeSmall || '14px',
-                                            fontWeight: theme?.fontWeightMedium || '500',
+                                            fontSize: (theme === null || theme === void 0 ? void 0 : theme.fontSizeSmall) || '14px',
+                                            fontWeight: (theme === null || theme === void 0 ? void 0 : theme.fontWeightMedium) || '500',
                                             lineHeight: '20px',
                                             textOverflow: 'ellipsis',
                                             whiteSpace: 'nowrap',
                                             overflow: 'hidden',
-                                        }, children: column.label })] }, 'sqlcol' + index))) }) }), (0, jsx_runtime_1.jsx)("div", { role: "rowgroup", className: "tbody", children: rows.map((row, rowIndex) => ((0, jsx_runtime_1.jsx)("div", { role: "row", className: "tr", style: {
+                                        } }, { children: column.label }))] }), 'sqlcol' + index)); }) })) })), _jsx("div", __assign({ role: "rowgroup", className: "tbody" }, { children: rows.map(function (row, rowIndex) { return (_jsx("div", __assign({ 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", className: "td airplane-1h7muk6", style: {
+                            } }, { children: columns.map(function (column, columnIndex) { return (_jsx("div", __assign({ role: "cell", className: "td airplane-1h7muk6", style: {
                                     boxSizing: 'border-box',
                                     flex: '150 0 auto',
                                     minWidth: '50px',
@@ -357,105 +390,118 @@ function SpecialTable({ columns, rows, height, containerStyle, loading, LoadingC
                                     borderRight: '1px solid rgb(229, 231, 235)',
                                     overflow: 'hidden',
                                     borderTop: '1px solid rgb(229, 231, 235)',
-                                }, children: (0, jsx_runtime_1.jsx)("div", { style: {
+                                } }, { children: _jsx("div", __assign({ style: {
                                         lineHeight: '24px',
                                         width: '100%',
                                         display: 'flex',
                                         cursor: 'default',
                                         position: 'relative',
-                                    }, className: "airplane-gowkln", "data-testid": "static-cell", children: (0, jsx_runtime_1.jsx)("div", { className: "airplane-Text-root airplane-mzqt6k", "aria-haspopup": "dialog", "aria-expanded": "false", "aria-controls": "mantine-r8-dropdown", id: "mantine-r8-target", style: {
-                                            fontFamily: theme?.fontFamily ||
+                                    }, className: "airplane-gowkln", "data-testid": "static-cell" }, { children: _jsx("div", __assign({ className: "airplane-Text-root airplane-mzqt6k", "aria-haspopup": "dialog", "aria-expanded": "false", "aria-controls": "mantine-r8-dropdown", id: "mantine-r8-target", style: {
+                                            fontFamily: (theme === null || theme === void 0 ? void 0 : theme.fontFamily) ||
                                                 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"',
                                             WebkitTapHighlightColor: 'transparent',
                                             // color: 'rgb(55, 65, 81)',
-                                            color: theme?.secondaryTextColor || 'rgb(55, 65, 81)',
+                                            color: (theme === null || theme === void 0 ? void 0 : theme.secondaryTextColor) || 'rgb(55, 65, 81)',
                                             textDecoration: 'none',
                                             fontWeight: 400,
-                                            fontSize: theme?.fontSizeSmall || '14px',
+                                            fontSize: (theme === null || theme === void 0 ? void 0 : theme.fontSizeSmall) || '14px',
                                             lineHeight: '20px',
                                             textOverflow: 'ellipsis',
                                             whiteSpace: 'nowrap',
                                             overflow: 'hidden',
                                             padding: '8px 16px',
-                                        }, children: typeof row[column.field] === 'object'
+                                        } }, { children: typeof row[column.field] === 'object'
                                             ? JSON.stringify(row[column.field]).length > 55
                                                 ? JSON.stringify(row[column.field]).substring(0, 52) + '...'
                                                 : JSON.stringify(row[column.field])
                                             : row[column.field].length > 55
                                                 ? row[column.field].substring(0, 52) + '...'
-                                                : row[column.field] }) }) }, 'sqlcell' + columnIndex))) }, 'sqlrow' + rowIndex))) })] }) }) }));
+                                                : row[column.field] })) })) }), 'sqlcell' + columnIndex)); }) }), 'sqlrow' + rowIndex)); }) }))] })) })) })));
 }
-exports.SpecialTable = SpecialTable;
-const ChartUpdater = ({ chartId, containerStyle, dashboard, dispatch, client, theme, downloadCSV, csvFilename, }) => {
-    const [chartConfig, setChartConfig] = (0, react_1.useState)(null);
-    const [loading, setLoading] = (0, react_1.useState)(true);
-    (0, react_1.useEffect)(() => {
-        let isSubscribed = true;
-        async function getChartOptions(id) {
-            if (isSubscribed) {
-                // @ts-ignore
-                if (dashboard && dashboard[id]) {
-                    const { columns, rows, name } = dashboard[id];
-                    setChartConfig({
-                        columns,
-                        rows,
-                        name,
-                    });
-                    setLoading(false);
-                    return;
-                }
-                const { publicKey, customerId, environment } = client;
-                setLoading(true);
-                try {
-                    const resp = await axios_1.default.get('https://quill-344421.uc.r.appspot.com/item', {
-                        params: {
-                            id: chartId,
-                            orgId: customerId,
-                            publicKey: publicKey,
-                        },
-                        headers: {
-                            environment: environment || undefined,
-                        },
-                    });
-                    const { columns, rows, name } = resp.data;
-                    setChartConfig({
-                        columns,
-                        rows,
-                        name,
-                    });
-                    setLoading(false);
-                    //   dispatch({ type: 'UPDATE_DASHBOARD_ITEM', id, data: resp.data });
-                }
-                catch (e) {
-                    console.log('Error fetching chart: ', e);
-                    setLoading(false);
-                }
-            }
+var ChartUpdater = function (_a) {
+    var chartId = _a.chartId, containerStyle = _a.containerStyle, dashboard = _a.dashboard, dispatch = _a.dispatch, client = _a.client, theme = _a.theme, downloadCSV = _a.downloadCSV, csvFilename = _a.csvFilename;
+    var _b = useState(null), chartConfig = _b[0], setChartConfig = _b[1];
+    var _c = useState(true), loading = _c[0], setLoading = _c[1];
+    useEffect(function () {
+        var isSubscribed = true;
+        function getChartOptions(id) {
+            return __awaiter(this, void 0, void 0, function () {
+                var _a, columns, rows, name_1, publicKey, customerId, environment, resp, _b, columns, rows, name_2, e_1;
+                return __generator(this, function (_c) {
+                    switch (_c.label) {
+                        case 0:
+                            if (!isSubscribed) return [3 /*break*/, 4];
+                            // @ts-ignore
+                            if (dashboard && dashboard[id]) {
+                                _a = dashboard[id], columns = _a.columns, rows = _a.rows, name_1 = _a.name;
+                                setChartConfig({
+                                    columns: columns,
+                                    rows: rows,
+                                    name: name_1,
+                                });
+                                setLoading(false);
+                                return [2 /*return*/];
+                            }
+                            publicKey = client.publicKey, customerId = client.customerId, environment = client.environment;
+                            setLoading(true);
+                            _c.label = 1;
+                        case 1:
+                            _c.trys.push([1, 3, , 4]);
+                            return [4 /*yield*/, axios.get('https://quill-344421.uc.r.appspot.com/item', {
+                                    params: {
+                                        id: chartId,
+                                        orgId: customerId,
+                                        publicKey: publicKey,
+                                    },
+                                    headers: {
+                                        environment: environment || undefined,
+                                    },
+                                })];
+                        case 2:
+                            resp = _c.sent();
+                            _b = resp.data, columns = _b.columns, rows = _b.rows, name_2 = _b.name;
+                            setChartConfig({
+                                columns: columns,
+                                rows: rows,
+                                name: name_2,
+                            });
+                            setLoading(false);
+                            return [3 /*break*/, 4];
+                        case 3:
+                            e_1 = _c.sent();
+                            console.log('Error fetching chart: ', e_1);
+                            setLoading(false);
+                            return [3 /*break*/, 4];
+                        case 4: return [2 /*return*/];
+                    }
+                });
+            });
         }
         if (chartId && !chartConfig) {
             getChartOptions(chartId);
         }
-        return () => {
+        return function () {
             isSubscribed = false;
         };
     }, [chartConfig]);
-    const NUM_TO_SHOW = containerStyle?.height
+    var NUM_TO_SHOW = (containerStyle === null || containerStyle === void 0 ? void 0 : containerStyle.height)
         ? Math.floor(containerStyle.height / 40) - 1
         : 6;
-    const memoizedData = (0, react_1.useMemo)(() => {
+    var memoizedData = useMemo(function () {
         if (!chartConfig || !chartConfig.rows || !chartConfig.rows.length) {
             return [];
         }
         // Deep copy of data
-        const copiedData = JSON.parse(JSON.stringify(chartConfig && chartConfig.rows && chartConfig.rows.length
+        var copiedData = JSON.parse(JSON.stringify(chartConfig && chartConfig.rows && chartConfig.rows.length
             ? chartConfig.rows
             : []));
-        return copiedData.map(item => {
-            const fieldsWithFormattedValues = {};
-            for (const field of chartConfig.columns) {
-                const value = item[field.field];
-                fieldsWithFormattedValues[field.field] = (0, Chart_1.valueFormatter)({
-                    value,
+        return copiedData.map(function (item) {
+            var fieldsWithFormattedValues = {};
+            for (var _i = 0, _a = chartConfig.columns; _i < _a.length; _i++) {
+                var field = _a[_i];
+                var value = item[field.field];
+                fieldsWithFormattedValues[field.field] = valueFormatter({
+                    value: value,
                     field: field.field,
                     fields: chartConfig.columns,
                 });
@@ -463,101 +509,98 @@ const ChartUpdater = ({ chartId, containerStyle, dashboard, dispatch, client, th
             return fieldsWithFormattedValues;
         });
     }, [chartConfig]);
-    const handleDownloadCSV = () => {
+    var handleDownloadCSV = function () {
         downloadCSV(memoizedData, chartConfig.name);
     };
     if (!chartConfig || loading) {
-        return ((0, jsx_runtime_1.jsx)("div", { 
+        return (_jsx("div", __assign({ 
             // className="flex flex-col flex-1 h-[100%]"
-            style: {
-                ...containerStyle,
+            style: __assign(__assign({}, containerStyle), { 
                 // marginLeft: 25,
                 // marginRight: 25,
-                boxSizing: 'content-box',
-                height: '100%',
-                display: 'flex',
-                flexDirection: 'column',
-                flex: 1,
-            }, children: (0, jsx_runtime_1.jsx)("div", { style: {
-                    height: containerStyle?.height || 300,
+                boxSizing: 'content-box', height: '100%', display: 'flex', flexDirection: 'column', flex: 1 }) }, { children: _jsx("div", __assign({ style: {
+                    height: (containerStyle === null || containerStyle === void 0 ? void 0 : containerStyle.height) || 300,
                     width: '100%',
                     boxSizing: 'content-box',
-                }, children: (0, jsx_runtime_1.jsx)(react_loading_skeleton_1.default, { count: 1, 
+                } }, { children: _jsx(Skeleton, { count: 1, 
                     // height={containerStyle?.height}
-                    height: containerStyle?.height && containerStyle?.marginTop
-                        ? containerStyle?.height + containerStyle?.marginTop
-                        : containerStyle?.height
-                            ? containerStyle?.height
+                    height: (containerStyle === null || containerStyle === void 0 ? void 0 : containerStyle.height) && (containerStyle === null || containerStyle === void 0 ? void 0 : containerStyle.marginTop)
+                        ? (containerStyle === null || containerStyle === void 0 ? void 0 : containerStyle.height) + (containerStyle === null || containerStyle === void 0 ? void 0 : containerStyle.marginTop)
+                        : (containerStyle === null || containerStyle === void 0 ? void 0 : containerStyle.height)
+                            ? containerStyle === null || containerStyle === void 0 ? void 0 : containerStyle.height
                             : 300, borderRadius: 8, 
                     // highlightColor="#F7F7F8"
                     highlightColor: "#FDFDFD", 
                     // baseColor="#F3F4F6"
-                    baseColor: "#F9F9FA", width: "100%" }) }) }));
+                    baseColor: "#F9F9FA", width: "100%" }) })) })));
     }
-    return ((0, jsx_runtime_1.jsx)(SpecialTable, { showDownloadCsvButton: true, csvFilename: csvFilename || chartConfig.name, columns: chartConfig.columns, rows: memoizedData, height: containerStyle?.height || '100%', theme: theme }));
+    return (_jsx(SpecialTable, { showDownloadCsvButton: true, csvFilename: csvFilename || chartConfig.name, columns: chartConfig.columns, rows: memoizedData, height: (containerStyle === null || containerStyle === void 0 ? void 0 : containerStyle.height) || '100%', theme: theme }));
 };
-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: {
+function Columns(_a) {
+    var columns = _a.columns, data = _a.data, theme = _a.theme, handleDownloadCSV = _a.handleDownloadCSV, numToShow = _a.numToShow;
+    return (_jsxs("div", __assign({ style: { display: 'flex', flexDirection: 'column', height: '100%' } }, { children: [_jsx("div", __assign({ 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(function (elem) { return (_jsx(Column, { column: elem, data: data, theme: theme }, elem.field)); }) })), _jsxs("div", __assign({ style: {
                     display: 'flex',
                     flexDirection: 'row',
                     alignItems: 'center',
                     justifyContent: 'space-between',
                     //   background: 'black',
-                }, children: [data.length > numToShow && ((0, jsx_runtime_1.jsxs)("div", { style: {
-                            color: theme?.chartLabelColor,
+                } }, { children: [data.length > numToShow && (_jsxs("div", __assign({ style: {
+                            color: theme === null || theme === void 0 ? void 0 : theme.chartLabelColor,
                             boxSizing: 'content-box',
-                            fontFamily: theme?.chartLabelFontFamily || theme?.fontFamily,
-                            fontSize: theme?.fontSizeSmall || '0.875rem',
+                            fontFamily: (theme === null || theme === void 0 ? void 0 : theme.chartLabelFontFamily) || (theme === null || theme === void 0 ? void 0 : theme.fontFamily),
+                            fontSize: (theme === null || theme === void 0 ? void 0 : 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", __assign({ onClick: handleDownloadCSV, style: {
                             height: 40,
                             minHeight: 40,
-                            color: theme?.primaryTextColor,
+                            color: theme === null || theme === void 0 ? void 0 : theme.primaryTextColor,
                             boxSizing: 'content-box',
-                            fontFamily: theme?.chartLabelFontFamily || theme?.fontFamily,
-                            fontSize: theme?.fontSizeSmall || '0.875rem',
-                            fontWeight: theme?.fontWeightMedium || '500',
+                            fontFamily: (theme === null || theme === void 0 ? void 0 : theme.chartLabelFontFamily) || (theme === null || theme === void 0 ? void 0 : theme.fontFamily),
+                            fontSize: (theme === null || theme === void 0 ? void 0 : theme.fontSizeSmall) || '0.875rem',
+                            fontWeight: (theme === null || theme === void 0 ? void 0 : theme.fontWeightMedium) || '500',
                             marginTop: 8,
                             marginLeft: 20,
                             cursor: 'pointer',
-                        }, children: "Download CSV" })] })] }));
+                        } }, { children: "Download CSV" }))] }))] })));
 }
-function Column({ column, data, theme }) {
-    return ((0, jsx_runtime_1.jsxs)("div", { style: {
+function Column(_a) {
+    var column = _a.column, data = _a.data, theme = _a.theme;
+    return (_jsxs("div", __assign({ 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", __assign({ style: {
                     height: 40,
                     minHeight: 40,
-                    color: theme?.primaryTextColor,
+                    color: theme === null || theme === void 0 ? void 0 : theme.primaryTextColor,
                     boxSizing: 'content-box',
-                    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 })))] }));
+                    fontFamily: (theme === null || theme === void 0 ? void 0 : theme.chartLabelFontFamily) || (theme === null || theme === void 0 ? void 0 : theme.fontFamily),
+                    fontSize: (theme === null || theme === void 0 ? void 0 : theme.fontSizeSmall) || '0.875rem',
+                    fontWeight: (theme === null || theme === void 0 ? void 0 : theme.fontWeightMedium) || '500',
+                } }, { children: column.label })), data.map(function (elem) { return (_jsx(Cell, { item: elem[column.field], theme: theme })); })] })));
 }
-function Cell({ item, theme }) {
-    return ((0, jsx_runtime_1.jsx)("div", { style: {
+function Cell(_a) {
+    var item = _a.item, theme = _a.theme;
+    return (_jsx("div", __assign({ style: {
             height: 40,
             minHeight: 40,
             whiteSpace: 'nowrap',
             width: '100%',
-            fontFamily: theme?.chartLabelFontFamily || theme?.fontFamily,
-            fontSize: theme?.fontSizeSmall || '0.875rem',
-            color: theme?.chartLabelColor,
-        }, children: item }));
+            fontFamily: (theme === null || theme === void 0 ? void 0 : theme.chartLabelFontFamily) || (theme === null || theme === void 0 ? void 0 : theme.fontFamily),
+            fontSize: (theme === null || theme === void 0 ? void 0 : theme.fontSizeSmall) || '0.875rem',
+            color: theme === null || theme === void 0 ? void 0 : theme.chartLabelColor,
+        } }, { children: item })));
 }
-exports.default = Table;
+export default Table;
 //# sourceMappingURL=Table.js.map