@quillsql/react 2.15.3 → 2.15.4

package/dist/esm/Chart.js

@@ -1,570 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useEffect, useContext, useMemo, useRef, } 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, DashboardConfigContext, DashboardFiltersContext, EventTrackingContext, ReportFiltersContext, ReportsContext, SchemaDataContext, ThemeContext, } from './Context';
-import QuillTable from './components/QuillTable';
-import LineChart from './components/Chart/LineChart';
-import BarChart from './components/Chart/BarChart';
-import { QuillLoadingSkeleton } from './components/Chart/ChartSkeleton';
-import ChartError from './components/Chart/ChartError';
-import { convertCustomFilter, InternalDashboardFilterType as DashboardFilterVariant, FilterType, } from './models/Filter';
-import { applyCustomFilterToDashDateFilter, findAndProcessDateFilter, } from './utils/filterProcessing';
-import { QuillFilterContainerComponent, } from './components/UiComponents';
-import { DashboardFilter } from './components/Dashboard/DashboardFilter';
-import { QuillSelectComponent } from './components/QuillSelect';
-import { QuillDateRangePicker } from './DateRangePicker/QuillDateRangePicker';
-import { EMPTY_REPORT } from './utils/report';
-import { DEFAULT_PAGINATION, DEFAULT_TABLE_PAGINATION, } from './utils/paginationProcessing';
-import QuillMetricComponent from './components/Dashboard/MetricComponent';
-import DataLoader, { ChartDataLoader, } from './components/Dashboard/DataLoader';
-import { COMPARISON_RANGE, convertPresetOptionsToSelectableList, defaultOptionsV2, getRangeFromPresetOptions, } from './DateRangePicker/dateRangePickerUtils';
-import { useReportInternal } from './hooks/useReport';
-import equal from 'fast-deep-equal';
-import { QuillMultiSelectComponentWithCombo } from './components/QuillMultiSelectWithCombo';
-import { USMap, WorldMap } from './components/Chart/MapChart';
-import GaugeChart from './components/Chart/GaugeChart';
-import { useAllReports, useDashboardInternal } from './hooks/useDashboard';
-import QuillTableDashboardComponent from './components/QuillComponentTables';
-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(differenceInHours(date1, date2)) < 24;
-}
-export 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;
-}
-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 = QuillMultiSelectComponentWithCombo, DateRangePickerComponent = QuillDateRangePicker, FilterContainerComponent = QuillFilterContainerComponent, TableComponent = QuillTableDashboardComponent, MetricComponent = QuillMetricComponent, filters, onClickChartElement, dateBucket, propagateChanges, }) {
-    const [schemaData] = useContext(SchemaDataContext);
-    const { reload } = useReportInternal(reportId);
-    const { reports, reportsDispatch, fetchIndividualReport } = useContext(ReportsContext);
-    const { reportFiltersDispatch, reportFilters, customReportFiltersDispatch, customReportFilters, } = useContext(ReportFiltersContext);
-    const { eventTracking } = useContext(EventTrackingContext);
-    const { isLoading: isDashboardsLoading } = useContext(DashboardConfigContext);
-    const { dashboardCustomFilters } = useContext(DashboardFiltersContext);
-    const { allReportsById } = useAllReports();
-    const { dashboardFilters } = useDashboardInternal(allReportsById[reportId]?.dashboardName ?? null);
-    const specificReportFilters = 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 = useMemo(() => {
-        return specificReportFilters.find((f) => f.filterType === 'date_range');
-    }, [specificReportFilters]);
-    const presetOptions = useMemo(() => {
-        return reportDateFilter
-            ? convertPresetOptionsToSelectableList(reportDateFilter.presetOptions ?? [], reportDateFilter.defaultPresetRanges ?? [])
-            : defaultOptionsV2;
-    }, [reportDateFilter]);
-    const userFilters = useMemo(() => {
-        return (filters
-            ?.filter((f) => f.filterType !== FilterType.Date)
-            ?.map(convertCustomFilter) ??
-            dashboardCustomFilters[allReportsById[reportId]?.dashboardName ?? '']);
-    }, [
-        filters,
-        dashboardCustomFilters[allReportsById[reportId]?.dashboardName ?? ''],
-    ]);
-    const previousFilters = useRef(undefined);
-    if (!equal(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] = useState({});
-    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]]);
-    useEffect(() => {
-        if (equal(customReportFilters[reportId] ?? [], filters ?? [])) {
-            return;
-        }
-        customReportFiltersDispatch({
-            type: 'ADD_CUSTOM_REPORT_FILTERS',
-            reportId: reportId,
-            data: filters?.map(convertCustomFilter),
-        });
-        return () => {
-            customReportFiltersDispatch({
-                type: 'DELETE_CUSTOM_REPORT_FILTERS',
-                reportId: reportId,
-            });
-        };
-    }, [filters]);
-    useEffect(() => {
-        if (reportDateFilter) {
-            // Filter for custom date filter that applies to the report's dateField
-            const customDateFilter = previousFilters.current?.find((f) => f.filterType === FilterType.Date);
-            if (!customDateFilter) {
-                return;
-            }
-            const newFilter = 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 = useMemo(() => allReportsById[reportId], [reportId, allReportsById]);
-    const report = useMemo(() => reports[reportId], [reports, reportId]);
-    const [loading, setLoading] = useState(true);
-    const [theme] = useContext(ThemeContext);
-    const colorMap = useMemo(() => {
-        if (mapColorsToFields && report && theme) {
-            return mapColorsToFields(report, theme);
-        }
-    }, [report, theme]);
-    const [client, clientLoading] = useContext(ClientContext);
-    const [error, setError] = useState(undefined);
-    const updateFilter = (filter, value, comparison) => {
-        let filterValue = {};
-        if (filter.filterType === DashboardFilterVariant.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 === DashboardFilterVariant.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 = 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: COMPARISON_RANGE[key](primaryRange)
-                            ?.startDate,
-                        endDate: COMPARISON_RANGE[key](primaryRange)
-                            ?.endDate,
-                        value: key,
-                    },
-                };
-            }
-            else {
-                const primaryRange = value && value.preset
-                    ? 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(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
-    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 (_jsx("div", { style: containerStyle, className: className, children: _jsx(ChartError, { errorMessage: report?.error ?? error }) }));
-    }
-    return (_jsxs("div", { style: {
-            display: 'flex',
-            flexDirection: 'column',
-            height: 450,
-            ...containerStyle,
-        }, className: className, children: [!hideFilters && (_jsx(FilterContainerComponent, { children: specificReportFilters.map((filter, index) => (_jsx(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 ? (_jsx(LoadingComponent, {})) : (_jsxs(_Fragment, { children: [('table' === report.chartType || 'metric' === report.chartType) && (_jsx(DataLoader, { item: report, filters: specificReportFilters, userFilters: userFilters, additionalProcessing: {
-                            page: DEFAULT_TABLE_PAGINATION,
-                        }, propagateChanges: propagateChanges, dashboardName: report.dashboardName, children: ({ isLoading, error, onPageChange, onSortChange, data, rowCount, rowCountIsLoading, }) => 'metric' === report.chartType ? (_jsx(MetricComponent, { error: error, isLoading: isLoading, report: data, children: data?.rows?.[0]?.[data.xAxisField] })) : (_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' && (_jsx(ChartDataLoader, { item: report, dateBucket: dateBucket, userFilters: userFilters, additionalProcessing: {
-                            page: DEFAULT_PAGINATION,
-                        }, filters: specificReportFilters, propagateChanges: propagateChanges, dashboardName: report.dashboardName, children: ({ isLoading, data, error }) => error ? (_jsx(ChartError, { errorMessage: error })) : (_jsx(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 })) }))] }))] }));
-}
-export 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, colorMap, LoadingComponent = QuillLoadingSkeleton, onPageChange, onSortChange, onClickChartElement, overrideTheme, referenceLines, showLegend = false, }) => {
-    const { downloadCSV } = useExport(reportId);
-    const [theme] = useContext(ThemeContext);
-    const { reports } = useContext(ReportsContext);
-    const { dashboardFilters } = useContext(DashboardFiltersContext);
-    const { reportFilters } = useContext(ReportFiltersContext);
-    const specificDashboardFilters = 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 = useMemo(() => {
-        if (!reportId)
-            return [];
-        return Object.values(reportFilters[reportId] ?? []).map((f) => f.filter);
-    }, [reportFilters, reportId]);
-    const chartColors = 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 = useMemo(() => {
-        const filters = specificReportFilters.length > 0
-            ? specificReportFilters
-            : specificDashboardFilters;
-        if (!hideDateRangeFilter && filters) {
-            return findAndProcessDateFilter(filters.map((f) => f));
-        }
-        return undefined;
-    }, [config, specificReportFilters, specificDashboardFilters]);
-    const [page, setPage] = useState(0);
-    if (loading) {
-        return (_jsx("div", { className: className, style: containerStyle, children: _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 (_jsx("div", { style: containerStyle, className: className, children: _jsx(ErrorComponent, { errorMessage: `Charts can only display ${MAX_ROWS_FOR_GENERIC_TABLE} rows. Please modify the query.` }) }));
-    }
-    if (config?.chartType?.toLowerCase() === 'pie') {
-        return (_jsx(PieChart, { 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 (_jsx(QuillTable, { 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 ||
-                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 (_jsx(BarList, { 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 (_jsx(BarChart, { 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 (_jsx(BarChart, { 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 (_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 (_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: _jsx(QuillMetricComponent, { report: config ?? EMPTY_REPORT, children: config?.rows?.[0]?.[config?.xAxisField] ?? 'No results' }) }));
-    }
-    if (config?.chartType?.toLowerCase() === 'gauge') {
-        return (_jsx(GaugeChart, { data: config?.rows ?? [], xAxisField: config?.xAxisField ?? '', xAxisFormat: config?.xAxisFormat ?? 'whole_number', containerStyle: containerStyle, colors: chartColors, isAnimationActive: isAnimationActive }));
-    }
-    if (config?.chartType?.toLowerCase() === 'us map') {
-        return (_jsx(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 (_jsx(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 (_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: 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 }));
-};
-// 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;
-};