@quillsql/react 2.12.28 → 2.12.30

package/dist/cjs/Table.js

@@ -6,12 +6,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const Context_1 = require("./Context");
-const dataFetcher_1 = require("./utils/dataFetcher");
 const QuillTable_1 = __importDefault(require("./components/QuillTable"));
 const useExport_1 = require("./hooks/useExport");
-const errorProcessing_1 = require("./utils/errorProcessing");
-const dashboard_1 = require("./utils/dashboard");
-const valueFormatter_1 = require("./utils/valueFormatter");
 const filterProcessing_1 = require("./utils/filterProcessing");
 const UiComponents_1 = require("./components/UiComponents");
 const DashboardFilter_1 = require("./components/Dashboard/DashboardFilter");
@@ -19,6 +15,9 @@ const QuillSelect_1 = require("./components/QuillSelect");
 const QuillMultiSelect_1 = require("./components/QuillMultiSelect");
 const QuillDateRangePicker_1 = require("./DateRangePicker/QuillDateRangePicker");
 const hooks_1 = require("./hooks");
+const report_1 = require("./utils/report");
+const tableProcessing_1 = require("./utils/tableProcessing");
+const paginationProcessing_1 = require("./utils/paginationProcessing");
 /**
  * ### Quill Table
  *
@@ -51,16 +50,15 @@ const hooks_1 = require("./hooks");
  * @see https://docs.quillsql.com/components/table
  */
 const Table = (props) => {
-    let data = props;
-    const { dispatch, dashboard } = (0, react_1.useContext)(Context_1.DashboardContext);
-    const { dashboardFilters } = (0, react_1.useContext)(Context_1.DashboardFiltersContext);
-    const [client, _] = (0, react_1.useContext)(Context_1.ClientContext);
+    const data = props;
+    const { dashboard } = (0, react_1.useContext)(Context_1.DashboardContext);
+    const [client] = (0, react_1.useContext)(Context_1.ClientContext);
     if ('rows' in data && 'columns' in data) {
         return ((0, jsx_runtime_1.jsx)(QuillTable_1.default, { hideCSVDownloadButton: data.hideCSVDownloadButton, columns: data.columns, rows: data.rows, className: data.className, containerStyle: data.containerStyle, LoadingComponent: data.LoadingComponent, isLoading: data.isLoading, downloadCSV: data.downloadCSV }));
     }
-    return ((0, jsx_runtime_1.jsx)(ChartUpdater, { hideCSVDownloadButton: data.hideCSVDownloadButton, dispatch: dispatch, dashboardContext: dashboard, reportId: data.reportId, className: data.className, containerStyle: data.containerStyle, dashboardFilters: dashboardFilters, client: client, csvFilename: data.csvFilename, LoadingComponent: data.LoadingComponent, SelectComponent: data.SelectComponent, MultiSelectComponent: data.MultiSelectComponent, DateRangePickerComponent: data.DateRangePickerComponent, FilterContainerComponent: data.FilterContainerComponent, hideFilters: data.hideFilters }));
+    return ((0, jsx_runtime_1.jsx)(ChartUpdater, { hideCSVDownloadButton: data.hideCSVDownloadButton, dashboardContext: dashboard, reportId: data.reportId, className: data.className, containerStyle: data.containerStyle, client: client, LoadingComponent: data.LoadingComponent, SelectComponent: data.SelectComponent, MultiSelectComponent: data.MultiSelectComponent, DateRangePickerComponent: data.DateRangePickerComponent, FilterContainerComponent: data.FilterContainerComponent, hideFilters: data.hideFilters }));
 };
