@quillsql/react 2.10.4 → 2.10.6

package/dist/esm/Dashboard.js

@@ -1,15 +1,19 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// @ts-nocheck
-/* eslint-disable @typescript-eslint/ban-ts-comment */
-import React, { useContext, useEffect, useState, useRef, useCallback, } from 'react';
+import { useContext, useEffect, useState, useRef, useCallback, memo, } from 'react';
 import Chart from './Chart';
 import { capitalize, defaultOptions, getWeekdays, getRangeFromPreset, PRIMARY_RANGE, COMPARISON_RANGE, PRIMARY_CODES, } from './DateRangePicker/dateRangePickerUtils';
 import { ClientContext, DashboardContext, ThemeContext, DashboardFiltersContext, DateFilterContext, useComparisonRange, useDateFilter, } from './Context';
 import { addDays, eachDayOfInterval, endOfMonth, format, isAfter, isBefore, isEqual, isSaturday, isSunday, nextSaturday, previousSunday, startOfMonth, startOfToday, startOfWeek, startOfYear, sub, subDays, } from 'date-fns';
 import { ArrowDownHeadIcon, ArrowLeftHeadIcon, ArrowRightHeadIcon, CalendarNormalIcon, } from './assets';
-import { useOnClickOutside, } from './hooks';
+import { useOnClickOutside } from './hooks';
 import { enUS } from 'date-fns/locale';
 import { useDashboard } from './hooks/useDashboard';
+import { hashCode } from './utils/crypto';
+import DashboardSection from './components/Dashboard/DashboardSection';
+import DashboardItem from './components/Dashboard/DashboardItem';
+import DashboardGroup from './components/Dashboard/DashboardGroup';
+import { styleToProps } from './utils/styles';
+import { cleanDashboardItem } from './utils/dashboard';
 export const COMPARISON_OPTIONS = [
     {
         value: 'PREV_PERIOD',
@@ -69,7 +73,9 @@ export function DashboardFilter({ filter, onChangeFilter, SelectComponent, DateR
             setFilterValue(filter.selectedValue);
         }
         if (filter.filterType == 'date_range') {
-            setDateFilter(FILTER_CODE_MAP[filter.selectedValue ? filter.selectedValue[2] : null]);
+            setDateFilter(filter.selectedValue
+                ? FILTER_CODE_MAP[filter.selectedValue[2]]
+                : null);
             if (filter?.comparisonRange?.value) {
                 const newComparisonRange = COMPARISON_OPTIONS.find((option) => {
                     return option.value === filter.comparisonRange.value;
@@ -218,7 +224,7 @@ const QuillDropdownComponent = ({ onChange, value, label, options, }) => {
 const isBetween = (date, startDate, endDate) => {
     return isAfter(date, startDate) && isBefore(date, endDate);
 };
-function Calendar({ anchorDate, selectedDateRange, onClickDate, theme, localStartDate, localEndDate, }) {
+function Calendar({ anchorDate, onClickDate, theme, localStartDate, localEndDate, }) {
     const firstDayOfDisplayedMonth = startOfMonth(anchorDate);
     const lastDayOfDisplayedMonth = endOfMonth(anchorDate);
     const weekdays = getWeekdays(enUS).map((dayName) => capitalize(dayName, enUS));
@@ -331,17 +337,9 @@ function CalendarDropdown({ onChangeDateRange, dateRange }) {
     const [showModal, setShowModal] = useState(false);
     const modalRef = useRef(null);
     const parentRef = useRef(null);
-    const handleOnChange = useCallback((event) => {
-        onChangeDateRange(event.target.value);
-    }, [onChangeDateRange]);
     const [anchorDate, setAnchorDate] = useState(null);
     const [localStartDate, setLocalStartDate] = useState(null);
     const [localEndDate, setLocalEndDate] = useState(null);
-    // const firstDayOfFirstMonth = startOfMonth(value[0]);
-    // const lastDayOfLastMonth = endOfMonth(value[1]);
-    // const weekdays = getWeekdays(enUS).map(dayName =>
-    //   capitalize(dayName, locale)
-    // );
     const prevMonthAnchor = subDays(startOfMonth(anchorDate), 1);
     const onClickDate = (date) => {
         if (localStartDate && isBefore(date, localStartDate)) {
@@ -523,10 +521,10 @@ export const QuillDateRangePicker = ({ label, dateRange, onChangeDateRange, pres
                 }, children: [_jsx(MemoizedCalendarDropdown, { dateRange: dateRange, onChangeDateRange: onChangeDateRange, theme: theme }), _jsx(MemoizedDropdown, { options: presetOptions.map((option) => ({
                             label: option.text,
                             value: option.value,
-                        })), onChange: onChangePreset, value: preset })] })] }));
+                        })), onChange: onChangePreset, value: preset, label: preset })] })] }));
 };
