@quillsql/react 2.12.37 → 2.12.38

package/dist/esm/Dashboard.js

@@ -0,0 +1,660 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext, useEffect, useState, } from 'react';
+import { ChartDisplay } from './Chart';
+import { PRIMARY_RANGE, COMPARISON_RANGE, defaultOptionsV2, getRangeFromPresetOptions, } from './DateRangePicker/dateRangePickerUtils';
+import { ClientContext, DashboardContext, ThemeContext, DashboardFiltersContext, SchemaContext, } from './Context';
+import { useDashboard } from './hooks/useDashboard';
+import { hashCode } from './utils/crypto';
+import DashboardSectionContainer from './components/Dashboard/DashboardSectionContainer';
+import QuillMetricComponent from './components/Dashboard/MetricComponent';
+import QuillTableComponent from './components/Dashboard/TableComponent';
+import QuillChartComponent from './components/Dashboard/ChartComponent';
+import DashboardSection from './components/Dashboard/DashboardSection';
+import { styleToProps } from './utils/styles';
+import { QuillDateRangePicker } from './DateRangePicker/QuillDateRangePicker';
+import DataLoader, { ChartDataLoader, } from './components/Dashboard/DataLoader';
+import { QuillEmptyDashboardComponent, QuillFilterContainerComponent, QuillLoadingDashboardComponent, QuillUserFilterModalComponent, MemoizedButton, MemoizedSecondaryButton, QuillTextInput, MemoizedPopover, QuillErrorMessageComponent, } from './components/UiComponents';
+import { DashboardFilter } from './components/Dashboard/DashboardFilter';
+import { BoolOperator, FieldTypes, NullOperator, NumberOperator, StringOperator, } from './models/Filter';
+import { QuillMultiSelectComponentWithCombo } from './components/QuillMultiSelectWithCombo';
+import { QuillSelectComponentWithCombo } from './components/QuillSelectWithCombo';
+import { getSchemaInfoWithCustomFields } from './utils/schema';
+import { isTextColumnType } from './components/ReportBuilder/ast';
+import { convertColumnInfoToColumnInternal } from './utils/columnProcessing';
+import { getCountsByColumns, getUniqueValuesByColumns, } from './utils/tableProcessing';
+import { filterSentence, getType } from './utils/filterProcessing';
+import { QuillChartErrorWithAction } from './components/Chart/ChartError';
+import { FilterPopoverWrapper, QuillFilterPopover, } from './components/ReportBuilder/ui';
+import FilterModal from './components/ReportBuilder/FilterModal';
+const defaultChartContainerStyles = {
+    display: 'flex',
+    width: '100%',
+    minHeight: 300,
+    height: 300,
+};
+/**
+ * ### Quill Dashboard
+ *
+ * Dynamically displays a filterable grid of charts, metrics, and tables with
+ * live data from your database. Once implemented, Quill lets you perform
+ * zero-downtime, zero-code updates to your dashboard views on an org-level as
+ * well as company-wide.
+ *
+ * @example
+ * ```js
+ * // Usage without custom components
+ * <Dashboard />
+ * ```
+ *
+ * @example
+ * ```js
+ * // You can also pass your own components
+ * <Dashboard
+ *   name="saved_reports"
+ *   SelectComponent={MySelect}
+ *   onClickReport={(report) => navigate(`/detail/${report.id}`)}
+ *   MetricComponent={MyMetric}
+ *   ChartComponent={MyChart}
+ *   TableComponent={MyTable}
+ *   containerStyle={{ backgroundColor: 'white', padding: '10px' }}
+ * />
+ * ```
+ *
+ * ### API Reference
+ * @see https://docs.quillsql.com/components/dashboard
+ */
+export default function Dashboard({ name, hidden = false, SelectComponent = QuillSelectComponentWithCombo, MultiSelectComponent = QuillMultiSelectComponentWithCombo, UserFilterModalComponent = QuillUserFilterModalComponent, ButtonComponent = MemoizedButton, SecondaryButtonComponent = MemoizedSecondaryButton, FilterTagComponent = QuillFilterPopover, PopoverComponent = MemoizedPopover, TextInputComponent = QuillTextInput, EmptyDashboardComponent = QuillEmptyDashboardComponent, DateRangePickerComponent = QuillDateRangePicker, MetricComponent = QuillMetricComponent, ChartComponent = QuillChartComponent, TableComponent = QuillTableComponent, DashboardSectionComponent = DashboardSection, DashboardSectionContainerComponent = DashboardSectionContainer, FilterContainerComponent = QuillFilterContainerComponent, DashboardLoadingComponent = QuillLoadingDashboardComponent, ErrorComponent = QuillChartErrorWithAction, onClickReport, onChangeLoading, hideFilters, hideXAxis = false, hideYAxis = false, hideCartesianGrid = false, comparisonLineStyle = 'solid', containerStyle, className, chartContainerStyle = defaultChartContainerStyles, filters, onClickChartElement, dateBucket, additionalProcessing, hideAdminErrors = true, }) {
+    const [dashboard] = useContext(DashboardContext);
+    const { isLoading: isDataLoading, data, reload, } = useDashboard(name);
+    const [dashboardSections, setDashboardSections] = useState(null);
+    const [presetFilters, setPresetFilters] = useState(null);
+    const [client] = useContext(ClientContext);
+    const [isLoading, setIsLoading] = useState(isDataLoading);
+    const [theme] = useContext(ThemeContext);
+    const [initialLoad, setInitialLoad] = useState(true);
+    const [appliedFilters, setAppliedFilters] = useState([]);
+    const { dashboardFilters, dashboardFiltersDispatch } = useContext(DashboardFiltersContext);
+    const [schema, setSchema] = useContext(SchemaContext);
+    const [filterSchemaIsLoaded, setFilterSchemaIsLoaded] = useState(false);
+    const [filterSchema, setFilterSchema] = useState({ columns: [] }); // Schema to be passed into FilterModal
+    const [schemaLoading, setSchemaLoading] = useState(false);
+    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, setUserFilters] = useState([]);
+    const [adminFilters, setAdminFilters] = useState([]);
+    const customOperatorOptions = {
+        [FieldTypes.Numeric]: [
+            NumberOperator.EqualTo,
+            NumberOperator.NotEqualTo,
+            NumberOperator.GreaterThan,
+            NumberOperator.LessThan,
+            NumberOperator.GreaterThanOrEqualTo,
+            NumberOperator.LessThanOrEqualTo,
+            NullOperator.IsNotNull,
+            NullOperator.IsNull,
+        ],
+        [FieldTypes.String]: [
+            StringOperator.IsExactly,
+            StringOperator.IsNotExactly,
+            StringOperator.Contains,
+            StringOperator.Is,
+            StringOperator.IsNot,
+            NullOperator.IsNotNull,
+            NullOperator.IsNull,
+        ],
+        [FieldTypes.Boolean]: [
+            BoolOperator.EqualTo,
+            BoolOperator.NotEqualTo,
+            NullOperator.IsNotNull,
+            NullOperator.IsNull,
+        ],
+    };
+    const getSchema = async () => {
+        const { schemaData } = await getSchemaInfoWithCustomFields(client);
+        setSchema(schemaData);
+        setSchemaLoading(false);
+    };
+    useEffect(() => {
+        if (client && !schemaLoading) {
+            setSchemaLoading(true);
+            getSchema();
+        }
+    }, [client.publicKey]);
+    useEffect(() => {
+        setIsLoading(isDataLoading);
+    }, [isDataLoading]);
+    useEffect(() => {
+        if (!data)
+            return;
+        onDashboardDataChange(data, schema);
+    }, [data, filters, schema]);
+    useEffect(() => {
+        setIsLoading(true);
+        reload(name);
+    }, [name, client]);
+    // Go through all columns in the referenced tables and get the unique values to use in fieldValuesMap
+    useEffect(() => {
+        const fetchData = async () => {
+            setFieldValuesIsLoaded(false);
+            const newFieldValues = {};
+            await Promise.all(referencedTables.map(async (table) => {
+                const tableInfo = schema.find((tableInfo) => tableInfo.name === table);
+                if (tableInfo) {
+                    const uniqueValues = await getUniqueStringValues(tableInfo.columns, table);
+                    if (uniqueValues) {
+                        newFieldValues[table] = {};
+                        Object.keys(uniqueValues).forEach((field) => {
+                            newFieldValues[table][field] = Object.keys(uniqueValues[field] ?? []);
+                        });
+                    }
+                }
+            }));
+            setFieldValuesMap(newFieldValues);
+            setFieldValuesIsLoaded(true);
+        };
+        fetchData();
+    }, [referencedTables]);
+    useEffect(() => {
+        setUserFilters([...appliedFilters.filter((filter) => filter.isUserFilter)]);
+        setAdminFilters([
+            ...appliedFilters.filter((filter) => !filter.isUserFilter),
+        ]);
+    }, [appliedFilters]);
+    const getUniqueStringValues = async (columns, tableName) => {
+        const convertedStringColumns = columns
+            .filter((column) => {
+            return isTextColumnType(column.fieldType);
+        })
+            .map((column) => convertColumnInfoToColumnInternal(column));
+        const stringNames = convertedStringColumns.map((column) => column.field);
+        const smallStringColumns = await getCountsByColumns(convertedStringColumns, `Select ${stringNames.join(', ')} from ${tableName}`, client, []);
+        const smallStringNames = smallStringColumns.map((column) => column.field);
+        const newUniqueValues = await getUniqueValuesByColumns(smallStringColumns, `Select ${smallStringNames.join(', ')} from ${tableName}`, [], client, []);
+        return newUniqueValues;
+    };
+    // Get the relevant information from the dashboard and schema to pass to FilterModal
+    const updateFilterSchema = (sections, schema) => {
+        if (!sections || !schema || schema.length === 0) {
+            return;
+        }
+        setFilterSchemaIsLoaded(false);
+        // 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);
+        }, []);
+        if (tables && tables.length > 0) {
+            let intersection = new Set(tables[0]);
+            for (let i = 1; i < tables.length; ++i) {
+                const currentSet = new Set(tables[i]);
+                intersection = new Set(Array.from(intersection).filter((value) => currentSet.has(value)));
+            }
+            const tablesList = Array.from(intersection);
+            setReferencedTables(tablesList);
+            // get all columns from the intersected tables
+            const columns = tablesList
+                .map((table) => {
+                return (schema
+                    .find((t) => {
+                    return t.displayName === table || t.name === table;
+                })
+                    ?.columns.filter((col) => getType(col.fieldType) !== 'date')
+                    ?.map((col) => {
+                    return { ...col, table: table };
+                }) ?? []);
+            })
+                .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 = [];
+        // Add date_range filter to 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);
+            const key = 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,
+                },
+                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) => {
+                filterArray.push(processFilter(filter));
+            });
+        }
+        // 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 (hashCode(JSON.stringify(dashboardSpecificFilters)) !==
+            hashCode(JSON.stringify(filterArray))) {
+            dashboardFiltersDispatch({
+                type: 'CLEAR_AND_ADD_DASHBOARD_FILTERS',
+                data: filterArray,
+                dashboardName: name,
+            });
+        }
+        if (hashCode(JSON.stringify(appliedFilters)) !==
+            hashCode(JSON.stringify(filterArray))) {
+            setAppliedFilters(filterArray);
+        }
+        setIsLoading(false);
+        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);
+        }
+        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,
+            };
+        }
+    };
+    const updateFilter = (filter, value = null, comparison = null) => {
+        //for dateObjects only, since values are arrays for dateObjects
+        const { ...filterWithoutSelectedValue } = filter; // _ is a throwaway variable
+        if (filter.filterType === 'string') {
+            let selectedValue = {};
+            if (value || value === '') {
+                if (filter.stringFilterType === 'multiselect') {
+                    if (value.length === 0) {
+                        selectedValue = { values: [] };
+                    }
+                    else {
+                        selectedValue = { values: value, operator: 'IN' };
+                    }
+                }
+                else {
+                    selectedValue = { selectedValue: value };
+                }
+            }
+            const newFilter = {
+                ...filterWithoutSelectedValue,
+                ...selectedValue,
+                dashboardName: name,
+            };
+            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),
+                ]);
+            }
+            return;
+        }
+        if (filter.filterType === 'date' || filter.filterType === 'date_range') {
+            if (comparison ||
+                (filter.comparison && filter.comparisonRange.value !== 'NO_COMPARISON')) {
+                let preset = '';
+                if (comparison) {
+                    preset = filter.preset.label;
+                }
+                const key = comparison?.value || filter.comparisonRange.value;
+                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);
+                }
+                const newFilter = {
+                    startDate: primaryRange.start,
+                    endDate: primaryRange.end,
+                    filterType: 'date_range',
+                    label: 'Date',
+                    field: 'date_range',
+                    preset: { label: preset },
+                    options: filter.options,
+                    comparison: true,
+                    comparisonRange: {
+                        startDate: COMPARISON_RANGE[key](primaryRange)?.start,
+                        endDate: COMPARISON_RANGE[key](primaryRange)?.end,
+                        value: key,
+                    },
+                    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),
+                    ]);
+                }
+            }
+            else {
+                const primaryRange = value && value.preset
+                    ? getRangeFromPresetOptions(value.preset, presetFilters)
+                    : {
+                        start: value?.startDate || filter.startDate,
+                        end: value?.endDate || filter.endDate,
+                    };
+                const preset = value?.preset ? value.preset : '';
+                const newFilter = {
+                    ...filter,
+                    preset: { label: preset },
+                    startDate: primaryRange.start,
+                    endDate: primaryRange.end,
+                    filterType: 'date_range',
+                    field: 'date_range',
+                    options: filter.options,
+                    label: 'Date',
+                    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),
+                    ]);
+                }
+            }
+        }
+    };
+    // 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,
+            name: filter.name,
+            type: filter.type,
+            value: filter.value,
+            operator: filter.operator,
+            dashboardName: name,
+            isUserFilter: true,
+        };
+        return userFilter;
+    };
+    // new update filter function for user added filters
+    const updateUserFilter = (filter, id) => {
+        const newFilter = getUserFilter(filter, id);
+        dashboardFiltersDispatch({
+            type: 'ADD_DASHBOARD_FILTER',
+            data: newFilter,
+        });
+        setAppliedFilters([...appliedFilters, newFilter]);
+    };
+    useEffect(() => {
+        if (dashboardSections && dashboard) {
+            const totalNumberOfItems = Object.values(dashboardSections).reduce((count, arr) => count + arr.length, 0);
+            const itemsLoaded = Object.keys(dashboard).length;
+            if (totalNumberOfItems === itemsLoaded && isLoading) {
+                setIsLoading(false);
+            }
+        }
+    }, [dashboard, dashboardSections, isLoading]);
+    useEffect(() => {
+        if (onChangeLoading) {
+            onChangeLoading(initialLoad || 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;
+    };
+    const metrics = (section) => dashboardSections[section]
+        .filter(({ chartType }) => chartType === 'metric')
+        .sort(sortByOrdering);
+    const charts = (section) => dashboardSections[section]
+        .filter(({ chartType }) => !['metric', 'table'].includes(chartType))
+        .sort(sortByOrdering);
+    const tables = (section) => dashboardSections[section]
+        .filter(({ chartType }) => chartType === 'table')
+        .sort(sortByOrdering);
+    if (hidden || isLoading) {
+        return (_jsx(DashboardLoadingComponent, { containerStyle: containerStyle, chartContainerStyle: chartContainerStyle }));
+    }
+    if (!dashboardSections || Object.keys(dashboardSections).length == 0) {
+        if (initialLoad || isLoading)
+            return null;
+        return _jsx(EmptyDashboardComponent, {});
+    }
+    return (_jsxs("div", { className: className, ...styleToProps(containerStyle), children: [filterSchemaIsLoaded &&
+                !hideAdminErrors &&
+                !hideFilters &&
+                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" }) })), !hideFilters && (_jsxs(FilterContainerComponent, { children: [adminFilters.map((filter, index) => (_jsx(DashboardFilter, { filter: filter, onChangeFilter: updateFilter, theme: theme, SelectComponent: SelectComponent, MultiSelectComponent: MultiSelectComponent, DateRangePickerComponent: DateRangePickerComponent }, index))), _jsxs("div", { style: {
+                            display: 'flex',
+                            flexDirection: 'column',
+                        }, children: [data && data.customFiltersEnabled && (_jsx(SecondaryButtonComponent, { onClick: () => {
+                                    if (fieldValuesIsLoaded) {
+                                        setAddFilterPopoverIsOpen(true);
+                                        setFilterListIsOpen(false);
+                                    }
+                                }, label: `Add Filter` })), _jsx(PopoverComponent, { isOpen: addFilterPopoverIsOpen, setIsOpen: setAddFilterPopoverIsOpen, popoverTitle: "Add Filter", popoverChildren: _jsx(FilterModal, { schema: filterSchema, fieldValuesMap: fieldValuesMap, onSubmitFilter: (filter) => {
+                                        setAddFilterPopoverIsOpen(false);
+                                        updateUserFilter(filter, appliedFilters.length);
+                                    }, onDeleteFilter: () => { }, ButtonComponent: ButtonComponent, SelectComponent: SelectComponent, MultiSelectComponent: MultiSelectComponent, TextInputComponent: TextInputComponent }), containerStyle: { position: 'relative', top: 10 } })] }), userFilters.length > 0 && (_jsx(UserFilterModalComponent, { triggerLabel: `Filters${userFilters.length > 0 ? ` (${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: {
+                                        name: filter.name,
+                                        type: filter.type,
+                                        field: filter.field,
+                                        operator: filter.operator,
+                                        value: filter.value,
+                                    }, filterLabel: filter ? filterSentence(filter) : '', index: index, fieldValuesMap: fieldValuesMap, customOperatorOptions: customOperatorOptions, FilterTagComponent: FilterTagComponent, FilterModal: FilterModal, ButtonComponent: ButtonComponent, SecondaryButtonComponent: SecondaryButtonComponent, SelectComponent: SelectComponent, TextInputComponent: TextInputComponent, MultiSelectComponent: MultiSelectComponent, handleFilterSave: (newFilter) => {
+                                        const updatedFilter = getUserFilter(newFilter, filter._id, filter);
+                                        const updateIndex = appliedFilters.findIndex((val) => {
+                                            return val._id === filter._id;
+                                        });
+                                        dashboardFiltersDispatch({
+                                            type: 'UPDATE_DASHBOARD_FILTER',
+                                            id: updatedFilter._id,
+                                            data: updateFilter,
+                                        });
+                                        setAppliedFilters([
+                                            ...appliedFilters.slice(0, updateIndex),
+                                            updatedFilter,
+                                            ...appliedFilters.slice(updateIndex + 1),
+                                        ]);
+                                    }, handleFilterDelete: () => {
+                                        const deleteIndex = appliedFilters.findIndex((val) => {
+                                            return val._id === filter._id;
+                                        });
+                                        dashboardFiltersDispatch({
+                                            type: 'DELETE_DASHBOARD_FILTER',
+                                            id: appliedFilters[deleteIndex]._id,
+                                        });
+                                        setAppliedFilters([
+                                            ...appliedFilters.slice(0, deleteIndex),
+                                            ...appliedFilters.slice(deleteIndex + 1),
+                                        ]);
+                                    }, containerStyle: { width: 300, marginBottom: 10 } }, `userFilter_${index}`))), _jsxs("div", { style: {
+                                        display: 'flex',
+                                        flexDirection: 'column',
+                                    }, children: [_jsx(SecondaryButtonComponent, { onClick: () => {
+                                                if (fieldValuesIsLoaded) {
+                                                    setFilterListAddFilterPopoverIsOpen(true);
+                                                }
+                                            }, 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 } })] })] }) }))] })), Object.keys(dashboardSections)
+                .sort(function (a, b) {
+                return a.length - b.length;
+            })
+                .map((section, sectionIndex) => {
+                return (_jsxs(DashboardSectionContainerComponent, { children: [section && (_jsxs("div", { style: { display: 'flex', flexDirection: 'column' }, children: [_jsx("div", { style: { height: sectionIndex > 0 ? 25 : 0 } }), _jsx("h1", { style: {
+                                        fontSize: 22,
+                                        color: theme.primaryTextColor,
+                                        fontFamily: theme.fontFamily,
+                                        fontWeight: 'bold',
+                                        marginBottom: 16,
+                                        textAlign: 'left',
+                                        marginTop: 12,
+                                    }, children: section })] })), metrics(section).length > 0 && (_jsx(DashboardSectionComponent, { section: "metrics", children: metrics(section).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
+                                            ? () => handleOnClickDashboardItem({
+                                                ...item,
+                                                ...data,
+                                            })
+                                            : () => { } }, item.name + '' + index)) }, `${item._id}${index}`));
+                            }) })), charts(section).length > 0 && (_jsx(DashboardSectionComponent, { section: "charts", children: charts(section).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: () => {
+                                        if (!isLoading && onClickReport) {
+                                            handleOnClickDashboardItem({
+                                                ...item,
+                                                ...data,
+                                            });
+                                        }
+                                    }, onClickChartElement: onClickChartElement, isLoading: isLoading, dateBucket: dateBucket, children: error ? (_jsx(ErrorComponent, { label: error })) : (_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(section).length > 0 && (_jsx(DashboardSectionComponent, { section: "tables", children: tables(section).map((item, index) => (_jsx(DataLoader, { item: item, filters: appliedFilters, children: ({ isLoading, error, onPageChange, onSortChange, data, }) => (_jsx(TableComponent, { report: data, isLoading: isLoading, error: error, onClick: !isLoading && onClickReport
+                                        ? () => handleOnClickDashboardItem({
+                                            ...item,
+                                            ...data,
+                                        })
+                                        : undefined, rowCount: data?.rowCount ?? data?.rows?.length ?? 0, onPageChange: (page) => onPageChange(page), onSortChange: (sort) => onSortChange(sort) })) }, `${item._id}${index}`))) }))] }, section + '' + sectionIndex));
+            })] }));
+}