-const ChartUpdater = ({ reportId, containerStyle, className, dashboardContext, dispatch, client, dashboardFilters, csvFilename, hideCSVDownloadButton = true, hideFilters = true, LoadingComponent, SelectComponent = QuillSelect_1.QuillSelectComponent, MultiSelectComponent = QuillMultiSelect_1.QuillMultiSelectComponent, DateRangePickerComponent = QuillDateRangePicker_1.QuillDateRangePicker, FilterContainerComponent = UiComponents_1.QuillFilterContainerComponent, }) => {
+const ChartUpdater = ({ reportId, containerStyle, className, dashboardContext, client, hideCSVDownloadButton = true, hideFilters = true, pagination = paginationProcessing_1.DEFAULT_PAGINATION, LoadingComponent, SelectComponent = QuillSelect_1.QuillSelectComponent, MultiSelectComponent = QuillMultiSelect_1.QuillMultiSelectComponent, DateRangePickerComponent = QuillDateRangePicker_1.QuillDateRangePicker, FilterContainerComponent = UiComponents_1.QuillFilterContainerComponent, }) => {
     const [loading, setLoading] = (0, react_1.useState)(false);
     const [initialLoad, setInitialLoad] = (0, react_1.useState)(true);
     const { downloadCSV } = (0, useExport_1.useExport)(reportId);
@@ -69,108 +67,127 @@ const ChartUpdater = ({ reportId, containerStyle, className, dashboardContext, d
     const [columns, setColumns] = (0, react_1.useState)([]);
     const [tableFilters, setTableFilters] = (0, react_1.useState)([]);
     const [filterUpdateIndex, setFilterUpdateIndex] = (0, react_1.useState)(0);
+    const [previousPage, setPreviousPage] = (0, react_1.useState)(1);
+    const [rowCount, setRowCount] = (0, react_1.useState)(0);
     const { reportFiltersDispatch, reportFilters } = (0, react_1.useContext)(Context_1.ReportFiltersContext);
+    const [currentProcessing, setCurrentProcessing] = (0, react_1.useState)({
+        page: pagination,
+    });
     const theme = (0, hooks_1.useTheme)();
-    const getChartData = async (useReportTask = true, reportFilterInfo) => {
-        try {
-            const filters = reportFilterInfo.filters;
+    const onPageChange = (page) => {
+        if (currentProcessing.page &&
+            page > previousPage &&
+            (0, paginationProcessing_1.shouldFetchMore)(paginationProcessing_1.DEFAULT_PAGINATION, page, previousPage)) {
+            const newPagination = { ...currentProcessing.page, page };
+            const updatedProcessing = { ...currentProcessing, page: newPagination };
+            setCurrentProcessing(updatedProcessing);
+            updateTableRows(updatedProcessing);
+        }
+        if (page > previousPage) {
+            setPreviousPage(page);
+        }
+    };
+    const onSortChange = (sort) => {
+        if ((0, paginationProcessing_1.shouldSortInMemory)(paginationProcessing_1.DEFAULT_PAGINATION, rowCount)) {
+            return;
+        }
+        const updatedProcessing = { page: paginationProcessing_1.DEFAULT_PAGINATION, sort };
+        updateTableRows(updatedProcessing, true);
+        setCurrentProcessing(updatedProcessing);
+        setPreviousPage(0);
+    };
+    const updateTableRows = async (processing, resetRows = false) => {
+        if (!loading) {
             setLoading(true);
-            if (!client.databaseType ||
-                client.databaseType.toLowerCase() !== 'postgresql') {
-                useReportTask = false;
-            }
-            const hostedBody = {
-                metadata: {
-                    reportId,
-                    dashboardItemId: reportId,
-                    orgId: client.customerId || '*',
-                    clientId: client.publicKey,
-                    task: useReportTask ? 'report' : 'item',
-                    getDefaultDashboardFilters: filters ? false : true,
-                    databaseType: client?.databaseType,
-                    customFields,
-                    filters,
-                },
-            };
-            const cloudBody = {
-                id: reportId,
-            };
-            const resp = await (0, dataFetcher_1.getData)(client, 'itempost', 'same-origin', hostedBody, cloudBody);
-            (0, errorProcessing_1.processFilterErrorList)(resp);
-            if (resp && resp.name !== 'error' && !resp.errorMessage) {
-                const cleanedReport = await (0, dashboard_1.cleanDashboardItem)(resp, filters ? filters : resp.filters);
-                if (cleanedReport.chartType === 'table' && cleanedReport.pivot) {
-                    cleanedReport.columns = cleanedReport.yAxisFields;
+            try {
+                const updatedProcessing = { ...currentProcessing, ...processing };
+                const paginatedRows = await (0, tableProcessing_1.fetchTableByReport)(reportId, client, updatedProcessing, tableFilters, customFields);
+                if (paginatedRows.error) {
+                    throw new Error('Error fetching chart');
                 }
-                let filterArray = filters;
-                if (!filterArray) {
-                    filterArray = resp.filters
-                        ? resp.filters.map((filter) => {
-                            return (0, filterProcessing_1.processFilterFromBackend)(filter, resp.rows);
-                        })
-                        : [];
-                    reportFiltersDispatch({
-                        type: 'UPDATE_REPORT_FILTER',
-                        id: reportId,
-                        data: {
-                            filters: filterArray,
-                            updateIndex: reportFilterInfo.updateIndex,
-                        },
-                    });
+                const formattedNewRows = (0, report_1.formatRowsFromReport)(paginatedRows);
+                let tempRows = [...rows, ...formattedNewRows];
+                if (resetRows) {
+                    tempRows = formattedNewRows;
                 }
-                setFilterUpdateIndex(reportFilterInfo.updateIndex);
-                setTableFilters(filterArray);
+                setRows(tempRows);
+                setTimeout(() => {
+                    setLoading(false);
+                }, 200);
             }
-            setRows(resp.rows.map((row) => {
-                return resp.columns.reduce((formattedRow, column) => {
-                    // Apply the format function to each field in the row
-                    const formattedValue = (0, valueFormatter_1.quillFormat)({
-                        value: row[column.field],
-                        format: column.format,
-                    });
-                    formattedRow[column.field] = formattedValue;
-                    return formattedRow;
-                }, {});
-            }));
-            setColumns(resp.columns);
-            setLoading(false);
-        }
-        catch (e) {
-            if (useReportTask) {
-                getChartData(false, reportFilterInfo);
+            catch (e) {
+                console.log(e);
+                setLoading(false);
             }
-            console.log('Error fetching chart: ', e);
+        }
+    };
+    const fetchReportHelper = async (useReportTask = true, reportFilters, processing) => {
+        setLoading(true);
+        const { report, error } = await (0, report_1.fetchReport)(reportId, client, useReportTask, reportFilters ? reportFilters.filters : [], processing, undefined, customFields);
+        if (error) {
             setLoading(false);
+            setInitialLoad(false);
+            setRows([]);
+            return;
         }
+        let filterArray = reportFilters.filters;
+        // THIS SHOULD ONLY BE UNDEFINED ON INITIAL LOAD
+        if (!filterArray) {
+            filterArray = report.filtersApplied
+                ? report.filtersApplied.map((filter) => {
+                    return (0, filterProcessing_1.processFilterFromBackend)(filter, report.rows);
+                })
+                : [];
+            reportFiltersDispatch({
+                type: 'UPDATE_REPORT_FILTER',
+                id: reportId,
+                data: {
+                    filters: filterArray,
+                    updateIndex: reportFilters.updateIndex,
+                },
+            });
+        }
+        setRows((0, report_1.formatRowsFromReport)(report));
+        setTableFilters(filterArray);
+        setRowCount(report.rowCount);
+        setColumns(report.columns);
+        setLoading(false);
+        setInitialLoad(false);
     };
     (0, react_1.useEffect)(() => {
+        if (!client) {
+            return;
+        }
         // IF WE HAVE THE DATA IN DASHBOARD CONTEXT AND IT IS THE INITIAL LAOD DON'T FETCH DATA
         if (initialLoad && dashboardContext[reportId]) {
             setInitialLoad(false);
             return;
         }
-        setInitialLoad(false);
-        let parsedReportFilters = reportFilters[reportId]
+        const parsedReportFilters = reportFilters[reportId]
             ? reportFilters[reportId]
             : { updateIndex: 0 };
-        getChartData(true, parsedReportFilters);
-    }, [client.customerId, reportId, reportFilters[reportId]?.updateIndex]);
+        setCurrentProcessing({ page: paginationProcessing_1.DEFAULT_PAGINATION });
+        fetchReportHelper(true, parsedReportFilters, currentProcessing);
+    }, [client, reportId, reportFilters[reportId]?.updateIndex]);
     (0, react_1.useEffect)(() => {
         if (!dashboardContext || !dashboardContext[reportId]) {
             return;
         }
-        setRows(dashboardContext[reportId].rows.map((row) => {
-            return dashboardContext[reportId].columns.reduce((formattedRow, column) => {
-                // Apply the format function to each field in the row
-                const formattedValue = (0, valueFormatter_1.quillFormat)({
-                    value: row[column.field],
-                    format: column.format,
-                });
-                formattedRow[column.field] = formattedValue;
-                return formattedRow;
-            }, {});
-        }));
+        if (!dashboardContext[reportId].rows ||
+            !dashboardContext[reportId].columns) {
+            setRows([]);
+            setColumns([]);
+            return;
+        }
+        let filtersApplied = [];
+        if (dashboardContext[reportId].filtersApplied &&
+            dashboardContext[reportId].filtersApplied.length > 0) {
+            filtersApplied = dashboardContext[reportId].filtersApplied;
+        }
+        setRows((0, report_1.formatRowsFromReport)(dashboardContext[reportId]));
+        setRowCount(dashboardContext[reportId].rowCount);
         setColumns(dashboardContext[reportId].columns);
+        setTableFilters(filtersApplied);
     }, []);
     return ((0, jsx_runtime_1.jsxs)("div", { children: [!hideFilters && ((0, jsx_runtime_1.jsx)("div", { style: {
                     display: 'flex',
@@ -187,10 +204,11 @@ const ChartUpdater = ({ reportId, containerStyle, className, dashboardContext, d
                                 return f;
                             });
                             setTableFilters(updatedFilters);
-                            getChartData(true, {
+                            fetchReportHelper(true, {
                                 filters: updatedFilters,
                                 updateIndex: filterUpdateIndex + 1,
-                            });
+                            }, currentProcessing);
+                            setFilterUpdateIndex(filterUpdateIndex + 1);
                             reportFiltersDispatch({
                                 type: 'UPDATE_REPORT_FILTER',
                                 id: reportId,
@@ -199,6 +217,6 @@ const ChartUpdater = ({ reportId, containerStyle, className, dashboardContext, d
                                     updateIndex: filterUpdateIndex + 1,
                                 },
                             });
-                        }, theme: theme, SelectComponent: SelectComponent, MultiSelectComponent: MultiSelectComponent, DateRangePickerComponent: DateRangePickerComponent }, index))) }) })), (0, jsx_runtime_1.jsx)(QuillTable_1.default, { hideCSVDownloadButton: hideCSVDownloadButton, columns: columns ?? [], rows: rows ?? [], containerStyle: containerStyle, className: className, LoadingComponent: LoadingComponent, isLoading: loading, downloadCSV: downloadCSV })] }));
+                        }, theme: theme, SelectComponent: SelectComponent, MultiSelectComponent: MultiSelectComponent, DateRangePickerComponent: DateRangePickerComponent }, index))) }) })), (0, jsx_runtime_1.jsx)(QuillTable_1.default, { hideCSVDownloadButton: hideCSVDownloadButton, columns: columns ?? [], rows: rows ?? [], containerStyle: containerStyle, className: className, LoadingComponent: LoadingComponent, sort: currentProcessing.sort, isLoading: loading || initialLoad, downloadCSV: downloadCSV, onPageChange: onPageChange, onSortChange: onSortChange, rowCount: rowCount })] }));
 };
 exports.default = Table;

