@quillsql/react 2.11.29 → 2.12.0

package/dist/cjs/Chart.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 import { QuillTheme } from './QuillProvider';
-import { type DashboardItem } from './Dashboard';
+import { type QuillReport } from './Dashboard';
+import { Filter } from './models/Filter';
 export declare function didFiltersChange(dashboardItem: any, filters: any): boolean;
 export type ColorMapType = {
     [key: string]: {
@@ -17,24 +18,24 @@ export type ColorMapType = {
  */
 export interface ChartProps {
     /**
-     * A dashboard item to render, if any.
+     * A report to render, if any.
      *
-     * When config is passed, the chart will not refetch the given dashboard item
-     * and will instead simply render the item it was given.
+     * When config is passed, the chart will not refetch the given report and will
+     * instead simply render the item it was given.
      *
-     * A `config` must be passed if `chartId` is not present.
+     * A `config` must be passed if `reportId` is not present.
      */
-    config?: DashboardItem | any;
+    config?: QuillReport | any;
     /**
-     * A dashboard item to render, if any.
+     * The id of a report to render, if any.
      *
-     * When a chartId is passed, the chart will first fetch the data necessary to
-     * render this chart, and then it will render the dashboard item that it
-     * receives from the server.
+     * When a reportId is passed, the chart will first fetch the data necessary to
+     * render this chart, and then it will render the report that it receives from
+     * the server.
      *
-     * A `chartId` must be passed if `config` is not present.
+     * A `reportId` must be passed if `config` is not present.
      */
-    chartId?: string;
+    reportId?: string;
     /**
      * A list of color strings used to color the chart.
      *
@@ -84,8 +85,12 @@ export interface ChartProps {
      */
     cartesianGridLineStyle?: 'solid' | 'dashed';
     /**
-     * An optional function that takes a dashboard item and theme and returns a
-     * map of keys used in that dashboard item to the colors they should use.
+     * The color of cartesian grid lines.
+     */
+    cartesianGridLineColor?: string;
+    /**
+     * An optional function that takes a report and theme and returns a map of
+     * keys used in that report to the colors they should use.
      *
      * The color values support RGB hexcodes and CSS color literals.
      *
@@ -109,7 +114,11 @@ export interface ChartProps {
      * }
      * ```
      */
-    mapColorsToFields?: (dashboardItem: DashboardItem, theme: QuillTheme) => ColorMapType;
+    mapColorsToFields?: (report: QuillReport, theme: QuillTheme) => ColorMapType;
+    /**
+     * A loading component to show when the chart is loading.
+     */
+    LoadingComponent?: () => JSX.Element;
     /**
      * Styles the top-level container of the Chart.
      *
@@ -120,6 +129,8 @@ export interface ChartProps {
      * Styles the top-level container of the Chart.
      */
     containerStyle?: React.CSSProperties;
+    /** An array of dashboard filters that are indicated by the frontend dev. */
+    filters?: Filter[];
 }
 /**
  * ### Quill Chart
@@ -129,13 +140,13 @@ export interface ChartProps {
  * @example
  * ```js
  * // Usage with chart id (will auto-fetch data)
- * <Chart chartId="12345" />
+ * <Chart reportId="12345" />
  * ```
  *
  * @example
  * ```js
- * // Usage with a dashboard item (will not auto-fetch data)
- * <Chart config={dashboardItem} />
+ * // Usage with a report (will not auto-fetch data)
+ * <Chart config={report} />
  * ```
  *
  * ### Chart API

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

@@ -1 +1 @@
-{"version":3,"file":"Chart.d.ts","sourceRoot":"","sources":["../../src/Chart.tsx"],"names":[],"mappings":";AAWA,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAgB7C,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,aAAa,CAAC;AAsGjD,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;AAeF;;GAEG;AACH,MAAM,WAAW,UAAU;IACzB;;;;;;;OAOG;IACH,MAAM,CAAC,EAAE,aAAa,GAAG,GAAG,CAAC;IAE7B;;;;;;;;OAQG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;;;;OAKG;IACH,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAElB;;OAEG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAE5B;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAE5B;;OAEG;IACH,2BAA2B,CAAC,EAAE,OAAO,CAAC;IAEtC;;OAEG;IACH,yBAAyB,CAAC,EAAE,OAAO,CAAC;IAEpC;;OAEG;IACH,wBAAwB,CAAC,EAAE,OAAO,CAAC;IAEnC;;OAEG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAE9B;;;OAGG;IACH,mBAAmB,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAEzC;;OAEG;IACH,sBAAsB,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAE5C;;;;;;;;;;;;;;;;;;;;;;;;;OAyBG;IACH,iBAAiB,CAAC,EAAE,CAClB,aAAa,EAAE,aAAa,EAC5B,KAAK,EAAE,UAAU,KACd,YAAY,CAAC;IAElB;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CACtC;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,QAAA,MAAM,KAAK,UAAW,UAAU,4CA2C/B,CAAC;AA2lBF,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Chart.d.ts","sourceRoot":"","sources":["../../src/Chart.tsx"],"names":[],"mappings":";AAWA,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAgB7C,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AA0GzC,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;AAeF;;GAEG;AACH,MAAM,WAAW,UAAU;IACzB;;;;;;;OAOG;IACH,MAAM,CAAC,EAAE,WAAW,GAAG,GAAG,CAAC;IAE3B;;;;;;;;OAQG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;;;;OAKG;IACH,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAElB;;OAEG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAE5B;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAE5B;;OAEG;IACH,2BAA2B,CAAC,EAAE,OAAO,CAAC;IAEtC;;OAEG;IACH,yBAAyB,CAAC,EAAE,OAAO,CAAC;IAEpC;;OAEG;IACH,wBAAwB,CAAC,EAAE,OAAO,CAAC;IAEnC;;OAEG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAE9B;;;OAGG;IACH,mBAAmB,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAEzC;;OAEG;IACH,sBAAsB,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAE5C;;OAEG;IACH,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAEhC;;;;;;;;;;;;;;;;;;;;;;;;;OAyBG;IACH,iBAAiB,CAAC,EAAE,CAClB,MAAM,EAAE,WAAW,EACnB,KAAK,EAAE,UAAU,KACd,YAAY,CAAC;IAElB;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,GAAG,CAAC,OAAO,CAAC;IAErC;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAErC,4EAA4E;IAC5E,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,QAAA,MAAM,KAAK,UAAW,UAAU,4CA8C/B,CAAC;AAynBF,eAAe,KAAK,CAAC"}

package/dist/cjs/Chart.js

@@ -18,12 +18,13 @@ const valueFormatter_1 = require("./utils/valueFormatter");
 const LineChart_1 = __importDefault(require("./components/Chart/LineChart"));
 const BarChart_1 = __importDefault(require("./components/Chart/BarChart"));
 const merge_1 = require("./utils/merge");
-const ChartSkeleton_1 = __importDefault(require("./components/Chart/ChartSkeleton"));
+const ChartSkeleton_1 = require("./components/Chart/ChartSkeleton");
 const ChartError_1 = __importDefault(require("./components/Chart/ChartError"));
 const dateRangePickerUtils_1 = require("./DateRangePicker/dateRangePickerUtils");
 const valueFormatter_2 = require("./utils/valueFormatter");
 const csv_1 = require("./utils/csv");
 const useTheme_1 = __importDefault(require("./hooks/useTheme"));
+const errorProcessing_1 = require("./utils/errorProcessing");
 const MAX_ROWS_FOR_GENERIC_TABLE = 300;
 // @ts-ignore
 function sumByKey(arr, key) {
@@ -82,7 +83,7 @@ function didFiltersChange(dashboardItem, filters) {
     return !isEquivalent(dashboardItem.filtersApplied, filters);
 }
 exports.didFiltersChange = didFiltersChange;
-function fallbackMapColorsToFields(_dashboardItem, _theme) {
+function fallbackMapColorsToFields(_report, _theme) {
     // By default, if the key is not in the map we use the colors array.
     return {};
 }
@@ -94,13 +95,13 @@ function fallbackMapColorsToFields(_dashboardItem, _theme) {
  * @example
  * ```js
  * // Usage with chart id (will auto-fetch data)
- * <Chart chartId="12345" />
+ * <Chart reportId="12345" />
  * ```
  *
  * @example
  * ```js
- * // Usage with a dashboard item (will not auto-fetch data)
- * <Chart config={dashboardItem} />
+ * // Usage with a report (will not auto-fetch data)
+ * <Chart config={report} />
  * ```
  *
  * ### Chart API
@@ -121,9 +122,9 @@ const Chart = (props) => {
                 ? theme.chartColors
                 : ['#4E80EE', '#E14F62', '#55B5A6', '#E9A23B', '#6466E9', '#55B685'];
     }, [data.colors]);
-    return ((0, jsx_runtime_1.jsx)(ChartUpdater, { chartId: data.chartId, className: data.className, containerStyle: data.containerStyle, colors: chartColors, isAnimationActive: data.isAnimationActive, hideXAxis: data.hideXAxis, hideYAxis: data.hideYAxis, hideCartesianGrid: data.hideCartesianGrid, hideHorizontalCartesianGrid: data.hideHorizontalCartesianGrid, hideVerticalCartesianGrid: data.hideVerticalCartesianGrid, hideSubsequentXAxisTicks: data.hideSubsequentXAxisTicks, hideDateRangeFilter: data.hideDateRangeFilter, cartesianGridLineStyle: data.cartesianGridLineStyle, comparisonLineStyle: data.comparisonLineStyle, mapColorsToFields: data.mapColorsToFields ?? fallbackMapColorsToFields }));
+    return ((0, jsx_runtime_1.jsx)(ChartUpdater, { reportId: data.reportId, className: data.className, containerStyle: data.containerStyle, colors: chartColors, isAnimationActive: data.isAnimationActive, hideXAxis: data.hideXAxis, hideYAxis: data.hideYAxis, hideCartesianGrid: data.hideCartesianGrid, hideHorizontalCartesianGrid: data.hideHorizontalCartesianGrid, hideVerticalCartesianGrid: data.hideVerticalCartesianGrid, hideSubsequentXAxisTicks: data.hideSubsequentXAxisTicks, hideDateRangeFilter: data.hideDateRangeFilter, cartesianGridLineStyle: data.cartesianGridLineStyle, cartesianGridLineColor: data.cartesianGridLineColor, comparisonLineStyle: data.comparisonLineStyle, mapColorsToFields: data.mapColorsToFields ?? fallbackMapColorsToFields, LoadingComponent: data.LoadingComponent, filters: data.filters }));
 };
-const ChartUpdater = ({ colors, chartId, className, containerStyle, isAnimationActive, hideXAxis, hideYAxis, hideCartesianGrid, hideHorizontalCartesianGrid = false, hideVerticalCartesianGrid = true, hideSubsequentXAxisTicks = false, cartesianGridLineStyle = 'solid', comparisonLineStyle, hideDateRangeFilter = false, mapColorsToFields, }) => {
+const ChartUpdater = ({ colors, reportId, className, containerStyle, isAnimationActive, hideXAxis, hideYAxis, hideCartesianGrid, hideHorizontalCartesianGrid = false, hideVerticalCartesianGrid = true, hideSubsequentXAxisTicks = false, cartesianGridLineStyle = 'solid', cartesianGridLineColor, comparisonLineStyle, hideDateRangeFilter = false, mapColorsToFields, LoadingComponent = ChartSkeleton_1.QuillLoadingSkeleton, filters, }) => {
     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);
@@ -136,7 +137,7 @@ const ChartUpdater = ({ colors, chartId, className, containerStyle, isAnimationA
     (0, react_1.useEffect)(() => {
         async function getChartOptions() {
             setLoading(true);
-            if (!didFiltersChange(dashboard[chartId], dashboardFilters)) {
+            if (!didFiltersChange(dashboard[reportId], dashboardFilters)) {
                 setLoading(false);
                 return;
             }
@@ -156,9 +157,12 @@ const ChartUpdater = ({ colors, chartId, className, containerStyle, isAnimationA
                         return newFilter;
                     })
                     : [];
+                if (filters) {
+                    minimalFilters.push(...filters);
+                }
                 const hostedBody = {
                     metadata: {
-                        dashboardItemId: chartId,
+                        dashboardItemId: reportId,
                         orgId: client.customerId || '*',
                         clientId: client.publicKey,
                         task: 'item',
@@ -167,20 +171,21 @@ const ChartUpdater = ({ colors, chartId, className, containerStyle, isAnimationA
                     },
                 };
                 const cloudBody = {
-                    id: chartId,
+                    id: reportId,
                     filters: minimalFilters,
                 };
                 setError(undefined);
                 const resp = await (0, dataFetcher_1.getData)(client, 'itempost', 'omit', hostedBody, cloudBody);
+                (0, errorProcessing_1.processFilterErrorList)(resp);
                 if (resp && resp.name !== 'error' && !resp.errorMessage) {
                     setIsComparison(!!resp.compareRows?.length);
                     if (resp.compareRows) {
                         (0, merge_1.mergeComparisonRange)(resp);
                     }
-                    const dashboardItem = { ...resp, filtersApplied: dashboardFilters };
+                    const dashboardItem = { ...resp, filtersApplied: minimalFilters };
                     dispatch({
                         type: 'UPDATE_DASHBOARD_ITEM',
-                        id: chartId,
+                        id: reportId,
                         data: dashboardItem,
                     });
                     if (mapColorsToFields) {
@@ -199,10 +204,10 @@ const ChartUpdater = ({ colors, chartId, className, containerStyle, isAnimationA
         }
         setInitialLoad(false);
         getChartOptions();
-    }, [dashboardFilters, client, chartId]);
-    return ((0, jsx_runtime_1.jsx)(ChartDisplay, { config: dashboard[chartId], colors: colors, className: className, containerStyle: containerStyle, hideXAxis: hideXAxis, hideYAxis: hideYAxis, hideCartesianGrid: hideCartesianGrid, hideHorizontalCartesianGrid: hideHorizontalCartesianGrid, hideVerticalCartesianGrid: hideVerticalCartesianGrid, hideSubsequentXAxisTicks: hideSubsequentXAxisTicks, cartesianGridLineStyle: cartesianGridLineStyle, hideDateRangeFilter: hideDateRangeFilter, comparisonLineStyle: comparisonLineStyle, isAnimationActive: isAnimationActive, isComparison: isComparison, loading: loading || initialLoad, error: error, colorMap: colorMap }));
+    }, [dashboardFilters, client, reportId]);
+    return ((0, jsx_runtime_1.jsx)(ChartDisplay, { config: dashboard[reportId], colors: colors, className: className, containerStyle: containerStyle, hideXAxis: hideXAxis, hideYAxis: hideYAxis, hideCartesianGrid: hideCartesianGrid, hideHorizontalCartesianGrid: hideHorizontalCartesianGrid, hideVerticalCartesianGrid: hideVerticalCartesianGrid, hideSubsequentXAxisTicks: hideSubsequentXAxisTicks, cartesianGridLineStyle: cartesianGridLineStyle, cartesianGridLineColor: cartesianGridLineColor, hideDateRangeFilter: hideDateRangeFilter, comparisonLineStyle: comparisonLineStyle, isAnimationActive: isAnimationActive, isComparison: isComparison, loading: loading || initialLoad, error: error, colorMap: colorMap, LoadingComponent: LoadingComponent }));
 };
-const ChartDisplay = ({ config, colors, className, containerStyle, hideXAxis, hideYAxis, hideCartesianGrid, hideDateRangeFilter = false, hideHorizontalCartesianGrid = false, hideVerticalCartesianGrid = true, hideSubsequentXAxisTicks = false, cartesianGridLineStyle = 'solid', comparisonLineStyle, isAnimationActive, loading = false, error = undefined, isComparison = false, colorMap, }) => {
+const ChartDisplay = ({ config, colors, className, containerStyle, hideXAxis, hideYAxis, hideCartesianGrid, hideDateRangeFilter = false, hideHorizontalCartesianGrid = false, hideVerticalCartesianGrid = true, hideSubsequentXAxisTicks = false, cartesianGridLineStyle = 'solid', cartesianGridLineColor, comparisonLineStyle, isAnimationActive, loading = false, error = undefined, isComparison = false, colorMap, LoadingComponent = ChartSkeleton_1.QuillLoadingSkeleton, }) => {
     const { dashboardFilters } = (0, react_1.useContext)(Context_1.DashboardFiltersContext);
     const theme = (0, useTheme_1.default)();
     const chartColors = (0, react_1.useMemo)(() => {
@@ -247,12 +252,13 @@ const ChartDisplay = ({ config, colors, className, containerStyle, hideXAxis, hi
     else if (!pivotTable &&
         config &&
         config?.chartType !== 'metric' &&
+        config?.chartType !== 'table' &&
         config.rows &&
         config.rows.length > MAX_ROWS_FOR_GENERIC_TABLE) {
         return ((0, jsx_runtime_1.jsx)(ChartError_1.default, { className: className, containerStyle: containerStyle, label: "Charts can only display 300 rows. Please add a pivot or modify the query." }));
     }
     else if (!config || loading) {
-        return ((0, jsx_runtime_1.jsx)(ChartSkeleton_1.default, { className: className, containerStyle: containerStyle }));
+        return ((0, jsx_runtime_1.jsx)("div", { className: className, style: containerStyle, children: (0, jsx_runtime_1.jsx)(LoadingComponent, {}) }));
     }
     const chartTypes = [config?.chartType];
     if (chartTypes.includes('pie')) {
@@ -277,7 +283,7 @@ const ChartDisplay = ({ config, colors, className, containerStyle, hideXAxis, hi
         columns.forEach((col, index) => {
             // ADD THE RIGHT FIELD TYPE FOR THE VALUE COLUMNS
             if ((valueFieldType ||
-                ['min', 'max'].includes(config?.pivot.aggregationType)) &&
+                ['min', 'max'].includes(config?.pivot?.aggregationType)) &&
                 index !== 0) {
                 col.format = valueFieldType || 'two_decimal_places';
             }
@@ -303,6 +309,7 @@ const ChartDisplay = ({ config, colors, className, containerStyle, hideXAxis, hi
         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',
+                ...containerStyle,
             }, className: className, downloadCSV: () => {
                 (0, csv_1.downloadCSV)({
                     rows: pivotTable?.rows ?? data.rows ?? [],
@@ -321,7 +328,7 @@ const ChartDisplay = ({ config, colors, className, containerStyle, hideXAxis, hi
         if (yAxisFields[0].label === '' && config.yAxisFields.length === 1) {
             yAxisFields[0].label = config.yAxisFields[0].label;
         }
-        if (isComparison) {
+        if (dateFilter?.comparison) {
             const sampleField = yAxisFields[0];
             yAxisFields[yAxisFields.length] = {
                 ...sampleField,
@@ -384,6 +391,7 @@ const ChartDisplay = ({ config, colors, className, containerStyle, hideXAxis, hi
                 display: 'flex',
                 width: '100%',
                 flexDirection: 'row',
+                ...containerStyle,
             }, className: className, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
                         display: 'flex',
                         gap: 4,
@@ -451,7 +459,9 @@ const ChartDisplay = ({ config, colors, className, containerStyle, hideXAxis, hi
         (!data || data.length === 0)) {
         const xAxis = config.xAxisField;
         const yAxis = yAxisFields[0]?.field;
-        const format = config.columns.find((c) => c.field === xAxis).format;
+        const format = config.pivot
+            ? 'MMM_yyyy'
+            : 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 = [
@@ -459,6 +469,17 @@ const ChartDisplay = ({ config, colors, className, containerStyle, hideXAxis, hi
             { [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, className: className, theme: theme, comparison: dateFilter?.comparison, isAnimationActive: isAnimationActive, hideXAxis: hideXAxis, hideYAxis: hideYAxis, hideCartesianGrid: hideCartesianGrid, hideHorizontalCartesianGrid: hideHorizontalCartesianGrid, hideVerticalCartesianGrid: hideVerticalCartesianGrid, hideSubsequentXAxisTicks: hideSubsequentXAxisTicks, cartesianGridLineStyle: cartesianGridLineStyle ?? 'solid', comparisonLineStyle: comparisonLineStyle ?? 'solid' }));
+    return ((0, jsx_runtime_1.jsx)(LineChart_1.default, { colors: chartColors, colorMap: colorMap, yAxisFields: yAxisFields.sort(sortComparisonFirst), data: lineChartData, xAxisField: config.xAxisField, xAxisLabel: config.xAxisLabel, xAxisFormat: config.xAxisFormat, containerStyle: containerStyle, className: className, theme: theme, comparison: dateFilter?.comparison, isAnimationActive: isAnimationActive, hideXAxis: hideXAxis, hideYAxis: hideYAxis, hideCartesianGrid: hideCartesianGrid, hideHorizontalCartesianGrid: hideHorizontalCartesianGrid, hideVerticalCartesianGrid: hideVerticalCartesianGrid, hideSubsequentXAxisTicks: hideSubsequentXAxisTicks, cartesianGridLineStyle: cartesianGridLineStyle ?? 'solid', comparisonLineStyle: comparisonLineStyle ?? 'solid', cartesianGridLineColor: cartesianGridLineColor }));
+};
+// Sort to put comparison first (ie. underneath) primary.
+const sortComparisonFirst = (a, b) => {
+    const key = 'comparison_';
+    if (a.field.startsWith(key) && b.field.startsWith(key))
+        return 0;
+    if (a.field.startsWith(key))
+        return -1;
+    if (b.field.startsWith(key))
+        return 1;
+    return 0;
 };
 exports.default = Chart;

package/dist/cjs/ChartBuilder.d.ts

@@ -1,6 +1,6 @@
 import React, { ReactNode } from 'react';
 import { ColumnInternal } from './models/Columns';
-import { DashboardItem } from './Dashboard';
+import { QuillReport } from './Dashboard';
 export declare const numberFormatOptions: string[];
 export declare const dateFormatOptions: string[];
 /**
@@ -109,6 +109,10 @@ export interface ChartBuilderProps {
     ErrorMessageComponent?: (props: {
         errorMessage: string;
     }) => JSX.Element;
+    /**
+     * A loading component to show in the pivot modal while suggestions load.
+     */
+    LoadingComponent?: () => JSX.Element;
     /**
      * A container for each row of inputs for the ChartBuilder form.
      */
@@ -160,7 +164,7 @@ export interface ChartBuilderProps {
     /** Whether to show the dashboard dropdown. */
     showDashboardDropdown?: boolean;
     /** A callback fired when the add to dashboard flow has been completed. */
-    onAddToDashboardComplete?: (dashboardItem: DashboardItem) => void;
+    onAddToDashboardComplete?: (report: QuillReport) => void;
     /** A callback fired when this chart is delete. */
     onDelete?: () => void;
     /** The pivot info applied to this data. */
@@ -187,8 +191,8 @@ export interface ChartBuilderProps {
         start: Date;
         end: Date;
     } | undefined;
-    /** The dashboardItem for this ChartBuilder. */
-    dashboardItem?: DashboardItem | any;
+    /** The report for this ChartBuilder. */
+    report?: QuillReport | any;
     /** A list of generated pivots that were recommended as useful for this query. */
     recommendedPivots?: {
         rowField: string;
@@ -282,7 +286,7 @@ export declare function ChartBuilderWithModal(props: ChartBuilderProps): import(
  * ### Chart Builder API
  * @see https://docs.quillsql.com/components/chart-builder
  */
-export default function ChartBuilder({ TextInputComponent, SelectComponent, ButtonComponent, SecondaryButtonComponent, HeaderComponent, SubHeaderComponent, LabelComponent, DeleteButtonComponent, TextComponent, PopoverComponent, CardComponent, TableComponent, ModalComponent, ErrorMessageComponent, ChartBuilderInputRowContainer, ChartBuilderInputColumnContainer, PivotRowContainer, PivotColumnContainer, FormContainer, isOpen, isHorizontalView, pivot, setIsOpen, rows, columns, query, queryNoDateColumn, dateRange: dr, showTableFormatOptions, showDateFieldOptions, showAccessControlOptions, showDashboardDropdown, onAddToDashboardComplete, onDelete, dashboardItem, recommendedPivots: rp, createdPivots: cp, destinationDashboard, dateColumn, buttonLabel, organizationName, pivotData, hideDeleteButton, hideSubmitButton, hideDateRangeFilter, initialUniqueValues, pivotRecommendationsEnabled, }: ChartBuilderProps): import("react/jsx-runtime").JSX.Element | null;
+export default function ChartBuilder({ TextInputComponent, SelectComponent, ButtonComponent, SecondaryButtonComponent, HeaderComponent, SubHeaderComponent, LabelComponent, DeleteButtonComponent, TextComponent, PopoverComponent, CardComponent, TableComponent, ModalComponent, LoadingComponent, ErrorMessageComponent, ChartBuilderInputRowContainer, ChartBuilderInputColumnContainer, PivotRowContainer, PivotColumnContainer, FormContainer, isOpen, isHorizontalView, pivot, setIsOpen, rows, columns, query, queryNoDateColumn, dateRange: dr, showTableFormatOptions, showDateFieldOptions, showAccessControlOptions, showDashboardDropdown, onAddToDashboardComplete, onDelete, report, recommendedPivots: rp, createdPivots: cp, destinationDashboard, dateColumn, buttonLabel, organizationName, pivotData, hideDeleteButton, hideSubmitButton, hideDateRangeFilter, initialUniqueValues, pivotRecommendationsEnabled, }: ChartBuilderProps): import("react/jsx-runtime").JSX.Element | null;
 export declare function DashboardFilterModal({ isOpen, setIsOpen, issues, ModalComponent, ButtonComponent, }: {
     isOpen: boolean;
     setIsOpen: (e: boolean) => void;

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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"}

package/dist/cjs/ChartBuilder.js

@@ -238,7 +238,7 @@ exports.ChartBuilderWithModal = ChartBuilderWithModal;
  * ### Chart Builder API
  * @see https://docs.quillsql.com/components/chart-builder
  */
-function ChartBuilder({ TextInputComponent = UiComponents_1.QuillTextInput, SelectComponent = QuillSelect_1.QuillSelectComponent, ButtonComponent = UiComponents_1.MemoizedButton, SecondaryButtonComponent = UiComponents_1.MemoizedSecondaryButton, HeaderComponent = UiComponents_1.MemoizedHeader, SubHeaderComponent = UiComponents_1.MemoizedSubHeader, LabelComponent = UiComponents_1.MemoizedLabel, DeleteButtonComponent = UiComponents_1.MemoizedDeleteButton, TextComponent = UiComponents_1.MemoizedText, PopoverComponent = UiComponents_1.MemoizedPopover, CardComponent = QuillCard_1.QuillCard, TableComponent = UiComponents_1.QuillTableComponent, ModalComponent, ErrorMessageComponent = UiComponents_1.QuillErrorMessageComponent, ChartBuilderInputRowContainer = UiComponents_1.QuillChartBuilderInputRowContainer, ChartBuilderInputColumnContainer = UiComponents_1.QuillChartBuilderInputColumnContainer, PivotRowContainer = UiComponents_1.QuillPivotRowContainer, PivotColumnContainer = UiComponents_1.QuillPivotColumnContainer, FormContainer = UiComponents_1.QuillChartBuilderFormContainer, isOpen, isHorizontalView = true, pivot, setIsOpen, rows, columns, query, queryNoDateColumn, dateRange: dr, showTableFormatOptions = false, showDateFieldOptions = false, showAccessControlOptions = false, showDashboardDropdown = true, onAddToDashboardComplete, onDelete, dashboardItem = undefined, recommendedPivots: rp = [], createdPivots: cp = [], destinationDashboard, dateColumn, buttonLabel, organizationName, pivotData, hideDeleteButton = false, hideSubmitButton = false, hideDateRangeFilter = false, initialUniqueValues, pivotRecommendationsEnabled = true, }) {
+function ChartBuilder({ TextInputComponent = UiComponents_1.QuillTextInput, SelectComponent = QuillSelect_1.QuillSelectComponent, ButtonComponent = UiComponents_1.MemoizedButton, SecondaryButtonComponent = UiComponents_1.MemoizedSecondaryButton, HeaderComponent = UiComponents_1.MemoizedHeader, SubHeaderComponent = UiComponents_1.MemoizedSubHeader, LabelComponent = UiComponents_1.MemoizedLabel, DeleteButtonComponent = UiComponents_1.MemoizedDeleteButton, TextComponent = UiComponents_1.MemoizedText, PopoverComponent = UiComponents_1.MemoizedPopover, CardComponent = QuillCard_1.QuillCard, TableComponent = UiComponents_1.QuillTableComponent, ModalComponent, LoadingComponent = UiComponents_1.QuillLoadingComponent, ErrorMessageComponent = UiComponents_1.QuillErrorMessageComponent, ChartBuilderInputRowContainer = UiComponents_1.QuillChartBuilderInputRowContainer, ChartBuilderInputColumnContainer = UiComponents_1.QuillChartBuilderInputColumnContainer, PivotRowContainer = UiComponents_1.QuillPivotRowContainer, PivotColumnContainer = UiComponents_1.QuillPivotColumnContainer, FormContainer = UiComponents_1.QuillChartBuilderFormContainer, isOpen, isHorizontalView = true, pivot, setIsOpen, rows, columns, query, queryNoDateColumn, dateRange: dr, showTableFormatOptions = false, showDateFieldOptions = false, showAccessControlOptions = false, showDashboardDropdown = true, onAddToDashboardComplete, onDelete, report = undefined, recommendedPivots: rp = [], createdPivots: cp = [], destinationDashboard, dateColumn, buttonLabel, organizationName, pivotData, hideDeleteButton = false, hideSubmitButton = false, hideDateRangeFilter = false, initialUniqueValues, pivotRecommendationsEnabled = true, }) {
     const dateRange = dr;
     const [client] = (0, react_1.useContext)(Context_1.ClientContext);
     const [theme] = (0, react_1.useContext)(Context_1.ThemeContext);
@@ -310,7 +310,7 @@ function ChartBuilder({ TextInputComponent = UiComponents_1.QuillTextInput, Sele
     }, []);
     // get dashboards
     const [dashboardOptions, setDashboardOptions] = (0, react_1.useState)([]);
-    const [defaultDashboardName, setDefaultDashboardName] = (0, react_1.useState)(destinationDashboard || dashboardItem?.dashboardName || '');
+    const [defaultDashboardName, setDefaultDashboardName] = (0, react_1.useState)(destinationDashboard || report?.dashboardName || '');
     const { dashboardFilters } = (0, react_1.useContext)(Context_1.DashboardFiltersContext);
     const [dashboardFilters2, setDashboardFilters] = (0, react_1.useState)([]);
     const [dashboardHasDateFilter, setDashboardHasDateFilter] = (0, react_1.useState)(false);
@@ -324,7 +324,7 @@ function ChartBuilder({ TextInputComponent = UiComponents_1.QuillTextInput, Sele
     const [tableName, setTableName] = (0, react_1.useState)(undefined);
     const selectedTable = schema?.find((t) => t.displayName === tableName);
     const [pivotPopUpTitle, setPivotPopUpTitle] = (0, react_1.useState)('Add pivot');
-    const [createdPivots, setCreatedPivots] = (0, react_1.useState)(pivot ? [pivot] : dashboardItem?.pivot ? [dashboardItem.pivot] : cp);
+    const [createdPivots, setCreatedPivots] = (0, react_1.useState)(pivot ? [pivot] : report?.pivot ? [report.pivot] : cp);
     const [recommendedPivots, setRecommendedPivots] = (0, react_1.useState)(rp);
     const [pivotRowField, setPivotRowField] = (0, react_1.useState)(pivot?.rowField);
     const [pivotColumnField, setPivotColumnField] = (0, react_1.useState)(pivot?.columnField);
@@ -389,15 +389,15 @@ function ChartBuilder({ TextInputComponent = UiComponents_1.QuillTextInput, Sele
     };
     const pivotFormData = (pivot) => {
         const yAxisField = pivot.columnField || pivot.valueField;
-        const yAxisLabel = dashboardItem?.yAxisFields?.length > 0
-            ? dashboardItem.yAxisFields[0].label
+        const yAxisLabel = report?.yAxisFields?.length > 0
+            ? report.yAxisFields[0].label
             : pivot.valueField;
         // date labels for pivots should be treated like strings since they are
         // formatted in generatePivotTable
         const yAxisIsDate = pivot.columnField
             ? (0, PivotModal_1.isDateField)(pivot.columnFieldType || '')
             : false;
-        const chartType = dashboardItem?.chartType ?? (pivot.rowField ? 'column' : 'metric');
+        const chartType = report?.chartType ?? (pivot.rowField ? 'column' : 'metric');
         return {
             pivot,
             chartType: chartType,
@@ -406,15 +406,15 @@ function ChartBuilder({ TextInputComponent = UiComponents_1.QuillTextInput, Sele
                 ? 'string'
                 : columns.find((col) => col.field === pivot.rowField)?.format ||
                     'whole_number',
-            xAxisLabel: dashboardItem?.xAxisLabel || pivot.rowField,
+            xAxisLabel: report?.xAxisLabel || pivot.rowField,
             yAxisFields: [
                 {
                     field: yAxisField,
                     label: yAxisLabel,
                     format: yAxisIsDate
                         ? 'string'
-                        : dashboardItem?.yAxisFields?.length > 0
-                            ? dashboardItem?.yAxisFields[0].format
+                        : report?.yAxisFields?.length > 0
+                            ? report?.yAxisFields[0].format
                             : columns.find((col) => col.field === pivot.valueField)?.format ||
                                 'whole_number',
                 },
@@ -424,11 +424,11 @@ function ChartBuilder({ TextInputComponent = UiComponents_1.QuillTextInput, Sele
     const [formData, setFormData] = (0, react_1.useState)(pivot
         ? {
             ...formEmptyState,
-            ...dashboardItem,
+            ...report,
             ...pivotFormData(pivot),
             ...(destinationDashboard && { dashboardName: destinationDashboard }),
         }
-        : dashboardItem || formEmptyState);
+        : report || formEmptyState);
     (0, react_1.useEffect)(() => {
         async function getFormData() {
             const curFormData = formData;
@@ -437,19 +437,13 @@ function ChartBuilder({ TextInputComponent = UiComponents_1.QuillTextInput, Sele
                 .filter((elem) => elem !== null)
                 .map((key) => ({ label: key, value: key }));
             await updateDashboardFilters(destinationDashboard ??
-                (dashboardItem
-                    ? dashboardItem?.dashboardName
-                    : dashboardOptions[0]?.label));
+                (report ? report?.dashboardName : dashboardOptions[0]?.label));
             setDashboardOptions(dashboardOptions);
             const dashboardName = destinationDashboard ??
-                (dashboardItem
-                    ? dashboardItem?.dashboardName
-                    : dashboardOptions[0]?.label);
+                (report ? report?.dashboardName : dashboardOptions[0]?.label);
             curFormData.dashboardName = dashboardName;
             setDefaultDashboardName(destinationDashboard ??
-                (dashboardItem
-                    ? dashboardItem?.dashboardName
-                    : dashboardOptions[0]?.label));
+                (report ? report?.dashboardName : dashboardOptions[0]?.label));
             const { queryEndpoint, queryHeaders, publicKey } = client;
             const response = await fetch(`${queryEndpoint}`, {
                 method: 'POST',
@@ -502,8 +496,8 @@ function ChartBuilder({ TextInputComponent = UiComponents_1.QuillTextInput, Sele
             curFormData.dateField = dateField;
             setFormData({
                 ...curFormData,
-                dashboardName: dashboardItem
-                    ? dashboardItem?.dashboardName
+                dashboardName: report
+                    ? report?.dashboardName
                     : dashboardOptions[0]?.label,
             });
         }
@@ -720,12 +714,12 @@ function ChartBuilder({ TextInputComponent = UiComponents_1.QuillTextInput, Sele
         event.preventDefault();
     };
     const deleteChart = async () => {
-        if (!dashboardItem._id || !client) {
+        if (!report._id || !client) {
             return;
         }
         const { publicKey, customerId } = client;
         const cloudBody = {
-            dashboardItemId: dashboardItem._id,
+            dashboardItemId: report._id,
         };
         const searchParams = new URLSearchParams(customerId
             ? {
@@ -774,11 +768,10 @@ function ChartBuilder({ TextInputComponent = UiComponents_1.QuillTextInput, Sele
             return;
         }
         // If the dashbaordItem is a template but the editor isn't an admin, create a new dashboardItem and set the template to false
-        const dashboardItemId = !showDateFieldOptions && dashboardItem && dashboardItem.template
-            ? undefined
-            : dashboardItem
-                ? dashboardItem._id
-                : undefined;
+        let dashboardItemId = report ? report._id : undefined;
+        if (report && !showDateFieldOptions && report.template) {
+            dashboardItemId = undefined;
+        }
         const cloudBody = {
             ...formData,
             ...(formData.dateField?.table
@@ -793,7 +786,9 @@ function ChartBuilder({ TextInputComponent = UiComponents_1.QuillTextInput, Sele
             pivot: formData.pivot,
             referencedTables: allTables,
             referencedColumns,
-            template: !showDateFieldOptions && dashboardItem.template ? false : true,
+            template: report && !showDateFieldOptions && report.template
+                ? false
+                : formData.template,
             customerId: customerId || '*',
         };
         // @ts-ignore
@@ -883,12 +878,15 @@ function ChartBuilder({ TextInputComponent = UiComponents_1.QuillTextInput, Sele
                                     height: formData.chartType === 'metric'
                                         ? 100
                                         : isHorizontalView || !isOpen
-                                            ? 'calc(50% - 10px)'
+                                            ? showTableFormatOptions
+                                                ? 'calc(50% - 10px)'
+                                                : 'calc(100% - 10px)'
                                             : 400,
                                     ...(isHorizontalView && { flexGrow: 1 }),
                                 } })), 
                             // Make sure to display non-pivoted table when using pivot chart
-                            (isHorizontalView || (!isOpen && windowWidth < 1200)) && ((0, jsx_runtime_1.jsx)("div", { style: {
+                            showTableFormatOptions &&
+                                (isHorizontalView || (!isOpen && windowWidth < 1200)) && ((0, jsx_runtime_1.jsx)("div", { style: {
                                     width: '100%',
                                     height: isHorizontalView || !isOpen ? 'calc(50% - 10px)' : 400,
                                     flexGrow: 1,
@@ -927,7 +925,7 @@ function ChartBuilder({ TextInputComponent = UiComponents_1.QuillTextInput, Sele
                                                             // marginTop: 6,
                                                             display: 'flex',
                                                             flexDirection: 'column',
-                                                        }, children: (0, jsx_runtime_1.jsx)(PivotModal_1.PivotModal, { pivotRowField: pivotRowField, setPivotRowField: setPivotRowField, pivotColumnField: pivotColumnField, setPivotColumnField: setPivotColumnField, pivotValueField: pivotValueField, setPivotValueField: setPivotValueField, pivotAggregation: pivotAggregation, setPivotAggregation: setPivotAggregation, createdPivots: createdPivots, setCreatedPivots: setCreatedPivots, recommendedPivots: recommendedPivots, setRecommendedPivots: setRecommendedPivots, popUpTitle: pivotPopUpTitle, setPopUpTitle: setPivotPopUpTitle, selectedTable: selectedTable, SelectComponent: SelectComponent, ButtonComponent: ButtonComponent, CardComponent: CardComponent, SecondaryButtonComponent: SecondaryButtonComponent, PopoverComponent: PopoverComponent, LabelComponent: LabelComponent, TextComponent: TextComponent, HeaderComponent: HeaderComponent, ErrorMessageComponent: ErrorMessageComponent, PivotRowContainer: PivotRowContainer, PivotColumnContainer: PivotColumnContainer, theme: theme, isOpen: showPivotPopover, setIsOpen: setShowPivotPopover, showUpdatePivot: isEdittingPivot, setShowUpdatePivot: setIsEdittingPivot, parentRef: parentRef, data: rows, columns: columns, triggerButtonText: 'Add pivot +', selectedPivotIndex: selectedPivotIndex, setSelectedPivotIndex: setSelectedPivotIndex, removePivot: handleDeletePivot, selectPivot: handleAddPivot, dateRange: dateRange, selectPivotOnEdit: true, showTrigger: !formData.pivot, query: query, pivotCountRequest: 4, initialUniqueValues: initialUniqueValues, initialSelectedPivotTable: selectedPivotTable, pivotRecommendationsEnabled: pivotRecommendationsEnabled }) }), formData.pivot && ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("div", { style: { width: pivotCardWidth }, children: (0, jsx_runtime_1.jsx)(PivotList_1.PivotCard, { pivotTable: {
+                                                        }, children: (0, jsx_runtime_1.jsx)(PivotModal_1.PivotModal, { pivotRowField: pivotRowField, setPivotRowField: setPivotRowField, pivotColumnField: pivotColumnField, setPivotColumnField: setPivotColumnField, pivotValueField: pivotValueField, setPivotValueField: setPivotValueField, pivotAggregation: pivotAggregation, setPivotAggregation: setPivotAggregation, createdPivots: createdPivots, setCreatedPivots: setCreatedPivots, recommendedPivots: recommendedPivots, setRecommendedPivots: setRecommendedPivots, popUpTitle: pivotPopUpTitle, setPopUpTitle: setPivotPopUpTitle, selectedTable: selectedTable, SelectComponent: SelectComponent, ButtonComponent: ButtonComponent, CardComponent: CardComponent, SecondaryButtonComponent: SecondaryButtonComponent, PopoverComponent: PopoverComponent, LabelComponent: LabelComponent, TextComponent: TextComponent, HeaderComponent: HeaderComponent, ErrorMessageComponent: ErrorMessageComponent, PivotRowContainer: PivotRowContainer, PivotColumnContainer: PivotColumnContainer, LoadingComponent: LoadingComponent, theme: theme, isOpen: showPivotPopover, setIsOpen: setShowPivotPopover, showUpdatePivot: isEdittingPivot, setShowUpdatePivot: setIsEdittingPivot, parentRef: parentRef, data: rows, columns: columns, triggerButtonText: 'Add pivot +', selectedPivotIndex: selectedPivotIndex, setSelectedPivotIndex: setSelectedPivotIndex, removePivot: handleDeletePivot, selectPivot: handleAddPivot, dateRange: dateRange, selectPivotOnEdit: true, showTrigger: !formData.pivot, query: query, pivotCountRequest: 4, initialUniqueValues: initialUniqueValues, initialSelectedPivotTable: selectedPivotTable, pivotRecommendationsEnabled: pivotRecommendationsEnabled }) }), formData.pivot && ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("div", { style: { width: pivotCardWidth }, children: (0, jsx_runtime_1.jsx)(PivotList_1.PivotCard, { pivotTable: {
                                                                     pivot: formData.pivot,
                                                                     rows: selectedPivotTable?.rows,
                                                                     columns: selectedPivotTable?.columns,
@@ -979,9 +977,7 @@ function ChartBuilder({ TextInputComponent = UiComponents_1.QuillTextInput, Sele
                                                                                 : ''
                                                                             : yAxisField.format, onChange: (e) => handleChange(e.target.value, 'yAxisFields.format', index), options: formData.pivot
                                                                             ? NUMBER_OPTIONS
-                                                                            : formatOptions, width: 200 }), formData.pivot === null && ((0, jsx_runtime_1.jsx)("div", { ref: deleteRef, style: { marginLeft: deleteButtonMargin }, children: (0, jsx_runtime_1.jsx)(DeleteButtonComponent, { onClick: () => handleRemoveField('yAxisFields', index) }) }))] }, 'yAxisField' + index))), formData.pivot === null && ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { onClick: () => handleAddField('yAxisFields'), label: "Add field +" }) }))] })] }))] })), 
-                                    // Make sure to display non-pivoted table when using pivot chart
-                                    windowWidth < 1200 && ((0, jsx_runtime_1.jsx)("div", { style: {
+                                                                            : formatOptions, width: 200 }), formData.pivot === null && ((0, jsx_runtime_1.jsx)("div", { ref: deleteRef, style: { marginLeft: deleteButtonMargin }, children: (0, jsx_runtime_1.jsx)(DeleteButtonComponent, { onClick: () => handleRemoveField('yAxisFields', index) }) }))] }, 'yAxisField' + index))), formData.pivot === null && ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { onClick: () => handleAddField('yAxisFields'), label: "Add field +" }) }))] })] }))] })), showTableFormatOptions && windowWidth < 1200 && ((0, jsx_runtime_1.jsx)("div", { style: {
                                             width: '100%',
                                             height: isHorizontalView || !isOpen ? 'calc(50% - 10px)' : 400,
                                             flexGrow: 1,
@@ -1042,9 +1038,9 @@ function ChartBuilder({ TextInputComponent = UiComponents_1.QuillTextInput, Sele
                                     justifyContent: 'flex-end',
                                     marginTop: 'auto',
                                     gap: 10,
-                                }, children: [!hideDeleteButton && !isHorizontalView && dashboardItem && ((0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { onClick: deleteChart, label: 'Delete' })), !hideSubmitButton && ((0, jsx_runtime_1.jsx)(ButtonComponent, { onClick: () => editChart(), label: buttonLabel
+                                }, children: [!hideDeleteButton && !isHorizontalView && report && ((0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { onClick: deleteChart, label: 'Delete' })), !hideSubmitButton && ((0, jsx_runtime_1.jsx)(ButtonComponent, { onClick: () => editChart(), label: buttonLabel
                                             ? buttonLabel
-                                            : dashboardItem
+                                            : report
                                                 ? 'Save changes'
                                                 : 'Add to dashboard' }))] })] }))] }), (0, jsx_runtime_1.jsx)(DashboardFilterModal, { isOpen: showFilterModal, setIsOpen: setShowFilterModal, issues: filterIssues, ButtonComponent: ButtonComponent })] }));
 }