@quillsql/react 2.11.8 → 2.11.12

package/dist/esm/SQLEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SQLEditor.d.ts","sourceRoot":"","sources":["../../src/SQLEditor.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAQxE,OAAO,EACL,mBAAmB,EACnB,mBAAmB,EACpB,MAAM,2BAA2B,CAAC;AAGnC,wBAAgB,qBAAqB,CAAC,MAAM,KAAA;;;;;EAwE3C;AA2BD,UAAU,oBAAoB;IAC5B,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,UAAU,cAAc;IACtB,cAAc,EAAE,KAAK,CAAC,aAAa,CAAC;IAEpC,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,GAAG,CAAC,OAAO,CAAC;IAC/D,wBAAwB,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,GAAG,CAAC,OAAO,CAAC;IAExE,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,uBAAuB,KAAK,GAAG,CAAC,OAAO,CAAC;IACrE,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,mBAAmB,KAAK,GAAG,CAAC,OAAO,CAAC;IAC7D,gBAAgB,CAAC,EAAE,MAAM,GAAG,CAAC,OAAO,CAAC;IACrC,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,mBAAmB,KAAK,GAAG,CAAC,OAAO,CAAC;IAC9D,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACxC,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC9C,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC5C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,aAAa,CAAC,EAAE,GAAG,CAAC;IACpB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,yBAAyB,CAAC,EAAE,MAAM,CAAC;IACnC,wBAAwB,CAAC,EAAE,MAAM,IAAI,CAAC;IACtC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,0BAA0B,CAAC,EAAE,OAAO,CAAC;CACtC;AAQD,UAAU,uBAAuB;IAC/B,QAAQ,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,EAAE,EAAE,MAAM,CAAC;IACX,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAkFD,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,cAAoC,EACpC,eAAe,EACf,wBAAwB,EACxB,kBAAkB,EAClB,cAA2B,EAC3B,eAAuB,EACvB,gBAAgB,EAChB,cAAc,EACd,YAAY,EACZ,aAAa,EACb,YAAY,EACZ,eAAe,EACf,cAAc,EACd,UAAkB,EAClB,mBAA2B,EAC3B,sBAA8B,EAC9B,oBAA4B,EAC5B,wBAAgC,EAChC,oBAAoB,EACpB,iBAAiB,EACjB,uBAAuB,EACvB,wBAAwB,EACxB,yBAA8C,EAC9C,aAAyB,EACzB,gBAA4B,EAC5B,0BAAkC,GACnC,EAAE,cAAc,2CA2VhB;AA8LD,eAAO,MAAM,mBAAmB;;;;;;6CAqG/B,CAAC"}
+{"version":3,"file":"SQLEditor.d.ts","sourceRoot":"","sources":["../../src/SQLEditor.tsx"],"names":[],"mappings":"AAEA,OAAO,KAMN,MAAM,OAAO,CAAC;AAQf,OAAO,EAGL,mBAAmB,EACnB,mBAAmB,EAEpB,MAAM,2BAA2B,CAAC;AAInC,wBAAgB,qBAAqB,CAAC,MAAM,KAAA;;;;;EAwE3C;AA2BD,UAAU,oBAAoB;IAC5B,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,UAAU,cAAc;IACtB,cAAc,EAAE,KAAK,CAAC,aAAa,CAAC;IAEpC,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,GAAG,CAAC,OAAO,CAAC;IAC/D,wBAAwB,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,GAAG,CAAC,OAAO,CAAC;IAExE,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,uBAAuB,KAAK,GAAG,CAAC,OAAO,CAAC;IACrE,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,mBAAmB,KAAK,GAAG,CAAC,OAAO,CAAC;IAC7D,gBAAgB,CAAC,EAAE,MAAM,GAAG,CAAC,OAAO,CAAC;IACrC,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,mBAAmB,KAAK,GAAG,CAAC,OAAO,CAAC;IAC9D,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACxC,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC9C,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC5C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,aAAa,CAAC,EAAE,GAAG,CAAC;IACpB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,yBAAyB,CAAC,EAAE,MAAM,CAAC;IACnC,wBAAwB,CAAC,EAAE,MAAM,IAAI,CAAC;IACtC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,0BAA0B,CAAC,EAAE,OAAO,CAAC;CACtC;AAQD,UAAU,uBAAuB;IAC/B,QAAQ,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,EAAE,EAAE,MAAM,CAAC;IACX,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAuCD,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,cAAoC,EACpC,eAAgC,EAChC,wBAAkD,EAClD,kBAAmC,EACnC,cAA2B,EAC3B,eAAuB,EACvB,gBAAgB,EAChB,cAAc,EACd,YAAY,EACZ,aAAa,EACb,YAAY,EACZ,eAAe,EACf,cAAc,EACd,UAAkB,EAClB,mBAA2B,EAC3B,sBAA8B,EAC9B,oBAA4B,EAC5B,wBAAgC,EAChC,oBAAoB,EACpB,iBAAiB,EACjB,uBAAuB,EACvB,wBAAwB,EACxB,yBAA8C,EAC9C,aAAyB,EACzB,gBAA4B,EAC5B,0BAAkC,GACnC,EAAE,cAAc,2CA8WhB;AA6JD,eAAO,MAAM,mBAAmB;;;;;;;6CAuG/B,CAAC"}

package/dist/esm/SQLEditor.js

@@ -1,13 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // @ts-nocheck
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-import { useState, useContext, useEffect } from 'react';
+import { useState, useContext, useEffect, } from 'react';
 import MonacoEditor from '@monaco-editor/react';
 // import './nightOwlLight.css';
 import { ClientContext, SchemaContext, ThemeContext } from './Context';
 import QuillTable from './components/QuillTable';
 import { getData, getDataFromCloud } from './utils/dataFetcher';
 import { ChartBuilderWithModal } from './ChartBuilder';
