@quillsql/react 2.10.37 → 2.10.39

package/dist/cjs/BarList.d.ts

@@ -13,7 +13,7 @@ export interface BarListProps extends React.HTMLAttributes<HTMLDivElement> {
     yAxisFields: YAxisField[];
     containerStyle: any;
     xAxisFormat: string;
-    colors: string[];
+    colors?: string[];
     theme: any;
 }
 export declare function hexToRgbaWith10PercentAlpha(hex: any): string;

package/dist/cjs/BarList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BarList.d.ts","sourceRoot":"","sources":["../../src/BarList.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAqExC,UAAU,UAAU;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,YAAa,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACxE,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,cAAc,CAAC,EAAE,GAAG,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,UAAU,EAAE,CAAC;IAC1B,cAAc,EAAE,GAAG,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,KAAK,EAAE,GAAG,CAAC;CACZ;AAYD,wBAAgB,2BAA2B,CAAC,GAAG,KAAA,UAW9C;AAED,QAAA,MAAM,OAAO,qFA6dX,CAAC;AAEH,eAAe,OAAO,CAAC"}
+{"version":3,"file":"BarList.d.ts","sourceRoot":"","sources":["../../src/BarList.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAqExC,UAAU,UAAU;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,YAAa,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACxE,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,cAAc,CAAC,EAAE,GAAG,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,UAAU,EAAE,CAAC;IAC1B,cAAc,EAAE,GAAG,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,KAAK,EAAE,GAAG,CAAC;CACZ;AAYD,wBAAgB,2BAA2B,CAAC,GAAG,KAAA,UAW9C;AAED,QAAA,MAAM,OAAO,qFA6dX,CAAC;AAEH,eAAe,OAAO,CAAC"}

package/dist/cjs/Chart.d.ts

@@ -9,6 +9,7 @@ interface BaseChartProps {
     hideXAxis?: boolean;
     hideYAxis?: boolean;
     hideCartesianGrid?: boolean;
+    dateRangeFilterDisabled?: boolean;
 }
 interface WithChartId extends BaseChartProps {
     chartId: string;
@@ -37,6 +38,6 @@ interface WithConfig extends BaseChartProps {
 }
 type ChartProps = WithChartId | WithConfig;
 export declare function didFiltersChange(dashboardItem: any, filters: any): boolean;
-declare const Chart: ({ chartId, config, colors, containerStyle, query, SelectComponent, dateRangeFilterDisabled, isAnimationActive, hideXAxis, hideYAxis, hideCartesianGrid, }: ChartProps) => import("react/jsx-runtime").JSX.Element;
+declare const Chart: (data: ChartProps) => import("react/jsx-runtime").JSX.Element;
 export default Chart;
 //# sourceMappingURL=Chart.d.ts.map

package/dist/cjs/Chart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Chart.d.ts","sourceRoot":"","sources":["../../src/Chart.tsx"],"names":[],"mappings":";AA8BA,UAAU,cAAc;IACtB,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACrC,UAAU,CAAC,EAAE,GAAG,CAAC;IACjB,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED,UAAU,WAAY,SAAQ,cAAc;IAC1C,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,MAAM,WAAW,GACnB,cAAc,GACd,mBAAmB,GACnB,oBAAoB,GACpB,eAAe,GACf,cAAc,GACd,UAAU,GACV,aAAa,GACb,eAAe,GACf,oBAAoB,GACpB,UAAU,GACV,SAAS,GACT,QAAQ,CAAC;AAEb,UAAU,UAAU;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,WAAW,CAAC;CACrB;AAED,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,WAAW,CAAC;IACzB,WAAW,EAAE,UAAU,EAAE,CAAC;IAC1B,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,OAAO,EAAE,GAAG,EAAE,CAAC;IACf,KAAK,EAAE,GAAG,CAAC;CACZ;AAED,UAAU,UAAW,SAAQ,cAAc;IACzC,MAAM,EAAE,aAAa,GAAG,GAAG,CAAC;CAC7B;AAED,KAAK,UAAU,GAAG,WAAW,GAAG,UAAU,CAAC;AA4D3C,wBAAgB,gBAAgB,CAAC,aAAa,KAAA,EAAE,OAAO,KAAA,WAQtD;AAKD,QAAA,MAAM,KAAK,8JAYR,UAAU,4CAkCZ,CAAC;AAqdF,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Chart.d.ts","sourceRoot":"","sources":["../../src/Chart.tsx"],"names":[],"mappings":";AA6BA,UAAU,cAAc;IACtB,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACrC,UAAU,CAAC,EAAE,GAAG,CAAC;IACjB,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,uBAAuB,CAAC,EAAE,OAAO,CAAC;CACnC;AAED,UAAU,WAAY,SAAQ,cAAc;IAC1C,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,MAAM,WAAW,GACnB,cAAc,GACd,mBAAmB,GACnB,oBAAoB,GACpB,eAAe,GACf,cAAc,GACd,UAAU,GACV,aAAa,GACb,eAAe,GACf,oBAAoB,GACpB,UAAU,GACV,SAAS,GACT,QAAQ,CAAC;AAEb,UAAU,UAAU;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,WAAW,CAAC;CACrB;AAED,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,WAAW,CAAC;IACzB,WAAW,EAAE,UAAU,EAAE,CAAC;IAC1B,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,OAAO,EAAE,GAAG,EAAE,CAAC;IACf,KAAK,EAAE,GAAG,CAAC;CACZ;AAED,UAAU,UAAW,SAAQ,cAAc;IACzC,MAAM,EAAE,aAAa,GAAG,GAAG,CAAC;CAC7B;AAED,KAAK,UAAU,GAAG,WAAW,GAAG,UAAU,CAAC;AA+D3C,wBAAgB,gBAAgB,CAAC,aAAa,EAAE,GAAG,EAAE,OAAO,EAAE,GAAG,WAQhE;AAKD,QAAA,MAAM,KAAK,SAAU,UAAU,4CAiC9B,CAAC;AAmeF,eAAe,KAAK,CAAC"}

package/dist/cjs/Chart.js

@@ -5,7 +5,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.didFiltersChange = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-// @ts-nocheck
 const react_1 = require("react");
 const date_fns_1 = require("date-fns");
 const BarList_1 = __importDefault(require("./BarList"));
@@ -31,8 +30,8 @@ function sumByKey(arr, key) {
         return isNaN(val) ? acc : acc + val;
     }, 0);
 }
