@quillsql/react 1.6.9 → 1.7.1

package/lib/Dashboard.js

@@ -1,63 +1,45 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (g && (g = 0, op[0] && (_ = 0)), _) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+"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 };
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+/* eslint-disable @typescript-eslint/ban-ts-comment */
 // @ts-nocheck
-import React, { useContext, useEffect, useState, useRef } from 'react';
-import Chart from './Chart';
-import { ClientContext, DashboardContext, DateFilterContext, ThemeContext, DashboardFiltersContext, } from './Context';
-import { startOfToday, sub } from 'date-fns';
-import { DateRangePicker } from './DateRangePicker/index';
-import axios from 'axios';
-import Modal from './components/Modal/Modal';
-import { HoveredValueContext, SelectedValueContext } from './contexts';
-import { DropdownItem } from './components/Dropdown';
-import { ArrowDownHeadIcon } from './assets';
-import { useInternalState, useSelectOnKeyDown } from './hooks';
+const react_1 = __importStar(require("react"));
+const Chart_1 = __importDefault(require("./Chart"));
+const Context_1 = require("./Context");
+const date_fns_1 = require("date-fns");
+const index_1 = require("./DateRangePicker/index");
+const axios_1 = __importDefault(require("axios"));
+const Modal_1 = __importDefault(require("./components/Modal/Modal"));
+const contexts_1 = require("./contexts");
+const Dropdown_1 = require("./components/Dropdown");
+const assets_1 = require("./assets");
+const hooks_1 = require("./hooks");
 // const theme = {
 //   fontFamily: 'Inter; Helvetica',
 //   primaryTextColor: '#212121',
@@ -66,133 +48,137 @@ import { useInternalState, useSelectOnKeyDown } from './hooks';
 //   chartTickColor: '#CCCCCC',
 //   chartColors: ['#6269E9', '#E14F62'],
 // };