package/dist/cjs/TableChart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TableChart.d.ts","sourceRoot":"","sources":["../../src/TableChart.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAGvC,UAAU,UAAU;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,YAAa,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACxE,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,WAAW,EAAE,UAAU,EAAE,CAAC;IAC1B,MAAM,EAAE,MAAM,EAAE,CAAC;CAClB;AAED,wBAAgB,2BAA2B,CAAC,GAAG,KAAA,UAW9C;AAoED,QAAA,MAAM,UAAU,qFAsEf,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"TableChart.d.ts","sourceRoot":"","sources":["../../src/TableChart.tsx"],"names":[],"mappings":"AACA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAGvC,UAAU,UAAU;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,YAAa,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACxE,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,WAAW,EAAE,UAAU,EAAE,CAAC;IAC1B,MAAM,EAAE,MAAM,EAAE,CAAC;CAClB;AAED,wBAAgB,2BAA2B,CAAC,GAAG,KAAA,UAW9C;AAoED,QAAA,MAAM,UAAU,qFAsEf,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/cjs/TableChart.js

@@ -25,7 +25,6 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.hexToRgbaWith10PercentAlpha = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-/* eslint-disable react/display-name */
 // @ts-nocheck
 const react_1 = __importStar(require("react"));
 const valueFormatter_1 = require("./utils/valueFormatter");

