@quillsql/react 2.15.2 → 2.15.4

package/dist/esm/Dashboard.js

@@ -1,785 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useContext, useEffect, useState, useMemo, useRef, } from 'react';
-import { ChartDisplay } from './Chart';
-import { COMPARISON_RANGE, convertPresetOptionsToSelectableList, defaultOptionsV2, getRangeFromPresetOptions, } from './DateRangePicker/dateRangePickerUtils';
-import { ClientContext, ThemeContext, SchemaDataContext, DashboardFiltersContext, TenantContext, FetchContext, EventTrackingContext, } from './Context';
-import { useDashboardInternal } from './hooks/useDashboard';
-import DashboardSectionContainer from './components/Dashboard/DashboardSectionContainer';
-import QuillMetricComponent from './components/Dashboard/MetricComponent';
-import QuillTableComponent from './components/Dashboard/TableComponent';
-import QuillChartComponent from './components/Dashboard/ChartComponent';
-import QuillTemplateChartComponent from './components/Dashboard/TemplateChartComponent';
-import DashboardSection from './components/Dashboard/DashboardSection';
-import { styleToProps } from './utils/styles';
-import { QuillDateRangePicker } from './DateRangePicker/QuillDateRangePicker';
-import DataLoader, { ChartDataLoader, } from './components/Dashboard/DataLoader';
-import { QuillEmptyDashboardComponent, QuillFilterContainerComponent, QuillLoadingDashboardComponent, QuillModalComponent, MemoizedButton, MemoizedSecondaryButton, QuillTextInput, MemoizedPopover, } from './components/UiComponents';
-import { DashboardFilter } from './components/Dashboard/DashboardFilter';
-import { BoolOperator, convertCustomFilter, FieldType, NullOperator, NumberOperator, StringOperator, FilterType, } from './models/Filter';
-import { QuillMultiSelectComponentWithCombo } from './components/QuillMultiSelectWithCombo';
-import { QuillSelectComponentWithCombo } from './components/QuillSelectWithCombo';
-import { getUniqueStringValuesByColumn } from './utils/tableProcessing';
-import { applyCustomFilterToDashDateFilter, filterSentence, } from './utils/filterProcessing';
-import { QuillChartErrorWithAction } from './components/Chart/ChartError';
-import { FilterPopoverWrapper, QuillFilterPopover, } from './components/ReportBuilder/ui';
-import FilterModal from './components/ReportBuilder/FilterModal';
-import QuillTemplateMetricComponent from './components/Dashboard/TemplateMetricComponent';
-import QuillTemplateTableComponent from './components/Dashboard/TemplateTableComponent';
-import QuillDashboardTemplate from './components/Dashboard/DashboardTemplate';
-import { InternalDashboardFilterType as DashboardFilterType, } from './models/Filter';
-import { DEFAULT_PAGINATION } from './utils/paginationProcessing';
-import equal from 'fast-deep-equal';
-const defaultChartContainerStyles = {
-    display: 'flex',
-    width: '100%',
-    minHeight: 300,
-    height: 300,
-};
-const sortByOrdering = (a, b) => {
-    if (a.order === undefined && b.order === undefined)
-        return 0;
-    if (a.order === undefined)
-        return 1;
-    if (b.order === undefined)
-        return -1;
-    return a.order - b.order;
-};
-const customOperatorOptions = {
-    [FieldType.Number]: [
-        NumberOperator.EqualTo,
-        NumberOperator.NotEqualTo,
-        NumberOperator.GreaterThan,
-        NumberOperator.LessThan,
-        NumberOperator.GreaterThanOrEqualTo,
-        NumberOperator.LessThanOrEqualTo,
-        NullOperator.IsNotNull,
-        NullOperator.IsNull,
-    ],
-    [FieldType.String]: [
-        StringOperator.IsExactly,
-        StringOperator.IsNotExactly,
-        StringOperator.Contains,
-        StringOperator.Is,
-        StringOperator.IsNot,
-        NullOperator.IsNotNull,
-        NullOperator.IsNull,
-    ],
-    [FieldType.Boolean]: [
-        BoolOperator.EqualTo,
-        BoolOperator.NotEqualTo,
-        NullOperator.IsNotNull,
-        NullOperator.IsNull,
-    ],
-};
-/**
- * ### Quill Dashboard
- *
- * Dynamically displays a filterable grid of charts, metrics, and tables with
- * live data from your database. Once implemented, Quill lets you perform
- * zero-downtime, zero-code updates to your dashboard views on an org-level as
- * well as company-wide.
- *
- * @example
- * ```js
- * // Usage without custom components
- * <Dashboard />
- * ```
- *
- * @example
- * ```js
- * // You can also pass your own components
- * <Dashboard
- *   name="saved_reports"
- *   SelectComponent={MySelect}
- *   onClickReport={(report) => navigate(`/detail/${report.id}`)}
- *   MetricComponent={MyMetric}
- *   ChartComponent={MyChart}
- *   TableComponent={MyTable}
- *   containerStyle={{ backgroundColor: 'white', padding: '10px' }}
- * />
- * ```
- *
- * ### API Reference
- * @see https://docs.quillsql.com/components/dashboard
- */
-export default function Dashboard({ name, hidden = false, SelectComponent = QuillSelectComponentWithCombo, MultiSelectComponent = QuillMultiSelectComponentWithCombo, ModalComponent = QuillModalComponent, ButtonComponent = MemoizedButton, SecondaryButtonComponent = MemoizedSecondaryButton, FilterTagComponent = QuillFilterPopover, PopoverComponent = MemoizedPopover, TextInputComponent = QuillTextInput, EmptyDashboardComponent = QuillEmptyDashboardComponent, DateRangePickerComponent = QuillDateRangePicker, MetricComponent = QuillMetricComponent, ChartComponent = QuillChartComponent, TableComponent = QuillTableComponent, TemplateMetricComponent = QuillTemplateMetricComponent, TemplateChartComponent = QuillTemplateChartComponent, TemplateTableComponent = QuillTemplateTableComponent, DashboardSectionComponent = DashboardSection, DashboardSectionContainerComponent = DashboardSectionContainer, DashboardSectionTabsComponent, FilterContainerComponent = QuillFilterContainerComponent, DashboardLoadingComponent = QuillLoadingDashboardComponent, ErrorComponent = QuillChartErrorWithAction, onClickReport, hoverActions, onChangeLoading, hideFilters, hideDateRangeFilter, hideXAxis = false, hideYAxis = false, hideCartesianGrid = false, comparisonLineStyle = 'solid', containerStyle, className, chartContainerStyle = defaultChartContainerStyles, filters, onUserFiltersUpdated, onClickChartElement, 
-// onTenantChanged,
-dateBucket, additionalProcessing, 
-// hideAdminErrors = true,
-templateDashboardName, pagination = { rowsPerPage: 10, rowsPerRequest: 50 }, }) {
-    const [userFilters, setUserFilters] = useState({});
-    const [selectedSection, setSelectedSection] = useState('');
-    const dataLoaderUserFilters = useMemo(() => {
-        return (filters?.map((f) => convertCustomFilter(f)) ?? []).concat(Object.values(userFilters));
-    }, [filters, userFilters]);
-    useEffect(() => {
-        onUserFiltersUpdated?.(Object.values(userFilters));
-    }, [userFilters]);
-    const { isLoading, data, isDashboardFilterLoading, dashboardFilters: populatedDashboardFilters, reload, } = useDashboardInternal(name, (filters?.map((f) => convertCustomFilter(f)) ?? []).concat(Object.values(userFilters) ?? []));
-    const { getToken } = useContext(FetchContext);
-    const { customFilterDispatch } = useContext(DashboardFiltersContext);
-    const { eventTracking } = useContext(EventTrackingContext);
-    const metrics = useMemo(() => {
-        const map = {};
-        Object.keys(data?.sections ?? {}).forEach((section) => {
-            if (!data?.sections?.[section])
-                return;
-            const sectionMetrics = data.sections[section].filter(({ id, chartType }) => id && ['metric'].includes(chartType ?? ''));
-            const sectionOrder = data?.sectionOrder?.find((s) => s.section === section);
-            const reportOrder = sectionOrder?.reportOrder || [];
-            if (reportOrder.length > 0) {
-                map[section] = [...sectionMetrics].sort((a, b) => {
-                    const aIndex = reportOrder.indexOf(a.id);
-                    const bIndex = reportOrder.indexOf(b.id);
-                    if (aIndex !== -1 && bIndex !== -1) {
-                        return aIndex - bIndex;
-                    }
-                    if (aIndex !== -1)
-                        return -1;
-                    if (bIndex !== -1)
-                        return 1;
-                    return sortByOrdering(a, b);
-                });
-            }
-            else {
-                // Fallback to order property if no reportOrder
-                map[section] = sectionMetrics.sort(sortByOrdering);
-            }
-        });
-        return map;
-    }, [data?.sections, data?.sectionOrder]);
-    const charts = useMemo(() => {
-        const map = {};
-        Object.keys(data?.sections ?? {}).forEach((section) => {
-            if (!data?.sections?.[section])
-                return;
-            const sectionCharts = data.sections[section].filter(({ id, chartType }) => id && !['metric', 'table'].includes(chartType ?? ''));
-            const sectionOrder = data?.sectionOrder?.find((s) => s.section === section);
-            const reportOrder = sectionOrder?.reportOrder || [];
-            if (reportOrder.length > 0) {
-                map[section] = [...sectionCharts].sort((a, b) => {
-                    const aIndex = reportOrder.indexOf(a.id);
-                    const bIndex = reportOrder.indexOf(b.id);
-                    if (aIndex !== -1 && bIndex !== -1)
-                        return aIndex - bIndex;
-                    if (aIndex !== -1)
-                        return -1;
-                    if (bIndex !== -1)
-                        return 1;
-                    return sortByOrdering(a, b);
-                });
-            }
-            else {
-                map[section] = sectionCharts.sort(sortByOrdering);
-            }
-        });
-        return map;
-    }, [data?.sections, data?.sectionOrder]);
-    const tables = useMemo(() => {
-        const map = {};
-        Object.keys(data?.sections ?? {}).forEach((section) => {
-            if (!data?.sections?.[section])
-                return;
-            const sectionTables = data.sections[section].filter(({ id, chartType }) => id && chartType === 'table');
-            const sectionOrder = data?.sectionOrder?.find((s) => s.section === section);
-            const reportOrder = sectionOrder?.reportOrder || [];
-            if (reportOrder.length > 0) {
-                map[section] = [...sectionTables].sort((a, b) => {
-                    const aIndex = reportOrder.indexOf(a.id);
-                    const bIndex = reportOrder.indexOf(b.id);
-                    if (aIndex !== -1 && bIndex !== -1)
-                        return aIndex - bIndex;
-                    if (aIndex !== -1)
-                        return -1;
-                    if (bIndex !== -1)
-                        return 1;
-                    return sortByOrdering(a, b);
-                });
-            }
-            else {
-                map[section] = sectionTables.sort(sortByOrdering);
-            }
-        });
-        return map;
-    }, [data?.sections, data?.sectionOrder]);
-    const mounted = useRef(false);
-    useEffect(() => {
-        if (!mounted.current) {
-            mounted.current = true;
-            return;
-        }
-        if (isClientLoading) {
-            return;
-        }
-        reload(name, false, undefined, {
-            filters: populatedDashboardFilters ?? [],
-        });
-    }, [filters, userFilters]);
-    useEffect(() => {
-        customFilterDispatch({
-            type: 'ADD_CUSTOM_DASHBOARD_FILTERS',
-            dashboardName: name,
-            data: dataLoaderUserFilters,
-        });
-        // return () => {
-        //   customFilterDispatch({
-        //     type: 'DELETE_CUSTOM_DASHBOARD_FILTERS',
-        //     dashboardName: name,
-        //   });
-        // }
-    }, [dataLoaderUserFilters]);
-    const [client, isClientLoading] = useContext(ClientContext);
-    const { tenants, flags } = useContext(TenantContext);
-    const [theme] = useContext(ThemeContext);
-    const [schemaData] = useContext(SchemaDataContext);
-    const { dispatch: dashboardFiltersDispatch } = useContext(DashboardFiltersContext);
-    const [fieldValuesMap, setFieldValuesMap] = useState({}); // Mapping of unique values per field, used in string filter 'in' and 'not in'
-    const [fieldValuesIsLoaded, setFieldValuesIsLoaded] = useState(false);
-    const [addFilterPopoverIsOpen, setAddFilterPopoverIsOpen] = useState(false);
-    const [filterListIsOpen, setFilterListIsOpen] = useState(false);
-    const [filterListAddFilterPopoverIsOpen, setFilterListAddFilterPopoverIsOpen,] = useState(false);
-    const presetOptions = useMemo(() => {
-        return populatedDashboardFilters?.[0]?.filterType === 'date_range'
-            ? convertPresetOptionsToSelectableList(populatedDashboardFilters[0].presetOptions ?? [], populatedDashboardFilters[0].defaultPresetRanges ?? [])
-            : defaultOptionsV2;
-    }, [populatedDashboardFilters]);
-    // 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({});
-    const prevNameRef = useRef(name);
-    // const prevTenantsRef = useRef<
-    //   | { tenantIds: (string | number)[]; tenantField: string }[]
-    //   | (string | number)[]
-    //   | undefined
-    // >(tenants);
-    const prevFlagsRef = useRef(flags);
-    const prevClientRef = useRef(client?.publicKey ?? '');
-    const addFilterPopoverButtonRef = useRef(null);
-    const viewFiltersPopoverButtonRef = useRef(null);
-    const previousFilters = useRef(filters);
-    if (!equal(previousFilters.current, filters)) {
-        previousFilters.current = filters;
-    }
-    // const pendingReloadRef = useRef(false);
-    const isInitialLoadOfDashboardRef = useRef(false);
-    const referencedTables = useMemo(() => {
-        const sections = data?.sections || {};
-        // find intersection of all referenced tables
-        const tables = Object.values(sections)
-            .flatMap((section) => section.map((chart) => chart.referencedTables))
-            .flat();
-        return Array.from(new Set(tables));
-    }, [data?.sections]);
-    useEffect(() => {
-        if (prevNameRef.current === name &&
-            Object.values(data?.sections ?? {}).flat().length) {
-            return;
-        }
-        prevNameRef.current = name;
-        if (isClientLoading) {
-            // Reload the dashboard when the client is loaded
-            // pendingReloadRef.current = true;
-            return;
-        }
-        if (isInitialLoadOfDashboardRef.current)
-            return;
-        isInitialLoadOfDashboardRef.current = true;
-        reload(name, true, undefined, populatedDashboardFilters?.length
-            ? { filters: populatedDashboardFilters, refetchReports: true }
-            : undefined).then(() => {
-            isInitialLoadOfDashboardRef.current = false;
-            // prevTenantsRef.current = tenants;
-            prevFlagsRef.current = flags;
-        });
-    }, [name, isClientLoading]);
-    const tenantMounted = useRef(false);
-    useEffect(() => {
-        if (!tenantMounted.current) {
-            tenantMounted.current = true;
-            return;
-        }
-        const flagsChanged = 
-        // !equal(prevTenantsRef.current, tenants) ||
-        !equal(prevFlagsRef.current, flags);
-        if (isClientLoading || !flagsChanged) {
-            // Reload the dashboard when the client is loaded
-            // pendingReloadRef.current = true;
-            return;
-        }
-        if (isInitialLoadOfDashboardRef.current)
-            return;
-        isInitialLoadOfDashboardRef.current = true;
-        reload(name, flagsChanged).then(() => {
-            // prevTenantsRef.current = tenants;
-            prevFlagsRef.current = flags;
-            isInitialLoadOfDashboardRef.current = false;
-        });
-    }, [flags]);
-    useEffect(() => {
-        if (prevClientRef.current === client?.publicKey) {
-            return;
-        }
-        prevClientRef.current = client?.publicKey ?? '';
-        if (isClientLoading) {
-            // Reload the dashboard when the client is loaded
-            // pendingReloadRef.current = true;
-            return;
-        }
-        if (isInitialLoadOfDashboardRef.current)
-            return;
-        isInitialLoadOfDashboardRef.current = true;
-        reload(name, true).then(() => {
-            // prevTenantsRef.current = tenants;
-            prevFlagsRef.current = flags;
-            isInitialLoadOfDashboardRef.current = false;
-        });
-    }, [client?.publicKey]);
-    useEffect(() => {
-        setFilterValues(Object.values(populatedDashboardFilters ?? {}).reduce((acc, f) => {
-            acc[f.label] =
-                f.filterType === 'string'
-                    ? f.stringFilterType === 'multiselect'
-                        ? { values: f.values, operator: 'IN' }
-                        : { selectedValue: f.selectedValue }
-                    : {
-                        startDate: f.startDate,
-                        endDate: f.endDate,
-                        preset: f.preset,
-                        comparisonRange: f.comparisonRange,
-                    };
-            return acc;
-        }, {}));
-    }, [populatedDashboardFilters]);
-    // useEffect(() => {
-    //   if (pendingReloadRef.current && !isClientLoading && tenants !== undefined) {
-    //     reload(name, true).then(() => {
-    //       pendingReloadRef.current = false;
-    //       prevTenantsRef.current = tenants;
-    //       prevFlagsRef.current = flags;
-    //     });
-    //   }
-    // }, [isClientLoading, tenants]);
-    useEffect(() => {
-        const dashboardDateFilter = populatedDashboardFilters?.find((f) => f.filterType === 'date_range');
-        if (dashboardDateFilter) {
-            // 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, dashboardDateFilter);
-            setFilterValues((filterValues) => ({
-                ...filterValues,
-                [dashboardDateFilter.label]: {
-                    startDate: newFilter.startDate,
-                    endDate: newFilter.endDate,
-                    preset: newFilter.preset,
-                    comparisonRange: newFilter.comparisonRange,
-                },
-            }));
-            dashboardFiltersDispatch({
-                type: 'UPDATE_DASHBOARD_FILTER',
-                dashboardName: name,
-                filterName: dashboardDateFilter.label,
-                data: {
-                    filter: newFilter,
-                    loading: false,
-                },
-            });
-        }
-    }, [previousFilters.current]);
-    // Go through all columns in the referenced tables and get the unique values to use in fieldValuesMap
-    useEffect(() => {
-        const fetchData = async () => {
-            setFieldValuesIsLoaded(false);
-            const newFieldValues = {};
-            await Promise.all(referencedTables.map(async (table) => {
-                const tableInfo = schemaData.schema.find((tableInfo) => tableInfo.name === table);
-                if (tableInfo) {
-                    const uniqueValues = await getUniqueStringValuesByColumn({
-                        columns: tableInfo.columns,
-                        tableName: table,
-                        client,
-                        tenants,
-                        dashboardName: name,
-                        getToken,
-                        eventTracking,
-                    });
-                    if (uniqueValues) {
-                        newFieldValues[table] = {};
-                        Object.keys(uniqueValues).forEach((field) => {
-                            newFieldValues[table][field] = uniqueValues[field] || [];
-                        });
-                    }
-                }
-            }));
-            setFieldValuesMap(newFieldValues);
-            setFieldValuesIsLoaded(true);
-        };
-        if (data?.customFiltersEnabled) {
-            fetchData();
-        }
-    }, [referencedTables]);
-    const updateFilter = (filter, value, comparison) => {
-        if (!populatedDashboardFilters)
-            return;
-        eventTracking?.addBreadcrumb?.({
-            message: `Updating dashboard filter`,
-            category: 'interaction',
-            level: 'info',
-            timestamp: Date.now(),
-            data: {
-                value: JSON.stringify(value),
-                dashboardName: name,
-                label: filter.label,
-            },
-        });
-        let filterValue = {};
-        if (filter.filterType === '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 === DashboardFilterType.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(name, false, undefined, {
-            filters: populatedDashboardFilters.map((f) => filter.label === f.label ? { ...f, ...filterValue } : f),
-            editedFilterLabel: filter.label,
-        });
-    };
-    // generate the correct filter structure
-    const getUserFilter = (filter, id, existingFilter) => {
-        let userFilter = {};
-        if (existingFilter) {
-            userFilter = { ...existingFilter };
-        }
-        else {
-            userFilter = { _id: `userFilter_${id}` };
-        }
-        userFilter = {
-            ...userFilter,
-            table: filter.table ?? '',
-            field: filter.field,
-            filterType: filter.filterType,
-            fieldType: filter.fieldType,
-            value: filter.value,
-            operator: filter.operator,
-            dashboardName: name,
-            isUserFilter: true,
-        };
-        return userFilter;
-    };
-    // new update filter function for user added filters
-    const updateUserFilter = (filter) => {
-        setUserFilters((userFilters) => ({
-            ...userFilters,
-            [filter.field]: filter,
-        }));
-    };
-    useEffect(() => {
-        if (onChangeLoading && isLoading) {
-            onChangeLoading(isLoading);
-        }
-    }, [isLoading, onChangeLoading]);
-    if (isLoading === false &&
-        data?.sections &&
-        (Object.keys(data.sections).length === 0 ||
-            Object.values(data.sections).flat().length === 0)) {
-        return _jsx(EmptyDashboardComponent, {});
-    }
-    if (hidden || isLoading !== false || isClientLoading || !data?.sections) {
-        // No sections means yet to fetch
-        return (_jsx(DashboardLoadingComponent, { containerStyle: containerStyle, chartContainerStyle: chartContainerStyle }));
-    }
-    // TODO: Never reached
-    if (!data?.sections) {
-        return (_jsx(ErrorComponent, { containerStyle: { height: 100 }, label: "Error loading dashboard" }));
-    }
-    return (_jsxs("div", { className: className, ...styleToProps(containerStyle), children: [DashboardSectionTabsComponent && (_jsx(DashboardSectionTabsComponent, { sections: Object.keys(data.sections), selectedSection: selectedSection, setSelectedSection: setSelectedSection })), _jsxs("div", { style: { display: 'flex', flexDirection: 'row', alignItems: 'center' }, children: [!hideFilters ? (
-                    // if hideFilters true and hideDateRangeFilter is false, then we show the date range filter
-                    _jsxs(FilterContainerComponent, { children: [(populatedDashboardFilters ?? [])
-                                .filter((filter) => {
-                                if (hideDateRangeFilter) {
-                                    return filter.filterType !== 'date_range';
-                                }
-                                return true;
-                            })
-                                .map((filter) => (_jsx(DashboardFilter, { filter: {
-                                    ...filter,
-                                    ...(filter.filterType === 'date_range' && {
-                                        options: presetOptions,
-                                    }),
-                                    ...filterValues[filter.label],
-                                }, onChangeFilter: updateFilter, theme: theme, SelectComponent: SelectComponent, MultiSelectComponent: MultiSelectComponent, DateRangePickerComponent: DateRangePickerComponent, isLoading: isDashboardFilterLoading(filter.label) }, filter.label + name))), data?.customFiltersEnabled &&
-                                Object.values(userFilters).length === 0 && (_jsxs("div", { style: {
-                                    display: 'flex',
-                                    flexDirection: 'column',
-                                }, ref: viewFiltersPopoverButtonRef, children: [_jsx(SecondaryButtonComponent, { onClick: () => {
-                                            if (fieldValuesIsLoaded) {
-                                                setAddFilterPopoverIsOpen(!addFilterPopoverIsOpen);
-                                                setFilterListIsOpen(false);
-                                            }
-                                        }, label: `Add Filter` }), _jsx(PopoverComponent, { isOpen: addFilterPopoverIsOpen, setIsOpen: setAddFilterPopoverIsOpen, popoverTitle: "Add Filter", ignoredRefs: [viewFiltersPopoverButtonRef], popoverChildren: _jsx(FilterModal, { schema: schemaData.schema, fieldValuesMap: fieldValuesMap, onSubmitFilter: (filter) => {
-                                                setAddFilterPopoverIsOpen(false);
-                                                updateUserFilter(filter);
-                                            }, onDeleteFilter: () => { }, ButtonComponent: ButtonComponent, SelectComponent: SelectComponent, MultiSelectComponent: MultiSelectComponent, TextInputComponent: TextInputComponent }), containerStyle: { position: 'relative', top: 10 } })] })), Object.values(userFilters).length > 0 && (_jsx(ModalComponent, { triggerLabel: `Filters${Object.values(userFilters).length > 0 ? ` (${Object.values(userFilters).length})` : ''}`, isOpen: filterListIsOpen, setIsOpen: setFilterListIsOpen, title: "Filters", children: _jsxs("div", { style: {
-                                        display: 'flex',
-                                        flexDirection: 'column',
-                                        alignItems: 'start',
-                                    }, children: [Object.values(userFilters).map((filter, index) => (_jsx(FilterPopoverWrapper, { schema: schemaData.schema, filter: {
-                                                filterType: filter.filterType,
-                                                fieldType: filter.fieldType,
-                                                field: filter.field,
-                                                operator: filter.operator,
-                                                value: filter.value,
-                                            }, filterLabel: filter ? filterSentence(filter) : '', index: index, fieldValuesMap: fieldValuesMap, customOperatorOptions: customOperatorOptions, FilterTagComponent: FilterTagComponent, FilterModal: FilterModal, ButtonComponent: ButtonComponent, SecondaryButtonComponent: SecondaryButtonComponent, SelectComponent: SelectComponent, TextInputComponent: TextInputComponent, MultiSelectComponent: MultiSelectComponent, handleFilterSave: (newFilter) => {
-                                                const userFilter = getUserFilter(newFilter, filter._id, filter);
-                                                updateUserFilter(userFilter);
-                                            }, handleFilterDelete: () => {
-                                                setUserFilters((userFilters) => {
-                                                    const updatedFilters = { ...userFilters };
-                                                    delete updatedFilters[filter.field];
-                                                    return updatedFilters;
-                                                });
-                                            }, containerStyle: { width: 300, marginBottom: 10 }, dashboardName: name, getToken: getToken }, `userFilter_${index}_${filter ? filterSentence(filter) : ''}`))), _jsxs("div", { style: {
-                                                display: 'flex',
-                                                flexDirection: 'column',
-                                            }, ref: addFilterPopoverButtonRef, children: [_jsx(SecondaryButtonComponent, { onClick: () => {
-                                                        if (fieldValuesIsLoaded) {
-                                                            setFilterListAddFilterPopoverIsOpen(!filterListAddFilterPopoverIsOpen);
-                                                        }
-                                                    }, label: `Add Filter` }), _jsx(PopoverComponent, { isOpen: filterListAddFilterPopoverIsOpen, setIsOpen: setFilterListAddFilterPopoverIsOpen, popoverTitle: "Add Filter", ignoredRefs: [addFilterPopoverButtonRef], popoverChildren: _jsx(FilterModal, { schema: schemaData.schema, fieldValuesMap: fieldValuesMap, onSubmitFilter: (filter) => {
-                                                            setFilterListAddFilterPopoverIsOpen(false);
-                                                            setFilterListIsOpen(false);
-                                                            updateUserFilter(filter);
-                                                        }, onDeleteFilter: () => { }, ButtonComponent: ButtonComponent, SelectComponent: SelectComponent, MultiSelectComponent: MultiSelectComponent, TextInputComponent: TextInputComponent }), containerStyle: { position: 'relative', top: 10 } })] })] }) }))] })) : (!hideDateRangeFilter && (_jsx(FilterContainerComponent, { children: (populatedDashboardFilters ?? [])
-                            .filter((filter) => filter.filterType === 'date_range')
-                            .map((filter) => (_jsx(DashboardFilter, { filter: {
-                                ...filter,
-                                ...(filter.filterType === 'date_range' && {
-                                    options: presetOptions,
-                                }),
-                                ...filterValues[filter.label],
-                            }, onChangeFilter: updateFilter, theme: theme, SelectComponent: SelectComponent, MultiSelectComponent: MultiSelectComponent, DateRangePickerComponent: DateRangePickerComponent, isLoading: isDashboardFilterLoading(filter.label) }, filter.label + name))) }))), templateDashboardName && (_jsx(QuillDashboardTemplate, { name: templateDashboardName, originDashboard: name, client: client, appliedFilters: populatedDashboardFilters, ModalComponent: ModalComponent, TemplateChartComponent: TemplateChartComponent, TemplateMetricComponent: TemplateMetricComponent, TemplateTableComponent: TemplateTableComponent, ButtonComponent: SecondaryButtonComponent }))] }), Object.keys(data.sections)
-                .sort((a, b) => {
-                // Sort by the order of the dashboardConfig's "sectionOrder"
-                if (a === '')
-                    return -1;
-                if (b === '')
-                    return 1;
-                const sectionOrder = data.sectionOrder;
-                if (!sectionOrder)
-                    return 0;
-                const aIndex = sectionOrder.map((s) => s.section).indexOf(a);
-                const bIndex = sectionOrder.map((s) => s.section).indexOf(b);
-                if (aIndex === -1 && bIndex === -1)
-                    return 0;
-                if (aIndex === -1)
-                    return 1;
-                if (bIndex === -1)
-                    return -1;
-                return aIndex - bIndex;
-            })
-                .filter((section) => (data.sections?.[section]?.length ?? 0) > 0)
-                .map((section, sectionIndex) => {
-                return (_jsx(DashboardSectionContainerComponent, { children: section === '' ? (_jsxs(_Fragment, { children: [(metrics[section]?.length ?? 0) > 0 && (_jsx(DashboardSectionComponent, { section: section, children: metrics[section]?.map((item) => {
-                                    return (_jsx(DataLoader, { item: item, filters: populatedDashboardFilters ?? [], userFilters: dataLoaderUserFilters, additionalProcessing: {
-                                            page: DEFAULT_PAGINATION,
-                                            last: additionalProcessing?.last,
-                                        }, dashboardName: name, children: ({ isLoading, error, data, }) => (_jsx(MetricComponent, { error: error, isLoading: isLoading, report: data, onClick: !isLoading && onClickReport
-                                                ? () => {
-                                                    eventTracking?.addBreadcrumb?.({
-                                                        message: `Clicked Dashboard Metric`,
-                                                        category: 'interaction',
-                                                        level: 'info',
-                                                        timestamp: Date.now(),
-                                                        data: {
-                                                            reportId: item.id,
-                                                            dashboardName: name,
-                                                        },
-                                                    });
-                                                    onClickReport({
-                                                        ...item,
-                                                        ...data,
-                                                    });
-                                                }
-                                                : () => { }, hoverActions: hoverActions, children: data?.rows?.[0]?.[data.xAxisField] }, 'metric' + item.name + '' + item.id)) }, `metric${item.id}`));
-                                }) })), (charts[section]?.length ?? 0) > 0 && (_jsx(DashboardSectionComponent, { section: section, children: charts[section]?.map((item) => (_jsx(ChartDataLoader, { item: item, dateBucket: dateBucket, additionalProcessing: {
-                                        page: pagination,
-                                        last: additionalProcessing?.last,
-                                    }, filters: populatedDashboardFilters ?? [], userFilters: dataLoaderUserFilters, dashboardName: name, children: ({ isLoading, data, error, dateBucket, }) => (_jsx(ChartComponent, { report: data, error: error, onClick: onClickReport && !isLoading
-                                            ? () => {
-                                                eventTracking?.addBreadcrumb?.({
-                                                    message: `Clicked Dashboard Chart`,
-                                                    category: 'interaction',
-                                                    level: 'info',
-                                                    timestamp: Date.now(),
-                                                    data: {
-                                                        reportId: item.id,
-                                                        dashboardName: name,
-                                                    },
-                                                });
-                                                onClickReport({
-                                                    ...item,
-                                                    ...data,
-                                                });
-                                            }
-                                            : undefined, hoverActions: hoverActions, onClickChartElement: onClickChartElement, isLoading: isLoading, dateBucket: dateBucket, children: error ? (_jsx(ErrorComponent, { label: error, containerStyle: {
-                                                minHeight: 300,
-                                                height: 300,
-                                            } })) : (_jsx(ChartDisplay, { reportId: data?.id, config: data, loading: isLoading, containerStyle: chartContainerStyle, colors: theme.chartColors?.length
-                                                ? theme.chartColors
-                                                : undefined, scrollable: false, hideXAxis: hideXAxis, hideYAxis: hideYAxis, hideCartesianGrid: hideCartesianGrid, comparisonLineStyle: comparisonLineStyle, onClickChartElement: onClickChartElement, referenceLines: data?.referenceLineYValues })) }, 'chart' + item.name + '' + item.id)) }, `chart${item.id}`))) })), (tables[section]?.length ?? 0) > 0 && (_jsx(DashboardSectionComponent, { section: section, children: tables[section]?.map((item) => (_jsx(DataLoader, { item: item, filters: populatedDashboardFilters ?? [], userFilters: dataLoaderUserFilters, additionalProcessing: {
-                                        page: pagination,
-                                        last: additionalProcessing?.last,
-                                    }, dashboardName: name, children: ({ isLoading, error, onPageChange, onSortChange, data, rowCount, rowCountIsLoading, }) => (_jsx(TableComponent, { report: data, isLoading: isLoading, error: error, onClick: !isLoading && onClickReport
-                                            ? () => {
-                                                eventTracking?.addBreadcrumb?.({
-                                                    message: `Clicked Dashboard Table`,
-                                                    category: 'interaction',
-                                                    level: 'info',
-                                                    timestamp: Date.now(),
-                                                    data: {
-                                                        reportId: item.id,
-                                                        dashboardName: name,
-                                                    },
-                                                });
-                                                onClickReport({
-                                                    ...item,
-                                                    ...data,
-                                                });
-                                            }
-                                            : undefined, hoverActions: hoverActions, rowCount: rowCount ??
-                                            data?.rowCount ??
-                                            data?.rows?.length ??
-                                            0, rowCountIsLoading: rowCountIsLoading, onPageChange: (page) => onPageChange(page), onSortChange: (sort) => onSortChange(sort) })) }, `${name}${item.id}`))) }))] })) : (_jsx(DashboardSectionComponent, { section: section, children: data.sections?.[section]?.map((item) => {
-                            if (item.chartType === 'metric' ||
-                                item.chartType === 'table') {
-                                return (_jsx(DataLoader, { item: item, filters: populatedDashboardFilters ?? [], userFilters: dataLoaderUserFilters, additionalProcessing: {
-                                        page: DEFAULT_PAGINATION,
-                                        last: additionalProcessing?.last,
-                                    }, dashboardName: name, children: ({ isLoading, error, data, }) => item.chartType === 'metric' ? (_jsx(MetricComponent, { error: error, isLoading: isLoading, report: data, onClick: !isLoading && onClickReport
-                                            ? () => {
-                                                eventTracking?.addBreadcrumb?.({
-                                                    message: `Clicked Dashboard Metric`,
-                                                    category: 'interaction',
-                                                    level: 'info',
-                                                    timestamp: Date.now(),
-                                                    data: {
-                                                        reportId: item.id,
-                                                        dashboardName: name,
-                                                    },
-                                                });
-                                                onClickReport({
-                                                    ...item,
-                                                    ...data,
-                                                });
-                                            }
-                                            : () => { }, hoverActions: hoverActions, children: data?.rows?.[0]?.[data.xAxisField] }, 'metric' + item.name + '' + item.id)) : (_jsx(TableComponent, { report: data, isLoading: isLoading, error: error, onClick: !isLoading && onClickReport
-                                            ? () => {
-                                                eventTracking?.addBreadcrumb?.({
-                                                    message: `Clicked Dashboard Table`,
-                                                    category: 'interaction',
-                                                    level: 'info',
-                                                    timestamp: Date.now(),
-                                                });
-                                                onClickReport({
-                                                    ...item,
-                                                    ...data,
-                                                });
-                                            }
-                                            : undefined, hoverActions: hoverActions, rowCount: data.rowCount ?? data.rows?.length ?? 0 })) }, `metric${item.id}`));
-                            }
-                            else {
-                                return (_jsx(ChartDataLoader, { item: item, dateBucket: dateBucket, additionalProcessing: {
-                                        page: pagination,
-                                        last: additionalProcessing?.last,
-                                    }, filters: populatedDashboardFilters ?? [], userFilters: dataLoaderUserFilters, dashboardName: name, children: ({ isLoading, data, error, dateBucket, }) => (_jsx(ChartComponent, { report: data, error: error, onClick: onClickReport && !isLoading
-                                            ? () => {
-                                                eventTracking?.addBreadcrumb?.({
-                                                    message: `Clicked Dashboard Chart`,
-                                                    category: 'interaction',
-                                                    level: 'info',
-                                                    timestamp: Date.now(),
-                                                    data: {
-                                                        reportId: item.id,
-                                                        dashboardName: name,
-                                                    },
-                                                });
-                                                onClickReport({
-                                                    ...item,
-                                                    ...data,
-                                                });
-                                            }
-                                            : undefined, hoverActions: hoverActions, onClickChartElement: onClickChartElement, isLoading: isLoading, dateBucket: dateBucket, children: error ? (_jsx(ErrorComponent, { label: error, containerStyle: {
-                                                minHeight: 300,
-                                                height: 300,
-                                            } })) : (_jsx(ChartDisplay, { reportId: data?.id, config: data, loading: isLoading, containerStyle: chartContainerStyle, colors: theme.chartColors?.length
-                                                ? theme.chartColors
-                                                : undefined, scrollable: false, hideXAxis: hideXAxis, hideYAxis: hideYAxis, hideCartesianGrid: hideCartesianGrid, comparisonLineStyle: comparisonLineStyle, onClickChartElement: onClickChartElement, referenceLines: data?.referenceLineYValues })) }, 'chart' + item.name + '' + item.id)) }, `chart${item.id}`));
-                            }
-                        }) })) }, section + '' + sectionIndex));
-            })] }));
-}