@quillsql/react 2.12.53 → 2.13.0

package/dist/esm/Dashboard.js

@@ -27,7 +27,7 @@ import QuillTemplateMetricComponent from './components/Dashboard/TemplateMetricC
 import QuillTemplateTableComponent from './components/Dashboard/TemplateTableComponent';
 import QuillDashboardTemplate from './components/Dashboard/DashboardTemplate';
 import { DashboardFilterType, } from './models/Filter';
-import equal from 'fast-deep-equal';
+import { DEFAULT_PAGINATION } from './utils/paginationProcessing';
 const defaultChartContainerStyles = {
     display: 'flex',
     width: '100%',
@@ -43,6 +43,15 @@ const charts = (sections, section, sortByOrdering) => sections[section]
 const tables = (sections, section, sortByOrdering) => sections[section]
     .filter(({ chartType }) => chartType === 'table')
     .sort(sortByOrdering);
+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;
+};
 /**
  * ### Quill Dashboard
  *
@@ -74,37 +83,52 @@ const tables = (sections, section, sortByOrdering) => sections[section]
  * ### 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, FilterContainerComponent = QuillFilterContainerComponent, DashboardLoadingComponent = QuillLoadingDashboardComponent, ErrorComponent = QuillChartErrorWithAction, onClickReport, hoverActions, onChangeLoading, hideFilters, hideXAxis = false, hideYAxis = false, hideCartesianGrid = false, comparisonLineStyle = 'solid', containerStyle, className, chartContainerStyle = defaultChartContainerStyles, filters, onClickChartElement, dateBucket, additionalProcessing, hideAdminErrors = true, templateDashboardName, }) {
-    const { isLoading, data, isDashboardFiltersLoading, dashboardFilters: populatedDashboardFilters, reload, } = useDashboard(name);
-    const [presetFilters, setPresetFilters] = useState(null);
+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, FilterContainerComponent = QuillFilterContainerComponent, DashboardLoadingComponent = QuillLoadingDashboardComponent, ErrorComponent = QuillChartErrorWithAction, onClickReport, hoverActions, onChangeLoading, hideFilters, hideXAxis = false, hideYAxis = false, hideCartesianGrid = false, comparisonLineStyle = 'solid', containerStyle, className, chartContainerStyle = defaultChartContainerStyles, 
+// TODO: do something with these custom filters
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+filters, onClickChartElement, dateBucket, additionalProcessing, hideAdminErrors = true, templateDashboardName, pagination = { rowsPerPage: 10, rowsPerRequest: 50 }, }) {
+    const { isLoading, data, isDashboardFilterLoading, dashboardFilters: populatedDashboardFilters, reload, } = useDashboard(name);
     const [client, isClientLoading] = useContext(ClientContext);
     const [theme] = useContext(ThemeContext);
-    const [initialLoad, setInitialLoad] = useState(true);
-    const [appliedFilters, setAppliedFilters] = useState(null);
-    const { dashboardFilters, dashboardFiltersDispatch } = useContext(DashboardFiltersContext);
+    const { dispatch: dashboardFiltersDispatch } = useContext(DashboardFiltersContext);
     const [schemaData] = useContext(SchemaDataContext);
-    const [filterSchemaIsLoaded, setFilterSchemaIsLoaded] = useState(false);
-    const [filterSchema, setFilterSchema] = useState({ columns: [] }); // Schema to be passed into FilterModal
     const [fieldValuesMap, setFieldValuesMap] = useState({}); // Mapping of unique values per field, used in string filter 'in' and 'not in'
     const [referencedTables, setReferencedTables] = useState([]); // Intersection of tables referenced in the dashboard
     const [fieldValuesIsLoaded, setFieldValuesIsLoaded] = useState(false);
     const [addFilterPopoverIsOpen, setAddFilterPopoverIsOpen] = useState(false);
     const [filterListIsOpen, setFilterListIsOpen] = useState(false);
     const [filterListAddFilterPopoverIsOpen, setFilterListAddFilterPopoverIsOpen,] = useState(false);
-    const [uniqueCounter, setUniqueCounter] = useState(0);
-    const userFilters = useMemo(() => {
-        return (appliedFilters
-            ?.map((filter, index) => {
-            return { filter, index };
-        })
-            .filter((filter) => filter.filter.isUserFilter) ?? []);
-    }, [appliedFilters]);
-    const adminFilters = useMemo(() => {
-        return appliedFilters?.filter((filter) => !filter.isUserFilter) ?? [];
-    }, [appliedFilters]);
+    const presetOptions = useMemo(() => {
+        return populatedDashboardFilters?.[0]?.filterType === 'date_range'
+            ? populatedDashboardFilters[0].presetRanges?.map((elem) => {
+                if (!elem.isStatic) {
+                    return {
+                        label: elem.label,
+                        value: elem.value,
+                        startDate: PRIMARY_RANGE[elem.value].start,
+                        endDate: PRIMARY_RANGE[elem.value].end,
+                    };
+                }
+                return {
+                    label: elem.label,
+                    value: elem.value,
+                    startDate: new Date(elem.startDate),
+                    endDate: new Date(elem.endDate),
+                };
+            }) ?? defaultOptionsV2
+            : defaultOptionsV2;
+    }, [populatedDashboardFilters]);
+    const [userFilters, setUserFilters] = useState({});
+    // A filter value can either be a string, an array of strings for a multiselect, or a date range (that could have a comparison range)
+    const [filterValues, setFilterValues] = useState({});
     useEffect(() => {
+        setFilterValues({});
         reload(name, true);
-    }, [name, client?.organizationId]);
+    }, [client?.organizationId]);
+    useEffect(() => {
+        setFilterValues({});
+        reload(name, false);
+    }, [name]);
     const customOperatorOptions = {
         [FieldTypes.Number]: [
             NumberOperator.EqualTo,
@@ -132,28 +156,6 @@ export default function Dashboard({ name, hidden = false, SelectComponent = Quil
             NullOperator.IsNull,
         ],
     };
-    useEffect(() => {
-        if (!data)
-            return;
-        onDashboardDataChange(data, schemaData.schema);
-    }, [data, filters, schemaData.schema]);
-    useEffect(() => {
-        if (isDashboardFiltersLoading)
-            return;
-        if (populatedDashboardFilters) {
-            const newApplied = appliedFilters?.map((filter) => {
-                if ((filter.options && filter.options.length) ||
-                    filter.isUserFilter) {
-                    return filter;
-                }
-                const equivalent = populatedDashboardFilters.find((populatedFilter) => populatedFilter._id === filter._id);
-                return { ...filter, options: equivalent?.options ?? filter.options };
-            }) ?? populatedDashboardFilters;
-            if (!equal(appliedFilters, newApplied)) {
-                setAppliedFilters(newApplied);
-            }
-        }
-    }, [isDashboardFiltersLoading, populatedDashboardFilters]);
     // Go through all columns in the referenced tables and get the unique values to use in fieldValuesMap
     useEffect(() => {
         const fetchData = async () => {
@@ -174,24 +176,22 @@ export default function Dashboard({ name, hidden = false, SelectComponent = Quil
             setFieldValuesMap(newFieldValues);
             setFieldValuesIsLoaded(true);
         };
-        fetchData();
+        if (data?.customFiltersEnabled) {
+            fetchData();
+        }
     }, [referencedTables]);
-    // Get the relevant information from the dashboard and schema to pass to FilterModal
-    const updateFilterSchema = (sections, schema) => {
-        if (!sections || !schema || schema.length === 0) {
-            return;
+    const filterSchema = useMemo(() => {
+        if (!data?.sections ||
+            !schemaData.schema ||
+            schemaData.schema.length === 0) {
+            return { columns: [] };
         }
-        setFilterSchemaIsLoaded(false);
+        const sections = data?.sections;
+        const schema = schemaData.schema;
         // find intersection of all referenced tables
-        const tables = Object.keys(sections)
-            .map((section) => {
-            return sections[section].map((chart) => {
-                return chart.referencedTables;
-            });
-        })
-            .reduce((accumulator, currentArray) => {
-            return accumulator.concat(currentArray);
-        }, []);
+        const tables = Object.values(sections)
+            .flatMap((section) => section.map((chart) => chart.referencedTables))
+            .flat();
         if (tables && tables.length > 0) {
             let intersection = new Set(tables[0]);
             for (let i = 1; i < tables.length; ++i) {
@@ -215,292 +215,94 @@ export default function Dashboard({ name, hidden = false, SelectComponent = Quil
                 .reduce((accumulator, currentArray) => {
                 return accumulator.concat(currentArray);
             }, []);
-            setFilterSchema({ columns });
-        }
-        else {
-            setFilterSchema({ columns: [] });
-        }
-        setFilterSchemaIsLoaded(true);
-    };
-    const onDashboardDataChange = (resp, schema) => {
-        // setDashboardSections(resp.sections ?? {});
-        updateFilterSchema(resp.sections, schema);
-        const filterArray = [];
-        if (resp.dateFilter && Object.keys(resp.dateFilter).length) {
-            let presetsOptions = defaultOptionsV2;
-            if (resp.dateFilter.presetRanges) {
-                presetsOptions = resp.dateFilter.presetRanges.map((elem) => {
-                    if (!elem.isStatic) {
-                        return {
-                            label: elem.label,
-                            value: elem.value,
-                            startDate: PRIMARY_RANGE[elem.value].start,
-                            endDate: PRIMARY_RANGE[elem.value].end,
-                        };
-                    }
-                    return {
-                        label: elem.label,
-                        value: elem.value,
-                        startDate: new Date(elem.startDate),
-                        endDate: new Date(elem.endDate),
-                    };
-                });
-            }
-            setPresetFilters(presetsOptions);
-            // Attempt to find a date filter in the current applied filters
-            const currentDateFilter = appliedFilters?.find((filter) => filter.filterType === 'date_range');
-            const key = currentDateFilter?.preset?.value ||
-                resp.dateFilter?.primaryRange?.value ||
-                'LAST_6_MONTHS';
-            const primaryPreset = presetsOptions.find((option) => {
-                return option.value === key;
-            });
-            const filter = {
-                startDate: primaryPreset.startDate,
-                endDate: primaryPreset.endDate,
-                filterType: 'date_range',
-                options: presetsOptions.map((elem) => {
-                    return {
-                        label: elem.label,
-                        value: elem.value,
-                    };
-                }),
-                field: 'date_range',
-                label: resp.dateFilter.label,
-                preset: {
-                    label: primaryPreset.label,
-                    value: primaryPreset.value,
-                },
-                dashboardName: name,
-            };
-            if (resp.dateFilter.comparison) {
-                filter.comparison = true;
-                const compKey = resp.dateFilter.defaultComparisonRange ?? 'PREV_PERIOD';
-                const range = { start: filter.startDate, end: filter.endDate };
-                filter.comparisonRange = {
-                    startDate: COMPARISON_RANGE[compKey](range)?.start,
-                    endDate: COMPARISON_RANGE[compKey](range)?.end,
-                    value: compKey,
-                };
-            }
-            else {
-                filter.comparison = false;
-            }
-            filterArray.push(filter);
-        }
-        // Add string filters to filterArray
-        if (resp.filters && resp.filters.length) {
-            Object.values(resp.filters)
-                .filter((filter) => filter.filterType !== 'date_range')
-                .forEach((filter) => {
-                let processedFilter = processFilter(filter);
-                if (populatedDashboardFilters) {
-                    const equivalent = populatedDashboardFilters.find((populatedFilter) => populatedFilter._id === filter._id);
-                    processedFilter = {
-                        ...processedFilter,
-                        options: equivalent?.options ?? filter.options,
-                    };
-                }
-                filterArray.push(processedFilter);
-            });
-        }
-        // Add custom filter to filterArray
-        if (filters) {
-            filters.forEach((filter) => {
-                filterArray.push({
-                    ...filter,
-                    dashboardName: name,
-                    isUserFilter: true,
-                });
-            });
-        }
-        // remove all that are already present in dashboardSpecificFilters
-        const dashboardSpecificFilters = dashboardFilters.filter((f) => f.dashboardName === name);
-        if (!equal(dashboardSpecificFilters, filterArray)) {
-            dashboardFiltersDispatch({
-                type: 'CLEAR_AND_ADD_DASHBOARD_FILTERS',
-                data: filterArray,
-                dashboardName: name,
-            });
-        }
-        if (!equal(appliedFilters, filterArray)) {
-            setAppliedFilters(filterArray);
-        }
-        setInitialLoad(false);
-    };
-    const handleOnClickDashboardItem = (elem) => {
-        if (onClickReport) {
-            onClickReport({ ...elem, _id: elem.id });
-        }
-    };
-    function removeQuotes(str) {
-        if (str.startsWith('"') && str.endsWith('"')) {
-            return str.slice(1, -1);
+            return { columns };
         }
         else {
-            return str;
-        }
-    }
-    const processFilter = (filter, value = null) => {
-        //for dateObjects only, since values are arrays for dateObjects
-        const { ...filterWithoutSelectedValue } = filter; // _ is a throwaway variable
-        let selectedValue;
-        let selectedElem;
-        if (filter.filterType === 'string') {
-            if (filter.options) {
-                selectedElem = filter.options.find((elem) => elem[removeQuotes(filter.field)] === value);
-            }
-            if (selectedElem) {
-                selectedValue = selectedElem[removeQuotes(filter.field)];
-            }
-            return {
-                ...filterWithoutSelectedValue,
-                ...(selectedValue ? { selectedValue } : {}),
-                dashboardName: name,
-            };
-        }
-        if (filter.filterType === 'date' || filter.filterType === 'date_range') {
-            return {
-                startDate: value ? value[0] : filter.startDate,
-                endDate: value ? value[1] : filter.endDate,
-                filterType: 'date_range',
-                label: 'Date',
-                field: 'date_range',
-                options: filter.options,
-                dashboardName: name,
-            };
+            return { columns: [] };
         }
-    };
+    }, [data?.sections, schemaData.schema]);
+    const handleOnClickDashboardItem = (elem) => onClickReport && onClickReport({ ...elem, _id: elem.id });
     const updateFilter = (filter, value = null, comparison = null) => {
-        if (!appliedFilters) {
+        if (!populatedDashboardFilters)
             return;
-        }
-        //for dateObjects only, since values are arrays for dateObjects
-        const { ...filterWithoutSelectedValue } = filter; // _ is a throwaway variable
+        let filterValue = {};
         if (filter.filterType === 'string') {
-            let selectedValue = {};
             if (filter.stringFilterType === 'multiselect') {
                 if ((value?.length ?? 0) === 0) {
-                    selectedValue = { values: [] };
+                    filterValue = { values: undefined, operator: undefined };
                 }
                 else {
-                    selectedValue = { values: value, operator: 'IN' };
+                    filterValue = { values: value, operator: 'IN' };
                 }
             }
             else {
-                selectedValue = { selectedValue: value };
-            }
-            const newFilter = {
-                ...filterWithoutSelectedValue,
-                ...selectedValue,
-                dashboardName: name,
-                stringFilterType: filter.stringFilterType,
-                table: filter.table,
-                labelField: filter.labelField,
-                label: filter.label,
-                field: filter.field,
-                filterType: DashboardFilterType.String,
-            };
-            dashboardFiltersDispatch({
-                type: 'UPDATE_DASHBOARD_FILTER',
-                id: filter.field,
-                data: newFilter,
-            });
-            const index = appliedFilters.findIndex((filter) => filter.field === newFilter.field &&
-                filter.dashboardName === newFilter.dashboardName);
-            if (index !== -1) {
-                setAppliedFilters([
-                    ...appliedFilters.slice(0, index),
-                    newFilter,
-                    ...appliedFilters.slice(index + 1),
-                ]);
+                filterValue = { selectedValue: value };
             }
-            return;
+            setFilterValues((filterValues) => ({
+                ...filterValues,
+                [filter.label]: filterValue,
+            }));
         }
-        if (filter.filterType === DashboardFilterType.Date) {
+        else if (filter.filterType === DashboardFilterType.Date) {
             if (comparison ||
-                (filter.comparison && filter.comparisonRange.value !== 'NO_COMPARISON')) {
+                (filter.comparison &&
+                    (filter.comparisonRange?.value ?? 'NO_COMPARISON') !==
+                        'NO_COMPARISON')) {
                 let preset = '';
                 if (comparison) {
-                    preset = filter.preset.label;
+                    preset = filter.preset.value;
                 }
-                const key = comparison?.value || filter.comparisonRange.value;
+                const key = comparison?.value ||
+                    (filter.comparisonRange?.value ?? 'NO_COMPARISON');
                 let primaryRange = {
                     start: value ? value.startDate : filter.startDate,
                     end: value ? value.endDate : filter.endDate,
                 };
                 if (value && value.preset) {
                     preset = value.preset;
-                    primaryRange = getRangeFromPresetOptions(value.preset, presetFilters);
+                    primaryRange = getRangeFromPresetOptions(value.preset, presetOptions);
                 }
-                const newFilter = {
+                filterValue = {
                     startDate: primaryRange.start,
                     endDate: primaryRange.end,
-                    filterType: DashboardFilterType.Date,
-                    label: filter.label,
-                    field: 'date_range',
-                    preset: { label: preset, value: preset },
-                    options: filter.options,
-                    comparison: true,
+                    preset: {
+                        label: presetOptions.find((o) => o.value === preset)?.label ?? preset,
+                        value: preset,
+                    },
                     comparisonRange: {
                         startDate: COMPARISON_RANGE[key](primaryRange)?.start,
                         endDate: COMPARISON_RANGE[key](primaryRange)?.end,
                         value: key,
                     },
-                    defaultComparisonRange: filter.defaultComparisonRange,
-                    primaryRange: filter.primaryRange,
-                    dashboardName: name,
                 };
-                dashboardFiltersDispatch({
-                    type: 'UPDATE_DASHBOARD_FILTER',
-                    id: 'date_range',
-                    data: newFilter,
-                });
-                const index = appliedFilters.findIndex((filter) => filter.field === newFilter.field &&
-                    filter.dashboardName === newFilter.dashboardName);
-                if (index !== -1) {
-                    setAppliedFilters([
-                        ...appliedFilters.slice(0, index),
-                        newFilter,
-                        ...appliedFilters.slice(index + 1),
-                    ]);
-                }
+                setFilterValues((filterValues) => ({
+                    ...filterValues,
+                    [filter.label]: filterValue,
+                }));
             }
             else {
                 const primaryRange = value && value.preset
-                    ? getRangeFromPresetOptions(value.preset, presetFilters)
+                    ? getRangeFromPresetOptions(value.preset, presetOptions)
                     : {
                         start: value?.startDate || filter.startDate,
                         end: value?.endDate || filter.endDate,
                     };
                 const preset = value?.preset ? value.preset : '';
-                const newFilter = {
-                    ...filter,
-                    preset: { label: preset, value: preset },
+                filterValue = {
                     startDate: primaryRange.start,
                     endDate: primaryRange.end,
-                    filterType: DashboardFilterType.Date,
-                    field: 'date_range',
-                    options: filter.options,
-                    label: filter.label,
-                    dashboardName: name,
+                    preset: { label: preset, value: preset },
                 };
-                dashboardFiltersDispatch({
-                    type: 'UPDATE_DASHBOARD_FILTER',
-                    id: 'date_range',
-                    data: newFilter,
-                });
-                const index = appliedFilters.findIndex((filter) => filter.field === newFilter.field &&
-                    filter.dashboardName === newFilter.dashboardName);
-                if (index !== -1) {
-                    setAppliedFilters([
-                        ...appliedFilters.slice(0, index),
-                        newFilter,
-                        ...appliedFilters.slice(index + 1),
-                    ]);
-                }
+                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) => {
@@ -525,34 +327,20 @@ export default function Dashboard({ name, hidden = false, SelectComponent = Quil
         return userFilter;
     };
     // new update filter function for user added filters
-    const updateUserFilter = (filter, id) => {
-        if (!appliedFilters) {
-            return;
-        }
-        const newFilter = getUserFilter(filter, id);
-        dashboardFiltersDispatch({
-            type: 'ADD_DASHBOARD_FILTER',
-            data: newFilter,
-        });
-        setAppliedFilters([...appliedFilters, newFilter]);
+    const updateUserFilter = (filter) => {
+        setUserFilters((userFilters) => ({
+            ...userFilters,
+            [filter.field]: filter,
+        }));
     };
     useEffect(() => {
-        if (onChangeLoading) {
-            onChangeLoading(isLoading || initialLoad);
+        if (onChangeLoading && isLoading) {
+            onChangeLoading(isLoading);
         }
-    }, [isLoading, initialLoad, onChangeLoading]);
-    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;
-    };
+    }, [isLoading, onChangeLoading]);
     if (!isLoading &&
         (Object.keys(data?.sections ?? {}).length === 0 ||
-            data?.sections?.['']?.length === 0)) {
+            Object.values(data?.sections ?? {})[0]?.length === 0)) {
         return _jsx(EmptyDashboardComponent, {});
     }
     if (hidden || isLoading || isClientLoading || !data?.sections) {
@@ -560,13 +348,18 @@ export default function Dashboard({ name, hidden = false, SelectComponent = Quil
     }
     return (_jsxs("div", { className: className, ...styleToProps(containerStyle), children: [data &&
                 data.customFiltersEnabled &&
-                filterSchemaIsLoaded &&
                 !hideAdminErrors &&
                 !hideFilters &&
                 data &&
                 data.customFiltersEnabled &&
                 filterSchema &&
-                filterSchema.columns.length === 0 && (_jsx("div", { style: { marginBottom: 10 }, children: _jsx(QuillErrorMessageComponent, { errorMessage: "Warning: No custom filter options because there are no common views among the charts in the dashboard" }) })), _jsxs("div", { style: { display: 'flex', flexDirection: 'row', alignItems: 'center' }, children: [!hideFilters && (_jsxs(FilterContainerComponent, { children: [adminFilters.map((filter, index) => (_jsx(DashboardFilter, { filter: filter, onChangeFilter: updateFilter, theme: theme, SelectComponent: SelectComponent, MultiSelectComponent: MultiSelectComponent, DateRangePickerComponent: DateRangePickerComponent, isLoading: isDashboardFiltersLoading }, filter._id ?? index))), _jsxs("div", { style: {
+                filterSchema.columns.length === 0 && (_jsx("div", { style: { marginBottom: 10 }, children: _jsx(QuillErrorMessageComponent, { errorMessage: "Warning: No custom filter options because there are no common views among the charts in the dashboard" }) })), _jsxs("div", { style: { display: 'flex', flexDirection: 'row', alignItems: 'center' }, children: [!hideFilters && (_jsxs(FilterContainerComponent, { children: [(populatedDashboardFilters ?? []).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))), _jsxs("div", { style: {
                                     display: 'flex',
                                     flexDirection: 'column',
                                 }, children: [data && data.customFiltersEnabled && (_jsx(SecondaryButtonComponent, { onClick: () => {
@@ -576,14 +369,12 @@ export default function Dashboard({ name, hidden = false, SelectComponent = Quil
                                             }
                                         }, label: `Add Filter` })), _jsx(PopoverComponent, { isOpen: addFilterPopoverIsOpen, setIsOpen: setAddFilterPopoverIsOpen, popoverTitle: "Add Filter", popoverChildren: _jsx(FilterModal, { schema: filterSchema, fieldValuesMap: fieldValuesMap, onSubmitFilter: (filter) => {
                                                 setAddFilterPopoverIsOpen(false);
-                                                if (appliedFilters) {
-                                                    updateUserFilter(filter, appliedFilters.length);
-                                                }
-                                            }, onDeleteFilter: () => { }, ButtonComponent: ButtonComponent, SelectComponent: SelectComponent, MultiSelectComponent: MultiSelectComponent, TextInputComponent: TextInputComponent }), containerStyle: { position: 'relative', top: 10 } })] }), userFilters.length > 0 && (_jsx(ModalComponent, { triggerLabel: `Filters${userFilters.length > 0 ? ` (${userFilters.length})` : ''}`, isOpen: filterListIsOpen, setIsOpen: setFilterListIsOpen, title: "Filters", children: _jsxs("div", { style: {
+                                                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: [userFilters.map(({ filter, index }) => (_jsx(FilterPopoverWrapper, { schema: filterSchema, filter: {
+                                    }, children: [Object.values(userFilters).map((filter, index) => (_jsx(FilterPopoverWrapper, { schema: filterSchema, filter: {
                                                 filterType: filter.filterType,
                                                 fieldType: filter.fieldType,
                                                 field: filter.field,
@@ -591,31 +382,17 @@ export default function Dashboard({ name, hidden = false, SelectComponent = Quil
                                                 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 updatedFilter = getUserFilter(newFilter, filter._id, filter);
-                                                if (!appliedFilters) {
-                                                    return;
-                                                }
                                                 dashboardFiltersDispatch({
                                                     type: 'UPDATE_DASHBOARD_FILTER',
                                                     id: updatedFilter._id,
                                                     data: updateFilter,
                                                 });
-                                                setAppliedFilters([
-                                                    ...appliedFilters.slice(0, index),
-                                                    updatedFilter,
-                                                    ...appliedFilters.slice(index + 1),
-                                                ]);
                                             }, handleFilterDelete: () => {
-                                                if (!appliedFilters) {
-                                                    return;
-                                                }
-                                                dashboardFiltersDispatch({
-                                                    type: 'DELETE_DASHBOARD_FILTER',
-                                                    id: appliedFilters[index]._id,
+                                                setUserFilters((userFilters) => {
+                                                    const updatedFilters = { ...userFilters };
+                                                    delete updatedFilters[filter.field];
+                                                    return updatedFilters;
                                                 });
-                                                setAppliedFilters([
-                                                    ...appliedFilters.slice(0, index),
-                                                    ...appliedFilters.slice(index + 1),
-                                                ]);
                                             }, containerStyle: { width: 300, marginBottom: 10 } }, `userFilter_${index}_${filter ? filterSentence(filter) : ''}`))), _jsxs("div", { style: {
                                                 display: 'flex',
                                                 flexDirection: 'column',
@@ -626,10 +403,8 @@ export default function Dashboard({ name, hidden = false, SelectComponent = Quil
                                                     }, label: `Add Filter` }), _jsx(PopoverComponent, { isOpen: filterListAddFilterPopoverIsOpen, setIsOpen: setFilterListAddFilterPopoverIsOpen, popoverTitle: "Add Filter", popoverChildren: _jsx(FilterModal, { schema: filterSchema, fieldValuesMap: fieldValuesMap, onSubmitFilter: (filter) => {
                                                             setFilterListAddFilterPopoverIsOpen(false);
                                                             setFilterListIsOpen(false);
-                                                            const id = uniqueCounter;
-                                                            setUniqueCounter(uniqueCounter + 1);
-                                                            updateUserFilter(filter, id);
-                                                        }, onDeleteFilter: () => { }, ButtonComponent: ButtonComponent, SelectComponent: SelectComponent, MultiSelectComponent: MultiSelectComponent, TextInputComponent: TextInputComponent }), containerStyle: { position: 'relative', top: 10 } })] })] }) }))] })), templateDashboardName && (_jsx(QuillDashboardTemplate, { name: templateDashboardName, originDashboard: name, client: client, appliedFilters: appliedFilters, ModalComponent: ModalComponent, TemplateChartComponent: TemplateChartComponent, TemplateMetricComponent: TemplateMetricComponent, TemplateTableComponent: TemplateTableComponent, ButtonComponent: SecondaryButtonComponent }))] }), Object.keys(data.sections)
+                                                            updateUserFilter(filter);
+                                                        }, onDeleteFilter: () => { }, ButtonComponent: ButtonComponent, SelectComponent: SelectComponent, MultiSelectComponent: MultiSelectComponent, TextInputComponent: TextInputComponent }), containerStyle: { position: 'relative', top: 10 } })] })] }) }))] })), 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(function (a, b) {
                 return a.length - b.length;
             })
@@ -643,13 +418,19 @@ export default function Dashboard({ name, hidden = false, SelectComponent = Quil
                                         textAlign: 'left',
                                         marginTop: 12,
                                     }, children: section })] })), metrics(data.sections, section, sortByOrdering).length > 0 && (_jsx(DashboardSectionComponent, { section: "metrics", children: metrics(data.sections, section, sortByOrdering).map((item, index) => {
-                                return (_jsx(DataLoader, { item: item, filters: appliedFilters, children: ({ isLoading, error, data, }) => (_jsx(MetricComponent, { error: error, isLoading: isLoading, report: data, onClick: !isLoading && onClickReport
+                                return (_jsx(DataLoader, { item: item, filters: populatedDashboardFilters, additionalProcessing: {
+                                        page: DEFAULT_PAGINATION,
+                                        last: additionalProcessing?.last,
+                                    }, children: ({ isLoading, error, data, }) => (_jsx(MetricComponent, { error: error, isLoading: isLoading, report: data, onClick: !isLoading && onClickReport
                                             ? () => handleOnClickDashboardItem({
                                                 ...item,
                                                 ...data,
                                             })
-                                            : () => { }, hoverActions: hoverActions }, item.name + '' + index)) }, `${item._id}${index}`));
-                            }) })), charts(data.sections, section, sortByOrdering).length > 0 && (_jsx(DashboardSectionComponent, { section: "charts", children: charts(data.sections, section, sortByOrdering).map((item, index) => (_jsx(ChartDataLoader, { item: item, dateBucket: dateBucket, additionalProcessing: additionalProcessing, filters: appliedFilters, children: ({ isLoading, data, error, dateBucket, }) => (_jsx(ChartComponent, { report: data, error: error, onClick: () => {
+                                            : () => { }, hoverActions: hoverActions }, item.name + '' + index)) }, `metric${index}`));
+                            }) })), charts(data.sections, section, sortByOrdering).length > 0 && (_jsx(DashboardSectionComponent, { section: "charts", children: charts(data.sections, section, sortByOrdering).map((item, index) => (_jsx(ChartDataLoader, { item: item, dateBucket: dateBucket, additionalProcessing: {
+                                    page: pagination,
+                                    last: additionalProcessing?.last,
+                                }, filters: populatedDashboardFilters, children: ({ isLoading, data, error, dateBucket, }) => (_jsx(ChartComponent, { report: data, error: error, onClick: () => {
                                         if (!isLoading && onClickReport) {
                                             handleOnClickDashboardItem({
                                                 ...item,
@@ -661,7 +442,10 @@ export default function Dashboard({ name, hidden = false, SelectComponent = Quil
                                             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 })) }, item.name + '' + index)) }, `${item._id}${index}`))) })), tables(data.sections, section, sortByOrdering).length > 0 && (_jsx(DashboardSectionComponent, { section: "tables", children: tables(data.sections, section, sortByOrdering).map((item, index) => (_jsx(DataLoader, { item: item, filters: appliedFilters, children: ({ isLoading, error, onPageChange, onSortChange, data, rowCount, rowCountIsLoading, }) => (_jsx(TableComponent, { report: data, isLoading: isLoading, error: error, onClick: !isLoading && onClickReport
+                                            : undefined, scrollable: false, hideXAxis: hideXAxis, hideYAxis: hideYAxis, hideCartesianGrid: hideCartesianGrid, comparisonLineStyle: comparisonLineStyle, onClickChartElement: onClickChartElement })) }, item.name + '' + index)) }, `chart${index}`))) })), tables(data.sections, section, sortByOrdering).length > 0 && (_jsx(DashboardSectionComponent, { section: "tables", children: tables(data.sections, section, sortByOrdering).map((item, index) => (_jsx(DataLoader, { item: item, filters: populatedDashboardFilters, additionalProcessing: {
+                                    page: pagination,
+                                    last: additionalProcessing?.last,
+                                }, children: ({ isLoading, error, onPageChange, onSortChange, data, rowCount, rowCountIsLoading, }) => (_jsx(TableComponent, { report: data, isLoading: isLoading, error: error, onClick: !isLoading && onClickReport
                                         ? () => handleOnClickDashboardItem({
                                             ...item,
                                             ...data,
@@ -669,6 +453,6 @@ export default function Dashboard({ name, hidden = false, SelectComponent = Quil
                                         : undefined, hoverActions: hoverActions, rowCount: rowCount ??
                                         data?.rowCount ??
                                         data?.rows?.length ??
-                                        0, rowCountIsLoading: rowCountIsLoading, onPageChange: (page) => onPageChange(page), onSortChange: (sort) => onSortChange(sort) })) }, `${item._id}${index}`))) }))] }, section + '' + sectionIndex));
+                                        0, rowCountIsLoading: rowCountIsLoading, onPageChange: (page) => onPageChange(page), onSortChange: (sort) => onSortChange(sort) })) }, `${name}${index}`))) }))] }, section + '' + sectionIndex));
             })] }));
 }