package/dist/cjs/assets/ArrowDownHeadIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ArrowDownHeadIcon.d.ts","sourceRoot":"","sources":["../../../src/assets/ArrowDownHeadIcon.tsx"],"names":[],"mappings":"AAGA,QAAA,MAAM,iBAAiB;;6CAKtB,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"ArrowDownHeadIcon.d.ts","sourceRoot":"","sources":["../../../src/assets/ArrowDownHeadIcon.tsx"],"names":[],"mappings":"AAGA,QAAA,MAAM,iBAAiB;;6CActB,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/dist/cjs/assets/ArrowDownIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ArrowDownIcon.d.ts","sourceRoot":"","sources":["../../../src/assets/ArrowDownIcon.tsx"],"names":[],"mappings":"AAGA,QAAA,MAAM,aAAa;;6CAQlB,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"ArrowDownIcon.d.ts","sourceRoot":"","sources":["../../../src/assets/ArrowDownIcon.tsx"],"names":[],"mappings":"AAGA,QAAA,MAAM,aAAa;;6CAclB,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/dist/cjs/assets/ArrowDownRightIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ArrowDownRightIcon.d.ts","sourceRoot":"","sources":["../../../src/assets/ArrowDownRightIcon.tsx"],"names":[],"mappings":"AAGA,QAAA,MAAM,kBAAkB;;6CAQvB,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"ArrowDownRightIcon.d.ts","sourceRoot":"","sources":["../../../src/assets/ArrowDownRightIcon.tsx"],"names":[],"mappings":"AAGA,QAAA,MAAM,kBAAkB;;6CAcvB,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/dist/cjs/assets/ArrowLeftHeadIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ArrowLeftHeadIcon.d.ts","sourceRoot":"","sources":["../../../src/assets/ArrowLeftHeadIcon.tsx"],"names":[],"mappings":"AAGA,QAAA,MAAM,iBAAiB;;6CAKtB,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"ArrowLeftHeadIcon.d.ts","sourceRoot":"","sources":["../../../src/assets/ArrowLeftHeadIcon.tsx"],"names":[],"mappings":"AAGA,QAAA,MAAM,iBAAiB;;6CAUtB,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/dist/cjs/assets/ArrowRightHeadIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ArrowRightHeadIcon.d.ts","sourceRoot":"","sources":["../../../src/assets/ArrowRightHeadIcon.tsx"],"names":[],"mappings":"AAGA,QAAA,MAAM,kBAAkB;;6CAKvB,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"ArrowRightHeadIcon.d.ts","sourceRoot":"","sources":["../../../src/assets/ArrowRightHeadIcon.tsx"],"names":[],"mappings":"AAGA,QAAA,MAAM,kBAAkB;;6CAUvB,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/dist/cjs/assets/ArrowRightIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ArrowRightIcon.d.ts","sourceRoot":"","sources":["../../../src/assets/ArrowRightIcon.tsx"],"names":[],"mappings":"AAGA,QAAA,MAAM,cAAc;;6CAQnB,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"ArrowRightIcon.d.ts","sourceRoot":"","sources":["../../../src/assets/ArrowRightIcon.tsx"],"names":[],"mappings":"AAGA,QAAA,MAAM,cAAc;;6CAcnB,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/cjs/assets/ArrowUpHeadIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ArrowUpHeadIcon.d.ts","sourceRoot":"","sources":["../../../src/assets/ArrowUpHeadIcon.tsx"],"names":[],"mappings":"AAGA,QAAA,MAAM,eAAe;;6CAKpB,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"ArrowUpHeadIcon.d.ts","sourceRoot":"","sources":["../../../src/assets/ArrowUpHeadIcon.tsx"],"names":[],"mappings":"AAGA,QAAA,MAAM,eAAe;;6CAcpB,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/cjs/assets/ArrowUpIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ArrowUpIcon.d.ts","sourceRoot":"","sources":["../../../src/assets/ArrowUpIcon.tsx"],"names":[],"mappings":"AAGA,QAAA,MAAM,WAAW;;6CAQhB,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"ArrowUpIcon.d.ts","sourceRoot":"","sources":["../../../src/assets/ArrowUpIcon.tsx"],"names":[],"mappings":"AAGA,QAAA,MAAM,WAAW;;6CAchB,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/cjs/assets/ArrowUpRightIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ArrowUpRightIcon.d.ts","sourceRoot":"","sources":["../../../src/assets/ArrowUpRightIcon.tsx"],"names":[],"mappings":"AAGA,QAAA,MAAM,gBAAgB;;6CAQrB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"ArrowUpRightIcon.d.ts","sourceRoot":"","sources":["../../../src/assets/ArrowUpRightIcon.tsx"],"names":[],"mappings":"AAGA,QAAA,MAAM,gBAAgB;;6CAcrB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/dist/cjs/assets/CalendarIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CalendarIcon.d.ts","sourceRoot":"","sources":["../../../src/assets/CalendarIcon.tsx"],"names":[],"mappings":"AAGA,QAAA,MAAM,YAAY;;6CAQjB,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"CalendarIcon.d.ts","sourceRoot":"","sources":["../../../src/assets/CalendarIcon.tsx"],"names":[],"mappings":"AAGA,QAAA,MAAM,YAAY;;6CAajB,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/cjs/assets/DoubleArrowLeftHeadIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DoubleArrowLeftHeadIcon.d.ts","sourceRoot":"","sources":["../../../src/assets/DoubleArrowLeftHeadIcon.tsx"],"names":[],"mappings":"AAGA,QAAA,MAAM,uBAAuB;;6CAY5B,CAAC;AAEF,eAAe,uBAAuB,CAAC"}
+{"version":3,"file":"DoubleArrowLeftHeadIcon.d.ts","sourceRoot":"","sources":["../../../src/assets/DoubleArrowLeftHeadIcon.tsx"],"names":[],"mappings":"AAGA,QAAA,MAAM,uBAAuB;;6CAiB5B,CAAC;AAEF,eAAe,uBAAuB,CAAC"}