+import { MemoizedButton, MemoizedSecondaryButton, } from './components/UiComponents';
+import { QuillTextInput } from './components/ReportBuilder/ui';
 export function convertPostgresColumn(column) {
     let format;
     let fieldType;
@@ -122,29 +124,8 @@ const QuillButton = ({ onClick, label, theme, secondary, }) => (_jsx("button", {
         fontFamily: theme?.fontFamily,
         height: 38,
     }, onClick: onClick, children: label }));
-const QuillTextInput = ({ onChange, value, id, placeholder, theme, style = {}, }) => {
-    return (_jsx("input", { style: {
-            display: 'flex',
-            flexDirection: 'row',
-            alignItems: 'center',
-            paddingLeft: '12px',
-            paddingRight: '12px',
-            fontWeight: 'medium',
-            height: 38,
-            boxShadow: 'rgba(0, 0, 0, 0.1) 0px 1px 5px 0px',
-            width: '445px',
-            backgroundColor: theme?.backgroundColor || 'white',
-            color: theme?.primaryTextColor,
-            borderWidth: '1px',
-            borderColor: theme?.borderColor || '#E7E7E7',
-            borderStyle: 'solid',
-            borderRadius: '6px',
-            ...style
-        }, id: id, onChange: onChange, value: value, placeholder: placeholder }));
-};
-export default function QueryEditor({ containerStyle = { height: '100vh' }, ButtonComponent, SecondaryButtonComponent, TextInputComponent, TableComponent = QuillTable, newQueryEnabled = false, LoadingComponent, ModalComponent, defaultQuery, onChangeQuery, onChangeData, onChangeColumns, onChangeFields, isEditMode = false, chartBuilderEnabled = false, showTableFormatOptions = false, showDateFieldOptions = false, showAccessControlOptions = false, destinationDashboard, chartBuilderTitle, chartBuilderButtonLabel, onAddToDashboardComplete, addToDashboardButtonLabel = 'Add to dashboard', dashboardItem = undefined, organizationName = undefined, chartBuilderHorizontalView = false, }) {
+export default function QueryEditor({ containerStyle = { height: '100vh' }, ButtonComponent = MemoizedButton, SecondaryButtonComponent = MemoizedSecondaryButton, TextInputComponent = QuillTextInput, TableComponent = QuillTable, newQueryEnabled = false, LoadingComponent, ModalComponent, defaultQuery, onChangeQuery, onChangeData, onChangeColumns, onChangeFields, isEditMode = false, chartBuilderEnabled = false, showTableFormatOptions = false, showDateFieldOptions = false, showAccessControlOptions = false, destinationDashboard, chartBuilderTitle, chartBuilderButtonLabel, onAddToDashboardComplete, addToDashboardButtonLabel = 'Add to dashboard', dashboardItem = undefined, organizationName = undefined, chartBuilderHorizontalView = false, }) {
     const [sqlPrompt, setSqlPrompt] = useState('');
-    const [isOpen, setIsOpen] = useState(false);
     const [client] = useContext(ClientContext);
     const [theme] = useContext(ThemeContext);
     const [query, setQuery] = useState(defaultQuery);
@@ -236,15 +217,6 @@ export default function QueryEditor({ containerStyle = { height: '100vh' }, Butt
             if (resp.rows.length === 0) {
                 setErrorMessage('No data found');
             }
-            // stringify all rows that are either jsonb or json
-            resp.rows = resp.rows.map((row) => {
-                for (const key in row) {
-                    if (typeof row[key] === 'object') {
-                        row[key] = JSON.stringify(row[key]);
-                    }
-                }
-                return row;
-            });
             setRows(resp.rows && resp.rows.length ? resp.rows : []);
             if (onChangeData) {
                 onChangeData(resp.rows && resp.rows.length ? resp.rows : []);
@@ -263,13 +235,39 @@ export default function QueryEditor({ containerStyle = { height: '100vh' }, Butt
             return;
         }
     };
-    /* all your useState and useContext calls and your useEffect hooks */
+    const handleFixWithAI = async () => {
+        try {
+            setDisplayTable(false);
+            setSqlResponseLoading(true);
+            const resp = await getDataFromCloud(client, 'plsfix', {
+                initialQuestion: sqlPrompt,
+                brokenQuery: query,
+                errorMessage: errorMessage,
+            });
+            setErrorMessage('');
+            setQuery(resp.message);
+            setSqlResponseLoading(false);
+        }
+        catch (e) {
+            setErrorMessage('Failed to fix query');
+            setSqlResponseLoading(false);
+            console.log('ERROR: ', e);
+        }
+    };
+    const handleClickSchemaItem = async (event) => {
+        const name = event.target.textContent;
+        if (query.length > 0) {
+            await navigator.clipboard.writeText(name);
+        }
+        else {
+            setQuery(`SELECT * FROM ${name};`);
+        }
+    };
     useEffect(() => {
         if (onChangeQuery) {
             onChangeQuery(query);
         }
     }, [query]);
-    /* rest of your methods */
     return (_jsxs("div", { style: containerStyle, children: [(!chartBuilderHorizontalView ||
                 (chartBuilderHorizontalView && !isChartBuilderOpen)) && (_jsx("div", { style: {
                     height: '100%',
@@ -282,22 +280,23 @@ export default function QueryEditor({ containerStyle = { height: '100vh' }, Butt
                             height: '100%',
                             flexDirection: 'row',
                             gap: 20,
-                        }, children: [_jsx(SchemaListComponent, { schema: schema, theme: theme, LoadingComponent: LoadingComponent, loading: schemaLoading }), _jsxs("div", { style: {
+                        }, children: [_jsx(SchemaListComponent, { schema: schema, theme: theme, LoadingComponent: LoadingComponent, loading: schemaLoading, onClick: handleClickSchemaItem }), _jsxs("div", { style: {
                                     display: 'flex',
                                     // gap: 12,
                                     flexDirection: 'column',
                                     width: 'calc(100% - 290px)',
                                     height: '100%',
                                     overflowX: 'hidden',
-                                }, children: [_jsxs("div", { style: {
-                                            // TODO: change color
-                                            background: 'white',
+                                }, children: [_jsxs("form", { onSubmit: (e) => {
+                                            e.preventDefault();
+                                            handleRunSqlPrompt();
+                                        }, style: {
                                             display: 'flex',
                                             flexDirection: 'row',
-                                            alignItems: 'center',
-                                            gap: '10px',
-                                            height: 80,
-                                        }, children: [_jsx("div", { style: { minWidth: 440, flexGrow: 1 }, children: (TextInputComponent && (_jsx(TextInputComponent, { id: "ai-search", value: sqlPrompt, style: { width: '100%' }, onChange: (e) => setSqlPrompt(e.target.value), placeholder: "Ask a question..." }))) || (_jsx(QuillTextInput, { id: "ai-search", value: sqlPrompt, style: { width: '100%' }, 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: {
+                                            gap: 12,
+                                            paddingTop: 16,
+                                            paddingBottom: 16,
+                                        }, children: [_jsx(TextInputComponent, { id: "ai-search", value: sqlPrompt, style: { width: '100%', fontSize: 14 }, onChange: (e) => setSqlPrompt(e.target.value), placeholder: "Ask a question..." }), (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, handleFixWithAI: handleFixWithAI, newQueryEnabled: newQueryEnabled, handleClearQuery: handleClearQuery, theme: theme, defineEditorTheme: defineEditorTheme, setEditorTheme: setEditorTheme, ButtonComponent: ButtonComponent, SecondaryButtonComponent: SecondaryButtonComponent, loading: sqlResponseLoading, LoadingComponent: LoadingComponent }) }), _jsxs("div", { style: {
                                             display: 'flex',
                                             flexDirection: 'column',
                                             height: 'calc(50% - 108px)',
@@ -310,16 +309,19 @@ export default function QueryEditor({ containerStyle = { height: '100vh' }, Butt
                                                     color: theme?.primaryTextColor,
                                                     fontSize: 15,
                                                     fontWeight: '400',
-                                                }, children: _jsx("div", { style: {
-                                                        padding: 30,
-                                                        // TODO: change color
-                                                        background: 'rgba(0,0,0,0.02)',
-                                                        display: 'inline-block',
-                                                        flex: 0,
-                                                        borderRadius: 6,
+                                                    width: '100%',
+                                                }, children: _jsxs("div", { style: {
+                                                        display: 'flex',
+                                                        flexDirection: 'row',
+                                                        justifyContent: 'space-between',
+                                                        gap: 12,
+                                                        background: 'rgba(0,0,0,0.02)', // TODO: change color
                                                         color: theme?.primaryTextColor,
                                                         fontFamily: theme?.fontFamily,
-                                                    }, children: errorMessage }) })), errorMessage || !displayTable ? null : (_jsx(TableComponent, { rows: rows, columns: columns, containerStyle: { height: 'calc(100%)' }, LoadingComponent: LoadingComponent, loading: sqlQueryLoading }))] }), chartBuilderEnabled && rows.length > 0 && (_jsx("div", { style: {
+                                                        borderRadius: 6,
+                                                        padding: 20,
+                                                        width: '100%',
+                                                    }, children: [errorMessage, (SecondaryButtonComponent && (_jsx(SecondaryButtonComponent, { onClick: handleFixWithAI, label: "Fix with AI" }))) || (_jsx(QuillButton, { secondary: true, onClick: handleFixWithAI, label: "Fix with AI", theme: theme }))] }) })), errorMessage || !displayTable ? null : (_jsx(TableComponent, { rows: rows, columns: columns, containerStyle: { height: 'calc(100%)' }, LoadingComponent: LoadingComponent, loading: sqlQueryLoading }))] }), chartBuilderEnabled && rows.length > 0 && (_jsx("div", { style: {
                                             display: 'flex',
                                             flexDirection: 'row',
                                             alignItems: 'center',
@@ -328,7 +330,7 @@ export default function QueryEditor({ containerStyle = { height: '100vh' }, Butt
                                             height: '70px',
                                         }, children: (ButtonComponent && (_jsx(ButtonComponent, { onClick: () => setIsChartBuilderOpen(true), label: addToDashboardButtonLabel }))) || (_jsx(QuillButton, { onClick: () => setIsChartBuilderOpen(true), label: addToDashboardButtonLabel, theme: theme })) }))] })] }) }) })), _jsx(ChartBuilderWithModal, { rows: rows, columns: columns, fields: fields, query: query, horizontalView: chartBuilderHorizontalView, isEditMode: isEditMode, isOpen: isChartBuilderOpen, setIsOpen: setIsChartBuilderOpen, onAddToDashboardComplete: onAddToDashboardComplete, showTableFormatOptions: showTableFormatOptions, showDateFieldOptions: showDateFieldOptions, showAccessControlOptions: showAccessControlOptions, destinationDashboard: destinationDashboard, title: chartBuilderTitle, button: chartBuilderButtonLabel, buttonLabel: addToDashboardButtonLabel, dashboardItem: dashboardItem, organizationName: organizationName, Modal: ModalComponent, Button: ButtonComponent })] }));
 }
-const SQLEditorComponent = ({ query, setQuery, handleRunQuery, handleClearQuery, defineEditorTheme, setEditorTheme, ButtonComponent, SecondaryButtonComponent, newQueryEnabled, theme, loading, LoadingComponent, }) => {
+const SQLEditorComponent = ({ query, setQuery, handleRunQuery, handleFixWithAI, handleClearQuery, defineEditorTheme, setEditorTheme, ButtonComponent, SecondaryButtonComponent, newQueryEnabled, theme, loading, LoadingComponent, }) => {
     return (_jsxs("div", { style: {
             background: theme.backgroundColor,
             // maxHeight: 700,
@@ -363,41 +365,9 @@ const SQLEditorComponent = ({ query, setQuery, handleRunQuery, handleClearQuery,
                     flexDirection: 'row',
                     alignItems: 'center',
                     height: 70,
-                }, children: _jsxs("div", { style: { display: 'flex' }, 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 })) }))] }) })] }));
+                }, children: _jsxs("div", { style: { display: 'flex', gap: 12 }, 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: {
-        boxSizing: 'border-box',
-        flex: '150 0 auto',
-        minWidth: '50px',
-        width: '150px',
-        position: 'relative',
-        cursor: 'pointer',
-        background: 'rgb(249, 250, 251)',
-        borderRight: '1px solid rgb(229, 231, 235)',
-        whiteSpace: 'nowrap',
-        display: 'flex',
-        alignItems: 'center',
-        overflowX: 'visible',
-        margin: '0px',
-        textOverflow: 'ellipsis',
-        minHeight: '36px',
-        // 2.25rem * 16px = 36px
-    },
-    columnHeaderLabel: {
-        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)',
-        textDecoration: 'none',
-        fontWeight: 500,
-        fontSize: '14px', // 0.875rem * 16px = 14px
-        lineHeight: '20px', // 1.25rem * 16px = 20px
-        textOverflow: 'ellipsis',
-        whiteSpace: 'nowrap',
-        overflow: 'hidden',
-    },
-};
-export const SchemaListComponent = ({ schema, theme, loading, LoadingComponent, width, }) => {
+export const SchemaListComponent = ({ schema, theme, loading, LoadingComponent, width, onClick = () => { }, }) => {
     if (loading) {
         return (_jsxs("div", { style: {
                 background: theme.backgroundColor,
@@ -425,9 +395,9 @@ export const SchemaListComponent = ({ schema, theme, loading, LoadingComponent,
             // maxHeight: "100%",
             paddingLeft: 20,
             paddingRight: 30,
-        }, children: schema.map((elem, index) => (_jsx(SchemaItem, { elem: elem, theme: theme, index: index }, elem.displayName + index))) }));
+        }, children: schema.map((elem, index) => (_jsx(SchemaItem, { elem: elem, theme: theme, index: index, onClick: onClick }, elem.displayName + index))) }));
 };
-function SchemaItem({ elem, theme, index }) {
+function SchemaItem({ elem, theme, index, onClick }) {
     const [isOpen, setIsOpen] = useState(index === 0);
     const schemaContainerStyle = {
         display: 'flex',
@@ -445,12 +415,11 @@ function SchemaItem({ elem, theme, index }) {
         alignItems: 'center',
         width: '100%',
         justifyContent: 'space-between',
-        cursor: 'pointer',
     };
     const schemaRowHoverStyle = {
         background: theme.selectUnderlayColor,
     };
-    return (_jsxs("div", { style: schemaContainerStyle, children: [_jsxs("div", { style: { ...schemaRowStyle, ...(isOpen && schemaRowHoverStyle) }, onClick: () => setIsOpen(!isOpen), children: [_jsx("p", { style: {
+    return (_jsxs("div", { style: schemaContainerStyle, children: [_jsxs("div", { style: { ...schemaRowStyle, ...(isOpen && schemaRowHoverStyle) }, children: [_jsx("p", { style: {
                             marginLeft: theme.padding,
                             fontSize: 13,
                             color: '#384151',
@@ -460,9 +429,10 @@ function SchemaItem({ elem, theme, index }) {
                             margin: 0,
                             textOverflow: 'ellipsis',
                             overflow: 'hidden',
+                            cursor: 'pointer',
                             userSelect: 'none',
                             fontFamily: theme?.fontFamily,
-                        }, title: elem.displayName, children: elem.displayName }), _jsx("div", { style: {
+                        }, title: elem.displayName, onClick: onClick, children: elem.displayName }), _jsx("div", { style: {
                             display: 'flex',
                             alignItems: 'center',
                             justifyContent: 'center',
@@ -472,7 +442,7 @@ function SchemaItem({ elem, theme, index }) {
                             paddingLeft: 0,
                             cursor: 'pointer',
                             userSelect: 'none',
-                        }, children: isOpen ? (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "12", height: "12", 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" }) })) : (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "12", height: "12", 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: {
+                        }, onClick: () => setIsOpen(!isOpen), children: isOpen ? (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "12", height: "12", 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" }) })) : (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "12", height: "12", 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',

package/dist/esm/components/Chart/BarChart.d.ts

@@ -1,7 +1,8 @@
 /// <reference types="react" />
+import { type ColorMapType } from '../../Chart';
 export default function BarChart({ colors, colorMap, yAxisFields, data, containerStyle, xAxisField, xAxisFormat, theme, comparison, isStacked, isAnimationActive, hideXAxis, hideYAxis, hideCartesianGrid, }: {
     colors?: string[];
-    colorMap?: any;
+    colorMap?: ColorMapType;
     yAxisFields: any[];
     data: any[];
     containerStyle?: React.CSSProperties;

package/dist/esm/components/Chart/BarChart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BarChart.d.ts","sourceRoot":"","sources":["../../../../src/components/Chart/BarChart.tsx"],"names":[],"mappings":";AAiBA,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,EAC/B,MAAM,EACN,QAAQ,EACR,WAAW,EACX,IAAI,EACJ,cAAc,EACd,UAAU,EACV,WAAW,EACX,KAAK,EACL,UAAU,EACV,SAAS,EACT,iBAAwB,EACxB,SAAiB,EACjB,SAAiB,EACjB,iBAAyB,GAC1B,EAAE;IACD,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,QAAQ,CAAC,EAAE,GAAG,CAAC;IACf,WAAW,EAAE,GAAG,EAAE,CAAC;IACnB,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACrC,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,GAAG,CAAC;IACX,UAAU,EAAE,OAAO,CAAC;IACpB,SAAS,EAAE,OAAO,CAAC;IACnB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,OAAO,CAAC;IACnB,iBAAiB,EAAE,OAAO,CAAC;CAC5B,2CAwKA"}
+{"version":3,"file":"BarChart.d.ts","sourceRoot":"","sources":["../../../../src/components/Chart/BarChart.tsx"],"names":[],"mappings":";AAgBA,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,aAAa,CAAC;AAEhD,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,EAC/B,MAAM,EACN,QAAQ,EACR,WAAW,EACX,IAAI,EACJ,cAAc,EACd,UAAU,EACV,WAAW,EACX,KAAK,EACL,UAAU,EACV,SAAS,EACT,iBAAwB,EACxB,SAAiB,EACjB,SAAiB,EACjB,iBAAyB,GAC1B,EAAE;IACD,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB,WAAW,EAAE,GAAG,EAAE,CAAC;IACnB,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACrC,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,GAAG,CAAC;IACX,UAAU,EAAE,OAAO,CAAC;IACpB,SAAS,EAAE,OAAO,CAAC;IACnB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,OAAO,CAAC;IACnB,iBAAiB,EAAE,OAAO,CAAC;CAC5B,2CAgLA"}

package/dist/esm/components/Chart/BarChart.js

@@ -23,6 +23,13 @@ export default function BarChart({ colors, colorMap, yAxisFields, data, containe
         });
         setFormattedData(curData);
     }, [data]);
+    const getCustomColor = (field) => {
+        const key = field.startsWith('comparison_') ? 'comparison' : 'primary';
+        field = field.replace('comparison_', '');
+        if (colorMap && colorMap[field])
+            return colorMap[field][key];
+        return undefined;
+    };
     if (!data || data.length === 0) {
         return (_jsx("div", { style: {
                 display: 'flex',
@@ -39,12 +46,12 @@ export default function BarChart({ colors, colorMap, yAxisFields, data, containe
     return (_jsx("div", { style: {
             boxSizing: 'content-box',
             ...containerStyle,
-        }, children: _jsx(ResponsiveContainer, { width: "100%", height: '100%', children: _jsxs(ReChartsBarChart, { data: formattedData, layout: 'horizontal', children: [!hideCartesianGrid && (_jsx(CartesianGrid, { horizontal: true, vertical: false, stroke: "#e5e7eb" })), _jsx(YAxis, { width: 44, hide: hideYAxis, axisLine: false, tickLine: false, type: "number", domain: getDomain(data, yAxisFields), tick: { transform: 'translate(-3, 0)' }, style: {
+        }, children: _jsx(ResponsiveContainer, { width: "100%", height: '100%', children: _jsxs(ReChartsBarChart, { data: formattedData, layout: 'horizontal', children: [!hideCartesianGrid && (_jsx(CartesianGrid, { horizontal: true, vertical: false, stroke: "#e5e7eb" })), _jsx(YAxis, { width: 44, hide: hideYAxis, axisLine: false, tickLine: false, type: "number", domain: getDomain(data, yAxisFields), tick: { transform: 'translate(-3, 0)' }, tickCount: 5, style: {
                             fontSize: '12px',
                             fontFamily: theme.chartLabelFontFamily,
                         }, tickFormatter: (tick) => axisFormatter({
                             value: tick,
-                            field: yAxisFields[0].field || 'what',
+                            field: yAxisFields[0]?.field,
                             fields: yAxisFields,
                         }) }), _jsx(XAxis, { hide: hideXAxis, dataKey: xAxisField, tick: { transform: 'translate(0, 6)' }, style: {
                             fontSize: '12px',
@@ -73,7 +80,7 @@ export default function BarChart({ colors, colorMap, yAxisFields, data, containe
                         }, position: { y: 0 } }), yAxisFields.map((elem) => {
                         return (_jsx(Bar, { name: elem.label, dataKey: elem.field, stackId: isStacked &&
                                 (elem.field?.replace('comparison_', '') ??
-                                    'unknown'), type: "linear", fill: (colorMap && colorMap[elem.field]) ??
+                                    'unknown'), type: "linear", fill: getCustomColor(elem.field) ??
                                 selectColor(elem, colors, yAxisFields.findIndex((field) => field.field === elem.field?.replace('comparison_', ''))), isAnimationActive: isAnimationActive }, elem.field));
                     })] }) }) }));
 }

package/dist/esm/components/Chart/LineChart.d.ts

@@ -1,7 +1,8 @@
 /// <reference types="react" />
-export default function LineChart({ colors, colorMap, yAxisFields, data, containerStyle, xAxisField, xAxisFormat, theme, comparison, isAnimationActive, hideXAxis, hideYAxis, hideCartesianGrid, dashedComparison, customPrimaryColor, customComparisonColor, singlePointStyle, }: {
+import { type ColorMapType } from '../../Chart';
+export default function LineChart({ colors, colorMap, yAxisFields, data, containerStyle, xAxisField, xAxisFormat, theme, comparison, isAnimationActive, hideXAxis, hideYAxis, hideCartesianGrid, dashedComparison, singlePointStyle, }: {
     colors?: string[];
-    colorMap?: any;
+    colorMap?: ColorMapType;
     yAxisFields: any[];
     data: any[];
     containerStyle?: React.CSSProperties;
@@ -15,8 +16,6 @@ export default function LineChart({ colors, colorMap, yAxisFields, data, contain
     hideYAxis: boolean;
     hideCartesianGrid: boolean;
     dashedComparison: boolean;
-    customPrimaryColor: string | undefined;
-    customComparisonColor: string | undefined;
     singlePointStyle: 'dot' | 'line';
 }): import("react/jsx-runtime").JSX.Element | null;
 //# sourceMappingURL=LineChart.d.ts.map

package/dist/esm/components/Chart/LineChart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LineChart.d.ts","sourceRoot":"","sources":["../../../../src/components/Chart/LineChart.tsx"],"names":[],"mappings":";AAiBA,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAChC,MAAM,EACN,QAAa,EACb,WAAW,EACX,IAAI,EACJ,cAAc,EACd,UAAU,EACV,WAAW,EACX,KAAK,EACL,UAAU,EACV,iBAAwB,EACxB,SAAiB,EACjB,SAAiB,EACjB,iBAAyB,EACzB,gBAAwB,EACxB,kBAA8B,EAC9B,qBAAiC,EACjC,gBAAwB,GACzB,EAAE;IACD,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,QAAQ,CAAC,EAAE,GAAG,CAAC;IACf,WAAW,EAAE,GAAG,EAAE,CAAC;IACnB,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACrC,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,GAAG,CAAC;IACX,UAAU,EAAE,GAAG,CAAC;IAChB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,OAAO,CAAC;IACnB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,gBAAgB,EAAE,OAAO,CAAC;IAC1B,kBAAkB,EAAE,MAAM,GAAG,SAAS,CAAC;IACvC,qBAAqB,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1C,gBAAgB,EAAE,KAAK,GAAG,MAAM,CAAC;CAClC,kDAkOA"}
+{"version":3,"file":"LineChart.d.ts","sourceRoot":"","sources":["../../../../src/components/Chart/LineChart.tsx"],"names":[],"mappings":";AAgBA,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,aAAa,CAAC;AAGhD,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAChC,MAAM,EACN,QAAa,EACb,WAAW,EACX,IAAI,EACJ,cAAc,EACd,UAAU,EACV,WAAW,EACX,KAAK,EACL,UAAU,EACV,iBAAwB,EACxB,SAAiB,EACjB,SAAiB,EACjB,iBAAyB,EACzB,gBAAwB,EACxB,gBAAwB,GACzB,EAAE;IACD,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB,WAAW,EAAE,GAAG,EAAE,CAAC;IACnB,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACrC,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,GAAG,CAAC;IACX,UAAU,EAAE,GAAG,CAAC;IAChB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,OAAO,CAAC;IACnB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,gBAAgB,EAAE,OAAO,CAAC;IAC1B,gBAAgB,EAAE,KAAK,GAAG,MAAM,CAAC;CAClC,kDA6OA"}

package/dist/esm/components/Chart/LineChart.js

@@ -7,7 +7,8 @@ import { selectColor } from '../../utils/color';
 import ChartTooltip from '../../components/Chart/ChartTooltip';
 import getDomain from '../../utils/getDomain';
 import { useEffect, useState } from 'react';
-export default function LineChart({ colors, colorMap = {}, yAxisFields, data, containerStyle, xAxisField, xAxisFormat, theme, comparison, isAnimationActive = true, hideXAxis = false, hideYAxis = false, hideCartesianGrid = false, dashedComparison = false, customPrimaryColor = undefined, customComparisonColor = undefined, singlePointStyle = 'dot', }) {
+import { hashCode } from '../../utils/crypto';
+export default function LineChart({ colors, colorMap = {}, yAxisFields, data, containerStyle, xAxisField, xAxisFormat, theme, comparison, isAnimationActive = true, hideXAxis = false, hideYAxis = false, hideCartesianGrid = false, dashedComparison = false, singlePointStyle = 'dot', }) {
     const [formattedData, setFormattedData] = useState([]);
     if (!yAxisFields || !yAxisFields.length) {
         return null;
@@ -44,19 +45,21 @@ export default function LineChart({ colors, colorMap = {}, yAxisFields, data, co
                 fontSize: 13,
                 color: theme.secondaryTextColor,
                 ...containerStyle,
-            }, children: "No results found for specified time period." }));
+            }, children: "No results" }));
     }
     // Allows the users to override the color scheme on a per-chart basis.
-    const getCustomColor = (index, field) => {
-        if (index === 0 && customPrimaryColor) {
-            return customPrimaryColor;
-        }
-        if (index === 1 && comparison && customComparisonColor) {
-            return customComparisonColor;
-        }
+    const getCustomColor = (index, field, gradient) => {
+        let key = index === 0 ? 'primary' : 'comparison';
         if (colorMap && colorMap[field]) {
-            // console.log(field, '->', colorMap[field]);
-            return colorMap[field];
+            if (index === 0 && gradient === 'start')
+                key = 'primaryGradientStart';
+            if (index === 0 && gradient === 'stop')
+                key = 'primaryGradientStop';
+            if (index === 1 && gradient === 'start')
+                key = 'comparisonGradientStart';
+            if (index === 1 && gradient === 'stop')
+                key = 'comparisonGradientStop';
+            return colorMap[field][key];
         }
         return undefined; // use the default colors from the theme
     };
@@ -72,7 +75,7 @@ export default function LineChart({ colors, colorMap = {}, yAxisFields, data, co
                                 field: xAxisField,
                                 fields: [{ field: xAxisField, format: xAxisFormat }],
                             });
-                        } }), _jsx(YAxis, { hide: hideYAxis, width: 44, axisLine: false, tickLine: false, type: "number", domain: getDomain(data, yAxisFields), tick: { transform: 'translate(-3, 0)' }, style: {
+                        } }), _jsx(YAxis, { hide: hideYAxis, width: 44, axisLine: false, tickLine: false, type: "number", domain: getDomain(data, yAxisFields), tick: { transform: 'translate(-3, 0)' }, tickCount: 5, style: {
                             fontSize: '12px',
                             fontFamily: theme?.chartLabelFontFamily ||
                                 theme?.fontFamily ||
@@ -104,7 +107,21 @@ export default function LineChart({ colors, colorMap = {}, yAxisFields, data, co
                                         { field: xAxisField, format: xAxisFormat },
                                     ],
                                 }), xAxisFormat: xAxisFormat, xAxisField: xAxisField, colors: colors, theme: theme }));
-                        }, position: { y: 0 } }), yAxisFields.map((elem, index) => (_jsx("defs", { children: _jsxs("linearGradient", { id: `gradient${elem.field}${index}`, x1: "0", y1: "0", x2: "0", y2: "1", children: [_jsx("stop", { offset: "5%", stopColor: getCustomColor(index, elem.field) ??
-                                        selectColor(elem, colors, index), stopOpacity: 0.4 }), _jsx("stop", { offset: "95%", stopColor: 'rgba(0,0,0,0)', stopOpacity: 0 })] }) }, `defs${elem.field + index}`))), yAxisFields.map((elem, index) => (_jsx(Area, { name: elem.label, type: "linear", dataKey: elem.field, stroke: getCustomColor(index, elem.field) ??
-                            selectColor(elem, colors, index), fill: `url(#gradient${elem.field}${index})`, strokeWidth: 2, dot: false, strokeDasharray: comparison && dashedComparison && index > 0 ? '5 5' : undefined, isAnimationActive: isAnimationActive }, elem.field)))] }) }) }));
+                        }, position: { y: 0 } }), yAxisFields.map((elem, index) => {
+                        // hash the color stops so they're stable, valid html ids
+                        const gradientStart = getCustomColor(index, elem.field, 'start') ??
+                            selectColor(elem, colors, index);
+                        const gradientStop = getCustomColor(index, elem.field, 'stop') ?? '#00000000';
+                        const uniqueId = `gradient_${hashCode(gradientStart)}_${hashCode(gradientStop)}`;
+                        return (_jsx("defs", { children: _jsxs("linearGradient", { id: uniqueId, x1: "0", y1: "0", x2: "0", y2: "1", children: [_jsx("stop", { offset: "5%", stopColor: gradientStart, stopOpacity: 0.4 }), _jsx("stop", { offset: "95%", stopColor: gradientStop, stopOpacity: 0 })] }) }, `defs_${uniqueId}_${index}`));
+                    }), yAxisFields.map((elem, index) => {
+                        const gradientStart = hashCode(getCustomColor(index, elem.field, 'start') ??
+                            selectColor(elem, colors, index));
+                        const gradientStop = hashCode(getCustomColor(index, elem.field, 'stop') ?? '#00000000');
+                        const uniqueId = `gradient_${gradientStart}_${gradientStop}`;
+                        return (_jsx(Area, { name: elem.label, type: "linear", dataKey: elem.field, stroke: getCustomColor(index, elem.field) ??
+                                selectColor(elem, colors, index), fill: `url(#${uniqueId})`, strokeWidth: 2, dot: false, strokeDasharray: comparison && dashedComparison && index > 0
+                                ? '5 5'
+                                : undefined, isAnimationActive: isAnimationActive }, elem.field));
+                    })] }) }) }));
 }

package/dist/esm/components/Dashboard/ChartComponent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChartComponent.d.ts","sourceRoot":"","sources":["../../../../src/components/Dashboard/ChartComponent.tsx"],"names":[],"mappings":";AAAA,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EACpC,aAAa,EACb,oBAAoB,EACpB,KAAK,EACL,KAAK,EACL,QAAQ,GACT,EAAE,GAAG,GAAG,GAAG,CAAC,OAAO,CAqGnB"}
+{"version":3,"file":"ChartComponent.d.ts","sourceRoot":"","sources":["../../../../src/components/Dashboard/ChartComponent.tsx"],"names":[],"mappings":";AAAA,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EACpC,aAAa,EACb,oBAAoB,EACpB,KAAK,EACL,KAAK,EACL,QAAQ,GACT,EAAE,GAAG,GAAG,GAAG,CAAC,OAAO,CAkGnB"}

package/dist/esm/components/Dashboard/ChartComponent.js

@@ -3,13 +3,10 @@ export default function DashboardItem({ dashboardItem, onClickDashboardItem, the
     return (_jsx("div", { onClick: onClickDashboardItem
             ? () => onClickDashboardItem(dashboardItem)
             : () => { }, style: {
-            // height: '100%',
             cursor: 'pointer',
             boxSizing: 'content-box',
-            paddingRight: 25,
             minHeight: 400,
             borderRadius: 8,
-            paddingTop: 20,
             ...style,
         }, children: _jsx("div", { style: {
                 width: '100%',

package/dist/esm/components/Dashboard/DashboardSection.js

@@ -4,8 +4,8 @@ export default function DashboardSection({ section, children, }) {
     if (section === 'tables')
         return (_jsx("div", { style: {
                 boxSizing: 'content-box',
-                width: `100%`,
-                gap: 20,
+                width: '100%',
+                gap: 40,
                 display: 'flex',
                 flexDirection: 'column',
             }, children: children }));
@@ -15,8 +15,8 @@ export default function DashboardSection({ section, children, }) {
             width: '100%',
             listStyleType: 'none',
             display: 'grid',
-            gap: 20,
-            gridTemplateColumns: `repeat(auto-fill,minmax(400px, 1fr))`,
+            gap: 40,
+            gridTemplateColumns: 'repeat(auto-fill,minmax(400px, 1fr))',
             gridTemplateRows: `repeat(${170}px)`,
         }, children: children }));
 }

package/dist/esm/components/Dashboard/DashboardSectionContainer.js

@@ -4,7 +4,7 @@ export default function DashboardSectionContainer({ style, children, ...props })
             width: '100%',
             display: 'flex',
             flexDirection: 'column',
-            gap: 20,
+            gap: 40,
             ...style,
         }, ...props, children: children }));
 }

package/dist/esm/components/Dashboard/DataLoader.d.ts

@@ -1,3 +1,10 @@
 /// <reference types="react" />
-export default function DataLoader({ id, children }: any): JSX.Element;
+export type DataLoaderChildProps = {
+    isLoading: boolean;
+    error: string | null;
+};
+export default function DataLoader({ id, children, }: {
+    id: string;
+    children: ({ isLoading, error }: DataLoaderChildProps) => JSX.Element;
+}): JSX.Element;
 //# sourceMappingURL=DataLoader.d.ts.map

package/dist/esm/components/Dashboard/DataLoader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DataLoader.d.ts","sourceRoot":"","sources":["../../../../src/components/Dashboard/DataLoader.tsx"],"names":[],"mappings":";AAWA,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,GAAG,GAAG,GAAG,CAAC,OAAO,CAuErE"}
+{"version":3,"file":"DataLoader.d.ts","sourceRoot":"","sources":["../../../../src/components/Dashboard/DataLoader.tsx"],"names":[],"mappings":";AAUA,MAAM,MAAM,oBAAoB,GAAG;IACjC,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;CACtB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,EAAE,EACF,QAAQ,GACT,EAAE;IACD,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,oBAAoB,KAAK,GAAG,CAAC,OAAO,CAAC;CACvE,GAAG,GAAG,CAAC,OAAO,CA+Ed"}

package/dist/esm/components/Dashboard/DataLoader.js

@@ -1,16 +1,20 @@
 import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
-import { useContext, useEffect } from 'react';
+import { useContext, useEffect, useState } from 'react';
 import { didFiltersChange } from '../../Chart';
 import { ClientContext, DashboardContext, DashboardFiltersContext, } from '../../Context';
 import { getData } from '../../utils/dataFetcher';
 import { mergeComparisonRange } from '../../utils/merge';
-export default function DataLoader({ id, children }) {
+export default function DataLoader({ id, children, }) {
     const [client, _] = useContext(ClientContext);
     const { dispatch, dashboard } = useContext(DashboardContext);
     const { dashboardFilters } = useContext(DashboardFiltersContext);
+    const [isLoading, setIsLoading] = useState(true);
+    const [error, setError] = useState(null);
     useEffect(() => {
         async function getChartOptions() {
+            setIsLoading(true);
             if (!didFiltersChange(dashboard[id], dashboardFilters)) {
+                setIsLoading(false);
                 return;
             }
             try {
@@ -41,7 +45,7 @@ export default function DataLoader({ id, children }) {
                     filters: minimalFilters,
                 };
                 const resp = await getData(client, 'itempost', 'omit', hostedBody, cloudBody);
-                if (resp && resp.name !== 'error') {
+                if (resp && resp.name !== 'error' && !resp.errorMessage) {
                     if (resp.compareRows) {
                         mergeComparisonRange(resp);
                     }
@@ -55,12 +59,17 @@ export default function DataLoader({ id, children }) {
                         },
                     });
                 }
+                else {
+                    setError(resp?.errorMessage);
+                }
+                setIsLoading(false);
             }
             catch (e) {
                 console.log('Error fetching chart: ', e);
+                setError(e.message);
             }
         }
         getChartOptions();
     }, [dashboardFilters, client, id]);
-    return _jsx(_Fragment, { children: children });
+    return _jsx(_Fragment, { children: children({ isLoading, error }) });
 }

package/dist/esm/components/Dashboard/MetricComponent.d.ts

@@ -1,3 +1,14 @@
 /// <reference types="react" />
-export default function DashboardItem({ dashboardItem, onClickDashboardItem, theme, style, children, }: any): JSX.Element;
+import { DashboardItem } from '../../Dashboard';
+interface DashboardItemProps {
+    dashboardItem: DashboardItem;
+    onClickDashboardItem?: any;
+    error?: string | null;
+    isLoading?: boolean;
+    children?: any;
+    theme?: any;
+    style?: any;
+}
+export default function QuillMetricComponent({ dashboardItem, onClickDashboardItem, error, isLoading, theme, style, }: DashboardItemProps): JSX.Element;
+export {};
 //# sourceMappingURL=MetricComponent.d.ts.map

package/dist/esm/components/Dashboard/MetricComponent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MetricComponent.d.ts","sourceRoot":"","sources":["../../../../src/components/Dashboard/MetricComponent.tsx"],"names":[],"mappings":";AAAA,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EACpC,aAAa,EACb,oBAAoB,EACpB,KAAK,EACL,KAAK,EACL,QAAQ,GACT,EAAE,GAAG,GAAG,GAAG,CAAC,OAAO,CAsGnB"}
+{"version":3,"file":"MetricComponent.d.ts","sourceRoot":"","sources":["../../../../src/components/Dashboard/MetricComponent.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAMhD,UAAU,kBAAkB;IAC1B,aAAa,EAAE,aAAa,CAAC;IAC7B,oBAAoB,CAAC,EAAE,GAAG,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,GAAG,CAAC;IACf,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,KAAK,CAAC,EAAE,GAAG,CAAC;CACb;AAED,MAAM,CAAC,OAAO,UAAU,oBAAoB,CAAC,EAC3C,aAAa,EACb,oBAAoB,EACpB,KAAK,EACL,SAAS,EACT,KAAK,EACL,KAAK,GACN,EAAE,kBAAkB,GAAG,GAAG,CAAC,OAAO,CAkPlC"}