@quillsql/react 2.16.6 → 2.16.8

package/dist/index.cjs

@@ -14416,9 +14416,15 @@ function convertCaseWhenToPivotData(column) {
   return pivot;
 }
 function convertASTToPivotData(ast, columnInfo) {
+  if (!ast) {
+    return null;
+  }
   const newPivot = {};
   const aliasMap = {};
-  if (ast.columns === "*") {
+  if (!ast.columns || ast.columns === "*") {
+    return null;
+  }
+  if (!Array.isArray(ast.columns)) {
     return null;
   }
   ast.columns.forEach((column) => {
@@ -14619,7 +14625,7 @@ var init_reportBuilder = __esm({
         const schemaTable = schema.find((s) => s.name === table.name);
         return schemaTable ? schemaTable.columns : [];
       });
-      const pivot = astGroupByToPivot(ast.groupby, relevantColumns);
+      const pivot = astGroupByToPivot(ast, relevantColumns);
       const sort = astOrderByToSort(ast.orderby);
       const limit = astLimitToLimit(ast.limit);
       const filterStack = generateFilterStack(
@@ -14646,11 +14652,11 @@ var init_reportBuilder = __esm({
         };
       });
     };
-    astGroupByToPivot = (node, columnInfo) => {
-      if (!node) {
+    astGroupByToPivot = (ast, columnInfo) => {
+      if (!ast || !ast.groupby) {
         return null;
       }
-      return convertASTToPivotData(node, columnInfo);
+      return convertASTToPivotData(ast, columnInfo);
     };
     astFromToTables = (node) => {
       if (!node) {
@@ -24740,25 +24746,58 @@ var import_react5 = __toESM(require("react"), 1);
 var import_recharts = require("recharts");
 
 // src/utils/color.ts
+var DEFAULT_GRADIENT_COLORS = [
+  "#4E80EE",
+  // vivid indigo
+  "#586FF4",
+  "#6464FA",
+  "#715AFE",
+  "#8450FF",
+  "#9B48FF",
+  "#B33FFF",
+  "#CA37F3",
+  "#DE2FE1",
+  "#F028CB",
+  "#FF20B5"
+];
 function generateArrayFromColor(colors, length) {
+  if (length <= 0) {
+    return [];
+  }
   if (typeof colors === "string") {
-    return monochromaticInterpolation(colors, length);
+    const trimmedColor = colors.trim();
+    return monochromaticInterpolation(
+      trimmedColor.length > 0 ? trimmedColor : DEFAULT_GRADIENT_COLORS[0],
+      length
+    );
+  }
+  const normalizedColors = colors.filter((color2) => typeof color2 === "string").map((color2) => color2.trim()).filter((color2) => color2.length > 0);
+  const baseColors = normalizedColors.length > 0 ? normalizedColors : DEFAULT_GRADIENT_COLORS;
+  if (baseColors.length === 1) {
+    return monochromaticInterpolation(baseColors[0], length);
   }
-  if (colors.length === 1) {
-    return monochromaticInterpolation(colors[0], length);
+  if (length <= baseColors.length) {
+    return baseColors.slice(0, length);
   }
-  const pairs = colors.length - 1;
-  const needed = length - colors.length;
+  const pairs = baseColors.length - 1;
+  if (pairs <= 0) {
+    return [baseColors[0]];
+  }
+  const needed = length - baseColors.length;
   const baseAmount = Math.floor(needed / pairs);
   const extras = needed % pairs;
   let result = [];
   let i = 0;
   let j = 1;
-  while (j < colors.length) {
+  while (j < baseColors.length) {
     const additional = i < extras ? 1 : 0;
     const interpLength = 2 + baseAmount + additional;
-    const interp = interpolateBetween(colors[i], colors[j], interpLength);
-    const lastIndex = j === colors.length - 1 ? void 0 : -1;
+    const interp = interpolateBetween(
+      baseColors[i],
+      baseColors[j],
+      interpLength
+    );
+    const lastIndex = j === baseColors.length - 1 ? void 0 : -1;
     result = result.concat(interp.slice(0, lastIndex));
     i++;
     j++;
@@ -25082,8 +25121,9 @@ var parseData2 = (data, colors, categoryKey, valueKey) => {
     dataPoint[valueKey] = totalValue ? rawValue * 100 / totalValue : data.length > maxItems ? 100 / (maxItems + 1) : 100 / slicedData.length;
     dataPoint[`raw_${valueKey}`] = parseFloat(rawValue.toFixed(2));
   });
+  const palette = colors.length >= maxItems ? colors.slice(0, maxItems) : generateArrayFromColor(colors, maxItems);
   const parsedData = slicedData.map((dataPoint, idx) => {
-    const baseColor = idx < colors.length ? colors[idx] : colors[colors.length - 1];
+    const baseColor = palette[idx % palette.length];
     return {
       ...dataPoint,
       color: baseColor,
@@ -25101,7 +25141,7 @@ var parseData2 = (data, colors, categoryKey, valueKey) => {
       ),
       0
     );
-    const otherColor = colors[colors.length - 1];
+    const otherColor = palette[parsedData.length % palette.length] ?? palette[palette.length - 1];
     const normalizedOtherSum = totalValue ? otherSum * 100 / totalValue : 100 / (maxItems + 1);
     parsedData.push({
       [categoryKey]: "Other",
@@ -25474,7 +25514,7 @@ var PieChartWrapper = import_react5.default.forwardRef(
                     (colorMap[category] && colorMap[category]["primary"] && generateArrayFromColor(
                       colorMap[category]["primary"],
                       data.length
-                    )) ?? (colors.length >= data.length ? colors : generateArrayFromColor(colors.slice(0, 2), data.length)),
+                    )) ?? (colors.length >= data.length ? colors : generateArrayFromColor(colors, data.length)),
                     index,
                     category
                   ),
@@ -31807,7 +31847,16 @@ var MetricDisplay = ({
                   marginRight: "auto"
                 },
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { children }),
+                  /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+                    "div",
+                    {
+                      style: {
+                        display: "inline-block",
+                        lineHeight: 1.1
+                      },
+                      children
+                    }
+                  ),
                   dateFilter?.comparison && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
                     "span",
                     {
@@ -31836,13 +31885,15 @@ var MetricDisplay = ({
                 },
                 children: [
                   /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
-                    "span",
+                    "div",
                     {
                       style: {
                         fontSize: 28,
                         fontWeight: "500",
                         fontFamily: theme?.fontFamily,
-                        color: theme?.secondaryTextColor
+                        color: theme?.secondaryTextColor,
+                        display: "inline-block",
+                        lineHeight: 1.1
                       },
                       children
                     }
@@ -39240,6 +39291,7 @@ var PivotCard = ({
 }) => {
   const defaultValueField = pivotTable.pivot && pivotTable.pivot.aggregationType === "count" ? "whole_number" : "two_decimal_places";
   const maxRowsInPivotPeak = 5;
+  const headerColumnCount = (pivotTable.pivot?.rowField ? 1 : 0) + (pivotTable.pivot?.columnField ? 1 : 0) + (!pivotTable.pivot?.columnField && pivotTable.pivot?.aggregations?.[0]?.valueField ? 1 : 0);
   return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
     CardComponent,
     {
@@ -39343,16 +39395,16 @@ var PivotCard = ({
                     pivotTable.pivot.aggregations?.[0]?.valueField
                   )
                 ] }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("tbody", { children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
                   "tr",
                   {
                     style: {
                       paddingLeft: "2px",
                       width: "100%"
                     },
-                    children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(TextComponent, { label: "No results" })
+                    children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("td", { colSpan: headerColumnCount || 1, children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(TextComponent, { label: "No results" }) })
                   }
-                )
+                ) })
               ] }) : /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("table", { children: [
                 /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("tr", { children: pivotTable.columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
                   "th",
@@ -40714,7 +40766,7 @@ var PivotModal = ({
                                                 {
                                                   id: "pivot-row-field",
                                                   label: "Group rows by",
-                                                  value: pivotRowField,
+                                                  value: pivotRowField ?? "",
                                                   onChange: (e) => {
                                                     pivotFieldChange(
                                                       "rowField",
@@ -40741,7 +40793,7 @@ var PivotModal = ({
                                                 {
                                                   id: "pivot-column-field",
                                                   label: "Group columns by",
-                                                  value: pivotColumnField,
+                                                  value: pivotColumnField ?? "",
                                                   onChange: (e) => {
                                                     pivotFieldChange(
                                                       "columnField",
@@ -40786,7 +40838,7 @@ var PivotModal = ({
                                                 SelectComponent,
                                                 {
                                                   id: "pivot-aggregation-type",
-                                                  value: agg.aggregationType,
+                                                  value: agg.aggregationType ?? "",
                                                   onChange: (e) => {
                                                     const newAgg = [
                                                       ...pivotAggregations.slice(0, index),
@@ -40818,7 +40870,7 @@ var PivotModal = ({
                                                 SelectComponent,
                                                 {
                                                   id: "pivot-value-field",
-                                                  value: agg.valueField,
+                                                  value: agg.valueField ?? "",
                                                   onChange: (e) => {
                                                     const newAgg = [
                                                       ...pivotAggregations.slice(0, index),
@@ -42433,7 +42485,7 @@ var CHART_TO_LABELS = {
   column: { xAxisLabel: "X-Axis", yAxisLabel: "Y-Axis" },
   line: { xAxisLabel: "X-Axis", yAxisLabel: "Y-Axis" },
   table: {},
-  metric: {},
+  metric: { xAxisLabel: "Value" },
   bar: { xAxisLabel: "X-Axis", yAxisLabel: "Y-Axis" },
   stacked: { xAxisLabel: "X-Axis", yAxisLabel: "Y-Axis" },
   pie: { xAxisLabel: "Category", yAxisLabel: "Count" },
@@ -42863,7 +42915,7 @@ function ChartBuilder({
     }
     return columns2;
   };
-  const [processedColumns, setProcessedColumns] = (0, import_react44.useState)(
+  const [columns, setColumns] = (0, import_react44.useState)(
     processColumns(report?.columnInternal ?? [])
   );
   const [currentPage, setCurrentPage] = (0, import_react44.useState)(0);
@@ -42977,7 +43029,6 @@ function ChartBuilder({
     pivotQuery: report.pivotQuery ?? "",
     comparisonPivotQuery: report.comparisonPivotQuery
   } : void 0;
-  const columns = report?.columnInternal ?? [];
   const destinationDashboardName = report?.dashboardName || destinationDashboard;
   const query = report?.queryString;
   const [loadingFormData, setLoadingFormData] = (0, import_react44.useState)(false);
@@ -43529,6 +43580,26 @@ function ChartBuilder({
     ) ?? {};
   }, [client?.allTenantTypes]);
   const [selectedPivotTable, setSelectedPivotTable] = (0, import_react44.useState)(pivotData);
+  const getDefaultXAxisFormat = (0, import_react44.useCallback)(
+    (form) => {
+      if (form.pivot?.rowField) {
+        if (isDateField(form.pivot.rowFieldType ?? "")) {
+          return "string";
+        }
+        const pivotRowColumn = selectedPivotTable?.columns?.find(
+          (col) => col.field === form.pivot?.rowField
+        ) ?? columns.find((col) => col.field === form.pivot?.rowField);
+        if (pivotRowColumn?.format) {
+          return pivotRowColumn.format;
+        }
+      }
+      const currentXAxisColumn = (selectedPivotTable?.columns ?? columns).find(
+        (c) => c.field === form.xAxisField
+      );
+      return currentXAxisColumn?.format ?? "string";
+    },
+    [columns, selectedPivotTable]
+  );
   const pivotCardTable = (0, import_react44.useMemo)(() => {
     return {
       pivot: formData.pivot,
@@ -43745,7 +43816,8 @@ function ChartBuilder({
       });
       setCurrentProcessing(processing);
       setRows(tableInfo.rows);
-      setProcessedColumns(processColumns(tableInfo.columns));
+      const updatedColumns = processColumns(tableInfo.columns);
+      setColumns(updatedColumns);
       if (tableInfo.itemQuery) {
         setItemQuery(tableInfo.itemQuery);
       }
@@ -43962,6 +44034,7 @@ function ChartBuilder({
         updatedForm = { ...updatedForm, [fieldName]: value };
       }
       if (fieldName === "chartType") {
+        const previousChartType = formData.chartType;
         if (value === "metric") {
           updatedForm.xAxisFormat = "whole_number";
           const currentXAxisColumn = (selectedPivotTable?.columns ?? columns).find((c) => c.field === updatedForm.xAxisField);
@@ -43978,6 +44051,16 @@ function ChartBuilder({
               (c) => NUMBER_FORMAT_TYPES.includes(c.format)
             )?.field ?? updatedForm.xAxisField;
           }
+        } else {
+          if (previousChartType === "gauge" && updatedForm.xAxisFormat === "percent") {
+            updatedForm.xAxisFormat = getDefaultXAxisFormat(updatedForm);
+          }
+          if (previousChartType === "metric" && updatedForm.xAxisFormat === "whole_number") {
+            updatedForm.xAxisFormat = getDefaultXAxisFormat(updatedForm);
+          }
+          if (previousChartType === "gauge" && updatedForm.pivot?.rowField && updatedForm.xAxisField !== updatedForm.pivot.rowField) {
+            updatedForm.xAxisField = updatedForm.pivot.rowField;
+          }
         }
       }
       let dashboardName = updatedForm.dashboardName;
@@ -44680,7 +44763,7 @@ function ChartBuilder({
                                       setShowUpdatePivot: setIsEdittingPivot,
                                       parentRef,
                                       data: rows,
-                                      columns: processedColumns,
+                                      columns,
                                       triggerButtonText: "Add pivot +",
                                       selectedPivotIndex,
                                       setSelectedPivotIndex,
@@ -44754,7 +44837,7 @@ function ChartBuilder({
                           ]
                         }
                       ),
-                      !hideChartView && (formData.pivot || formData.chartType !== "table" && formData.chartType !== "metric") && /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { children: [
+                      !hideChartView && (formData.pivot || formData.chartType !== "table") && /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { children: [
                         CHART_TO_LABELS[formData.chartType]?.xAxisLabel && /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
                           "div",
                           {
@@ -46321,6 +46404,166 @@ function setEditorTheme(_editor, monaco, schema, databaseType, clientName, event
     return null;
   }
 }
+function reconcileReportWithColumns(report, columns, previousReport) {
+  const safeColumns = columns ?? [];
+  const fallbackForm = createInitialFormData(safeColumns);
+  const columnFieldSet = new Set(
+    safeColumns.map((column) => column.field).filter(Boolean)
+  );
+  const previousColumnsByField = new Map(
+    (previousReport?.columns ?? []).map((column) => [column.field, column])
+  );
+  const previousColumnInternalByField = new Map(
+    (previousReport?.columnInternal ?? []).map((column) => [
+      column.field,
+      column
+    ])
+  );
+  const existingColumnsByField = new Map(
+    (report.columns ?? []).map((column) => [column.field, column])
+  );
+  const existingColumnInternalByField = new Map(
+    (report.columnInternal ?? []).map((column) => [column.field, column])
+  );
+  const reconciledColumnInternal = safeColumns.map((column) => {
+    const fallback = existingColumnInternalByField.get(column.field) ?? previousColumnInternalByField.get(column.field) ?? existingColumnsByField.get(column.field) ?? previousColumnsByField.get(column.field);
+    return {
+      ...column,
+      format: fallback?.format ?? column.format,
+      label: fallback?.label ?? column.label
+    };
+  });
+  const reconciledColumns = reconciledColumnInternal.map((column) => ({
+    field: column.field,
+    label: column.label,
+    format: column.format
+  }));
+  const resolveXAxisField = () => {
+    if (report.xAxisField && columnFieldSet.has(report.xAxisField)) {
+      return report.xAxisField;
+    }
+    if (previousReport?.xAxisField && columnFieldSet.has(previousReport.xAxisField)) {
+      return previousReport.xAxisField;
+    }
+    return fallbackForm.xAxisField;
+  };
+  const xAxisField = resolveXAxisField();
+  const xAxisColumn = reconciledColumnInternal.find(
+    (column) => column.field === xAxisField
+  );
+  const xAxisFormat = (report.xAxisField === xAxisField ? report.xAxisFormat : void 0) ?? (previousReport?.xAxisField === xAxisField ? previousReport.xAxisFormat : void 0) ?? xAxisColumn?.format ?? fallbackForm.xAxisFormat ?? "string";
+  const xAxisLabel = report.xAxisField === xAxisField ? report.xAxisLabel : previousReport?.xAxisField === xAxisField ? previousReport.xAxisLabel : fallbackForm.xAxisLabel ?? "";
+  const existingYAxisFields = report.yAxisFields ?? previousReport?.yAxisFields ?? [];
+  let yAxisFields = existingYAxisFields.filter((axis) => axis?.field && columnFieldSet.has(axis.field)).map((axis) => {
+    const column = reconciledColumnInternal.find(
+      (col) => col.field === axis.field
+    );
+    return {
+      field: axis.field,
+      label: axis.label,
+      format: axis.format ?? column?.format ?? "string"
+    };
+  });
+  if (yAxisFields.length === 0) {
+    yAxisFields = fallbackForm.yAxisFields;
+  }
+  const existingReferenceLines = report.referenceLines ?? previousReport?.referenceLines ?? [];
+  const referenceLines = existingReferenceLines.filter((line) => {
+    if (line.label === REFERENCE_LINE) {
+      return true;
+    }
+    return typeof line.label === "string" && columnFieldSet.has(line.label);
+  });
+  const existingReferenceLineYValues = report.referenceLineYValues ?? previousReport?.referenceLineYValues ?? [];
+  const referenceLineYValues = existingReferenceLineYValues.filter((line) => {
+    if (line.label === REFERENCE_LINE) {
+      return true;
+    }
+    return typeof line.label === "string" && columnFieldSet.has(line.label);
+  });
+  const existingColumnsWithCustomFields = report.columnsWithCustomFields ?? previousReport?.columnsWithCustomFields ?? [];
+  const columnsWithCustomFields = existingColumnsWithCustomFields.filter(
+    (column) => columnFieldSet.has(column.field)
+  );
+  const existingFilterMap = report.filterMap ?? previousReport?.filterMap;
+  const filterMap = existingFilterMap ? Object.fromEntries(
+    Object.entries(existingFilterMap).filter(([, value]) => {
+      return value.field && columnFieldSet.has(value.field);
+    })
+  ) : existingFilterMap;
+  const existingFiltersApplied = report.filtersApplied ?? previousReport?.filtersApplied;
+  const filtersApplied = existingFiltersApplied ? existingFiltersApplied.filter((filter) => {
+    if (!filter.field) {
+      return true;
+    }
+    return columnFieldSet.has(filter.field);
+  }) : existingFiltersApplied;
+  const existingSort = report.sort ?? previousReport?.sort;
+  const sort = existingSort && columnFieldSet.has(existingSort.field) ? existingSort : void 0;
+  let pivot = report.pivot ?? previousReport?.pivot ?? null;
+  if (pivot) {
+    const pivotFields = [];
+    if (pivot.rowField) {
+      pivotFields.push(pivot.rowField);
+    }
+    if (pivot.columnField) {
+      pivotFields.push(pivot.columnField);
+    }
+    if ("aggregations" in pivot && Array.isArray(pivot.aggregations)) {
+      pivot.aggregations.forEach((aggregation) => {
+        if (aggregation.valueField) {
+          pivotFields.push(aggregation.valueField);
+        }
+        if (aggregation.valueField2) {
+          pivotFields.push(aggregation.valueField2);
+        }
+      });
+    } else {
+      const singleAggregation = pivot;
+      if (singleAggregation.valueField) {
+        pivotFields.push(singleAggregation.valueField);
+      }
+      if (singleAggregation.valueField2) {
+        pivotFields.push(singleAggregation.valueField2);
+      }
+    }
+    if (pivot.sortField) {
+      pivotFields.push(pivot.sortField);
+    }
+    const missingPivotField = pivotFields.some(
+      (field) => field && !columnFieldSet.has(field)
+    );
+    if (missingPivotField) {
+      pivot = null;
+    }
+  }
+  const pivotColumns = pivot ? (report.pivotColumns ?? previousReport?.pivotColumns)?.filter(
+    (column) => columnFieldSet.has(column.field)
+  ) : void 0;
+  const pivotRows = pivot ? report.pivotRows ?? previousReport?.pivotRows : void 0;
+  const pivotRowCount = pivot ? report.pivotRowCount ?? previousReport?.pivotRowCount : void 0;
+  return {
+    ...report,
+    columns: reconciledColumns,
+    columnInternal: reconciledColumnInternal,
+    columnsWithCustomFields,
+    xAxisField,
+    xAxisFormat,
+    xAxisLabel,
+    yAxisFields,
+    referenceLines,
+    referenceLineYValues: referenceLineYValues.length ? referenceLineYValues : void 0,
+    filterMap: filterMap && Object.keys(filterMap).length ? filterMap : void 0,
+    filtersApplied: filtersApplied && filtersApplied.length ? filtersApplied : void 0,
+    sort,
+    pivot,
+    pivotColumns,
+    pivotRows,
+    pivotRowCount,
+    pivotQuery: pivot ? report.pivotQuery ?? previousReport?.pivotQuery : void 0,
+    comparisonPivotQuery: pivot ? report.comparisonPivotQuery ?? previousReport?.comparisonPivotQuery : void 0
+  };
+}
 function SQLEditor({
   ButtonComponent = MemoizedButton,
   SecondaryButtonComponent = MemoizedSecondaryButton,
@@ -46699,12 +46942,17 @@ function SQLEditor({
         referencedTables: tableInfo.referencedTables,
         queryString: query ?? tempReport.queryString ?? ""
       };
+      const reconciledReport = reconcileReportWithColumns(
+        newReport,
+        tableInfo.columns ?? [],
+        tempReport
+      );
       if (reportId) {
-        setTempReport(newReport);
+        setTempReport(reconciledReport);
       } else {
         const cleaned = await cleanDashboardItem({
-          item: newReport,
-          dashboardFilters: newReport.filtersApplied,
+          item: reconciledReport,
+          dashboardFilters: reconciledReport.filtersApplied,
           client,
           customFields: schemaData.customFields,
           getToken,

package/dist/index.d.cts

@@ -1483,7 +1483,6 @@ interface TableProps {
     rows?: {
         [key: string]: any;
     }[];
-    autoHide?: boolean;
     /**
      * The columns of the table to show, if any.
      *

package/dist/index.d.ts

@@ -1483,7 +1483,6 @@ interface TableProps {
     rows?: {
         [key: string]: any;
     }[];
-    autoHide?: boolean;
     /**
      * The columns of the table to show, if any.
      *

package/dist/index.js

@@ -14453,9 +14453,15 @@ function convertCaseWhenToPivotData(column) {
   return pivot;
 }
 function convertASTToPivotData(ast, columnInfo) {
+  if (!ast) {
+    return null;
+  }
   const newPivot = {};
   const aliasMap = {};
-  if (ast.columns === "*") {
+  if (!ast.columns || ast.columns === "*") {
+    return null;
+  }
+  if (!Array.isArray(ast.columns)) {
     return null;
   }
   ast.columns.forEach((column) => {
@@ -14656,7 +14662,7 @@ var init_reportBuilder = __esm({
         const schemaTable = schema.find((s) => s.name === table.name);
         return schemaTable ? schemaTable.columns : [];
       });
-      const pivot = astGroupByToPivot(ast.groupby, relevantColumns);
+      const pivot = astGroupByToPivot(ast, relevantColumns);
       const sort = astOrderByToSort(ast.orderby);
       const limit = astLimitToLimit(ast.limit);
       const filterStack = generateFilterStack(
@@ -14683,11 +14689,11 @@ var init_reportBuilder = __esm({
         };
       });
     };
-    astGroupByToPivot = (node, columnInfo) => {
-      if (!node) {
+    astGroupByToPivot = (ast, columnInfo) => {
+      if (!ast || !ast.groupby) {
         return null;
       }
-      return convertASTToPivotData(node, columnInfo);
+      return convertASTToPivotData(ast, columnInfo);
     };
     astFromToTables = (node) => {
       if (!node) {
@@ -24754,25 +24760,58 @@ import React3 from "react";
 import { Pie, PieChart, ResponsiveContainer, Tooltip } from "recharts";
 
 // src/utils/color.ts
+var DEFAULT_GRADIENT_COLORS = [
+  "#4E80EE",
+  // vivid indigo
+  "#586FF4",
+  "#6464FA",
+  "#715AFE",
+  "#8450FF",
+  "#9B48FF",
+  "#B33FFF",
+  "#CA37F3",
+  "#DE2FE1",
+  "#F028CB",
+  "#FF20B5"
+];
 function generateArrayFromColor(colors, length) {
+  if (length <= 0) {
+    return [];
+  }
   if (typeof colors === "string") {
-    return monochromaticInterpolation(colors, length);
+    const trimmedColor = colors.trim();
+    return monochromaticInterpolation(
+      trimmedColor.length > 0 ? trimmedColor : DEFAULT_GRADIENT_COLORS[0],
+      length
+    );
+  }
+  const normalizedColors = colors.filter((color2) => typeof color2 === "string").map((color2) => color2.trim()).filter((color2) => color2.length > 0);
+  const baseColors = normalizedColors.length > 0 ? normalizedColors : DEFAULT_GRADIENT_COLORS;
+  if (baseColors.length === 1) {
+    return monochromaticInterpolation(baseColors[0], length);
   }
-  if (colors.length === 1) {
-    return monochromaticInterpolation(colors[0], length);
+  if (length <= baseColors.length) {
+    return baseColors.slice(0, length);
   }
-  const pairs = colors.length - 1;
-  const needed = length - colors.length;
+  const pairs = baseColors.length - 1;
+  if (pairs <= 0) {
+    return [baseColors[0]];
+  }
+  const needed = length - baseColors.length;
   const baseAmount = Math.floor(needed / pairs);
   const extras = needed % pairs;
   let result = [];
   let i = 0;
   let j = 1;
-  while (j < colors.length) {
+  while (j < baseColors.length) {
     const additional = i < extras ? 1 : 0;
     const interpLength = 2 + baseAmount + additional;
-    const interp = interpolateBetween(colors[i], colors[j], interpLength);
-    const lastIndex = j === colors.length - 1 ? void 0 : -1;
+    const interp = interpolateBetween(
+      baseColors[i],
+      baseColors[j],
+      interpLength
+    );
+    const lastIndex = j === baseColors.length - 1 ? void 0 : -1;
     result = result.concat(interp.slice(0, lastIndex));
     i++;
     j++;
@@ -25096,8 +25135,9 @@ var parseData2 = (data, colors, categoryKey, valueKey) => {
     dataPoint[valueKey] = totalValue ? rawValue * 100 / totalValue : data.length > maxItems ? 100 / (maxItems + 1) : 100 / slicedData.length;
     dataPoint[`raw_${valueKey}`] = parseFloat(rawValue.toFixed(2));
   });
+  const palette = colors.length >= maxItems ? colors.slice(0, maxItems) : generateArrayFromColor(colors, maxItems);
   const parsedData = slicedData.map((dataPoint, idx) => {
-    const baseColor = idx < colors.length ? colors[idx] : colors[colors.length - 1];
+    const baseColor = palette[idx % palette.length];
     return {
       ...dataPoint,
       color: baseColor,
@@ -25115,7 +25155,7 @@ var parseData2 = (data, colors, categoryKey, valueKey) => {
       ),
       0
     );
-    const otherColor = colors[colors.length - 1];
+    const otherColor = palette[parsedData.length % palette.length] ?? palette[palette.length - 1];
     const normalizedOtherSum = totalValue ? otherSum * 100 / totalValue : 100 / (maxItems + 1);
     parsedData.push({
       [categoryKey]: "Other",
@@ -25488,7 +25528,7 @@ var PieChartWrapper = React3.forwardRef(
                     (colorMap[category] && colorMap[category]["primary"] && generateArrayFromColor(
                       colorMap[category]["primary"],
                       data.length
-                    )) ?? (colors.length >= data.length ? colors : generateArrayFromColor(colors.slice(0, 2), data.length)),
+                    )) ?? (colors.length >= data.length ? colors : generateArrayFromColor(colors, data.length)),
                     index,
                     category
                   ),
@@ -31887,7 +31927,16 @@ var MetricDisplay = ({
                   marginRight: "auto"
                 },
                 children: [
-                  /* @__PURE__ */ jsx43("span", { children }),
+                  /* @__PURE__ */ jsx43(
+                    "div",
+                    {
+                      style: {
+                        display: "inline-block",
+                        lineHeight: 1.1
+                      },
+                      children
+                    }
+                  ),
                   dateFilter?.comparison && /* @__PURE__ */ jsx43(
                     "span",
                     {
@@ -31916,13 +31965,15 @@ var MetricDisplay = ({
                 },
                 children: [
                   /* @__PURE__ */ jsx43(
-                    "span",
+                    "div",
                     {
                       style: {
                         fontSize: 28,
                         fontWeight: "500",
                         fontFamily: theme?.fontFamily,
-                        color: theme?.secondaryTextColor
+                        color: theme?.secondaryTextColor,
+                        display: "inline-block",
+                        lineHeight: 1.1
                       },
                       children
                     }
@@ -39224,7 +39275,7 @@ import {
   useEffect as useEffect25,
   useRef as useRef19,
   useMemo as useMemo22,
-  useCallback as useCallback3
+  useCallback as useCallback4
 } from "react";
 import MonacoEditor from "@monaco-editor/react";
 
@@ -39234,7 +39285,8 @@ import {
   useRef as useRef18,
   useState as useState29,
   useContext as useContext26,
-  useMemo as useMemo21
+  useMemo as useMemo21,
+  useCallback as useCallback3
 } from "react";
 import {
   closestCenter,
@@ -39370,6 +39422,7 @@ var PivotCard = ({
 }) => {
   const defaultValueField = pivotTable.pivot && pivotTable.pivot.aggregationType === "count" ? "whole_number" : "two_decimal_places";
   const maxRowsInPivotPeak = 5;
+  const headerColumnCount = (pivotTable.pivot?.rowField ? 1 : 0) + (pivotTable.pivot?.columnField ? 1 : 0) + (!pivotTable.pivot?.columnField && pivotTable.pivot?.aggregations?.[0]?.valueField ? 1 : 0);
   return /* @__PURE__ */ jsx61(
     CardComponent,
     {
@@ -39473,16 +39526,16 @@ var PivotCard = ({
                     pivotTable.pivot.aggregations?.[0]?.valueField
                   )
                 ] }) }),
-                /* @__PURE__ */ jsx61(
+                /* @__PURE__ */ jsx61("tbody", { children: /* @__PURE__ */ jsx61(
                   "tr",
                   {
                     style: {
                       paddingLeft: "2px",
                       width: "100%"
                     },
-                    children: /* @__PURE__ */ jsx61(TextComponent, { label: "No results" })
+                    children: /* @__PURE__ */ jsx61("td", { colSpan: headerColumnCount || 1, children: /* @__PURE__ */ jsx61(TextComponent, { label: "No results" }) })
                   }
-                )
+                ) })
               ] }) : /* @__PURE__ */ jsxs43("table", { children: [
                 /* @__PURE__ */ jsx61("thead", { children: /* @__PURE__ */ jsx61("tr", { children: pivotTable.columns.map((column) => /* @__PURE__ */ jsx61(
                   "th",
@@ -40852,7 +40905,7 @@ var PivotModal = ({
                                                 {
                                                   id: "pivot-row-field",
                                                   label: "Group rows by",
-                                                  value: pivotRowField,
+                                                  value: pivotRowField ?? "",
                                                   onChange: (e) => {
                                                     pivotFieldChange(
                                                       "rowField",
@@ -40879,7 +40932,7 @@ var PivotModal = ({
                                                 {
                                                   id: "pivot-column-field",
                                                   label: "Group columns by",
-                                                  value: pivotColumnField,
+                                                  value: pivotColumnField ?? "",
                                                   onChange: (e) => {
                                                     pivotFieldChange(
                                                       "columnField",
@@ -40924,7 +40977,7 @@ var PivotModal = ({
                                                 SelectComponent,
                                                 {
                                                   id: "pivot-aggregation-type",
-                                                  value: agg.aggregationType,
+                                                  value: agg.aggregationType ?? "",
                                                   onChange: (e) => {
                                                     const newAgg = [
                                                       ...pivotAggregations.slice(0, index),
@@ -40956,7 +41009,7 @@ var PivotModal = ({
                                                 SelectComponent,
                                                 {
                                                   id: "pivot-value-field",
-                                                  value: agg.valueField,
+                                                  value: agg.valueField ?? "",
                                                   onChange: (e) => {
                                                     const newAgg = [
                                                       ...pivotAggregations.slice(0, index),
@@ -42583,7 +42636,7 @@ var CHART_TO_LABELS = {
   column: { xAxisLabel: "X-Axis", yAxisLabel: "Y-Axis" },
   line: { xAxisLabel: "X-Axis", yAxisLabel: "Y-Axis" },
   table: {},
-  metric: {},
+  metric: { xAxisLabel: "Value" },
   bar: { xAxisLabel: "X-Axis", yAxisLabel: "Y-Axis" },
   stacked: { xAxisLabel: "X-Axis", yAxisLabel: "Y-Axis" },
   pie: { xAxisLabel: "Category", yAxisLabel: "Count" },
@@ -43013,7 +43066,7 @@ function ChartBuilder({
     }
     return columns2;
   };
-  const [processedColumns, setProcessedColumns] = useState29(
+  const [columns, setColumns] = useState29(
     processColumns(report?.columnInternal ?? [])
   );
   const [currentPage, setCurrentPage] = useState29(0);
@@ -43127,7 +43180,6 @@ function ChartBuilder({
     pivotQuery: report.pivotQuery ?? "",
     comparisonPivotQuery: report.comparisonPivotQuery
   } : void 0;
-  const columns = report?.columnInternal ?? [];
   const destinationDashboardName = report?.dashboardName || destinationDashboard;
   const query = report?.queryString;
   const [loadingFormData, setLoadingFormData] = useState29(false);
@@ -43679,6 +43731,26 @@ function ChartBuilder({
     ) ?? {};
   }, [client?.allTenantTypes]);
   const [selectedPivotTable, setSelectedPivotTable] = useState29(pivotData);
+  const getDefaultXAxisFormat = useCallback3(
+    (form) => {
+      if (form.pivot?.rowField) {
+        if (isDateField(form.pivot.rowFieldType ?? "")) {
+          return "string";
+        }
+        const pivotRowColumn = selectedPivotTable?.columns?.find(
+          (col) => col.field === form.pivot?.rowField
+        ) ?? columns.find((col) => col.field === form.pivot?.rowField);
+        if (pivotRowColumn?.format) {
+          return pivotRowColumn.format;
+        }
+      }
+      const currentXAxisColumn = (selectedPivotTable?.columns ?? columns).find(
+        (c) => c.field === form.xAxisField
+      );
+      return currentXAxisColumn?.format ?? "string";
+    },
+    [columns, selectedPivotTable]
+  );
   const pivotCardTable = useMemo21(() => {
     return {
       pivot: formData.pivot,
@@ -43895,7 +43967,8 @@ function ChartBuilder({
       });
       setCurrentProcessing(processing);
       setRows(tableInfo.rows);
-      setProcessedColumns(processColumns(tableInfo.columns));
+      const updatedColumns = processColumns(tableInfo.columns);
+      setColumns(updatedColumns);
       if (tableInfo.itemQuery) {
         setItemQuery(tableInfo.itemQuery);
       }
@@ -44112,6 +44185,7 @@ function ChartBuilder({
         updatedForm = { ...updatedForm, [fieldName]: value };
       }
       if (fieldName === "chartType") {
+        const previousChartType = formData.chartType;
         if (value === "metric") {
           updatedForm.xAxisFormat = "whole_number";
           const currentXAxisColumn = (selectedPivotTable?.columns ?? columns).find((c) => c.field === updatedForm.xAxisField);
@@ -44128,6 +44202,16 @@ function ChartBuilder({
               (c) => NUMBER_FORMAT_TYPES.includes(c.format)
             )?.field ?? updatedForm.xAxisField;
           }
+        } else {
+          if (previousChartType === "gauge" && updatedForm.xAxisFormat === "percent") {
+            updatedForm.xAxisFormat = getDefaultXAxisFormat(updatedForm);
+          }
+          if (previousChartType === "metric" && updatedForm.xAxisFormat === "whole_number") {
+            updatedForm.xAxisFormat = getDefaultXAxisFormat(updatedForm);
+          }
+          if (previousChartType === "gauge" && updatedForm.pivot?.rowField && updatedForm.xAxisField !== updatedForm.pivot.rowField) {
+            updatedForm.xAxisField = updatedForm.pivot.rowField;
+          }
         }
       }
       let dashboardName = updatedForm.dashboardName;
@@ -44830,7 +44914,7 @@ function ChartBuilder({
                                       setShowUpdatePivot: setIsEdittingPivot,
                                       parentRef,
                                       data: rows,
-                                      columns: processedColumns,
+                                      columns,
                                       triggerButtonText: "Add pivot +",
                                       selectedPivotIndex,
                                       setSelectedPivotIndex,
@@ -44904,7 +44988,7 @@ function ChartBuilder({
                           ]
                         }
                       ),
-                      !hideChartView && (formData.pivot || formData.chartType !== "table" && formData.chartType !== "metric") && /* @__PURE__ */ jsxs47("div", { children: [
+                      !hideChartView && (formData.pivot || formData.chartType !== "table") && /* @__PURE__ */ jsxs47("div", { children: [
                         CHART_TO_LABELS[formData.chartType]?.xAxisLabel && /* @__PURE__ */ jsx65(
                           "div",
                           {
@@ -46471,6 +46555,166 @@ function setEditorTheme(_editor, monaco, schema, databaseType, clientName, event
     return null;
   }
 }
+function reconcileReportWithColumns(report, columns, previousReport) {
+  const safeColumns = columns ?? [];
+  const fallbackForm = createInitialFormData(safeColumns);
+  const columnFieldSet = new Set(
+    safeColumns.map((column) => column.field).filter(Boolean)
+  );
+  const previousColumnsByField = new Map(
+    (previousReport?.columns ?? []).map((column) => [column.field, column])
+  );
+  const previousColumnInternalByField = new Map(
+    (previousReport?.columnInternal ?? []).map((column) => [
+      column.field,
+      column
+    ])
+  );
+  const existingColumnsByField = new Map(
+    (report.columns ?? []).map((column) => [column.field, column])
+  );
+  const existingColumnInternalByField = new Map(
+    (report.columnInternal ?? []).map((column) => [column.field, column])
+  );
+  const reconciledColumnInternal = safeColumns.map((column) => {
+    const fallback = existingColumnInternalByField.get(column.field) ?? previousColumnInternalByField.get(column.field) ?? existingColumnsByField.get(column.field) ?? previousColumnsByField.get(column.field);
+    return {
+      ...column,
+      format: fallback?.format ?? column.format,
+      label: fallback?.label ?? column.label
+    };
+  });
+  const reconciledColumns = reconciledColumnInternal.map((column) => ({
+    field: column.field,
+    label: column.label,
+    format: column.format
+  }));
+  const resolveXAxisField = () => {
+    if (report.xAxisField && columnFieldSet.has(report.xAxisField)) {
+      return report.xAxisField;
+    }
+    if (previousReport?.xAxisField && columnFieldSet.has(previousReport.xAxisField)) {
+      return previousReport.xAxisField;
+    }
+    return fallbackForm.xAxisField;
+  };
+  const xAxisField = resolveXAxisField();
+  const xAxisColumn = reconciledColumnInternal.find(
+    (column) => column.field === xAxisField
+  );
+  const xAxisFormat = (report.xAxisField === xAxisField ? report.xAxisFormat : void 0) ?? (previousReport?.xAxisField === xAxisField ? previousReport.xAxisFormat : void 0) ?? xAxisColumn?.format ?? fallbackForm.xAxisFormat ?? "string";
+  const xAxisLabel = report.xAxisField === xAxisField ? report.xAxisLabel : previousReport?.xAxisField === xAxisField ? previousReport.xAxisLabel : fallbackForm.xAxisLabel ?? "";
+  const existingYAxisFields = report.yAxisFields ?? previousReport?.yAxisFields ?? [];
+  let yAxisFields = existingYAxisFields.filter((axis) => axis?.field && columnFieldSet.has(axis.field)).map((axis) => {
+    const column = reconciledColumnInternal.find(
+      (col) => col.field === axis.field
+    );
+    return {
+      field: axis.field,
+      label: axis.label,
+      format: axis.format ?? column?.format ?? "string"
+    };
+  });
+  if (yAxisFields.length === 0) {
+    yAxisFields = fallbackForm.yAxisFields;
+  }
+  const existingReferenceLines = report.referenceLines ?? previousReport?.referenceLines ?? [];
+  const referenceLines = existingReferenceLines.filter((line) => {
+    if (line.label === REFERENCE_LINE) {
+      return true;
+    }
+    return typeof line.label === "string" && columnFieldSet.has(line.label);
+  });
+  const existingReferenceLineYValues = report.referenceLineYValues ?? previousReport?.referenceLineYValues ?? [];
+  const referenceLineYValues = existingReferenceLineYValues.filter((line) => {
+    if (line.label === REFERENCE_LINE) {
+      return true;
+    }
+    return typeof line.label === "string" && columnFieldSet.has(line.label);
+  });
+  const existingColumnsWithCustomFields = report.columnsWithCustomFields ?? previousReport?.columnsWithCustomFields ?? [];
+  const columnsWithCustomFields = existingColumnsWithCustomFields.filter(
+    (column) => columnFieldSet.has(column.field)
+  );
+  const existingFilterMap = report.filterMap ?? previousReport?.filterMap;
+  const filterMap = existingFilterMap ? Object.fromEntries(
+    Object.entries(existingFilterMap).filter(([, value]) => {
+      return value.field && columnFieldSet.has(value.field);
+    })
+  ) : existingFilterMap;
+  const existingFiltersApplied = report.filtersApplied ?? previousReport?.filtersApplied;
+  const filtersApplied = existingFiltersApplied ? existingFiltersApplied.filter((filter) => {
+    if (!filter.field) {
+      return true;
+    }
+    return columnFieldSet.has(filter.field);
+  }) : existingFiltersApplied;
+  const existingSort = report.sort ?? previousReport?.sort;
+  const sort = existingSort && columnFieldSet.has(existingSort.field) ? existingSort : void 0;
+  let pivot = report.pivot ?? previousReport?.pivot ?? null;
+  if (pivot) {
+    const pivotFields = [];
+    if (pivot.rowField) {
+      pivotFields.push(pivot.rowField);
+    }
+    if (pivot.columnField) {
+      pivotFields.push(pivot.columnField);
+    }
+    if ("aggregations" in pivot && Array.isArray(pivot.aggregations)) {
+      pivot.aggregations.forEach((aggregation) => {
+        if (aggregation.valueField) {
+          pivotFields.push(aggregation.valueField);
+        }
+        if (aggregation.valueField2) {
+          pivotFields.push(aggregation.valueField2);
+        }
+      });
+    } else {
+      const singleAggregation = pivot;
+      if (singleAggregation.valueField) {
+        pivotFields.push(singleAggregation.valueField);
+      }
+      if (singleAggregation.valueField2) {
+        pivotFields.push(singleAggregation.valueField2);
+      }
+    }
+    if (pivot.sortField) {
+      pivotFields.push(pivot.sortField);
+    }
+    const missingPivotField = pivotFields.some(
+      (field) => field && !columnFieldSet.has(field)
+    );
+    if (missingPivotField) {
+      pivot = null;
+    }
+  }
+  const pivotColumns = pivot ? (report.pivotColumns ?? previousReport?.pivotColumns)?.filter(
+    (column) => columnFieldSet.has(column.field)
+  ) : void 0;
+  const pivotRows = pivot ? report.pivotRows ?? previousReport?.pivotRows : void 0;
+  const pivotRowCount = pivot ? report.pivotRowCount ?? previousReport?.pivotRowCount : void 0;
+  return {
+    ...report,
+    columns: reconciledColumns,
+    columnInternal: reconciledColumnInternal,
+    columnsWithCustomFields,
+    xAxisField,
+    xAxisFormat,
+    xAxisLabel,
+    yAxisFields,
+    referenceLines,
+    referenceLineYValues: referenceLineYValues.length ? referenceLineYValues : void 0,
+    filterMap: filterMap && Object.keys(filterMap).length ? filterMap : void 0,
+    filtersApplied: filtersApplied && filtersApplied.length ? filtersApplied : void 0,
+    sort,
+    pivot,
+    pivotColumns,
+    pivotRows,
+    pivotRowCount,
+    pivotQuery: pivot ? report.pivotQuery ?? previousReport?.pivotQuery : void 0,
+    comparisonPivotQuery: pivot ? report.comparisonPivotQuery ?? previousReport?.comparisonPivotQuery : void 0
+  };
+}
 function SQLEditor({
   ButtonComponent = MemoizedButton,
   SecondaryButtonComponent = MemoizedSecondaryButton,
@@ -46693,7 +46937,7 @@ function SQLEditor({
       onCloseChartBuilder && onCloseChartBuilder();
     }
   }, [isChartBuilderOpen]);
-  const handleRunSqlPrompt = useCallback3(async () => {
+  const handleRunSqlPrompt = useCallback4(async () => {
     if (!client || sqlResponseLoading) {
       return;
     }
@@ -46712,7 +46956,7 @@ function SQLEditor({
     setQuery(resp.message);
     setSqlResponseLoading(false);
   }, [sqlPrompt, sqlResponseLoading]);
-  const debounceRunSqlPrompt = useCallback3(
+  const debounceRunSqlPrompt = useCallback4(
     createDebounce(handleRunSqlPrompt, 500),
     [handleRunSqlPrompt]
   );
@@ -46849,12 +47093,17 @@ function SQLEditor({
         referencedTables: tableInfo.referencedTables,
         queryString: query ?? tempReport.queryString ?? ""
       };
+      const reconciledReport = reconcileReportWithColumns(
+        newReport,
+        tableInfo.columns ?? [],
+        tempReport
+      );
       if (reportId) {
-        setTempReport(newReport);
+        setTempReport(reconciledReport);
       } else {
         const cleaned = await cleanDashboardItem({
-          item: newReport,
-          dashboardFilters: newReport.filtersApplied,
+          item: reconciledReport,
+          dashboardFilters: reconciledReport.filtersApplied,
           client,
           customFields: schemaData.customFields,
           getToken,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quillsql/react",
-  "version": "2.16.6",
+  "version": "2.16.8",
   "type": "module",
   "exports": {
     ".": {