@quillsql/react 2.15.2 → 2.15.4

package/dist/cjs/Dashboard.js

@@ -1,824 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = Dashboard;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const Chart_1 = require("./Chart");
-const dateRangePickerUtils_1 = require("./DateRangePicker/dateRangePickerUtils");
-const Context_1 = require("./Context");
-const useDashboard_1 = require("./hooks/useDashboard");
-const DashboardSectionContainer_1 = __importDefault(require("./components/Dashboard/DashboardSectionContainer"));
-const MetricComponent_1 = __importDefault(require("./components/Dashboard/MetricComponent"));
-const TableComponent_1 = __importDefault(require("./components/Dashboard/TableComponent"));
-const ChartComponent_1 = __importDefault(require("./components/Dashboard/ChartComponent"));
-const TemplateChartComponent_1 = __importDefault(require("./components/Dashboard/TemplateChartComponent"));
-const DashboardSection_1 = __importDefault(require("./components/Dashboard/DashboardSection"));
-const styles_1 = require("./utils/styles");
-const QuillDateRangePicker_1 = require("./DateRangePicker/QuillDateRangePicker");
-const DataLoader_1 = __importStar(require("./components/Dashboard/DataLoader"));
-const UiComponents_1 = require("./components/UiComponents");
-const DashboardFilter_1 = require("./components/Dashboard/DashboardFilter");
-const Filter_1 = require("./models/Filter");
-const QuillMultiSelectWithCombo_1 = require("./components/QuillMultiSelectWithCombo");
-const QuillSelectWithCombo_1 = require("./components/QuillSelectWithCombo");
-const tableProcessing_1 = require("./utils/tableProcessing");
-const filterProcessing_1 = require("./utils/filterProcessing");
-const ChartError_1 = require("./components/Chart/ChartError");
-const ui_1 = require("./components/ReportBuilder/ui");
-const FilterModal_1 = __importDefault(require("./components/ReportBuilder/FilterModal"));
-const TemplateMetricComponent_1 = __importDefault(require("./components/Dashboard/TemplateMetricComponent"));
-const TemplateTableComponent_1 = __importDefault(require("./components/Dashboard/TemplateTableComponent"));
-const DashboardTemplate_1 = __importDefault(require("./components/Dashboard/DashboardTemplate"));
-const Filter_2 = require("./models/Filter");
-const paginationProcessing_1 = require("./utils/paginationProcessing");
-const fast_deep_equal_1 = __importDefault(require("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 = {
-    [Filter_1.FieldType.Number]: [
-        Filter_1.NumberOperator.EqualTo,
-        Filter_1.NumberOperator.NotEqualTo,
-        Filter_1.NumberOperator.GreaterThan,
-        Filter_1.NumberOperator.LessThan,
-        Filter_1.NumberOperator.GreaterThanOrEqualTo,
-        Filter_1.NumberOperator.LessThanOrEqualTo,
-        Filter_1.NullOperator.IsNotNull,
-        Filter_1.NullOperator.IsNull,
-    ],
-    [Filter_1.FieldType.String]: [
-        Filter_1.StringOperator.IsExactly,
-        Filter_1.StringOperator.IsNotExactly,
-        Filter_1.StringOperator.Contains,
-        Filter_1.StringOperator.Is,
-        Filter_1.StringOperator.IsNot,
-        Filter_1.NullOperator.IsNotNull,
-        Filter_1.NullOperator.IsNull,
-    ],
-    [Filter_1.FieldType.Boolean]: [
-        Filter_1.BoolOperator.EqualTo,
-        Filter_1.BoolOperator.NotEqualTo,
-        Filter_1.NullOperator.IsNotNull,
-        Filter_1.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
- */
-function Dashboard({ name, hidden = false, SelectComponent = QuillSelectWithCombo_1.QuillSelectComponentWithCombo, MultiSelectComponent = QuillMultiSelectWithCombo_1.QuillMultiSelectComponentWithCombo, ModalComponent = UiComponents_1.QuillModalComponent, ButtonComponent = UiComponents_1.MemoizedButton, SecondaryButtonComponent = UiComponents_1.MemoizedSecondaryButton, FilterTagComponent = ui_1.QuillFilterPopover, PopoverComponent = UiComponents_1.MemoizedPopover, TextInputComponent = UiComponents_1.QuillTextInput, EmptyDashboardComponent = UiComponents_1.QuillEmptyDashboardComponent, DateRangePickerComponent = QuillDateRangePicker_1.QuillDateRangePicker, MetricComponent = MetricComponent_1.default, ChartComponent = ChartComponent_1.default, TableComponent = TableComponent_1.default, TemplateMetricComponent = TemplateMetricComponent_1.default, TemplateChartComponent = TemplateChartComponent_1.default, TemplateTableComponent = TemplateTableComponent_1.default, DashboardSectionComponent = DashboardSection_1.default, DashboardSectionContainerComponent = DashboardSectionContainer_1.default, DashboardSectionTabsComponent, FilterContainerComponent = UiComponents_1.QuillFilterContainerComponent, DashboardLoadingComponent = UiComponents_1.QuillLoadingDashboardComponent, ErrorComponent = ChartError_1.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] = (0, react_1.useState)({});
-    const [selectedSection, setSelectedSection] = (0, react_1.useState)('');
-    const dataLoaderUserFilters = (0, react_1.useMemo)(() => {
-        return (filters?.map((f) => (0, Filter_1.convertCustomFilter)(f)) ?? []).concat(Object.values(userFilters));
-    }, [filters, userFilters]);
-    (0, react_1.useEffect)(() => {
-        onUserFiltersUpdated?.(Object.values(userFilters));
-    }, [userFilters]);
-    const { isLoading, data, isDashboardFilterLoading, dashboardFilters: populatedDashboardFilters, reload, } = (0, useDashboard_1.useDashboardInternal)(name, (filters?.map((f) => (0, Filter_1.convertCustomFilter)(f)) ?? []).concat(Object.values(userFilters) ?? []));
-    const { getToken } = (0, react_1.useContext)(Context_1.FetchContext);
-    const { customFilterDispatch } = (0, react_1.useContext)(Context_1.DashboardFiltersContext);
-    const { eventTracking } = (0, react_1.useContext)(Context_1.EventTrackingContext);
-    const metrics = (0, react_1.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 = (0, react_1.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 = (0, react_1.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 = (0, react_1.useRef)(false);
-    (0, react_1.useEffect)(() => {
-        if (!mounted.current) {
-            mounted.current = true;
-            return;
-        }
-        if (isClientLoading) {
-            return;
-        }
-        reload(name, false, undefined, {
-            filters: populatedDashboardFilters ?? [],
-        });
-    }, [filters, userFilters]);
-    (0, react_1.useEffect)(() => {
-        customFilterDispatch({
-            type: 'ADD_CUSTOM_DASHBOARD_FILTERS',
-            dashboardName: name,
-            data: dataLoaderUserFilters,
-        });
-        // return () => {
-        //   customFilterDispatch({
-        //     type: 'DELETE_CUSTOM_DASHBOARD_FILTERS',
-        //     dashboardName: name,
-        //   });
-        // }
-    }, [dataLoaderUserFilters]);
-    const [client, isClientLoading] = (0, react_1.useContext)(Context_1.ClientContext);
-    const { tenants, flags } = (0, react_1.useContext)(Context_1.TenantContext);
-    const [theme] = (0, react_1.useContext)(Context_1.ThemeContext);
-    const [schemaData] = (0, react_1.useContext)(Context_1.SchemaDataContext);
-    const { dispatch: dashboardFiltersDispatch } = (0, react_1.useContext)(Context_1.DashboardFiltersContext);
-    const [fieldValuesMap, setFieldValuesMap] = (0, react_1.useState)({}); // Mapping of unique values per field, used in string filter 'in' and 'not in'
-    const [fieldValuesIsLoaded, setFieldValuesIsLoaded] = (0, react_1.useState)(false);
-    const [addFilterPopoverIsOpen, setAddFilterPopoverIsOpen] = (0, react_1.useState)(false);
-    const [filterListIsOpen, setFilterListIsOpen] = (0, react_1.useState)(false);
-    const [filterListAddFilterPopoverIsOpen, setFilterListAddFilterPopoverIsOpen,] = (0, react_1.useState)(false);
-    const presetOptions = (0, react_1.useMemo)(() => {
-        return populatedDashboardFilters?.[0]?.filterType === 'date_range'
-            ? (0, dateRangePickerUtils_1.convertPresetOptionsToSelectableList)(populatedDashboardFilters[0].presetOptions ?? [], populatedDashboardFilters[0].defaultPresetRanges ?? [])
-            : dateRangePickerUtils_1.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] = (0, react_1.useState)({});
-    const prevNameRef = (0, react_1.useRef)(name);
-    // const prevTenantsRef = useRef<
-    //   | { tenantIds: (string | number)[]; tenantField: string }[]
-    //   | (string | number)[]
-    //   | undefined
-    // >(tenants);
-    const prevFlagsRef = (0, react_1.useRef)(flags);
-    const prevClientRef = (0, react_1.useRef)(client?.publicKey ?? '');
-    const addFilterPopoverButtonRef = (0, react_1.useRef)(null);
-    const viewFiltersPopoverButtonRef = (0, react_1.useRef)(null);
-    const previousFilters = (0, react_1.useRef)(filters);
-    if (!(0, fast_deep_equal_1.default)(previousFilters.current, filters)) {
-        previousFilters.current = filters;
-    }
-    // const pendingReloadRef = useRef(false);
-    const isInitialLoadOfDashboardRef = (0, react_1.useRef)(false);
-    const referencedTables = (0, react_1.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]);
-    (0, react_1.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 = (0, react_1.useRef)(false);
-    (0, react_1.useEffect)(() => {
-        if (!tenantMounted.current) {
-            tenantMounted.current = true;
-            return;
-        }
-        const flagsChanged = 
-        // !equal(prevTenantsRef.current, tenants) ||
-        !(0, fast_deep_equal_1.default)(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]);
-    (0, react_1.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]);
-    (0, react_1.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]);
-    (0, react_1.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 === Filter_1.FilterType.Date);
-            if (!customDateFilter) {
-                return;
-            }
-            const newFilter = (0, filterProcessing_1.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
-    (0, react_1.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 (0, tableProcessing_1.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 === Filter_2.InternalDashboardFilterType.Date) {
-            if (comparison ||
-                (filter.comparison &&
-                    (filter.comparisonRange?.value ?? 'NO_COMPARISON') !==
-                        'NO_COMPARISON')) {
-                let preset = '';
-                if (comparison) {
-                    preset = filter.preset.value;
-                }
-                const key = comparison?.value ||
-                    (filter.comparisonRange?.value ?? 'NO_COMPARISON');
-                let primaryRange = {
-                    startDate: value ? value.startDate : filter.startDate,
-                    endDate: value ? value.endDate : filter.endDate,
-                };
-                if (value && value.preset) {
-                    preset = value.preset;
-                    primaryRange = (0, dateRangePickerUtils_1.getRangeFromPresetOptions)(value.preset, presetOptions);
-                }
-                filterValue = {
-                    startDate: primaryRange.startDate,
-                    endDate: primaryRange.endDate,
-                    preset: {
-                        label: presetOptions.find((o) => o.value === preset)?.label ?? preset,
-                        value: preset,
-                    },
-                    comparisonRange: {
-                        startDate: dateRangePickerUtils_1.COMPARISON_RANGE[key](primaryRange)
-                            ?.startDate,
-                        endDate: dateRangePickerUtils_1.COMPARISON_RANGE[key](primaryRange)
-                            ?.endDate,
-                        value: key,
-                    },
-                };
-            }
-            else {
-                const primaryRange = value && value.preset
-                    ? (0, dateRangePickerUtils_1.getRangeFromPresetOptions)(value.preset, presetOptions)
-                    : {
-                        startDate: value?.startDate || filter.startDate,
-                        endDate: value?.endDate || filter.endDate,
-                    };
-                const preset = value?.preset ? value.preset : '';
-                filterValue = {
-                    startDate: primaryRange.startDate,
-                    endDate: primaryRange.endDate,
-                    preset: {
-                        label: presetOptions.find((o) => o.value === preset)?.label ?? preset,
-                        value: preset,
-                    },
-                };
-            }
-        }
-        setFilterValues((filterValues) => ({
-            ...filterValues,
-            [filter.label]: filterValue,
-        }));
-        reload(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,
-        }));
-    };
-    (0, react_1.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 (0, jsx_runtime_1.jsx)(EmptyDashboardComponent, {});
-    }
-    if (hidden || isLoading !== false || isClientLoading || !data?.sections) {
-        // No sections means yet to fetch
-        return ((0, jsx_runtime_1.jsx)(DashboardLoadingComponent, { containerStyle: containerStyle, chartContainerStyle: chartContainerStyle }));
-    }
-    // TODO: Never reached
-    if (!data?.sections) {
-        return ((0, jsx_runtime_1.jsx)(ErrorComponent, { containerStyle: { height: 100 }, label: "Error loading dashboard" }));
-    }
-    return ((0, jsx_runtime_1.jsxs)("div", { className: className, ...(0, styles_1.styleToProps)(containerStyle), children: [DashboardSectionTabsComponent && ((0, jsx_runtime_1.jsx)(DashboardSectionTabsComponent, { sections: Object.keys(data.sections), selectedSection: selectedSection, setSelectedSection: setSelectedSection })), (0, jsx_runtime_1.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
-                    (0, jsx_runtime_1.jsxs)(FilterContainerComponent, { children: [(populatedDashboardFilters ?? [])
-                                .filter((filter) => {
-                                if (hideDateRangeFilter) {
-                                    return filter.filterType !== 'date_range';
-                                }
-                                return true;
-                            })
-                                .map((filter) => ((0, jsx_runtime_1.jsx)(DashboardFilter_1.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 && ((0, jsx_runtime_1.jsxs)("div", { style: {
-                                    display: 'flex',
-                                    flexDirection: 'column',
-                                }, ref: viewFiltersPopoverButtonRef, children: [(0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { onClick: () => {
-                                            if (fieldValuesIsLoaded) {
-                                                setAddFilterPopoverIsOpen(!addFilterPopoverIsOpen);
-                                                setFilterListIsOpen(false);
-                                            }
-                                        }, label: `Add Filter` }), (0, jsx_runtime_1.jsx)(PopoverComponent, { isOpen: addFilterPopoverIsOpen, setIsOpen: setAddFilterPopoverIsOpen, popoverTitle: "Add Filter", ignoredRefs: [viewFiltersPopoverButtonRef], popoverChildren: (0, jsx_runtime_1.jsx)(FilterModal_1.default, { 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 && ((0, jsx_runtime_1.jsx)(ModalComponent, { triggerLabel: `Filters${Object.values(userFilters).length > 0 ? ` (${Object.values(userFilters).length})` : ''}`, isOpen: filterListIsOpen, setIsOpen: setFilterListIsOpen, title: "Filters", children: (0, jsx_runtime_1.jsxs)("div", { style: {
-                                        display: 'flex',
-                                        flexDirection: 'column',
-                                        alignItems: 'start',
-                                    }, children: [Object.values(userFilters).map((filter, index) => ((0, jsx_runtime_1.jsx)(ui_1.FilterPopoverWrapper, { schema: schemaData.schema, filter: {
-                                                filterType: filter.filterType,
-                                                fieldType: filter.fieldType,
-                                                field: filter.field,
-                                                operator: filter.operator,
-                                                value: filter.value,
-                                            }, filterLabel: filter ? (0, filterProcessing_1.filterSentence)(filter) : '', index: index, fieldValuesMap: fieldValuesMap, customOperatorOptions: customOperatorOptions, FilterTagComponent: FilterTagComponent, FilterModal: FilterModal_1.default, 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 ? (0, filterProcessing_1.filterSentence)(filter) : ''}`))), (0, jsx_runtime_1.jsxs)("div", { style: {
-                                                display: 'flex',
-                                                flexDirection: 'column',
-                                            }, ref: addFilterPopoverButtonRef, children: [(0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { onClick: () => {
-                                                        if (fieldValuesIsLoaded) {
-                                                            setFilterListAddFilterPopoverIsOpen(!filterListAddFilterPopoverIsOpen);
-                                                        }
-                                                    }, label: `Add Filter` }), (0, jsx_runtime_1.jsx)(PopoverComponent, { isOpen: filterListAddFilterPopoverIsOpen, setIsOpen: setFilterListAddFilterPopoverIsOpen, popoverTitle: "Add Filter", ignoredRefs: [addFilterPopoverButtonRef], popoverChildren: (0, jsx_runtime_1.jsx)(FilterModal_1.default, { 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 && ((0, jsx_runtime_1.jsx)(FilterContainerComponent, { children: (populatedDashboardFilters ?? [])
-                            .filter((filter) => filter.filterType === 'date_range')
-                            .map((filter) => ((0, jsx_runtime_1.jsx)(DashboardFilter_1.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 && ((0, jsx_runtime_1.jsx)(DashboardTemplate_1.default, { 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 ((0, jsx_runtime_1.jsx)(DashboardSectionContainerComponent, { children: section === '' ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(metrics[section]?.length ?? 0) > 0 && ((0, jsx_runtime_1.jsx)(DashboardSectionComponent, { section: section, children: metrics[section]?.map((item) => {
-                                    return ((0, jsx_runtime_1.jsx)(DataLoader_1.default, { item: item, filters: populatedDashboardFilters ?? [], userFilters: dataLoaderUserFilters, additionalProcessing: {
-                                            page: paginationProcessing_1.DEFAULT_PAGINATION,
-                                            last: additionalProcessing?.last,
-                                        }, dashboardName: name, children: ({ isLoading, error, data, }) => ((0, jsx_runtime_1.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 && ((0, jsx_runtime_1.jsx)(DashboardSectionComponent, { section: section, children: charts[section]?.map((item) => ((0, jsx_runtime_1.jsx)(DataLoader_1.ChartDataLoader, { item: item, dateBucket: dateBucket, additionalProcessing: {
-                                        page: pagination,
-                                        last: additionalProcessing?.last,
-                                    }, filters: populatedDashboardFilters ?? [], userFilters: dataLoaderUserFilters, dashboardName: name, children: ({ isLoading, data, error, dateBucket, }) => ((0, jsx_runtime_1.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 ? ((0, jsx_runtime_1.jsx)(ErrorComponent, { label: error, containerStyle: {
-                                                minHeight: 300,
-                                                height: 300,
-                                            } })) : ((0, jsx_runtime_1.jsx)(Chart_1.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 && ((0, jsx_runtime_1.jsx)(DashboardSectionComponent, { section: section, children: tables[section]?.map((item) => ((0, jsx_runtime_1.jsx)(DataLoader_1.default, { item: item, filters: populatedDashboardFilters ?? [], userFilters: dataLoaderUserFilters, additionalProcessing: {
-                                        page: pagination,
-                                        last: additionalProcessing?.last,
-                                    }, dashboardName: name, children: ({ isLoading, error, onPageChange, onSortChange, data, rowCount, rowCountIsLoading, }) => ((0, jsx_runtime_1.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}`))) }))] })) : ((0, jsx_runtime_1.jsx)(DashboardSectionComponent, { section: section, children: data.sections?.[section]?.map((item) => {
-                            if (item.chartType === 'metric' ||
-                                item.chartType === 'table') {
-                                return ((0, jsx_runtime_1.jsx)(DataLoader_1.default, { item: item, filters: populatedDashboardFilters ?? [], userFilters: dataLoaderUserFilters, additionalProcessing: {
-                                        page: paginationProcessing_1.DEFAULT_PAGINATION,
-                                        last: additionalProcessing?.last,
-                                    }, dashboardName: name, children: ({ isLoading, error, data, }) => item.chartType === 'metric' ? ((0, jsx_runtime_1.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)) : ((0, jsx_runtime_1.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 ((0, jsx_runtime_1.jsx)(DataLoader_1.ChartDataLoader, { item: item, dateBucket: dateBucket, additionalProcessing: {
-                                        page: pagination,
-                                        last: additionalProcessing?.last,
-                                    }, filters: populatedDashboardFilters ?? [], userFilters: dataLoaderUserFilters, dashboardName: name, children: ({ isLoading, data, error, dateBucket, }) => ((0, jsx_runtime_1.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 ? ((0, jsx_runtime_1.jsx)(ErrorComponent, { label: error, containerStyle: {
-                                                minHeight: 300,
-                                                height: 300,
-                                            } })) : ((0, jsx_runtime_1.jsx)(Chart_1.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));
-            })] }));
-}