@quillsql/react 1.7.2 → 1.7.3

package/lib/Table.js

@@ -1,89 +1,43 @@
-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 };
-    }
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SpecialTable = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
 /* eslint-disable @typescript-eslint/ban-ts-comment */
 // @ts-nocheck
-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) {
+const react_1 = require("react");
+const axios_1 = __importDefault(require("axios"));
+const Context_1 = require("./Context");
+// import Skeleton from '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) => {
         // report.rows
         if (!rows.length) {
             return;
         }
-        var json = rows; // JSON data passed as a prop
-        var fields = Object.keys(json[0]); // Assumes all objects have same keys
-        var csvRows = [];
+        const json = rows; // JSON data passed as a prop
+        const fields = Object.keys(json[0]); // Assumes all objects have same keys
+        const csvRows = [];
         // Header row
         csvRows.push(fields.join(','));
-        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);
+        for (const row of json) {
+            const values = fields.map(field => JSON.stringify(row[field] || ''));
+            csvRows.push(values.join(','));
         }
         // Create CSV string and create a 'blob' with it
-        var csvString = csvRows.join('\r\n');
-        var csvBlob = new Blob([csvString], { type: 'text/csv' });
+        const csvString = csvRows.join('\r\n');
+        const csvBlob = new Blob([csvString], { type: 'text/csv' });
         // Create a download link and click it
-        var downloadLink = document.createElement('a');
-        downloadLink.download = "".concat(name, ".csv");
+        const downloadLink = document.createElement('a');
+        downloadLink.download = `${name}.csv`;
         downloadLink.href = URL.createObjectURL(csvBlob);
         downloadLink.style.display = 'none';
         document.body.appendChild(downloadLink);
@@ -91,37 +45,32 @@ var Table = function (_a) {
         document.body.removeChild(downloadLink);
     };
     if (!chartId && rows && columns) {
-        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)(SpecialTable, { showDownloadCsvButton: true, csvFilename: csvFilename || 'table', columns: columns, rows: rows, height: containerStyle?.height || '100%', theme: theme }));
     }
-    return (_jsx(ChartUpdater, { dispatch: dispatch, dashboard: dashboard, chartId: chartId, containerStyle: containerStyle, client: client, theme: theme, downloadCSV: downloadCSV, csvFilename: csvFilename }));
+    return ((0, jsx_runtime_1.jsx)(ChartUpdater, { dispatch: dispatch, dashboard: dashboard, chartId: chartId, containerStyle: containerStyle, client: client, theme: theme, downloadCSV: downloadCSV, csvFilename: csvFilename }));
 };
