@quillsql/react 2.12.29 → 2.12.31

package/dist/esm/Table.js

@@ -1,19 +1,18 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useContext, useEffect, useState, } from 'react';
-import { ClientContext, CustomFieldContext, DashboardContext, DashboardFiltersContext, ReportFiltersContext, } from './Context';
-import { getData } from './utils/dataFetcher';
+import { ClientContext, CustomFieldContext, DashboardContext, ReportFiltersContext, } from './Context';
 import QuillTable from './components/QuillTable';
 import { useExport } from './hooks/useExport';
-import { processFilterErrorList } from './utils/errorProcessing';
-import { cleanDashboardItem } from './utils/dashboard';
-import { quillFormat } from './utils/valueFormatter';
 import { processFilterFromBackend, updateFilter, } from './utils/filterProcessing';
 import { QuillFilterContainerComponent, } from './components/UiComponents';
 import { DashboardFilter } from './components/Dashboard/DashboardFilter';
 import { QuillSelectComponent } from './components/QuillSelect';
 import { QuillMultiSelectComponent } from './components/QuillMultiSelect';
-import { QuillDateRangePicker, } from './DateRangePicker/QuillDateRangePicker';
+import { QuillDateRangePicker } from './DateRangePicker/QuillDateRangePicker';
 import { useTheme } from './hooks';