package/dist/cjs/assets/DoubleArrowRightHeadIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DoubleArrowRightHeadIcon.d.ts","sourceRoot":"","sources":["../../../src/assets/DoubleArrowRightHeadIcon.tsx"],"names":[],"mappings":"AAGA,QAAA,MAAM,wBAAwB;;6CAc7B,CAAC;AAEF,eAAe,wBAAwB,CAAC"}
+{"version":3,"file":"DoubleArrowRightHeadIcon.d.ts","sourceRoot":"","sources":["../../../src/assets/DoubleArrowRightHeadIcon.tsx"],"names":[],"mappings":"AAGA,QAAA,MAAM,wBAAwB;;6CAmB7B,CAAC;AAEF,eAAe,wBAAwB,CAAC"}

package/dist/cjs/assets/ExclamationFilledIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ExclamationFilledIcon.d.ts","sourceRoot":"","sources":["../../../src/assets/ExclamationFilledIcon.tsx"],"names":[],"mappings":"AAGA,QAAA,MAAM,qBAAqB;;6CAQ1B,CAAC;AAEF,eAAe,qBAAqB,CAAC"}
+{"version":3,"file":"ExclamationFilledIcon.d.ts","sourceRoot":"","sources":["../../../src/assets/ExclamationFilledIcon.tsx"],"names":[],"mappings":"AAGA,QAAA,MAAM,qBAAqB;;6CAa1B,CAAC;AAEF,eAAe,qBAAqB,CAAC"}

package/dist/cjs/assets/LoadingSpinner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LoadingSpinner.d.ts","sourceRoot":"","sources":["../../../src/assets/LoadingSpinner.tsx"],"names":[],"mappings":"AAGA,QAAA,MAAM,cAAc;;6CAKnB,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"LoadingSpinner.d.ts","sourceRoot":"","sources":["../../../src/assets/LoadingSpinner.tsx"],"names":[],"mappings":"AAGA,QAAA,MAAM,cAAc;;6CAUnB,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/cjs/assets/SearchIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SearchIcon.d.ts","sourceRoot":"","sources":["../../../src/assets/SearchIcon.tsx"],"names":[],"mappings":"AAGA,QAAA,MAAM,UAAU;;6CAQf,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"SearchIcon.d.ts","sourceRoot":"","sources":["../../../src/assets/SearchIcon.tsx"],"names":[],"mappings":"AAGA,QAAA,MAAM,UAAU;;6CAaf,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/cjs/assets/XCircleIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"XCircleIcon.d.ts","sourceRoot":"","sources":["../../../src/assets/XCircleIcon.tsx"],"names":[],"mappings":"AAGA,QAAA,MAAM,WAAW;;6CAQhB,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"XCircleIcon.d.ts","sourceRoot":"","sources":["../../../src/assets/XCircleIcon.tsx"],"names":[],"mappings":"AAGA,QAAA,MAAM,WAAW;;6CAahB,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/cjs/components/Banner/index.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
-export default function Banner({ dashboardItemName, dashboardName, onExit, style, }: any): JSX.Element | null;
+export default function Banner({ dashboardItemName, dashboardName, style, }: any): JSX.Element | null;
 //# sourceMappingURL=index.d.ts.map

