@quillsql/react 1.7.1 → 1.7.2

package/lib/Dashboard.js

@@ -1,45 +1,64 @@
-"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 __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 __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+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 };
+    }
 };
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /* eslint-disable @typescript-eslint/ban-ts-comment */
 // @ts-nocheck
-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");
+import React, { useContext, useEffect, useState, useRef } from 'react';
+import Chart from './Chart';
+import { ClientContext, DashboardContext, 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 theme = {
 //   fontFamily: 'Inter; Helvetica',
 //   primaryTextColor: '#212121',
@@ -48,83 +67,93 @@ const hooks_1 = require("./hooks");
 //   chartTickColor: '#CCCCCC',
 //   chartColors: ['#6269E9', '#E14F62'],
 // };
-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}`);
+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 client = useContext(ClientContext)[0];
+    var theme = useContext(ThemeContext)[0];
+    var dashboardFiltersDispatch = useContext(DashboardFiltersContext).dashboardFiltersDispatch;
+    var _c = useState([]), configFilters = _c[0], setConfigFilters = _c[1];
+    React.useEffect(function () {
+        function getDashboards() {
+            return __awaiter(this, void 0, void 0, function () {
+                var publicKey, customerId, environment, queryEndpoint, queryHeaders, withCredentials, 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, withCredentials = client.withCredentials;
+                            _a.label = 1;
+                        case 1:
+                            _a.trys.push([1, 5, , 6]);
+                            if (!queryEndpoint) return [3 /*break*/, 3];
+                            return [4 /*yield*/, axios.post(queryEndpoint, {
+                                    metadata: { name: name, task: 'config' },
+                                }, {
+                                    headers: queryHeaders,
+                                    withCredentials: withCredentials,
+                                })];
+                        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*/];
                     }
-                    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]);
-    (0, react_1.useEffect)(() => {
+    useEffect(function () {
         // change to be set on the dashboard / section as default date range
-        const filter = {
-            startDate: (0, date_fns_1.sub)((0, date_fns_1.startOfToday)(), { days: 90 }),
+        var filter = {
+            startDate: sub(startOfToday(), { days: 90 }),
             endDate: new Date(),
             filterType: 'DATE_RANGE',
         };
         dashboardFiltersDispatch({
             type: 'ADD_DASHBOARD_FILTER',
             id: 'date_range',
-            data: {
-                ...filter,
-            },
+            data: __assign({}, filter),
         });
     }, []);
-    const handleOnClickDashboardItem = id => {
+    var handleOnClickDashboardItem = function (id) {
         if (dashboard[id]) {
             onClickDashboardItem(dashboard[id]);
         }
     };
-    const onChangeDateFilter = dateFilter => {
+    var onChangeDateFilter = function (dateFilter) {
         setGlobalDateFilter(dateFilter[0], dateFilter[1]);
     };
-    const setGlobalDateFilter = (startDate, endDate) => {
-        const filter = {
+    var setGlobalDateFilter = function (startDate, endDate) {
+        var filter = {
             startDate: startDate,
             endDate: endDate,
             filterType: 'DATE_RANGE',
@@ -132,53 +161,48 @@ function Dashboard({ name, containerStyle, maxColumnWidth, rowHeight, onClickDas
         dashboardFiltersDispatch({
             type: 'ADD_DASHBOARD_FILTER',
             id: 'date_range',
-            data: {
-                ...filter,
-            },
+            data: __assign({}, filter),
         });
     };
-    const onChangeFilter = (value, filter) => {
+    var onChangeFilter = function (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)],
-            },
+            data: __assign(__assign({}, filter), { selectedValue: filter.options.find(function (elem) { return elem[removeQuotes(filter.field)] === value[2]; })[removeQuotes(filter.field)] }),
         });
     };
     if (!dashboardSections) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsxs)("div", { style: containerStyle, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
+    return (_jsxs("div", __assign({ style: containerStyle }, { children: [_jsxs("div", __assign({ style: {
                     display: 'flex',
                     boxSizing: 'content-box',
                     flexDirection: 'row',
                     alignItems: 'center',
-                }, children: [!hideDateFilter ? ((0, jsx_runtime_1.jsxs)("div", { style: { width: 420, marginBottom: 25, marginLeft: 25 }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+                } }, { children: [!hideDateFilter ? (_jsxs("div", __assign({ style: { width: 420, marginBottom: 25, marginLeft: 25 } }, { children: [_jsx("div", __assign({ style: {
                                     marginBottom: 6,
                                     fontWeight: '600',
                                     color: theme.secondaryTextColor,
                                     fontFamily: theme.fontFamily,
                                     fontSize: 14,
-                                }, children: "Date" }), (0, jsx_runtime_1.jsx)(index_1.DateRangePicker
+                                } }, { children: "Date" })), _jsx(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, (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: [
+                                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: [
                                 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((section, sectionIndex) => {
-                return ((0, jsx_runtime_1.jsxs)("div", { style: {
+                .map(function (section, sectionIndex) {
+                return (_jsxs("div", __assign({ style: {
                         width: '100%',
                         display: 'flex',
                         flexDirection: 'column',
-                    }, 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: {
+                    } }, { children: [_jsxs("div", __assign({ style: { display: 'flex', flexDirection: 'column' } }, { children: [_jsx("div", { style: { height: sectionIndex > 0 ? 25 : 0 } }), section && (_jsx("h1", __assign({ style: {
                                         fontSize: 22,
                                         color: theme.primaryTextColor,
                                         fontFamily: theme.fontFamily,
@@ -188,20 +212,20 @@ function Dashboard({ name, containerStyle, maxColumnWidth, rowHeight, onClickDas
                                         marginLeft: 25,
                                         textAlign: 'left',
                                         marginTop: 12,
-                                    }, children: section }))] }), dashboardSections[section].filter(elem => elem.chartType === 'metric').length ? ((0, jsx_runtime_1.jsx)("div", { style: {
+                                    } }, { children: section })))] })), dashboardSections[section].filter(function (elem) { return elem.chartType === 'metric'; }).length ? (_jsx("div", __assign({ style: {
                                 boxSizing: 'content-box',
-                                width: `100%`,
+                                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')
-                                .map((elem, index) => {
-                                return ((0, jsx_runtime_1.jsx)("div", { onClick: onClickDashboardItem
-                                        ? () => handleOnClickDashboardItem(elem._id)
+                                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); }
                                         : undefined, style: {
                                         // background: theme.elevatedCardColor,
                                         // borderRadius: theme.borderRadius,
@@ -212,22 +236,22 @@ function Dashboard({ name, containerStyle, maxColumnWidth, rowHeight, onClickDas
                                         height: '100%',
                                         cursor: 'pointer',
                                         width: '100%',
-                                    }, children: (0, jsx_runtime_1.jsx)("div", { 
+                                    } }, { children: _jsx("div", __assign({ 
                                         // className="group-hover:bg-black"
                                         style: {
                                             width: '100%',
                                             boxSizing: 'content-box',
                                             height: '100%',
-                                        }, children: (0, jsx_runtime_1.jsx)("div", { style: {
+                                        } }, { children: _jsx("div", __assign({ style: {
                                                 width: '100%',
                                                 boxSizing: 'content-box',
                                                 height: '100%',
-                                            }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
+                                            } }, { children: _jsxs("div", __assign({ style: {
                                                     display: 'flex',
                                                     flexDirection: 'column',
                                                     justifyContent: 'space-between',
                                                     boxSizing: 'content-box',
-                                                }, children: [(0, jsx_runtime_1.jsxs)("div", { 
+                                                } }, { children: [_jsxs("div", __assign({ 
                                                         // className="group-hover:bg-black"
                                                         style: {
                                                             display: 'flex',
@@ -238,7 +262,7 @@ function Dashboard({ name, containerStyle, maxColumnWidth, rowHeight, onClickDas
                                                             // paddingLeft: theme.padding,
                                                             paddingRight: 25,
                                                             // paddingTop: theme.padding,
-                                                        }, children: [(0, jsx_runtime_1.jsx)("div", { title: elem.name, style: {
+                                                        } }, { children: [_jsx("div", __assign({ title: elem.name, style: {
                                                                     fontFamily: theme.fontFamily,
                                                                     color: theme.primaryTextColor,
                                                                     boxSizing: 'content-box',
@@ -257,7 +281,7 @@ function Dashboard({ name, containerStyle, maxColumnWidth, rowHeight, onClickDas
                                                                     display: 'block',
                                                                     maxWidth: '100%',
                                                                     overflow: 'hidden',
-                                                                }, children: elem.name }), onClickDashboardItem ? ((0, jsx_runtime_1.jsx)("div", { 
+                                                                } }, { children: elem.name })), onClickDashboardItem ? (_jsx("div", __assign({ 
                                                                 // className="hover:bg-black"
                                                                 style: {
                                                                     fontFamily: theme.fontFamily,
@@ -270,26 +294,27 @@ function Dashboard({ name, containerStyle, maxColumnWidth, rowHeight, onClickDas
                                                                     display: 'flex',
                                                                     alignItems: 'center',
                                                                     justifyContent: 'flex-end',
-                                                                }, children: 'view report →' })) : null] }), (0, jsx_runtime_1.jsx)("div", { style: { padding: 0 }, children: (0, jsx_runtime_1.jsx)(Chart_1.default, { containerStyle: {
+                                                                } }, { children: 'view report →' }))) : null] })), _jsx("div", __assign({ style: { padding: 0 } }, { children: _jsx(Chart, { containerStyle: {
                                                                 display: 'flex',
                                                                 // width: '100%',
                                                                 height: 30,
                                                                 // marginBottom: 50,
                                                                 marginTop: 20,
-                                                            }, dateFilter: true, chartId: elem._id, query: elem.queryString }) })] }) }) }) }, elem.name + '' + index));
-                            }) })) : null, (0, jsx_runtime_1.jsx)("div", { style: {
+                                                            }, dateFilter: true, chartId: elem._id, query: elem.queryString }) }))] })) })) })) }), elem.name + '' + index));
+                            }) }))) : null, _jsx("div", __assign({ style: {
                                 // width: `100%`,
                                 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')
-                                .map((elem, index) => {
-                                return ((0, jsx_runtime_1.jsx)("div", { onClick: onClickDashboardItem
-                                        ? () => handleOnClickDashboardItem(elem._id)
+                                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); }
                                         : undefined, 
                                     // onClick={() => handleEditDashboardItem(elem)}
                                     // className="qq-shadow"
@@ -305,21 +330,21 @@ function Dashboard({ name, containerStyle, maxColumnWidth, rowHeight, onClickDas
                                         minHeight: rowHeight || 400,
                                         borderRadius: 8,
                                         paddingTop: 20,
-                                    }, children: (0, jsx_runtime_1.jsx)("div", { style: {
+                                    } }, { children: _jsx("div", __assign({ style: {
                                             width: '100%',
                                             height: '100%',
                                             boxSizing: 'content-box',
-                                        }, children: (0, jsx_runtime_1.jsx)("div", { style: {
+                                        } }, { children: _jsx("div", __assign({ style: {
                                                 width: '100%',
                                                 height: '100%',
                                                 boxSizing: 'content-box',
-                                            }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
+                                            } }, { children: _jsxs("div", __assign({ style: {
                                                     display: 'flex',
                                                     flexDirection: 'column',
                                                     justifyContent: 'space-between',
                                                     height: '100%',
                                                     boxSizing: 'content-box',
-                                                }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
+                                                } }, { children: [_jsxs("div", __assign({ style: {
                                                             display: 'flex',
                                                             flexDirection: 'row',
                                                             justifyContent: 'space-between',
@@ -328,7 +353,7 @@ function Dashboard({ name, containerStyle, maxColumnWidth, rowHeight, onClickDas
                                                             // paddingLeft: theme.padding,
                                                             // paddingRight: theme.padding,
                                                             // paddingTop: theme.padding,
-                                                        }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+                                                        } }, { children: [_jsx("div", __assign({ style: {
                                                                     fontFamily: theme.fontFamily,
                                                                     color: theme.primaryTextColor,
                                                                     boxSizing: 'content-box',
@@ -345,7 +370,7 @@ function Dashboard({ name, containerStyle, maxColumnWidth, rowHeight, onClickDas
                                                                     display: 'block',
                                                                     maxWidth: '100%',
                                                                     overflow: 'hidden',
-                                                                }, children: elem.name }), onClickDashboardItem ? ((0, jsx_runtime_1.jsx)("div", { 
+                                                                } }, { children: elem.name })), onClickDashboardItem ? (_jsx("div", __assign({ 
                                                                 // className="hover:bg-black"
                                                                 style: {
                                                                     fontFamily: theme.fontFamily,
@@ -358,27 +383,28 @@ function Dashboard({ name, containerStyle, maxColumnWidth, rowHeight, onClickDas
                                                                     display: 'flex',
                                                                     alignItems: 'center',
                                                                     justifyContent: 'flex-end',
-                                                                }, children: 'view report →' })) : null] }), (0, jsx_runtime_1.jsx)("div", { style: {
+                                                                } }, { children: 'view report →' }))) : null] })), _jsx("div", __assign({ style: {
                                                             padding: 0,
                                                             height: '100%',
                                                             boxSizing: 'content-box',
-                                                        }, children: (0, jsx_runtime_1.jsx)(Chart_1.default, { containerStyle: {
+                                                        } }, { children: _jsx(Chart, { containerStyle: {
                                                                 display: 'flex',
                                                                 width: '100%',
                                                                 // TODO: fix fixed height
                                                                 height: 300,
                                                                 marginBottom: 50,
                                                                 marginTop: 30,
-                                                            }, isDateFilter: true, chartId: elem._id, colors: theme.chartColors?.length
+                                                            }, isDateFilter: true, chartId: elem._id, colors: ((_a = theme.chartColors) === null || _a === void 0 ? void 0 : _a.length)
                                                                 ? theme.chartColors
-                                                                : undefined }) })] }) }) }) }, elem.name + '' + index));
-                            }) })] }, section + '' + sectionIndex));
-            })] }));
+                                                                : undefined }) }))] })) })) })) }), elem.name + '' + index));
+                            }) }))] }), section + '' + sectionIndex));
+            })] })));
 }
-exports.default = Dashboard;
-function Filter({ defaultValue, theme, onValueChange, filter }) {
+function Filter(_a) {
+    var _b;
+    var defaultValue = _a.defaultValue, theme = _a.theme, onValueChange = _a.onValueChange, filter = _a.filter;
     //should be date as well as strings
-    const dropdownOptions = [
+    var dropdownOptions = [
         { value: 'popupbagelsmardens', text: 'popupbagelsmardens' },
         { value: 'popupbagelswestport', text: 'popupbagelswestport' },
         { value: 'popupbagelseasthampton', text: 'popupbagelseasthampton' },
@@ -386,23 +412,23 @@ function Filter({ defaultValue, theme, onValueChange, filter }) {
         { value: 'popupbagelsredding', text: 'popupbagelsredding' },
         { value: 'popupbagelsthompson', text: 'popupbagelsthompson' },
     ];
-    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) => {
+    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) {
         setSelectedValue([undefined, undefined, dropdownValue]);
-        onValueChange?.([undefined, undefined, dropdownValue]);
+        onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange([undefined, undefined, dropdownValue]);
         setShowDropdown(false);
     };
-    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: {
+    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: {
                     marginBottom: 6,
                     fontWeight: '600',
                     color: theme.secondaryTextColor,
                     fontSize: 14,
                     fontFamily: theme.fontFamily,
-                }, 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 })] }));
+                } }, { 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 })] })));
 }
 function removeQuotes(str) {
     if (str.startsWith('"') && str.endsWith('"')) {
@@ -412,21 +438,22 @@ function removeQuotes(str) {
         return str;
     }
 }
-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)])
+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)])
         : dropdownPlaceholder;
-    return ((0, jsx_runtime_1.jsx)("div", { style: {
+    return (_jsx("div", __assign({ style: {
             display: 'flex',
             alignItems: 'center',
             justifyContent: 'space-between',
             borderRadius: '0.375rem',
-            background: theme?.backgroundColor,
-            fontFamily: theme?.fontFamily,
+            background: theme === null || theme === void 0 ? void 0 : theme.backgroundColor,
+            fontFamily: theme === null || theme === void 0 ? void 0 : theme.fontFamily,
             boxShadow: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
-        }, children: (0, jsx_runtime_1.jsxs)("button", { type: "button", style: {
+        } }, { children: _jsxs("button", __assign({ type: "button", style: {
                 // fontFamily: theme?.fontFamily,
-                borderColor: theme?.borderColor || '#E5E7EB',
+                borderColor: (theme === null || theme === void 0 ? void 0 : theme.borderColor) || '#E5E7EB',
                 borderStyle: 'solid',
                 borderWidth: 1,
                 cursor: 'pointer',
@@ -443,30 +470,31 @@ function FilterDropdown({ setShowDropdown, dropdownRef, showDropdown, handleDrop
                 minHeight: 38,
                 justifyContent: 'space-between',
                 alignItems: 'center',
-                background: theme?.backgroundColor,
-                fontSize: theme?.fontSizeSmall || '0.875rem',
+                background: theme === null || theme === void 0 ? void 0 : theme.backgroundColor,
+                fontSize: (theme === null || theme === void 0 ? void 0 : theme.fontSizeSmall) || '0.875rem',
                 // fontWeight: theme?.fontWeightMedium || '800',
-            }, ref: dropdownRef, onClick: () => setShowDropdown(!showDropdown), onKeyDown: handleDropdownKeyDown, children: [(0, jsx_runtime_1.jsx)("p", { style: {
+            }, ref: dropdownRef, onClick: function () { return setShowDropdown(!showDropdown); }, onKeyDown: handleDropdownKeyDown }, { children: [_jsx("p", __assign({ style: {
                         margin: 0,
-                        fontFamily: theme?.fontFamily,
-                        color: theme?.primaryTextColor || '#364153',
+                        fontFamily: theme === null || theme === void 0 ? void 0 : theme.fontFamily,
+                        color: (theme === null || theme === void 0 ? void 0 : theme.primaryTextColor) || '#364153',
                         overflow: 'hidden',
                         textOverflow: 'ellipsis',
                         whiteSpace: 'nowrap',
-                        fontWeight: theme?.fontWeightMedium || '500',
-                        fontSize: theme?.fontSizeSmall || '0.875rem',
-                    }, children: dropdownText }), (0, jsx_runtime_1.jsx)(assets_1.ArrowDownHeadIcon, { style: {
+                        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: {
                         height: '1.25rem',
                         width: '1.25rem',
                         flex: 'none',
-                        color: theme?.secondaryTextColor,
+                        color: theme === null || theme === void 0 ? void 0 : theme.secondaryTextColor,
                         marginRight: '-0.25rem',
-                    }, "aria-hidden": "true" })] }) }));
+                    }, "aria-hidden": "true" })] })) })));
 }
-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: {
+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: {
                 selectedValue: selectedDropdownValue,
                 handleValueChange: handleDropdownOptionClick,
-            }, 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)]))) }) }) }));
+            } }, { 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)])); }) })) })) })));
 }
 //# sourceMappingURL=Dashboard.js.map