@quillsql/react 2.8.4 → 2.8.6

package/dist/SQLEditor.js

@@ -1,20 +1,14 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.convertPostgresColumn = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 // @ts-nocheck
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-const react_1 = require("react");
-const react_2 = __importDefault(require("@monaco-editor/react"));
+import { useState, useContext, useEffect } from 'react';
+import MonacoEditor from '@monaco-editor/react';
 // import './nightOwlLight.css';
-const Context_1 = require("./Context");
-const Table_1 = require("./Table");
-const dataFetcher_1 = require("./utils/dataFetcher");
-const ChartBuilder_1 = __importDefault(require("./ChartBuilder"));
-function convertPostgresColumn(column) {
+import { ClientContext, SchemaContext, ThemeContext } from './Context';
+import { SpecialTable } from './Table';
+import { getData, getDataFromCloud } from './utils/dataFetcher';
+import ChartBuilder from './ChartBuilder';
+export function convertPostgresColumn(column) {
     let format;
     let fieldType;
     switch (column.dataTypeID) {
@@ -80,7 +74,6 @@ function convertPostgresColumn(column) {
         fieldType,
     };
 }
-exports.convertPostgresColumn = convertPostgresColumn;
 function defineEditorTheme(monaco, theme) {
     monaco.editor.defineTheme('onedark', {
         base: theme.darkMode ? 'vs-dark' : 'vs',
@@ -106,7 +99,7 @@ function setEditorTheme(editor, monaco) {
         console.log('ERROR: ', e);
     }
 }
-const QuillButton = ({ onClick, label, theme, secondary, }) => ((0, jsx_runtime_1.jsx)("button", { style: {
+const QuillButton = ({ onClick, label, theme, secondary, }) => (_jsx("button", { style: {
         borderRadius: '6px',
         backgroundColor: secondary
             ? theme?.secondaryButtonColor || '#F5F5F5'
@@ -126,7 +119,7 @@ const QuillButton = ({ onClick, label, theme, secondary, }) => ((0, jsx_runtime_
         height: 38,
     }, onClick: onClick, children: label }));
 const QuillTextInput = ({ onChange, value, id, placeholder, theme, }) => {
-    return ((0, jsx_runtime_1.jsx)("input", { style: {
+    return (_jsx("input", { style: {
             display: 'flex',
             flexDirection: 'row',
             alignItems: 'center',
@@ -144,26 +137,26 @@ const QuillTextInput = ({ onChange, value, id, placeholder, theme, }) => {
             borderRadius: '6px',
         }, id: id, onChange: onChange, value: value, placeholder: placeholder }));
 };
-function QueryEditor({ containerStyle = { height: '100vh' }, ButtonComponent, SecondaryButtonComponent, TextInputComponent, TableComponent, AddToDashboardButton, newQueryEnabled = false, LoadingComponent, defaultQuery, onChangeQuery, onChangeData, onChangeColumns, onChangeFields, chartBuilderEnabled = false, showTableFormatOptions = false, showDateFieldOptions = false, showAccessControlOptions = false, destinationDashboard, chartBuilderTitle, chartBuilderButtonLabel, }) {
-    const [sqlPrompt, setSqlPrompt] = (0, react_1.useState)('');
-    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
-    const [client] = (0, react_1.useContext)(Context_1.ClientContext);
-    const [theme] = (0, react_1.useContext)(Context_1.ThemeContext);
-    const [query, setQuery] = (0, react_1.useState)(defaultQuery);
-    const [rows, setRows] = (0, react_1.useState)([]);
-    const [columns, setColumns] = (0, react_1.useState)([]);
-    const [fields, setFields] = (0, react_1.useState)([]);
-    const [schema, setSchema] = (0, react_1.useContext)(Context_1.SchemaContext);
-    const [errorMessage, setErrorMessage] = (0, react_1.useState)('');
-    const [sqlResponseLoading, setSqlResponseLoading] = (0, react_1.useState)(false);
-    const [sqlQueryLoading, setSqlQueryLoading] = (0, react_1.useState)(false);
-    const [schemaLoading, setSchemaLoading] = (0, react_1.useState)(false);
-    const [isChartBuilderOpen, setIsChartBuilderOpen] = (0, react_1.useState)(false);
-    (0, react_1.useEffect)(() => {
+export default function QueryEditor({ containerStyle = { height: '100vh' }, ButtonComponent, SecondaryButtonComponent, TextInputComponent, TableComponent, AddToDashboardButton, newQueryEnabled = false, LoadingComponent, defaultQuery, onChangeQuery, onChangeData, onChangeColumns, onChangeFields, chartBuilderEnabled = false, showTableFormatOptions = false, showDateFieldOptions = false, showAccessControlOptions = false, destinationDashboard, chartBuilderTitle, chartBuilderButtonLabel, }) {
+    const [sqlPrompt, setSqlPrompt] = useState('');
+    const [isOpen, setIsOpen] = useState(false);
+    const [client] = useContext(ClientContext);
+    const [theme] = useContext(ThemeContext);
+    const [query, setQuery] = useState(defaultQuery);
+    const [rows, setRows] = useState([]);
+    const [columns, setColumns] = useState([]);
+    const [fields, setFields] = useState([]);
+    const [schema, setSchema] = useContext(SchemaContext);
+    const [errorMessage, setErrorMessage] = useState('');
+    const [sqlResponseLoading, setSqlResponseLoading] = useState(false);
+    const [sqlQueryLoading, setSqlQueryLoading] = useState(false);
+    const [schemaLoading, setSchemaLoading] = useState(false);
+    const [isChartBuilderOpen, setIsChartBuilderOpen] = useState(false);
+    useEffect(() => {
         let isSubscribed = true;
         async function getSchema() {
             setSchemaLoading(true);
-            const resp = await (0, dataFetcher_1.getDataFromCloud)(client, `schema2/${client.publicKey}/`, null, 'GET');
+            const resp = await getDataFromCloud(client, `schema2/${client.publicKey}/`, null, 'GET');
             if (isSubscribed) {
                 setSchema(resp.tables);
                 setSchemaLoading(false);
@@ -178,7 +171,7 @@ function QueryEditor({ containerStyle = { height: '100vh' }, ButtonComponent, Se
     }, []);
     const handleRunSqlPrompt = async () => {
         setSqlResponseLoading(true);
-        const resp = await (0, dataFetcher_1.getDataFromCloud)(client, `quillai`, {
+        const resp = await getDataFromCloud(client, `quillai`, {
             initialQuestion: sqlPrompt,
         });
         setQuery(resp.message);
@@ -196,7 +189,7 @@ function QueryEditor({ containerStyle = { height: '100vh' }, ButtonComponent, Se
                     : { query, task: 'query', clientId: client.publicKey },
             };
             const cloudBody = { query };
-            const resp = await (0, dataFetcher_1.getData)(client, 'dashquery', 'same-origin', hostedBody, cloudBody);
+            const resp = await getData(client, 'dashquery', 'same-origin', hostedBody, cloudBody);
             if (resp && resp.errorMessage) {
                 setSqlQueryLoading(false);
                 setErrorMessage('Failed to run SQL query: ' + resp.errorMessage);
@@ -256,35 +249,35 @@ function QueryEditor({ containerStyle = { height: '100vh' }, ButtonComponent, Se
         downloadLink.click();
         document.body.removeChild(downloadLink);
     };
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         if (onChangeQuery) {
             onChangeQuery(query);
         }
     }, [query]);
     /* rest of your methods */
-    return ((0, jsx_runtime_1.jsxs)("div", { style: containerStyle, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+    return (_jsxs("div", { style: containerStyle, children: [_jsx("div", { style: {
                     height: 'calc(100%)',
                     display: 'flex',
                     flexDirection: 'column',
                     padding: 0,
-                }, children: (0, jsx_runtime_1.jsx)("div", { style: { height: '100%', display: 'flex', flexDirection: 'column' }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
+                }, children: _jsx("div", { style: { height: '100%', display: 'flex', flexDirection: 'column' }, children: _jsxs("div", { style: {
                             width: '100%',
                             display: 'flex',
                             height: '100%',
                             flexDirection: 'row',
-                        }, children: [(0, jsx_runtime_1.jsx)(SchemaListComponent, { schema: schema, theme: theme, LoadingComponent: LoadingComponent, loading: schemaLoading }), (0, jsx_runtime_1.jsxs)("div", { style: {
+                        }, children: [_jsx(SchemaListComponent, { schema: schema, theme: theme, LoadingComponent: LoadingComponent, loading: schemaLoading }), _jsxs("div", { style: {
                                     display: 'flex',
                                     flexDirection: 'column',
                                     width: 'calc(100% - 250px)',
                                     overflowX: 'hidden',
-                                }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
+                                }, children: [_jsxs("div", { style: {
                                             // TODO: change color
                                             height: 80,
                                             background: 'white',
                                             display: 'flex',
                                             flexDirection: 'row',
                                             alignItems: 'center',
-                                        }, children: [(0, jsx_runtime_1.jsx)("div", { style: { minWidth: 440, marginRight: 10 }, children: (TextInputComponent && ((0, jsx_runtime_1.jsx)(TextInputComponent, { id: "ai-search", value: sqlPrompt, onChange: e => setSqlPrompt(e.target.value), placeholder: "Ask a question..." }))) || ((0, jsx_runtime_1.jsx)(QuillTextInput, { id: "ai-search", value: sqlPrompt, onChange: e => setSqlPrompt(e.target.value), placeholder: "Ask a question...", theme: theme })) }), (ButtonComponent && ((0, jsx_runtime_1.jsx)(ButtonComponent, { onClick: handleRunSqlPrompt, label: "Ask AI" }))) || ((0, jsx_runtime_1.jsx)(QuillButton, { theme: theme, onClick: handleRunSqlPrompt, label: "Ask AI" }))] }), (0, jsx_runtime_1.jsx)("div", { style: { height: 'calc(50% - 40px)' }, children: (0, jsx_runtime_1.jsx)(SQLEditorComponent, { query: query, setQuery: setQuery, handleRunQuery: handleRunQuery, newQueryEnabled: newQueryEnabled, handleClearQuery: handleClearQuery, theme: theme, defineEditorTheme: defineEditorTheme, setEditorTheme: setEditorTheme, ButtonComponent: ButtonComponent, SecondaryButtonComponent: SecondaryButtonComponent, loading: sqlResponseLoading, LoadingComponent: LoadingComponent }) }), (0, jsx_runtime_1.jsxs)("div", { style: {
+                                        }, children: [_jsx("div", { style: { minWidth: 440, marginRight: 10 }, children: (TextInputComponent && (_jsx(TextInputComponent, { id: "ai-search", value: sqlPrompt, onChange: e => setSqlPrompt(e.target.value), placeholder: "Ask a question..." }))) || (_jsx(QuillTextInput, { id: "ai-search", value: sqlPrompt, onChange: e => setSqlPrompt(e.target.value), placeholder: "Ask a question...", theme: theme })) }), (ButtonComponent && (_jsx(ButtonComponent, { onClick: handleRunSqlPrompt, label: "Ask AI" }))) || (_jsx(QuillButton, { theme: theme, onClick: handleRunSqlPrompt, label: "Ask AI" }))] }), _jsx("div", { style: { height: 'calc(50% - 40px)' }, children: _jsx(SQLEditorComponent, { query: query, setQuery: setQuery, handleRunQuery: handleRunQuery, newQueryEnabled: newQueryEnabled, handleClearQuery: handleClearQuery, theme: theme, defineEditorTheme: defineEditorTheme, setEditorTheme: setEditorTheme, ButtonComponent: ButtonComponent, SecondaryButtonComponent: SecondaryButtonComponent, loading: sqlResponseLoading, LoadingComponent: LoadingComponent }) }), _jsxs("div", { style: {
                                             height: 'calc(50% - 40px)',
                                             display: 'flex',
                                             flexDirection: 'column',
@@ -292,12 +285,12 @@ function QueryEditor({ containerStyle = { height: '100vh' }, ButtonComponent, Se
                                             margin: 0,
                                             border: 'none',
                                             outline: 'none',
-                                        }, children: [errorMessage && ((0, jsx_runtime_1.jsx)("div", { style: {
+                                        }, children: [errorMessage && (_jsx("div", { style: {
                                                     fontFamily: theme?.fontFamily,
                                                     color: theme?.primaryTextColor,
                                                     fontSize: 15,
                                                     fontWeight: '400',
-                                                }, children: (0, jsx_runtime_1.jsx)("div", { style: {
+                                                }, children: _jsx("div", { style: {
                                                         padding: 30,
                                                         // TODO: change color
                                                         background: 'rgba(0,0,0,0.02)',
@@ -308,7 +301,7 @@ function QueryEditor({ containerStyle = { height: '100vh' }, ButtonComponent, Se
                                                         fontFamily: theme?.fontFamily,
                                                     }, children: errorMessage }) })), errorMessage
                                                 ? null
-                                                : (TableComponent && ((0, jsx_runtime_1.jsx)(TableComponent, { rows: rows, columns: columns, height: "calc(100%)" }))) || ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(Table_1.SpecialTable, { rows: rows, columns: columns, height: "calc(100%)", LoadingComponent: LoadingComponent, loading: sqlQueryLoading, theme: theme }) }))] })] })] }) }) }), chartBuilderEnabled && rows.length > 0 && ((0, jsx_runtime_1.jsx)("div", { style: {
+                                                : (TableComponent && (_jsx(TableComponent, { rows: rows, columns: columns, height: "calc(100%)" }))) || (_jsx(_Fragment, { children: _jsx(SpecialTable, { rows: rows, columns: columns, height: "calc(100%)", LoadingComponent: LoadingComponent, loading: sqlQueryLoading, theme: theme }) }))] })] })] }) }) }), chartBuilderEnabled && rows.length > 0 && (_jsx("div", { style: {
                     display: 'flex',
                     flexDirection: 'row',
                     alignItems: 'center',
@@ -316,11 +309,10 @@ function QueryEditor({ containerStyle = { height: '100vh' }, ButtonComponent, Se
                     width: '100%',
                     height: '70px',
                     gap: '8px',
-                }, children: (ButtonComponent && ((0, jsx_runtime_1.jsx)(ButtonComponent, { onClick: handleRunQuery, label: "Run query" }))) || ((0, jsx_runtime_1.jsx)(QuillButton, { onClick: () => setIsChartBuilderOpen(true), label: "Add to dashboard", theme: theme })) })), (0, jsx_runtime_1.jsx)(ChartBuilder_1.default, { rows: rows, columns: columns, fields: fields, query: query, isOpen: isChartBuilderOpen, setIsOpen: setIsChartBuilderOpen, showTableFormatOptions: showTableFormatOptions, showDateFieldOptions: showDateFieldOptions, showAccessControlOptions: showAccessControlOptions, destinationDashboard: destinationDashboard, title: chartBuilderTitle, button: chartBuilderButtonLabel })] }));
+                }, children: (ButtonComponent && (_jsx(ButtonComponent, { onClick: handleRunQuery, label: "Run query" }))) || (_jsx(QuillButton, { onClick: () => setIsChartBuilderOpen(true), label: "Add to dashboard", theme: theme })) })), _jsx(ChartBuilder, { rows: rows, columns: columns, fields: fields, query: query, isOpen: isChartBuilderOpen, setIsOpen: setIsChartBuilderOpen, showTableFormatOptions: showTableFormatOptions, showDateFieldOptions: showDateFieldOptions, showAccessControlOptions: showAccessControlOptions, destinationDashboard: destinationDashboard, title: chartBuilderTitle, button: chartBuilderButtonLabel })] }));
 }
-exports.default = QueryEditor;
 const SQLEditorComponent = ({ query, setQuery, handleRunQuery, handleClearQuery, defineEditorTheme, setEditorTheme, ButtonComponent, SecondaryButtonComponent, newQueryEnabled, theme, loading, LoadingComponent, }) => {
-    return ((0, jsx_runtime_1.jsxs)("div", { style: {
+    return (_jsxs("div", { style: {
             background: theme.backgroundColor,
             // maxHeight: 700,
             width: '100%',
@@ -334,25 +326,25 @@ const SQLEditorComponent = ({ query, setQuery, handleRunQuery, handleClearQuery,
             borderTopRightRadius: 0,
             borderBottomRightRadius: 0,
             overflow: 'hidden',
-        }, children: [loading ? ((0, jsx_runtime_1.jsxs)("div", { style: {
+        }, children: [loading ? (_jsxs("div", { style: {
                     height: 'calc(100% - 70px)',
                     width: '100%',
                     display: 'flex',
                     alignItems: 'center',
                     justifyContent: 'center',
                     background: '#F9F9F9',
-                }, children: [LoadingComponent && (0, jsx_runtime_1.jsx)(LoadingComponent, {}), !LoadingComponent && ((0, jsx_runtime_1.jsxs)("svg", { width: "24", height: "24", children: [(0, jsx_runtime_1.jsx)("circle", { cx: "12", cy: "12", r: "9.375", strokeWidth: "3.75", strokeDasharray: "calc(2 * 3.14 * 9.375 / 3) calc(2 * 3.14 * 9.375 * 2 / 3)", strokeDashoffset: "calc(2 * 3.14 * 9.375 / 6)", stroke: theme?.primaryTextColor || '#364153', fill: "none", transform: "rotate(-90 12 12)", children: (0, jsx_runtime_1.jsx)("animateTransform", { attributeName: "transform", attributeType: "XML", type: "rotate", from: "-180 12 12", to: "180 12 12", dur: "0.8s", repeatCount: "indefinite" }) }), (0, jsx_runtime_1.jsx)("circle", { cx: "12", cy: "12", r: "9.375", strokeWidth: "3.75", strokeDasharray: "calc(2 * 3.14 * 9.375 / 3) calc(2 * 3.14 * 9.375 * 1 / 3)", strokeDashoffset: "calc(2 * 3.14 * 9.375 / 3) calc(2 * 3.14 * 9.375 * 2 / 3)", stroke: '#ADB1B9', fill: "none", transform: "rotate(90 12 12)", children: (0, jsx_runtime_1.jsx)("animateTransform", { attributeName: "transform", attributeType: "XML", type: "rotate", from: "0 12 12", to: "360 12 12", dur: "0.8s", repeatCount: "indefinite" }) })] }))] })) : ((0, jsx_runtime_1.jsx)(react_2.default, { height: "calc(100% - 70px)", width: "100%", defaultLanguage: "pgsql", defaultValue: "", value: query, loading: (0, jsx_runtime_1.jsx)("div", {}), options: {
+                }, children: [LoadingComponent && _jsx(LoadingComponent, {}), !LoadingComponent && (_jsxs("svg", { width: "24", height: "24", children: [_jsx("circle", { cx: "12", cy: "12", r: "9.375", strokeWidth: "3.75", strokeDasharray: "calc(2 * 3.14 * 9.375 / 3) calc(2 * 3.14 * 9.375 * 2 / 3)", strokeDashoffset: "calc(2 * 3.14 * 9.375 / 6)", stroke: theme?.primaryTextColor || '#364153', fill: "none", transform: "rotate(-90 12 12)", children: _jsx("animateTransform", { attributeName: "transform", attributeType: "XML", type: "rotate", from: "-180 12 12", to: "180 12 12", dur: "0.8s", repeatCount: "indefinite" }) }), _jsx("circle", { cx: "12", cy: "12", r: "9.375", strokeWidth: "3.75", strokeDasharray: "calc(2 * 3.14 * 9.375 / 3) calc(2 * 3.14 * 9.375 * 1 / 3)", strokeDashoffset: "calc(2 * 3.14 * 9.375 / 3) calc(2 * 3.14 * 9.375 * 2 / 3)", stroke: '#ADB1B9', fill: "none", transform: "rotate(90 12 12)", children: _jsx("animateTransform", { attributeName: "transform", attributeType: "XML", type: "rotate", from: "0 12 12", to: "360 12 12", dur: "0.8s", repeatCount: "indefinite" }) })] }))] })) : (_jsx(MonacoEditor, { height: "calc(100% - 70px)", width: "100%", defaultLanguage: "pgsql", defaultValue: "", value: query, loading: _jsx("div", {}), options: {
                     wordWrap: 'on',
                     minimap: {
                         enabled: false,
                     },
                     padding: { top: 16 },
-                }, onChange: query => setQuery(query), beforeMount: monaco => defineEditorTheme(monaco, theme), onMount: setEditorTheme })), (0, jsx_runtime_1.jsx)("div", { style: {
+                }, onChange: query => setQuery(query), beforeMount: monaco => defineEditorTheme(monaco, theme), onMount: setEditorTheme })), _jsx("div", { style: {
                     display: 'flex',
                     flexDirection: 'row',
                     alignItems: 'center',
                     height: 70,
-                }, children: (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', gap: 10 }, children: [(ButtonComponent && ((0, jsx_runtime_1.jsx)(ButtonComponent, { onClick: handleRunQuery, label: "Run query" }))) || ((0, jsx_runtime_1.jsx)(QuillButton, { onClick: handleRunQuery, label: "Run query", theme: theme })), newQueryEnabled && ((0, jsx_runtime_1.jsx)("div", { children: (SecondaryButtonComponent && ((0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { onClick: handleClearQuery, label: "Clear query" }))) || ((0, jsx_runtime_1.jsx)(QuillButton, { secondary: true, onClick: handleClearQuery, label: "Clear query", theme: theme })) }))] }) })] }));
+                }, children: _jsxs("div", { style: { display: 'flex', gap: 10 }, children: [(ButtonComponent && (_jsx(ButtonComponent, { onClick: handleRunQuery, label: "Run query" }))) || (_jsx(QuillButton, { onClick: handleRunQuery, label: "Run query", theme: theme })), newQueryEnabled && (_jsx("div", { children: (SecondaryButtonComponent && (_jsx(SecondaryButtonComponent, { onClick: handleClearQuery, label: "Clear query" }))) || (_jsx(QuillButton, { secondary: true, onClick: handleClearQuery, label: "Clear query", theme: theme })) }))] }) })] }));
 };
 const styles = {
     columnHeader: {
@@ -388,7 +380,7 @@ const styles = {
 };
 const SchemaListComponent = ({ schema, theme, loading, LoadingComponent }) => {
     if (loading) {
-        return ((0, jsx_runtime_1.jsxs)("div", { style: {
+        return (_jsxs("div", { style: {
                 background: theme.backgroundColor,
                 // maxHeight: 700,
                 width: 250,
@@ -402,9 +394,9 @@ const SchemaListComponent = ({ schema, theme, loading, LoadingComponent }) => {
                 display: 'flex',
                 // alignItems: 'center',
                 justifyContent: 'center',
-            }, children: [(0, jsx_runtime_1.jsx)("div", { style: { height: 100 } }), LoadingComponent && (0, jsx_runtime_1.jsx)(LoadingComponent, {}), !LoadingComponent && ((0, jsx_runtime_1.jsxs)("svg", { width: "24", height: "24", children: [(0, jsx_runtime_1.jsx)("circle", { cx: "12", cy: "12", r: "9.375", strokeWidth: "3.75", strokeDasharray: "calc(2 * 3.14 * 9.375 / 3) calc(2 * 3.14 * 9.375 * 2 / 3)", strokeDashoffset: "calc(2 * 3.14 * 9.375 / 6)", stroke: theme?.primaryTextColor || '#364153', fill: "none", transform: "rotate(-90 12 12)", children: (0, jsx_runtime_1.jsx)("animateTransform", { attributeName: "transform", attributeType: "XML", type: "rotate", from: "-180 12 12", to: "180 12 12", dur: "0.8s", repeatCount: "indefinite" }) }), (0, jsx_runtime_1.jsx)("circle", { cx: "12", cy: "12", r: "9.375", strokeWidth: "3.75", strokeDasharray: "calc(2 * 3.14 * 9.375 / 3) calc(2 * 3.14 * 9.375 * 1 / 3)", strokeDashoffset: "calc(2 * 3.14 * 9.375 / 3) calc(2 * 3.14 * 9.375 * 2 / 3)", stroke: '#ADB1B9', fill: "none", transform: "rotate(90 12 12)", children: (0, jsx_runtime_1.jsx)("animateTransform", { attributeName: "transform", attributeType: "XML", type: "rotate", from: "0 12 12", to: "360 12 12", dur: "0.8s", repeatCount: "indefinite" }) })] }))] }));
+            }, children: [_jsx("div", { style: { height: 100 } }), LoadingComponent && _jsx(LoadingComponent, {}), !LoadingComponent && (_jsxs("svg", { width: "24", height: "24", children: [_jsx("circle", { cx: "12", cy: "12", r: "9.375", strokeWidth: "3.75", strokeDasharray: "calc(2 * 3.14 * 9.375 / 3) calc(2 * 3.14 * 9.375 * 2 / 3)", strokeDashoffset: "calc(2 * 3.14 * 9.375 / 6)", stroke: theme?.primaryTextColor || '#364153', fill: "none", transform: "rotate(-90 12 12)", children: _jsx("animateTransform", { attributeName: "transform", attributeType: "XML", type: "rotate", from: "-180 12 12", to: "180 12 12", dur: "0.8s", repeatCount: "indefinite" }) }), _jsx("circle", { cx: "12", cy: "12", r: "9.375", strokeWidth: "3.75", strokeDasharray: "calc(2 * 3.14 * 9.375 / 3) calc(2 * 3.14 * 9.375 * 1 / 3)", strokeDashoffset: "calc(2 * 3.14 * 9.375 / 3) calc(2 * 3.14 * 9.375 * 2 / 3)", stroke: '#ADB1B9', fill: "none", transform: "rotate(90 12 12)", children: _jsx("animateTransform", { attributeName: "transform", attributeType: "XML", type: "rotate", from: "0 12 12", to: "360 12 12", dur: "0.8s", repeatCount: "indefinite" }) })] }))] }));
     }
-    return ((0, jsx_runtime_1.jsx)("div", { style: {
+    return (_jsx("div", { style: {
             background: theme.backgroundColor,
             // maxHeight: 700,
             width: 250,
@@ -414,10 +406,10 @@ const SchemaListComponent = ({ schema, theme, loading, LoadingComponent }) => {
             // maxHeight: "100%",
             paddingLeft: 20,
             paddingRight: 30,
-        }, children: schema.map((elem, index) => ((0, jsx_runtime_1.jsx)(SchemaItem, { elem: elem, theme: theme, index: index }, elem.displayName + index))) }));
+        }, children: schema.map((elem, index) => (_jsx(SchemaItem, { elem: elem, theme: theme, index: index }, elem.displayName + index))) }));
 };
 function SchemaItem({ elem, theme, index }) {
-    const [isOpen, setIsOpen] = (0, react_1.useState)(index === 0);
+    const [isOpen, setIsOpen] = useState(index === 0);
     const schemaContainerStyle = {
         display: 'flex',
         flexDirection: 'column',
@@ -439,7 +431,7 @@ function SchemaItem({ elem, theme, index }) {
     const schemaRowHoverStyle = {
         background: theme.selectUnderlayColor,
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { style: schemaContainerStyle, children: [(0, jsx_runtime_1.jsxs)("div", { style: { ...schemaRowStyle, ...(isOpen && schemaRowHoverStyle) }, onClick: () => setIsOpen(!isOpen), children: [(0, jsx_runtime_1.jsx)("p", { style: {
+    return (_jsxs("div", { style: schemaContainerStyle, children: [_jsxs("div", { style: { ...schemaRowStyle, ...(isOpen && schemaRowHoverStyle) }, onClick: () => setIsOpen(!isOpen), children: [_jsx("p", { style: {
                             marginLeft: theme.padding,
                             fontSize: 13,
                             color: '#384151',
@@ -450,7 +442,7 @@ function SchemaItem({ elem, theme, index }) {
                             textOverflow: 'ellipsis',
                             overflow: 'hidden',
                             fontFamily: theme?.fontFamily,
-                        }, title: elem.displayName, children: elem.displayName }), (0, jsx_runtime_1.jsx)("div", { style: {
+                        }, title: elem.displayName, children: elem.displayName }), _jsx("div", { style: {
                             display: 'flex',
                             alignItems: 'center',
                             justifyContent: 'center',
@@ -464,24 +456,24 @@ function SchemaItem({ elem, theme, index }) {
                         //   style={{ height: 13, width: 13, color: theme.secondaryTextColor }}
                         //   aria-hidden="true"
                         // />
-                        (0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: theme.secondaryTextColor, children: (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", d: "M12.53 16.28a.75.75 0 01-1.06 0l-7.5-7.5a.75.75 0 011.06-1.06L12 14.69l6.97-6.97a.75.75 0 111.06 1.06l-7.5 7.5z", clipRule: "evenodd" }) })) : (
+                        _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: theme.secondaryTextColor, children: _jsx("path", { fillRule: "evenodd", d: "M12.53 16.28a.75.75 0 01-1.06 0l-7.5-7.5a.75.75 0 011.06-1.06L12 14.69l6.97-6.97a.75.75 0 111.06 1.06l-7.5 7.5z", clipRule: "evenodd" }) })) : (
                         // <ChevronRightIcon
                         //   style={{ height: 13, width: 13, color: theme.secondaryTextColor }}
                         //   aria-hidden="true"
                         // />
-                        (0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: theme.secondaryTextColor, children: (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", d: "M16.28 11.47a.75.75 0 010 1.06l-7.5 7.5a.75.75 0 01-1.06-1.06L14.69 12 7.72 5.03a.75.75 0 011.06-1.06l7.5 7.5z", clipRule: "evenodd" }) })) })] }), isOpen ? ((0, jsx_runtime_1.jsx)("div", { style: {
+                        _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: theme.secondaryTextColor, children: _jsx("path", { fillRule: "evenodd", d: "M16.28 11.47a.75.75 0 010 1.06l-7.5 7.5a.75.75 0 01-1.06-1.06L14.69 12 7.72 5.03a.75.75 0 011.06-1.06l7.5 7.5z", clipRule: "evenodd" }) })) })] }), isOpen ? (_jsx("div", { style: {
                     paddingBottom: theme.padding,
                     display: 'flex',
                     flexDirection: 'column',
                     paddingLeft: theme.padding,
                     paddingRight: theme.padding,
-                }, children: elem.columns.map((elem, index) => ((0, jsx_runtime_1.jsxs)("div", { style: {
+                }, children: elem.columns.map((elem, index) => (_jsxs("div", { style: {
                         paddingTop: theme.padding,
                         display: 'flex',
                         flexDirection: 'row',
                         alignItems: 'center',
                         justifyContent: 'space-between',
-                    }, children: [(0, jsx_runtime_1.jsx)("div", { title: elem.displayName, 
+                    }, children: [_jsx("div", { title: elem.displayName, 
                             // className="text-gray-500"
                             style: {
                                 fontSize: 12,
@@ -496,7 +488,7 @@ function SchemaItem({ elem, theme, index }) {
                                 width: 200,
                                 maxWidth: 200,
                                 fontFamily: theme?.fontFamily,
-                            }, children: elem.displayName }), (0, jsx_runtime_1.jsx)("div", { 
+                            }, children: elem.displayName }), _jsx("div", { 
                             // className="text-gray-500"
                             title: elem.displayName, style: {
                                 fontSize: 12,

package/dist/Table.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-interface TableColumn {
+export interface TableColumn {
     label: string;
     field: string;
 }
@@ -32,6 +32,7 @@ export declare function SpecialTable({ columns, rows, height, containerStyle, lo
     csvFilename?: string;
     DownloadCSVButtonComponent?: (props: TableButtonComponentProps) => JSX.Element;
     AddToDashboardButtonComponent?: (props: TableButtonComponentProps) => JSX.Element;
+    isTableChart?: boolean;
 }): import("react/jsx-runtime").JSX.Element | null;
 export default Table;
 //# sourceMappingURL=Table.d.ts.map

package/dist/Table.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../src/Table.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAYxE,UAAU,WAAW;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,UAAU,iBAAiB;IACzB,OAAO,EAAE,MAAM,CAAC;IAChB,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACrC,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,UAAU,cAAc;IACtB,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACrC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,gBAAgB,CAAC,EAAE,MAAM,GAAG,CAAC,OAAO,CAAC;CACtC;AAED,QAAA,MAAM,KAAK,sGAQR,iBAAiB,GAAG,cAAc,4CAqEpC,CAAC;AAEF,UAAU,yBAAyB;IACjC,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAyBD,wBAAgB,YAAY,CAAC,EAC3B,OAAO,EACP,IAAI,EACJ,MAAM,EACN,cAAc,EACd,OAAO,EACP,gBAAgB,EAChB,KAAK,EACL,qBAA4B,EAC5B,WAAW,EACX,0BAA0B,EAC1B,6BAA6B,EAC7B,YAAoB,EACpB,IAAI,GACL,EAAE;IACD,OAAO,EAAE,GAAG,EAAE,CAAC;IACf,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,MAAM,EAAE,MAAM,CAAC;IACf,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACrC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,gBAAgB,CAAC,EAAE,MAAM,GAAG,CAAC,OAAO,CAAC;IACrC,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,0BAA0B,CAAC,EAAE,CAC3B,KAAK,EAAE,yBAAyB,KAC7B,GAAG,CAAC,OAAO,CAAC;IACjB,6BAA6B,CAAC,EAAE,CAC9B,KAAK,EAAE,yBAAyB,KAC7B,GAAG,CAAC,OAAO,CAAC;CAClB,kDA4lBA;AAuUD,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../src/Table.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAYxE,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,UAAU,iBAAiB;IACzB,OAAO,EAAE,MAAM,CAAC;IAChB,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACrC,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,UAAU,cAAc;IACtB,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACrC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,gBAAgB,CAAC,EAAE,MAAM,GAAG,CAAC,OAAO,CAAC;CACtC;AAED,QAAA,MAAM,KAAK,sGAQR,iBAAiB,GAAG,cAAc,4CAqEpC,CAAC;AAEF,UAAU,yBAAyB;IACjC,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAyBD,wBAAgB,YAAY,CAAC,EAC3B,OAAO,EACP,IAAI,EACJ,MAAM,EACN,cAAc,EACd,OAAO,EACP,gBAAgB,EAChB,KAAK,EACL,qBAA4B,EAC5B,WAAW,EACX,0BAA0B,EAC1B,6BAA6B,EAC7B,YAAoB,EACpB,IAAI,GACL,EAAE;IACD,OAAO,EAAE,GAAG,EAAE,CAAC;IACf,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,MAAM,EAAE,MAAM,CAAC;IACf,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACrC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,gBAAgB,CAAC,EAAE,MAAM,GAAG,CAAC,OAAO,CAAC;IACrC,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,0BAA0B,CAAC,EAAE,CAC3B,KAAK,EAAE,yBAAyB,KAC7B,GAAG,CAAC,OAAO,CAAC;IACjB,6BAA6B,CAAC,EAAE,CAC9B,KAAK,EAAE,yBAAyB,KAC7B,GAAG,CAAC,OAAO,CAAC;IACjB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB,kDA4lBA;AAuUD,eAAe,KAAK,CAAC"}