package/dist/cjs/components/Banner/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Banner/index.tsx"],"names":[],"mappings":";AAEA,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAC7B,iBAAiB,EACjB,aAAa,EACb,MAAM,EACN,KAAK,GACN,EAAE,GAAG,GAAG,GAAG,CAAC,OAAO,GAAG,IAAI,CA4D1B"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Banner/index.tsx"],"names":[],"mappings":";AAAA,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAC7B,iBAAiB,EACjB,aAAa,EACb,KAAK,GACN,EAAE,GAAG,GAAG,GAAG,CAAC,OAAO,GAAG,IAAI,CA4D1B"}

package/dist/cjs/components/Banner/index.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
-function Banner({ dashboardItemName, dashboardName, onExit, style, }) {
+function Banner({ dashboardItemName, dashboardName, style, }) {
     return ((0, jsx_runtime_1.jsx)("div", { id: "quill-edit-banner", style: {
             zIndex: 100,
             display: 'flex',

package/dist/cjs/components/BigModal/BigModal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BigModal.d.ts","sourceRoot":"","sources":["../../../../src/components/BigModal/BigModal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAIxE,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAG1D,MAAM,WAAW,UAAW,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACtE,SAAS,EAAE,OAAO,CAAC;IACnB,YAAY,EACR,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,GAC7C,CAAC,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC,CAAC;IACnC,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IACzC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,kBAAkB,CAAC;IACpC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,EAAE,GAAG,CAAC;CACZ;AAED,QAAA,MAAM,QAAQ,mFAoFZ,CAAC;AAEH,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"BigModal.d.ts","sourceRoot":"","sources":["../../../../src/components/BigModal/BigModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAG9D,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAG1D,MAAM,WAAW,UAAW,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACtE,SAAS,EAAE,OAAO,CAAC;IACnB,YAAY,EACR,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,GAC7C,CAAC,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC,CAAC;IACnC,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IACzC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,kBAAkB,CAAC;IACpC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,EAAE,GAAG,CAAC;CACZ;AAED,QAAA,MAAM,QAAQ,mFA+EZ,CAAC;AAEH,eAAe,QAAQ,CAAC"}

package/dist/cjs/components/BigModal/BigModal.js

@@ -24,26 +24,20 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
-// @ts-nocheck
-/* eslint-disable react/display-name */
 const react_1 = __importStar(require("react"));
 const hooks_1 = require("../../hooks");
 const lib_1 = require("../../lib");
 const BigModal = react_1.default.forwardRef((props, ref) => {
-    const { showModal, setShowModal, parentRef, width, maxHeight = '18rem', children, className, theme, ...other } = props;
-    const [modalExceedsWindow, setModalExceedsWindow] = (0, react_1.useState)(false);
+    const { showModal, setShowModal, parentRef, width, children, className, theme, ...other } = props;
     const modalRef = (0, react_1.useRef)(null);
     const checkModalExceedsWindow = (0, react_1.useCallback)((modalWidth, windowWidth) => {
-        if (!parentRef.current) {
+        if (!parentRef?.current) {
             return false;
         }
         const modalBoundingRight = parentRef.current.getBoundingClientRect().left + modalWidth;
         return windowWidth - modalBoundingRight < 0;
     }, [parentRef]);
-    const getAbsoluteSpacing = () => {
-        return modalExceedsWindow ? '0' : '0';
-    };
-    (0, hooks_1.useOnClickOutside)(modalRef, e => {
+    (0, hooks_1.useOnClickOutside)(modalRef, (e) => {
         // Exclude click on trigger button (e.g. Dropdown Button) from outside click handler
         const isTriggerElem = parentRef
             ? parentRef.current?.contains(e.target)
@@ -55,15 +49,15 @@ const BigModal = react_1.default.forwardRef((props, ref) => {
     // Execute only when modal is of absolute size
     (0, react_1.useEffect)(() => {
         if (width) {
-            setModalExceedsWindow(checkModalExceedsWindow(width, window.innerWidth));
+            checkModalExceedsWindow(width, window.innerWidth);
         }
     }, [checkModalExceedsWindow, parentRef, width]);
     (0, hooks_1.useOnWindowResize)(() => {
         if (width) {
-            setModalExceedsWindow(checkModalExceedsWindow(width, window.innerWidth));
+            checkModalExceedsWindow(width, window.innerWidth);
         }
     });
-    return showModal ? ((0, jsx_runtime_1.jsx)("div", { ref: (0, lib_1.mergeRefs)([modalRef, ref]), style: {
+    return showModal ? ((0, jsx_runtime_1.jsx)("div", { className: className, ref: (0, lib_1.mergeRefs)([modalRef, ref]), style: {
             position: 'absolute',
             zIndex: 10,
             overflowY: 'auto',

package/dist/cjs/components/Chart/BarList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BarList.d.ts","sourceRoot":"","sources":["../../../../src/components/Chart/BarList.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAY,MAAM,OAAO,CAAC;AAcvD,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,aAAa,CAAC;AAuBhD,UAAU,UAAU;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,YAAa,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACxE,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,cAAc,CAAC,EAAE,GAAG,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,UAAU,EAAE,CAAC;IAC1B,cAAc,CAAC,EAAE,aAAa,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB,KAAK,EAAE,GAAG,CAAC;IACX,mBAAmB,CAAC,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;CACxC;AAYD,wBAAgB,2BAA2B,CAAC,GAAG,KAAA,UAW9C;AAED,QAAA,MAAM,OAAO,qFA2LX,CAAC;AAEH,eAAe,OAAO,CAAC"}
+{"version":3,"file":"BarList.d.ts","sourceRoot":"","sources":["../../../../src/components/Chart/BarList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE7C,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,aAAa,CAAC;AAchD,UAAU,UAAU;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,YAAa,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACxE,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,cAAc,CAAC,EAAE,GAAG,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,UAAU,EAAE,CAAC;IAC1B,cAAc,CAAC,EAAE,aAAa,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB,KAAK,EAAE,GAAG,CAAC;IACX,mBAAmB,CAAC,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;CACxC;AAoBD,wBAAgB,2BAA2B,CAAC,GAAG,EAAE,GAAG,UAWnD;AAED,QAAA,MAAM,OAAO,qFAgMX,CAAC;AAEH,eAAe,OAAO,CAAC"}

package/dist/cjs/components/Chart/BarList.js

@@ -5,8 +5,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.hexToRgbaWith10PercentAlpha = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-/* eslint-disable react/display-name */
-// @ts-nocheck
 const react_1 = __importDefault(require("react"));
 const valueFormatter_1 = require("../../utils/valueFormatter");
 const getWidthsFromValues = (dataValues) => {
@@ -20,15 +18,19 @@ const getWidthsFromValues = (dataValues) => {
         return Math.max((value / maxValue) * 100, 1);
     });
 };
-function makeBarListClassName(componentName) {
-    return (className) => {
-        return `BarList-${componentName}-${className};`;
-    };
-}
 // const valueFormatter = (number: number) => {
 // return '$ ' + Intl.NumberFormat('us').format(number).toString();
 //   return number.toFixed(0);
 // };
+function getColors(colorMap, xAxisField, colors) {
+    if (colorMap && colorMap[xAxisField] && colorMap[xAxisField]['primary']) {
+        return colorMap[xAxisField]['primary'];
+    }
+    else if (colors) {
+        return hexToRgbaWith10PercentAlpha(colors[0]);
+    }
+    return hexToRgbaWith10PercentAlpha(undefined);
+}
 function hexToRgbaWith10PercentAlpha(hex) {
     // Convert the hex color to RGB
     const r = parseInt(hex.slice(1, 3), 16);
@@ -44,7 +46,12 @@ const BarList = react_1.default.forwardRef((props, ref) => {
     const { data = [], yAxisFields, xAxisField, xAxisFormat, colors, colorMap = {}, 
     // valueFormatter = (value: any) => value,valueFormatter
     showAnimation = true, className, containerStyle, theme, onClickChartElement, ...other } = props;
-    const widths = getWidthsFromValues(data.map((item) => item[yAxisFields[0].field] ?? 0));
+    const widths = getWidthsFromValues(data.map((item) => {
+        if (yAxisFields && yAxisFields[0] && yAxisFields[0].field) {
+            return item[yAxisFields[0].field];
+        }
+        return 0;
+    }));
     const NUM_TO_SHOW = 5;
     if (!data || data.length === 0) {
         return ((0, jsx_runtime_1.jsx)("div", { style: {
@@ -86,10 +93,7 @@ const BarList = react_1.default.forwardRef((props, ref) => {
                                     width: `${widths[idx]}%`,
                                     transition: showAnimation ? 'all 2s' : '',
                                     boxSizing: 'content-box',
-                                    backgroundColor: (colorMap &&
-                                        colorMap[xAxisField] &&
-                                        colorMap[xAxisField]['primary']) ??
-                                        hexToRgbaWith10PercentAlpha(colors[0]),
+                                    backgroundColor: getColors(colorMap, xAxisField, colors),
                                     display: 'flex',
                                     alignItems: 'center',
                                     height: '36px',
@@ -112,6 +116,7 @@ const BarList = react_1.default.forwardRef((props, ref) => {
                                         }, children: (0, valueFormatter_1.valueFormatter)({
                                             value: item[xAxisField] ?? item[`comparison_${xAxisField}`],
                                             field: xAxisField,
+                                            // @ts-ignore
                                             fields: [{ field: xAxisField, format: xAxisFormat }],
                                         }) }) }) }, item[xAxisField] + 'label' + idx));
                         }), data.length > NUM_TO_SHOW && ((0, jsx_runtime_1.jsxs)("div", { style: {
@@ -140,8 +145,10 @@ const BarList = react_1.default.forwardRef((props, ref) => {
                                 textOverflow: 'ellipsis',
                                 fontSize: theme?.fontSizeSmall || '14px',
                             }, children: (0, valueFormatter_1.valueFormatter)({
-                                value: item[yAxisFields[0].field] ?? 0,
-                                field: yAxisFields[0].field,
+                                value: yAxisFields && yAxisFields[0] && item[yAxisFields[0].field]
+                                    ? item[yAxisFields[0].field]
+                                    : 0,
+                                field: yAxisFields && yAxisFields[0] && yAxisFields[0].field,
                                 fields: yAxisFields,
                             }) }) }, item[xAxisField] + 'value' + idx))) })] }) }));
 });

package/dist/cjs/components/Chart/ChartError.d.ts

@@ -1,3 +1,10 @@
 /// <reference types="react" />
-export default function ChartError({ className, containerStyle, label, }: any): JSX.Element;
+export default function ChartError({ errorMessage, }: any): JSX.Element;
+export declare function QuillChartErrorWithAction({ className, containerStyle, label, onClick, ButtonComponent, }: {
+    className?: string;
+    containerStyle?: React.CSSProperties;
+    label?: string;
+    onClick?: (element: any) => void;
+    ButtonComponent?: React.ComponentType<any>;
+}): JSX.Element;
 //# sourceMappingURL=ChartError.d.ts.map

package/dist/cjs/components/Chart/ChartError.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChartError.d.ts","sourceRoot":"","sources":["../../../../src/components/Chart/ChartError.tsx"],"names":[],"mappings":";AAEA,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,SAAS,EACT,cAAc,EACd,KAA+B,GAChC,EAAE,GAAG,GAAG,GAAG,CAAC,OAAO,CA4CnB"}
+{"version":3,"file":"ChartError.d.ts","sourceRoot":"","sources":["../../../../src/components/Chart/ChartError.tsx"],"names":[],"mappings":";AAGA,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,YAAsC,GACvC,EAAE,GAAG,GAAG,GAAG,CAAC,OAAO,CA0CnB;AAED,wBAAgB,yBAAyB,CAAC,EACxC,SAAS,EACT,cAAc,EACd,KAA+B,EAC/B,OAAO,EACP,eAAgC,GACjC,EAAE;IACD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,GAAG,KAAK,IAAI,CAAC;IACjC,eAAe,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;CAC5C,GAAG,GAAG,CAAC,OAAO,CAqDd"}

package/dist/cjs/components/Chart/ChartError.js

@@ -1,15 +1,16 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.QuillChartErrorWithAction = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const hooks_1 = require("../../hooks");
-function ChartError({ className, containerStyle, label = 'Failed to fetch data.', }) {
+const UiComponents_1 = require("../UiComponents");
+function ChartError({ errorMessage = 'Failed to fetch data.', }) {
     const theme = (0, hooks_1.useTheme)();
     return ((0, jsx_runtime_1.jsx)("div", { style: {
             boxSizing: 'content-box',
             height: '100%',
-            ...containerStyle,
-        }, className: className, children: (0, jsx_runtime_1.jsx)("div", { style: {
-                height: containerStyle?.height || '100%',
+        }, children: (0, jsx_runtime_1.jsx)("div", { style: {
+                height: '100%',
                 width: '100%',
                 boxSizing: 'content-box',
                 borderRadius: 8,
@@ -30,6 +31,40 @@ function ChartError({ className, containerStyle, label = 'Failed to fetch data.'
                     fontSize: 13,
                     color: theme?.secondaryTextColor || 'rgb(55, 65, 81)',
                     fontFamily: theme.fontFamily,
-                }, children: label }) }) }));
+                }, children: errorMessage }) }) }));
 }
 exports.default = ChartError;
+function QuillChartErrorWithAction({ className, containerStyle, label = 'Failed to fetch data.', onClick, ButtonComponent = UiComponents_1.MemoizedButton, }) {
+    const theme = (0, hooks_1.useTheme)();
+    return ((0, jsx_runtime_1.jsx)("div", { style: {
+            boxSizing: 'content-box',
+            height: '100%',
+            width: '100%',
+            ...containerStyle,
+        }, className: className, children: (0, jsx_runtime_1.jsxs)("div", { style: {
+                height: containerStyle?.height || '100%',
+                width: '100%',
+                boxSizing: 'content-box',
+                borderRadius: 8,
+                overflow: 'hidden',
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
+            }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+                        paddingLeft: 12,
+                        paddingRight: 12,
+                        fontSize: 13,
+                        color: theme?.secondaryTextColor || 'rgb(55, 65, 81)',
+                        fontFamily: theme.fontFamily,
+                    }, children: label }), onClick && ((0, jsx_runtime_1.jsx)(ButtonComponent, { label: "Edit View", onClick: () => {
+                        const regex = /'([^']+)'/;
+                        const matches = regex.exec(label);
+                        if (matches && matches.length > 1) {
+                            matches[1];
+                            onClick(matches[1]);
+                            return;
+                        }
+                        onClick(undefined);
+                    } }))] }) }));
+}
+exports.QuillChartErrorWithAction = QuillChartErrorWithAction;