@quillsql/react 2.11.7 → 2.11.9

package/dist/cjs/BarList.d.ts

@@ -14,6 +14,7 @@ export interface BarListProps extends React.HTMLAttributes<HTMLDivElement> {
     containerStyle: any;
     xAxisFormat: string;
     colors?: string[];
+    colorMap?: any;
     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,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"}
+{"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,QAAQ,CAAC,EAAE,GAAG,CAAC;IACf,KAAK,EAAE,GAAG,CAAC;CACZ;AAYD,wBAAgB,2BAA2B,CAAC,GAAG,KAAA,UAW9C;AAED,QAAA,MAAM,OAAO,qFAkdX,CAAC;AAEH,eAAe,OAAO,CAAC"}

package/dist/cjs/BarList.js

@@ -11,10 +11,10 @@ const react_1 = __importDefault(require("react"));
 const valueFormatter_1 = require("./utils/valueFormatter");
 const getWidthsFromValues = (dataValues) => {
     let maxValue = -Infinity;
-    dataValues.forEach(value => {
+    dataValues.forEach((value) => {
         maxValue = Math.max(maxValue, value);
     });
-    return dataValues.map(value => {
+    return dataValues.map((value) => {
         if (value === 0)
             return 0;
         return Math.max((value / maxValue) * 100, 1);
@@ -41,13 +41,26 @@ function hexToRgbaWith10PercentAlpha(hex) {
 }
 exports.hexToRgbaWith10PercentAlpha = hexToRgbaWith10PercentAlpha;
 const BarList = react_1.default.forwardRef((props, ref) => {
-    const { data = [], yAxisFields, xAxisField, xAxisFormat, colors, 
+    const { data = [], yAxisFields, xAxisField, xAxisFormat, colors, colorMap = {}, 
     // valueFormatter = (value: any) => value,valueFormatter
     showAnimation = true, className, containerStyle, theme, ...other } = props;
-    const widths = getWidthsFromValues(data.map(item => item[yAxisFields[0].field]));
-    const NUM_TO_SHOW = Math.floor(containerStyle?.height / 40) - 1;
+    const widths = getWidthsFromValues(data.map((item) => item[yAxisFields[0].field] ?? 0));
+    const NUM_TO_SHOW = 5;
+    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,
+                ...containerStyle,
+            }, children: "No results found for specified time period." }));
+    }
     if (yAxisFields.length > 1) {
-        const widths2 = getWidthsFromValues(data.map(item => item[yAxisFields[1].field]));
+        const widths2 = getWidthsFromValues(data.map((item) => item[yAxisFields[1].field]));
         return ((0, jsx_runtime_1.jsxs)("div", { ref: ref, style: {
                 ...containerStyle,
                 // width: '100%',
@@ -74,7 +87,7 @@ const BarList = react_1.default.forwardRef((props, ref) => {
                         position: 'relative',
                         boxSizing: 'content-box',
                         width: '100%',
-                    }, children: [data.slice(0, Math.floor(NUM_TO_SHOW / 2)).map((item, idx) => {
+                    }, children: [data.slice(0, NUM_TO_SHOW).map((item, idx) => {
                             //   const Icon = item.icon;
                             const Icon = null;
                             return ((0, jsx_runtime_1.jsxs)("div", { style: {
@@ -117,7 +130,8 @@ const BarList = react_1.default.forwardRef((props, ref) => {
                                                     marginBottom: '8px',
                                                     width: `${widths[idx]}%`,
                                                     transition: showAnimation ? 'all 2s' : '',
-                                                    backgroundColor: hexToRgbaWith10PercentAlpha(colors[0]),
+                                                    backgroundColor: (colorMap && colorMap[xAxisField]) ??
+                                                        hexToRgbaWith10PercentAlpha(colors[0]),
                                                     boxSizing: 'content-box',
                                                 }, children: (0, jsx_runtime_1.jsx)("div", { style: {
                                                         position: 'absolute',
@@ -143,7 +157,8 @@ const BarList = react_1.default.forwardRef((props, ref) => {
                                                     marginBottom: '8px',
                                                     width: `${widths2[idx]}%`,
                                                     transition: showAnimation ? 'all 2s' : '',
-                                                    backgroundColor: hexToRgbaWith10PercentAlpha(colors[1]),
+                                                    backgroundColor: (colorMap && colorMap[xAxisField]) ??
+                                                        hexToRgbaWith10PercentAlpha(colors[1]),
                                                     boxSizing: 'content-box',
                                                 }, children: (0, jsx_runtime_1.jsx)("div", { style: {
                                                         boxSizing: 'content-box',
@@ -170,64 +185,58 @@ const BarList = react_1.default.forwardRef((props, ref) => {
                         minWidth: 'min-content',
                         textAlign: 'right',
                         paddingLeft: 10,
-                    }, children: data.slice(0, NUM_TO_SHOW).map((item, idx) => ((0, jsx_runtime_1.jsx)("div", { style: {
-                            boxSizing: 'content-box',
-                            display: 'flex',
-                            justifyContent: 'flex-end',
-                            alignItems: 'center',
-                            marginBottom: idx === data.length - 1 ? 0 : '8px',
-                            height: '36px',
-                        }, children: (0, jsx_runtime_1.jsx)("p", { style: {
-                                color: theme?.chartLabelColor,
+                    }, children: data.slice(0, NUM_TO_SHOW).map((item, idx) => {
+                        return ((0, jsx_runtime_1.jsx)("div", { style: {
                                 boxSizing: 'content-box',
-                                fontFamily: theme?.chartLabelFontFamily || theme?.fontFamily,
-                                whiteSpace: 'nowrap',
-                                overflow: 'hidden',
-                                textOverflow: 'ellipsis',
-                                fontSize: theme?.fontSizeSmall || '14px',
-                            }, children: (0, valueFormatter_1.valueFormatter)({
-                                value: item[yAxisFields[0].field],
-                                field: yAxisFields[0].field,
-                                fields: yAxisFields,
-                            }) }) }, item[xAxisField] + 'label' + idx))) })] }));
+                                display: 'flex',
+                                justifyContent: 'flex-end',
+                                alignItems: 'center',
+                                marginBottom: idx === data.length - 1 ? 0 : '8px',
+                                height: '36px',
+                            }, children: (0, jsx_runtime_1.jsx)("p", { style: {
+                                    color: theme?.chartLabelColor,
+                                    boxSizing: 'content-box',
+                                    fontFamily: theme?.chartLabelFontFamily || theme?.fontFamily,
+                                    whiteSpace: 'nowrap',
+                                    overflow: 'hidden',
+                                    textOverflow: 'ellipsis',
+                                    fontSize: theme?.fontSizeSmall || '14px',
+                                }, children: (0, valueFormatter_1.valueFormatter)({
+                                    value: item[yAxisFields[0].field],
+                                    field: yAxisFields[0].field,
+                                    fields: yAxisFields,
+                                }) }) }, item[xAxisField] + 'label' + idx));
+                    }) })] }));
     }
     return ((0, jsx_runtime_1.jsx)("div", { ref: ref, style: {
-            ...containerStyle,
             // width: '100%',
             boxSizing: 'content-box',
-            // height: '100%',
-            // height: hei
+            height: '100%',
             // marginLeft: 25,
             // background: 'red',
             // paddingRight: 25,
             // paddingRight: 25,
+            ...containerStyle,
         }, ...other, children: (0, jsx_runtime_1.jsxs)("div", { style: {
                 display: 'flex',
                 justifyContent: 'space-between',
-                // paddingTop: 20,
-                // paddingLeft: 25,
                 boxSizing: 'content-box',
                 overflow: 'hidden',
                 width: '100%',
-            }, children: [(0, jsx_runtime_1.jsxs)("div", { 
-                    //   className={twMerge(makeBarListClassName('bars'), 'relative w-full')}
-                    // className="qq-relative-w-full"
-                    style: {
-                        width: 'calc(100%)',
+                height: '100%',
+            }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
+                        width: '100%',
                         boxSizing: 'content-box',
                         height: '100%',
                         position: 'relative',
                         paddingRight: 25,
                     }, children: [data.slice(0, NUM_TO_SHOW).map((item, idx) => {
-                            //   const Icon = item.icon;
-                            const Icon = null;
-                            return ((0, jsx_runtime_1.jsx)("div", { 
-                                // className={`qq-flex qq-items-center qq-h-9 qq-rounded qq-mb-2`}
-                                style: {
+                            return ((0, jsx_runtime_1.jsx)("div", { style: {
                                     width: `${widths[idx]}%`,
                                     transition: showAnimation ? 'all 2s' : '',
                                     boxSizing: 'content-box',
-                                    backgroundColor: hexToRgbaWith10PercentAlpha(colors[0]),
+                                    backgroundColor: (colorMap && colorMap[xAxisField]) ??
+                                        hexToRgbaWith10PercentAlpha(colors[0]),
                                     display: 'flex',
                                     alignItems: 'center',
                                     height: '36px',
@@ -248,7 +257,7 @@ const BarList = react_1.default.forwardRef((props, ref) => {
                                             fontFamily: theme?.chartLabelFontFamily || theme?.fontFamily,
                                             fontSize: theme?.fontSizeSmall || '14px',
                                         }, children: (0, valueFormatter_1.valueFormatter)({
-                                            value: item[xAxisField],
+                                            value: item[xAxisField] ?? item[`comparison_${xAxisField}`],
                                             field: xAxisField,
                                             fields: [{ field: xAxisField, format: xAxisFormat }],
                                         }) }) }) }, item[xAxisField] + 'label' + idx));
@@ -278,7 +287,7 @@ const BarList = react_1.default.forwardRef((props, ref) => {
                                 textOverflow: 'ellipsis',
                                 fontSize: theme?.fontSizeSmall || '14px',
                             }, children: (0, valueFormatter_1.valueFormatter)({
-                                value: item[yAxisFields[0].field],
+                                value: item[yAxisFields[0].field] ?? 0,
                                 field: yAxisFields[0].field,
                                 fields: yAxisFields,
                             }) }) }, item[xAxisField] + 'value' + idx))) })] }) }));

package/dist/cjs/Chart.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import { QuillTheme } from './QuillProvider';
 interface BaseChartProps {
     colors?: string[];
     containerStyle?: React.CSSProperties;
@@ -14,6 +15,9 @@ interface BaseChartProps {
     customComparisonColor?: string;
     dateRangeFilterDisabled?: boolean;
     singlePointStyle?: 'dot' | 'line';
+    mapColorsToFields?: (_dashboardItem: DashboardItem, _theme: QuillTheme) => {
+        [key: string]: string;
+    };
 }
 interface WithChartId extends BaseChartProps {
     chartId: string;

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

@@ -1 +1 @@
-{"version":3,"file":"Chart.d.ts","sourceRoot":"","sources":["../../src/Chart.tsx"],"names":[],"mappings":";AA4BA,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,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,gBAAgB,CAAC,EAAE,KAAK,GAAG,MAAM,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,4CAqC9B,CAAC;AAmfF,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Chart.d.ts","sourceRoot":"","sources":["../../src/Chart.tsx"],"names":[],"mappings":";AAYA,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAgB7C,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,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,gBAAgB,CAAC,EAAE,KAAK,GAAG,MAAM,CAAC;IAClC,iBAAiB,CAAC,EAAE,CAClB,cAAc,EAAE,aAAa,EAC7B,MAAM,EAAE,UAAU,KACf;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,CAAC;CAChC;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;AAaD,QAAA,MAAM,KAAK,SAAU,UAAU,4CAsC9B,CAAC;AA0fF,eAAe,KAAK,CAAC"}

package/dist/cjs/Chart.js

@@ -79,9 +79,13 @@ function didFiltersChange(dashboardItem, filters) {
     return !isEquivalent(dashboardItem.filtersApplied, filters);
 }
 exports.didFiltersChange = didFiltersChange;
+function fallbackMapColorsToFields(_dashboardItem, _theme) {
+    // By default, if the key is not in the map we use the colors array.
+    return {};
+}
 const Chart = (data) => {
     if ('config' in data) {
-        return ((0, jsx_runtime_1.jsx)(ChartDisplay, { ...data, loading: false, isComparison: !!data.config.compareRows?.length }));
+        return ((0, jsx_runtime_1.jsx)(ChartDisplay, { ...data, loading: Boolean(!data.config), isComparison: Boolean(data?.config?.compareRows?.length) }));
     }
     const [theme] = (0, react_1.useContext)(Context_1.ThemeContext);
     const chartColors = (0, react_1.useMemo)(() => {
@@ -91,14 +95,15 @@ const Chart = (data) => {
                 ? theme.chartColors
                 : ['#4E80EE', '#E14F62', '#55B5A6', '#E9A23B', '#6466E9', '#55B685'];
     }, [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, dashedComparison: data.dashedComparison, dateRangeFilterDisabled: data.dateRangeFilterDisabled, customPrimaryColor: data.customPrimaryColor, customComparisonColor: data.customComparisonColor, singlePointStyle: data.singlePointStyle ?? 'dot' }));
+    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, dashedComparison: data.dashedComparison, dateRangeFilterDisabled: data.dateRangeFilterDisabled, customPrimaryColor: data.customPrimaryColor, customComparisonColor: data.customComparisonColor, singlePointStyle: data.singlePointStyle ?? 'dot', mapColorsToFields: data.mapColorsToFields ?? fallbackMapColorsToFields }));
 };
-const ChartUpdater = ({ colors, chartId, containerStyle, theme, isAnimationActive, hideXAxis, hideYAxis, hideCartesianGrid, dashedComparison, dateRangeFilterDisabled, customPrimaryColor, customComparisonColor, singlePointStyle, }) => {
+const ChartUpdater = ({ colors, chartId, containerStyle, theme, isAnimationActive, hideXAxis, hideYAxis, hideCartesianGrid, dashedComparison, dateRangeFilterDisabled, customPrimaryColor, customComparisonColor, singlePointStyle, mapColorsToFields, }) => {
     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 [colorMap, setColorMap] = (0, react_1.useState)({});
     const [client, _] = (0, react_1.useContext)(Context_1.ClientContext);
     (0, react_1.useEffect)(() => {
         async function getChartOptions() {
@@ -143,14 +148,15 @@ const ChartUpdater = ({ colors, chartId, containerStyle, theme, isAnimationActiv
                     if (resp.compareRows) {
                         (0, merge_1.mergeComparisonRange)(resp);
                     }
+                    const dashboardItem = { ...resp, filtersApplied: dashboardFilters };
                     dispatch({
                         type: 'UPDATE_DASHBOARD_ITEM',
                         id: chartId,
-                        data: {
-                            ...resp,
-                            filtersApplied: dashboardFilters,
-                        },
+                        data: dashboardItem,
                     });
+                    if (mapColorsToFields) {
+                        setColorMap(mapColorsToFields(dashboardItem, theme));
+                    }
                 }
                 setLoading(false);
             }
@@ -162,9 +168,9 @@ const ChartUpdater = ({ colors, chartId, containerStyle, theme, isAnimationActiv
         setInitialLoad(false);
         getChartOptions();
     }, [dashboardFilters, client, chartId]);
-    return ((0, jsx_runtime_1.jsx)(ChartDisplay, { config: dashboard[chartId], colors: colors, containerStyle: containerStyle, hideXAxis: hideXAxis, hideYAxis: hideYAxis, hideCartesianGrid: hideCartesianGrid, dashedComparison: dashedComparison, singlePointStyle: singlePointStyle, customPrimaryColor: customPrimaryColor, customComparisonColor: customComparisonColor, isAnimationActive: isAnimationActive, isComparison: isComparison, loading: loading || initialLoad }));
+    return ((0, jsx_runtime_1.jsx)(ChartDisplay, { config: dashboard[chartId], colors: colors, containerStyle: containerStyle, hideXAxis: hideXAxis, hideYAxis: hideYAxis, hideCartesianGrid: hideCartesianGrid, dashedComparison: dashedComparison, singlePointStyle: singlePointStyle, customPrimaryColor: customPrimaryColor, customComparisonColor: customComparisonColor, isAnimationActive: isAnimationActive, isComparison: isComparison, loading: loading || initialLoad, colorMap: colorMap }));
 };
-const ChartDisplay = ({ config, colors, containerStyle, hideXAxis, hideYAxis, hideCartesianGrid, dashedComparison, customPrimaryColor, customComparisonColor, isAnimationActive, loading = false, isComparison = false, singlePointStyle = "dot" }) => {
+const ChartDisplay = ({ config, colors, containerStyle, hideXAxis, hideYAxis, hideCartesianGrid, dashedComparison, customPrimaryColor, customComparisonColor, isAnimationActive, loading = false, isComparison = false, singlePointStyle = 'dot', colorMap, }) => {
     const { dashboardFilters } = (0, react_1.useContext)(Context_1.DashboardFiltersContext);
     const [theme] = (0, react_1.useContext)(Context_1.ThemeContext);
     const chartColors = (0, react_1.useMemo)(() => {
@@ -191,7 +197,7 @@ const ChartDisplay = ({ config, colors, containerStyle, hideXAxis, hideYAxis, hi
                 ]
                 : [null, null, null])
             : null;
-    }, [config, dateFilter]);
+    }, [config?.pivot]);
     const pivotTableYAxis = (0, react_1.useMemo)(() => {
         if (!pivotTable) {
             return null;
@@ -201,7 +207,7 @@ const ChartDisplay = ({ config, colors, containerStyle, hideXAxis, hideYAxis, hi
         return yAxisFields
             ? (0, PivotModal_1.generatePivotTableYAxis)(pivot, pivotTable.columns, yAxisFields?.[0]?.format)
             : null;
-    }, [pivotTable]);
+    }, [pivotTable, config?.yAxisFields]);
     if (!config || loading) {
         if (loading) {
             return (0, jsx_runtime_1.jsx)(ChartSkeleton_1.default, { containerStyle: containerStyle });
@@ -222,7 +228,7 @@ const ChartDisplay = ({ config, colors, containerStyle, hideXAxis, hideYAxis, hi
                     count: parseInt(row[yAxisFields[0].field]) /
                         sumByKey(rows, yAxisFields[0].field),
                 };
-            }), category: yAxisFields[0].field, index: xAxisField, colors: chartColors, theme: theme }));
+            }), category: yAxisFields[0].field, index: xAxisField, colors: chartColors, theme: theme, colorMap: colorMap }));
     }
     if (chartTypes.includes('table')) {
         const data = config;
@@ -255,9 +261,9 @@ const ChartDisplay = ({ config, colors, containerStyle, hideXAxis, hideYAxis, hi
                 return formattedRow;
             }, {});
         });
-        return ((0, jsx_runtime_1.jsx)(QuillTable_1.default, { rows: formattedRows ?? [], columns: columns ?? data.yAxisFields, containerStyle: {
-                height: '400px',
+        return ((0, jsx_runtime_1.jsx)(QuillTable_1.default, { rows: formattedRows ?? [], columns: columns ?? data.yAxisFields, rowsPerPage: config?.rowsPerPage || 10, containerStyle: {
                 width: containerStyle?.width || '100%',
+                height: containerStyle?.height || '400px',
             }, showDownloadCSVButton: true, downloadCSV: () => {
                 (0, csv_1.downloadCSV)({
                     rows: pivotTable?.rows ?? data.rows ?? [],
@@ -267,7 +273,7 @@ const ChartDisplay = ({ config, colors, containerStyle, hideXAxis, hideYAxis, hi
             } }));
     }
     if (chartTypes.includes('bar')) {
-        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 }));
+        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, colorMap: colorMap }));
     }
     const yAxisFields = pivotTableYAxis
         ? pivotTableYAxis
@@ -288,7 +294,7 @@ const ChartDisplay = ({ config, colors, containerStyle, hideXAxis, hideYAxis, hi
     if (chartTypes.includes('column')) {
         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.xAxisField, xAxisLabel: config.xAxisLabel, xAxisFormat: config.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, colorMap: colorMap }));
     }
     if (chartTypes.includes('metric')) {
         const data = config; // THIS SHOULD ACCOUNT FOR PIVOT TABLES IN THE FUTURE
@@ -320,7 +326,7 @@ const ChartDisplay = ({ config, colors, containerStyle, hideXAxis, hideYAxis, hi
                         marginRight: 'auto',
                     }, children: [(0, jsx_runtime_1.jsx)("span", { children: data.rows.length > 0 &&
                                 (0, valueFormatter_1.valueFormatter)({
-                                    value: data.rows[0][data.xAxisField],
+                                    value: data.rows[0][data.xAxisField] ?? 0,
                                     field: data.xAxisField,
                                     fields: [
                                         {
@@ -351,7 +357,7 @@ const ChartDisplay = ({ config, colors, containerStyle, hideXAxis, hideYAxis, hi
                                 color: theme?.secondaryTextColor,
                             }, children: data.rows.length > 0 &&
                                 (0, valueFormatter_1.valueFormatter)({
-                                    value: data.rows[0][`comparison_${data.xAxisField}`],
+                                    value: data.rows[0][`comparison_${data.xAxisField}`] ?? 0,
                                     field: data.xAxisField,
                                     fields: [
                                         {
@@ -371,6 +377,6 @@ const ChartDisplay = ({ config, colors, containerStyle, hideXAxis, hideYAxis, hi
                                 ? 'in ' + comparisonLabel.toLowerCase()
                                 : 'previous period' })] }))] }));
     }
-    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, dashedComparison: dashedComparison, customPrimaryColor: customPrimaryColor, customComparisonColor: customComparisonColor, singlePointStyle: singlePointStyle }));
+    return ((0, jsx_runtime_1.jsx)(LineChart_1.default, { colors: chartColors, colorMap: colorMap, 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, dashedComparison: dashedComparison, customPrimaryColor: customPrimaryColor, customComparisonColor: customComparisonColor, singlePointStyle: singlePointStyle }));
 };
 exports.default = Chart;

package/dist/cjs/ChartBuilder.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Pivot } from './internals/ReportBuilder/PivotModal';
-import { SelectComponentProps, TextInputComponentProps, ButtonComponentProps, ModalComponentProps, HeaderProps, LabelProps, TextProps, DeleteButtonProps, PopoverComponentProps } from './components/UiComponents';
+import { SelectComponentProps, TextInputComponentProps, ButtonComponentProps, ModalComponentProps, HeaderProps, LabelProps, TextProps, DeleteButtonProps, MemoizedPopoverProps } from './components/UiComponents';
 import { Column } from './models/Tables';
 import { Field } from './hooks/useQuill';
 export declare const numberFormatOptions: string[];
@@ -17,7 +17,7 @@ interface ChartBuilderProps {
     Text?: (props: TextProps) => JSX.Element;
     DeleteButton?: (props: DeleteButtonProps) => JSX.Element;
     Modal?: (props: ModalComponentProps) => JSX.Element;
-    Popover?: (props: PopoverComponentProps) => JSX.Element;
+    Popover?: (props: MemoizedPopoverProps) => JSX.Element;
     rows: {
         [key: string]: any;
     }[];
@@ -27,6 +27,7 @@ interface ChartBuilderProps {
     formHeaderStyle?: React.CSSProperties;
     formLabelStyle?: React.CSSProperties;
     showTableFormatOptions?: boolean;
+    horizontalView?: boolean;
     showDateFieldOptions?: boolean;
     showAccessControlOptions?: boolean;
     showDashboardDropdown?: boolean;
@@ -45,6 +46,7 @@ interface ChartBuilderProps {
     dateColumn?: string;
     organizationName?: string;
 }
-export default function ChartBuilder(props: ChartBuilderProps): import("react/jsx-runtime").JSX.Element;
+export declare function ChartBuilderWithModal(props: ChartBuilderProps): import("react/jsx-runtime").JSX.Element;
+export default function ChartBuilder({ TextInput, Select, Button, SecondaryButton, Header, Label, DeleteButton, Text, Popover, isOpen, isEditMode, horizontalView, pivot, setIsOpen, rows, columns, query, queryNoDateColumn, dateRange: dr, formHeaderStyle, formLabelStyle, showTableFormatOptions, showDateFieldOptions, showAccessControlOptions, showDashboardDropdown, onAddToDashboardComplete, onDelete, fields: fieldsProp, dashboardItem, recommendedPivots: rp, createdPivots: cp, destinationDashboard, dateColumn, buttonLabel, organizationName, }: ChartBuilderProps): import("react/jsx-runtime").JSX.Element | undefined;
 export {};
 //# sourceMappingURL=ChartBuilder.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ChartBuilder.d.ts","sourceRoot":"","sources":["../../src/ChartBuilder.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"ChartBuilder.d.ts","sourceRoot":"","sources":["../../src/ChartBuilder.tsx"],"names":[],"mappings":"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"}