-export default function Dashboard(_a) {
-    var name = _a.name, containerStyle = _a.containerStyle, maxColumnWidth = _a.maxColumnWidth, rowHeight = _a.rowHeight, onClickDashboardItem = _a.onClickDashboardItem, hideDateFilter = _a.hideDateFilter;
-    var _b = useState(null), dashboardSections = _b[0], setDashboardSections = _b[1];
-    var dashboard = useContext(DashboardContext).dashboard;
-    var _c = useContext(ClientContext), client = _c[0], _ = _c[1];
-    var _d = useContext(ThemeContext), theme = _d[0], _ = _d[1];
-    var _e = useContext(DateFilterContext), dateFilter = _e.dateFilter, dateFilterDispatch = _e.dateFilterDispatch;
-    var dashboardFiltersDispatch = useContext(DashboardFiltersContext).dashboardFiltersDispatch;
-    var _f = useState([]), configFilters = _f[0], setConfigFilters = _f[1];
-    var setGlobalDateFilter = function (startDate, endDate) {
-        dateFilterDispatch({
-            type: 'SET_GLOBAL_DATE_FILTER',
-            payload: { startDate: startDate, endDate: endDate },
-        });
-    };
-    React.useEffect(function () {
-        function getDashboards() {
-            return __awaiter(this, void 0, void 0, function () {
-                var publicKey, customerId, environment, queryEndpoint, queryHeaders, response_1, response, error_1;
-                return __generator(this, function (_a) {
-                    switch (_a.label) {
-                        case 0:
-                            publicKey = client.publicKey, customerId = client.customerId, environment = client.environment, queryEndpoint = client.queryEndpoint, queryHeaders = client.queryHeaders;
-                            _a.label = 1;
-                        case 1:
-                            _a.trys.push([1, 5, , 6]);
-                            if (!(queryEndpoint && queryHeaders)) return [3 /*break*/, 3];
-                            return [4 /*yield*/, axios.post(queryEndpoint, {
-                                    metadata: { name: name, task: 'config' },
-                                }, {
-                                    headers: queryHeaders,
-                                })];
-                        case 2:
-                            response_1 = _a.sent();
-                            if (response_1.status !== 200) {
-                                throw new Error("HTTP error! Status: ".concat(response_1.status));
-                            }
-                            setDashboardSections(response_1.data.sections);
-                            setConfigFilters(response_1.data.filters || []);
-                            return [2 /*return*/];
-                        case 3: return [4 /*yield*/, axios.get('https://quill-344421.uc.r.appspot.com/dashconfig', {
-                                params: {
-                                    publicKey: publicKey,
-                                    orgId: customerId,
-                                    name: name,
-                                    task: 'dashconfig',
-                                },
-                                headers: {
-                                    environment: environment || undefined,
-                                },
-                            })];
-                        case 4:
-                            response = _a.sent();
-                            if (response.status !== 200) {
-                                throw new Error("HTTP error! Status: ".concat(response.status));
-                            }
-                            setDashboardSections(response.data.sections);
-                            setConfigFilters(response.data.filters || []);
-                            return [3 /*break*/, 6];
-                        case 5:
-                            error_1 = _a.sent();
-                            console.error('Error fetching data:', error_1);
-                            return [3 /*break*/, 6];
-                        case 6: return [2 /*return*/];
+function Dashboard({ name, containerStyle, maxColumnWidth, rowHeight, onClickDashboardItem, hideDateFilter, }) {
+    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);
+    const [theme] = (0, react_1.useContext)(Context_1.ThemeContext);
+    const { dashboardFiltersDispatch } = (0, react_1.useContext)(Context_1.DashboardFiltersContext);
+    const [configFilters, setConfigFilters] = (0, react_1.useState)([]);
+    react_1.default.useEffect(() => {
+        async function getDashboards() {
+            const { publicKey, customerId, environment, queryEndpoint, queryHeaders, withCredentials, } = client;
+            try {
+                // const response = await fetch(
+                //   `https://quill-344421.uc.r.appspot.com/dashsections/${publicKey}/${customerId}/${name}`
+                // );
+                if (queryEndpoint) {
+                    //&& queryHeaders
+                    const response = await axios_1.default.post(queryEndpoint, {
+                        metadata: { name, task: 'config' },
+                    }, {
+                        headers: queryHeaders,
+                        withCredentials,
+                    });
+                    if (response.status !== 200) {
+                        throw new Error(`HTTP error! Status: ${response.status}`);
                     }
+                    setDashboardSections(response.data.sections);
+                    setConfigFilters(response.data.filters || []);
+                    return;
+                }
+                const response = await axios_1.default.get('https://quill-344421.uc.r.appspot.com/dashconfig', {
+                    params: {
+                        publicKey: publicKey,
+                        orgId: customerId,
+                        name: name,
+                        task: 'dashconfig',
+                    },
+                    headers: {
+                        environment: environment || undefined,
+                    },
                 });
-            });
+                if (response.status !== 200) {
+                    throw new Error(`HTTP error! Status: ${response.status}`);
+                }
+                setDashboardSections(response.data.sections);
+                setConfigFilters(response.data.filters || []);
+            }
+            catch (error) {
+                console.error('Error fetching data:', error);
+            }
         }
         getDashboards();
     }, [name]);
-    var onChangeDateFilter = function (dateFilter) {
-        setGlobalDateFilter(dateFilter[0], dateFilter[1]);
-    };
-    useEffect(function () {
+    (0, react_1.useEffect)(() => {
         // change to be set on the dashboard / section as default date range
-        dateFilterDispatch({
-            type: 'SET_GLOBAL_DATE_FILTER',
-            payload: {
-                startDate: sub(startOfToday(), { days: 90 }),
-                endDate: new Date(),
+        const filter = {
+            startDate: (0, date_fns_1.sub)((0, date_fns_1.startOfToday)(), { days: 90 }),
+            endDate: new Date(),
+            filterType: 'DATE_RANGE',
+        };
+        dashboardFiltersDispatch({
+            type: 'ADD_DASHBOARD_FILTER',
+            id: 'date_range',
+            data: {
+                ...filter,
             },
         });
     }, []);
-    var handleOnClickDashboardItem = function (id) {
+    const handleOnClickDashboardItem = id => {
         if (dashboard[id]) {
             onClickDashboardItem(dashboard[id]);
         }
     };
-    var onChangeFilter = function (value, filter) {
+    const onChangeDateFilter = dateFilter => {
+        setGlobalDateFilter(dateFilter[0], dateFilter[1]);
+    };
+    const setGlobalDateFilter = (startDate, endDate) => {
+        const filter = {
+            startDate: startDate,
+            endDate: endDate,
+            filterType: 'DATE_RANGE',
+        };
         dashboardFiltersDispatch({
             type: 'ADD_DASHBOARD_FILTER',
-            id: filter._id,
-            data: __assign(__assign({}, filter), { selectedValue: filter.options.find(function (elem) { return elem[removeQuotes(filter.field)] === value[2]; })[removeQuotes(filter.field)] }),
+            id: 'date_range',
+            data: {
+                ...filter,
+            },
+        });
+    };
+    const onChangeFilter = (value, filter) => {
+        dashboardFiltersDispatch({
+            type: 'ADD_DASHBOARD_FILTER',
+            id: 'date_range',
+            data: {
+                ...filter,
+                selectedValue: filter.options.find(elem => elem[removeQuotes(filter.field)] === value[2])[removeQuotes(filter.field)],
+            },
         });
     };
     if (!dashboardSections) {
         return null;
     }
-    return (_jsxs("div", __assign({ style: containerStyle }, { children: [_jsxs("div", __assign({ style: {
+    return ((0, jsx_runtime_1.jsxs)("div", { style: containerStyle, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
                     display: 'flex',
                     boxSizing: 'content-box',
                     flexDirection: 'row',
                     alignItems: 'center',
-                } }, { children: [!hideDateFilter ? (_jsxs("div", __assign({ style: { width: 420, marginBottom: 25, marginLeft: 25 } }, { children: [_jsx("div", __assign({ style: {
+                }, children: [!hideDateFilter ? ((0, jsx_runtime_1.jsxs)("div", { style: { width: 420, marginBottom: 25, marginLeft: 25 }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
                                     marginBottom: 6,
                                     fontWeight: '600',
                                     color: theme.secondaryTextColor,
                                     fontFamily: theme.fontFamily,
                                     fontSize: 14,
-                                } }, { children: "Date" })), _jsx(DateRangePicker
+                                }, children: "Date" }), (0, jsx_runtime_1.jsx)(index_1.DateRangePicker
                             // change to be set on the dashboard / section as default date range
                             , { 
                                 // change to be set on the dashboard / section as default date range
-                                defaultValue: [undefined, undefined, '90d'], onValueChange: onChangeDateFilter, theme: theme })] }))) : null, _jsx("div", __assign({ style: { width: 280, marginBottom: 25, marginLeft: 25 } }, { children: configFilters.map(function (elem, index) { return (_jsx(Filter, { onValueChange: function (value) { return onChangeFilter(value, elem); }, defaultValue: [
+                                defaultValue: [undefined, undefined, '90d'], onValueChange: onChangeDateFilter, theme: theme })] })) : null, (0, jsx_runtime_1.jsx)("div", { style: { width: 280, marginBottom: 25, marginLeft: 25 }, children: configFilters.map((elem, index) => ((0, jsx_runtime_1.jsx)(Filter, { onValueChange: value => onChangeFilter(value, elem), defaultValue: [
                                 undefined,
                                 undefined,
                                 elem.options[removeQuotes(elem.field)],
-                            ], theme: theme, filter: elem }, 'filter' + configFilters.field + index)); }) }))] })), Object.keys(dashboardSections)
+                            ], theme: theme, filter: elem }, 'filter' + configFilters.field + index))) })] }), Object.keys(dashboardSections)
                 .sort(function (a, b) {
                 return a.length - b.length;
             })
-                .map(function (section, sectionIndex) {
-                return (_jsxs("div", __assign({ style: {
+                .map((section, sectionIndex) => {
+                return ((0, jsx_runtime_1.jsxs)("div", { style: {
                         width: '100%',
                         display: 'flex',
                         flexDirection: 'column',
-                    } }, { children: [_jsxs("div", __assign({ style: { display: 'flex', flexDirection: 'column' } }, { children: [_jsx("div", { style: { height: sectionIndex > 0 ? 25 : 0 } }), section && (_jsx("h1", __assign({ style: {
+                    }, 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: {
                                         fontSize: 22,
                                         color: theme.primaryTextColor,
                                         fontFamily: theme.fontFamily,
@@ -202,20 +188,20 @@ export default function Dashboard(_a) {
                                         marginLeft: 25,
                                         textAlign: 'left',
                                         marginTop: 12,
-                                    } }, { children: section })))] })), dashboardSections[section].filter(function (elem) { return elem.chartType === 'metric'; }).length ? (_jsx("div", __assign({ style: {
+                                    }, children: section }))] }), dashboardSections[section].filter(elem => elem.chartType === 'metric').length ? ((0, jsx_runtime_1.jsx)("div", { style: {
                                 boxSizing: 'content-box',
-                                width: "100%",
+                                width: `100%`,
                                 listStyleType: 'none',
                                 marginBottom: 50,
                                 display: 'grid',
                                 gridGap: 25,
-                                gridTemplateColumns: "repeat(auto-fill,minmax(".concat(maxColumnWidth || 400, "px, 1fr))"),
-                                gridTemplateRows: "repeat(".concat(170, "px)"),
-                            } }, { children: dashboardSections[section]
-                                .filter(function (elem) { return elem.chartType === 'metric'; })
-                                .map(function (elem, index) {
-                                return (_jsx("div", __assign({ onClick: onClickDashboardItem
-                                        ? function () { return handleOnClickDashboardItem(elem._id); }
+                                gridTemplateColumns: `repeat(auto-fill,minmax(${maxColumnWidth || 400}px, 1fr))`,
+                                gridTemplateRows: `repeat(${170}px)`,
+                            }, children: dashboardSections[section]
+                                .filter(elem => elem.chartType === 'metric')
+                                .map((elem, index) => {
+                                return ((0, jsx_runtime_1.jsx)("div", { onClick: onClickDashboardItem
+                                        ? () => handleOnClickDashboardItem(elem._id)
                                         : undefined, style: {
                                         // background: theme.elevatedCardColor,
                                         // borderRadius: theme.borderRadius,
@@ -226,22 +212,22 @@ export default function Dashboard(_a) {
                                         height: '100%',
                                         cursor: 'pointer',
                                         width: '100%',
-                                    } }, { children: _jsx("div", __assign({ 
+                                    }, children: (0, jsx_runtime_1.jsx)("div", { 
                                         // className="group-hover:bg-black"
                                         style: {
                                             width: '100%',
                                             boxSizing: 'content-box',
                                             height: '100%',
-                                        } }, { children: _jsx("div", __assign({ style: {
+                                        }, children: (0, jsx_runtime_1.jsx)("div", { style: {
                                                 width: '100%',
                                                 boxSizing: 'content-box',
                                                 height: '100%',
-                                            } }, { children: _jsxs("div", __assign({ style: {
+                                            }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
                                                     display: 'flex',
                                                     flexDirection: 'column',
                                                     justifyContent: 'space-between',
                                                     boxSizing: 'content-box',
-                                                } }, { children: [_jsxs("div", __assign({ 
+                                                }, children: [(0, jsx_runtime_1.jsxs)("div", { 
                                                         // className="group-hover:bg-black"
                                                         style: {
                                                             display: 'flex',
@@ -252,7 +238,7 @@ export default function Dashboard(_a) {
                                                             // paddingLeft: theme.padding,
                                                             paddingRight: 25,
                                                             // paddingTop: theme.padding,
-                                                        } }, { children: [_jsx("div", __assign({ title: elem.name, style: {
+                                                        }, children: [(0, jsx_runtime_1.jsx)("div", { title: elem.name, style: {
                                                                     fontFamily: theme.fontFamily,
                                                                     color: theme.primaryTextColor,
                                                                     boxSizing: 'content-box',
@@ -271,7 +257,7 @@ export default function Dashboard(_a) {
                                                                     display: 'block',
                                                                     maxWidth: '100%',
                                                                     overflow: 'hidden',
-                                                                } }, { children: elem.name })), onClickDashboardItem ? (_jsx("div", __assign({ 
+                                                                }, children: elem.name }), onClickDashboardItem ? ((0, jsx_runtime_1.jsx)("div", { 
                                                                 // className="hover:bg-black"
                                                                 style: {
                                                                     fontFamily: theme.fontFamily,
@@ -284,27 +270,26 @@ export default function Dashboard(_a) {
                                                                     display: 'flex',
                                                                     alignItems: 'center',
                                                                     justifyContent: 'flex-end',
-                                                                } }, { children: 'view report →' }))) : null] })), _jsx("div", __assign({ style: { padding: 0 } }, { children: _jsx(Chart, { containerStyle: {
+                                                                }, children: 'view report →' })) : null] }), (0, jsx_runtime_1.jsx)("div", { style: { padding: 0 }, children: (0, jsx_runtime_1.jsx)(Chart_1.default, { containerStyle: {
                                                                 display: 'flex',
                                                                 // width: '100%',
                                                                 height: 30,
                                                                 // marginBottom: 50,
                                                                 marginTop: 20,
-                                                            }, isDateFilter: true, chartId: elem._id, query: elem.queryString }) }))] })) })) })) }), elem.name + '' + index));
-                            }) }))) : null, _jsx("div", __assign({ style: {
+                                                            }, dateFilter: true, chartId: elem._id, query: elem.queryString }) })] }) }) }) }, elem.name + '' + index));
+                            }) })) : null, (0, jsx_runtime_1.jsx)("div", { style: {
                                 // width: `100%`,
                                 listStyleType: 'none',
                                 display: 'grid',
                                 gridGap: 25,
                                 boxSizing: 'content-box',
-                                gridTemplateColumns: "repeat(auto-fill,minmax(".concat(maxColumnWidth || 400, "px, 1fr))"),
-                                gridTemplateRows: "repeat(auto-fill, ".concat(rowHeight || 400, "px)"),
-                            } }, { children: dashboardSections[section]
-                                .filter(function (elem) { return elem.chartType !== 'metric'; })
-                                .map(function (elem, index) {
-                                var _a;
-                                return (_jsx("div", __assign({ onClick: onClickDashboardItem
-                                        ? function () { return handleOnClickDashboardItem(elem._id); }
+                                gridTemplateColumns: `repeat(auto-fill,minmax(${maxColumnWidth || 400}px, 1fr))`,
+                                gridTemplateRows: `repeat(auto-fill, ${rowHeight || 400}px)`,
+                            }, children: dashboardSections[section]
+                                .filter(elem => elem.chartType !== 'metric')
+                                .map((elem, index) => {
+                                return ((0, jsx_runtime_1.jsx)("div", { onClick: onClickDashboardItem
+                                        ? () => handleOnClickDashboardItem(elem._id)
                                         : undefined, 
                                     // onClick={() => handleEditDashboardItem(elem)}
                                     // className="qq-shadow"
@@ -320,21 +305,21 @@ export default function Dashboard(_a) {
                                         minHeight: rowHeight || 400,
                                         borderRadius: 8,
                                         paddingTop: 20,
-                                    } }, { children: _jsx("div", __assign({ style: {
+                                    }, children: (0, jsx_runtime_1.jsx)("div", { style: {
                                             width: '100%',
                                             height: '100%',
                                             boxSizing: 'content-box',
-                                        } }, { children: _jsx("div", __assign({ style: {
+                                        }, children: (0, jsx_runtime_1.jsx)("div", { style: {
                                                 width: '100%',
                                                 height: '100%',
                                                 boxSizing: 'content-box',
-                                            } }, { children: _jsxs("div", __assign({ style: {
+                                            }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
                                                     display: 'flex',
                                                     flexDirection: 'column',
                                                     justifyContent: 'space-between',
                                                     height: '100%',
                                                     boxSizing: 'content-box',
-                                                } }, { children: [_jsxs("div", __assign({ style: {
+                                                }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
                                                             display: 'flex',
                                                             flexDirection: 'row',
                                                             justifyContent: 'space-between',
@@ -343,7 +328,7 @@ export default function Dashboard(_a) {
                                                             // paddingLeft: theme.padding,
                                                             // paddingRight: theme.padding,
                                                             // paddingTop: theme.padding,
-                                                        } }, { children: [_jsx("div", __assign({ style: {
+                                                        }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
                                                                     fontFamily: theme.fontFamily,
                                                                     color: theme.primaryTextColor,
                                                                     boxSizing: 'content-box',
@@ -360,7 +345,7 @@ export default function Dashboard(_a) {
                                                                     display: 'block',
                                                                     maxWidth: '100%',
                                                                     overflow: 'hidden',
-                                                                } }, { children: elem.name })), onClickDashboardItem ? (_jsx("div", __assign({ 
+                                                                }, children: elem.name }), onClickDashboardItem ? ((0, jsx_runtime_1.jsx)("div", { 
                                                                 // className="hover:bg-black"
                                                                 style: {
                                                                     fontFamily: theme.fontFamily,
@@ -373,27 +358,27 @@ export default function Dashboard(_a) {
                                                                     display: 'flex',
                                                                     alignItems: 'center',
                                                                     justifyContent: 'flex-end',
-                                                                } }, { children: 'view report →' }))) : null] })), _jsx("div", __assign({ style: {
+                                                                }, children: 'view report →' })) : null] }), (0, jsx_runtime_1.jsx)("div", { style: {
                                                             padding: 0,
                                                             height: '100%',
                                                             boxSizing: 'content-box',
-                                                        } }, { children: _jsx(Chart, { containerStyle: {
+                                                        }, children: (0, jsx_runtime_1.jsx)(Chart_1.default, { containerStyle: {
                                                                 display: 'flex',
                                                                 width: '100%',
                                                                 // TODO: fix fixed height
                                                                 height: 300,
                                                                 marginBottom: 50,
                                                                 marginTop: 30,
-                                                            }, isDateFilter: true, chartId: elem._id, colors: ((_a = theme.chartColors) === null || _a === void 0 ? void 0 : _a.length)
+                                                            }, isDateFilter: true, chartId: elem._id, colors: theme.chartColors?.length
                                                                 ? theme.chartColors
-                                                                : undefined }) }))] })) })) })) }), elem.name + '' + index));
-                            }) }))] }), section + '' + sectionIndex));
-            })] })));
+                                                                : undefined }) })] }) }) }) }, elem.name + '' + index));
+                            }) })] }, section + '' + sectionIndex));
+            })] }));
 }
