@quillsql/react 2.12.29 → 2.12.31

package/dist/esm/Chart.js

@@ -1,31 +1,26 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/* eslint-disable no-unused-vars */
-import { useState, useEffect, useContext, useMemo } from 'react';
+import { useState, useEffect, useContext, useMemo, } from 'react';
 import { useExport } from './hooks/useExport';
 import { differenceInHours } from 'date-fns';
 import BarList from './components/Chart/BarList';
 import PieChart from './components/Chart/PieChart';
-import { ClientContext, CustomFieldContext, DashboardContext, DashboardFiltersContext, ReportFiltersContext, } from './Context';
+import { ClientContext, CustomFieldContext, DashboardContext, ReportFiltersContext, } from './Context';
 import QuillTable from './components/QuillTable';
-import { getData } from './utils/dataFetcher';
-import { DATE_FORMAT_TYPES, valueFormatter } from './utils/valueFormatter';
 import LineChart from './components/Chart/LineChart';
 import BarChart from './components/Chart/BarChart';
-import { mergeComparisonRange } from './utils/merge';
 import { QuillLoadingSkeleton } from './components/Chart/ChartSkeleton';
 import ChartError from './components/Chart/ChartError';
-import { COMPARISON_OPTIONS, } from './DateRangePicker/dateRangePickerUtils';
-import { quillFormat } from './utils/valueFormatter';
 import useTheme from './hooks/useTheme';
-import { processFilterErrorList } from './utils/errorProcessing';
 import { findAndProcessDateFilter, processFilterFromBackend, updateFilter, } from './utils/filterProcessing';
-import { cleanDashboardItem } from './utils/dashboard';
 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 { MAX_COLUMN_ROWS_LIMIT } from './utils/constants';
