@quillsql/react 2.12.36 → 2.12.37

package/dist/esm/Dashboard.js

@@ -1,660 +0,0 @@
-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?.rowCount : data?.rows.length, onPageChange: (page) => onPageChange(page), onSortChange: (sort) => onSortChange(sort) })) }, `${item._id}${index}`))) }))] }, section + '' + sectionIndex));
-            })] }));
-}