-function Filter(_a) {
-    var _b;
-    var defaultValue = _a.defaultValue, theme = _a.theme, onValueChange = _a.onValueChange, filter = _a.filter;
-    var dropdownOptions = [
+exports.default = Dashboard;
+function Filter({ defaultValue, theme, onValueChange, filter }) {
+    //should be date as well as strings
+    const dropdownOptions = [
         { value: 'popupbagelsmardens', text: 'popupbagelsmardens' },
         { value: 'popupbagelswestport', text: 'popupbagelswestport' },
         { value: 'popupbagelseasthampton', text: 'popupbagelseasthampton' },
@@ -401,23 +386,23 @@ function Filter(_a) {
         { value: 'popupbagelsredding', text: 'popupbagelsredding' },
         { value: 'popupbagelsthompson', text: 'popupbagelsthompson' },
     ];
-    var dropdownRef = useRef(null);
-    var _c = useState(false), showDropdown = _c[0], setShowDropdown = _c[1];
-    var _d = useInternalState(defaultValue, undefined), selectedValue = _d[0], setSelectedValue = _d[1];
-    var selectedDropdownValue = selectedValue ? (_b = selectedValue[2]) !== null && _b !== void 0 ? _b : null : null;
-    var handleDropdownOptionClick = function (dropdownValue) {
+    const dropdownRef = (0, react_1.useRef)(null);
+    const [showDropdown, setShowDropdown] = (0, react_1.useState)(false);
+    const [selectedValue, setSelectedValue] = (0, hooks_1.useInternalState)(defaultValue, undefined);
+    const selectedDropdownValue = selectedValue ? selectedValue[2] ?? null : null;
+    const handleDropdownOptionClick = (dropdownValue) => {
         setSelectedValue([undefined, undefined, dropdownValue]);
-        onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange([undefined, undefined, dropdownValue]);
+        onValueChange?.([undefined, undefined, dropdownValue]);
         setShowDropdown(false);
     };
-    var _e = useSelectOnKeyDown(handleDropdownOptionClick, dropdownOptions.map(function (option) { return option.value; }), showDropdown, setShowDropdown, selectedDropdownValue), hoveredDropdownValue = _e[0], handleDropdownKeyDown = _e[1];
-    return (_jsxs("div", __assign({ style: { position: 'relative', width: '100%' } }, { children: [_jsx("div", __assign({ style: {
+    const [hoveredDropdownValue, handleDropdownKeyDown] = (0, hooks_1.useSelectOnKeyDown)(handleDropdownOptionClick, dropdownOptions.map((option) => option.value), showDropdown, setShowDropdown, selectedDropdownValue);
+    return ((0, jsx_runtime_1.jsxs)("div", { style: { position: 'relative', width: '100%' }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
                     marginBottom: 6,
                     fontWeight: '600',
                     color: theme.secondaryTextColor,
                     fontSize: 14,
                     fontFamily: theme.fontFamily,
-                } }, { children: filter.label })), _jsx(FilterDropdown, { showDropdown: showDropdown, setShowDropdown: setShowDropdown, handleDropdownKeyDown: handleDropdownKeyDown, dropdownRef: dropdownRef, theme: theme, selectedDropdownValue: selectedDropdownValue, dropdownOptions: filter.options, field: filter.field, label: filter.labelField }), _jsx(FilterModal, { showDropdown: showDropdown, setShowDropdown: setShowDropdown, dropdownRef: dropdownRef, theme: theme, hoveredDropdownValue: hoveredDropdownValue, selectedDropdownValue: selectedDropdownValue, dropdownOptions: filter.options, handleDropdownOptionClick: handleDropdownOptionClick, field: filter.field, label: filter.labelField })] })));
+                }, children: filter.label }), (0, jsx_runtime_1.jsx)(FilterDropdown, { showDropdown: showDropdown, setShowDropdown: setShowDropdown, handleDropdownKeyDown: handleDropdownKeyDown, dropdownRef: dropdownRef, theme: theme, selectedDropdownValue: selectedDropdownValue, dropdownOptions: filter.options, field: filter.field, label: filter.labelField }), (0, jsx_runtime_1.jsx)(FilterModal, { showDropdown: showDropdown, setShowDropdown: setShowDropdown, dropdownRef: dropdownRef, theme: theme, hoveredDropdownValue: hoveredDropdownValue, selectedDropdownValue: selectedDropdownValue, dropdownOptions: filter.options, handleDropdownOptionClick: handleDropdownOptionClick, field: filter.field, label: filter.labelField })] }));
 }
 function removeQuotes(str) {
     if (str.startsWith('"') && str.endsWith('"')) {
@@ -427,22 +412,21 @@ function removeQuotes(str) {
         return str;
     }
 }
-function FilterDropdown(_a) {
-    var setShowDropdown = _a.setShowDropdown, dropdownRef = _a.dropdownRef, showDropdown = _a.showDropdown, handleDropdownKeyDown = _a.handleDropdownKeyDown, theme = _a.theme, _b = _a.dropdownPlaceholder, dropdownPlaceholder = _b === void 0 ? 'Select' : _b, selectedDropdownValue = _a.selectedDropdownValue, dropdownOptions = _a.dropdownOptions, field = _a.field, label = _a.label;
-    var dropdownText = selectedDropdownValue
-        ? String(dropdownOptions.find(function (option) { return option[removeQuotes(field)] === selectedDropdownValue; })[removeQuotes(label)])
+function FilterDropdown({ setShowDropdown, dropdownRef, showDropdown, handleDropdownKeyDown, theme, dropdownPlaceholder = 'Select', selectedDropdownValue, dropdownOptions, field, label, }) {
+    const dropdownText = selectedDropdownValue
+        ? String(dropdownOptions.find(option => option[removeQuotes(field)] === selectedDropdownValue)[removeQuotes(label)])
         : dropdownPlaceholder;
-    return (_jsx("div", __assign({ style: {
+    return ((0, jsx_runtime_1.jsx)("div", { style: {
             display: 'flex',
             alignItems: 'center',
             justifyContent: 'space-between',
             borderRadius: '0.375rem',
-            background: theme === null || theme === void 0 ? void 0 : theme.backgroundColor,
-            fontFamily: theme === null || theme === void 0 ? void 0 : theme.fontFamily,
+            background: theme?.backgroundColor,
+            fontFamily: theme?.fontFamily,
             boxShadow: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
-        } }, { children: _jsxs("button", __assign({ type: "button", style: {
+        }, children: (0, jsx_runtime_1.jsxs)("button", { type: "button", style: {
                 // fontFamily: theme?.fontFamily,
-                borderColor: (theme === null || theme === void 0 ? void 0 : theme.borderColor) || '#E5E7EB',
+                borderColor: theme?.borderColor || '#E5E7EB',
                 borderStyle: 'solid',
                 borderWidth: 1,
                 cursor: 'pointer',
@@ -459,31 +443,30 @@ function FilterDropdown(_a) {
                 minHeight: 38,
                 justifyContent: 'space-between',
                 alignItems: 'center',
-                background: theme === null || theme === void 0 ? void 0 : theme.backgroundColor,
-                fontSize: (theme === null || theme === void 0 ? void 0 : theme.fontSizeSmall) || '0.875rem',
+                background: theme?.backgroundColor,
+                fontSize: theme?.fontSizeSmall || '0.875rem',
                 // fontWeight: theme?.fontWeightMedium || '800',
-            }, ref: dropdownRef, onClick: function () { return setShowDropdown(!showDropdown); }, onKeyDown: handleDropdownKeyDown }, { children: [_jsx("p", __assign({ style: {
+            }, ref: dropdownRef, onClick: () => setShowDropdown(!showDropdown), onKeyDown: handleDropdownKeyDown, children: [(0, jsx_runtime_1.jsx)("p", { style: {
                         margin: 0,
-                        fontFamily: theme === null || theme === void 0 ? void 0 : theme.fontFamily,
-                        color: (theme === null || theme === void 0 ? void 0 : theme.primaryTextColor) || '#364153',
+                        fontFamily: theme?.fontFamily,
+                        color: theme?.primaryTextColor || '#364153',
                         overflow: 'hidden',
                         textOverflow: 'ellipsis',
                         whiteSpace: 'nowrap',
-                        fontWeight: (theme === null || theme === void 0 ? void 0 : theme.fontWeightMedium) || '500',
-                        fontSize: (theme === null || theme === void 0 ? void 0 : theme.fontSizeSmall) || '0.875rem',
-                    } }, { children: dropdownText })), _jsx(ArrowDownHeadIcon, { style: {
+                        fontWeight: theme?.fontWeightMedium || '500',
+                        fontSize: theme?.fontSizeSmall || '0.875rem',
+                    }, children: dropdownText }), (0, jsx_runtime_1.jsx)(assets_1.ArrowDownHeadIcon, { style: {
                         height: '1.25rem',
                         width: '1.25rem',
                         flex: 'none',
-                        color: theme === null || theme === void 0 ? void 0 : theme.secondaryTextColor,
+                        color: theme?.secondaryTextColor,
                         marginRight: '-0.25rem',
-                    }, "aria-hidden": "true" })] })) })));
+                    }, "aria-hidden": "true" })] }) }));
 }
-function FilterModal(_a) {
-    var setShowDropdown = _a.setShowDropdown, dropdownRef = _a.dropdownRef, showDropdown = _a.showDropdown, theme = _a.theme, selectedDropdownValue = _a.selectedDropdownValue, hoveredDropdownValue = _a.hoveredDropdownValue, dropdownOptions = _a.dropdownOptions, handleDropdownOptionClick = _a.handleDropdownOptionClick, field = _a.field, label = _a.label;
-    return (_jsx(Modal, __assign({ showModal: showDropdown, setShowModal: setShowDropdown, parentRef: dropdownRef, theme: theme }, { children: _jsx(SelectedValueContext.Provider, __assign({ value: {
+function FilterModal({ setShowDropdown, dropdownRef, showDropdown, theme, selectedDropdownValue, hoveredDropdownValue, dropdownOptions, handleDropdownOptionClick, field, label, }) {
+    return ((0, jsx_runtime_1.jsx)(Modal_1.default, { showModal: showDropdown, setShowModal: setShowDropdown, parentRef: dropdownRef, theme: theme, children: (0, jsx_runtime_1.jsx)(contexts_1.SelectedValueContext.Provider, { value: {
                 selectedValue: selectedDropdownValue,
                 handleValueChange: handleDropdownOptionClick,
-            } }, { children: _jsx(HoveredValueContext.Provider, __assign({ value: { hoveredValue: hoveredDropdownValue } }, { children: dropdownOptions.map(function (row, index) { return (_jsx(DropdownItem, { value: row[removeQuotes(field)], text: row[removeQuotes(label)], theme: theme, lastItem: dropdownOptions.length - 1 === index }, row[removeQuotes(field)])); }) })) })) })));
+            }, children: (0, jsx_runtime_1.jsx)(contexts_1.HoveredValueContext.Provider, { value: { hoveredValue: hoveredDropdownValue }, children: dropdownOptions.map((row, index) => ((0, jsx_runtime_1.jsx)(Dropdown_1.DropdownItem, { value: row[removeQuotes(field)], text: row[removeQuotes(label)], theme: theme, lastItem: dropdownOptions.length - 1 === index }, row[removeQuotes(field)]))) }) }) }));
 }
 //# sourceMappingURL=Dashboard.js.map