+import { QuillDateRangePicker } from './DateRangePicker/QuillDateRangePicker';
+import { convertInternalReportToReport, EMPTY_REPORT, fetchReport, } from './utils/report';
+import { shouldFetchMore, DEFAULT_PAGINATION, shouldSortInMemory, } from './utils/paginationProcessing';
+import { fetchTableByReport } from './utils/tableProcessing';
+import QuillMetricComponent from './components/Dashboard/MetricComponent';
 const MAX_ROWS_FOR_GENERIC_TABLE = 500;
 // @ts-ignore
 function sumByKey(arr, key) {
@@ -49,6 +44,15 @@ export function isEquivalent(filters1, filters2) {
             return false;
         }
         const filter2 = filters2[i];
+        if (filter1.isUserFilter !== filter2.isUserFilter) {
+            return false;
+        }
+        else if (filter1.isUserFilter) {
+            if (filter1.operator !== filter2.operator ||
+                filter1.value !== filter2.value) {
+                return false;
+            }
+        }
         const filterType = filter2.filterType;
         if (filterType === 'string') {
             if (filter1.stringFilterType === 'multiselect') {
@@ -118,233 +122,132 @@ export function didFiltersChange(dashboardItem, filters) {
     }
     return !isEquivalent(dashboardItem.filtersApplied, filters);
 }
-function fallbackMapColorsToFields(_report, _theme) {
-    // By default, if the key is not in the map we use the colors array.
-    return {};
-}
-/**
- * ### Quill Chart
- *
- * A simple component that displays the given data in one of many chart types.
- *
- * @example
- * ```js
- * // Usage with chart id (will auto-fetch data)
- * <Chart reportId="12345" />
- * ```
- *
- * @example
- * ```js
- * // Usage with a report (will not auto-fetch data)
- * <Chart config={report} />
- * ```
- *
- * ### Chart API
- * @see https://docs.quillsql.com/components/chart
- */
-const Chart = (props) => {
-    // Cast the props to the internal version so we can use the inherited types.
-    let data = props;
-    if ('config' in data) {
-        const isLoading = Boolean(!data.config);
-        return (_jsx(ChartDisplay, { ...data, error: isLoading || data.config?.rows ? undefined : 'No rows found', loading: isLoading, isComparison: Boolean(data?.config?.compareRows?.length), onClickChartElement: props.onClickChartElement }));
-    }
-    const theme = useTheme();
-    const chartColors = useMemo(() => {
-        return data.colors?.length
-            ? data.colors
-            : theme && theme.chartColors.length
-                ? theme.chartColors
-                : ['#4E80EE', '#E14F62', '#55B5A6', '#E9A23B', '#6466E9', '#55B685'];
-    }, [data.colors]);
-    return (_jsx(ChartUpdater, { reportId: data.reportId, className: data.className, containerStyle: data.containerStyle, colors: chartColors, isAnimationActive: data.isAnimationActive, hideXAxis: data.hideXAxis, hideYAxis: data.hideYAxis, hideCartesianGrid: data.hideCartesianGrid, hideHorizontalCartesianGrid: data.hideHorizontalCartesianGrid, hideVerticalCartesianGrid: data.hideVerticalCartesianGrid, hideSubsequentXAxisTicks: data.hideSubsequentXAxisTicks, hideDateRangeFilter: data.hideDateRangeFilter, cartesianGridLineStyle: data.cartesianGridLineStyle, cartesianGridLineColor: data.cartesianGridLineColor, comparisonLineStyle: data.comparisonLineStyle, mapColorsToFields: data.mapColorsToFields ?? fallbackMapColorsToFields, LoadingComponent: data.LoadingComponent, filters: data.filters, onClickChartElement: props.onClickChartElement, SelectComponent: data.SelectComponent, MultiSelectComponent: data.MultiSelectComponent, DateRangePickerComponent: data.DateRangePickerComponent, FilterContainerComponent: data.FilterContainerComponent, hideFilters: data.hideFilters }));
-};
-const ChartUpdater = ({ colors, reportId, className, containerStyle, isAnimationActive, hideXAxis, hideYAxis, hideCartesianGrid, hideHorizontalCartesianGrid = false, hideVerticalCartesianGrid = true, hideSubsequentXAxisTicks = false, cartesianGridLineStyle = 'solid', cartesianGridLineColor, comparisonLineStyle, hideDateRangeFilter = false, hideFilters = false, mapColorsToFields, LoadingComponent = QuillLoadingSkeleton, SelectComponent = QuillSelectComponent, MultiSelectComponent = QuillMultiSelectComponent, DateRangePickerComponent = QuillDateRangePicker, FilterContainerComponent = QuillFilterContainerComponent, filters, onClickChartElement, }) => {
-    const { dispatch, dashboard } = useContext(DashboardContext);
+export default function Chart({ colors, reportId, className, containerStyle, isAnimationActive, hideXAxis, hideYAxis, hideCartesianGrid, hideHorizontalCartesianGrid = false, hideVerticalCartesianGrid = true, hideSubsequentXAxisTicks = false, cartesianGridLineStyle = 'solid', cartesianGridLineColor, comparisonLineStyle, hideDateRangeFilter = false, hideFilters = false, mapColorsToFields, LoadingComponent = QuillLoadingSkeleton, SelectComponent = QuillSelectComponent, MultiSelectComponent = QuillMultiSelectComponent, DateRangePickerComponent = QuillDateRangePicker, FilterContainerComponent = QuillFilterContainerComponent, filters, onClickChartElement, dateBucket, }) {
+    const [dashboard] = useContext(DashboardContext);
     const { reportFiltersDispatch, reportFilters } = useContext(ReportFiltersContext);
     const [initialLoad, setInitialLoad] = useState(true);
     const [loading, setLoading] = useState(true);
     const [paginating, setPaginating] = useState(false);
     const [error, setError] = useState(undefined);
-    const [isComparison, setIsComparison] = useState(false);
     const [colorMap, setColorMap] = useState({});
-    const [client, _] = useContext(ClientContext);
+    const [client] = useContext(ClientContext);
     const [customFields] = useContext(CustomFieldContext);
     const [additionalProcessing, setAdditionProcessing] = useState({
         page: 0,
     });
     const [report, setReport] = useState(undefined);
-    const [dateFilter, setDateFilter] = useState(undefined);
     const [chartFilters, setChartFilters] = useState([]);
     const [previousPage, setPreviousPage] = useState(0);
     const [filterUpdateIndex, setFilterUpdateIndex] = useState(-1);
-    const [useReport, setUseReport] = useState(true);
+    const [previousDateBucket, setPreviousDateBucket] = useState(undefined);
     const theme = useTheme();
     const onPageChange = (page) => {
-        if ((previousPage < page.currentPage &&
-            (page.currentPage * page.rowsPerPage) % MAX_COLUMN_ROWS_LIMIT === 0) ||
-            (previousPage > page.currentPage &&
-                (previousPage * page.rowsPerPage) % MAX_COLUMN_ROWS_LIMIT === 0)) {
-            getChartDataPaginate({ page });
+        if (additionalProcessing.page &&
+            shouldFetchMore(DEFAULT_PAGINATION, page, previousPage)) {
+            const newPagination = { ...additionalProcessing.page, page };
+            const updatedProcessing = {
+                ...additionalProcessing,
+                page: newPagination,
+            };
+            setAdditionProcessing(updatedProcessing);
+            updateTableRows(updatedProcessing);
+        }
+        if (page > previousPage) {
+            setPreviousPage(page);
         }
-        setPreviousPage(page.currentPage);
     };
     const onSortChange = (sort) => {
-        getChartDataPaginate({ sort });
+        if (report &&
+            shouldSortInMemory(DEFAULT_PAGINATION, report.rowCount, !!report.pivot)) {
+            return;
+        }
+        const updatedProcessing = { page: DEFAULT_PAGINATION, sort };
+        fetchReportHelper(true, additionalProcessing);
+        updateTableRows(updatedProcessing, true);
         setPreviousPage(0);
     };
-    const getChartDataPaginate = async (processing) => {
-        setPaginating(true);
-        try {
-            let updatedProcessing = { ...additionalProcessing, ...processing };
-            if (processing && processing.sort) {
-                if (!updatedProcessing.page) {
-                    updatedProcessing.page = {};
+    const updateTableRows = async (processing, resetRows = false) => {
+        if (!loading && report) {
+            setPaginating(true);
+            try {
+                const updatedProcessing = { ...additionalProcessing, ...processing };
+                const paginatedRows = await fetchTableByReport(reportId, client, updatedProcessing, filters, customFields);
+                if (paginatedRows.error) {
+                    throw new Error('Error fetching chart');
                 }
-                updatedProcessing.page.currentPage = 0;
-            }
-            // Remove extra fields on each filter so we don't confuse the backend.
-            const allowDateRange = !hideDateRangeFilter;
-            const minimalFilters = Object.values(dashboard.filters).length
-                ? Object.values(chartFilters)
-                    .filter((f) => allowDateRange || f.filterType !== 'date_range')
-                    .map((filter) => {
-                    const newFilter = { ...filter };
-                    if (newFilter.filterType === 'date_range') {
-                        delete newFilter['field'];
-                        delete newFilter['options'];
-                        delete newFilter['selectedValue'];
-                    }
-                    return newFilter;
-                })
-                : [];
-            if (filters) {
-                minimalFilters.push(...filters);
-            }
-            const hostedBody = {
-                metadata: {
-                    dashboardItemId: reportId,
-                    orgId: client.customerId || '*',
-                    clientId: client.publicKey,
-                    task: 'item',
-                    databaseType: client.databaseType,
-                    filters: minimalFilters.filter((f) => f.dashboardName === dashboard[reportId].dashboardName),
-                    customFields,
-                    additionalProcessing: updatedProcessing,
-                    paginateTable: true,
-                },
-            };
-            const cloudBody = {
-                id: reportId,
-                filters: minimalFilters.filter((f) => f.dashboardName === dashboard[reportId].dashboardName),
-            };
-            setError(undefined);
-            const resp = await getData(client, 'itempost', 'omit', hostedBody, cloudBody);
-            processFilterErrorList(resp);
-            if (resp && resp.name !== 'error' && !resp.errorMessage) {
-                setIsComparison(!!resp.compareRows?.length);
-                if (resp.compareRows) {
-                    mergeComparisonRange(resp);
-                }
-                const dashboardItem = {
-                    ...resp,
-                    filtersApplied: minimalFilters.filter((f) => f.dashboardName === dashboard[reportId].dashboardName),
-                };
-                const cleanedReport = await cleanDashboardItem(dashboardItem, filters, client);
-                setReport(cleanedReport);
-                if (mapColorsToFields) {
-                    setColorMap(mapColorsToFields(cleanedReport, theme));
+                let tempRows = [...report.rows, ...paginatedRows.rows];
+                if (resetRows) {
+                    tempRows = paginatedRows.rows;
                 }
+                setReport({ ...report, rows: tempRows });
+                setTimeout(() => {
+                    setPaginating(false);
+                }, 200);
             }
-            else {
-                setError(resp?.errorMessage);
-            }
-            setAdditionProcessing(updatedProcessing);
-            setTimeout(() => {
+            catch (e) {
+                console.log(e);
                 setPaginating(false);
-            }, 200);
-        }
-        catch (e) {
-            console.log('Error fetching chart: ', e);
-            setPaginating(false);
+            }
         }
     };
-    const getChartData = async (useReportTask = true, reportFilterInfo) => {
-        try {
-            if (filterUpdateIndex === reportFilterInfo.updateIndex) {
-                return;
-            }
-            const filters = reportFilterInfo.filters;
-            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) {
-                setIsComparison(!!resp.compareRows?.length);
-                if (resp.compareRows) {
-                    mergeComparisonRange(resp);
-                }
-                const cleanedReport = await cleanDashboardItem(resp, filters ? filters : resp.filters, client);
-                if (cleanedReport.chartType === 'table' && cleanedReport.pivot) {
-                    cleanedReport.columns = cleanedReport.yAxisFields;
-                }
-                setReport(cleanedReport);
-                let filterArray = filters;
-                // THIS SHOULD ONLY BE UNDEFINED ON INITIAL LOAD
-                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 dateFilter = filterArray.find((filter) => {
-                    return filter.filterType === 'date_range';
-                });
-                setFilterUpdateIndex(reportFilterInfo.updateIndex);
-                setDateFilter(dateFilter);
-                setChartFilters(filterArray);
-                if (mapColorsToFields) {
-                    setColorMap(mapColorsToFields(resp, theme));
-                }
-            }
-            else {
-                setError(resp?.errorMessage);
-            }
+    const fetchReportHelper = async (useReportTask = true, reportFilterInfo, processing) => {
+        const tempReport = dashboard[reportId];
+        const allowDateRange = !hideDateRangeFilter;
+        const minimalFilters = Object.values(reportFilterInfo.filters).length
+            ? Object.values(reportFilterInfo.filters)
+                .filter((f) => allowDateRange || f.filterType !== 'date_range')
+                .map((filter) => {
+                const newFilter = { ...filter };
+                return newFilter;
+            })
+            : [];
+        if (!didFiltersChange(tempReport, minimalFilters) &&
+            !loading &&
+            tempReport &&
+            !tempReport.triggerReload &&
+            !processing &&
+            dateBucket === previousDateBucket) {
             setLoading(false);
+            setReport(tempReport);
+            return;
         }
-        catch (e) {
-            if (useReportTask) {
-                getChartData(false, reportFilterInfo);
-            }
-            else {
-                console.log('Error fetching chart: ', e);
-                setLoading(false);
-            }
+        setLoading(true);
+        const { report, error } = await fetchReport(reportId, client, useReportTask, minimalFilters, processing, dateBucket, customFields);
+        if (error) {
+            setError(error);
+            setLoading(false);
+            return;
+        }
+        setPreviousDateBucket(dateBucket);
+        setReport(report);
+        if (mapColorsToFields && report) {
+            setColorMap(mapColorsToFields(report, theme));
+        }
+        let filterArray = minimalFilters;
+        // 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: reportFilterInfo.updateIndex,
+                },
+            });
         }
+        setFilterUpdateIndex(reportFilterInfo.updateIndex);
+        setChartFilters(filterArray || []);
+        if (mapColorsToFields) {
+            setColorMap(mapColorsToFields(report, theme));
+        }
+        setAdditionProcessing(processing);
+        setError(error);
+        setLoading(false);
     };
     useEffect(() => {
         if (!client) {
@@ -356,61 +259,61 @@ const ChartUpdater = ({ colors, reportId, className, containerStyle, isAnimation
             return;
         }
         setInitialLoad(false);
-        let parsedReportFilters = reportFilters[reportId]
+        const parsedReportFilters = reportFilters[reportId]
             ? reportFilters[reportId]
-            : { updateIndex: 0 };
-        getChartData(true, parsedReportFilters);
-    }, [client, reportId, reportFilters[reportId]?.updateIndex]);
+            : { updateIndex: 0, filters: [] };
+        if (filterUpdateIndex === parsedReportFilters.updateIndex) {
+            return;
+        }
+        fetchReportHelper(true, reportFilters[reportId] || { filters: [] }, additionalProcessing);
+    }, [client, reportId, reportFilters[reportId]?.updateIndex, dateBucket]);
     useEffect(() => {
-        if (!dashboard || !dashboard[reportId]) {
+        const tempReport = dashboard[reportId];
+        if (!tempReport) {
             return;
         }
         setInitialLoad(false);
         setLoading(false);
-        setReport(dashboard[reportId]);
-        setChartFilters(dashboard[reportId].filtersApplied);
-        const dateFilter = dashboard[reportId].filtersApplied.find((filter) => {
-            return filter.filterType === 'date_range';
-        });
-        setDateFilter(dateFilter);
-    }, []);
-    return (_jsxs("div", { children: [!hideFilters && (_jsx("div", { style: {
-                    display: 'flex',
-                    boxSizing: 'content-box',
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                }, children: _jsx(FilterContainerComponent, { children: chartFilters.map((filter, index) => (_jsx(DashboardFilter, { filter: filter, onChangeFilter: (filter, value = null, comparison = null) => {
-                            const updatedFilters = chartFilters.map((f) => {
-                                if (f.field === filter.field ||
-                                    (f.filterType === 'date_range' &&
-                                        filter.filterType === 'date_range')) {
-                                    return updateFilter(f, value, comparison);
-                                }
-                                return f;
-                            });
-                            setChartFilters(updatedFilters);
-                            getChartData(true, {
+        let filtersApplied = [];
+        if (tempReport.filtersApplied && tempReport.filtersApplied.length > 0) {
+            filtersApplied = tempReport.filtersApplied.map((filter) => {
+                return filter;
+            });
+        }
+        setReport(tempReport);
+        setChartFilters(filtersApplied);
+        if (tempReport.error) {
+            setError(tempReport.error);
+        }
+    }, [dashboard[reportId]]);
+    if (error) {
+        return (_jsx("div", { style: containerStyle, className: className, children: _jsx(ChartError, { errorMessage: error }) }));
+    }
+    return (_jsxs("div", { children: [!hideFilters && (_jsx(FilterContainerComponent, { children: chartFilters.map((filter, index) => (_jsx(DashboardFilter, { filter: filter, onChangeFilter: (filter, value = null, comparison = null) => {
+                        const updatedFilters = chartFilters.map((f) => {
+                            if (f.field === filter.field ||
+                                (f.filterType === 'date_range' &&
+                                    filter.filterType === 'date_range')) {
+                                return updateFilter(f, value, comparison);
+                            }
+                            return f;
+                        });
+                        setChartFilters(updatedFilters);
+                        fetchReportHelper(true, {
+                            filters: updatedFilters,
+                            updateIndex: filterUpdateIndex + 1,
+                        }, additionalProcessing);
+                        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(ChartDisplay, { config: report, reportId: reportId, colors: colors, className: className, containerStyle: containerStyle, hideXAxis: hideXAxis, hideYAxis: hideYAxis, hideCartesianGrid: hideCartesianGrid, hideHorizontalCartesianGrid: hideHorizontalCartesianGrid, hideVerticalCartesianGrid: hideVerticalCartesianGrid, hideSubsequentXAxisTicks: hideSubsequentXAxisTicks, cartesianGridLineStyle: cartesianGridLineStyle, cartesianGridLineColor: cartesianGridLineColor, hideDateRangeFilter: hideDateRangeFilter, comparisonLineStyle: comparisonLineStyle, isAnimationActive: isAnimationActive, isComparison: isComparison, loading: loading || initialLoad, paginating: paginating, error: error, colorMap: colorMap, LoadingComponent: LoadingComponent, onPageChange: onPageChange, onSortChange: onSortChange, onClickChartElement: onClickChartElement, initialDateFilter: dateFilter })] }));
-};
-export const ChartDisplay = ({ reportId, config, colors, className, containerStyle, hideXAxis, hideYAxis, hideCartesianGrid, hideDateRangeFilter = false, hideHorizontalCartesianGrid = false, hideVerticalCartesianGrid = true, hideSubsequentXAxisTicks = false, cartesianGridLineStyle = 'solid', cartesianGridLineColor, comparisonLineStyle, isAnimationActive, loading = false, paginating = false, error = undefined, isComparison = false, colorMap, LoadingComponent = QuillLoadingSkeleton, onPageChange, onSortChange, onClickChartElement, dateBucket, overrideTheme, initialDateFilter, }) => {
-    const { dashboardFilters } = useContext(DashboardFiltersContext);
-    const specificDashboardFilter = useMemo(() => {
-        if (!dashboardFilters) {
-            return [];
-        }
-        return dashboardFilters.filter((f) => f && config && config.dashboardName === f.dashboardName);
-    }, [dashboardFilters]);
+                            },
+                        });
+                    }, theme: theme, SelectComponent: SelectComponent, MultiSelectComponent: MultiSelectComponent, DateRangePickerComponent: DateRangePickerComponent }, index))) })), _jsx(ChartDisplay, { config: report ? convertInternalReportToReport(report) : undefined, reportId: reportId, colors: colors, className: className, containerStyle: containerStyle, hideXAxis: hideXAxis, hideYAxis: hideYAxis, hideCartesianGrid: hideCartesianGrid, hideHorizontalCartesianGrid: hideHorizontalCartesianGrid, hideVerticalCartesianGrid: hideVerticalCartesianGrid, hideSubsequentXAxisTicks: hideSubsequentXAxisTicks, cartesianGridLineStyle: cartesianGridLineStyle, cartesianGridLineColor: cartesianGridLineColor, hideDateRangeFilter: hideDateRangeFilter, comparisonLineStyle: comparisonLineStyle, isAnimationActive: isAnimationActive, loading: loading || initialLoad, paginating: paginating, colorMap: colorMap, LoadingComponent: LoadingComponent, onPageChange: onPageChange, onSortChange: onSortChange, onClickChartElement: onClickChartElement })] }));
+}
+export const ChartDisplay = ({ reportId, config, colors, className, containerStyle, hideXAxis, hideYAxis, hideCartesianGrid, hideDateRangeFilter = false, hideHorizontalCartesianGrid = false, hideVerticalCartesianGrid = true, hideSubsequentXAxisTicks = false, cartesianGridLineStyle = 'solid', cartesianGridLineColor, comparisonLineStyle, isAnimationActive, loading = false, paginating = false, ErrorComponent = ChartError, colorMap, LoadingComponent = QuillLoadingSkeleton, onPageChange, onSortChange, onClickChartElement, overrideTheme, }) => {
     const { downloadCSV } = useExport(reportId);
     const theme = overrideTheme ?? useTheme();
     const chartColors = useMemo(() => {
@@ -420,126 +323,42 @@ export const ChartDisplay = ({ reportId, config, colors, className, containerSty
                 ? theme.chartColors
                 : ['#4E80EE', '#E14F62', '#55B5A6', '#E9A23B', '#6466E9', '#55B685'];
     }, [colors]);
-    const rows = config?.pivotRows ?? config?.rows ?? [];
     const getDateFilter = () => {
-        if (!hideDateRangeFilter) {
-            return findAndProcessDateFilter(Object.values(specificDashboardFilter));
+        if (!hideDateRangeFilter && config && config.filtersApplied) {
+            return findAndProcessDateFilter(config.filtersApplied.map((f) => f));
         }
         return undefined;
     };
-    const [dateFilter, setDateFilter] = useState(initialDateFilter ?? getDateFilter());
-    const getYAxisFields = (curDateFilter) => {
-        if (config &&
-            config.pivot &&
-            config.pivotColumns &&
-            config.pivot.columnField) {
-            return (config?.pivotColumns
-                .slice(1)
-                .map((column) => {
-                return { ...column, format: config?.yAxisFields[0].format };
-            }) ?? []);
-        }
-        else if (config && config.pivot && config.pivotColumns) {
-            return (config?.pivotColumns
-                .slice(1)
-                .map((column) => {
-                return {
-                    ...column,
-                    label: config?.yAxisFields[0].label,
-                    format: config?.yAxisFields[0].format,
-                };
-            }) ?? []);
-        }
-        else {
-            if (curDateFilter?.comparison &&
-                curDateFilter.comparisonRange.value !== 'NO_COMPARISON') {
-                const comparisonYAxisFields = config?.yAxisFields?.map((field) => {
-                    return {
-                        ...field,
-                        field: `comparison_${field.field}`,
-                        label: `comparison ${field.label ?? field.field}`,
-                    };
-                });
-                return (config?.pivotColumns ?? [
-                    ...config?.yAxisFields,
-                    ...comparisonYAxisFields,
-                ] ??
-                    []);
-            }
-            return config?.pivotColumns ?? config?.yAxisFields ?? [];
-        }
-    };
-    const [yAxisFields, setYAxisFields] = useState(getYAxisFields(dateFilter ?? getDateFilter()));
+    const [dateFilter, setDateFilter] = useState(getDateFilter());
     useEffect(() => {
-        setYAxisFields(getYAxisFields(initialDateFilter ?? getDateFilter()));
-        setDateFilter(initialDateFilter ?? getDateFilter());
-    }, [config, specificDashboardFilter, initialDateFilter]);
-    if (error) {
-        return _jsx(ChartError, { className: className, containerStyle: containerStyle });
-    }
-    else if (config &&
+        setDateFilter(getDateFilter());
+    }, [config]);
+    if (config &&
         !config.pivot &&
-        config?.chartType !== 'metric' &&
-        config?.chartType !== 'table' &&
-        (config.rowCount > MAX_ROWS_FOR_GENERIC_TABLE ||
-            (rows && rows.length > MAX_ROWS_FOR_GENERIC_TABLE))) {
-        return (_jsx(ChartError, { className: className, containerStyle: containerStyle, label: `Charts can only display ${MAX_ROWS_FOR_GENERIC_TABLE} rows. Please add a pivot or modify the query.` }));
+        config.chartType !== 'metric' &&
+        config.chartType !== 'table' &&
+        ((config.rowCount && config.rowCount > MAX_ROWS_FOR_GENERIC_TABLE) ||
+            (config?.rows && config?.rows.length > MAX_ROWS_FOR_GENERIC_TABLE))) {
+        return (_jsx("div", { style: containerStyle, className: className, children: _jsx(ErrorComponent, { errorMessage: `Charts can only display ${MAX_ROWS_FOR_GENERIC_TABLE} rows. Please add a pivot or modify the query.` }) }));
     }
-    else if (!config || loading) {
+    else if (loading) {
         return (_jsx("div", { className: className, style: containerStyle, children: _jsx(LoadingComponent, {}) }));
     }
     const chartTypes = [config?.chartType];
     if (chartTypes.includes('pie')) {
-        const xAxisField = config.xAxisField;
-        return (_jsx(PieChart, { className: className, containerStyle: containerStyle, data: rows.map((row) => {
+        return (_jsx(PieChart, { className: className, containerStyle: containerStyle, data: config?.rows.map((row) => {
                 return {
                     ...row,
-                    count: parseInt(row[yAxisFields[0].field]) /
-                        sumByKey(rows, yAxisFields[0].field),
+                    count: 
+                    // @ts-ignore
+                    parseInt(row[config?.yAxisFields[0]?.field]) /
+                        // @ts-ignore
+                        sumByKey(rows, config?.yAxisFields[0].field),
                 };
-            }), category: yAxisFields[0].field, index: xAxisField, colors: chartColors, theme: theme, colorMap: colorMap, onClickChartElement: onClickChartElement }));
+            }) || [], category: config?.yAxisFields[0]?.field, index: config?.xAxisField, colors: chartColors, theme: theme, colorMap: colorMap, onClickChartElement: onClickChartElement }));
     }
     if (chartTypes.includes('table')) {
-        const columns = yAxisFields;
-        // FOR PIVOTS - ADD THE RIGHT FIELD TYPE FOR THE VALUE COLUMNS
-        const valueFieldType = config?.pivot?.valueFieldType || undefined;
-        // Walk through data.columns and pick off the labels from yAxisFields
-        columns.forEach((col, index) => {
-            // ADD THE RIGHT FIELD TYPE FOR THE VALUE COLUMNS
-            if ((valueFieldType ||
-                ['min', 'max'].includes(config?.pivot?.aggregationType)) &&
-                index !== 0) {
-                col.format = valueFieldType || 'two_decimal_places';
-            }
-            if (!yAxisFields)
-                return;
-            const matchingCol = yAxisFields.find((c) => c.field === col.field);
-            if (!col.label && matchingCol) {
-                col.label = matchingCol.label;
-                col.format = matchingCol.format;
-            }
-        });
-        const formattedRows = rows.map((row) => {
-            return 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;
-            }, {});
-        });
-        let numberOfRows = undefined;
-        if (config.compareRows && config.compareRows[0]) {
-            if (config.compareRows[0].COUNT) {
-                numberOfRows = parseInt(config.compareRows[0].COUNT);
-            }
-            else if (config.compareRows[0].count) {
-                numberOfRows = parseInt(config.compareRows[0].count);
-            }
-        }
-        return (_jsx(QuillTable, { rows: formattedRows ?? [], rowCount: numberOfRows, columns: columns ?? yAxisFields, currentPage: config.page, sort: config.sort, rowsPerPage: config?.rowsPerPage || 10, containerStyle: {
+        return (_jsx(QuillTable, { rows: config?.rows ?? [], rowCount: config?.rowCount, columns: config?.columns ?? config?.yAxisFields ?? [], currentPage: config?.pagination?.page || 1, sort: config?.sort, rowsPerPage: config?.pagination?.rowsPerPage || 10, containerStyle: {
                 width: containerStyle?.width || '100%',
                 height: containerStyle?.height || '400px',
                 ...containerStyle,
@@ -552,43 +371,18 @@ export const ChartDisplay = ({ reportId, config, colors, className, containerSty
             }, isLoading: paginating }));
     }
     if (chartTypes.includes('bar')) {
-        return (_jsx(BarList, { data: rows, theme: theme, yAxisFields: yAxisFields, colors: chartColors, xAxisField: config.xAxisField, xAxisFormat: config.xAxisFormat, containerStyle: containerStyle, className: className, colorMap: colorMap, onClickChartElement: onClickChartElement }));
+        return (_jsx(BarList, { data: config?.rows || [], theme: theme, yAxisFields: config?.yAxisFields || [], colors: chartColors, xAxisField: config?.xAxisField || '', xAxisFormat: config?.xAxisFormat || 'string', containerStyle: containerStyle, className: className, colorMap: colorMap, onClickChartElement: onClickChartElement }));
     }
     if (chartTypes.includes('column')) {
-        // Autofill the column chart with an empty column if there are no rows
-        let barChartData = rows;
-        if (dateFilter && (!barChartData || barChartData.length === 0)) {
-            const xAxis = config.xAxisField;
-            const yAxis = yAxisFields[0]?.field;
-            barChartData = [{ [xAxis]: '', [yAxis]: '0' }];
-        }
-        let xAxisFormat = config.xAxisFormat;
-        if (dateBucket) {
-            switch (dateBucket) {
-                case 'day':
-                    xAxisFormat = 'MMM_dd';
-                    break;
-                case 'week':
-                    xAxisFormat = 'string';
-                    break;
-                case 'month':
-                    xAxisFormat = 'MMM_yyyy';
-                    break;
-                default:
-                    xAxisFormat = 'MMM_yyyy';
-                    break;
-            }
-        }
-        return (_jsx(BarChart, { colors: chartColors, theme: theme, isStacked: config.pivot && yAxisFields.length > (dateFilter?.comparison ? 2 : 1), yAxisFields: yAxisFields, data: barChartData, xAxisField: config.xAxisField, xAxisLabel: config.xAxisLabel, xAxisFormat: xAxisFormat, containerStyle: containerStyle, className: className, comparison: dateFilter?.comparison &&
+        return (_jsx(BarChart, { colors: chartColors, theme: theme, isStacked: !!config?.pivot &&
+                config?.yAxisFields?.length > (dateFilter?.comparison ? 2 : 1), yAxisFields: config?.yAxisFields || [], data: config?.rows || [], xAxisField: config?.xAxisField || '', xAxisLabel: config?.xAxisLabel || '', xAxisFormat: config?.xAxisFormat || 'string', containerStyle: containerStyle, className: className, comparison: dateFilter?.comparison &&
                 dateFilter.comparisonRange.value !== 'NO_COMPARISON', isAnimationActive: isAnimationActive, hideXAxis: hideXAxis, hideYAxis: hideYAxis, hideCartesianGrid: hideCartesianGrid, colorMap: colorMap, onClickChartElement: onClickChartElement, dateFilter: dateFilter }));
     }
     if (chartTypes.includes('metric')) {
-        const isComparison = rows?.length > 0 &&
-            Object.keys(rows[0]).includes(`comparison_${config.xAxisField}`);
-        const primaryMetricLabel = config?.filtersApplied?.date_range?.preset?.label;
-        const comparisonKey = config?.filtersApplied?.date_range?.comparisonRange?.value;
-        const comparisonLabel = COMPARISON_OPTIONS.find((opt) => opt.value === comparisonKey)?.text;
-        if (rows?.length === 0 || rows[0][config.xAxisField] === null) {
+        if (!config?.rows ||
+            config?.rows?.length === 0 ||
+            // @ts-ignore
+            config?.rows[0][config?.xAxisField] === null) {
             return (_jsx("div", { style: {
                     display: 'flex',
                     flex: '1 0 auto',
@@ -603,7 +397,7 @@ export const ChartDisplay = ({ reportId, config, colors, className, containerSty
                     ...containerStyle,
                 }, className: className, children: "No results" }));
         }
-        return (_jsxs("div", { style: {
+        return (_jsx("div", { style: {
                 fontFamily: theme?.fontFamily,
                 fontSize: 32,
                 color: theme?.primaryTextColor,
@@ -620,84 +414,9 @@ export const ChartDisplay = ({ reportId, config, colors, className, containerSty
                 width: '100%',
                 flexDirection: 'row',
                 ...containerStyle,
-            }, className: className, children: [_jsxs("div", { style: {
-                        display: 'flex',
-                        gap: 4,
-                        alignItems: 'baseline',
-                        marginRight: 'auto',
-                    }, children: [_jsx("span", { children: rows?.length > 0 &&
-                                valueFormatter({
-                                    value: rows[0][config.xAxisField] ?? 0,
-                                    field: config.xAxisField,
-                                    fields: [
-                                        {
-                                            field: config.xAxisField,
-                                            format: config.xAxisFormat,
-                                            label: config.xAxisLabel,
-                                            _id: config._id || 'dummy',
-                                        },
-                                    ],
-                                }) }), isComparison && (_jsx("span", { style: {
-                                fontSize: 13,
-                                fontWeight: '500',
-                                fontFamily: theme?.fontFamily,
-                                color: theme?.primaryTextColor,
-                                marginLeft: 2,
-                            }, children: primaryMetricLabel
-                                ? `in ${primaryMetricLabel.toLowerCase()}`
-                                : 'this period' }))] }), isComparison && (_jsxs("div", { style: {
-                        display: 'flex',
-                        gap: 4,
-                        alignItems: 'baseline',
-                        paddingTop: 4,
-                        color: theme?.secondaryTextColor,
-                    }, children: [_jsx("span", { style: {
-                                fontSize: 28,
-                                fontWeight: '500',
-                                fontFamily: theme?.fontFamily,
-                                color: theme?.secondaryTextColor,
-                            }, children: rows?.length > 0 &&
-                                valueFormatter({
-                                    value: rows[0][`comparison_${config.xAxisField}`] ?? 0,
-                                    field: config.xAxisField,
-                                    fields: [
-                                        {
-                                            field: config.xAxisField,
-                                            format: config.xAxisFormat,
-                                            label: config.xAxisLabel,
-                                            _id: config._id || 'dummy',
-                                        },
-                                    ],
-                                }) }), _jsx("span", { style: {
-                                fontSize: 13,
-                                fontWeight: '500',
-                                fontFamily: theme?.fontFamily,
-                                color: theme?.secondaryTextColor,
-                                marginLeft: 2,
-                            }, children: comparisonLabel
-                                ? 'in ' + comparisonLabel.toLowerCase()
-                                : 'previous period' })] }))] }));
-    }
-    // Autofill the line chart with two zero values, so they form a line at 0.0
-    // when there are no rows on the config.
-    let lineChartData = rows;
-    const xAxisFieldFormat = config.columns.find((col) => col.field === config.xAxisField)?.format;
-    if (dateFilter &&
-        DATE_FORMAT_TYPES.includes(xAxisFieldFormat) &&
-        (!lineChartData || lineChartData.length === 0)) {
-        const xAxis = config.xAxisField;
-        const yAxis = yAxisFields[0]?.field;
-        const format = config.pivot
-            ? 'MMM_yyyy'
-            : config.columns.find((c) => c.field === xAxis).format;
-        const startDate = quillFormat({ value: dateFilter?.startDate, format });
-        const endDate = quillFormat({ value: dateFilter?.endDate, format });
-        lineChartData = [
-            { [xAxis]: startDate, [yAxis]: '0' },
-            { [xAxis]: endDate, [yAxis]: '0' },
-        ];
+            }, className: className, children: _jsx(QuillMetricComponent, { report: config ?? EMPTY_REPORT }) }));
     }
-    return (_jsx(LineChart, { colors: chartColors, colorMap: colorMap, yAxisFields: yAxisFields.sort(sortComparisonFirst), data: lineChartData, xAxisField: config.xAxisField, xAxisLabel: config.xAxisLabel, xAxisFormat: config.xAxisFormat, containerStyle: containerStyle, className: className, theme: theme, comparison: dateFilter?.comparison, isAnimationActive: isAnimationActive, hideXAxis: hideXAxis, hideYAxis: hideYAxis, hideCartesianGrid: hideCartesianGrid, hideHorizontalCartesianGrid: hideHorizontalCartesianGrid, hideVerticalCartesianGrid: hideVerticalCartesianGrid, hideSubsequentXAxisTicks: hideSubsequentXAxisTicks, cartesianGridLineStyle: cartesianGridLineStyle ?? 'solid', comparisonLineStyle: comparisonLineStyle ?? 'solid', cartesianGridLineColor: cartesianGridLineColor, onClickChartElement: onClickChartElement, dateFilter: dateFilter }));
+    return (_jsx(LineChart, { colors: chartColors, colorMap: colorMap, yAxisFields: config?.yAxisFields.sort(sortComparisonFirst) || [], data: config?.rows || [], xAxisField: config?.xAxisField || '', xAxisLabel: config?.xAxisLabel || '', xAxisFormat: config?.xAxisFormat || 'string', containerStyle: containerStyle, className: className, theme: theme, comparison: dateFilter?.comparison, isAnimationActive: isAnimationActive, hideXAxis: hideXAxis, hideYAxis: hideYAxis, hideCartesianGrid: hideCartesianGrid, hideHorizontalCartesianGrid: hideHorizontalCartesianGrid, hideVerticalCartesianGrid: hideVerticalCartesianGrid, hideSubsequentXAxisTicks: hideSubsequentXAxisTicks, cartesianGridLineStyle: cartesianGridLineStyle ?? 'solid', comparisonLineStyle: comparisonLineStyle ?? 'solid', cartesianGridLineColor: cartesianGridLineColor, onClickChartElement: onClickChartElement, dateFilter: dateFilter }));
 };
 // Sort to put comparison first (ie. underneath) primary.
 const sortComparisonFirst = (a, b) => {
@@ -710,4 +429,3 @@ const sortComparisonFirst = (a, b) => {
         return 1;
     return 0;
 };
-export default Chart;