@quillsql/react 2.12.37 → 2.12.38

package/dist/esm/Chart.d.ts

@@ -0,0 +1,204 @@
+import { ReactNode, ChangeEvent } from 'react';
+import { QuillTheme } from './QuillProvider';
+import { QuillReport } from './models/Report';
+import { Filter } from './models/Filter';
+import { MultiSelectComponentProps, SelectComponentProps } from './components/UiComponents';
+interface BaseChartProps {
+    colors?: string[];
+    containerStyle?: React.CSSProperties;
+    className?: string;
+    isAnimationActive?: boolean;
+    hideXAxis?: boolean;
+    hideYAxis?: boolean;
+    hideCartesianGrid?: boolean;
+    hideDateRangeFilter?: boolean;
+    hideHorizontalCartesianGrid?: boolean;
+    hideVerticalCartesianGrid?: boolean;
+    hideSubsequentXAxisTicks?: boolean;
+    cartesianGridLineStyle?: 'solid' | 'dashed';
+    cartesianGridLineColor?: string;
+    comparisonLineStyle?: 'solid' | 'dashed';
+    mapColorsToFields?: (_report: QuillReport, _theme: QuillTheme) => ColorMapType;
+    LoadingComponent?: () => JSX.Element;
+    filters?: Filter[];
+    onClickChartElement?: (data: any) => void;
+}
+interface WithConfig extends BaseChartProps {
+    config?: QuillReport;
+}
+export declare function isEquivalent(filters1: any[], filters2: any[]): boolean;
+export declare function didFiltersChange(dashboardItem: any, filters: any[]): boolean;
+export type ColorMapType = {
+    [key: string]: {
+        primary: string;
+        comparison?: string;
+        primaryGradientStart?: string;
+        primaryGradientStop?: string;
+        comparisonGradientStart?: string;
+        comparisonGradientStop?: string;
+    };
+};
+/**
+ * Props for the Quill Chart component.
+ */
+export interface ChartProps {
+    /**
+     * The id of a report to render, if any.
+     *
+     * When a reportId is passed, the chart will first fetch the data necessary to
+     * render this chart, and then it will render the report that it receives from
+     * the server.
+     *
+     * A `reportId` must be passed if `config` is not present.
+     */
+    reportId: string;
+    /**
+     * A list of color strings used to color the chart.
+     *
+     * For example, a pie chart would use the colors for each section and a bar
+     * chart would use the colors for each bar.
+     */
+    colors?: string[];
+    /**
+     * Whether to show animations on render complete.
+     */
+    isAnimationActive?: boolean;
+    /**
+     * Whether to hide the x axis.
+     */
+    hideXAxis?: boolean;
+    /**
+     * Whether to hide the y axis.
+     */
+    hideYAxis?: boolean;
+    /**
+     * Whether to hide the cartesian grid lines.
+     */
+    hideCartesianGrid?: boolean;
+    /**
+     * Whether to hide the horizontal cartesian grid lines (default: false).
+     */
+    hideHorizontalCartesianGrid?: boolean;
+    /**
+     * Whether to hide the vertical cartesian grid lines (default: true).
+     */
+    hideVerticalCartesianGrid?: boolean;
+    /**
+     * Whether to hide the all but the first of the X-Axis ticks (default: false).
+     */
+    hideSubsequentXAxisTicks?: boolean;
+    /**
+     * Whether the date range filter has been disabled.
+     */
+    hideDateRangeFilter?: boolean;
+    /** Whether to hide the table filters component, deafulted to true */
+    hideFilters?: boolean;
+    /**
+     * Whether the comparison range shows as dashed for date comparison line
+     * charts (as opposed to the default solid line).
+     */
+    comparisonLineStyle?: 'solid' | 'dashed';
+    /**
+     * Whether the cartesian grid lines show as dashed lines (default: solid).
+     */
+    cartesianGridLineStyle?: 'solid' | 'dashed';
+    /**
+     * The color of cartesian grid lines.
+     */
+    cartesianGridLineColor?: string;
+    /**
+     * An optional function that takes a report and theme and returns a map of
+     * keys used in that report to the colors they should use.
+     *
+     * The color values support RGB hexcodes and CSS color literals.
+     *
+     * @example
+     * ```js
+     * let mapColorsToFields = (item, theme) => {
+     *   return {
+     *     // all the queries with yAxis of 'amount' get colored this way:
+     *     amount: {
+     *       primary: 'red',
+     *       comparison: 'gray',
+     *       primaryGradientStart: 'red',
+     *       primaryGradientStop: 'lightred',
+     *       comparisonGradientStart: '#EFEFEF',
+     *       comparisonGradientStop: '#EFEFEF00',
+     *     },
+     *     total: {
+     *       primary: 'red'
+     *     },
+     *   };
+     * }
+     * ```
+     */
+    mapColorsToFields?: (report: QuillReport, theme: QuillTheme) => ColorMapType;
+    /**
+     * A loading component to show when the chart is loading.
+     */
+    LoadingComponent?: () => JSX.Element;
+    /** A select component prop for the table filters */
+    SelectComponent?: (props: SelectComponentProps) => JSX.Element;
+    /** A multi select component prop for the table filters */
+    MultiSelectComponent?: (props: MultiSelectComponentProps) => JSX.Element;
+    /** A date range picker component prop for the table filters */
+    DateRangePickerComponent?: ({ dateRange, label, presetOptions, preset, selectWidth, onChangeDateRange, onChangePreset, }: {
+        preset: string;
+        label?: string;
+        selectWidth?: number;
+        dateRange: {
+            startDate: Date;
+            endDate: Date;
+        };
+        presetOptions: {
+            label: string;
+            value: string;
+        }[];
+        onChangeDateRange: ({ startDate, endDate, }: {
+            startDate: Date;
+            endDate: Date;
+        }) => void;
+        onChangePreset: (event: ChangeEvent<HTMLSelectElement>) => void;
+    }) => JSX.Element;
+    /** A filter container component component prop for the table filters */
+    FilterContainerComponent?: ({ children, }: {
+        children: ReactNode;
+    }) => JSX.Element;
+    /**
+     * Styles the top-level container of the Chart.
+     *
+     * This can be useful for TailwindCSS-style classname strings.
+     */
+    className?: string;
+    /**
+     * Styles the top-level container of the Chart.
+     */
+    containerStyle?: React.CSSProperties;
+    /** An array of dashboard filters that are indicated by the frontend dev. */
+    filters?: Filter[];
+    /** A callback function that process specific chart element clicks */
+    onClickChartElement?: (data: any) => void;
+    /** An override for the pivot date bucketing. */
+    dateBucket?: string;
+}
+export default function Chart({ colors, reportId, className, containerStyle, isAnimationActive, hideXAxis, hideYAxis, hideCartesianGrid, hideHorizontalCartesianGrid, hideVerticalCartesianGrid, hideSubsequentXAxisTicks, cartesianGridLineStyle, cartesianGridLineColor, comparisonLineStyle, hideDateRangeFilter, hideFilters, mapColorsToFields, LoadingComponent, SelectComponent, MultiSelectComponent, DateRangePickerComponent, FilterContainerComponent, filters, onClickChartElement, dateBucket, }: ChartProps): import("react/jsx-runtime").JSX.Element;
+interface ChartDisplayProps extends WithConfig {
+    loading: boolean;
+    paginating?: boolean;
+    ErrorComponent?: ({ errorMessage }: {
+        errorMessage: string;
+    }) => JSX.Element;
+    colorMap?: ColorMapType;
+    reportId?: string;
+    onPageChange?: (page: number) => void;
+    onSortChange?: (sort: {
+        field: string;
+        direction: string;
+    }) => void;
+    onClickChartElement?: (data: any) => void;
+    overrideTheme?: QuillTheme;
+    scrollable?: boolean;
+}
+export declare const ChartDisplay: ({ reportId, config, colors, className, containerStyle, hideXAxis, hideYAxis, hideCartesianGrid, hideDateRangeFilter, hideHorizontalCartesianGrid, hideVerticalCartesianGrid, hideSubsequentXAxisTicks, cartesianGridLineStyle, cartesianGridLineColor, comparisonLineStyle, isAnimationActive, scrollable, loading, paginating, ErrorComponent, colorMap, LoadingComponent, onPageChange, onSortChange, onClickChartElement, overrideTheme, }: ChartDisplayProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=Chart.d.ts.map

package/dist/esm/Chart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Chart.d.ts","sourceRoot":"","sources":["../../src/Chart.tsx"],"names":[],"mappings":"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"}

package/dist/esm/Chart.js

@@ -0,0 +1,431 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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, ReportFiltersContext, } 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 useTheme from './hooks/useTheme';
+import { findAndProcessDateFilter, processFilterFromBackend, updateFilter, } from './utils/filterProcessing';
+import { QuillFilterContainerComponent, } from './components/UiComponents';
+import { DashboardFilter } from './components/Dashboard/DashboardFilter';
+import { QuillSelectComponent } from './components/QuillSelect';
+import { QuillMultiSelectComponent } from './components/QuillMultiSelect';
+import { QuillDateRangePicker } from './DateRangePicker/QuillDateRangePicker';
+import { 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) {
+    // @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) {
+                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 function didFiltersChange(dashboardItem, filters) {
+    if (!dashboardItem?.filtersApplied || !filters) {
+        return true;
+    }
+    return !isEquivalent(dashboardItem.filtersApplied, filters);
+}
+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 [colorMap, setColorMap] = useState({});
+    const [client] = useContext(ClientContext);
+    const [customFields] = useContext(CustomFieldContext);
+    const [additionalProcessing, setAdditionProcessing] = useState({
+        page: 0,
+    });
+    const [report, setReport] = useState(undefined);
+    const [chartFilters, setChartFilters] = useState([]);
+    const [previousPage, setPreviousPage] = useState(0);
+    const [filterUpdateIndex, setFilterUpdateIndex] = useState(-1);
+    const [previousDateBucket, setPreviousDateBucket] = useState(undefined);
+    const theme = useTheme();
+    const onPageChange = (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);
+        }
+    };
+    const onSortChange = (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 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');
+                }
+                let tempRows = [...report.rows, ...paginatedRows.rows];
+                if (resetRows) {
+                    tempRows = paginatedRows.rows;
+                }
+                setReport({ ...report, rows: tempRows });
+                setTimeout(() => {
+                    setPaginating(false);
+                }, 200);
+            }
+            catch (e) {
+                console.log(e);
+                setPaginating(false);
+            }
+        }
+    };
+    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;
+        }
+        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) {
+            return;
+        }
+        // IF WE HAVE THE DATA IN DASHBOARD CONTEXT AND IT IS THE INITIAL LOAD DON'T FETCH DATA
+        if (initialLoad && dashboard[reportId]) {
+            setInitialLoad(false);
+            return;
+        }
+        setInitialLoad(false);
+        const parsedReportFilters = reportFilters[reportId]
+            ? reportFilters[reportId]
+            : { updateIndex: 0, filters: [] };
+        if (filterUpdateIndex === parsedReportFilters.updateIndex) {
+            return;
+        }
+        fetchReportHelper(true, reportFilters[reportId] || { filters: [] }, additionalProcessing);
+    }, [client, reportId, reportFilters[reportId]?.updateIndex, dateBucket]);
+    useEffect(() => {
+        const tempReport = dashboard[reportId];
+        if (!tempReport) {
+            return;
+        }
+        setInitialLoad(false);
+        setLoading(false);
+        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,
+                            },
+                        });
+                    }, 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, scrollable: true, 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, scrollable = false, loading = false, paginating = false, ErrorComponent = ChartError, colorMap, LoadingComponent = QuillLoadingSkeleton, onPageChange, onSortChange, onClickChartElement, overrideTheme, }) => {
+    const { downloadCSV } = useExport(reportId);
+    const theme = overrideTheme ?? useTheme();
+    const chartColors = useMemo(() => {
+        return colors?.length
+            ? colors
+            : theme && theme.chartColors.length
+                ? theme.chartColors
+                : ['#4E80EE', '#E14F62', '#55B5A6', '#E9A23B', '#6466E9', '#55B685'];
+    }, [colors]);
+    const getDateFilter = () => {
+        if (!hideDateRangeFilter && config && config.filtersApplied) {
+            return findAndProcessDateFilter(config.filtersApplied.map((f) => f));
+        }
+        return undefined;
+    };
+    const [dateFilter, setDateFilter] = useState(getDateFilter());
+    useEffect(() => {
+        setDateFilter(getDateFilter());
+    }, [config]);
+    if (config &&
+        !config.pivot &&
+        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 (loading) {
+        return (_jsx("div", { className: className, style: containerStyle, children: _jsx(LoadingComponent, {}) }));
+    }
+    const chartTypes = [config?.chartType];
+    if (chartTypes.includes('pie')) {
+        return (_jsx(PieChart, { className: className, containerStyle: containerStyle, data: config?.rows.map((row) => {
+                return {
+                    ...row,
+                    count: 
+                    // @ts-ignore
+                    parseInt(row[config?.yAxisFields[0]?.field]) /
+                        // @ts-ignore
+                        sumByKey(config?.rows, config?.yAxisFields[0].field),
+                };
+            }) || [], category: config?.yAxisFields[0]?.field, index: config?.xAxisField, colors: chartColors, theme: theme, colorMap: colorMap, onClickChartElement: onClickChartElement }));
+    }
+    if (chartTypes.includes('table')) {
+        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,
+            }, className: className, downloadCSV: async () => {
+                downloadCSV();
+            }, onPageChange: (page) => {
+                onPageChange && onPageChange(page);
+            }, onSortChange: (sort) => {
+                onSortChange && onSortChange(sort);
+            }, isLoading: paginating }));
+    }
+    if (chartTypes.includes('bar')) {
+        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, scrollable: scrollable }));
+    }
+    if (chartTypes.includes('column')) {
+        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')) {
+        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,
+                    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 }) }));
+    }
+    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) => {
+    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;
+};