@quillsql/react 1.7.1 → 1.7.2

package/lib/Chart.js

@@ -1,47 +1,74 @@
-"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]; } };
+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 };
     }
-    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 };
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
 };
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ChartTooltipRow = exports.ChartTooltipFrame = exports.valueFormatter = void 0;
-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 = require("react");
-const recharts_1 = require("recharts");
-const date_fns_1 = require("date-fns");
-const date_fns_tz_1 = require("date-fns-tz");
-const BarList_1 = __importDefault(require("./BarList"));
-const PieChart_1 = __importStar(require("./PieChart"));
-const axios_1 = __importDefault(require("axios"));
-const Context_1 = require("./Context");
-const react_loading_skeleton_1 = __importDefault(require("react-loading-skeleton"));
-require("react-loading-skeleton/dist/skeleton.css");
-const TableChart_1 = __importDefault(require("./TableChart"));
-const colorValues = [
+import { useState, useEffect, useContext, useMemo } from 'react';
+import { Area, CartesianGrid, ComposedChart as ReChartsAreaChart, ResponsiveContainer, Tooltip, XAxis, YAxis, Bar, BarChart as ReChartsBarChart, } from 'recharts';
+import { endOfWeek, format, isValid, startOfWeek } from 'date-fns';
+import { utcToZonedTime } from 'date-fns-tz';
+import BarList from './BarList';
+import PieChart, { findComplementaryAndAnalogousColors } from './PieChart';
+import axios from 'axios';
+import { ClientContext, DashboardContext, ThemeContext, DashboardFiltersContext, } from './Context';
+import Skeleton from 'react-loading-skeleton';
+import 'react-loading-skeleton/dist/skeleton.css';
+import TableChart from './TableChart';
+var colorValues = [
     'slate',
     'gray',
     'zinc',
@@ -97,20 +124,21 @@ const colorValues = [
 //     'The Pragmatic Engineer': 1726,
 //   },
 // ];
-const valueFormatter = ({ value, field, fields }) => {
+export var valueFormatter = function (_a) {
+    var value = _a.value, field = _a.field, fields = _a.fields;
     if (value === undefined ||
         value === null ||
         field === undefined ||
         field === null) {
         return '';
     }
-    const fieldInfo = fields.find(f => f.field === field);
+    var fieldInfo = fields.find(function (f) { return f.field === field; });
     if (!fieldInfo) {
         return '';
     }
-    const formatType = fieldInfo.format;
-    const numValue = Number(value);
-    const absNumber = isNaN(numValue) ? 0 : Math.abs(numValue);
+    var formatType = fieldInfo.format;
+    var numValue = Number(value);
+    var absNumber = isNaN(numValue) ? 0 : Math.abs(numValue);
     if (formatType === 'percent') {
         if (absNumber < 1) {
             return (absNumber * 100).toFixed(0) + '%';
@@ -120,7 +148,7 @@ const valueFormatter = ({ value, field, fields }) => {
         }
     }
     if (formatType === 'dollar_amount') {
-        const formatter = new Intl.NumberFormat('en-US', {
+        var formatter = new Intl.NumberFormat('en-US', {
             style: 'currency',
             currency: 'USD',
             minimumFractionDigits: 0,
@@ -147,36 +175,36 @@ const valueFormatter = ({ value, field, fields }) => {
         formatType === 'hh_ap_pm' ||
         formatType === 'MMM_dd-MMM_dd' ||
         formatType === 'MMM_dd_hh:mm_ap_pm') {
-        const dateValue = new Date(value);
-        const utcDate = (0, date_fns_tz_1.utcToZonedTime)(dateValue, 'UTC');
-        if (!(0, date_fns_1.isValid)(utcDate)) {
+        var dateValue = new Date(value);
+        var utcDate = utcToZonedTime(dateValue, 'UTC');
+        if (!isValid(utcDate)) {
             return 'Invalid date';
         }
         if (formatType === 'MMM_yyyy') {
-            return (0, date_fns_1.format)(utcDate, 'MMM yyyy');
+            return format(utcDate, 'MMM yyyy');
         }
         if (formatType === 'MMM_dd_yyyy') {
-            return (0, date_fns_1.format)(utcDate, 'dd MMM yyyy');
+            return format(utcDate, 'dd MMM yyyy');
         }
         if (formatType === 'hh_ap_pm') {
-            return (0, date_fns_1.format)(utcDate, 'hh:mm aa');
+            return format(utcDate, 'hh:mm aa');
         }
         if (formatType === 'MMM_dd-MMM_dd') {
-            const start = (0, date_fns_1.startOfWeek)(utcDate, { weekStartsOn: 1 }); // Monday
-            const end = (0, date_fns_1.endOfWeek)(utcDate, { weekStartsOn: 1 }); // Sunday
-            let formattedDate = '';
+            var start = startOfWeek(utcDate, { weekStartsOn: 1 }); // Monday
+            var end = endOfWeek(utcDate, { weekStartsOn: 1 }); // Sunday
+            var formattedDate = '';
             // Check if start and end are in the same month
-            if ((0, date_fns_1.format)(start, 'MMM') === (0, date_fns_1.format)(end, 'MMM')) {
-                formattedDate = `${(0, date_fns_1.format)(start, 'MMM dd')} - ${(0, date_fns_1.format)(end, 'dd')}`;
+            if (format(start, 'MMM') === format(end, 'MMM')) {
+                formattedDate = "".concat(format(start, 'MMM dd'), " - ").concat(format(end, 'dd'));
             }
             else {
-                formattedDate = `${(0, date_fns_1.format)(start, 'MMM dd')} - ${(0, date_fns_1.format)(end, 'MMM dd')}`;
+                formattedDate = "".concat(format(start, 'MMM dd'), " - ").concat(format(end, 'MMM dd'));
             }
             return formattedDate;
         }
         if (formatType === 'MMM_dd_hh:mm_ap_pm') {
-            const formatStr = utcDate.getMinutes() === 0 ? 'MMM do h a' : 'MMM do h:mm a';
-            let formattedTime = (0, date_fns_1.format)(utcDate, formatStr);
+            var formatStr = utcDate.getMinutes() === 0 ? 'MMM do h a' : 'MMM do h:mm a';
+            var formattedTime = format(utcDate, formatStr);
             formattedTime =
                 formattedTime.slice(0, -2) + formattedTime.slice(-2).toLowerCase();
             return formattedTime;
@@ -187,81 +215,85 @@ const valueFormatter = ({ value, field, fields }) => {
     }
     return value.toString();
 };
-exports.valueFormatter = valueFormatter;
-const yAxisFields = [
+var yAxisFields = [
     { field: 'avg_days', label: 'average days' },
     { field: 'median_days', label: 'median days' },
 ];
-const labelFormatter = (name) => {
+var labelFormatter = function (name) {
     // return yAxisFields.filter(elem => elem.field === name)[0].label;
     return name;
 };
-const ChartTooltipFrame = ({ children, theme, }) => ((0, jsx_runtime_1.jsx)("div", { style: {
-        borderStyle: 'solid',
-        borderColor: theme?.borderColor || '#E5E7EB',
-        overflow: 'hidden',
-        borderWidth: 1,
-        background: theme?.backgroundColor || '#ffffff',
-        borderRadius: '6px',
-        boxShadow: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
-    }, children: children }));
-exports.ChartTooltipFrame = ChartTooltipFrame;
-const ChartTooltipRow = ({ value, name, color, theme, }) => ((0, jsx_runtime_1.jsxs)("div", { style: {
-        marginRight: '24px',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        width: '100%',
-        paddingTop: 2,
-        paddingBottom: 2,
-    }, children: [(0, jsx_runtime_1.jsxs)("div", { 
-            // className="qq-flex qq-items-center qq-space-x-2"
-            style: {
-                // marginLeft: '0.5rem',
-                display: 'flex',
-                alignItems: 'center',
-            }, children: [(0, jsx_runtime_1.jsx)("span", { style: {
-                        background: color,
-                        borderWidth: 2,
-                        borderColor: 'white',
-                        borderStyle: 'solid',
-                        borderColor: 'white',
-                        boxShadow: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
-                        height: '8px',
-                        width: '8px',
-                        borderRadius: 100,
-                        marginRight: 4,
-                    } }), (0, jsx_runtime_1.jsx)("p", { 
-                    // className={twMerge(
-                    //   'font-medium tabular-nums text-right whitespace-nowrap',
-                    //   'text-[#212121] !important'
-                    // )}
-                    style: {
-                        marginTop: 0,
-                        marginBottom: 0,
-                        fontFamily: theme?.fontFamily,
-                        color: theme?.primaryTextColor,
-                        fontSize: theme?.fontSizeSmall || '14px',
-                        fontWeight: theme?.fontWeightMedium || '500',
-                    }, children: value })] }), (0, jsx_runtime_1.jsx)("p", { style: {
-                marginTop: 0,
-                marginBottom: 0,
-                fontFamily: theme?.fontFamily,
-                color: theme?.secondaryTextColor,
-                textAlign: 'right',
-                whiteSpace: 'nowrap',
-                overflow: 'hidden',
-                textOverflow: 'ellipsis',
-                fontSize: theme?.fontSizeSmall || '14px',
-                fontWeight: theme?.fontWeightNormal || '400',
-            }, children: name })] }));
-exports.ChartTooltipRow = ChartTooltipRow;
-const ChartTooltip = ({ active, payload, label, colors, valueFormatter, dateFormatter, theme, }) => {
+export var ChartTooltipFrame = function (_a) {
+    var children = _a.children, theme = _a.theme;
+    return (_jsx("div", __assign({ style: {
+            borderStyle: 'solid',
+            borderColor: (theme === null || theme === void 0 ? void 0 : theme.borderColor) || '#E5E7EB',
+            overflow: 'hidden',
+            borderWidth: 1,
+            background: (theme === null || theme === void 0 ? void 0 : theme.backgroundColor) || '#ffffff',
+            borderRadius: '6px',
+            boxShadow: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
+        } }, { children: children })));
+};
+export var ChartTooltipRow = function (_a) {
+    var value = _a.value, name = _a.name, color = _a.color, theme = _a.theme;
+    return (_jsxs("div", __assign({ style: {
+            marginRight: '24px',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            width: '100%',
+            paddingTop: 2,
+            paddingBottom: 2,
+        } }, { children: [_jsxs("div", __assign({ 
+                // className="qq-flex qq-items-center qq-space-x-2"
+                style: {
+                    // marginLeft: '0.5rem',
+                    display: 'flex',
+                    alignItems: 'center',
+                } }, { children: [_jsx("span", { style: {
+                            background: color,
+                            borderWidth: 2,
+                            borderColor: 'white',
+                            borderStyle: 'solid',
+                            borderColor: 'white',
+                            boxShadow: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
+                            height: '8px',
+                            width: '8px',
+                            borderRadius: 100,
+                            marginRight: 4,
+                        } }), _jsx("p", __assign({ 
+                        // className={twMerge(
+                        //   'font-medium tabular-nums text-right whitespace-nowrap',
+                        //   'text-[#212121] !important'
+                        // )}
+                        style: {
+                            marginTop: 0,
+                            marginBottom: 0,
+                            fontFamily: theme === null || theme === void 0 ? void 0 : theme.fontFamily,
+                            color: theme === null || theme === void 0 ? void 0 : theme.primaryTextColor,
+                            fontSize: (theme === null || theme === void 0 ? void 0 : theme.fontSizeSmall) || '14px',
+                            fontWeight: (theme === null || theme === void 0 ? void 0 : theme.fontWeightMedium) || '500',
+                        } }, { children: value }))] })), _jsx("p", __assign({ style: {
+                    marginTop: 0,
+                    marginBottom: 0,
+                    fontFamily: theme === null || theme === void 0 ? void 0 : theme.fontFamily,
+                    color: theme === null || theme === void 0 ? void 0 : theme.secondaryTextColor,
+                    textAlign: 'right',
+                    whiteSpace: 'nowrap',
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                    fontSize: (theme === null || theme === void 0 ? void 0 : theme.fontSizeSmall) || '14px',
+                    fontWeight: (theme === null || theme === void 0 ? void 0 : theme.fontWeightNormal) || '400',
+                } }, { children: name }))] })));
+};
+var ChartTooltip = function (_a) {
+    var active = _a.active, payload = _a.payload, label = _a.label, colors = _a.colors, valueFormatter = _a.valueFormatter, dateFormatter = _a.dateFormatter, theme = _a.theme;
     if (active && payload) {
-        return ((0, jsx_runtime_1.jsxs)(exports.ChartTooltipFrame, { theme: theme, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+        return (_jsxs(ChartTooltipFrame, __assign({ theme: theme }, { children: [_jsx("div", __assign({ style: {
                         borderStyle: 'solid',
-                        borderBottomColor: theme?.borderColor || '#E5E7EB',
-                        background: theme?.backgroundColor || 'white',
+                        borderBottomColor: (theme === null || theme === void 0 ? void 0 : theme.borderColor) || '#E5E7EB',
+                        background: (theme === null || theme === void 0 ? void 0 : theme.backgroundColor) || 'white',
                         borderTop: 'none',
                         borderLeft: 'none',
                         borderRight: 'none',
@@ -272,21 +304,21 @@ const ChartTooltip = ({ active, payload, label, colors, valueFormatter, dateForm
                         paddingRight: '16px',
                         paddingTop: '8px',
                         paddingBottom: '8px',
-                    }, children: (0, jsx_runtime_1.jsx)("p", { style: {
+                    } }, { children: _jsx("p", __assign({ style: {
                             textAlign: 'left',
                             marginTop: 0,
                             marginBottom: 0,
-                            fontFamily: theme?.fontFamily,
-                            color: theme?.primaryTextColor,
-                            fontSize: theme?.fontSizeSmall || '14px',
-                            fontWeight: theme?.boldFontWeight || '500',
+                            fontFamily: theme === null || theme === void 0 ? void 0 : theme.fontFamily,
+                            color: theme === null || theme === void 0 ? void 0 : theme.primaryTextColor,
+                            fontSize: (theme === null || theme === void 0 ? void 0 : theme.fontSizeSmall) || '14px',
+                            fontWeight: (theme === null || theme === void 0 ? void 0 : theme.boldFontWeight) || '500',
                             paddingTop: 2,
                             paddingBottom: 2,
-                        }, children: !isNaN(new Date(label)) && dateFormatter
+                        } }, { children: !isNaN(new Date(label)) && dateFormatter
                             ? dateFormatter(label)
                             : !isNaN(new Date(label))
-                                ? (0, date_fns_1.format)(new Date(label), 'MMM yyyy')
-                                : label }) }), (0, jsx_runtime_1.jsx)("div", { 
+                                ? format(new Date(label), 'MMM yyyy')
+                                : label })) })), _jsx("div", __assign({ 
                     // className="qq-px-4 qq-space-y-1 qq-py-2 qq-px-4"
                     style: {
                         paddingRight: '16px',
@@ -294,201 +326,209 @@ const ChartTooltip = ({ active, payload, label, colors, valueFormatter, dateForm
                         paddingTop: '8px',
                         paddingBottom: '8px',
                         // marginTop: '0.25rem',
-                    }, children: payload.map(({ value, name }, idx) => ((0, jsx_runtime_1.jsx)(exports.ChartTooltipRow, { value: valueFormatter(value), name: labelFormatter(name), 
-                        // color={categoryColors.get(name) ?? BaseColors.Blue}
-                        color: colors[idx], theme: theme }, `id-${idx}`))) })] }));
+                    } }, { children: payload.map(function (_a, idx) {
+                        var value = _a.value, name = _a.name;
+                        return (_jsx(ChartTooltipRow, { value: valueFormatter(value), name: labelFormatter(name), 
+                            // color={categoryColors.get(name) ?? BaseColors.Blue}
+                            color: colors[idx], theme: theme }, "id-".concat(idx)));
+                    }) }))] })));
     }
     return null;
 };
 // @ts-ignore
 function sumByKey(arr, key) {
     // @ts-ignore
-    return arr.reduce((acc, cur) => {
-        const val = parseInt(cur[key], 10);
+    return arr.reduce(function (acc, cur) {
+        var val = parseInt(cur[key], 10);
         return isNaN(val) ? acc : acc + val;
     }, 0);
 }
-const Chart = ({ chartId, config, colors, containerStyle, dateFilter, query, }) => {
-    const { dispatch, dashboard } = (0, react_1.useContext)(Context_1.DashboardContext);
-    const { dashboardFilters } = (0, react_1.useContext)(Context_1.DashboardFiltersContext);
-    const [client, _] = (0, react_1.useContext)(Context_1.ClientContext);
-    const [theme] = (0, react_1.useContext)(Context_1.ThemeContext);
-    const chartColors = (0, react_1.useMemo)(() => {
-        return colors?.length ? colors : ['#6269E9', '#E14F62'];
+var Chart = function (_a) {
+    var chartId = _a.chartId, config = _a.config, colors = _a.colors, containerStyle = _a.containerStyle, dateFilter = _a.dateFilter, query = _a.query;
+    var _b = useContext(DashboardContext), dispatch = _b.dispatch, dashboard = _b.dashboard;
+    var dashboardFilters = useContext(DashboardFiltersContext).dashboardFilters;
+    var _c = useContext(ClientContext), client = _c[0], _ = _c[1];
+    var theme = useContext(ThemeContext)[0];
+    var chartColors = useMemo(function () {
+        return (colors === null || colors === void 0 ? void 0 : colors.length) ? colors : ['#6269E9', '#E14F62'];
     }, [colors]);
-    return ((0, jsx_runtime_1.jsx)(ChartUpdater, { config: config, dispatch: dispatch, dashboard: dashboard, chartId: chartId, containerStyle: containerStyle, colors: chartColors, client: client, theme: theme, isDateFilter: dateFilter, dashboardFilters: dashboardFilters, query: query }));
+    return (_jsx(ChartUpdater, { config: config, dispatch: dispatch, dashboard: dashboard, chartId: chartId, containerStyle: containerStyle, colors: chartColors, client: client, theme: theme, isDateFilter: dateFilter, dashboardFilters: dashboardFilters, query: query }));
 };
-const ChartUpdater = ({ colors, chartId, config, containerStyle, dashboard, dispatch, client, theme, isDateFilter, dashboardFilters, query, }) => {
-    const [loading, setLoading] = (0, react_1.useState)(true);
+var ChartUpdater = function (_a) {
+    var _b, _c, _d, _e, _f;
+    var colors = _a.colors, chartId = _a.chartId, config = _a.config, containerStyle = _a.containerStyle, dashboard = _a.dashboard, dispatch = _a.dispatch, client = _a.client, theme = _a.theme, isDateFilter = _a.isDateFilter, dashboardFilters = _a.dashboardFilters, query = _a.query;
+    var _g = useState(true), loading = _g[0], setLoading = _g[1];
     // console.log('chartConfig:', chartConfig);
     // console.log('chartConfig.rows:', chartConfig.rows);
     // console.log('chartConfig.xAxisField:', chartConfig.xAxisField);
-    (0, react_1.useEffect)(() => {
+    useEffect(function () {
         if (isDateFilter && !dateFilter) {
             return;
         }
-        let isSubscribed = true;
-        async function getChartOptions() {
-            if (isSubscribed) {
-                const { publicKey, customerId, environment, queryEndpoint, queryHeaders, withCredentials, } = client;
-                //queryEndpoint = undefined;
-                setLoading(true);
-                try {
-                    // if self-hosting option, only get metadata and query
-                    if (queryEndpoint) {
-                        // const resp = await axios.get(
-                        //   'https://quill-344421.uc.r.appspot.com/selfhostitem',
-                        //   {
-                        //     params: {
-                        //       id: chartId,
-                        //       orgId: customerId,
-                        //       publicKey: publicKey,
-                        //     },
-                        //     environment: environment || undefined,
-                        //   }
-                        // );
-                        if (dashboardFilters['date_range'] && dashboard[chartId]) {
-                            const dateFilter = dashboardFilters['date_range'];
-                            dateFilter.dateField = dashboard[chartId].dateField;
-                        }
-                        const resp = await axios_1.default.post(queryEndpoint, {
-                            metadata: {
-                                id: chartId,
-                                task: 'item',
-                                filters: {
-                                    ...Object.entries(dashboardFilters)
-                                        .filter(([key]) => key !== 'date_range')
-                                        .map(([, value]) => value),
-                                    dateFilter,
+        var isSubscribed = true;
+        function getChartOptions() {
+            return __awaiter(this, void 0, void 0, function () {
+                var publicKey, customerId, environment, queryEndpoint, queryHeaders, withCredentials, dateFilter_1, resp, resp, e_1;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            if (!isSubscribed) return [3 /*break*/, 7];
+                            publicKey = client.publicKey, customerId = client.customerId, environment = client.environment, queryEndpoint = client.queryEndpoint, queryHeaders = client.queryHeaders, withCredentials = client.withCredentials;
+                            //queryEndpoint = undefined;
+                            setLoading(true);
+                            _a.label = 1;
+                        case 1:
+                            _a.trys.push([1, 6, , 7]);
+                            if (!queryEndpoint) return [3 /*break*/, 3];
+                            // const resp = await axios.get(
+                            //   'https://quill-344421.uc.r.appspot.com/selfhostitem',
+                            //   {
+                            //     params: {
+                            //       id: chartId,
+                            //       orgId: customerId,
+                            //       publicKey: publicKey,
+                            //     },
+                            //     environment: environment || undefined,
+                            //   }
+                            // );
+                            if (dashboardFilters['date_range'] && dashboard[chartId]) {
+                                dateFilter_1 = dashboardFilters['date_range'];
+                                dateFilter_1.dateField = dashboard[chartId].dateField;
+                            }
+                            return [4 /*yield*/, axios.post(queryEndpoint, {
+                                    metadata: {
+                                        id: chartId,
+                                        task: 'item',
+                                        filters: __assign(__assign({}, Object.entries(dashboardFilters)
+                                            .filter(function (_a) {
+                                            var key = _a[0];
+                                            return key !== 'date_range';
+                                        })
+                                            .map(function (_a) {
+                                            var value = _a[1];
+                                            return value;
+                                        })), { dateFilter: dateFilter }),
+                                    },
+                                }, { headers: queryHeaders, withCredentials: withCredentials })];
+                        case 2:
+                            resp = _a.sent();
+                            if (resp.data) {
+                                setLoading(false);
+                                dispatch({
+                                    type: 'UPDATE_DASHBOARD_ITEM',
+                                    id: chartId,
+                                    data: __assign({}, resp.data),
+                                });
+                            }
+                            return [3 /*break*/, 5];
+                        case 3: return [4 /*yield*/, axios.get('https://quill-344421.uc.r.appspot.com/item', {
+                                params: {
+                                    id: chartId,
+                                    orgId: customerId,
+                                    publicKey: publicKey,
+                                    filters: Object.keys(dashboardFilters).map(function (key) { return dashboardFilters[key]; }),
+                                    // startDate:
+                                    //   dateFilter &&
+                                    //   dateFilter.startDate &&
+                                    //   dateFilter.startDate.toISOString(),
+                                    // endDate:
+                                    //   dateFilter &&
+                                    //   dateFilter.endDate &&
+                                    //   dateFilter.endDate.toISOString(),
                                 },
-                            },
-                        }, { headers: queryHeaders, withCredentials });
-                        if (resp.data) {
-                            setLoading(false);
-                            dispatch({
-                                type: 'UPDATE_DASHBOARD_ITEM',
-                                id: chartId,
-                                data: {
-                                    ...resp.data,
+                                headers: {
+                                    environment: environment || undefined,
                                 },
-                            });
-                        }
-                    }
-                    else {
-                        const resp = await axios_1.default.get('https://quill-344421.uc.r.appspot.com/item', {
-                            params: {
-                                id: chartId,
-                                orgId: customerId,
-                                publicKey: publicKey,
-                                filters: Object.keys(dashboardFilters).map(key => dashboardFilters[key]),
-                                // startDate:
-                                //   dateFilter &&
-                                //   dateFilter.startDate &&
-                                //   dateFilter.startDate.toISOString(),
-                                // endDate:
-                                //   dateFilter &&
-                                //   dateFilter.endDate &&
-                                //   dateFilter.endDate.toISOString(),
-                            },
-                            headers: {
-                                environment: environment || undefined,
-                            },
-                        });
-                        // console.log('RESP: ', resp.data);
-                        if (resp.data) {
+                            })];
+                        case 4:
+                            resp = _a.sent();
+                            // console.log('RESP: ', resp.data);
+                            if (resp.data) {
+                                setLoading(false);
+                                dispatch({
+                                    type: 'UPDATE_DASHBOARD_ITEM',
+                                    id: chartId,
+                                    data: __assign({}, resp.data),
+                                });
+                            }
+                            _a.label = 5;
+                        case 5: return [3 /*break*/, 7];
+                        case 6:
+                            e_1 = _a.sent();
+                            console.log('Error fetching chart: ', e_1);
                             setLoading(false);
-                            dispatch({
-                                type: 'UPDATE_DASHBOARD_ITEM',
-                                id: chartId,
-                                data: { ...resp.data },
-                            });
-                        }
+                            return [3 /*break*/, 7];
+                        case 7: return [2 /*return*/];
                     }
-                }
-                catch (e) {
-                    console.log('Error fetching chart: ', e);
-                    setLoading(false);
-                }
-            }
+                });
+            });
         }
         if (config) {
             setLoading(false);
             return;
         }
         getChartOptions(); //when wouldn't you run this????? saw if statements before that implied you might not run this sometimes
-        return () => {
+        return function () {
             isSubscribed = false;
         };
     }, [dashboardFilters]);
     // console.log('DASHBOARD FILTERS: ', dashboardFilters);
-    (0, react_1.useEffect)(() => {
+    useEffect(function () {
         if (config) {
             dispatch({
                 type: 'UPDATE_DASHBOARD_ITEM',
                 id: chartId,
-                data: { ...config },
+                data: __assign({}, config),
             });
         }
     }, [config]);
-    const dateFilter = Object.values(dashboardFilters).find(filter => filter && filter.filterType === 'DATE_RANGE');
+    var dateFilter = Object.values(dashboardFilters).find(function (filter) { return filter && filter.filterType === 'DATE_RANGE'; });
     if (!dashboard[chartId] || loading) {
-        return ((0, jsx_runtime_1.jsx)("div", { 
+        return (_jsx("div", __assign({ 
             // className="flex flex-col flex-1 h-[100%]"
-            style: {
-                ...containerStyle,
-                marginLeft: 25,
-                marginRight: 25,
-                boxSizing: 'content-box',
-                height: '100%',
-                display: 'flex',
-                flexDirection: 'column',
-                flex: 1,
-            }, children: (0, jsx_runtime_1.jsx)("div", { style: {
-                    height: containerStyle?.height || 300,
+            style: __assign(__assign({}, containerStyle), { marginLeft: 25, marginRight: 25, boxSizing: 'content-box', height: '100%', display: 'flex', flexDirection: 'column', flex: 1 }) }, { children: _jsx("div", __assign({ style: {
+                    height: (containerStyle === null || containerStyle === void 0 ? void 0 : containerStyle.height) || 300,
                     width: '100%',
                     boxSizing: 'content-box',
-                }, children: (0, jsx_runtime_1.jsx)(react_loading_skeleton_1.default, { count: 1, 
+                } }, { children: _jsx(Skeleton, { count: 1, 
                     // height={containerStyle?.height}
-                    height: containerStyle?.height && containerStyle?.marginTop
-                        ? containerStyle?.height + containerStyle?.marginTop
-                        : containerStyle?.height
-                            ? containerStyle?.height
+                    height: (containerStyle === null || containerStyle === void 0 ? void 0 : containerStyle.height) && (containerStyle === null || containerStyle === void 0 ? void 0 : containerStyle.marginTop)
+                        ? (containerStyle === null || containerStyle === void 0 ? void 0 : containerStyle.height) + (containerStyle === null || containerStyle === void 0 ? void 0 : containerStyle.marginTop)
+                        : (containerStyle === null || containerStyle === void 0 ? void 0 : containerStyle.height)
+                            ? containerStyle === null || containerStyle === void 0 ? void 0 : containerStyle.height
                             : 300, borderRadius: 8, 
                     // highlightColor="#F7F7F8"
                     highlightColor: "#FDFDFD", 
                     // baseColor="#F3F4F6"
-                    baseColor: "#F9F9FA", width: "100%" }) }) }));
+                    baseColor: "#F9F9FA", width: "100%" }) })) })));
     }
-    if (dashboard[chartId]?.chartType === 'pie') {
-        const { xAxisField, yAxisFields } = dashboard[chartId];
-        return ((0, jsx_runtime_1.jsx)(PieChart_1.default
+    if (((_b = dashboard[chartId]) === null || _b === void 0 ? void 0 : _b.chartType) === 'pie') {
+        var _h = dashboard[chartId], xAxisField = _h.xAxisField, yAxisFields_1 = _h.yAxisFields;
+        return (_jsx(PieChart
         // @ts-ignore
         , { 
             // @ts-ignore
-            containerStyle: containerStyle, data: dashboard[chartId].rows.map(row => {
-                return {
-                    ...row,
-                    count: parseInt(row[yAxisFields[0].field]) /
-                        sumByKey(dashboard[chartId].rows, yAxisFields[0].field),
-                };
-            }), category: yAxisFields[0].field, index: xAxisField, colors: colors, theme: theme }));
+            containerStyle: containerStyle, data: dashboard[chartId].rows.map(function (row) {
+                return __assign(__assign({}, row), { count: parseInt(row[yAxisFields_1[0].field]) /
+                        sumByKey(dashboard[chartId].rows, yAxisFields_1[0].field) });
+            }), category: yAxisFields_1[0].field, index: xAxisField, colors: colors, theme: theme }));
     }
-    if (dashboard[chartId]?.chartType === 'table') {
-        return ((0, jsx_runtime_1.jsx)(TableChart_1.default, { data: dashboard[chartId].rows, yAxisFields: dashboard[chartId].yAxisFields, theme: theme, containerStyle: containerStyle }));
+    if (((_c = dashboard[chartId]) === null || _c === void 0 ? void 0 : _c.chartType) === 'table') {
+        return (_jsx(TableChart, { data: dashboard[chartId].rows, yAxisFields: dashboard[chartId].yAxisFields, theme: theme, containerStyle: containerStyle }));
     }
-    if (dashboard[chartId]?.chartType === 'bar') {
-        return ((0, jsx_runtime_1.jsx)(BarList_1.default, { data: dashboard[chartId].rows, theme: theme, yAxisFields: dashboard[chartId].yAxisFields, xAxisFormat: dashboard[chartId].xAxisFormat, colors: colors, xAxisField: dashboard[chartId].xAxisField, containerStyle: containerStyle }));
+    if (((_d = dashboard[chartId]) === null || _d === void 0 ? void 0 : _d.chartType) === 'bar') {
+        return (_jsx(BarList, { data: dashboard[chartId].rows, theme: theme, yAxisFields: dashboard[chartId].yAxisFields, xAxisFormat: dashboard[chartId].xAxisFormat, colors: colors, xAxisField: dashboard[chartId].xAxisField, containerStyle: containerStyle }));
     }
-    if (dashboard[chartId]?.chartType === 'column') {
-        return ((0, jsx_runtime_1.jsx)(BarChart, { colors: colors, theme: theme, yAxisFields: dashboard[chartId].yAxisFields, 
+    if (((_e = dashboard[chartId]) === null || _e === void 0 ? void 0 : _e.chartType) === 'column') {
+        return (_jsx(BarChart, { colors: colors, theme: theme, yAxisFields: dashboard[chartId].yAxisFields, 
             // @ts-ignore
             data: dashboard[chartId].rows, xAxisField: dashboard[chartId].xAxisField, xAxisLabel: dashboard[chartId].xAxisLabel, xAxisFormat: dashboard[chartId].xAxisFormat, containerStyle: containerStyle }));
     }
-    if (dashboard[chartId]?.chartType === 'metric') {
-        return ((0, jsx_runtime_1.jsx)("div", { style: {
-                fontFamily: theme?.fontFamily,
+    if (((_f = dashboard[chartId]) === null || _f === void 0 ? void 0 : _f.chartType) === 'metric') {
+        return (_jsx("div", __assign({ style: {
+                fontFamily: theme === null || theme === void 0 ? void 0 : theme.fontFamily,
                 fontSize: 32,
-                color: theme?.primaryTextColor,
+                color: theme === null || theme === void 0 ? void 0 : theme.primaryTextColor,
                 fontWeight: '600',
                 textOverflow: 'ellipsis',
                 margin: 0,
@@ -502,12 +542,12 @@ const ChartUpdater = ({ colors, chartId, config, containerStyle, dashboard, disp
                 maxWidth: '100%',
                 textAlign: 'left',
                 overflow: 'hidden',
-                height: containerStyle?.height || '100%',
+                height: (containerStyle === null || containerStyle === void 0 ? void 0 : containerStyle.height) || '100%',
                 display: 'flex',
                 flexDirection: 'column',
                 // background: 'red',
-            }, children: dashboard[chartId].rows.length > 0 &&
-                (0, exports.valueFormatter)({
+            } }, { children: dashboard[chartId].rows.length > 0 &&
+                valueFormatter({
                     value: dashboard[chartId].rows[0][dashboard[chartId].xAxisField],
                     field: dashboard[chartId].xAxisField,
                     fields: [
@@ -516,9 +556,9 @@ const ChartUpdater = ({ colors, chartId, config, containerStyle, dashboard, disp
                             format: dashboard[chartId].xAxisFormat,
                         },
                     ],
-                }) }));
+                }) })));
     }
-    return ((0, jsx_runtime_1.jsx)(LineChart, { colors: colors, yAxisFields: dashboard[chartId].yAxisFields, 
+    return (_jsx(LineChart, { colors: colors, yAxisFields: dashboard[chartId].yAxisFields, 
         // @ts-ignore
         data: dashboard[chartId].rows, xAxisField: dashboard[chartId].xAxisField, xAxisLabel: dashboard[chartId].xAxisLabel, xAxisFormat: dashboard[chartId].xAxisFormat, containerStyle: containerStyle, theme: theme }));
 };
@@ -554,13 +594,13 @@ function formatNumber(num, label) {
 //   return [adjustedMin, adjustedMax];
 // }
 function getDomain(data, fields) {
-    const fieldsArray = fields.map(elem => elem.field);
-    const numericValues = [];
-    data.forEach(item => {
-        fieldsArray.forEach(field => {
-            let value = item[field];
+    var fieldsArray = fields.map(function (elem) { return elem.field; });
+    var numericValues = [];
+    data.forEach(function (item) {
+        fieldsArray.forEach(function (field) {
+            var value = item[field];
             // Try to cast the value to a number
-            const numericValue = parseFloat(value);
+            var numericValue = parseFloat(value);
             if (!isNaN(numericValue)) {
                 value = numericValue;
             }
@@ -569,36 +609,29 @@ function getDomain(data, fields) {
             }
         });
     });
-    const [minValue, maxValue] = numericValues.reduce(([min, max], value) => [Math.min(min, value), Math.max(max, value)], [Infinity, -Infinity]);
-    const adjustedMin = Math.min(minValue, 0);
-    const padding = Math.round(0.2 * (maxValue - minValue));
-    const adjustedMax = maxValue + padding;
+    var _a = numericValues.reduce(function (_a, value) {
+        var min = _a[0], max = _a[1];
+        return [Math.min(min, value), Math.max(max, value)];
+    }, [Infinity, -Infinity]), minValue = _a[0], maxValue = _a[1];
+    var adjustedMin = Math.min(minValue, 0);
+    var padding = Math.round(0.2 * (maxValue - minValue));
+    var adjustedMax = maxValue + padding;
     return [adjustedMin, adjustedMax];
 }
-const CustomizedTick = ({ x, y, payload, theme, }) => {
+var CustomizedTick = function (_a) {
+    var x = _a.x, y = _a.y, payload = _a.payload, theme = _a.theme;
     // const { x, y, payload } = props;
-    const maxLength = 10;
-    const value = payload.value;
-    const truncatedValue = value.length > maxLength ? value.substring(0, maxLength) + '...' : value;
-    return ((0, jsx_runtime_1.jsx)("text", { xlinkTitle: value, fill: theme?.chartLabelColor, fontSize: 12, x: x, y: y + 15, width: 30, textAnchor: "middle", children: truncatedValue }));
+    var maxLength = 10;
+    var value = payload.value;
+    var truncatedValue = value.length > maxLength ? value.substring(0, maxLength) + '...' : value;
+    return (_jsx("text", __assign({ xlinkTitle: value, fill: theme === null || theme === void 0 ? void 0 : theme.chartLabelColor, fontSize: 12, x: x, y: y + 15, width: 30, textAnchor: "middle" }, { children: truncatedValue })));
 };
-function BarChart({ colors, yAxisFields, data, containerStyle, xAxisField, xAxisLabel, xAxisFormat, theme, }) {
-    const newColors = (0, PieChart_1.findComplementaryAndAnalogousColors)(colors[0], colors[1]);
-    return ((0, jsx_runtime_1.jsx)("div", { style: {
-            ...containerStyle,
-            boxSizing: 'content-box',
-            // display: 'flex',
-            // flexDirection: 'column',
-            // flex: 1,
-            // height: '100%',
-            // minHeight: 400,
-            // minWidth: 400,
-            // height: 400,
-            // width: 800,
-            // width: '100%',
-        }, children: (0, jsx_runtime_1.jsx)(recharts_1.ResponsiveContainer, { width: "100%", height: '100%', children: (0, jsx_runtime_1.jsxs)(recharts_1.BarChart, { data: data, 
+function BarChart(_a) {
+    var colors = _a.colors, yAxisFields = _a.yAxisFields, data = _a.data, containerStyle = _a.containerStyle, xAxisField = _a.xAxisField, xAxisLabel = _a.xAxisLabel, xAxisFormat = _a.xAxisFormat, theme = _a.theme;
+    var newColors = findComplementaryAndAnalogousColors(colors[0], colors[1]);
+    return (_jsx("div", __assign({ style: __assign(__assign({}, containerStyle), { boxSizing: 'content-box' }) }, { children: _jsx(ResponsiveContainer, __assign({ width: "100%", height: '100%' }, { children: _jsxs(ReChartsBarChart, __assign({ data: data, 
                 // stackOffset={'none'}
-                layout: 'horizontal', children: [(0, jsx_runtime_1.jsx)(recharts_1.CartesianGrid, { strokeDasharray: "3 3", horizontal: true, vertical: false }), (0, jsx_runtime_1.jsx)(recharts_1.YAxis
+                layout: 'horizontal' }, { children: [_jsx(CartesianGrid, { strokeDasharray: "3 3", horizontal: true, vertical: false }), _jsx(YAxis
                     // width={56}
                     // width={30}
                     // textAnchor="start"
@@ -611,11 +644,13 @@ function BarChart({ colors, yAxisFields, data, containerStyle, xAxisField, xAxis
                         tick: { transform: 'translate(-3, 0)' }, style: {
                             fontSize: '12px',
                             fontFamily: theme.chartLabelFontFamily,
-                        }, tickFormatter: tick => (0, exports.valueFormatter)({
-                            value: tick,
-                            field: yAxisFields[0].field || 'what',
-                            fields: yAxisFields,
-                        }) }), (0, jsx_runtime_1.jsx)(recharts_1.XAxis, { hide: false, dataKey: xAxisField, 
+                        }, tickFormatter: function (tick) {
+                            return valueFormatter({
+                                value: tick,
+                                field: yAxisFields[0].field || 'what',
+                                fields: yAxisFields,
+                            });
+                        } }), _jsx(XAxis, { hide: false, dataKey: xAxisField, 
                         // interval="preserveStartEnd"
                         tick: { transform: 'translate(0, 6)' }, 
                         //padding between labels and axis
@@ -624,32 +659,40 @@ function BarChart({ colors, yAxisFields, data, containerStyle, xAxisField, xAxis
                             // TODO: generalize
                             fontFamily: theme.chartLabelFontFamily,
                             marginTop: '20px',
-                        }, tickLine: false, axisLine: false, tickFormatter: tick => (0, exports.valueFormatter)({
-                            value: tick,
-                            field: xAxisField,
-                            fields: [{ field: xAxisField, format: xAxisFormat }],
-                        }) }), (0, jsx_runtime_1.jsx)(recharts_1.Tooltip, { wrapperStyle: { outline: 'none' }, isAnimationActive: false, cursor: { fill: '#d1d5db', opacity: '0.15' }, content: ({ active, payload, label }) => {
-                            return ((0, jsx_runtime_1.jsx)(ChartTooltip, { theme: theme, active: active, payload: payload, label: label, dateFormatter: value => (0, exports.valueFormatter)({
-                                    value,
-                                    field: xAxisField,
-                                    fields: [{ field: xAxisField, format: xAxisFormat }],
-                                }), valueFormatter: value => (0, exports.valueFormatter)({
-                                    value,
-                                    field: payload[0].dataKey,
-                                    fields: yAxisFields,
-                                }), colors: newColors }));
-                        }, position: { y: 0 } }), yAxisFields.map((elem, index) => ((0, jsx_runtime_1.jsx)(recharts_1.Bar, { name: elem.label, dataKey: elem.field, type: "linear", 
+                        }, tickLine: false, axisLine: false, tickFormatter: function (tick) {
+                            return valueFormatter({
+                                value: tick,
+                                field: xAxisField,
+                                fields: [{ field: xAxisField, format: xAxisFormat }],
+                            });
+                        } }), _jsx(Tooltip, { wrapperStyle: { outline: 'none' }, isAnimationActive: false, cursor: { fill: '#d1d5db', opacity: '0.15' }, content: function (_a) {
+                            var active = _a.active, payload = _a.payload, label = _a.label;
+                            return (_jsx(ChartTooltip, { theme: theme, active: active, payload: payload, label: label, dateFormatter: function (value) {
+                                    return valueFormatter({
+                                        value: value,
+                                        field: xAxisField,
+                                        fields: [{ field: xAxisField, format: xAxisFormat }],
+                                    });
+                                }, valueFormatter: function (value) {
+                                    return valueFormatter({
+                                        value: value,
+                                        field: payload[0].dataKey,
+                                        fields: yAxisFields,
+                                    });
+                                }, colors: newColors }));
+                        }, position: { y: 0 } }), yAxisFields.map(function (elem, index) { return (_jsx(Bar, { name: elem.label, dataKey: elem.field, type: "linear", 
                         // stackId={stack || relative ? "a" : undefined}
                         fill: newColors[index], 
                         // barSize={20}
-                        isAnimationActive: true }, elem.field)))] }) }) }));
+                        isAnimationActive: true }, elem.field)); })] })) })) })));
 }
-function LineChart({ colors, yAxisFields, data, containerStyle, xAxisField, xAxisLabel, xAxisFormat, theme, }) {
+function LineChart(_a) {
+    var colors = _a.colors, yAxisFields = _a.yAxisFields, data = _a.data, containerStyle = _a.containerStyle, xAxisField = _a.xAxisField, xAxisLabel = _a.xAxisLabel, xAxisFormat = _a.xAxisFormat, theme = _a.theme;
     // console.log('CONTAINER: ', containerStyle);
     if (!yAxisFields || !yAxisFields.length) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsx)("div", { style: { ...containerStyle, boxSizing: 'content-box' }, children: (0, jsx_runtime_1.jsx)(recharts_1.ResponsiveContainer, { width: "100%", height: '100%', children: (0, jsx_runtime_1.jsxs)(recharts_1.ComposedChart, { data: data, children: [(0, jsx_runtime_1.jsx)(recharts_1.CartesianGrid, { strokeDasharray: "3 3", horizontal: true, vertical: false }), (0, jsx_runtime_1.jsx)(recharts_1.XAxis
+    return (_jsx("div", __assign({ style: __assign(__assign({}, containerStyle), { boxSizing: 'content-box' }) }, { children: _jsx(ResponsiveContainer, __assign({ width: "100%", height: '100%' }, { children: _jsxs(ReChartsAreaChart, __assign({ data: data }, { children: [_jsx(CartesianGrid, { strokeDasharray: "3 3", horizontal: true, vertical: false }), _jsx(XAxis
                     //   hide={!showXAxis}
                     , { 
                         //   hide={!showXAxis}
@@ -661,19 +704,21 @@ function LineChart({ colors, yAxisFields, data, containerStyle, xAxisField, xAxi
                         //   }
                         style: {
                             fontSize: '12px',
-                            fontFamily: theme?.chartLabelFontFamily ||
-                                theme?.fontFamily ||
+                            fontFamily: (theme === null || theme === void 0 ? void 0 : theme.chartLabelFontFamily) ||
+                                (theme === null || theme === void 0 ? void 0 : theme.fontFamily) ||
                                 'Inter; Helvetica',
-                            color: theme?.chartLabelColor || '#666666',
+                            color: (theme === null || theme === void 0 ? void 0 : theme.chartLabelColor) || '#666666',
                         }, 
                         // interval="preserveStartEnd"
                         interval: "preserveStartEnd", 
                         // interval={0}
-                        tickLine: false, axisLine: false, padding: { left: 10, right: 10 }, minTickGap: 5, tickFormatter: tick => (0, exports.valueFormatter)({
-                            value: tick,
-                            field: xAxisField,
-                            fields: [{ field: xAxisField, format: xAxisFormat }],
-                        }) }), (0, jsx_runtime_1.jsx)(recharts_1.YAxis
+                        tickLine: false, axisLine: false, padding: { left: 10, right: 10 }, minTickGap: 5, tickFormatter: function (tick) {
+                            return valueFormatter({
+                                value: tick,
+                                field: xAxisField,
+                                fields: [{ field: xAxisField, format: xAxisFormat }],
+                            });
+                        } }), _jsx(YAxis
                     // textAnchor="left"
                     // tickMargin={0}
                     // width={56}
@@ -689,34 +734,39 @@ function LineChart({ colors, yAxisFields, data, containerStyle, xAxisField, xAxi
                         //   domain={yAxisDomain as AxisDomain}
                         domain: getDomain(data, yAxisFields), tick: { transform: 'translate(-3, 0)' }, style: {
                             fontSize: '12px',
-                            fontFamily: theme?.chartLabelFontFamily ||
-                                theme?.fontFamily ||
+                            fontFamily: (theme === null || theme === void 0 ? void 0 : theme.chartLabelFontFamily) ||
+                                (theme === null || theme === void 0 ? void 0 : theme.fontFamily) ||
                                 'Inter; Helvetica',
-                            color: theme?.chartLabelColor || '#666666',
-                        }, tickFormatter: value => (0, exports.valueFormatter)({
-                            value,
-                            field: yAxisFields[0].field,
-                            fields: [
-                                ...yAxisFields,
-                                { field: xAxisField, format: xAxisFormat },
-                            ],
-                        }) }), (0, jsx_runtime_1.jsx)(recharts_1.Tooltip, { wrapperStyle: { outline: 'none' }, isAnimationActive: false, cursor: { stroke: '#d1d5db', strokeWidth: 1 }, content: ({ active, payload, label }) => {
-                            return ((0, jsx_runtime_1.jsx)(ChartTooltip, { active: active, payload: payload, label: label, dateFormatter: value => (0, exports.valueFormatter)({
-                                    value,
-                                    field: xAxisField,
-                                    fields: [{ field: xAxisField, format: xAxisFormat }],
-                                }), valueFormatter: value => (0, exports.valueFormatter)({
-                                    value,
-                                    field: payload[0].dataKey,
-                                    fields: [
-                                        ...yAxisFields,
-                                        { field: xAxisField, format: xAxisFormat },
-                                    ],
-                                }), colors: colors, theme: theme }));
-                        }, position: { y: 0 } }), yAxisFields.map((elem, index) => ((0, jsx_runtime_1.jsx)("defs", { children: (0, jsx_runtime_1.jsxs)("linearGradient", { id: `gradient${index}`, x1: "0", y1: "0", x2: "0", y2: "1", children: [(0, jsx_runtime_1.jsx)("stop", { offset: "5%", stopColor: colors[index], stopOpacity: 0.4 }), (0, jsx_runtime_1.jsx)("stop", { offset: "95%", stopColor: 'rgba(0,0,0,0)', stopOpacity: 0 })] }) }, `defs${elem.field + index}`))), yAxisFields.map((elem, index) => ((0, jsx_runtime_1.jsx)(recharts_1.Area, { name: elem.label, type: "linear", dataKey: elem.field, stroke: colors[index], 
+                            color: (theme === null || theme === void 0 ? void 0 : theme.chartLabelColor) || '#666666',
+                        }, tickFormatter: function (value) {
+                            return valueFormatter({
+                                value: value,
+                                field: yAxisFields[0].field,
+                                fields: __spreadArray(__spreadArray([], yAxisFields, true), [
+                                    { field: xAxisField, format: xAxisFormat },
+                                ], false),
+                            });
+                        } }), _jsx(Tooltip, { wrapperStyle: { outline: 'none' }, isAnimationActive: false, cursor: { stroke: '#d1d5db', strokeWidth: 1 }, content: function (_a) {
+                            var active = _a.active, payload = _a.payload, label = _a.label;
+                            return (_jsx(ChartTooltip, { active: active, payload: payload, label: label, dateFormatter: function (value) {
+                                    return valueFormatter({
+                                        value: value,
+                                        field: xAxisField,
+                                        fields: [{ field: xAxisField, format: xAxisFormat }],
+                                    });
+                                }, valueFormatter: function (value) {
+                                    return valueFormatter({
+                                        value: value,
+                                        field: payload[0].dataKey,
+                                        fields: __spreadArray(__spreadArray([], yAxisFields, true), [
+                                            { field: xAxisField, format: xAxisFormat },
+                                        ], false),
+                                    });
+                                }, colors: colors, theme: theme }));
+                        }, position: { y: 0 } }), yAxisFields.map(function (elem, index) { return (_jsx("defs", { children: _jsxs("linearGradient", __assign({ id: "gradient".concat(index), x1: "0", y1: "0", x2: "0", y2: "1" }, { children: [_jsx("stop", { offset: "5%", stopColor: colors[index], stopOpacity: 0.4 }), _jsx("stop", { offset: "95%", stopColor: 'rgba(0,0,0,0)', stopOpacity: 0 })] })) }, "defs".concat(elem.field + index))); }), yAxisFields.map(function (elem, index) { return (_jsx(Area, { name: elem.label, type: "linear", dataKey: elem.field, stroke: colors[index], 
                         // if hide area
                         // fill="transparent"
-                        fill: `url(#gradient${index})`, strokeWidth: 2, dot: false, isAnimationActive: true }, elem.field)))] }) }) }));
+                        fill: "url(#gradient".concat(index, ")"), strokeWidth: 2, dot: false, isAnimationActive: true }, elem.field)); })] })) })) })));
 }
-exports.default = Chart;
+export default Chart;
 //# sourceMappingURL=Chart.js.map