@quillsql/react 2.11.9 → 2.11.12

package/dist/cjs/BarList.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { type ColorMapType } from './Chart';
 interface YAxisField {
     label: string;
     field: string;
@@ -14,7 +15,7 @@ export interface BarListProps extends React.HTMLAttributes<HTMLDivElement> {
     containerStyle: any;
     xAxisFormat: string;
     colors?: string[];
-    colorMap?: any;
+    colorMap?: ColorMapType;
     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,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"}
+{"version":3,"file":"BarList.d.ts","sourceRoot":"","sources":["../../src/BarList.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAcxC,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,SAAS,CAAC;AAuB5C,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,YAAY,CAAC;IACxB,KAAK,EAAE,GAAG,CAAC;CACZ;AAYD,wBAAgB,2BAA2B,CAAC,GAAG,KAAA,UAW9C;AAED,QAAA,MAAM,OAAO,qFAwdX,CAAC;AAEH,eAAe,OAAO,CAAC"}

package/dist/cjs/BarList.js

@@ -130,7 +130,9 @@ const BarList = react_1.default.forwardRef((props, ref) => {
                                                     marginBottom: '8px',
                                                     width: `${widths[idx]}%`,
                                                     transition: showAnimation ? 'all 2s' : '',
-                                                    backgroundColor: (colorMap && colorMap[xAxisField]) ??
+                                                    backgroundColor: (colorMap &&
+                                                        colorMap[xAxisField] &&
+                                                        colorMap[xAxisField]['primary']) ??
                                                         hexToRgbaWith10PercentAlpha(colors[0]),
                                                     boxSizing: 'content-box',
                                                 }, children: (0, jsx_runtime_1.jsx)("div", { style: {
@@ -157,7 +159,9 @@ const BarList = react_1.default.forwardRef((props, ref) => {
                                                     marginBottom: '8px',
                                                     width: `${widths2[idx]}%`,
                                                     transition: showAnimation ? 'all 2s' : '',
-                                                    backgroundColor: (colorMap && colorMap[xAxisField]) ??
+                                                    backgroundColor: (colorMap &&
+                                                        colorMap[xAxisField] &&
+                                                        colorMap[xAxisField]['primary']) ??
                                                         hexToRgbaWith10PercentAlpha(colors[1]),
                                                     boxSizing: 'content-box',
                                                 }, children: (0, jsx_runtime_1.jsx)("div", { style: {
@@ -235,7 +239,9 @@ const BarList = react_1.default.forwardRef((props, ref) => {
                                     width: `${widths[idx]}%`,
                                     transition: showAnimation ? 'all 2s' : '',
                                     boxSizing: 'content-box',
-                                    backgroundColor: (colorMap && colorMap[xAxisField]) ??
+                                    backgroundColor: (colorMap &&
+                                        colorMap[xAxisField] &&
+                                        colorMap[xAxisField]['primary']) ??
                                         hexToRgbaWith10PercentAlpha(colors[0]),
                                     display: 'flex',
                                     alignItems: 'center',

package/dist/cjs/Chart.d.ts

@@ -11,13 +11,9 @@ interface BaseChartProps {
     hideYAxis?: boolean;
     hideCartesianGrid?: boolean;
     dashedComparison?: boolean;
-    customPrimaryColor?: string;
-    customComparisonColor?: string;
     dateRangeFilterDisabled?: boolean;
     singlePointStyle?: 'dot' | 'line';
-    mapColorsToFields?: (_dashboardItem: DashboardItem, _theme: QuillTheme) => {
-        [key: string]: string;
-    };
+    mapColorsToFields?: (_dashboardItem: DashboardItem, _theme: QuillTheme) => ColorMapType;
 }
 interface WithChartId extends BaseChartProps {
     chartId: string;
@@ -46,6 +42,16 @@ interface WithConfig extends BaseChartProps {
 }
 type ChartProps = WithChartId | WithConfig;
 export declare function didFiltersChange(dashboardItem: any, filters: any): boolean;
+export type ColorMapType = {
+    [key: string]: {
+        primary: string;
+        comparison?: string;
+        primaryGradientStart?: string;
+        primaryGradientStop?: string;
+        comparisonGradientStart?: string;
+        comparisonGradientStop?: string;
+    };
+};
 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":";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"}
+{"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,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,YAAY,CAAC;CACnB;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;AAED,MAAM,MAAM,YAAY,GAAG;IACzB,CAAC,GAAG,EAAE,MAAM,GAAG;QACb,OAAO,EAAE,MAAM,CAAC;QAChB,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,oBAAoB,CAAC,EAAE,MAAM,CAAC;QAC9B,mBAAmB,CAAC,EAAE,MAAM,CAAC;QAC7B,uBAAuB,CAAC,EAAE,MAAM,CAAC;QACjC,sBAAsB,CAAC,EAAE,MAAM,CAAC;KACjC,CAAC;CACH,CAAC;AAaF,QAAA,MAAM,KAAK,SAAU,UAAU,4CAqC9B,CAAC;AAkiBF,eAAe,KAAK,CAAC"}

package/dist/cjs/Chart.js

@@ -85,7 +85,7 @@ function fallbackMapColorsToFields(_dashboardItem, _theme) {
 }
 const Chart = (data) => {
     if ('config' in data) {
-        return ((0, jsx_runtime_1.jsx)(ChartDisplay, { ...data, loading: Boolean(!data.config), isComparison: Boolean(data?.config?.compareRows?.length) }));
+        return ((0, jsx_runtime_1.jsx)(ChartDisplay, { ...data, error: data.config.rows ? undefined : 'No rows found', 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)(() => {
@@ -95,24 +95,25 @@ 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', mapColorsToFields: data.mapColorsToFields ?? fallbackMapColorsToFields }));
+    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, singlePointStyle: data.singlePointStyle ?? 'dot', mapColorsToFields: data.mapColorsToFields ?? fallbackMapColorsToFields }));
 };
-const ChartUpdater = ({ colors, chartId, containerStyle, theme, isAnimationActive, hideXAxis, hideYAxis, hideCartesianGrid, dashedComparison, dateRangeFilterDisabled, customPrimaryColor, customComparisonColor, singlePointStyle, mapColorsToFields, }) => {
+const ChartUpdater = ({ colors, chartId, containerStyle, theme, isAnimationActive, hideXAxis, hideYAxis, hideCartesianGrid, dashedComparison, dateRangeFilterDisabled, 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 [error, setError] = (0, react_1.useState)(undefined);
     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() {
+            setLoading(true);
             if (!didFiltersChange(dashboard[chartId], dashboardFilters)) {
                 setLoading(false);
                 return;
             }
             try {
-                setLoading(true);
                 // Remove extra fields on each filter so we don't confuse the backend.
                 const allowDateRange = !dateRangeFilterDisabled;
                 const minimalFilters = Object.values(dashboardFilters).length
@@ -142,6 +143,7 @@ const ChartUpdater = ({ colors, chartId, containerStyle, theme, isAnimationActiv
                     id: chartId,
                     filters: minimalFilters,
                 };
+                setError(undefined);
                 const resp = await (0, dataFetcher_1.getData)(client, 'itempost', 'omit', hostedBody, cloudBody);
                 if (resp && resp.name !== 'error' && !resp.errorMessage) {
                     setIsComparison(!!resp.compareRows?.length);
@@ -158,6 +160,9 @@ const ChartUpdater = ({ colors, chartId, containerStyle, theme, isAnimationActiv
                         setColorMap(mapColorsToFields(dashboardItem, theme));
                     }
                 }
+                else {
+                    setError(resp?.errorMessage);
+                }
                 setLoading(false);
             }
             catch (e) {
@@ -168,9 +173,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, colorMap: colorMap }));
+    return ((0, jsx_runtime_1.jsx)(ChartDisplay, { config: dashboard[chartId], colors: colors, containerStyle: containerStyle, hideXAxis: hideXAxis, hideYAxis: hideYAxis, hideCartesianGrid: hideCartesianGrid, dashedComparison: dashedComparison, singlePointStyle: singlePointStyle, isAnimationActive: isAnimationActive, isComparison: isComparison, loading: loading || initialLoad, error: error, colorMap: colorMap }));
 };
-const ChartDisplay = ({ config, colors, containerStyle, hideXAxis, hideYAxis, hideCartesianGrid, dashedComparison, customPrimaryColor, customComparisonColor, isAnimationActive, loading = false, isComparison = false, singlePointStyle = 'dot', colorMap, }) => {
+const ChartDisplay = ({ config, colors, containerStyle, hideXAxis, hideYAxis, hideCartesianGrid, dashedComparison, isAnimationActive, loading = false, error = undefined, 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)(() => {
@@ -208,13 +213,11 @@ const ChartDisplay = ({ config, colors, containerStyle, hideXAxis, hideYAxis, hi
             ? (0, PivotModal_1.generatePivotTableYAxis)(pivot, pivotTable.columns, yAxisFields?.[0]?.format)
             : null;
     }, [pivotTable, config?.yAxisFields]);
-    if (!config || loading) {
-        if (loading) {
-            return (0, jsx_runtime_1.jsx)(ChartSkeleton_1.default, { containerStyle: containerStyle });
-        }
-        else {
-            return (0, jsx_runtime_1.jsx)(ChartError_1.default, { containerStyle: containerStyle });
-        }
+    if (error) {
+        return (0, jsx_runtime_1.jsx)(ChartError_1.default, { containerStyle: containerStyle });
+    }
+    else if (!config || loading) {
+        return (0, jsx_runtime_1.jsx)(ChartSkeleton_1.default, { containerStyle: containerStyle });
     }
     // TODO: Figure out if we can use ?? to coalesce these into the variable.
     const chartTypes = [config?.chartType];
@@ -292,17 +295,37 @@ const ChartDisplay = ({ config, colors, containerStyle, hideXAxis, hideYAxis, hi
         (key.startsWith('comparison_') &&
             Boolean(row[key.replace('comparison_', '')]))));
     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, colorMap: colorMap }));
+        // Autofill the column chart with an empty column if there are no rows
+        let barChartData = data;
+        if (dateFilter && (!data || data.length === 0)) {
+            const xAxis = config.xAxisField;
+            const yAxis = yAxisFields[0]?.field;
+            barChartData = [{ [xAxis]: '', [yAxis]: '0' }];
+        }
+        return ((0, jsx_runtime_1.jsx)(BarChart_1.default, { colors: chartColors, theme: theme, isStacked: isPivot && yAxisFields.length > (dateFilter?.comparison ? 2 : 1), yAxisFields: yAxisFields, data: barChartData, 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
-        const isComparison = data.rows.length > 0 &&
+        const isComparison = data.rows?.length > 0 &&
             Object.keys(data.rows[0]).includes(`comparison_${data.xAxisField}`);
         const primaryMetricLabel = data?.filtersApplied?.date_range?.preset?.label;
         const comparisonKey = data?.filtersApplied?.date_range?.comparisonRange?.value;
         const comparisonLabel = dateRangePickerUtils_1.COMPARISON_OPTIONS.find((opt) => opt.value === comparisonKey)?.text;
+        if (data.rows?.length === 0 || data.rows[0][data.xAxisField] === null) {
+            return ((0, jsx_runtime_1.jsx)("div", { style: {
+                    display: 'flex',
+                    flex: '1 0 auto',
+                    height: containerStyle?.height || '100%',
+                    margin: 'auto',
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                    fontSize: 13,
+                    color: theme.secondaryTextColor,
+                    maxWidth: '100%',
+                    width: '100%',
+                    ...containerStyle,
+                }, children: "No results" }));
+        }
         return ((0, jsx_runtime_1.jsxs)("div", { style: {
                 fontFamily: theme?.fontFamily,
                 fontSize: 32,
@@ -324,7 +347,7 @@ const ChartDisplay = ({ config, colors, containerStyle, hideXAxis, hideYAxis, hi
                         gap: 4,
                         alignItems: 'baseline',
                         marginRight: 'auto',
-                    }, children: [(0, jsx_runtime_1.jsx)("span", { children: data.rows.length > 0 &&
+                    }, children: [(0, jsx_runtime_1.jsx)("span", { children: data.rows?.length > 0 &&
                                 (0, valueFormatter_1.valueFormatter)({
                                     value: data.rows[0][data.xAxisField] ?? 0,
                                     field: data.xAxisField,
@@ -355,7 +378,7 @@ const ChartDisplay = ({ config, colors, containerStyle, hideXAxis, hideYAxis, hi
                                 fontWeight: '500',
                                 fontFamily: theme?.fontFamily,
                                 color: theme?.secondaryTextColor,
-                            }, children: data.rows.length > 0 &&
+                            }, children: data.rows?.length > 0 &&
                                 (0, valueFormatter_1.valueFormatter)({
                                     value: data.rows[0][`comparison_${data.xAxisField}`] ?? 0,
                                     field: data.xAxisField,
@@ -377,6 +400,20 @@ const ChartDisplay = ({ config, colors, containerStyle, hideXAxis, hideYAxis, hi
                                 ? 'in ' + comparisonLabel.toLowerCase()
                                 : 'previous period' })] }))] }));
     }
-    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 }));
+    // Autofill the line chart with two zero values, so they form a line at 0.0
+    // when there are no rows on the config.
+    let lineChartData = data;
+    if (dateFilter && (!data || data.length === 0)) {
+        const xAxis = config.xAxisField;
+        const yAxis = yAxisFields[0]?.field;
+        const format = config.columns.find((c) => c.field === xAxis).format;
+        const startDate = (0, valueFormatter_2.quillFormat)({ value: dateFilter?.startDate, format });
+        const endDate = (0, valueFormatter_2.quillFormat)({ value: dateFilter?.endDate, format });
+        lineChartData = [
+            { [xAxis]: startDate, [yAxis]: '0' },
+            { [xAxis]: endDate, [yAxis]: '0' },
+        ];
+    }
+    return ((0, jsx_runtime_1.jsx)(LineChart_1.default, { colors: chartColors, colorMap: colorMap, yAxisFields: yAxisFields, data: lineChartData, 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, singlePointStyle: singlePointStyle }));
 };
 exports.default = Chart;

package/dist/cjs/ChartBuilder.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { QuillTheme } from './QuillProvider';
 import { Pivot } from './internals/ReportBuilder/PivotModal';
 import { SelectComponentProps, TextInputComponentProps, ButtonComponentProps, ModalComponentProps, HeaderProps, LabelProps, TextProps, DeleteButtonProps, MemoizedPopoverProps } from './components/UiComponents';
 import { Column } from './models/Tables';
@@ -35,6 +36,13 @@ interface ChartBuilderProps {
     onDelete?: () => void;
     fields?: Field[];
     pivot?: Pivot;
+    pivotData?: {
+        rows: any[];
+        columns: {
+            label: string;
+            field: string;
+        }[];
+    };
     dateRange?: (string | Date)[];
     dashboardItem?: any;
     recommendedPivots?: Pivot[];
@@ -47,6 +55,13 @@ interface ChartBuilderProps {
     organizationName?: string;
 }
 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 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, pivotData, }: ChartBuilderProps): import("react/jsx-runtime").JSX.Element | undefined;
+export declare function DashboardFilterModal({ isOpen, setIsOpen, override, theme, issues, }: {
+    isOpen: boolean;
+    setIsOpen: (e: boolean) => void;
+    override: () => void;
+    theme: QuillTheme;
+    issues: string[];
+}): import("react/jsx-runtime").JSX.Element;
 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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"}