-const MemoizedCalendarDropdown = React.memo(CalendarDropdown);
-const MemoizedDropdown = React.memo(QuillDropdownComponent);
+const MemoizedCalendarDropdown = memo(CalendarDropdown);
+const MemoizedDropdown = memo(QuillDropdownComponent);
 const areEqual = (prevProps, nextProps) => {
     // This function returns true if passing nextProps to render would return
     // the same result as passing prevProps to render, otherwise it returns false
@@ -535,19 +533,21 @@ const areEqual = (prevProps, nextProps) => {
         prevProps.dateRange[0] === nextProps.dateRange[0] &&
         prevProps.dateRange[1] === nextProps.dateRange[1]);
 };
-const MemoizedDateRangePicker = React.memo(QuillDateRangePicker, areEqual);
+const MemoizedDateRangePicker = memo(QuillDateRangePicker, areEqual);
 const QuillEmptyDashboardComponent = () => _jsx("div", {});
-function removeQuotes(str) {
-    if (str.startsWith('"') && str.endsWith('"')) {
-        return str.slice(1, -1);
-    }
-    else {
-        return str;
-    }
-}
-export default function Dashboard({ name, containerStyle, chartContainerStyle, metricContainerStyle, maxColumnWidth, rowHeight, onClickDashboardItem, hideFilters, dateRangeFilterDisabled = false, FilterDropdownComponent, EmptyDashboardComponent = QuillEmptyDashboardComponent, DateRangePickerComponent, FilterButtonComponent, FilterModalComponent, onChangeLoading, DashboardItemComponent, }) {
+const defaultChartContainerStyles = {
+    display: 'flex',
+    width: '100%',
+    minHeight: 300,
+    height: 300,
+};
+/**
+ * Quill Dashboard.
+ */
+export default function Dashboard({ name, containerStyle, chartContainerStyle = defaultChartContainerStyles, metricContainerStyle, maxColumnWidth, rowHeight, onClickDashboardItem, hideFilters, dateRangeFilterDisabled = false, SelectComponent, EmptyDashboardComponent = QuillEmptyDashboardComponent, DateRangePickerComponent, FilterButtonComponent, FilterModalComponent, onChangeLoading, DashboardItemComponent = DashboardItem, DashboardSectionComponent = DashboardSection, DashboardGroupComponent = DashboardGroup, hideXAxis = false, hideYAxis = false, hideCartesianGrid = false, }) {
     const { dateFilter } = useDateFilter();
-    const { isLoading: isDataLoading, data, reload } = useDashboard(name);
+    const { dispatch } = useContext(DashboardContext);
+    const { isLoading: isDataLoading, data, reload, } = useDashboard(name);
     const [dashboardSections, setDashboardSections] = useState(null);
     const { dashboard } = useContext(DashboardContext);
     const [client] = useContext(ClientContext);
@@ -566,12 +566,6 @@ export default function Dashboard({ name, containerStyle, chartContainerStyle, m
     useEffect(() => {
         reload();
     }, [name, client]);
-    function hashCode(s) {
-        return s.split('').reduce(function (a, b) {
-            a = (a << 5) - a + b.charCodeAt(0);
-            return a & a;
-        }, 0);
-    }
     const onDashboardDataChange = (resp) => {
         setDashboardSections(resp.sections);
         const bigFilterObj = {};
@@ -632,12 +626,18 @@ export default function Dashboard({ name, containerStyle, chartContainerStyle, m
         }
     };
     const handleOnClickDashboardItem = (elem) => {
-        if (dashboard[elem._id]._id && onClickDashboardItem) {
+        if (dashboard[elem._id]?._id && onClickDashboardItem) {
             onClickDashboardItem(dashboard[elem._id]);
         }
         else if (onClickDashboardItem) {
+            dispatch({
+                type: 'UPDATE_DASHBOARD_ITEM',
+                id: elem._id,
+                data: { ...elem, filtersApplied: dashboardFilters },
+            });
             onClickDashboardItem({
                 ...dashboard[elem._id],
+                _id: elem._id,
                 error_id: elem._id,
                 name: elem.name,
                 query: elem.queryString,
@@ -656,6 +656,14 @@ export default function Dashboard({ name, containerStyle, chartContainerStyle, m
             },
         });
     };
+    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 { selectedValue: _, ...filterWithoutSelectedValue } = filter; // _ is a throwaway variable
@@ -743,7 +751,8 @@ export default function Dashboard({ name, containerStyle, chartContainerStyle, m
                         options: options,
                         comparison: true,
                         comparisonRange: {
-                            startDate: COMPARISON_RANGE[key](primaryRange)?.start,
+                            startDate: COMPARISON_RANGE[key](primaryRange)
+                                ?.start,
                             endDate: COMPARISON_RANGE[key](primaryRange)?.end,
                             value: key,
                         },
@@ -786,10 +795,28 @@ export default function Dashboard({ name, containerStyle, chartContainerStyle, m
         return null;
     if (!dashboardSections || Object.keys(dashboardSections).length == 0)
         return _jsx(EmptyDashboardComponent, {});
+    const sortByOrdering = (a, b) => {
+        if (a.order === undefined && b.order === undefined)
+            return 0; // both items don't have the 'order' field
+        if (a.order === undefined)
+            return 1; // only 'a' doesn't have the 'order' field, place 'a' last
+        if (b.order === undefined)
+            return -1; // only 'b' doesn't have the 'order' field, place 'b' last
+        return a.order - b.order; // both items have the 'order' field, sort numerically
+    };
     const sortedFilters = Object.values(dashboardFilters)
         .sort((filter) => (filter.filterType === 'date_range' ? -1 : 1))
         .filter((f) => !dateRangeFilterDisabled || f.filterType !== 'date_range');
-    return (_jsxs("div", { style: containerStyle, children: [!hideFilters && sortedFilters.length > 0 && (_jsx("div", { style: {
+    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);
+    return (_jsxs("div", { ...styleToProps(containerStyle), children: [!hideFilters && (_jsx("div", { style: {
                     display: 'flex',
                     boxSizing: 'content-box',
                     flexDirection: 'row',
@@ -801,363 +828,49 @@ export default function Dashboard({ name, containerStyle, chartContainerStyle, m
                         flexDirection: 'row',
                         alignItems: 'center',
                         gap: 12,
-                    }, children: sortedFilters.map((filter, index) => (_jsx(DashboardFilter, { filter: filter, onChangeFilter: updateFilter, theme: theme, filterValue: dashboardFilters, SelectComponent: FilterDropdownComponent
-                            ? FilterDropdownComponent
-                            : MemoizedDropdown, DateRangePickerComponent: DateRangePickerComponent
+                    }, children: sortedFilters.map((filter, index) => (_jsx(DashboardFilter, { filter: filter, onChangeFilter: updateFilter, theme: theme, filterValue: dashboardFilters, SelectComponent: SelectComponent ? SelectComponent : MemoizedDropdown, DateRangePickerComponent: DateRangePickerComponent
                             ? DateRangePickerComponent
                             : MemoizedDateRangePicker }, index))) }) })), Object.keys(dashboardSections)
                 .sort(function (a, b) {
                 return a.length - b.length;
             })
                 .map((section, sectionIndex) => {
-                return (_jsxs("div", { style: {
-                        width: '100%',
-                    }, children: [_jsxs("div", { style: { display: 'flex', flexDirection: 'column' }, children: [_jsx("div", { style: { height: sectionIndex > 0 ? 25 : 0 } }), section && (_jsx("h1", { style: {
+                return (_jsxs(DashboardSectionComponent, { 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',
-                                        // fontWeight: theme.headerFontWeight,
                                         marginBottom: 16,
-                                        // marginLeft: 25,
                                         textAlign: 'left',
                                         marginTop: 12,
-                                    }, children: section }))] }), dashboardSections[section].filter((elem) => elem.chartType === 'metric').length ? (_jsx("div", { style: {
-                                boxSizing: 'content-box',
-                                width: `100%`,
-                                listStyleType: 'none',
-                                marginBottom: 50,
-                                display: 'grid',
-                                gridGap: 25,
-                                gridTemplateColumns: `repeat(auto-fill,minmax(${maxColumnWidth || 400}px, 1fr))`,
-                                gridTemplateRows: `repeat(${170}px)`,
-                            }, children: dashboardSections[section]
-                                .filter((elem) => elem.chartType === 'metric')
-                                .sort((a, b) => {
-                                if (a.order === undefined && b.order === undefined)
-                                    return 0; // both items don't have the 'order' field
-                                if (a.order === undefined)
-                                    return 1; // only 'a' doesn't have the 'order' field, place 'a' last
-                                if (b.order === undefined)
-                                    return -1; // only 'b' doesn't have the 'order' field, place 'b' last
-                                return a.order - b.order; // both items have the 'order' field, sort numerically
-                            })
-                                .map((elem, index) => {
-                                if (DashboardItemComponent) {
-                                    return (_jsx("div", { onClick: onClickDashboardItem
-                                            ? () => handleOnClickDashboardItem(elem)
-                                            : void null, children: _jsx(DashboardItemComponent, { dashboardItem: elem, children: _jsx("div", { style: {
-                                                    padding: 0,
-                                                    // height: '100%',
-                                                    boxSizing: 'content-box',
-                                                }, children: _jsx(Chart, { containerStyle: {
-                                                        display: 'flex',
-                                                        width: '100%',
-                                                        // height: '100%',
-                                                    }, chartId: elem._id, dateRangeFilterDisabled: dateRangeFilterDisabled, colors: theme.chartColors?.length
-                                                        ? theme.chartColors
-                                                        : undefined }) }) }) }, elem.name + '' + index));
-                                }
-                                return (_jsx("div", { onClick: onClickDashboardItem
-                                        ? () => handleOnClickDashboardItem(elem)
-                                        : undefined, style: {
-                                        // background: theme.elevatedCardColor,
-                                        // borderRadius: theme.borderRadius,
-                                        // boxShadow: theme.boxShadow,
-                                        paddingTop: 12,
-                                        boxSizing: 'content-box',
-                                        borderRadius: 8,
-                                        height: '100%',
-                                        cursor: 'pointer',
-                                        width: '100%',
-                                        ...metricContainerStyle,
-                                    }, children: _jsx("div", { 
-                                        // className="group-hover:bg-black"
-                                        style: {
-                                            width: '100%',
-                                            boxSizing: 'content-box',
-                                            height: '100%',
-                                        }, children: _jsx("div", { style: {
-                                                width: '100%',
-                                                boxSizing: 'content-box',
-                                                height: '100%',
-                                            }, children: _jsxs("div", { style: {
-                                                    display: 'flex',
-                                                    flexDirection: 'column',
-                                                    justifyContent: 'space-between',
-                                                    boxSizing: 'content-box',
-                                                }, children: [_jsxs("div", { 
-                                                        // className="group-hover:bg-black"
-                                                        style: {
-                                                            display: 'flex',
-                                                            flexDirection: 'row',
-                                                            justifyContent: 'space-between',
-                                                            boxSizing: 'content-box',
-                                                            // alignItems: 'center',
-                                                            // paddingLeft: theme.padding,
-                                                            // paddingRight: 25,
-                                                            // paddingTop: theme.padding,
-                                                        }, children: [_jsx("div", { title: elem.name, style: {
-                                                                    fontFamily: theme.fontFamily,
-                                                                    color: theme.primaryTextColor,
-                                                                    boxSizing: 'content-box',
-                                                                    // TODO: FIX SIZE
-                                                                    fontSize: 18,
-                                                                    // TODO: FIX WEIGHT
-                                                                    fontWeight: '500',
-                                                                    // fontSize: theme.headerFontSize,
-                                                                    // color: theme.fontColor,
-                                                                    // fontWeight: theme.headerFontWeight,
-                                                                    textOverflow: 'ellipsis',
-                                                                    // margin: 0,
-                                                                    padding: 0,
-                                                                    whiteSpace: 'nowrap',
-                                                                    display: 'block',
-                                                                    maxWidth: '100%',
-                                                                    overflow: 'hidden',
-                                                                }, children: elem.name }), onClickDashboardItem ? (_jsx("div", { 
-                                                                // className="hover:bg-black"
-                                                                style: {
-                                                                    fontFamily: theme.fontFamily,
-                                                                    boxSizing: 'content-box',
-                                                                    color: theme.primaryTextColor,
-                                                                    fontWeight: '500',
-                                                                    fontSize: 14,
-                                                                    minWidth: 14 * 7,
-                                                                    // background: 'red',
-                                                                    display: 'flex',
-                                                                    alignItems: 'center',
-                                                                    justifyContent: 'flex-end',
-                                                                }, children: 'view report →' })) : null] }), _jsx("div", { style: { padding: 0, paddingTop: 10 }, children: _jsx(Chart, { containerStyle: {
-                                                            // display: 'flex',
-                                                            // width: '100%',
-                                                            // height: 30,
-                                                            // marginBottom: 50,
-                                                            // marginTop: 50,
-                                                            }, 
-                                                            //   chartFilters={elem.chartFilters}
-                                                            dateRangeFilterDisabled: dateRangeFilterDisabled, chartId: elem._id }) })] }) }) }) }, elem.name + '' + index));
-                            }) })) : null, dashboardSections[section].filter((elem) => elem.chartType !== 'table' && elem.chartType !== 'metric').length ? (_jsx("div", { style: {
-                                listStyleType: 'none',
-                                display: 'grid',
-                                gridGap: 25,
-                                boxSizing: 'content-box',
-                                gridTemplateColumns: `repeat(auto-fill,minmax(${maxColumnWidth || 400}px, 1fr))`,
-                                gridTemplateRows: `repeat(auto-fill, ${rowHeight || 400}px)`,
-                            }, children: dashboardSections[section]
-                                .filter((elem) => elem.chartType !== 'metric' &&
-                                elem.chartType !== 'table')
-                                .sort((a, b) => {
-                                if (a.order === undefined && b.order === undefined)
-                                    return 0; // both items don't have the 'order' field
-                                if (a.order === undefined)
-                                    return 1; // only 'a' doesn't have the 'order' field, place 'a' last
-                                if (b.order === undefined)
-                                    return -1; // only 'b' doesn't have the 'order' field, place 'b' last
-                                return a.order - b.order; // both items have the 'order' field, sort numerically
-                            })
-                                .map((elem, index) => {
-                                if (DashboardItemComponent) {
-                                    return (_jsx("div", { onClick: onClickDashboardItem
-                                            ? () => handleOnClickDashboardItem(elem)
-                                            : undefined, style: { height: rowHeight || 400 }, children: _jsx(DashboardItemComponent, { dashboardItem: elem, children: _jsx(Chart, { containerStyle: {
-                                                    display: 'flex',
-                                                    width: '100%',
-                                                    // height: '100%',
-                                                    minHeight: 300,
-                                                    height: 300,
-                                                    // background: 'red',
-                                                }, dateRangeFilterDisabled: dateRangeFilterDisabled, chartId: elem._id, colors: theme.chartColors?.length
-                                                    ? theme.chartColors
-                                                    : undefined }) }) }, elem.name + '' + index));
-                                }
-                                return (_jsx("div", { onClick: onClickDashboardItem
-                                        ? () => handleOnClickDashboardItem(elem)
-                                        : undefined, style: {
-                                        height: '100%',
-                                        cursor: 'pointer',
-                                        boxSizing: 'content-box',
-                                        paddingRight: 25,
-                                        minHeight: rowHeight || 400,
-                                        borderRadius: 8,
-                                        paddingTop: 20,
-                                        ...chartContainerStyle,
-                                    }, children: _jsx("div", { style: {
+                                    }, children: section })] })), metrics(section).length > 0 && (_jsx(DashboardGroupComponent, { children: metrics(section).map((item, index) => {
+                                _jsx(DashboardItemComponent, { dashboardItem: cleanDashboardItem(dashboard[item._id]), onClickDashboardItem: onClickDashboardItem
+                                        ? () => handleOnClickDashboardItem(item)
+                                        : void null, children: _jsx(Chart, { containerStyle: {
+                                            display: 'flex',
                                             width: '100%',
-                                            height: '100%',
-                                            boxSizing: 'content-box',
-                                        }, children: _jsx("div", { style: {
-                                                width: '100%',
-                                                height: '100%',
-                                                boxSizing: 'content-box',
-                                            }, children: _jsxs("div", { style: {
-                                                    display: 'flex',
-                                                    flexDirection: 'column',
-                                                    justifyContent: 'space-between',
-                                                    height: '100%',
-                                                    boxSizing: 'content-box',
-                                                }, children: [_jsxs("div", { style: {
-                                                            display: 'flex',
-                                                            flexDirection: 'row',
-                                                            justifyContent: 'space-between',
-                                                            boxSizing: 'content-box',
-                                                        }, children: [_jsx("div", { style: {
-                                                                    fontFamily: theme.fontFamily,
-                                                                    color: theme.primaryTextColor,
-                                                                    boxSizing: 'content-box',
-                                                                    fontSize: 18,
-                                                                    fontWeight: '500',
-                                                                    textOverflow: 'ellipsis',
-                                                                    // marginLeft: 25,
-                                                                    padding: 0,
-                                                                    whiteSpace: 'nowrap',
-                                                                    display: 'block',
-                                                                    maxWidth: '100%',
-                                                                    overflow: 'hidden',
-                                                                }, children: elem.name }), onClickDashboardItem ? (_jsx("div", { style: {
-                                                                    fontFamily: theme.fontFamily,
-                                                                    color: theme.primaryTextColor,
-                                                                    boxSizing: 'content-box',
-                                                                    fontWeight: '500',
-                                                                    fontSize: 14,
-                                                                    minWidth: 14 * 7,
-                                                                    display: 'flex',
-                                                                    alignItems: 'center',
-                                                                    justifyContent: 'flex-end',
-                                                                }, children: 'view report →' })) : null] }), _jsx("div", { style: {
-                                                            padding: 0,
-                                                            height: '100%',
-                                                            boxSizing: 'content-box',
-                                                        }, children: _jsx(Chart, { containerStyle: {
-                                                                display: 'flex',
-                                                                width: '100%',
-                                                                // TODO: fix fixed height
-                                                                height: 300,
-                                                                marginBottom: 50,
-                                                                marginTop: 30,
-                                                            }, dateRangeFilterDisabled: dateRangeFilterDisabled, chartId: elem._id, colors: theme.chartColors?.length
-                                                                ? theme.chartColors
-                                                                : undefined }) })] }) }) }) }, elem.name + '' + index));
-                            }) })) : null, dashboardSections[section].filter((elem) => elem.chartType === 'table').length ? (_jsxs("div", { style: {
+                                            // height: '100%',
+                                        }, chartId: item._id, colors: theme.chartColors?.length
+                                            ? theme.chartColors
+                                            : undefined, hideXAxis: hideXAxis, hideYAxis: hideYAxis, hideCartesianGrid: hideCartesianGrid }) }, item.name + '' + index);
+                            }) })), charts(section).length > 0 && (_jsx(DashboardGroupComponent, { children: charts(section).map((item, index) => (_jsx(DashboardItemComponent, { dashboardItem: cleanDashboardItem(dashboard[item._id]), onClickDashboardItem: onClickDashboardItem
+                                    ? () => handleOnClickDashboardItem(item)
+                                    : void null, children: _jsx(Chart, { containerStyle: chartContainerStyle, chartId: item._id, colors: theme.chartColors?.length
+                                        ? theme.chartColors
+                                        : undefined, hideXAxis: hideXAxis, hideYAxis: hideYAxis, hideCartesianGrid: hideCartesianGrid }) }, item.name + '' + index))) })), tables(section).length > 0 && (_jsxs("div", { style: {
                                 boxSizing: 'content-box',
                                 width: `100%`,
                                 gap: 20,
                                 display: 'flex',
                                 flexDirection: 'column',
-                            }, children: [_jsx("div", { style: { height: 0 } }), dashboardSections[section]
-                                    .filter((elem) => elem.chartType === 'table')
-                                    .sort((a, b) => {
-                                    if (a.order === undefined && b.order === undefined)
-                                        return 0; // both items don't have the 'order' field
-                                    if (a.order === undefined)
-                                        return 1; // only 'a' doesn't have the 'order' field, place 'a' last
-                                    if (b.order === undefined)
-                                        return -1; // only 'b' doesn't have the 'order' field, place 'b' last
-                                    return a.order - b.order; // both items have the 'order' field, sort numerically
-                                })
-                                    .map((elem, index) => {
-                                    if (DashboardItemComponent) {
-                                        return (_jsx("div", { onClick: onClickDashboardItem
-                                                ? () => handleOnClickDashboardItem(elem)
-                                                : undefined, children: _jsx(DashboardItemComponent, { dashboardItem: elem, children: _jsx("div", { style: {
-                                                        padding: 0,
-                                                        height: '100%',
-                                                        boxSizing: 'content-box',
-                                                    }, children: _jsx(Chart, { containerStyle: {
-                                                            display: 'flex',
-                                                            width: '100%',
-                                                            height: '100%',
-                                                        }, dateRangeFilterDisabled: dateRangeFilterDisabled, chartId: elem._id, colors: theme.chartColors?.length
-                                                            ? theme.chartColors
-                                                            : undefined }) }) }) }, elem.name + '' + index));
-                                    }
-                                    return (_jsxs("div", { onClick: onClickDashboardItem
-                                            ? () => handleOnClickDashboardItem(elem)
-                                            : undefined, children: [_jsx("div", { onClick: onClickDashboardItem
-                                                    ? () => handleOnClickDashboardItem(elem)
-                                                    : undefined, style: {
-                                                    // background: theme.elevatedCardColor,
-                                                    // borderRadius: theme.borderRadius,
-                                                    // boxShadow: theme.boxShadow,
-                                                    paddingTop: 12,
-                                                    boxSizing: 'content-box',
-                                                    borderRadius: 8,
-                                                    // height: '100%',
-                                                    cursor: 'pointer',
-                                                    width: '100%',
-                                                    minHeight: 420,
-                                                    height: 420,
-                                                    // ...metricContainerStyle,
-                                                }, children: _jsx("div", { 
-                                                    // className="group-hover:bg-black"
-                                                    style: {
-                                                        width: '100%',
-                                                        boxSizing: 'content-box',
-                                                        height: '100%',
-                                                    }, children: _jsx("div", { style: {
-                                                            width: '100%',
-                                                            boxSizing: 'content-box',
-                                                            height: '100%',
-                                                        }, children: _jsxs("div", { style: {
-                                                                display: 'flex',
-                                                                flexDirection: 'column',
-                                                                justifyContent: 'space-between',
-                                                                boxSizing: 'content-box',
-                                                                height: '100%',
-                                                            }, children: [_jsxs("div", { 
-                                                                    // className="group-hover:bg-black"
-                                                                    style: {
-                                                                        display: 'flex',
-                                                                        flexDirection: 'row',
-                                                                        justifyContent: 'space-between',
-                                                                        boxSizing: 'content-box',
-                                                                        // alignItems: 'center',
-                                                                        // paddingLeft: theme.padding,
-                                                                        paddingRight: 25,
-                                                                        // paddingTop: theme.padding,
-                                                                    }, children: [_jsx("div", { title: elem.name, style: {
-                                                                                fontFamily: theme.fontFamily,
-                                                                                color: theme.primaryTextColor,
-                                                                                boxSizing: 'content-box',
-                                                                                // TODO: FIX SIZE
-                                                                                fontSize: 18,
-                                                                                // TODO: FIX WEIGHT
-                                                                                fontWeight: '500',
-                                                                                // fontSize: theme.headerFontSize,
-                                                                                // color: theme.fontColor,
-                                                                                // fontWeight: theme.headerFontWeight,
-                                                                                textOverflow: 'ellipsis',
-                                                                                // margin: 0,
-                                                                                // marginLeft: 25,
-                                                                                padding: 0,
-                                                                                whiteSpace: 'nowrap',
-                                                                                display: 'block',
-                                                                                maxWidth: '100%',
-                                                                                overflow: 'hidden',
-                                                                            }, children: elem.name }), onClickDashboardItem ? (_jsx("div", { 
-                                                                            // className="hover:bg-black"
-                                                                            style: {
-                                                                                fontFamily: theme.fontFamily,
-                                                                                boxSizing: 'content-box',
-                                                                                color: theme.primaryTextColor,
-                                                                                fontWeight: '500',
-                                                                                fontSize: 14,
-                                                                                minWidth: 14 * 7,
-                                                                                // background: 'red',
-                                                                                display: 'flex',
-                                                                                alignItems: 'center',
-                                                                                justifyContent: 'flex-end',
-                                                                            }, children: 'view report →' })) : null] }), _jsxs("div", { style: {
-                                                                        padding: 0,
-                                                                        height: '400px',
-                                                                    }, children: [_jsx("div", { style: { height: 20 } }), _jsx(Chart, { containerStyle: {
-                                                                                // display: 'flex',
-                                                                                // width: '100%',
-                                                                                // height: 30,
-                                                                                // marginBottom: 50,
-                                                                                height: '100%',
-                                                                                // paddingLeft: 25,
-                                                                            }, dateRangeFilterDisabled: dateRangeFilterDisabled, chartId: elem._id })] })] }) }) }) }, elem.name + '' + index), _jsx("div", { style: { height: 40 } })] }, elem.name + '' + index));
-                                })] })) : null, _jsx("div", { style: { height: 40 } })] }, section + '' + sectionIndex));
+                            }, children: [_jsx("div", { style: { height: 0 } }), tables(section).map((item, index) => (_jsx(DashboardItemComponent, { dashboardItem: cleanDashboardItem(dashboard[item._id]), onClickDashboardItem: onClickDashboardItem
+                                        ? () => handleOnClickDashboardItem(item)
+                                        : void null, children: _jsx(Chart, { containerStyle: {
+                                            display: 'flex',
+                                            width: '100%',
+                                            height: '100%',
+                                        }, chartId: item._id, colors: theme.chartColors?.length
+                                            ? theme.chartColors
+                                            : undefined, hideXAxis: hideXAxis, hideYAxis: hideYAxis, hideCartesianGrid: hideCartesianGrid }) }, item.name + '' + index)))] }))] }, section + '' + sectionIndex));
             })] }));
 }

package/dist/esm/DateRangePicker/dateRangePickerUtils.d.ts

@@ -31,8 +31,25 @@ export declare const PRIMARY_CODES: {
  * comparison range) and returns a QuillDateRange based on that key and date.
  */
 export declare const COMPARISON_RANGE: {
-    [key: string]: (range: QuillDateRange) => QuillDateRange | null;
+    readonly PREV_PERIOD: ({ start, end }: QuillDateRange) => {
+        start: Date;
+        end: Date;
+    };
+    readonly PREV_7_DAYS: ({ start }: QuillDateRange) => {
+        start: Date;
+        end: Date;
+    };
+    readonly PREV_30_DAYS: ({ start }: QuillDateRange) => {
+        start: Date;
+        end: Date;
+    };
+    readonly PREV_90_DAYS: ({ start }: QuillDateRange) => {
+        start: Date;
+        end: Date;
+    };
+    readonly NO_COMPARISON: (_: any) => null;
 };
+export type ComparisonRangeKey = keyof typeof COMPARISON_RANGE;
 export declare const defaultOptions: DateRangePickerOption[];
 export declare const reportBuilderOptions: DateRangePickerOption[];
 export declare const getRangeFromPreset: (preset: string) => (string | Date | null)[];