+import { convertInternalReportToReport, fetchReport, formatRowsFromReport, } from './utils/report';
+import { fetchTableByReport, } from './utils/tableProcessing';
+import { shouldFetchMore, DEFAULT_PAGINATION, shouldSortInMemory, } from './utils/paginationProcessing';
 /**
  * ### Quill Table
  *
@@ -46,16 +45,15 @@ import { useTheme } from './hooks';
  * @see https://docs.quillsql.com/components/table
  */
 const Table = (props) => {
-    let data = props;
-    const { dispatch, dashboard } = useContext(DashboardContext);
-    const { dashboardFilters } = useContext(DashboardFiltersContext);
-    const [client, _] = useContext(ClientContext);
+    const data = props;
+    const [dashboard] = useContext(DashboardContext);
+    const [client] = useContext(ClientContext);
     if ('rows' in data && 'columns' in data) {
         return (_jsx(QuillTable, { 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 (_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 (_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 = QuillSelectComponent, MultiSelectComponent = QuillMultiSelectComponent, DateRangePickerComponent = QuillDateRangePicker, FilterContainerComponent = QuillFilterContainerComponent, }) => {
+const ChartUpdater = ({ reportId, containerStyle, className, dashboardContext, client, hideCSVDownloadButton = true, hideFilters = true, pagination = DEFAULT_PAGINATION, LoadingComponent, SelectComponent = QuillSelectComponent, MultiSelectComponent = QuillMultiSelectComponent, DateRangePickerComponent = QuillDateRangePicker, FilterContainerComponent = QuillFilterContainerComponent, }) => {
     const [loading, setLoading] = useState(false);
     const [initialLoad, setInitialLoad] = useState(true);
     const { downloadCSV } = useExport(reportId);
@@ -64,136 +62,154 @@ const ChartUpdater = ({ reportId, containerStyle, className, dashboardContext, d
     const [columns, setColumns] = useState([]);
     const [tableFilters, setTableFilters] = useState([]);
     const [filterUpdateIndex, setFilterUpdateIndex] = useState(0);
+    const [previousPage, setPreviousPage] = useState(1);
+    const [rowCount, setRowCount] = useState(0);
     const { reportFiltersDispatch, reportFilters } = useContext(ReportFiltersContext);
+    const [currentProcessing, setCurrentProcessing] = useState({
+        page: pagination,
+    });
     const theme = useTheme();
-    const getChartData = async (useReportTask = true, reportFilterInfo) => {
-        try {
-            const filters = reportFilterInfo.filters;
+    const onPageChange = (page) => {
+        if (currentProcessing.page &&
+            page > previousPage &&
+            shouldFetchMore(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 (shouldSortInMemory(DEFAULT_PAGINATION, rowCount)) {
+            return;
+        }
+        const updatedProcessing = { page: DEFAULT_PAGINATION, sort };
+        updateTableRows(updatedProcessing, true);
+        setCurrentProcessing(updatedProcessing);
+        setPreviousPage(0);
+    };
+    const updateTableRows = async (processing, resetRows = false) => {
+        if (!loading) {
             setLoading(true);
-            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 getData(client, 'itempost', 'same-origin', hostedBody, cloudBody);
-            processFilterErrorList(resp);
-            if (resp && resp.name !== 'error' && !resp.errorMessage) {
-                const cleanedReport = await cleanDashboardItem(resp, filters ? filters : resp.filters, client);
-                if (cleanedReport.chartType === 'table' && cleanedReport.pivot) {
-                    cleanedReport.columns = cleanedReport.yAxisFields;
+            try {
+                const updatedProcessing = { ...currentProcessing, ...processing };
+                const paginatedRows = await 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 processFilterFromBackend(filter, resp.rows);
-                        })
-                        : [];
-                    reportFiltersDispatch({
-                        type: 'UPDATE_REPORT_FILTER',
-                        id: reportId,
-                        data: {
-                            filters: filterArray,
-                            updateIndex: reportFilterInfo.updateIndex,
-                        },
-                    });
+                const formattedNewRows = 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 = quillFormat({
-                        value: row[column.field],
-                        format: column.format,
-                    });
-                    formattedRow[column.field] = formattedValue;
-                    return formattedRow;
-                }, {});
-            }));
-            setColumns(resp.columns);
-            setLoading(false);
-            setInitialLoad(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 fetchReport(reportId, client, useReportTask, reportFilters ? reportFilters.filters : [], processing, undefined, customFields);
+        if (error) {
             setLoading(false);
             setInitialLoad(false);
+            setRows([]);
+            return;
+        }
+        const convertedReport = convertInternalReportToReport(report);
+        let filterArray = reportFilters.filters;
+        // THIS SHOULD ONLY BE UNDEFINED ON INITIAL LOAD
+        if (!filterArray) {
+            filterArray = report.filtersApplied
+                ? report.filtersApplied.map((filter) => {
+                    return processFilterFromBackend(filter);
+                })
+                : [];
+            reportFiltersDispatch({
+                type: 'UPDATE_REPORT_FILTER',
+                id: reportId,
+                data: {
+                    filters: filterArray,
+                    updateIndex: reportFilters.updateIndex,
+                },
+            });
         }
+        setRows(formatRowsFromReport(convertedReport));
+        setTableFilters(filterArray);
+        setRowCount(convertedReport.rowCount ?? 0);
+        setColumns(convertedReport.columns);
+        setLoading(false);
+        setInitialLoad(false);
     };
     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]) {
+        const report = dashboardContext[reportId];
+        if (initialLoad && report) {
             setInitialLoad(false);
             return;
         }
-        let parsedReportFilters = reportFilters[reportId]
+        const parsedReportFilters = reportFilters[reportId]
             ? reportFilters[reportId]
             : { updateIndex: 0 };
-        getChartData(true, parsedReportFilters);
+        setCurrentProcessing({ page: DEFAULT_PAGINATION });
+        fetchReportHelper(true, parsedReportFilters, currentProcessing);
     }, [client, reportId, reportFilters[reportId]?.updateIndex]);
     useEffect(() => {
-        if (!dashboardContext || !dashboardContext[reportId]) {
+        const report = dashboardContext[reportId];
+        if (!report) {
             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 = quillFormat({
-                    value: row[column.field],
-                    format: column.format,
-                });
-                formattedRow[column.field] = formattedValue;
-                return formattedRow;
-            }, {});
-        }));
-        setColumns(dashboardContext[reportId].columns);
+        if (!report.rows || !report.columns) {
+            setRows([]);
+            setColumns([]);
+            return;
+        }
+        let filtersApplied = [];
+        if (report.filtersApplied && report.filtersApplied.length > 0) {
+            filtersApplied = report.filtersApplied.map((filter) => {
+                return filter;
+            });
+        }
+        const convertedReport = convertInternalReportToReport(report);
+        setRows(formatRowsFromReport(convertedReport));
+        setRowCount(convertedReport.rowCount);
+        setColumns(convertedReport.columns);
+        setTableFilters(filtersApplied);
     }, []);
-    return (_jsxs("div", { children: [!hideFilters && (_jsx("div", { style: {
-                    display: 'flex',
-                    boxSizing: 'content-box',
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                }, children: _jsx(FilterContainerComponent, { children: tableFilters.map((filter, index) => (_jsx(DashboardFilter, { filter: filter, onChangeFilter: (filter, value = null, comparison = null) => {
-                            const updatedFilters = tableFilters.map((f) => {
-                                if (f.field === filter.field ||
-                                    (f.filterType === 'date_range' &&
-                                        filter.filterType === 'date_range')) {
-                                    return updateFilter(f, value, comparison);
-                                }
-                                return f;
-                            });
-                            setTableFilters(updatedFilters);
-                            getChartData(true, {
+    return (_jsxs("div", { children: [!hideFilters && (_jsx(FilterContainerComponent, { children: tableFilters.map((filter, index) => (_jsx(DashboardFilter, { filter: filter, onChangeFilter: (filter, value = null, comparison = null) => {
+                        const updatedFilters = tableFilters.map((f) => {
+                            if (f.field === filter.field ||
+                                (f.filterType === 'date_range' &&
+                                    filter.filterType === 'date_range')) {
+                                return updateFilter(f, value, comparison);
+                            }
+                            return f;
+                        });
+                        setTableFilters(updatedFilters);
+                        fetchReportHelper(true, {
+                            filters: updatedFilters,
+                            updateIndex: filterUpdateIndex + 1,
+                        }, currentProcessing);
+                        setFilterUpdateIndex(filterUpdateIndex + 1);
+                        reportFiltersDispatch({
+                            type: 'UPDATE_REPORT_FILTER',
+                            id: reportId,
+                            data: {
                                 filters: updatedFilters,
                                 updateIndex: filterUpdateIndex + 1,
-                            });
-                            reportFiltersDispatch({
-                                type: 'UPDATE_REPORT_FILTER',
-                                id: reportId,
-                                data: {
-                                    filters: updatedFilters,
-                                    updateIndex: filterUpdateIndex + 1,
-                                },
-                            });
-                        }, theme: theme, SelectComponent: SelectComponent, MultiSelectComponent: MultiSelectComponent, DateRangePickerComponent: DateRangePickerComponent }, index))) }) })), _jsx(QuillTable, { hideCSVDownloadButton: hideCSVDownloadButton, columns: columns ?? [], rows: rows ?? [], containerStyle: containerStyle, className: className, LoadingComponent: LoadingComponent, isLoading: loading || initialLoad, downloadCSV: downloadCSV })] }));
+                            },
+                        });
+                    }, theme: theme, SelectComponent: SelectComponent, MultiSelectComponent: MultiSelectComponent, DateRangePickerComponent: DateRangePickerComponent }, index))) })), _jsx(QuillTable, { 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 })] }));
 };
 export default Table;

package/dist/esm/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/esm/TableChart.js

@@ -1,5 +1,4 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/* eslint-disable react/display-name */
 // @ts-nocheck
 import React, { useMemo } from 'react';
 import { valueFormatter } from './utils/valueFormatter';

package/dist/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/components/Banner/index.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export default function Banner({ dashboardItemName, dashboardName, onExit, style, }) {
+export default function Banner({ dashboardItemName, dashboardName, style, }) {
     return (_jsx("div", { id: "quill-edit-banner", style: {
             zIndex: 100,
             display: 'flex',

package/dist/esm/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/esm/components/BigModal/BigModal.js

@@ -1,24 +1,18 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-// @ts-nocheck
-/* eslint-disable react/display-name */
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useRef } from 'react';
 import { useOnClickOutside, useOnWindowResize } from '../../hooks';
 import { mergeRefs } from '../../lib';
 const BigModal = React.forwardRef((props, ref) => {
-    const { showModal, setShowModal, parentRef, width, maxHeight = '18rem', children, className, theme, ...other } = props;
-    const [modalExceedsWindow, setModalExceedsWindow] = useState(false);
+    const { showModal, setShowModal, parentRef, width, children, className, theme, ...other } = props;
     const modalRef = useRef(null);
     const checkModalExceedsWindow = 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';
-    };
-    useOnClickOutside(modalRef, e => {
+    useOnClickOutside(modalRef, (e) => {
         // Exclude click on trigger button (e.g. Dropdown Button) from outside click handler
         const isTriggerElem = parentRef
             ? parentRef.current?.contains(e.target)
@@ -30,15 +24,15 @@ const BigModal = React.forwardRef((props, ref) => {
     // Execute only when modal is of absolute size
     useEffect(() => {
         if (width) {
-            setModalExceedsWindow(checkModalExceedsWindow(width, window.innerWidth));
+            checkModalExceedsWindow(width, window.innerWidth);
         }
     }, [checkModalExceedsWindow, parentRef, width]);
     useOnWindowResize(() => {
         if (width) {
-            setModalExceedsWindow(checkModalExceedsWindow(width, window.innerWidth));
+            checkModalExceedsWindow(width, window.innerWidth);
         }
     });
-    return showModal ? (_jsx("div", { ref: mergeRefs([modalRef, ref]), style: {
+    return showModal ? (_jsx("div", { className: className, ref: mergeRefs([modalRef, ref]), style: {
             position: 'absolute',
             zIndex: 10,
             overflowY: 'auto',

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":";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,SAAS,EACT,UAAU,EACV,WAAW,EACX,KAAK,EACL,UAAU,EACV,SAAS,EACT,iBAAwB,EACxB,SAAiB,EACjB,SAAiB,EACjB,iBAAyB,EACzB,mBAAmB,EACnB,UAAU,GACX,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,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,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;IAC3B,mBAAmB,CAAC,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;IACvC,UAAU,CAAC,EAAE,GAAG,CAAC;CAClB,2CA2MA"}
+{"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,SAAS,EACT,UAAU,EACV,WAAW,EACX,KAAK,EACL,UAAU,EACV,SAAS,EACT,iBAAwB,EACxB,SAAiB,EACjB,SAAiB,EACjB,iBAAyB,EACzB,mBAAmB,EACnB,UAAU,GACX,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,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,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;IAC3B,mBAAmB,CAAC,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;IACvC,UAAU,CAAC,EAAE,GAAG,CAAC;CAClB,2CAsNA"}

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // @ts-nocheck
 import { CartesianGrid, ResponsiveContainer, Tooltip, XAxis, YAxis, Bar, BarChart as ReChartsBarChart, } from 'recharts';
-import { valueFormatter } from '../../utils/valueFormatter';
+import { quillFormat, valueFormatter } from '../../utils/valueFormatter';
 import { axisFormatter } from '../../utils/axisFormatter';
 import { generateArrayFromColor, selectColor } from '../../utils/color';
 import ChartTooltip from '../../components/Chart/ChartTooltip';
@@ -11,6 +11,17 @@ export default function BarChart({ colors, colorMap, yAxisFields, data, containe
     const [formattedData, setFormattedData] = useState(data);
     useEffect(() => {
         if (!data || data.length === 0) {
+            let barChartData = [];
+            if (dateFilter && (!barChartData || barChartData.length === 0)) {
+                const xAxis = xAxisField || '';
+                const endDate = quillFormat({
+                    value: dateFilter?.endDate,
+                    format: xAxisFormat,
+                });
+                const yAxis = yAxisFields[0]?.field;
+                barChartData = [{ [xAxis]: endDate, [yAxis]: '0' }];
+            }
+            setFormattedData(barChartData);
             return;
         }
         const curData = data.map((d) => {
@@ -39,7 +50,7 @@ export default function BarChart({ colors, colorMap, yAxisFields, data, containe
         }
         return fields;
     };
-    if (!data || data.length === 0) {
+    if (!formattedData || formattedData.length === 0) {
         return (_jsx("div", { style: {
                 display: 'flex',
                 flex: '1 0 auto',

package/dist/esm/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/esm/components/Chart/BarList.js

@@ -1,6 +1,4 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/* eslint-disable react/display-name */
-// @ts-nocheck
 import React from 'react';
 import { valueFormatter } from '../../utils/valueFormatter';
 const getWidthsFromValues = (dataValues) => {
@@ -14,15 +12,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);
+}
 export function hexToRgbaWith10PercentAlpha(hex) {
     // Convert the hex color to RGB
     const r = parseInt(hex.slice(1, 3), 16);
@@ -37,7 +39,12 @@ const BarList = React.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 (_jsx("div", { style: {
@@ -79,10 +86,7 @@ const BarList = React.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',
@@ -105,6 +109,7 @@ const BarList = React.forwardRef((props, ref) => {
                                         }, children: 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 && (_jsxs("div", { style: {
@@ -133,8 +138,10 @@ const BarList = React.forwardRef((props, ref) => {
                                 textOverflow: 'ellipsis',
                                 fontSize: theme?.fontSizeSmall || '14px',
                             }, children: 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))) })] }) }));
 });