-function areDatesNearby(dateStr1, dateStr2) {
-    return Math.abs((0, date_fns_1.differenceInHours)(dateStr1, dateStr2)) < 24;
+function areDatesNearby(date1, date2) {
+    return Math.abs((0, date_fns_1.differenceInHours)(date1, date2)) < 24;
 }
 function isEquivalent(filters1, filters2) {
     if (Object.keys(filters2).length !== Object.keys(filters1).length) {
@@ -41,6 +40,9 @@ function isEquivalent(filters1, filters2) {
     const filterKeys = Object.keys(filters2);
     for (let i = 0; i < filterKeys.length; i++) {
         const currentKeyWereLookingAt = filterKeys[i];
+        if (!currentKeyWereLookingAt) {
+            return false;
+        }
         const filter1 = filters1[currentKeyWereLookingAt];
         if (!filter1) {
             return false;
@@ -77,25 +79,27 @@ function didFiltersChange(dashboardItem, filters) {
     return !isEquivalent(dashboardItem.filtersApplied, filters);
 }
 exports.didFiltersChange = didFiltersChange;
-const Chart = ({ chartId, config, colors, containerStyle, query, SelectComponent, dateRangeFilterDisabled = false, isAnimationActive = true, hideXAxis = false, hideYAxis = false, hideCartesianGrid = false, }) => {
-    const { dispatch, dashboard } = (0, react_1.useContext)(Context_1.DashboardContext);
-    const { dashboardFilters } = (0, react_1.useContext)(Context_1.DashboardFiltersContext);
-    // eslint-disable-next-line no-unused-vars
-    const [client, _] = (0, react_1.useContext)(Context_1.ClientContext);
+const Chart = (data) => {
+    if ('config' in data) {
+        return ((0, jsx_runtime_1.jsx)(ChartDisplay, { ...data, loading: false, isComparison: !!data.config.compareRows?.length }));
+    }
     const [theme] = (0, react_1.useContext)(Context_1.ThemeContext);
     const chartColors = (0, react_1.useMemo)(() => {
-        return colors?.length
-            ? colors
+        return data.colors?.length
+            ? data.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, dashboardFilters: dashboardFilters, query: query, isAnimationActive: isAnimationActive, hideXAxis: hideXAxis, hideYAxis: hideYAxis, hideCartesianGrid: hideCartesianGrid, dateRangeFilterDisabled: dateRangeFilterDisabled }));
+    }, [data.colors]);
+    return ((0, jsx_runtime_1.jsx)(ChartUpdater, { chartId: data.chartId, containerStyle: data.containerStyle, colors: chartColors, theme: theme, isAnimationActive: data.isAnimationActive, hideXAxis: data.hideXAxis, hideYAxis: data.hideYAxis, hideCartesianGrid: data.hideCartesianGrid, dateRangeFilterDisabled: data.dateRangeFilterDisabled }));
 };
-const ChartUpdater = ({ colors, chartId, config, containerStyle, dashboard, dispatch, client, theme, dashboardFilters, isAnimationActive, hideXAxis, hideYAxis, hideCartesianGrid, dateRangeFilterDisabled, }) => {
+const ChartUpdater = ({ colors, chartId, containerStyle, theme, isAnimationActive, hideXAxis, hideYAxis, hideCartesianGrid, dateRangeFilterDisabled, }) => {
+    const { dispatch, dashboard } = (0, react_1.useContext)(Context_1.DashboardContext);
+    const { dashboardFilters } = (0, react_1.useContext)(Context_1.DashboardFiltersContext);
     const [initialLoad, setInitialLoad] = (0, react_1.useState)(true);
     const [loading, setLoading] = (0, react_1.useState)(false);
     const [isComparison, setIsComparison] = (0, react_1.useState)(false);
+    const [client, _] = (0, react_1.useContext)(Context_1.ClientContext);
     (0, react_1.useEffect)(() => {
         async function getChartOptions() {
             if (!didFiltersChange(dashboard[chartId], dashboardFilters)) {
@@ -155,22 +159,30 @@ const ChartUpdater = ({ colors, chartId, config, containerStyle, dashboard, disp
                 setLoading(false);
             }
         }
-        if (config) {
-            setLoading(false);
-            return;
-        }
         setInitialLoad(false);
         getChartOptions();
     }, [dashboardFilters, client, chartId]);
-    const dateFilter = Object.values(dashboardFilters ?? {}).find((filter) => filter.filterType == 'date_range');
-    const isPivot = dashboard[chartId]?.pivot || config?.pivot;
+    return ((0, jsx_runtime_1.jsx)(ChartDisplay, { config: dashboard[chartId], colors: colors, containerStyle: containerStyle, hideXAxis: hideXAxis, hideYAxis: hideYAxis, hideCartesianGrid: hideCartesianGrid, isAnimationActive: isAnimationActive, isComparison: isComparison, loading: loading || initialLoad }));
+};
+const ChartDisplay = ({ config, colors, containerStyle, hideXAxis, hideYAxis, hideCartesianGrid, isAnimationActive, loading = false, isComparison = false, }) => {
+    const { dashboardFilters } = (0, react_1.useContext)(Context_1.DashboardFiltersContext);
+    const [theme] = (0, react_1.useContext)(Context_1.ThemeContext);
+    const chartColors = (0, react_1.useMemo)(() => {
+        return colors?.length
+            ? colors
+            : theme && theme.chartColors.length
+                ? theme.chartColors
+                : ['#4E80EE', '#E14F62', '#55B5A6', '#E9A23B', '#6466E9', '#55B685'];
+    }, [colors]);
+    const dateFilter = Object.values(dashboardFilters).find((filter) => filter.filterType == 'date_range');
+    const isPivot = config?.pivot;
     const pivotTable = (0, react_1.useMemo)(() => {
-        const pivot = dashboard[chartId]?.pivot || config?.pivot;
-        const data = dashboard[chartId] ? dashboard[chartId] : config;
+        const pivot = config?.pivot;
+        const data = config;
         return pivot && data?.rows
             ? (0, PivotModal_1.generatePivotTable)(pivot, JSON.parse(JSON.stringify(data.rows)), // deep copy
-            dateFilter?.startDate
-                ? [dateFilter?.startDate, dateFilter?.endDate, null]
+            dateFilter
+                ? [dateFilter.startDate || null, dateFilter.endDate || null, null]
                 : [null, null, null], Boolean(dateFilter?.comparisonRange?.startDate), -1, dateFilter?.comparisonRange?.startDate
                 ? [
                     dateFilter?.comparisonRange.startDate,
@@ -179,21 +191,19 @@ const ChartUpdater = ({ colors, chartId, config, containerStyle, dashboard, disp
                 ]
                 : [null, null, null])
             : null;
-    }, [dashboard, chartId, dashboard[chartId], config, dateFilter]);
+    }, [config, dateFilter]);
     const pivotTableYAxis = (0, react_1.useMemo)(() => {
         if (!pivotTable) {
             return null;
         }
-        const pivot = dashboard[chartId]?.pivot || config?.pivot;
-        const yAxisFields = config
-            ? config.yAxisFields
-            : dashboard[chartId]?.yAxisFields;
+        const pivot = config?.pivot;
+        const yAxisFields = config.yAxisFields;
         return yAxisFields
             ? (0, PivotModal_1.generatePivotTableYAxis)(pivot, pivotTable.columns, yAxisFields?.[0]?.format)
             : null;
     }, [pivotTable]);
-    if (!config && (!dashboard[chartId] || loading)) {
-        if (loading || initialLoad) {
+    if (!config || loading) {
+        if (loading) {
             return (0, jsx_runtime_1.jsx)(ChartSkeleton_1.default, { containerStyle: containerStyle });
         }
         else {
@@ -201,34 +211,31 @@ const ChartUpdater = ({ colors, chartId, config, containerStyle, dashboard, disp
         }
     }
     // TODO: Figure out if we can use ?? to coalesce these into the variable.
-    const chartTypes = [config?.chartType, dashboard[chartId]?.chartType];
+    const chartTypes = [config?.chartType];
     if (chartTypes.includes('pie')) {
-        const rows = pivotTable
-            ? pivotTable.rows
-            : config
-                ? config.rows
-                : dashboard[chartId].rows;
-        const yAxisFields = pivotTableYAxis
-            ? pivotTableYAxis
-            : config
-                ? config.yAxisFields
-                : dashboard[chartId].yAxisFields;
-        const xAxisField = config
-            ? config.xAxisField
-            : dashboard[chartId].xAxisField;
+        const rows = pivotTable ? pivotTable.rows : config.rows;
+        const yAxisFields = pivotTableYAxis ? pivotTableYAxis : config.yAxisFields;
+        const xAxisField = config.xAxisField;
         return ((0, jsx_runtime_1.jsx)(PieChart_1.default, { 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 }));
+            }), category: yAxisFields[0].field, index: xAxisField, colors: chartColors, theme: theme }));
     }
     if (chartTypes.includes('table')) {
-        const data = dashboard[chartId] ? dashboard[chartId] : config;
+        const data = config;
         const columns = pivotTable?.columns ?? data.columns ?? data.yAxisFields;
+        const rows = pivotTable?.rows ?? data.rows ?? [];
+        // FOR PIVOTS - ADD THE RIGHT FIELD TYPE FOR THE VALUE COLUMNS
+        const valueFieldType = config?.pivot?.valueFieldType || undefined;
         // Walk through data.columns and pick off the labels from yAxisFields
-        columns.forEach((col) => {
+        columns.forEach((col, index) => {
+            // ADD THE RIGHT FIELD TYPE FOR THE VALUE COLUMNS
+            if (valueFieldType && index !== 0) {
+                col.format = valueFieldType;
+            }
             if (!data.yAxisFields)
                 return;
             const matchingCol = data.yAxisFields.find((c) => c.field === col.field);
@@ -237,7 +244,7 @@ const ChartUpdater = ({ colors, chartId, config, containerStyle, dashboard, disp
                 col.format = matchingCol.format;
             }
         });
-        const rows = data.rows.map((row) => {
+        const formattedRows = rows.map((row) => {
             return columns.reduce((formattedRow, column) => {
                 // Apply the format function to each field in the row
                 const formattedValue = (0, valueFormatter_2.quillFormat)({
@@ -248,57 +255,43 @@ const ChartUpdater = ({ colors, chartId, config, containerStyle, dashboard, disp
                 return formattedRow;
             }, {});
         });
-        return ((0, jsx_runtime_1.jsx)(QuillTable_1.default, { rows: pivotTable?.rows ?? rows ?? [], columns: pivotTable?.columns ?? columns ?? data.yAxisFields, containerStyle: {
+        return ((0, jsx_runtime_1.jsx)(QuillTable_1.default, { rows: formattedRows ?? [], columns: columns ?? data.yAxisFields, containerStyle: {
                 height: '400px',
                 width: containerStyle?.width || '100%',
             }, showDownloadCSVButton: true, downloadCSV: () => {
                 (0, csv_1.downloadCSV)({
                     rows: pivotTable?.rows ?? data.rows ?? [],
-                    fields: pivotTable?.columns ?? data.columns ?? data.yAxisFields,
+                    fields: columns ?? data.yAxisFields,
                     name: data.name || '',
                 });
             } }));
     }
     if (chartTypes.includes('bar')) {
-        return ((0, jsx_runtime_1.jsx)(BarList_1.default, { data: pivotTable
-                ? pivotTable.rows
-                : config
-                    ? config.rows
-                    : dashboard[chartId].rows, theme: theme, yAxisFields: pivotTableYAxis
-                ? pivotTableYAxis
-                : config
-                    ? config.yAxisFields
-                    : dashboard[chartId].yAxisFields, colors: colors, xAxisField: config ? config.xAxisField : dashboard[chartId].xAxisField, xAxisFormat: config ? config.xAxisFormat : dashboard[chartId].xAxisFormat, containerStyle: containerStyle }));
+        return ((0, jsx_runtime_1.jsx)(BarList_1.default, { data: pivotTable ? pivotTable.rows : config.rows, theme: theme, yAxisFields: pivotTableYAxis ? pivotTableYAxis : config.yAxisFields, colors: chartColors, xAxisField: config.xAxisField, xAxisFormat: config.xAxisFormat, containerStyle: containerStyle }));
     }
     const yAxisFields = pivotTableYAxis
         ? pivotTableYAxis
-        : config
-            ? config.yAxisFields
-            : dashboard[chartId].yAxisFields;
+        : config.yAxisFields;
     if (isComparison && yAxisFields.length == 1) {
         const sampleField = yAxisFields[0];
         yAxisFields[yAxisFields.length] = {
             ...sampleField,
-            field: `comparison_${sampleField.field}`,
-            label: `comparison ${sampleField.label}`,
+            field: `comparison_${sampleField?.field}`,
+            label: `comparison ${sampleField?.label}`,
         };
     }
-    const data = (pivotTable
-        ? pivotTable.rows
-        : config
-            ? config.rows
-            : dashboard[chartId].rows)
+    const data = (pivotTable ? pivotTable.rows : config.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 ((0, jsx_runtime_1.jsx)(BarChart_1.default, { colors: colors, theme: theme, isStacked: isPivot && yAxisFields.length > (dateFilter?.comparison ? 2 : 1), yAxisFields: yAxisFields, 
+        return ((0, jsx_runtime_1.jsx)(BarChart_1.default, { colors: chartColors, theme: theme, isStacked: isPivot && yAxisFields.length > (dateFilter?.comparison ? 2 : 1), yAxisFields: yAxisFields, 
             // @ts-ignore
-            data: data, xAxisField: config ? config.xAxisField : dashboard[chartId].xAxisField, xAxisLabel: config ? config.xAxisLabel : dashboard[chartId].xAxisLabel, xAxisFormat: config ? config.xAxisFormat : dashboard[chartId].xAxisFormat, containerStyle: containerStyle, comparison: dateFilter?.comparison, isAnimationActive: isAnimationActive, hideXAxis: hideXAxis, hideYAxis: hideYAxis, hideCartesianGrid: hideCartesianGrid }));
+            data: data, xAxisField: config.xAxisField, xAxisLabel: config.xAxisLabel, xAxisFormat: config.xAxisFormat, containerStyle: containerStyle, comparison: dateFilter?.comparison, isAnimationActive: isAnimationActive, hideXAxis: hideXAxis, hideYAxis: hideYAxis, hideCartesianGrid: hideCartesianGrid }));
     }
     if (chartTypes.includes('metric')) {
-        const data = dashboard[chartId] ? dashboard[chartId] : config;
+        const data = config; // THIS SHOULD ACCOUNT FOR PIVOT TABLES IN THE FUTURE
         const isComparison = data.rows.length > 0 &&
             Object.keys(data.rows[0]).includes(`comparison_${data.xAxisField}`);
         const primaryMetricLabel = data?.filtersApplied?.date_range?.preset?.label;
@@ -333,6 +326,8 @@ const ChartUpdater = ({ colors, chartId, config, containerStyle, dashboard, disp
                                         {
                                             field: data.xAxisField,
                                             format: data.xAxisFormat,
+                                            label: data.xAxisLabel,
+                                            _id: data._id || 'dummy',
                                         },
                                     ],
                                 }) }), isComparison && ((0, jsx_runtime_1.jsx)("span", { style: {
@@ -362,6 +357,8 @@ const ChartUpdater = ({ colors, chartId, config, containerStyle, dashboard, disp
                                         {
                                             field: data.xAxisField,
                                             format: data.xAxisFormat,
+                                            label: data.xAxisLabel,
+                                            _id: data._id || 'dummy',
                                         },
                                     ],
                                 }) }), (0, jsx_runtime_1.jsx)("span", { style: {
@@ -374,6 +371,6 @@ const ChartUpdater = ({ colors, chartId, config, containerStyle, dashboard, disp
                                 ? 'in ' + comparisonLabel.toLowerCase()
                                 : 'previous period' })] }))] }));
     }
-    return ((0, jsx_runtime_1.jsx)(LineChart_1.default, { colors: colors, yAxisFields: yAxisFields, data: data, xAxisField: config ? config.xAxisField : dashboard[chartId].xAxisField, xAxisLabel: config ? config.xAxisLabel : dashboard[chartId].xAxisLabel, xAxisFormat: config ? config.xAxisFormat : dashboard[chartId].xAxisFormat, containerStyle: containerStyle, theme: theme, comparison: dateFilter?.comparison, isAnimationActive: isAnimationActive, hideXAxis: hideXAxis, hideYAxis: hideYAxis, hideCartesianGrid: hideCartesianGrid }));
+    return ((0, jsx_runtime_1.jsx)(LineChart_1.default, { colors: chartColors, yAxisFields: yAxisFields, data: data, xAxisField: config.xAxisField, xAxisLabel: config.xAxisLabel, xAxisFormat: config.xAxisFormat, containerStyle: containerStyle, theme: theme, comparison: dateFilter?.comparison, isAnimationActive: isAnimationActive, hideXAxis: hideXAxis, hideYAxis: hideYAxis, hideCartesianGrid: hideCartesianGrid }));
 };
 exports.default = Chart;

package/dist/cjs/ChartBuilder.d.ts

@@ -1,8 +1,10 @@
 import React from 'react';
 import { Pivot } from './internals/ReportBuilder/PivotModal';
 import { SelectComponentProps, TextInputComponentProps, ButtonComponentProps, ModalComponentProps, HeaderProps, LabelProps, TextProps, DeleteButtonProps, PopoverComponentProps } from './components/UiComponents';
-export declare function snakeCaseToTitleCase(str: any): any;
+import { Column } from './models/Tables';
+import { Field } from './hooks/useQuill';
 export declare const numberFormatOptions: string[];
+export declare const dateFormatOptions: string[];
 interface ChartBuilderProps {
     isOpen: boolean;
     setIsOpen: (isOpen: boolean) => void;
@@ -16,8 +18,10 @@ interface ChartBuilderProps {
     DeleteButton?: (props: DeleteButtonProps) => JSX.Element;
     Modal?: (props: ModalComponentProps) => JSX.Element;
     Popover?: (props: PopoverComponentProps) => JSX.Element;
-    rows: object[];
-    columns: object[];
+    rows: {
+        [key: string]: any;
+    }[];
+    columns: Column[];
     query?: string;
     isEditMode?: boolean;
     formHeaderStyle?: React.CSSProperties;
@@ -28,7 +32,7 @@ interface ChartBuilderProps {
     showDashboardDropdown?: boolean;
     onAddToDashboardComplete?: () => void;
     onDelete?: () => void;
-    fields?: object[];
+    fields?: Field[];
     pivot?: Pivot;
     dateRange?: (string | Date)[];
     dashboardItem?: any;

package/dist/cjs/ChartBuilder.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChartBuilder.d.ts","sourceRoot":"","sources":["../../src/ChartBuilder.tsx"],"names":[],"mappings":"AACA,OAAO,KAA2D,MAAM,OAAO,CAAC;AAWhF,OAAO,EACL,KAAK,EAIN,MAAM,sCAAsC,CAAC;AAG9C,OAAO,EACL,oBAAoB,EACpB,uBAAuB,EACvB,oBAAoB,EACpB,mBAAmB,EACnB,WAAW,EACX,UAAU,EACV,SAAS,EACT,iBAAiB,EAUjB,qBAAqB,EAEtB,MAAM,2BAA2B,CAAC;AAgBnC,wBAAgB,oBAAoB,CAAC,GAAG,KAAA,OAavC;AAqED,eAAO,MAAM,mBAAmB,UAM/B,CAAC;AAoBF,UAAU,iBAAiB;IACzB,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACrC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,GAAG,CAAC,OAAO,CAAC;IACtD,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,uBAAuB,KAAK,GAAG,CAAC,OAAO,CAAC;IAC5D,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,GAAG,CAAC,OAAO,CAAC;IACtD,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,GAAG,CAAC,OAAO,CAAC;IAC/D,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,GAAG,CAAC,OAAO,CAAC;IAC7C,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,GAAG,CAAC,OAAO,CAAC;IAC3C,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,GAAG,CAAC,OAAO,CAAC;IACzC,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,GAAG,CAAC,OAAO,CAAC;IACzD,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,mBAAmB,KAAK,GAAG,CAAC,OAAO,CAAC;IACpD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,GAAG,CAAC,OAAO,CAAC;IACxD,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,eAAe,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACtC,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACrC,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,wBAAwB,CAAC,EAAE,MAAM,IAAI,CAAC;IACtC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,SAAS,CAAC,EAAE,CAAC,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC;IAC9B,aAAa,CAAC,EAAE,GAAG,CAAC;IACpB,iBAAiB,CAAC,EAAE,KAAK,EAAE,CAAC;IAC5B,aAAa,CAAC,EAAE,KAAK,EAAE,CAAC;IACxB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AACD,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,KAAK,EAAE,iBAAiB,2CA4B5D"}
+{"version":3,"file":"ChartBuilder.d.ts","sourceRoot":"","sources":["../../src/ChartBuilder.tsx"],"names":[],"mappings":"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"}