-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 () {
+function SpecialTable({ columns, rows, height, containerStyle, loading, LoadingComponent, theme, showDownloadCsvButton, csvFilename, DownloadCSVButtonComponent, AddToDashboardButtonComponent, }) {
+    const downloadCSV = () => {
         // report.rows
         if (!rows.length) {
             return;
         }
-        var json = rows; // JSON data passed as a prop
-        var fields = Object.keys(json[0]); // Assumes all objects have same keys
-        var csvRows = [];
+        const json = rows; // JSON data passed as a prop
+        const fields = Object.keys(json[0]); // Assumes all objects have same keys
+        const csvRows = [];
         // Header row
         csvRows.push(fields.join(','));
-        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);
+        for (const row of json) {
+            const values = fields.map(field => JSON.stringify(row[field] || ''));
+            csvRows.push(values.join(','));
         }
         // Create CSV string and create a 'blob' with it
-        var csvString = csvRows.join('\r\n');
-        var csvBlob = new Blob([csvString], { type: 'text/csv' });
+        const csvString = csvRows.join('\r\n');
+        const csvBlob = new Blob([csvString], { type: 'text/csv' });
         // Create a download link and click it
-        var downloadLink = document.createElement('a');
-        downloadLink.download = "".concat(csvFilename, ".csv");
+        const downloadLink = document.createElement('a');
+        downloadLink.download = `${csvFilename}.csv`;
         downloadLink.href = URL.createObjectURL(csvBlob);
         downloadLink.style.display = 'none';
         document.body.appendChild(downloadLink);
@@ -129,13 +78,19 @@ export function SpecialTable(_a) {
         document.body.removeChild(downloadLink);
     };
     if (loading) {
-        return (_jsx("div", __assign({ style: __assign(__assign({}, containerStyle), { 
+        return ((0, jsx_runtime_1.jsx)("div", { style: {
+                ...containerStyle,
                 // paddingLeft: 25,
                 // paddingRight: 25,
                 // borderRadius: 8,
                 // marginTop: 25,
                 // overflow: 'visible',
-                width: '100%', height: height }) }, { children: _jsxs("div", __assign({ style: {
+                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: {
                     height: '100%',
                     overflow: 'scroll',
                     borderRadius: 6,
@@ -150,18 +105,24 @@ export function SpecialTable(_a) {
                     justifyContent: 'center',
                     alignItems: 'center',
                     // maxHeight: 600,
-                } }, { children: [LoadingComponent && _jsx(LoadingComponent, {}), !LoadingComponent && (_jsx(TailSpin, { height: 36, width: 36, color: "#364153" }))] })) })));
+                }, 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" }))] }) }));
     }
     if (!columns || !columns.length || !rows) {
         return null;
     }
     if (showDownloadCsvButton) {
-        return (_jsxs("div", __assign({ style: __assign(__assign({}, containerStyle), { 
+        return ((0, jsx_runtime_1.jsxs)("div", { style: {
+                ...containerStyle,
                 // paddingLeft: 25,
                 // paddingRight: 25,
                 // borderRadius: 8,
                 // marginTop: 25,
-                overflow: 'visible', height: height }) }, { children: [_jsx("div", __assign({ style: { height: 50, background: 'white' }, className: "thead" }, { children: _jsxs("div", __assign({ role: "row", className: "tr", style: {
+                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: {
                             display: 'flex',
                             flex: '1 0 auto',
                             minWidth: '100px',
@@ -170,20 +131,20 @@ export function SpecialTable(_a) {
                             height: 50,
                             // position: 'absolute',
                             // bottom: 0,
-                        } }, { children: [DownloadCSVButtonComponent && (_jsx(DownloadCSVButtonComponent, { onClick: downloadCSV })), !DownloadCSVButtonComponent && (_jsx("div", __assign({ onClick: downloadCSV, style: {
+                        }, children: [DownloadCSVButtonComponent && ((0, jsx_runtime_1.jsx)(DownloadCSVButtonComponent, { onClick: downloadCSV })), !DownloadCSVButtonComponent && ((0, jsx_runtime_1.jsx)("div", { onClick: downloadCSV, style: {
                                     height: 40,
                                     minHeight: 40,
-                                    color: theme === null || theme === void 0 ? void 0 : theme.primaryTextColor,
+                                    color: theme?.primaryTextColor,
                                     boxSizing: 'content-box',
-                                    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',
+                                    fontFamily: theme?.chartLabelFontFamily || theme?.fontFamily,
+                                    fontSize: theme?.fontSizeSmall || '14px',
+                                    fontWeight: theme?.fontWeightMedium || '500',
                                     // marginTop: 8,
                                     marginLeft: 20,
                                     alignItems: 'center',
                                     display: 'flex',
                                     cursor: 'pointer',
-                                } }, { children: "Download CSV" })))] })) })), _jsx("div", __assign({ style: {
+                                }, children: "Download CSV" }))] }) }), (0, jsx_runtime_1.jsx)("div", { style: {
                         height: 'calc(100% - 50px)',
                         overflow: 'scroll',
                         borderRadius: 6,
@@ -194,12 +155,12 @@ export function SpecialTable(_a) {
                         boxSizing: 'border-box',
                         outline: 'none',
                         // maxHeight: 600,
-                    } }, { 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: {
+                    }, 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: {
                                         display: 'flex',
                                         flex: '1 0 auto',
                                         minWidth: '100px',
                                         boxSizing: 'border-box',
-                                    } }, { children: columns.map(function (column, index) { return (_jsxs("div", __assign({ 
+                                    }, children: columns.map((column, index) => ((0, jsx_runtime_1.jsxs)("div", { 
                                         // @ts-ignore
                                         style: {
                                             boxSizing: 'border-box',
@@ -217,28 +178,28 @@ export function SpecialTable(_a) {
                                             margin: '0px',
                                             textOverflow: 'ellipsis',
                                             minHeight: '36px',
-                                        } }, { children: [_jsx("div", { style: { width: 16 } }), _jsx("div", __assign({ "aria-haspopup": "dialog", "aria-expanded": "false", "aria-controls": "mantine-r6-dropdown", 
+                                        }, 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", 
                                                 // @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 === null || theme === void 0 ? void 0 : theme.fontFamily,
+                                                    fontFamily: theme?.fontFamily,
                                                     // color: 'rgb(55, 65, 81)',
-                                                    color: theme === null || theme === void 0 ? void 0 : theme.primaryTextColor,
+                                                    color: theme?.primaryTextColor,
                                                     textDecoration: 'none',
-                                                    fontSize: (theme === null || theme === void 0 ? void 0 : theme.fontSizeSmall) || '14px',
-                                                    fontWeight: (theme === null || theme === void 0 ? void 0 : theme.fontWeightMedium) || '500',
+                                                    fontSize: theme?.fontSizeSmall || '14px',
+                                                    fontWeight: theme?.fontWeightMedium || '500',
                                                     lineHeight: '20px',
                                                     textOverflow: 'ellipsis',
                                                     whiteSpace: 'nowrap',
                                                     overflow: 'hidden',
-                                                } }, { children: column.label }))] }), 'sqlcol' + index)); }) })) })), _jsx("div", __assign({ role: "rowgroup", className: "tbody" }, { children: !rows.length ? (_jsx("div", __assign({ role: "row", className: "tr", style: {
+                                                }, 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: {
                                         display: 'flex',
                                         flex: '1 0 auto',
                                         minWidth: '100px',
                                         boxSizing: 'border-box',
-                                    } }, { children: _jsx("div", __assign({ role: "cell", className: "td airplane-1h7muk6", style: {
+                                    }, children: (0, jsx_runtime_1.jsx)("div", { role: "cell", className: "td airplane-1h7muk6", style: {
                                             boxSizing: 'border-box',
                                             flex: '150 0 auto',
                                             minWidth: '50px',
@@ -250,32 +211,32 @@ export function SpecialTable(_a) {
                                             borderRight: '1px solid rgb(229, 231, 235)',
                                             overflow: 'hidden',
                                             borderTop: '1px solid rgb(229, 231, 235)',
-                                        } }, { children: _jsx("div", __assign({ style: {
+                                        }, children: (0, jsx_runtime_1.jsx)("div", { style: {
                                                 lineHeight: '24px',
                                                 width: '100%',
                                                 display: 'flex',
                                                 cursor: 'default',
                                                 position: 'relative',
-                                            }, 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) ||
+                                            }, 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 ||
                                                         '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 === null || theme === void 0 ? void 0 : theme.secondaryTextColor) || 'rgb(55, 65, 81)',
+                                                    color: theme?.secondaryTextColor || 'rgb(55, 65, 81)',
                                                     textDecoration: 'none',
                                                     fontWeight: 400,
-                                                    fontSize: (theme === null || theme === void 0 ? void 0 : theme.fontSizeSmall) || '14px',
+                                                    fontSize: theme?.fontSizeSmall || '14px',
                                                     lineHeight: '20px',
                                                     textOverflow: 'ellipsis',
                                                     whiteSpace: 'nowrap',
                                                     overflow: 'hidden',
                                                     padding: '8px 16px',
-                                                } }, { children: "No rows returned" })) })) }), 'sqlcell0') }), 'sqlrow0')) : (rows.map(function (row, rowIndex) { return (_jsx("div", __assign({ role: "row", className: "tr", style: {
+                                                }, children: "No rows returned" }) }) }, 'sqlcell0') }, 'sqlrow0')) : (rows.map((row, rowIndex) => ((0, jsx_runtime_1.jsx)("div", { role: "row", className: "tr", style: {
                                         display: 'flex',
                                         flex: '1 0 auto',
                                         minWidth: '100px',
                                         boxSizing: 'border-box',
-                                    } }, { children: columns.map(function (column, columnIndex) { return (_jsx("div", __assign({ role: "cell", className: "td airplane-1h7muk6", style: {
+                                    }, children: columns.map((column, columnIndex) => ((0, jsx_runtime_1.jsx)("div", { role: "cell", className: "td airplane-1h7muk6", style: {
                                             boxSizing: 'border-box',
                                             flex: '150 0 auto',
                                             minWidth: '50px',
@@ -290,40 +251,46 @@ export function SpecialTable(_a) {
                                             borderBottom: rowIndex === rows.length - 1
                                                 ? '1px solid rgb(229, 231, 235)'
                                                 : undefined,
-                                        } }, { children: _jsx("div", __assign({ style: {
+                                        }, children: (0, jsx_runtime_1.jsx)("div", { style: {
                                                 lineHeight: '24px',
                                                 width: '100%',
                                                 display: 'flex',
                                                 cursor: 'default',
                                                 position: 'relative',
-                                            }, 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) ||
+                                            }, 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 ||
                                                         '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 === null || theme === void 0 ? void 0 : theme.secondaryTextColor) || 'rgb(55, 65, 81)',
+                                                    color: theme?.secondaryTextColor || 'rgb(55, 65, 81)',
                                                     textDecoration: 'none',
                                                     fontWeight: 400,
-                                                    fontSize: (theme === null || theme === void 0 ? void 0 : theme.fontSizeSmall) || '14px',
+                                                    fontSize: 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 (_jsx("div", __assign({ style: __assign(__assign({}, containerStyle), { 
+    return ((0, jsx_runtime_1.jsx)("div", { style: {
+            ...containerStyle,
             // paddingLeft: 25,
             // paddingRight: 25,
             // borderRadius: 8,
             // marginTop: 25,
-            overflow: 'visible', height: height }) }, { children: _jsx("div", __assign({ style: {
+            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: '100%',
                 overflow: 'scroll',
                 borderRadius: 6,
@@ -334,12 +301,12 @@ export function SpecialTable(_a) {
                 boxSizing: 'border-box',
                 outline: 'none',
                 // maxHeight: 600,
-            } }, { 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: {
+            }, 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: {
                                 display: 'flex',
                                 flex: '1 0 auto',
                                 minWidth: '100px',
                                 boxSizing: 'border-box',
-                            } }, { children: columns.map(function (column, index) { return (_jsxs("div", __assign({ 
+                            }, children: columns.map((column, index) => ((0, jsx_runtime_1.jsxs)("div", { 
                                 // @ts-ignore
                                 style: {
                                     boxSizing: 'border-box',
@@ -357,28 +324,28 @@ export function SpecialTable(_a) {
                                     margin: '0px',
                                     textOverflow: 'ellipsis',
                                     minHeight: '36px',
-                                } }, { children: [_jsx("div", { style: { width: 16 } }), _jsx("div", __assign({ "aria-haspopup": "dialog", "aria-expanded": "false", "aria-controls": "mantine-r6-dropdown", 
+                                }, 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", 
                                         // @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 === null || theme === void 0 ? void 0 : theme.fontFamily,
+                                            fontFamily: theme?.fontFamily,
                                             // color: 'rgb(55, 65, 81)',
-                                            color: theme === null || theme === void 0 ? void 0 : theme.primaryTextColor,
+                                            color: theme?.primaryTextColor,
                                             textDecoration: 'none',
-                                            fontSize: (theme === null || theme === void 0 ? void 0 : theme.fontSizeSmall) || '14px',
-                                            fontWeight: (theme === null || theme === void 0 ? void 0 : theme.fontWeightMedium) || '500',
+                                            fontSize: theme?.fontSizeSmall || '14px',
+                                            fontWeight: theme?.fontWeightMedium || '500',
                                             lineHeight: '20px',
                                             textOverflow: 'ellipsis',
                                             whiteSpace: 'nowrap',
                                             overflow: 'hidden',
-                                        } }, { 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: {
+                                        }, 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: {
                                 display: 'flex',
                                 flex: '1 0 auto',
                                 minWidth: '100px',
                                 boxSizing: 'border-box',
-                            } }, { children: columns.map(function (column, columnIndex) { return (_jsx("div", __assign({ role: "cell", className: "td airplane-1h7muk6", style: {
+                            }, children: columns.map((column, columnIndex) => ((0, jsx_runtime_1.jsx)("div", { role: "cell", className: "td airplane-1h7muk6", style: {
                                     boxSizing: 'border-box',
                                     flex: '150 0 auto',
                                     minWidth: '50px',
@@ -390,118 +357,105 @@ export function SpecialTable(_a) {
                                     borderRight: '1px solid rgb(229, 231, 235)',
                                     overflow: 'hidden',
                                     borderTop: '1px solid rgb(229, 231, 235)',
-                                } }, { children: _jsx("div", __assign({ style: {
+                                }, children: (0, jsx_runtime_1.jsx)("div", { style: {
                                         lineHeight: '24px',
                                         width: '100%',
                                         display: 'flex',
                                         cursor: 'default',
                                         position: 'relative',
-                                    }, 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) ||
+                                    }, 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 ||
                                                 '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 === null || theme === void 0 ? void 0 : theme.secondaryTextColor) || 'rgb(55, 65, 81)',
+                                            color: theme?.secondaryTextColor || 'rgb(55, 65, 81)',
                                             textDecoration: 'none',
                                             fontWeight: 400,
-                                            fontSize: (theme === null || theme === void 0 ? void 0 : theme.fontSizeSmall) || '14px',
+                                            fontSize: 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))) })] }) }) }));
 }
-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*/];
-                    }
-                });
-            });
+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);
+                }
+            }
         }
         if (chartId && !chartConfig) {
             getChartOptions(chartId);
         }
-        return function () {
+        return () => {
             isSubscribed = false;
         };
     }, [chartConfig]);
-    var NUM_TO_SHOW = (containerStyle === null || containerStyle === void 0 ? void 0 : containerStyle.height)
+    const NUM_TO_SHOW = containerStyle?.height
         ? Math.floor(containerStyle.height / 40) - 1
         : 6;
-    var memoizedData = useMemo(function () {
+    const memoizedData = (0, react_1.useMemo)(() => {
         if (!chartConfig || !chartConfig.rows || !chartConfig.rows.length) {
             return [];
         }
         // Deep copy of data
-        var copiedData = JSON.parse(JSON.stringify(chartConfig && chartConfig.rows && chartConfig.rows.length
+        const copiedData = JSON.parse(JSON.stringify(chartConfig && chartConfig.rows && chartConfig.rows.length
             ? chartConfig.rows
             : []));
-        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,
+        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,
                     field: field.field,
                     fields: chartConfig.columns,
                 });
@@ -509,98 +463,91 @@ var ChartUpdater = function (_a) {
             return fieldsWithFormattedValues;
         });
     }, [chartConfig]);
-    var handleDownloadCSV = function () {
+    const handleDownloadCSV = () => {
         downloadCSV(memoizedData, chartConfig.name);
     };
     if (!chartConfig || loading) {
-        return (_jsx("div", __assign({ 
+        return ((0, jsx_runtime_1.jsx)("div", { 
             // className="flex flex-col flex-1 h-[100%]"
-            style: __assign(__assign({}, containerStyle), { 
+            style: {
+                ...containerStyle,
                 // marginLeft: 25,
                 // marginRight: 25,
-                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,
+                boxSizing: 'content-box',
+                height: '100%',
+                display: 'flex',
+                flexDirection: 'column',
+                flex: 1,
+            }, children: (0, jsx_runtime_1.jsx)("div", { style: {
+                    height: containerStyle?.height || 300,
                     width: '100%',
                     boxSizing: 'content-box',
-                } }, { children: _jsx(Skeleton, { count: 1, 
-                    // 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%" }) })) })));
+                }, children: (0, jsx_runtime_1.jsxs)("svg", { width: "100%", height: "100%", xmlns: "http://www.w3.org/2000/svg", "xmlns:xlink": "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%", "stop-color": "rgba(255,255,255,0)" }), (0, jsx_runtime_1.jsx)("stop", { offset: "50%", "stop-color": "#FEFEFE" }), (0, jsx_runtime_1.jsx)("stop", { offset: "100%", "stop-color": "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" }) })] }) }) }));
     }
-    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 }));
+    return ((0, jsx_runtime_1.jsx)(SpecialTable, { showDownloadCsvButton: true, csvFilename: csvFilename || chartConfig.name, columns: chartConfig.columns, rows: memoizedData, height: containerStyle?.height || '100%', theme: theme }));
 };
-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: {
+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: {
                     display: 'flex',
                     flexDirection: 'row',
                     // overflowX: 'scroll',
                     // overflowY: 'hidden',
                     overflow: 'scroll',
                     height: '100%',
-                } }, { children: columns.map(function (elem) { return (_jsx(Column, { column: elem, data: data, theme: theme }, elem.field)); }) })), _jsxs("div", __assign({ style: {
+                }, 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: {
                     display: 'flex',
                     flexDirection: 'row',
                     alignItems: 'center',
                     justifyContent: 'space-between',
                     //   background: 'black',
-                } }, { children: [data.length > numToShow && (_jsxs("div", __assign({ style: {
-                            color: theme === null || theme === void 0 ? void 0 : theme.chartLabelColor,
+                }, children: [data.length > numToShow && ((0, jsx_runtime_1.jsxs)("div", { style: {
+                            color: theme?.chartLabelColor,
                             boxSizing: 'content-box',
-                            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',
+                            fontFamily: theme?.chartLabelFontFamily || theme?.fontFamily,
+                            fontSize: theme?.fontSizeSmall || '0.875rem',
                             marginLeft: 12,
                             marginTop: 8,
-                        } }, { children: ["...", data.length - numToShow, " more"] }))), _jsx("div", __assign({ onClick: handleDownloadCSV, style: {
+                        }, children: ["...", data.length - numToShow, " more"] })), (0, jsx_runtime_1.jsx)("div", { onClick: handleDownloadCSV, style: {
                             height: 40,
                             minHeight: 40,
-                            color: theme === null || theme === void 0 ? void 0 : theme.primaryTextColor,
+                            color: theme?.primaryTextColor,
                             boxSizing: 'content-box',
-                            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',
+                            fontFamily: theme?.chartLabelFontFamily || theme?.fontFamily,
+                            fontSize: theme?.fontSizeSmall || '0.875rem',
+                            fontWeight: theme?.fontWeightMedium || '500',
                             marginTop: 8,
                             marginLeft: 20,
                             cursor: 'pointer',
-                        } }, { children: "Download CSV" }))] }))] })));
+                        }, children: "Download CSV" })] })] }));
 }
-function Column(_a) {
-    var column = _a.column, data = _a.data, theme = _a.theme;
-    return (_jsxs("div", __assign({ style: {
+function Column({ column, data, theme }) {
+    return ((0, jsx_runtime_1.jsxs)("div", { style: {
             paddingLeft: 20,
             paddingRight: 20,
             // width: 'max-content',
             display: 'inline-flex',
             flexDirection: 'column',
             whiteSpace: 'nowrap',
-        } }, { children: [_jsx("div", __assign({ style: {
+        }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
                     height: 40,
                     minHeight: 40,
-                    color: theme === null || theme === void 0 ? void 0 : theme.primaryTextColor,
+                    color: theme?.primaryTextColor,
                     boxSizing: 'content-box',
-                    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 })); })] })));
+                    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 })))] }));
 }
-function Cell(_a) {
-    var item = _a.item, theme = _a.theme;
-    return (_jsx("div", __assign({ style: {
+function Cell({ item, theme }) {
+    return ((0, jsx_runtime_1.jsx)("div", { style: {
             height: 40,
             minHeight: 40,
             whiteSpace: 'nowrap',
             width: '100%',
-            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 })));
+            fontFamily: theme?.chartLabelFontFamily || theme?.fontFamily,
+            fontSize: theme?.fontSizeSmall || '0.875rem',
+            color: theme?.chartLabelColor,
+        }, children: item }));
 }
-export default Table;
+exports.default = Table;
 //# sourceMappingURL=Table.js.map