@quillsql/react 1.7.2 → 1.7.4

package/lib/Chart.js

@@ -1,74 +1,45 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (g && (g = 0, op[0] && (_ = 0)), _) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
     }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
 };
-var __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));
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChartTooltipRow = exports.ChartTooltipFrame = exports.valueFormatter = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
 /* eslint-disable @typescript-eslint/ban-ts-comment */
 // @ts-nocheck
-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 = [
+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 TableChart_1 = __importDefault(require("./TableChart"));
+const colorValues = [
     'slate',
     'gray',
     'zinc',
@@ -124,21 +95,20 @@ var colorValues = [
 //     'The Pragmatic Engineer': 1726,
 //   },
 // ];
-export var valueFormatter = function (_a) {
-    var value = _a.value, field = _a.field, fields = _a.fields;
+const valueFormatter = ({ value, field, fields }) => {
     if (value === undefined ||
         value === null ||
         field === undefined ||
         field === null) {
         return '';
     }
-    var fieldInfo = fields.find(function (f) { return f.field === field; });
+    const fieldInfo = fields.find(f => f.field === field);
     if (!fieldInfo) {
         return '';
     }
-    var formatType = fieldInfo.format;
-    var numValue = Number(value);
-    var absNumber = isNaN(numValue) ? 0 : Math.abs(numValue);
+    const formatType = fieldInfo.format;
+    const numValue = Number(value);
+    const absNumber = isNaN(numValue) ? 0 : Math.abs(numValue);
     if (formatType === 'percent') {
         if (absNumber < 1) {
             return (absNumber * 100).toFixed(0) + '%';
@@ -148,7 +118,7 @@ export var valueFormatter = function (_a) {
         }
     }
     if (formatType === 'dollar_amount') {
-        var formatter = new Intl.NumberFormat('en-US', {
+        const formatter = new Intl.NumberFormat('en-US', {
             style: 'currency',
             currency: 'USD',
             minimumFractionDigits: 0,
@@ -175,36 +145,36 @@ export var valueFormatter = function (_a) {
         formatType === 'hh_ap_pm' ||
         formatType === 'MMM_dd-MMM_dd' ||
         formatType === 'MMM_dd_hh:mm_ap_pm') {
-        var dateValue = new Date(value);
-        var utcDate = utcToZonedTime(dateValue, 'UTC');
-        if (!isValid(utcDate)) {
+        const dateValue = new Date(value);
+        const utcDate = (0, date_fns_tz_1.utcToZonedTime)(dateValue, 'UTC');
+        if (!(0, date_fns_1.isValid)(utcDate)) {
             return 'Invalid date';
         }
         if (formatType === 'MMM_yyyy') {
-            return format(utcDate, 'MMM yyyy');
+            return (0, date_fns_1.format)(utcDate, 'MMM yyyy');
         }
         if (formatType === 'MMM_dd_yyyy') {
-            return format(utcDate, 'dd MMM yyyy');
+            return (0, date_fns_1.format)(utcDate, 'dd MMM yyyy');
         }
         if (formatType === 'hh_ap_pm') {
-            return format(utcDate, 'hh:mm aa');
+            return (0, date_fns_1.format)(utcDate, 'hh:mm aa');
         }
         if (formatType === 'MMM_dd-MMM_dd') {
-            var start = startOfWeek(utcDate, { weekStartsOn: 1 }); // Monday
-            var end = endOfWeek(utcDate, { weekStartsOn: 1 }); // Sunday
-            var formattedDate = '';
+            const start = (0, date_fns_1.startOfWeek)(utcDate, { weekStartsOn: 1 }); // Monday
+            const end = (0, date_fns_1.endOfWeek)(utcDate, { weekStartsOn: 1 }); // Sunday
+            let formattedDate = '';
             // Check if start and end are in the same month
-            if (format(start, 'MMM') === format(end, 'MMM')) {
-                formattedDate = "".concat(format(start, 'MMM dd'), " - ").concat(format(end, 'dd'));
+            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')}`;
             }
             else {
-                formattedDate = "".concat(format(start, 'MMM dd'), " - ").concat(format(end, 'MMM dd'));
+                formattedDate = `${(0, date_fns_1.format)(start, 'MMM dd')} - ${(0, date_fns_1.format)(end, 'MMM dd')}`;
             }
             return formattedDate;
         }
         if (formatType === 'MMM_dd_hh:mm_ap_pm') {
-            var formatStr = utcDate.getMinutes() === 0 ? 'MMM do h a' : 'MMM do h:mm a';
-            var formattedTime = format(utcDate, formatStr);
+            const formatStr = utcDate.getMinutes() === 0 ? 'MMM do h a' : 'MMM do h:mm a';
+            let formattedTime = (0, date_fns_1.format)(utcDate, formatStr);
             formattedTime =
                 formattedTime.slice(0, -2) + formattedTime.slice(-2).toLowerCase();
             return formattedTime;
@@ -215,85 +185,81 @@ export var valueFormatter = function (_a) {
     }
     return value.toString();
 };
-var yAxisFields = [
+exports.valueFormatter = valueFormatter;
+const yAxisFields = [
     { field: 'avg_days', label: 'average days' },
     { field: 'median_days', label: 'median days' },
 ];
-var labelFormatter = function (name) {
+const labelFormatter = (name) => {
     // return yAxisFields.filter(elem => elem.field === name)[0].label;
     return name;
 };
-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;
+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, }) => {
     if (active && payload) {
-        return (_jsxs(ChartTooltipFrame, __assign({ theme: theme }, { children: [_jsx("div", __assign({ style: {
+        return ((0, jsx_runtime_1.jsxs)(exports.ChartTooltipFrame, { theme: theme, children: [(0, jsx_runtime_1.jsx)("div", { style: {
                         borderStyle: 'solid',
-                        borderBottomColor: (theme === null || theme === void 0 ? void 0 : theme.borderColor) || '#E5E7EB',
-                        background: (theme === null || theme === void 0 ? void 0 : theme.backgroundColor) || 'white',
+                        borderBottomColor: theme?.borderColor || '#E5E7EB',
+                        background: theme?.backgroundColor || 'white',
                         borderTop: 'none',
                         borderLeft: 'none',
                         borderRight: 'none',
@@ -304,21 +270,21 @@ var ChartTooltip = function (_a) {
                         paddingRight: '16px',
                         paddingTop: '8px',
                         paddingBottom: '8px',
-                    } }, { children: _jsx("p", __assign({ style: {
+                    }, children: (0, jsx_runtime_1.jsx)("p", { style: {
                             textAlign: 'left',
                             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.boldFontWeight) || '500',
+                            fontFamily: theme?.fontFamily,
+                            color: theme?.primaryTextColor,
+                            fontSize: theme?.fontSizeSmall || '14px',
+                            fontWeight: 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))
-                                ? format(new Date(label), 'MMM yyyy')
-                                : label })) })), _jsx("div", __assign({ 
+                                ? (0, date_fns_1.format)(new Date(label), 'MMM yyyy')
+                                : label }) }), (0, jsx_runtime_1.jsx)("div", { 
                     // className="qq-px-4 qq-space-y-1 qq-py-2 qq-px-4"
                     style: {
                         paddingRight: '16px',
@@ -326,209 +292,193 @@ var ChartTooltip = function (_a) {
                         paddingTop: '8px',
                         paddingBottom: '8px',
                         // marginTop: '0.25rem',
-                    } }, { 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)));
-                    }) }))] })));
+                    }, 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}`))) })] }));
     }
     return null;
 };
 // @ts-ignore
 function sumByKey(arr, key) {
     // @ts-ignore
-    return arr.reduce(function (acc, cur) {
-        var val = parseInt(cur[key], 10);
+    return arr.reduce((acc, cur) => {
+        const val = parseInt(cur[key], 10);
         return isNaN(val) ? acc : acc + val;
     }, 0);
 }
-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'];
+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'];
     }, [colors]);
-    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 }));
+    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 }));
 };
-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];
+const ChartUpdater = ({ colors, chartId, config, containerStyle, dashboard, dispatch, client, theme, isDateFilter, dashboardFilters, query, }) => {
+    const [loading, setLoading] = (0, react_1.useState)(true);
     // console.log('chartConfig:', chartConfig);
     // console.log('chartConfig.rows:', chartConfig.rows);
     // console.log('chartConfig.xAxisField:', chartConfig.xAxisField);
-    useEffect(function () {
+    (0, react_1.useEffect)(() => {
         if (isDateFilter && !dateFilter) {
             return;
         }
-        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(),
+        let isSubscribed = true;
+        async function getChartOptions() {
+            if (isSubscribed) {
+                const { publicKey, customerId, environment, queryEndpoint, queryHeaders, } = 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,
                                 },
-                                headers: {
-                                    environment: environment || undefined,
+                            },
+                        }, { headers: queryHeaders });
+                        if (resp.data) {
+                            setLoading(false);
+                            dispatch({
+                                type: 'UPDATE_DASHBOARD_ITEM',
+                                id: chartId,
+                                data: {
+                                    ...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);
+                            });
+                        }
+                    }
+                    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) {
                             setLoading(false);
-                            return [3 /*break*/, 7];
-                        case 7: return [2 /*return*/];
+                            dispatch({
+                                type: 'UPDATE_DASHBOARD_ITEM',
+                                id: chartId,
+                                data: { ...resp.data },
+                            });
+                        }
                     }
-                });
-            });
+                }
+                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 function () {
+        return () => {
             isSubscribed = false;
         };
     }, [dashboardFilters]);
     // console.log('DASHBOARD FILTERS: ', dashboardFilters);
-    useEffect(function () {
+    (0, react_1.useEffect)(() => {
         if (config) {
             dispatch({
                 type: 'UPDATE_DASHBOARD_ITEM',
                 id: chartId,
-                data: __assign({}, config),
+                data: { ...config },
             });
         }
     }, [config]);
-    var dateFilter = Object.values(dashboardFilters).find(function (filter) { return filter && filter.filterType === 'DATE_RANGE'; });
+    const dateFilter = Object.values(dashboardFilters).find(filter => filter && filter.filterType === 'DATE_RANGE');
     if (!dashboard[chartId] || loading) {
-        return (_jsx("div", __assign({ 
+        return ((0, jsx_runtime_1.jsx)("div", { 
             // className="flex flex-col flex-1 h-[100%]"
-            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,
+            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,
                     width: '100%',
                     boxSizing: 'content-box',
-                } }, { children: _jsx(Skeleton, { count: 1, 
-                    // 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%" }) })) })));
+                    borderRadius: 8,
+                    overflow: 'hidden',
+                }, children: (0, jsx_runtime_1.jsxs)("svg", { width: "100%", height: "100%", xmlns: "http://www.w3.org/2000/svg", "xmlns:xlink": "http://www.w3.org/1999/xlink", children: [(0, jsx_runtime_1.jsx)("rect", { width: "100%", height: "100%", fill: "#F9F9FA" }), (0, jsx_runtime_1.jsx)("defs", { fill: "#F9F9FA", children: (0, jsx_runtime_1.jsxs)("linearGradient", { id: "skeletonGradient", x1: "0%", y1: "0%", x2: "10%", y2: "0%", gradientUnits: "userSpaceOnUse", children: [(0, jsx_runtime_1.jsx)("stop", { offset: "0%", "stop-color": "rgba(255,255,255,0)" }), (0, jsx_runtime_1.jsx)("stop", { offset: "50%", "stop-color": "#FEFEFE" }), (0, jsx_runtime_1.jsx)("stop", { offset: "100%", "stop-color": "rgba(255,255,255,0)" }), (0, jsx_runtime_1.jsx)("animate", { attributeName: "x1", from: "-100%", to: "100%", dur: "2s", repeatCount: "indefinite" }), (0, jsx_runtime_1.jsx)("animate", { attributeName: "x2", from: "-50%", to: "150%", dur: "2s", repeatCount: "indefinite" })] }) }), (0, jsx_runtime_1.jsx)("rect", { width: "50%", height: "100%", fill: "url(#skeletonGradient)", children: (0, jsx_runtime_1.jsx)("animate", { attributeName: "x", from: "-100%", to: "100%", dur: "2s", repeatCount: "indefinite" }) })] }) }) }));
     }
-    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
+    if (dashboard[chartId]?.chartType === 'pie') {
+        const { xAxisField, yAxisFields } = dashboard[chartId];
+        return ((0, jsx_runtime_1.jsx)(PieChart_1.default
         // @ts-ignore
         , { 
             // @ts-ignore
-            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 }));
+            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 }));
     }
-    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 === 'table') {
+        return ((0, jsx_runtime_1.jsx)(TableChart_1.default, { data: dashboard[chartId].rows, yAxisFields: dashboard[chartId].yAxisFields, theme: theme, 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 === '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 (((_e = dashboard[chartId]) === null || _e === void 0 ? void 0 : _e.chartType) === 'column') {
-        return (_jsx(BarChart, { colors: colors, theme: theme, yAxisFields: dashboard[chartId].yAxisFields, 
+    if (dashboard[chartId]?.chartType === 'column') {
+        return ((0, jsx_runtime_1.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 (((_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,
+    if (dashboard[chartId]?.chartType === 'metric') {
+        return ((0, jsx_runtime_1.jsx)("div", { style: {
+                fontFamily: theme?.fontFamily,
                 fontSize: 32,
-                color: theme === null || theme === void 0 ? void 0 : theme.primaryTextColor,
+                color: theme?.primaryTextColor,
                 fontWeight: '600',
                 textOverflow: 'ellipsis',
                 margin: 0,
@@ -542,12 +492,12 @@ var ChartUpdater = function (_a) {
                 maxWidth: '100%',
                 textAlign: 'left',
                 overflow: 'hidden',
-                height: (containerStyle === null || containerStyle === void 0 ? void 0 : containerStyle.height) || '100%',
+                height: containerStyle?.height || '100%',
                 display: 'flex',
                 flexDirection: 'column',
                 // background: 'red',
-            } }, { children: dashboard[chartId].rows.length > 0 &&
-                valueFormatter({
+            }, children: dashboard[chartId].rows.length > 0 &&
+                (0, exports.valueFormatter)({
                     value: dashboard[chartId].rows[0][dashboard[chartId].xAxisField],
                     field: dashboard[chartId].xAxisField,
                     fields: [
@@ -556,9 +506,9 @@ var ChartUpdater = function (_a) {
                             format: dashboard[chartId].xAxisFormat,
                         },
                     ],
-                }) })));
+                }) }));
     }
-    return (_jsx(LineChart, { colors: colors, yAxisFields: dashboard[chartId].yAxisFields, 
+    return ((0, jsx_runtime_1.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 }));
 };
@@ -594,13 +544,13 @@ function formatNumber(num, label) {
 //   return [adjustedMin, adjustedMax];
 // }
 function getDomain(data, fields) {
-    var fieldsArray = fields.map(function (elem) { return elem.field; });
-    var numericValues = [];
-    data.forEach(function (item) {
-        fieldsArray.forEach(function (field) {
-            var value = item[field];
+    const fieldsArray = fields.map(elem => elem.field);
+    const numericValues = [];
+    data.forEach(item => {
+        fieldsArray.forEach(field => {
+            let value = item[field];
             // Try to cast the value to a number
-            var numericValue = parseFloat(value);
+            const numericValue = parseFloat(value);
             if (!isNaN(numericValue)) {
                 value = numericValue;
             }
@@ -609,29 +559,36 @@ function getDomain(data, fields) {
             }
         });
     });
-    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;
+    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;
     return [adjustedMin, adjustedMax];
 }
-var CustomizedTick = function (_a) {
-    var x = _a.x, y = _a.y, payload = _a.payload, theme = _a.theme;
+const CustomizedTick = ({ x, y, payload, theme, }) => {
     // const { x, y, payload } = props;
-    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 })));
+    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 }));
 };
-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, 
+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, 
                 // stackOffset={'none'}
-                layout: 'horizontal' }, { children: [_jsx(CartesianGrid, { strokeDasharray: "3 3", horizontal: true, vertical: false }), _jsx(YAxis
+                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
                     // width={56}
                     // width={30}
                     // textAnchor="start"
@@ -644,13 +601,11 @@ function BarChart(_a) {
                         tick: { transform: 'translate(-3, 0)' }, style: {
                             fontSize: '12px',
                             fontFamily: theme.chartLabelFontFamily,
-                        }, tickFormatter: function (tick) {
-                            return valueFormatter({
-                                value: tick,
-                                field: yAxisFields[0].field || 'what',
-                                fields: yAxisFields,
-                            });
-                        } }), _jsx(XAxis, { hide: false, dataKey: xAxisField, 
+                        }, 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, 
                         // interval="preserveStartEnd"
                         tick: { transform: 'translate(0, 6)' }, 
                         //padding between labels and axis
@@ -659,40 +614,32 @@ function BarChart(_a) {
                             // TODO: generalize
                             fontFamily: theme.chartLabelFontFamily,
                             marginTop: '20px',
-                        }, 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", 
+                        }, 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", 
                         // stackId={stack || relative ? "a" : undefined}
                         fill: newColors[index], 
                         // barSize={20}
-                        isAnimationActive: true }, elem.field)); })] })) })) })));
+                        isAnimationActive: true }, elem.field)))] }) }) }));
 }
-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;
+function LineChart({ colors, yAxisFields, data, containerStyle, xAxisField, xAxisLabel, xAxisFormat, theme, }) {
     // console.log('CONTAINER: ', containerStyle);
     if (!yAxisFields || !yAxisFields.length) {
         return null;
     }
-    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
+    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
                     //   hide={!showXAxis}
                     , { 
                         //   hide={!showXAxis}
@@ -704,21 +651,19 @@ function LineChart(_a) {
                         //   }
                         style: {
                             fontSize: '12px',
-                            fontFamily: (theme === null || theme === void 0 ? void 0 : theme.chartLabelFontFamily) ||
-                                (theme === null || theme === void 0 ? void 0 : theme.fontFamily) ||
+                            fontFamily: theme?.chartLabelFontFamily ||
+                                theme?.fontFamily ||
                                 'Inter; Helvetica',
-                            color: (theme === null || theme === void 0 ? void 0 : theme.chartLabelColor) || '#666666',
+                            color: theme?.chartLabelColor || '#666666',
                         }, 
                         // interval="preserveStartEnd"
                         interval: "preserveStartEnd", 
                         // interval={0}
-                        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
+                        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
                     // textAnchor="left"
                     // tickMargin={0}
                     // width={56}
@@ -734,39 +679,34 @@ function LineChart(_a) {
                         //   domain={yAxisDomain as AxisDomain}
                         domain: getDomain(data, yAxisFields), tick: { transform: 'translate(-3, 0)' }, style: {
                             fontSize: '12px',
-                            fontFamily: (theme === null || theme === void 0 ? void 0 : theme.chartLabelFontFamily) ||
-                                (theme === null || theme === void 0 ? void 0 : theme.fontFamily) ||
+                            fontFamily: theme?.chartLabelFontFamily ||
+                                theme?.fontFamily ||
                                 'Inter; Helvetica',
-                            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], 
+                            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], 
                         // if hide area
                         // fill="transparent"
-                        fill: "url(#gradient".concat(index, ")"), strokeWidth: 2, dot: false, isAnimationActive: true }, elem.field)); })] })) })) })));
+                        fill: `url(#gradient${index})`, strokeWidth: 2, dot: false, isAnimationActive: true }, elem.field)))] }) }) }));
 }
-export default Chart;
+exports.default = Chart;
 //# sourceMappingURL=Chart.js.map