@quillsql/react 2.10.4 → 2.10.6

package/dist/cjs/Dashboard.js

@@ -1,36 +1,11 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.QuillDateRangePicker = exports.DashboardFilter = exports.PRIMARY_OPTIONS = exports.COMPARISON_OPTIONS = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-// @ts-nocheck
-/* eslint-disable @typescript-eslint/ban-ts-comment */
-const react_1 = __importStar(require("react"));
+const react_1 = require("react");
 const Chart_1 = __importDefault(require("./Chart"));
 const dateRangePickerUtils_1 = require("./DateRangePicker/dateRangePickerUtils");
 const Context_1 = require("./Context");
@@ -39,6 +14,12 @@ const assets_1 = require("./assets");
 const hooks_1 = require("./hooks");
 const locale_1 = require("date-fns/locale");
 const useDashboard_1 = require("./hooks/useDashboard");
+const crypto_1 = require("./utils/crypto");
+const DashboardSection_1 = __importDefault(require("./components/Dashboard/DashboardSection"));
+const DashboardItem_1 = __importDefault(require("./components/Dashboard/DashboardItem"));
+const DashboardGroup_1 = __importDefault(require("./components/Dashboard/DashboardGroup"));
+const styles_1 = require("./utils/styles");
+const dashboard_1 = require("./utils/dashboard");
 exports.COMPARISON_OPTIONS = [
     {
         value: 'PREV_PERIOD',
@@ -98,7 +79,9 @@ function DashboardFilter({ filter, onChangeFilter, SelectComponent, DateRangePic
             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 = exports.COMPARISON_OPTIONS.find((option) => {
                     return option.value === filter.comparisonRange.value;
@@ -248,7 +231,7 @@ const QuillDropdownComponent = ({ onChange, value, label, options, }) => {
 const isBetween = (date, startDate, endDate) => {
     return (0, date_fns_1.isAfter)(date, startDate) && (0, date_fns_1.isBefore)(date, endDate);
 };
-function Calendar({ anchorDate, selectedDateRange, onClickDate, theme, localStartDate, localEndDate, }) {
+function Calendar({ anchorDate, onClickDate, theme, localStartDate, localEndDate, }) {
     const firstDayOfDisplayedMonth = (0, date_fns_1.startOfMonth)(anchorDate);
     const lastDayOfDisplayedMonth = (0, date_fns_1.endOfMonth)(anchorDate);
     const weekdays = (0, dateRangePickerUtils_1.getWeekdays)(locale_1.enUS).map((dayName) => (0, dateRangePickerUtils_1.capitalize)(dayName, locale_1.enUS));
@@ -361,17 +344,9 @@ function CalendarDropdown({ onChangeDateRange, dateRange }) {
     const [showModal, setShowModal] = (0, react_1.useState)(false);
     const modalRef = (0, react_1.useRef)(null);
     const parentRef = (0, react_1.useRef)(null);
-    const handleOnChange = (0, react_1.useCallback)((event) => {
-        onChangeDateRange(event.target.value);
-    }, [onChangeDateRange]);
     const [anchorDate, setAnchorDate] = (0, react_1.useState)(null);
     const [localStartDate, setLocalStartDate] = (0, react_1.useState)(null);
     const [localEndDate, setLocalEndDate] = (0, react_1.useState)(null);
-    // const firstDayOfFirstMonth = startOfMonth(value[0]);
-    // const lastDayOfLastMonth = endOfMonth(value[1]);
-    // const weekdays = getWeekdays(enUS).map(dayName =>
-    //   capitalize(dayName, locale)
-    // );
     const prevMonthAnchor = (0, date_fns_1.subDays)((0, date_fns_1.startOfMonth)(anchorDate), 1);
     const onClickDate = (date) => {
         if (localStartDate && (0, date_fns_1.isBefore)(date, localStartDate)) {
@@ -553,11 +528,11 @@ const QuillDateRangePicker = ({ label, dateRange, onChangeDateRange, presetOptio
                 }, children: [(0, jsx_runtime_1.jsx)(MemoizedCalendarDropdown, { dateRange: dateRange, onChangeDateRange: onChangeDateRange, theme: theme }), (0, jsx_runtime_1.jsx)(MemoizedDropdown, { options: presetOptions.map((option) => ({
                             label: option.text,
                             value: option.value,
-                        })), onChange: onChangePreset, value: preset })] })] }));
+                        })), onChange: onChangePreset, value: preset, label: preset })] })] }));
 };
 exports.QuillDateRangePicker = QuillDateRangePicker;
