@quillsql/react 2.15.2 → 2.15.4

package/dist/cjs/Chart.js

@@ -1,612 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ChartDisplay = void 0;
-exports.isEquivalent = isEquivalent;
-exports.default = Chart;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const useExport_1 = require("./hooks/useExport");
-const date_fns_1 = require("date-fns");
-const BarList_1 = __importDefault(require("./components/Chart/BarList"));
-const PieChart_1 = __importDefault(require("./components/Chart/PieChart"));
-const Context_1 = require("./Context");
-const QuillTable_1 = __importDefault(require("./components/QuillTable"));
-const LineChart_1 = __importDefault(require("./components/Chart/LineChart"));
-const BarChart_1 = __importDefault(require("./components/Chart/BarChart"));
-const ChartSkeleton_1 = require("./components/Chart/ChartSkeleton");
-const ChartError_1 = __importDefault(require("./components/Chart/ChartError"));
-const Filter_1 = require("./models/Filter");
-const filterProcessing_1 = require("./utils/filterProcessing");
-const UiComponents_1 = require("./components/UiComponents");
-const DashboardFilter_1 = require("./components/Dashboard/DashboardFilter");
-const QuillSelect_1 = require("./components/QuillSelect");
-const QuillDateRangePicker_1 = require("./DateRangePicker/QuillDateRangePicker");
-const report_1 = require("./utils/report");
-const paginationProcessing_1 = require("./utils/paginationProcessing");
-const MetricComponent_1 = __importDefault(require("./components/Dashboard/MetricComponent"));
-const DataLoader_1 = __importStar(require("./components/Dashboard/DataLoader"));
-const TableComponent_1 = __importDefault(require("./components/Dashboard/TableComponent"));
-const dateRangePickerUtils_1 = require("./DateRangePicker/dateRangePickerUtils");
-const useReport_1 = require("./hooks/useReport");
-const fast_deep_equal_1 = __importDefault(require("fast-deep-equal"));
-const QuillMultiSelectWithCombo_1 = require("./components/QuillMultiSelectWithCombo");
-const MapChart_1 = require("./components/Chart/MapChart");
-const GaugeChart_1 = __importDefault(require("./components/Chart/GaugeChart"));
-const useDashboard_1 = require("./hooks/useDashboard");
-const MAX_ROWS_FOR_GENERIC_TABLE = 500;
-// @ts-ignore
-function sumByKey(arr, key) {
-    // @ts-ignore
-    return arr.reduce((acc, cur) => {
-        const val = parseInt(cur[key], 10);
-        return isNaN(val) ? acc : acc + val;
-    }, 0);
-}
-function areDatesNearby(date1, date2) {
-    return Math.abs((0, date_fns_1.differenceInHours)(date1, date2)) < 24;
-}
-function isEquivalent(filters1, filters2) {
-    if (filters2.length !== filters1.length) {
-        return false;
-    }
-    // const filterKeys = Object.keys(filters2);
-    for (let i = 0; i < filters1.length; i++) {
-        const filter1 = filters1[i];
-        if (!filter1) {
-            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') {
-                if (filter1.values &&
-                    filter2.values &&
-                    filter1.values.length !== filter2.values.length) {
-                    return false;
-                }
-                if ((filter1.values && !filter2.values) ||
-                    (filter2.values && !filter1.values)) {
-                    return false;
-                }
-                // make sure that filter1.values is equivalent to filter2.values ignoring order
-                const sortedValues1 = filter1.values?.slice().sort() || [];
-                const sortedValues2 = filter2.values?.slice().sort() || [];
-                if (!sortedValues1.every((value, index) => value === sortedValues2[index])) {
-                    return false;
-                }
-            }
-            if (filter1.selectedValue !== filter2.selectedValue) {
-                return false;
-            }
-        }
-        else if (filter1?.operator === 'BETWEEN' &&
-            filter2?.operator === 'BETWEEN') {
-            if (!filter1?.values && !filter2?.values) {
-                continue;
-            }
-            else if (!filter1?.values || !filter2?.values) {
-                return false;
-            }
-            if (filter1?.values && filter2?.values) {
-                if (!areDatesNearby(filter1.values[0], filter2.values[0]) ||
-                    !areDatesNearby(filter1.values[1], filter2.values[1])) {
-                    return false;
-                }
-            }
-        }
-        else if (filterType === 'date_range') {
-            if (!filter1.startDate && !filter2.startDate) {
-                continue;
-            }
-            if (!areDatesNearby(filter1.startDate, filter2.startDate) ||
-                !areDatesNearby(filter1.endDate, filter2.endDate)) {
-                return false;
-            }
-            if (filter1.comparison !== filter2.comparison) {
-                return false;
-            }
-            if (filter1.comparisonRange && !filter2.comparisonRange) {
-                return false;
-            }
-            if (!filter1.comparisonRange && filter2.comparisonRange) {
-                return false;
-            }
-            if (filter1.comparisonRange && filter2.comparisonRange) {
-                if (!filter1.comparisonRange.startDate &&
-                    !filter2.comparisonRange.endDate) {
-                    continue;
-                }
-                if (!areDatesNearby(filter1.comparisonRange.startDate, filter2.comparisonRange.startDate) ||
-                    !areDatesNearby(filter1.comparisonRange.endDate, filter2.comparisonRange.endDate)) {
-                    return false;
-                }
-            }
-        }
-    }
-    return true;
-}
-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 = ChartSkeleton_1.QuillLoadingSkeleton, SelectComponent = QuillSelect_1.QuillSelectComponent, MultiSelectComponent = QuillMultiSelectWithCombo_1.QuillMultiSelectComponentWithCombo, DateRangePickerComponent = QuillDateRangePicker_1.QuillDateRangePicker, FilterContainerComponent = UiComponents_1.QuillFilterContainerComponent, TableComponent = TableComponent_1.default, MetricComponent = MetricComponent_1.default, filters, onClickChartElement, dateBucket, propagateChanges, }) {
-    const [schemaData] = (0, react_1.useContext)(Context_1.SchemaDataContext);
-    const { reload } = (0, useReport_1.useReportInternal)(reportId);
-    const { reports, reportsDispatch, fetchIndividualReport } = (0, react_1.useContext)(Context_1.ReportsContext);
-    const { reportFiltersDispatch, reportFilters, customReportFiltersDispatch, customReportFilters, } = (0, react_1.useContext)(Context_1.ReportFiltersContext);
-    const { eventTracking } = (0, react_1.useContext)(Context_1.EventTrackingContext);
-    const { isLoading: isDashboardsLoading } = (0, react_1.useContext)(Context_1.DashboardConfigContext);
-    const { dashboardCustomFilters } = (0, react_1.useContext)(Context_1.DashboardFiltersContext);
-    const { allReportsById } = (0, useDashboard_1.useAllReports)();
-    const { dashboardFilters } = (0, useDashboard_1.useDashboardInternal)(allReportsById[reportId]?.dashboardName ?? null);
-    const specificReportFilters = (0, react_1.useMemo)(() => {
-        const reportFilterValues = reportFilters[reportId];
-        if (reportFilterValues && !hideFilters)
-            return Object.values(reportFilterValues ?? {}).map((f) => f.filter);
-        if (allReportsById[reportId])
-            return dashboardFilters ?? [];
-        return [];
-    }, [reportFilters[reportId], allReportsById[reportId], dashboardFilters]);
-    const reportDateFilter = (0, react_1.useMemo)(() => {
-        return specificReportFilters.find((f) => f.filterType === 'date_range');
-    }, [specificReportFilters]);
-    const presetOptions = (0, react_1.useMemo)(() => {
-        return reportDateFilter
-            ? (0, dateRangePickerUtils_1.convertPresetOptionsToSelectableList)(reportDateFilter.presetOptions ?? [], reportDateFilter.defaultPresetRanges ?? [])
-            : dateRangePickerUtils_1.defaultOptionsV2;
-    }, [reportDateFilter]);
-    const userFilters = (0, react_1.useMemo)(() => {
-        return (filters
-            ?.filter((f) => f.filterType !== Filter_1.FilterType.Date)
-            ?.map(Filter_1.convertCustomFilter) ??
-            dashboardCustomFilters[allReportsById[reportId]?.dashboardName ?? '']);
-    }, [
-        filters,
-        dashboardCustomFilters[allReportsById[reportId]?.dashboardName ?? ''],
-    ]);
-    const previousFilters = (0, react_1.useRef)(undefined);
-    if (!(0, fast_deep_equal_1.default)(previousFilters.current, filters)) {
-        previousFilters.current = filters;
-    }
-    // A filter value can either be a string, an array of strings for a multiselect, or a date range (that could have a comparison range)
-    const [filterValues, setFilterValues] = (0, react_1.useState)({});
-    (0, react_1.useEffect)(() => {
-        setFilterValues(Object.values(reportFilters[reportId] ?? {}).reduce((acc, f) => {
-            acc[f.filter.label] =
-                f.filter.filterType === 'string'
-                    ? f.filter.stringFilterType === 'multiselect'
-                        ? { values: f.filter.values, operator: 'IN' }
-                        : { selectedValue: f.filter.selectedValue }
-                    : {
-                        startDate: f.filter.startDate,
-                        endDate: f.filter.endDate,
-                        preset: f.filter.preset,
-                        comparisonRange: f.filter.comparisonRange,
-                    };
-            return acc;
-        }, {}));
-    }, [reportFilters[reportId]]);
-    (0, react_1.useEffect)(() => {
-        if ((0, fast_deep_equal_1.default)(customReportFilters[reportId] ?? [], filters ?? [])) {
-            return;
-        }
-        customReportFiltersDispatch({
-            type: 'ADD_CUSTOM_REPORT_FILTERS',
-            reportId: reportId,
-            data: filters?.map(Filter_1.convertCustomFilter),
-        });
-        return () => {
-            customReportFiltersDispatch({
-                type: 'DELETE_CUSTOM_REPORT_FILTERS',
-                reportId: reportId,
-            });
-        };
-    }, [filters]);
-    (0, react_1.useEffect)(() => {
-        if (reportDateFilter) {
-            // Filter for custom date filter that applies to the report's dateField
-            const customDateFilter = previousFilters.current?.find((f) => f.filterType === Filter_1.FilterType.Date);
-            if (!customDateFilter) {
-                return;
-            }
-            const newFilter = (0, filterProcessing_1.applyCustomFilterToDashDateFilter)(customDateFilter, reportDateFilter);
-            setFilterValues((filterValues) => ({
-                ...filterValues,
-                [reportDateFilter.label]: {
-                    startDate: newFilter.startDate,
-                    endDate: newFilter.endDate,
-                    preset: newFilter.preset,
-                    comparisonRange: newFilter.comparisonRange,
-                },
-            }));
-            reportFiltersDispatch({
-                type: 'UPDATE_REPORT_FILTER',
-                id: reportId,
-                data: {
-                    filter: newFilter,
-                    loading: false,
-                },
-            });
-        }
-    }, [previousFilters.current]);
-    const dashboardReport = (0, react_1.useMemo)(() => allReportsById[reportId], [reportId, allReportsById]);
-    const report = (0, react_1.useMemo)(() => reports[reportId], [reports, reportId]);
-    const [loading, setLoading] = (0, react_1.useState)(true);
-    const [theme] = (0, react_1.useContext)(Context_1.ThemeContext);
-    const colorMap = (0, react_1.useMemo)(() => {
-        if (mapColorsToFields && report && theme) {
-            return mapColorsToFields(report, theme);
-        }
-    }, [report, theme]);
-    const [client, clientLoading] = (0, react_1.useContext)(Context_1.ClientContext);
-    const [error, setError] = (0, react_1.useState)(undefined);
-    const updateFilter = (filter, value, comparison) => {
-        let filterValue = {};
-        if (filter.filterType === Filter_1.InternalDashboardFilterType.String) {
-            if (filter.stringFilterType === 'multiselect') {
-                if ((value?.length ?? 0) === 0) {
-                    filterValue = { values: undefined, operator: undefined };
-                }
-                else {
-                    filterValue = { values: value, operator: 'IN' };
-                }
-            }
-            else {
-                filterValue = { selectedValue: value };
-            }
-        }
-        else if (filter.filterType === Filter_1.InternalDashboardFilterType.Date) {
-            if (comparison ||
-                (filter.comparison &&
-                    (filter.comparisonRange?.value ?? 'NO_COMPARISON') !==
-                        'NO_COMPARISON')) {
-                let preset = '';
-                if (comparison) {
-                    preset = filter.preset.value;
-                }
-                const key = comparison?.value ||
-                    (filter.comparisonRange?.value ?? 'NO_COMPARISON');
-                let primaryRange = {
-                    startDate: value ? value.startDate : filter.startDate,
-                    endDate: value ? value.endDate : filter.endDate,
-                };
-                if (value && value.preset) {
-                    preset = value.preset;
-                    primaryRange = (0, dateRangePickerUtils_1.getRangeFromPresetOptions)(value.preset, presetOptions);
-                }
-                filterValue = {
-                    startDate: primaryRange.startDate,
-                    endDate: primaryRange.endDate,
-                    preset: {
-                        label: presetOptions.find((o) => o.value === preset)?.label ?? preset,
-                        value: preset,
-                    },
-                    comparisonRange: {
-                        startDate: dateRangePickerUtils_1.COMPARISON_RANGE[key](primaryRange)
-                            ?.startDate,
-                        endDate: dateRangePickerUtils_1.COMPARISON_RANGE[key](primaryRange)
-                            ?.endDate,
-                        value: key,
-                    },
-                };
-            }
-            else {
-                const primaryRange = value && value.preset
-                    ? (0, dateRangePickerUtils_1.getRangeFromPresetOptions)(value.preset, presetOptions)
-                    : {
-                        startDate: value?.startDate || filter.startDate,
-                        endDate: value?.endDate || filter.endDate,
-                    };
-                const preset = value?.preset ? value.preset : '';
-                filterValue = {
-                    startDate: primaryRange.startDate,
-                    endDate: primaryRange.endDate,
-                    preset: {
-                        label: presetOptions.find((o) => o.value === preset)?.label ?? preset,
-                        value: preset,
-                    },
-                };
-            }
-        }
-        setFilterValues((filterValues) => ({
-            ...filterValues,
-            [filter.label]: filterValue,
-        }));
-        reload({
-            filters: specificReportFilters.map((f) => filter.label === f.label ? { ...f, ...filterValue } : f),
-            editedFilterLabel: filter.label,
-        }, userFilters, 'Chart');
-    };
-    const fetchReportHelper = async () => {
-        if (!client) {
-            return;
-        }
-        setLoading(true);
-        try {
-            await fetchIndividualReport({
-                reportId,
-                initiator: 'Chart',
-                fetchRows: false,
-                dashboardFilters: specificReportFilters,
-                customFilters: filters?.map(Filter_1.convertCustomFilter) ??
-                    dashboardCustomFilters[dashboardReport?.dashboardName ?? ''],
-                dateBucket,
-                customFields: schemaData.customFields,
-                propagateChanges,
-            });
-        }
-        catch (error) {
-            setError('Error fetching chart: ' + error);
-            eventTracking?.logError?.({
-                type: 'bug', // TODO: determine type
-                severity: 'high',
-                message: 'Error fetching chart',
-                errorMessage: error.message,
-                errorStack: error.stack,
-                errorData: {
-                    caller: 'Chart',
-                    function: 'fetchReportHelper',
-                },
-            });
-        }
-        finally {
-            setLoading(false);
-        }
-    };
-    // TODO: move this into a hook for all report scope operations
-    (0, react_1.useEffect)(() => {
-        if (reportId === undefined ||
-            reportId === '' ||
-            clientLoading ||
-            isDashboardsLoading) {
-            return;
-        }
-        if (dashboardReport) {
-            if (dashboardFilters && dashboardReport.rows?.length) {
-                reportFiltersDispatch({
-                    type: 'ADD_REPORT_FILTERS',
-                    id: reportId,
-                    data: dashboardFilters.map((f) => ({
-                        filter: f,
-                        loading: false,
-                    })),
-                });
-            }
-            reportsDispatch({
-                type: 'ADD_REPORT',
-                id: reportId,
-                data: dashboardReport,
-            });
-            setLoading(false);
-        }
-        else if (!reports[reportId]) {
-            fetchReportHelper();
-            return;
-        }
-        setLoading(false);
-    }, [dashboardFilters, clientLoading, isDashboardsLoading]);
-    if (report?.error || error) {
-        return ((0, jsx_runtime_1.jsx)("div", { style: containerStyle, className: className, children: (0, jsx_runtime_1.jsx)(ChartError_1.default, { errorMessage: report?.error ?? error }) }));
-    }
-    return ((0, jsx_runtime_1.jsxs)("div", { style: {
-            display: 'flex',
-            flexDirection: 'column',
-            height: 450,
-            ...containerStyle,
-        }, className: className, children: [!hideFilters && ((0, jsx_runtime_1.jsx)(FilterContainerComponent, { children: specificReportFilters.map((filter, index) => ((0, jsx_runtime_1.jsx)(DashboardFilter_1.DashboardFilter, { filter: {
-                        ...filter,
-                        ...(filter.filterType === 'date_range' && {
-                            options: presetOptions,
-                        }),
-                        ...filterValues[filter.label],
-                    }, isLoading: reportFilters[reportId]?.[filter.label]?.loading, onChangeFilter: updateFilter, theme: theme, SelectComponent: SelectComponent, MultiSelectComponent: MultiSelectComponent, DateRangePickerComponent: DateRangePickerComponent }, index))) })), loading || !report ? ((0, jsx_runtime_1.jsx)(LoadingComponent, {})) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [('table' === report.chartType || 'metric' === report.chartType) && ((0, jsx_runtime_1.jsx)(DataLoader_1.default, { item: report, filters: specificReportFilters, userFilters: userFilters, additionalProcessing: {
-                            page: paginationProcessing_1.DEFAULT_TABLE_PAGINATION,
-                        }, propagateChanges: propagateChanges, dashboardName: report.dashboardName, children: ({ isLoading, error, onPageChange, onSortChange, data, rowCount, rowCountIsLoading, }) => 'metric' === report.chartType ? ((0, jsx_runtime_1.jsx)(MetricComponent, { error: error, isLoading: isLoading, report: data, children: data?.rows?.[0]?.[data.xAxisField] })) : ((0, jsx_runtime_1.jsx)(TableComponent, { report: data, isLoading: isLoading, error: error, rowCount: rowCount ?? data?.rowCount ?? data?.rows?.length ?? 0, rowCountIsLoading: rowCountIsLoading, onPageChange: (page) => onPageChange(page), onSortChange: (sort) => onSortChange(sort), hideName: true })) })), report.chartType !== 'table' && report.chartType !== 'metric' && ((0, jsx_runtime_1.jsx)(DataLoader_1.ChartDataLoader, { item: report, dateBucket: dateBucket, userFilters: userFilters, additionalProcessing: {
-                            page: paginationProcessing_1.DEFAULT_PAGINATION,
-                        }, filters: specificReportFilters, propagateChanges: propagateChanges, dashboardName: report.dashboardName, children: ({ isLoading, data, error }) => error ? ((0, jsx_runtime_1.jsx)(ChartError_1.default, { errorMessage: error })) : ((0, jsx_runtime_1.jsx)(exports.ChartDisplay, { config: data, containerStyle: {
-                                width: '100%',
-                                // height: '100%',
-                                flexGrow: 1,
-                            }, reportId: reportId, colors: colors, className: className, hideXAxis: hideXAxis, hideYAxis: hideYAxis, hideCartesianGrid: hideCartesianGrid, hideHorizontalCartesianGrid: hideHorizontalCartesianGrid, hideVerticalCartesianGrid: hideVerticalCartesianGrid, hideSubsequentXAxisTicks: hideSubsequentXAxisTicks, cartesianGridLineStyle: cartesianGridLineStyle, cartesianGridLineColor: cartesianGridLineColor, hideDateRangeFilter: hideDateRangeFilter, comparisonLineStyle: comparisonLineStyle, isAnimationActive: isAnimationActive, loading: isLoading, scrollable: true, colorMap: colorMap, LoadingComponent: LoadingComponent, onClickChartElement: onClickChartElement, referenceLines: data.referenceLineYValues })) }))] }))] }));
-}
-const ChartDisplay = ({ reportId, config, colors, className, containerStyle, hideXAxis, hideYAxis, hideCartesianGrid, hideDateRangeFilter = false, hideHorizontalCartesianGrid = false, hideVerticalCartesianGrid = true, hideSubsequentXAxisTicks = false, cartesianGridLineStyle = 'solid', cartesianGridLineColor, comparisonLineStyle, isAnimationActive, scrollable = false, loading = false, ErrorComponent = ChartError_1.default, colorMap, LoadingComponent = ChartSkeleton_1.QuillLoadingSkeleton, onPageChange, onSortChange, onClickChartElement, overrideTheme, referenceLines, showLegend = false, }) => {
-    const { downloadCSV } = (0, useExport_1.useExport)(reportId);
-    const [theme] = (0, react_1.useContext)(Context_1.ThemeContext);
-    const { reports } = (0, react_1.useContext)(Context_1.ReportsContext);
-    const { dashboardFilters } = (0, react_1.useContext)(Context_1.DashboardFiltersContext);
-    const { reportFilters } = (0, react_1.useContext)(Context_1.ReportFiltersContext);
-    const specificDashboardFilters = (0, react_1.useMemo)(() => {
-        if (!reportId)
-            return [];
-        const dashboardName = reports[reportId]?.dashboardName || config?.dashboardName;
-        if (!dashboardName)
-            return [];
-        return Object.values(dashboardFilters[dashboardName] ?? {}).map((f) => f.filter);
-    }, [dashboardFilters, reportId, reports]);
-    const specificReportFilters = (0, react_1.useMemo)(() => {
-        if (!reportId)
-            return [];
-        return Object.values(reportFilters[reportId] ?? []).map((f) => f.filter);
-    }, [reportFilters, reportId]);
-    const chartColors = (0, react_1.useMemo)(() => {
-        if (overrideTheme && overrideTheme.chartColors) {
-            return colors?.length
-                ? colors
-                : overrideTheme &&
-                    overrideTheme.chartColors &&
-                    overrideTheme.chartColors.length
-                    ? overrideTheme.chartColors
-                    : ['#4E80EE', '#E14F62', '#55B5A6', '#E9A23B', '#6466E9', '#55B685'];
-        }
-        return colors?.length
-            ? colors
-            : theme && theme.chartColors && theme.chartColors.length
-                ? theme.chartColors
-                : ['#4E80EE', '#E14F62', '#55B5A6', '#E9A23B', '#6466E9', '#55B685'];
-    }, [colors]);
-    const dateFilter = (0, react_1.useMemo)(() => {
-        const filters = specificReportFilters.length > 0
-            ? specificReportFilters
-            : specificDashboardFilters;
-        if (!hideDateRangeFilter && filters) {
-            return (0, filterProcessing_1.findAndProcessDateFilter)(filters.map((f) => f));
-        }
-        return undefined;
-    }, [config, specificReportFilters, specificDashboardFilters]);
-    const [page, setPage] = (0, react_1.useState)(0);
-    if (loading) {
-        return ((0, jsx_runtime_1.jsx)("div", { className: className, style: containerStyle, children: (0, jsx_runtime_1.jsx)(LoadingComponent, {}) }));
-    }
-    else if (config &&
-        !['metric', 'table', 'gauge', 'US map', 'World map'].includes(config.chartType) &&
-        ((config.rowCount && config.rowCount > MAX_ROWS_FOR_GENERIC_TABLE) ||
-            (config?.rows && config?.rows.length > MAX_ROWS_FOR_GENERIC_TABLE))) {
-        return ((0, jsx_runtime_1.jsx)("div", { style: containerStyle, className: className, children: (0, jsx_runtime_1.jsx)(ErrorComponent, { errorMessage: `Charts can only display ${MAX_ROWS_FOR_GENERIC_TABLE} rows. Please modify the query.` }) }));
-    }
-    if (config?.chartType?.toLowerCase() === 'pie') {
-        return ((0, jsx_runtime_1.jsx)(PieChart_1.default, { className: className, containerStyle: containerStyle, data: config?.rows?.map((row) => {
-                return {
-                    ...row,
-                    count: 
-                    // @ts-ignore
-                    parseInt(row[config?.yAxisFields[0]?.field]) /
-                        sumByKey(config?.rows, config?.yAxisFields[0]?.field),
-                };
-            }) || [], category: config?.yAxisFields?.[0]?.field, index: config?.xAxisField, colors: chartColors, theme: overrideTheme ?? theme, colorMap: colorMap, onClickChartElement: onClickChartElement, yAxisFields: config?.yAxisFields, showLegend: showLegend }));
-    }
-    if (config?.chartType?.toLowerCase() === 'table') {
-        return ((0, jsx_runtime_1.jsx)(QuillTable_1.default, { rows: config?.rows ?? [], rowCount: config?.rowCount, columns: config?.includeCustomFields &&
-                config?.columnsWithCustomFields &&
-                !config?.pivot
-                ? config.columnsWithCustomFields
-                : (config?.columns ?? config?.yAxisFields ?? []), currentPage: config?.pagination?.page ?? page, sort: config?.sort, rowsPerPage: config?.pagination?.rowsPerPage ||
-                paginationProcessing_1.DEFAULT_TABLE_PAGINATION.rowsPerPage, containerStyle: {
-                width: containerStyle?.width || '100%',
-                ...containerStyle,
-            }, className: className, downloadCSV: async () => {
-                downloadCSV();
-            }, onPageChange: (page) => {
-                onPageChange && onPageChange(page);
-                setPage(page);
-            }, onSortChange: (sort) => {
-                onSortChange && onSortChange(sort);
-            } }));
-    }
-    if (config?.chartType?.toLowerCase() === 'bar') {
-        return ((0, jsx_runtime_1.jsx)(BarList_1.default, { data: config?.rows ?? [], theme: overrideTheme ?? theme, yAxisFields: config?.yAxisFields ?? [], colors: chartColors, xAxisField: config?.xAxisField ?? '', xAxisFormat: config?.xAxisFormat ?? 'string', containerStyle: containerStyle, className: className, colorMap: colorMap, onClickChartElement: onClickChartElement, scrollable: scrollable }));
-    }
-    if (config?.chartType?.toLowerCase() === 'column') {
-        return ((0, jsx_runtime_1.jsx)(BarChart_1.default, { colors: chartColors, theme: overrideTheme ?? theme, isStacked: !!config?.pivot &&
-                config?.yAxisFields.length >
-                    (!hideDateRangeFilter && 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: !hideDateRangeFilter &&
-                !!dateFilter?.comparison &&
-                dateFilter.comparisonRange?.value !== 'NO_COMPARISON', isAnimationActive: isAnimationActive, hideXAxis: hideXAxis, hideYAxis: hideYAxis, hideCartesianGrid: hideCartesianGrid, colorMap: colorMap, onClickChartElement: onClickChartElement, dateFilter: !hideDateRangeFilter ? dateFilter : undefined, referenceLines: referenceLines, showLegend: showLegend }));
-    }
-    if (config?.chartType?.toLowerCase() === 'stacked') {
-        return ((0, jsx_runtime_1.jsx)(BarChart_1.default, { colors: chartColors, theme: overrideTheme ?? theme, isStacked: true, yAxisFields: config?.yAxisFields ?? [], data: config?.rows ?? [], xAxisField: config?.xAxisField ?? '', xAxisLabel: config?.xAxisLabel ?? '', xAxisFormat: config?.xAxisFormat ?? 'string', containerStyle: containerStyle, className: className, comparison: !hideDateRangeFilter &&
-                !!dateFilter?.comparison &&
-                dateFilter.comparisonRange?.value !== 'NO_COMPARISON', isAnimationActive: isAnimationActive, hideXAxis: hideXAxis, hideYAxis: hideYAxis, hideCartesianGrid: hideCartesianGrid, colorMap: colorMap, onClickChartElement: onClickChartElement, dateFilter: !hideDateRangeFilter ? dateFilter : undefined, referenceLines: referenceLines, showLegend: showLegend, stackedMode: true }));
-    }
-    if (config?.chartType?.toLowerCase() === 'metric') {
-        if (!config?.rows ||
-            config?.rows?.length === 0 ||
-            // @ts-ignore
-            config?.rows[0][config?.xAxisField] === null) {
-            return ((0, jsx_runtime_1.jsx)("div", { style: {
-                    display: 'flex',
-                    flex: '1 0 auto',
-                    // height: containerStyle?.height || '100%',
-                    margin: 'auto',
-                    justifyContent: 'center',
-                    alignItems: 'center',
-                    fontSize: 13,
-                    fontFamily: theme?.fontFamily,
-                    color: theme?.secondaryTextColor,
-                    maxWidth: '100%',
-                    width: '100%',
-                    ...containerStyle,
-                }, className: className, children: "No results" }));
-        }
-        return ((0, jsx_runtime_1.jsx)("div", { style: {
-                fontFamily: theme?.fontFamily,
-                fontSize: 32,
-                color: theme?.primaryTextColor,
-                fontWeight: '600',
-                textOverflow: 'ellipsis',
-                margin: 0,
-                whiteSpace: 'nowrap',
-                boxSizing: 'content-box',
-                maxWidth: '100%',
-                textAlign: 'left',
-                overflow: 'hidden',
-                height: containerStyle?.height || '100%',
-                display: 'flex',
-                width: '100%',
-                flexDirection: 'row',
-                ...containerStyle,
-            }, className: className, children: (0, jsx_runtime_1.jsx)(MetricComponent_1.default, { report: config ?? report_1.EMPTY_REPORT, children: config?.rows?.[0]?.[config?.xAxisField] ?? 'No results' }) }));
-    }
-    if (config?.chartType?.toLowerCase() === 'gauge') {
-        return ((0, jsx_runtime_1.jsx)(GaugeChart_1.default, { data: config?.rows ?? [], xAxisField: config?.xAxisField ?? '', xAxisFormat: config?.xAxisFormat ?? 'whole_number', containerStyle: containerStyle, colors: chartColors, isAnimationActive: isAnimationActive }));
-    }
-    if (config?.chartType?.toLowerCase() === 'us map') {
-        return ((0, jsx_runtime_1.jsx)(MapChart_1.USMap, { data: config?.rows ?? [], theme: overrideTheme ?? theme, yAxisFields: config?.yAxisFields ?? [], colors: chartColors, xAxisField: config?.xAxisField ?? '', xAxisFormat: config?.xAxisFormat ?? 'string', containerStyle: containerStyle, className: className, colorMap: colorMap, onClickChartElement: onClickChartElement }));
-    }
-    if (config?.chartType?.toLowerCase() === 'world map') {
-        return ((0, jsx_runtime_1.jsx)(MapChart_1.WorldMap, { data: config?.rows ?? [], theme: overrideTheme ?? theme, yAxisFields: config?.yAxisFields ?? [], colors: chartColors, xAxisField: config?.xAxisField ?? '', xAxisFormat: config?.xAxisFormat ?? 'string', containerStyle: containerStyle, className: className, colorMap: colorMap, onClickChartElement: onClickChartElement }));
-    }
-    return ((0, jsx_runtime_1.jsx)(LineChart_1.default, { 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: overrideTheme ?? theme, comparison: !hideDateRangeFilter && 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: !hideDateRangeFilter ? dateFilter : undefined, referenceLines: referenceLines, showLegend: showLegend }));
-};
-exports.ChartDisplay = ChartDisplay;
-// Sort to put comparison first (ie. underneath) primary.
-const sortComparisonFirst = (a, b) => {
-    const key = 'comparison_';
-    if (a.field.startsWith(key) && b.field.startsWith(key))
-        return 0;
-    if (a.field.startsWith(key))
-        return -1;
-    if (b.field.startsWith(key))
-        return 1;
-    return 0;
-};