@quillsql/react 2.9.1 → 2.9.2

package/dist/Chart.js

@@ -1,321 +1,19 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ChartTooltipRow = exports.ChartTooltipFrame = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-/* eslint-disable @typescript-eslint/ban-ts-comment */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // @ts-nocheck
-const react_1 = require("react");
-const aggregate_1 = require("./utils/aggregate");
-const ReportBuilder_1 = require("./ReportBuilder");
-const recharts_1 = require("recharts");
-const date_fns_1 = require("date-fns");
-const BarList_1 = __importDefault(require("./BarList"));
-const PieChart_1 = __importStar(require("./PieChart"));
-const Context_1 = require("./Context");
-const Table_1 = require("./Table");
-const dataFetcher_1 = require("./utils/dataFetcher");
-const PivotModal_1 = require("./internals/ReportBuilder/PivotModal");
-const colorToHex_1 = require("./utils/colorToHex");
-const valueFormatter_1 = require("./utils/valueFormatter");
-const axisFormatter_1 = require("./utils/axisFormatter");
-const colorValues = [
-    'slate',
-    'silver',
-    'zinc',
-    'neutral',
-    'stone',
-    'red',
-    'orange',
-    'amber',
-    'yellow',
-    'lime',
-    'green',
-    'emerald',
-    'teal',
-    'cyan',
-    'sky',
-    'blue',
-    'indigo',
-    'violet',
-    'purple',
-    'fuchsia',
-    'pink',
-    'rose',
-];
-/**
- * Selects a color from the list of colors based on the element's index. If
- * the element is a comparison range, it will select the color and then
- * transform it to be grayscale.
- * @param element the chart element to select the color for
- * @param colors a list of colors to choose from
- * @param index the index of this element in colors
- */
-function selectColor(element, colors, index) {
-    const isComparison = element.field.includes('comparison_');
-    const color = colors[index % colors.length];
-    if (!isComparison) {
-        return color;
-    }
-    // If the element is a comparison, make the color grayscale.
-    if (Object.keys(colorToHex_1.COLOR_TO_HEX).includes(color)) {
-        const colorHex = colorToHex_1.COLOR_TO_HEX[color];
-        const rgbArray = hexToRGB(colorHex);
-        return toGrayscale(rgbArray);
-    }
-    return 'gray'; // unknown color, fallback on gray
-}
-/**
- * Transform a hex string to an RGB array (eg. #000000 -> [0, 0, 0]).
- */
-function hexToRGB(hex) {
-    // Matches 3-4 pairs of hex digits with an optional leading `#` character
-    const regex = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})?$/i;
-    const result = regex.exec(hex);
-    if (result) {
-        return [
-            parseInt(result[0], 16),
-            parseInt(result[1], 16),
-            parseInt(result[2], 16),
-            ...(result[3] && [parseInt(result[3], 16)]), // <- alpha channel
-        ];
-    }
-    // try 'RGB[A](0, 0, 0[, 0])' style colors, matching on digits (with decimals)
-    const rgba = hex.match(/[0-9.]+/g);
-    if (rgba) {
-        return [rgba[0], rgba[1], rgba[2], ...(rgba[3] && [rgba[3]])];
-    }
-    return [128, 128, 128]; // unknown color, return 'gray'
-}
-/**
- * Converts an RGB object to grayscale.
- *
- * This implementation uses the luminosity method (same as GIMP's grayscale
- * algorithm) to convert colors with proportions relative to what the human
- * eye can percieve. This lets us maximize the visual difference between
- * different shades of gray.
- */
-function toGrayscale(rgba) {
-    let sum = 0;
-    sum += parseFloat(rgba[0] * 0.89);
-    sum += parseFloat(rgba[1] * 1.77);
-    sum += parseFloat(rgba[2] * 0.33);
-    const avg = sum / 3;
-    return `rgb(${avg}, ${avg}, ${avg})`;
-}
-// const data = [
-//   {
-//     date: 'Jan 22',
-//     SemiAnalysis: 2890,
-//     'The Pragmatic Engineer': 2338,
-//   },
-//   {
-//     date: 'Feb 22',
-//     SemiAnalysis: 2756,
-//     'The Pragmatic Engineer': 2103,
-//   },
-//   {
-//     date: 'Mar 22',
-//     SemiAnalysis: 3322,
-//     'The Pragmatic Engineer': 2194,
-//   },
-//   {
-//     date: 'Apr 22',
-//     SemiAnalysis: 3470,
-//     'The Pragmatic Engineer': 2108,
-//   },
-//   {
-//     date: 'May 22',
-//     SemiAnalysis: 3475,
-//     'The Pragmatic Engineer': 1812,
-//   },
-//   {
-//     date: 'Jun 22',
-//     SemiAnalysis: 3129,
-//     'The Pragmatic Engineer': 1726,
-//   },
-// ];
-const yAxisFields = [
-    { field: 'avg_days', label: 'average days' },
-    { field: 'median_days', label: 'median days' },
-];
-const labelFormatter = (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,
-                        borderStyle: 'solid',
-                        borderColor: 'white',
-                        boxShadow: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
-                        height: '12px',
-                        width: '12px',
-                        borderRadius: 100,
-                        marginRight: 6,
-                        boxSizing: 'border-box',
-                    } }), (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, label2, colors, valueFormatter, dateFormatter, theme, }) => {
-    if (active && payload) {
-        if (label2) {
-            return ((0, jsx_runtime_1.jsx)(exports.ChartTooltipFrame, { theme: theme, children: payload.map(({ value, name }, idx) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [idx === 0 && ((0, jsx_runtime_1.jsx)("div", { style: {
-                                borderStyle: 'solid',
-                                borderBottomColor: theme?.borderColor || '#E5E7EB',
-                                background: theme?.backgroundColor || 'white',
-                                borderTop: 'none',
-                                borderLeft: 'none',
-                                borderRight: 'none',
-                                borderBottomWidth: 1,
-                                display: 'flex',
-                                flexDirection: 'column',
-                                paddingLeft: '16px',
-                                paddingRight: '16px',
-                                paddingTop: '8px',
-                                paddingBottom: '8px',
-                            }, children: (0, jsx_runtime_1.jsx)("p", { style: {
-                                    textAlign: 'left',
-                                    marginTop: 0,
-                                    marginBottom: 0,
-                                    fontFamily: theme?.fontFamily,
-                                    color: theme?.primaryTextColor,
-                                    fontSize: theme?.fontSizeSmall || '14px',
-                                    fontWeight: theme?.boldFontWeight || '500',
-                                    paddingTop: 2,
-                                    paddingBottom: 2,
-                                }, children: labelFormatter(name) }) })), (0, jsx_runtime_1.jsx)("div", { 
-                            // className="qq-px-4 qq-space-y-1 qq-py-2 qq-px-4"
-                            style: {
-                                paddingRight: '16px',
-                                paddingLeft: '16px',
-                                paddingTop: idx === 0 && '8px',
-                                paddingBottom: '8px',
-                                // marginTop: '0.25rem',
-                            }, children: (0, jsx_runtime_1.jsx)(exports.ChartTooltipRow, { name: valueFormatter(value), value: !isNaN(new Date(idx === 0 ? label : label2)) &&
-                                    dateFormatter
-                                    ? dateFormatter(idx === 0 ? label : label2)
-                                    : !isNaN(new Date(idx === 0 ? label : label2))
-                                        ? (0, date_fns_1.format)(new Date(idx === 0 ? label : label2), 'MMM yyyy')
-                                        : idx === 0
-                                            ? label
-                                            : label2, 
-                                // color={categoryColors.get(name) ?? BaseColors.Blue}
-                                color: colors[idx], theme: theme }, `id-${idx}`) })] }))) }));
-        }
-        return ((0, jsx_runtime_1.jsxs)(exports.ChartTooltipFrame, { theme: theme, children: [(0, jsx_runtime_1.jsx)("div", { style: {
-                        borderStyle: 'solid',
-                        borderBottomColor: theme?.borderColor || '#E5E7EB',
-                        background: theme?.backgroundColor || 'white',
-                        borderTop: 'none',
-                        borderLeft: 'none',
-                        borderRight: 'none',
-                        borderBottomWidth: 1,
-                        display: 'flex',
-                        flexDirection: 'column',
-                        paddingLeft: '16px',
-                        paddingRight: '16px',
-                        paddingTop: '8px',
-                        paddingBottom: '8px',
-                    }, children: (0, jsx_runtime_1.jsx)("p", { style: {
-                            textAlign: 'left',
-                            marginTop: 0,
-                            marginBottom: 0,
-                            fontFamily: theme?.fontFamily,
-                            color: theme?.primaryTextColor,
-                            fontSize: theme?.fontSizeSmall || '14px',
-                            fontWeight: theme?.boldFontWeight || '500',
-                            paddingTop: 2,
-                            paddingBottom: 2,
-                        }, 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", { 
-                    // className="qq-px-4 qq-space-y-1 qq-py-2 qq-px-4"
-                    style: {
-                        paddingRight: '16px',
-                        paddingLeft: '16px',
-                        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}`))) })] }));
-    }
-    return null;
-};
+import { useState, useEffect, useContext, useMemo } from 'react';
+import { aggregate } from './utils/aggregate';
+import { getPostgresBasicType } from './ReportBuilder';
+import { differenceInHours } from 'date-fns';
+import BarList from './BarList';
+import PieChart from './PieChart';
+import { ClientContext, DashboardContext, ThemeContext, DashboardFiltersContext, } from './Context';
+import { SpecialTable } from './Table';
+import { getData } from './utils/dataFetcher';
+import { generatePivotTable, generatePivotTableYAxis, } from './internals/ReportBuilder/PivotModal';
+import { valueFormatter } from './utils/valueFormatter';
+import LineChart from './components/Chart/LineChart';
+import BarChart from './components/Chart/BarChart';
+import { mergeComparisonRange } from './utils/merge';
 // @ts-ignore
 function sumByKey(arr, key) {
     // @ts-ignore
@@ -324,11 +22,8 @@ function sumByKey(arr, key) {
         return isNaN(val) ? acc : acc + val;
     }, 0);
 }
-function isDate(str) {
-    return !isNaN(Date.parse(str));
-}
 function areDatesNearby(dateStr1, dateStr2) {
-    return Math.abs((0, date_fns_1.differenceInHours)(dateStr1, dateStr2)) < 24;
+    return Math.abs(differenceInHours(dateStr1, dateStr2)) < 24;
 }
 function isEquivalent(filters1, filters2) {
     if (Object.keys(filters2).length !== Object.keys(filters1).length) {
@@ -365,132 +60,100 @@ function isEquivalent(filters1, filters2) {
 }
 function didFiltersChange(dashboardItem, filters) {
     if (!dashboardItem?.filtersApplied || !filters) {
-        return false;
+        return true;
+    }
+    if (dashboardItem?.filtersApplied.comparison !== !filters.comparison) {
+        return true;
     }
     return !isEquivalent(dashboardItem.filtersApplied, filters);
 }
-const Chart = ({ chartId, config, colors, containerStyle, query, 
-//chartFilters
-SelectComponent, DatePickerComponent, }) => {
-    const { dateFilter, setDateFilter } = (0, react_1.useContext)(Context_1.DateFilterContext);
-    const { dispatch, dashboard } = (0, react_1.useContext)(Context_1.DashboardContext);
-    const { dashboardFilters } = (0, react_1.useContext)(Context_1.DashboardFiltersContext);
-    // const [chartFilters, setChartFilters] = useState({
-    //   chart_filter: {
-    //     table: 'transactions',
-    //     field: 'category',
-    //     labelField: 'category',
-    //     label: 'Category',
-    //     filterType: 'string',
-    //     query:
-    //       'WITH transactionssubview AS (select * from transactions), transactions AS (select * from transactionssubview WHERE customer_id = 2)\n' +
-    //       'select category, category from transactions group by category, category;',
-    //     options: [
-    //       { category: 'Food' },
-    //       { category: 'Fuel' },
-    //       { category: 'Other' },
-    //     ],
-    //   },
-    // });
-    const [client, _] = (0, react_1.useContext)(Context_1.ClientContext);
-    const [theme] = (0, react_1.useContext)(Context_1.ThemeContext);
-    const chartColors = (0, react_1.useMemo)(() => {
+function hashCode(s) {
+    return s.split('').reduce(function (a, b) {
+        a = (a << 5) - a + b.charCodeAt(0);
+        return a & a;
+    }, 0);
+}
+const Chart = ({ chartId, config, colors, containerStyle, query, SelectComponent, DatePickerComponent, isAnimationActive = true, }) => {
+    const { dispatch, dashboard } = useContext(DashboardContext);
+    const { dashboardFilters } = useContext(DashboardFiltersContext);
+    // eslint-disable-next-line no-unused-vars
+    const [client, _] = useContext(ClientContext);
+    const [theme] = useContext(ThemeContext);
+    const chartColors = useMemo(() => {
         return colors?.length
             ? colors
             : theme && theme.chartColors.length
                 ? theme.chartColors
                 : ['#4E80EE', '#E14F62', '#55B5A6', '#E9A23B', '#6466E9', '#55B685'];
     }, [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}
-        dateFilter: dateFilter, dashboardFilters: dashboardFilters, 
-        // chartFilters={chartFilters}
-        // setChartFilters={setChartFilters}
-        query: query, SelectComponent: SelectComponent, DatePickerComponent: DatePickerComponent }));
+    return (_jsx(ChartUpdater, { config: config, dispatch: dispatch, dashboard: dashboard, chartId: chartId, containerStyle: containerStyle, colors: chartColors, client: client, theme: theme, dashboardFilters: dashboardFilters, query: query, SelectComponent: SelectComponent, DatePickerComponent: DatePickerComponent, isAnimationActive: isAnimationActive }));
 };
-const ChartUpdater = ({ colors, chartId, config, containerStyle, dashboard, dispatch, client, theme, 
-// dateFilter,
-// isDateFilter,
-dashboardFilters, 
-// chartFilters,
-// setChartFilters,
-query, SelectComponent, DatePickerComponent, }) => {
-    const [loading, setLoading] = (0, react_1.useState)(false);
-    const [isComparison, setIsComparison] = (0, react_1.useState)(false);
-    const [bucketData, setBucketData] = (0, react_1.useState)(null);
-    (0, react_1.useEffect)(() => {
-        let isSubscribed = true;
+const ChartUpdater = ({ colors, chartId, config, containerStyle, dashboard, dispatch, client, theme, dashboardFilters, isAnimationActive, }) => {
+    const [loading, setLoading] = useState(false);
+    const [isComparison, setIsComparison] = useState(false);
+    const [bucketData, setBucketData] = useState(null);
+    useEffect(() => {
         async function getChartOptions() {
-            if (dashboard[chartId] &&
-                !didFiltersChange(dashboard[chartId], dashboardFilters)) {
+            if (!didFiltersChange(dashboard[chartId], dashboardFilters)) {
+                setLoading(false);
                 return;
             }
-            if (isSubscribed) {
-                try {
-                    setLoading(true);
-                    const hostedBody = {
-                        metadata: client.customerId
-                            ? {
-                                dashboardItemId: chartId,
-                                orgId: client.customerId,
-                                clientId: client.publicKey,
-                                task: 'item',
-                                filters: [...Object.values(dashboardFilters)],
-                            }
-                            : {
-                                dashboardItemId: chartId,
-                                task: 'item',
-                                clientId: client.publicKey,
-                                filters: [...Object.values(dashboardFilters)],
-                            },
-                    };
-                    const cloudBody = {
-                        id: chartId,
-                        filters: [...Object.values(dashboardFilters)],
-                    };
-                    const resp = await (0, dataFetcher_1.getData)(client, 'itempost', 'omit', hostedBody, cloudBody);
-                    if (resp) {
-                        setLoading(false);
-                        setIsComparison(!!resp.comparisonRows);
-                        if (resp.comparisonRows) {
-                            // merge the data into one dataset, starting from the back
-                            const compRows = resp.comparisonRows;
-                            let j = compRows.length - 1;
-                            for (let i = resp.rows.length - 1; i >= 0; i--) {
-                                if (j >= 0) {
-                                    for (const [key, value] of Object.entries(compRows[j])) {
-                                        resp.rows[i][`comparison_${key}`] = value;
-                                    }
-                                }
-                                j--;
-                            }
+            try {
+                setLoading(true);
+                const yoloFilters = Object.values(dashboardFilters).length
+                    ? Object.values(dashboardFilters).map((filter) => {
+                        const newFilter = { ...filter };
+                        if (newFilter.filterType === 'date_range') {
+                            // filter.field = chartDateFilter?.field;
+                            delete newFilter['field'];
+                            delete newFilter['options'];
+                            delete newFilter['selectedValue'];
                         }
-                        dispatch({
-                            type: 'UPDATE_DASHBOARD_ITEM',
-                            id: chartId,
-                            data: {
-                                ...resp,
-                                filtersApplied: dashboardFilters,
-                            },
-                        });
-                    }
-                }
-                catch (e) {
-                    console.log('Error fetching chart: ', e);
+                        return newFilter;
+                    })
+                    : [];
+                const hostedBody = {
+                    metadata: {
+                        dashboardItemId: chartId,
+                        ...(client.customerId && { orgId: client.customerId }),
+                        clientId: client.publicKey,
+                        task: 'item',
+                        filters: yoloFilters,
+                    },
+                };
+                const cloudBody = {
+                    id: chartId,
+                    filters: yoloFilters,
+                };
+                const resp = await getData(client, 'itempost', 'omit', hostedBody, cloudBody);
+                if (resp) {
                     setLoading(false);
+                    setIsComparison(!!resp.compareRows?.length);
+                    if (resp.compareRows) {
+                        mergeComparisonRange(resp);
+                    }
+                    dispatch({
+                        type: 'UPDATE_DASHBOARD_ITEM',
+                        id: chartId,
+                        data: {
+                            ...resp,
+                            filtersApplied: dashboardFilters,
+                        },
+                    });
                 }
             }
+            catch (e) {
+                console.log('Error fetching chart: ', e);
+                setLoading(false);
+            }
         }
         if (config) {
             setLoading(false);
             return;
         }
         getChartOptions();
-        return () => {
-            isSubscribed = false;
-        };
     }, [dashboardFilters, client, chartId]);
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         if (!dashboardFilters ||
             !chartId ||
             !dashboard[chartId] ||
@@ -500,7 +163,7 @@ query, SelectComponent, DatePickerComponent, }) => {
         }
         const dateFilter = Object.values(dashboardFilters).find((filter) => filter.filterType == 'date_range');
         if (dateFilter && dashboard[chartId].rows.length) {
-            const aggregatedObj = (0, aggregate_1.aggregate)(dashboard[chartId], dashboard[chartId].buckets, dateFilter);
+            const aggregatedObj = aggregate(dashboard[chartId], dashboard[chartId].buckets, dateFilter);
             setBucketData({
                 name: dashboard[chartId].name,
                 xAxisFormat: aggregatedObj.xAxisFormat,
@@ -510,10 +173,10 @@ query, SelectComponent, DatePickerComponent, }) => {
             });
         }
         const stringFilters = dashboard[chartId].buckets.filter((bucket) => {
-            return ((0, ReportBuilder_1.getPostgresBasicType)(dashboard[chartId].fields.find((field) => field.name === bucket.field)) === 'string');
+            return (getPostgresBasicType(dashboard[chartId].fields.find((field) => field.name === bucket.field)) === 'string');
         });
         if (stringFilters.length && dashboard[chartId].rows.length) {
-            const aggregatedObj = (0, aggregate_1.aggregate)(dashboard[chartId], dashboard[chartId].buckets, null);
+            const aggregatedObj = aggregate(dashboard[chartId], dashboard[chartId].buckets, null);
             setBucketData({
                 name: dashboard[chartId].name,
                 xAxisFormat: aggregatedObj.xAxisFormat,
@@ -526,38 +189,25 @@ query, SelectComponent, DatePickerComponent, }) => {
             setBucketData(null);
         }
     }, [dashboard[chartId]]);
-    // useEffect(() => {
-    //   if (comparison && compareRows) {
-    //     setCombinedRows(combineArraysByKey(compareRows, data, xAxisField));
-    //   }
-    // }, [compareRows, data]);x
-    // console.log('combinedRows', combinedRows);
-    // const onChangeFilter = (filter, value) => {
-    //   if (filter.filterType === 'string') {
-    //     const newFilterValue = {
-    //       ...filter,
-    //       selectedValue: filter.options.find(
-    //         elem => elem[removeQuotes(filter.field)] === value
-    //       )[removeQuotes(filter.field)],
-    //     };
-    //     setChartFilters(prevFilters => ({
-    //       ...prevFilters,
-    //       chart_filter: newFilterValue,
-    //     }));
-    //     return;
-    //   }
-    // };
-    const dateFilter = Object.values(dashboardFilters).find((filter) => filter.filterType == 'date_range');
-    const pivotTable = (0, react_1.useMemo)(() => {
+    const dateFilter = Object.values(dashboardFilters ?? {}).find((filter) => filter.filterType == 'date_range');
+    const isPivot = dashboard[chartId]?.pivot || config?.pivot;
+    const pivotTable = useMemo(() => {
         const pivot = dashboard[chartId]?.pivot || config?.pivot;
         const data = dashboard[chartId] ? dashboard[chartId] : config;
         return pivot && data?.rows
-            ? (0, PivotModal_1.generatePivotTable)(pivot, data.rows, dateFilter?.startDate
+            ? generatePivotTable(pivot, JSON.parse(JSON.stringify(data.rows)), // deep copy
+            dateFilter?.startDate
                 ? [dateFilter?.startDate, dateFilter?.endDate, null]
+                : [null, null, null], Boolean(dateFilter?.comparisonRange?.startDate), -1, dateFilter?.comparisonRange?.startDate
+                ? [
+                    dateFilter?.comparisonRange.startDate,
+                    dateFilter?.comparisonRange.endDate,
+                    null,
+                ]
                 : [null, null, null])
             : null;
-    }, [dashboard, chartId, config, dateFilter]);
-    const pivotTableYAxis = (0, react_1.useMemo)(() => {
+    }, [dashboard, chartId, dashboard[chartId], config, dateFilter]);
+    const pivotTableYAxis = useMemo(() => {
         if (!pivotTable) {
             return null;
         }
@@ -566,30 +216,25 @@ query, SelectComponent, DatePickerComponent, }) => {
             ? config.yAxisFields
             : dashboard[chartId]?.yAxisFields;
         return yAxisFields
-            ? (0, PivotModal_1.generatePivotTableYAxis)(pivot, pivotTable.columns, yAxisFields?.[0]?.format)
+            ? generatePivotTableYAxis(pivot, pivotTable.columns, yAxisFields?.[0]?.format)
             : null;
     }, [pivotTable]);
     if (!config && (!dashboard[chartId] || loading)) {
-        return ((0, jsx_runtime_1.jsx)("div", { 
-            // className="flex flex-col flex-1 h-[100%]"
-            style: {
+        return (_jsx("div", { 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: {
+            }, children: _jsx("div", { style: {
                     height: containerStyle?.height,
                     width: '100%',
                     boxSizing: 'content-box',
                     borderRadius: 8,
                     overflow: 'hidden',
-                }, children: (0, jsx_runtime_1.jsxs)("svg", { width: "100%", height: "100%", xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", children: [(0, jsx_runtime_1.jsx)("rect", { width: "100%", height: "100%", fill: theme?.loadingStateBackgroundColor || '#F9F9FA' }), (0, jsx_runtime_1.jsx)("defs", { fill: theme?.loadingStateBackgroundColor || '#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%", stopColor: "rgba(255,255,255,0)" }), (0, jsx_runtime_1.jsx)("stop", { offset: "50%", stopColor: "#FEFEFE" }), (0, jsx_runtime_1.jsx)("stop", { offset: "100%", stopColor: "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" }) })] }) }) }));
+                }, children: _jsxs("svg", { width: "100%", height: "100%", xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", children: [_jsx("rect", { width: "100%", height: "100%", fill: theme?.loadingStateBackgroundColor || '#F9F9FA' }), _jsx("defs", { fill: theme?.loadingStateBackgroundColor || '#F9F9FA', children: _jsxs("linearGradient", { id: "skeletonGradient", x1: "0%", y1: "0%", x2: "10%", y2: "0%", gradientUnits: "userSpaceOnUse", children: [_jsx("stop", { offset: "0%", stopColor: "rgba(255,255,255,0)" }), _jsx("stop", { offset: "50%", stopColor: "#FEFEFE" }), _jsx("stop", { offset: "100%", stopColor: "rgba(255,255,255,0)" }), _jsx("animate", { attributeName: "x1", from: "-100%", to: "100%", dur: "2s", repeatCount: "indefinite" }), _jsx("animate", { attributeName: "x2", from: "-50%", to: "150%", dur: "2s", repeatCount: "indefinite" })] }) }), _jsx("rect", { width: "50%", height: "100%", fill: "url(#skeletonGradient)", children: _jsx("animate", { attributeName: "x", from: "-100%", to: "100%", dur: "2s", repeatCount: "indefinite" }) })] }) }) }));
     }
-    if (config?.chartType === 'pie' || dashboard[chartId]?.chartType === 'pie') {
+    // TODO: Figure out if we can use ?? to coalesce these into the variable.
+    const chartTypes = [config?.chartType, dashboard[chartId]?.chartType];
+    if (chartTypes.includes('pie')) {
         const rows = pivotTable
             ? pivotTable.rows
             : config
@@ -603,48 +248,43 @@ query, SelectComponent, DatePickerComponent, }) => {
         const xAxisField = config
             ? config.xAxisField
             : dashboard[chartId].xAxisField;
-        return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(PieChart_1.default
-            // @ts-ignore
-            , { 
-                // @ts-ignore
-                containerStyle: containerStyle, data: rows.map((row) => {
-                    return {
-                        ...row,
-                        count: parseInt(row[yAxisFields[0].field]) /
-                            sumByKey(rows, yAxisFields[0].field),
-                    };
-                }), category: yAxisFields[0].field, index: xAxisField, colors: colors, theme: theme }) }));
+        return (_jsx(PieChart, { containerStyle: containerStyle, data: rows.map((row) => {
+                return {
+                    ...row,
+                    count: parseInt(row[yAxisFields[0].field]) /
+                        sumByKey(rows, yAxisFields[0].field),
+                };
+            }), category: yAxisFields[0].field, index: xAxisField, colors: colors, theme: theme }));
     }
-    if (config?.chartType === 'table' ||
-        dashboard[chartId]?.chartType === 'table') {
+    if (chartTypes.includes('table')) {
         const data = dashboard[chartId] ? dashboard[chartId] : config;
-        return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(Table_1.SpecialTable, { rows: pivotTable?.rows || data.rows, columns: pivotTable?.columns || data.columns || data.yAxisFields, height: '400px', containerStyle: {
-                    ...containerStyle,
-                }, theme: theme, isTableChart: true, name: data.name }) }));
+        return (_jsx(SpecialTable, { rows: pivotTable?.rows ?? data.rows ?? [], columns: pivotTable?.columns || data.columns || data.yAxisFields, height: '400px', containerStyle: {
+                ...containerStyle,
+            }, theme: theme, isTableChart: true, name: data.name }));
     }
-    if (config?.chartType === 'bar' || dashboard[chartId]?.chartType === 'bar') {
-        return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(BarList_1.default, { data: pivotTable
-                    ? pivotTable.rows
-                    : config
-                        ? (config.bucketedRows &&
-                            config.bucketedRows.length > 0 &&
-                            config.bucketedRows) ||
-                            config.rows
-                        : bucketData && bucketData.rows
-                            ? bucketData.rows
-                            : dashboard[chartId].rows, theme: theme, yAxisFields: pivotTableYAxis
-                    ? pivotTableYAxis
-                    : config
-                        ? config.yAxisFields
-                        : dashboard[chartId].yAxisFields, colors: colors, xAxisField: config
-                    ? config.xAxisField
-                    : bucketData
-                        ? bucketData.xAxisField
-                        : dashboard[chartId].xAxisField, xAxisFormat: config
-                    ? config.xAxisFormat
-                    : bucketData
-                        ? bucketData.xAxisFormat
-                        : dashboard[chartId].xAxisFormat, containerStyle: containerStyle }) }));
+    if (chartTypes.includes('bar')) {
+        return (_jsx(BarList, { data: pivotTable
+                ? pivotTable.rows
+                : config
+                    ? (config.bucketedRows &&
+                        config.bucketedRows.length > 0 &&
+                        config.bucketedRows) ||
+                        config.rows
+                    : bucketData && bucketData.rows
+                        ? bucketData.rows
+                        : dashboard[chartId].rows, theme: theme, yAxisFields: pivotTableYAxis
+                ? pivotTableYAxis
+                : config
+                    ? config.yAxisFields
+                    : dashboard[chartId].yAxisFields, colors: colors, xAxisField: config
+                ? config.xAxisField
+                : bucketData
+                    ? bucketData.xAxisField
+                    : dashboard[chartId].xAxisField, xAxisFormat: config
+                ? config.xAxisFormat
+                : bucketData
+                    ? bucketData.xAxisFormat
+                    : dashboard[chartId].xAxisFormat, containerStyle: containerStyle }));
     }
     const yAxisFields = pivotTableYAxis
         ? pivotTableYAxis
@@ -659,79 +299,24 @@ query, SelectComponent, DatePickerComponent, }) => {
             label: `comparison ${sampleField.label}`,
         };
     }
-    if (config?.chartType === 'column' ||
-        dashboard[chartId]?.chartType === 'column') {
-        return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(BarChart, { colors: colors, theme: theme, yAxisFields: yAxisFields, 
-                // @ts-ignore
-                data: pivotTable
-                    ? pivotTable.rows
-                    : config
-                        ? (config.bucketedRows &&
-                            config.bucketedRows.length > 0 &&
-                            config.bucketedRows) ||
-                            config.rows
-                        : bucketData && bucketData.rows && bucketData.rows.length > 0
-                            ? bucketData.rows
-                            : dashboard[chartId].rows, xAxisField: config
-                    ? config.xAxisField
-                    : bucketData
-                        ? bucketData.xAxisField
-                        : dashboard[chartId].xAxisField, xAxisLabel: config
-                    ? config.xAxisLabel
-                    : bucketData
-                        ? bucketData.xAxisLabel
-                        : dashboard[chartId].xAxisLabel, xAxisFormat: config
-                    ? config.xAxisFormat
-                    : bucketData
-                        ? bucketData.xAxisFormat
-                        : dashboard[chartId].xAxisFormat, containerStyle: containerStyle, comparison: dateFilter?.comparison }) }));
-    }
-    if (config?.chartType === 'metric' ||
-        dashboard[chartId]?.chartType === 'metric') {
-        const data = dashboard[chartId] ? dashboard[chartId] : config;
-        return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)("div", { style: {
-                    fontFamily: theme?.fontFamily,
-                    fontSize: 32,
-                    color: theme?.primaryTextColor,
-                    fontWeight: '600',
-                    textOverflow: 'ellipsis',
-                    margin: 0,
-                    // paddingTop: 20,
-                    // paddingBottom: 20,
-                    // paddingLeft: 25,
-                    // paddingRight: 25,
-                    whiteSpace: 'nowrap',
-                    boxSizing: 'content-box',
-                    maxWidth: '100%',
-                    textAlign: 'left',
-                    overflow: 'hidden',
-                    height: containerStyle?.height || '100%',
-                    display: 'flex',
-                    flexDirection: 'column',
-                }, children: data.rows.length > 0 &&
-                    (0, valueFormatter_1.valueFormatter)({
-                        value: data.rows[0][data.xAxisField],
-                        field: data.xAxisField,
-                        fields: [
-                            {
-                                field: data.xAxisField,
-                                format: data.xAxisFormat,
-                            },
-                        ],
-                    }) }) }));
-    }
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(LineChart, { colors: colors, yAxisFields: yAxisFields, 
+    const data = (pivotTable
+        ? pivotTable.rows
+        : config
+            ? (config.bucketedRows &&
+                config.bucketedRows.length > 0 &&
+                config.bucketedRows) ||
+                config.rows
+            : bucketData && bucketData.rows && bucketData.rows.length > 0
+                ? bucketData.rows
+                : dashboard[chartId].rows)
+        // filter out any rows with a comparison key but no corresponding primary
+        ?.filter((row) => Object.keys(row).every((key) => !key.startsWith('comparison_') ||
+        (key.startsWith('comparison_') &&
+            Boolean(row[key.replace('comparison_', '')]))));
+    if (chartTypes.includes('column')) {
+        return (_jsx(BarChart, { colors: colors, theme: theme, isStacked: isPivot && yAxisFields.length > (dateFilter?.comparison ? 2 : 1), yAxisFields: yAxisFields, 
             // @ts-ignore
-            data: pivotTable
-                ? pivotTable.rows
-                : config
-                    ? (config.bucketedRows &&
-                        config.bucketedRows.length > 0 &&
-                        config.bucketedRows) ||
-                        config.rows
-                    : bucketData
-                        ? bucketData.rows
-                        : dashboard[chartId].rows, xAxisField: config
+            data: data, xAxisField: config
                 ? config.xAxisField
                 : bucketData
                     ? bucketData.xAxisField
@@ -743,233 +328,49 @@ query, SelectComponent, DatePickerComponent, }) => {
                 ? config.xAxisFormat
                 : bucketData
                     ? bucketData.xAxisFormat
-                    : dashboard[chartId].xAxisFormat, containerStyle: containerStyle, theme: theme, comparison: dateFilter?.comparison }) }));
-};
-function formatNumber(num, label) {
-    num = Number(num);
-    if (num < 1000) {
-        return num.toFixed(2) + ' ' + label;
+                    : dashboard[chartId].xAxisFormat, containerStyle: containerStyle, comparison: dateFilter?.comparison, isAnimationActive: isAnimationActive }));
     }
-    if (num >= 1.0e6) {
-        return Math.round(num / 1.0e6).toLocaleString() + 'M';
-    }
-    else {
-        return Math.round(num / 1.0e6).toLocaleString() + 'M';
-    }
-}
-//  @ts-ignore
-// function getDomain(data, fields) {
-//   //  @ts-ignore
-//   const fieldsArray = fields.map(elem => elem.field);
-//   const [minValue, maxValue] = data.reduce(
-//     //  @ts-ignore
-//     ([min, max], item) => [
-//       //  @ts-ignore
-//       Math.min(min, ...fieldsArray.map(field => item[field])),
-//       //  @ts-ignore
-//       Math.max(max, ...fieldsArray.map(field => item[field])),
-//     ],
-//     [Infinity, -Infinity]
-//   );
-//   const adjustedMin = Math.min(minValue, 0);
-//   const padding = Math.round(0.2 * (maxValue - minValue));
-//   const adjustedMax = maxValue + padding;
-//   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];
-            // Try to cast the value to a number
-            const numericValue = parseFloat(value);
-            if (!isNaN(numericValue)) {
-                value = numericValue;
-            }
-            if (typeof value === 'number') {
-                numericValues.push(value);
-            }
-        });
-    });
-    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];
-}
-const CustomizedTick = ({ x, y, payload, 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 }));
-};
-function BarChart({ colors, yAxisFields, data, containerStyle, xAxisField, xAxisLabel, xAxisFormat, theme, comparison, }) {
-    const newColors = (0, PieChart_1.findComplementaryAndAnalogousColors)(colors[0], colors[1]);
-    if (!data || data.length === 0) {
-        return ((0, jsx_runtime_1.jsx)("div", { style: {
-                display: 'flex',
-                flex: '1 0 auto',
-                height: '100%',
-                margin: 'auto',
-                justifyContent: 'center',
-                alignItems: 'center',
-                fontSize: 13,
-                color: theme.secondaryTextColor,
-            }, children: "No results found for specified time period." }));
-    }
-    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.BarChart, { 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
-                    // width={56}
-                    , { 
-                        // width={56}
-                        width: 44, 
-                        // width={30}
-                        // textAnchor="start"
-                        hide: false, axisLine: false, tickLine: false, type: "number", domain: getDomain(data, yAxisFields), 
-                        // domain={[0, 150]}
-                        tick: { transform: 'translate(-3, 0)' }, style: {
-                            fontSize: '12px',
-                            fontFamily: theme.chartLabelFontFamily,
-                        }, tickFormatter: (tick) => (0, axisFormatter_1.axisFormatter)({
-                            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
-                        style: {
-                            fontSize: '12px',
-                            // TODO: generalize
-                            fontFamily: theme.chartLabelFontFamily,
-                            marginTop: '20px',
-                        }, tickLine: false, axisLine: false, tickFormatter: (tick) => (0, axisFormatter_1.axisFormatter)({
-                            value: tick,
-                            field: xAxisField,
-                            fields: [{ field: xAxisField, format: xAxisFormat }],
-                        }) }), (0, jsx_runtime_1.jsx)(recharts_1.Tooltip, { wrapperStyle: { outline: 'none', zIndex: 2 }, isAnimationActive: false, cursor: { fill: '#d1d5db', opacity: '0.15' }, content: ({ active, payload, label }) => {
-                            let label2;
-                            if (comparison &&
-                                payload?.length > 1 &&
-                                payload[0].payload[xAxisField + '2']) {
-                                label2 = payload[0].payload[xAxisField + '2'];
-                            }
-                            return ((0, jsx_runtime_1.jsx)(ChartTooltip, { theme: theme, active: active, payload: payload, label: label, label2: label2, dateFormatter: (value) => (0, valueFormatter_1.valueFormatter)({
-                                    value,
-                                    field: xAxisField,
-                                    fields: [{ field: xAxisField, format: xAxisFormat }],
-                                }), valueFormatter: (value) => (0, valueFormatter_1.valueFormatter)({
-                                    value,
-                                    field: payload[0].dataKey,
-                                    fields: yAxisFields,
-                                }), colors: colors }));
-                        }, 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: selectColor(elem, colors, index), 
-                        // barSize={20}
-                        isAnimationActive: true }, elem.field)))] }) }) }));
-}
-function removeQuotes(str) {
-    if (str.startsWith('"') && str.endsWith('"')) {
-        return str.slice(1, -1);
-    }
-    else {
-        return str;
-    }
-}
-function LineChart({ colors, yAxisFields, data, containerStyle, xAxisField, xAxisLabel, xAxisFormat, theme, comparison, }) {
-    if (!yAxisFields || !yAxisFields.length) {
-        return null;
-    }
-    if (!data || data.length === 0) {
-        return ((0, jsx_runtime_1.jsx)("div", { style: {
+    if (chartTypes.includes('metric')) {
+        const data = dashboard[chartId] ? dashboard[chartId] : config;
+        return (_jsx("div", { style: {
+                fontFamily: theme?.fontFamily,
+                fontSize: 32,
+                color: theme?.primaryTextColor,
+                fontWeight: '600',
+                textOverflow: 'ellipsis',
+                margin: 0,
+                whiteSpace: 'nowrap',
+                boxSizing: 'content-box',
+                maxWidth: '100%',
+                textAlign: 'left',
+                overflow: 'hidden',
+                height: containerStyle?.height || '100%',
                 display: 'flex',
-                flex: '1 0 auto',
-                height: '100%',
-                margin: 'auto',
-                justifyContent: 'center',
-                alignItems: 'center',
-                fontSize: 13,
-                color: theme.secondaryTextColor,
-            }, children: "No results found for specified time period." }));
+                flexDirection: 'column',
+            }, children: data.rows.length > 0 &&
+                valueFormatter({
+                    value: data.rows[0][data.xAxisField],
+                    field: data.xAxisField,
+                    fields: [
+                        {
+                            field: data.xAxisField,
+                            format: data.xAxisFormat,
+                        },
+                    ],
+                }) }));
     }
-    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}
-                        dataKey: xAxisField, tick: { transform: 'translate(0, 6)' }, 
-                        //   ticks={
-                        //     startEndOnly
-                        //       ? [data[0][index], data[data.length - 1][index]]
-                        //       : undefined
-                        //   }
-                        style: {
-                            fontSize: '12px',
-                            fontFamily: theme?.chartLabelFontFamily ||
-                                theme?.fontFamily ||
-                                'Inter; Helvetica',
-                            color: theme?.chartLabelColor || '#666666',
-                        }, 
-                        // interval="preserveStartEnd"
-                        interval: "preserveStartEnd", 
-                        // interval={0}
-                        tickLine: false, axisLine: false, padding: { left: 10, right: 10 }, minTickGap: 5, tickFormatter: (tick) => (0, axisFormatter_1.axisFormatter)({
-                            value: tick,
-                            field: xAxisField,
-                            fields: [{ field: xAxisField, format: xAxisFormat }],
-                        }) }), (0, jsx_runtime_1.jsx)(recharts_1.YAxis
-                    // textAnchor="left"
-                    // tickMargin={11}
-                    , { 
-                        // textAnchor="left"
-                        // tickMargin={11}
-                        width: 44, 
-                        // width={30}
-                        //   hide={!showYAxis}
-                        axisLine: false, tickLine: false, type: "number", 
-                        //   domain={yAxisDomain as AxisDomain}
-                        domain: getDomain(data, yAxisFields), tick: { transform: 'translate(-3, 0)' }, style: {
-                            fontSize: '12px',
-                            fontFamily: theme?.chartLabelFontFamily ||
-                                theme?.fontFamily ||
-                                'Inter; Helvetica',
-                            color: theme?.chartLabelColor || '#666666',
-                        }, tickFormatter: (value) => (0, axisFormatter_1.axisFormatter)({
-                            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 }) => {
-                            let label2;
-                            if (comparison &&
-                                payload?.length > 1 &&
-                                payload[0].payload[xAxisField + '2']) {
-                                label2 = payload[0].payload[xAxisField + '2'];
-                            }
-                            return ((0, jsx_runtime_1.jsx)(ChartTooltip, { active: active, payload: payload, label: label, label2: label2, dateFormatter: (value) => (0, valueFormatter_1.valueFormatter)({
-                                    value,
-                                    field: xAxisField,
-                                    fields: [{ field: xAxisField, format: xAxisFormat }],
-                                }), valueFormatter: (value) => (0, valueFormatter_1.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: selectColor(elem, 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: selectColor(elem, colors, index), 
-                        // if hide area
-                        // fill="transparent"
-                        fill: `url(#gradient${index})`, strokeWidth: 2, dot: false, isAnimationActive: true }, elem.field)))] }) }) }));
-}
-exports.default = Chart;
-//# sourceMappingURL=Chart.js.map
+    return (_jsx(LineChart, { colors: colors, yAxisFields: yAxisFields, data: data, xAxisField: config
+            ? config.xAxisField
+            : bucketData
+                ? bucketData.xAxisField
+                : dashboard[chartId].xAxisField, xAxisLabel: config
+            ? config.xAxisLabel
+            : bucketData
+                ? bucketData.xAxisLabel
+                : dashboard[chartId].xAxisLabel, xAxisFormat: config
+            ? config.xAxisFormat
+            : bucketData
+                ? bucketData.xAxisFormat
+                : dashboard[chartId].xAxisFormat, containerStyle: containerStyle, theme: theme, comparison: dateFilter?.comparison, isAnimationActive: isAnimationActive }));
+};
+export default Chart;