-const MemoizedCalendarDropdown = react_1.default.memo(CalendarDropdown);
-const MemoizedDropdown = react_1.default.memo(QuillDropdownComponent);
+const MemoizedCalendarDropdown = (0, react_1.memo)(CalendarDropdown);
+const MemoizedDropdown = (0, react_1.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
@@ -566,19 +541,21 @@ const areEqual = (prevProps, nextProps) => {
         prevProps.dateRange[0] === nextProps.dateRange[0] &&
         prevProps.dateRange[1] === nextProps.dateRange[1]);
 };
-const MemoizedDateRangePicker = react_1.default.memo(exports.QuillDateRangePicker, areEqual);
+const MemoizedDateRangePicker = (0, react_1.memo)(exports.QuillDateRangePicker, areEqual);
 const QuillEmptyDashboardComponent = () => (0, jsx_runtime_1.jsx)("div", {});
-function removeQuotes(str) {
-    if (str.startsWith('"') && str.endsWith('"')) {
-        return str.slice(1, -1);
-    }
-    else {
-        return str;
-    }
-}
-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.
+ */
+function Dashboard({ name, containerStyle, chartContainerStyle = defaultChartContainerStyles, metricContainerStyle, maxColumnWidth, rowHeight, onClickDashboardItem, hideFilters, dateRangeFilterDisabled = false, SelectComponent, EmptyDashboardComponent = QuillEmptyDashboardComponent, DateRangePickerComponent, FilterButtonComponent, FilterModalComponent, onChangeLoading, DashboardItemComponent = DashboardItem_1.default, DashboardSectionComponent = DashboardSection_1.default, DashboardGroupComponent = DashboardGroup_1.default, hideXAxis = false, hideYAxis = false, hideCartesianGrid = false, }) {
     const { dateFilter } = (0, Context_1.useDateFilter)();
-    const { isLoading: isDataLoading, data, reload } = (0, useDashboard_1.useDashboard)(name);
+    const { dispatch } = (0, react_1.useContext)(Context_1.DashboardContext);
+    const { isLoading: isDataLoading, data, reload, } = (0, useDashboard_1.useDashboard)(name);
     const [dashboardSections, setDashboardSections] = (0, react_1.useState)(null);
     const { dashboard } = (0, react_1.useContext)(Context_1.DashboardContext);
     const [client] = (0, react_1.useContext)(Context_1.ClientContext);
@@ -597,12 +574,6 @@ function Dashboard({ name, containerStyle, chartContainerStyle, metricContainerS
     (0, react_1.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 = {};
@@ -634,8 +605,8 @@ function Dashboard({ name, containerStyle, chartContainerStyle, metricContainerS
             else {
                 filter.comparison = false;
             }
-            if (hashCode(JSON.stringify(dashboardFilters?.date_range ?? '')) !==
-                hashCode(JSON.stringify(filter))) {
+            if ((0, crypto_1.hashCode)(JSON.stringify(dashboardFilters?.date_range ?? '')) !==
+                (0, crypto_1.hashCode)(JSON.stringify(filter))) {
                 dashboardFiltersDispatch({
                     type: 'ADD_DASHBOARD_FILTER',
                     id: 'date_range',
@@ -653,8 +624,8 @@ function Dashboard({ name, containerStyle, chartContainerStyle, metricContainerS
                 bigFilterObj[filter.field] = processFilter(filter);
             });
         }
-        if (hashCode(JSON.stringify(dashboardFilters)) !==
-            hashCode(JSON.stringify(bigFilterObj))) {
+        if ((0, crypto_1.hashCode)(JSON.stringify(dashboardFilters)) !==
+            (0, crypto_1.hashCode)(JSON.stringify(bigFilterObj))) {
             dashboardFiltersDispatch({
                 type: 'ADD_DASHBOARD_FILTERS',
                 id: 'tons',
@@ -663,12 +634,18 @@ function Dashboard({ name, containerStyle, chartContainerStyle, metricContainerS
         }
     };
     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,
@@ -687,6 +664,14 @@ function Dashboard({ name, containerStyle, chartContainerStyle, metricContainerS
             },
         });
     };
+    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
@@ -774,7 +759,8 @@ function Dashboard({ name, containerStyle, chartContainerStyle, metricContainerS
                         options: options,
                         comparison: true,
                         comparisonRange: {
-                            startDate: dateRangePickerUtils_1.COMPARISON_RANGE[key](primaryRange)?.start,
+                            startDate: dateRangePickerUtils_1.COMPARISON_RANGE[key](primaryRange)
+                                ?.start,
                             endDate: dateRangePickerUtils_1.COMPARISON_RANGE[key](primaryRange)?.end,
                             value: key,
                         },
@@ -817,10 +803,28 @@ function Dashboard({ name, containerStyle, chartContainerStyle, metricContainerS
         return null;
     if (!dashboardSections || Object.keys(dashboardSections).length == 0)
         return (0, jsx_runtime_1.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 ((0, jsx_runtime_1.jsxs)("div", { style: containerStyle, children: [!hideFilters && sortedFilters.length > 0 && ((0, jsx_runtime_1.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 ((0, jsx_runtime_1.jsxs)("div", { ...(0, styles_1.styleToProps)(containerStyle), children: [!hideFilters && ((0, jsx_runtime_1.jsx)("div", { style: {
                     display: 'flex',
                     boxSizing: 'content-box',
                     flexDirection: 'row',
@@ -832,364 +836,50 @@ function Dashboard({ name, containerStyle, chartContainerStyle, metricContainerS
                         flexDirection: 'row',
                         alignItems: 'center',
                         gap: 12,
-                    }, children: sortedFilters.map((filter, index) => ((0, jsx_runtime_1.jsx)(DashboardFilter, { filter: filter, onChangeFilter: updateFilter, theme: theme, filterValue: dashboardFilters, SelectComponent: FilterDropdownComponent
-                            ? FilterDropdownComponent
-                            : MemoizedDropdown, DateRangePickerComponent: DateRangePickerComponent
+                    }, children: sortedFilters.map((filter, index) => ((0, jsx_runtime_1.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 ((0, jsx_runtime_1.jsxs)("div", { style: {
-                        width: '100%',
-                    }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column' }, children: [(0, jsx_runtime_1.jsx)("div", { style: { height: sectionIndex > 0 ? 25 : 0 } }), section && ((0, jsx_runtime_1.jsx)("h1", { style: {
+                return ((0, jsx_runtime_1.jsxs)(DashboardSectionComponent, { children: [section && ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column' }, children: [(0, jsx_runtime_1.jsx)("div", { style: { height: sectionIndex > 0 ? 25 : 0 } }), (0, jsx_runtime_1.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 ? ((0, jsx_runtime_1.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 ((0, jsx_runtime_1.jsx)("div", { onClick: onClickDashboardItem
-                                            ? () => handleOnClickDashboardItem(elem)
-                                            : void null, children: (0, jsx_runtime_1.jsx)(DashboardItemComponent, { dashboardItem: elem, children: (0, jsx_runtime_1.jsx)("div", { style: {
-                                                    padding: 0,
-                                                    // height: '100%',
-                                                    boxSizing: 'content-box',
-                                                }, children: (0, jsx_runtime_1.jsx)(Chart_1.default, { containerStyle: {
-                                                        display: 'flex',
-                                                        width: '100%',
-                                                        // height: '100%',
-                                                    }, chartId: elem._id, dateRangeFilterDisabled: dateRangeFilterDisabled, colors: theme.chartColors?.length
-                                                        ? theme.chartColors
-                                                        : undefined }) }) }) }, elem.name + '' + index));
-                                }
-                                return ((0, jsx_runtime_1.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: (0, jsx_runtime_1.jsx)("div", { 
-                                        // className="group-hover:bg-black"
-                                        style: {
+                                    }, children: section })] })), metrics(section).length > 0 && ((0, jsx_runtime_1.jsx)(DashboardGroupComponent, { children: metrics(section).map((item, index) => {
+                                (0, jsx_runtime_1.jsx)(DashboardItemComponent, { dashboardItem: (0, dashboard_1.cleanDashboardItem)(dashboard[item._id]), onClickDashboardItem: onClickDashboardItem
+                                        ? () => handleOnClickDashboardItem(item)
+                                        : void null, children: (0, jsx_runtime_1.jsx)(Chart_1.default, { containerStyle: {
+                                            display: 'flex',
                                             width: '100%',
-                                            boxSizing: 'content-box',
-                                            height: '100%',
-                                        }, children: (0, jsx_runtime_1.jsx)("div", { style: {
-                                                width: '100%',
-                                                boxSizing: 'content-box',
-                                                height: '100%',
-                                            }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
-                                                    display: 'flex',
-                                                    flexDirection: 'column',
-                                                    justifyContent: 'space-between',
-                                                    boxSizing: 'content-box',
-                                                }, children: [(0, jsx_runtime_1.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: [(0, jsx_runtime_1.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 ? ((0, jsx_runtime_1.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] }), (0, jsx_runtime_1.jsx)("div", { style: { padding: 0, paddingTop: 10 }, children: (0, jsx_runtime_1.jsx)(Chart_1.default, { 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 ? ((0, jsx_runtime_1.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 ((0, jsx_runtime_1.jsx)("div", { onClick: onClickDashboardItem
-                                            ? () => handleOnClickDashboardItem(elem)
-                                            : undefined, style: { height: rowHeight || 400 }, children: (0, jsx_runtime_1.jsx)(DashboardItemComponent, { dashboardItem: elem, children: (0, jsx_runtime_1.jsx)(Chart_1.default, { 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 ((0, jsx_runtime_1.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: (0, jsx_runtime_1.jsx)("div", { style: {
-                                            width: '100%',
-                                            height: '100%',
-                                            boxSizing: 'content-box',
-                                        }, children: (0, jsx_runtime_1.jsx)("div", { style: {
-                                                width: '100%',
-                                                height: '100%',
-                                                boxSizing: 'content-box',
-                                            }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
-                                                    display: 'flex',
-                                                    flexDirection: 'column',
-                                                    justifyContent: 'space-between',
-                                                    height: '100%',
-                                                    boxSizing: 'content-box',
-                                                }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
-                                                            display: 'flex',
-                                                            flexDirection: 'row',
-                                                            justifyContent: 'space-between',
-                                                            boxSizing: 'content-box',
-                                                        }, children: [(0, jsx_runtime_1.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 ? ((0, jsx_runtime_1.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] }), (0, jsx_runtime_1.jsx)("div", { style: {
-                                                            padding: 0,
-                                                            height: '100%',
-                                                            boxSizing: 'content-box',
-                                                        }, children: (0, jsx_runtime_1.jsx)(Chart_1.default, { 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 ? ((0, jsx_runtime_1.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 && ((0, jsx_runtime_1.jsx)(DashboardGroupComponent, { children: charts(section).map((item, index) => ((0, jsx_runtime_1.jsx)(DashboardItemComponent, { dashboardItem: (0, dashboard_1.cleanDashboardItem)(dashboard[item._id]), onClickDashboardItem: onClickDashboardItem
+                                    ? () => handleOnClickDashboardItem(item)
+                                    : void null, children: (0, jsx_runtime_1.jsx)(Chart_1.default, { 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 && ((0, jsx_runtime_1.jsxs)("div", { style: {
                                 boxSizing: 'content-box',
                                 width: `100%`,
                                 gap: 20,
                                 display: 'flex',
                                 flexDirection: 'column',
-                            }, children: [(0, jsx_runtime_1.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 ((0, jsx_runtime_1.jsx)("div", { onClick: onClickDashboardItem
-                                                ? () => handleOnClickDashboardItem(elem)
-                                                : undefined, children: (0, jsx_runtime_1.jsx)(DashboardItemComponent, { dashboardItem: elem, children: (0, jsx_runtime_1.jsx)("div", { style: {
-                                                        padding: 0,
-                                                        height: '100%',
-                                                        boxSizing: 'content-box',
-                                                    }, children: (0, jsx_runtime_1.jsx)(Chart_1.default, { containerStyle: {
-                                                            display: 'flex',
-                                                            width: '100%',
-                                                            height: '100%',
-                                                        }, dateRangeFilterDisabled: dateRangeFilterDisabled, chartId: elem._id, colors: theme.chartColors?.length
-                                                            ? theme.chartColors
-                                                            : undefined }) }) }) }, elem.name + '' + index));
-                                    }
-                                    return ((0, jsx_runtime_1.jsxs)("div", { onClick: onClickDashboardItem
-                                            ? () => handleOnClickDashboardItem(elem)
-                                            : undefined, children: [(0, jsx_runtime_1.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: (0, jsx_runtime_1.jsx)("div", { 
-                                                    // className="group-hover:bg-black"
-                                                    style: {
-                                                        width: '100%',
-                                                        boxSizing: 'content-box',
-                                                        height: '100%',
-                                                    }, children: (0, jsx_runtime_1.jsx)("div", { style: {
-                                                            width: '100%',
-                                                            boxSizing: 'content-box',
-                                                            height: '100%',
-                                                        }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
-                                                                display: 'flex',
-                                                                flexDirection: 'column',
-                                                                justifyContent: 'space-between',
-                                                                boxSizing: 'content-box',
-                                                                height: '100%',
-                                                            }, children: [(0, jsx_runtime_1.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: [(0, jsx_runtime_1.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 ? ((0, jsx_runtime_1.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] }), (0, jsx_runtime_1.jsxs)("div", { style: {
-                                                                        padding: 0,
-                                                                        height: '400px',
-                                                                    }, children: [(0, jsx_runtime_1.jsx)("div", { style: { height: 20 } }), (0, jsx_runtime_1.jsx)(Chart_1.default, { containerStyle: {
-                                                                                // display: 'flex',
-                                                                                // width: '100%',
-                                                                                // height: 30,
-                                                                                // marginBottom: 50,
-                                                                                height: '100%',
-                                                                                // paddingLeft: 25,
-                                                                            }, dateRangeFilterDisabled: dateRangeFilterDisabled, chartId: elem._id })] })] }) }) }) }, elem.name + '' + index), (0, jsx_runtime_1.jsx)("div", { style: { height: 40 } })] }, elem.name + '' + index));
-                                })] })) : null, (0, jsx_runtime_1.jsx)("div", { style: { height: 40 } })] }, section + '' + sectionIndex));
+                            }, children: [(0, jsx_runtime_1.jsx)("div", { style: { height: 0 } }), tables(section).map((item, index) => ((0, jsx_runtime_1.jsx)(DashboardItemComponent, { dashboardItem: (0, dashboard_1.cleanDashboardItem)(dashboard[item._id]), onClickDashboardItem: onClickDashboardItem
+                                        ? () => handleOnClickDashboardItem(item)
+                                        : void null, children: (0, jsx_runtime_1.jsx)(Chart_1.default, { 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));
             })] }));
 }
 exports.default = Dashboard;