@quillsql/react 2.16.15 → 2.16.17

package/dist/index.cjs

@@ -24292,15 +24292,33 @@ var useDashboard = (dashboardName, config) => {
   const { eventTracking } = (0, import_react2.useContext)(EventTrackingContext);
   const customFiltersRef = (0, import_react2.useRef)(customReportFilters);
   const reportRequestIds = (0, import_react2.useRef)({});
+  const lastDashboardName = (0, import_react2.useRef)(null);
+  const pendingNameChangeReload = (0, import_react2.useRef)(false);
   (0, import_react2.useEffect)(() => {
     customFiltersRef.current = customReportFilters;
   }, [customReportFilters]);
   (0, import_react2.useEffect)(() => {
-    if (!isLoading && !data && initialLoad.current) {
+    const nameChanged = dashboardName !== lastDashboardName.current;
+    if (nameChanged) {
+      lastDashboardName.current = dashboardName ?? null;
+      initialLoad.current = true;
+      fetchedInitialReports.current = false;
+      backfilledDashboards.current = false;
+      reportRequestIds.current = {};
+      pendingNameChangeReload.current = true;
+    }
+    if (!dashboardName) return;
+    if (pendingNameChangeReload.current && data) {
+      pendingNameChangeReload.current = false;
+      initialLoad.current = false;
+      return;
+    }
+    if (pendingNameChangeReload.current && !isLoading && !data && initialLoad.current) {
       initialLoad.current = false;
+      pendingNameChangeReload.current = false;
       reload();
     }
-  }, [isLoading, data]);
+  }, [isLoading, data, dashboardName]);
   (0, import_react2.useEffect)(() => {
     if (backfilledDashboards.current) return;
     if (isLoading || !data) return;
@@ -24310,7 +24328,7 @@ var useDashboard = (dashboardName, config) => {
     if (!needsBackfill) return;
     backfilledDashboards.current = true;
     reload(dashboardName, false);
-  }, [isLoading, data, dashboardFilters, dashboardName, reload]);
+  }, [isLoading, data, dashboardFilters, dashboardName]);
   const { allReportsById } = useAllReports();
   const sections = (0, import_react2.useMemo)(() => {
     if (!data?.sections) return null;
@@ -25868,9 +25886,8 @@ 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 = palette[idx % palette.length];
+    const baseColor = colors.length > 0 ? idx < colors.length ? colors[idx] : colors[colors.length - 1] : "#808080";
     return {
       ...dataPoint,
       color: baseColor,
@@ -25888,7 +25905,7 @@ var parseData2 = (data, colors, categoryKey, valueKey) => {
       ),
       0
     );
-    const otherColor = palette[parsedData.length % palette.length] ?? palette[palette.length - 1];
+    const otherColor = colors.length > 0 ? colors[colors.length - 1] : "#808080";
     const normalizedOtherSum = totalValue ? otherSum * 100 / totalValue : 100 / (maxItems + 1);
     parsedData.push({
       [categoryKey]: "Other",
@@ -26258,10 +26275,18 @@ var PieChartWrapper = import_react5.default.forwardRef(
                 {
                   data: parseData2(
                     data,
-                    (colorMap[category] && colorMap[category]["primary"] && generateArrayFromColor(
-                      colorMap[category]["primary"],
-                      data.length
-                    )) ?? (colors.length >= data.length ? colors : generateArrayFromColor(colors, data.length)),
+                    (() => {
+                      const colorArray = colorMap[category] && colorMap[category]["primary"] && colorMap[category]["primary"] || colors;
+                      const containsCssVars = colorArray.some(
+                        (color2) => typeof color2 === "string" && color2.includes("var(")
+                      );
+                      if (containsCssVars) {
+                        return Array.from({ length: data.length }).map(
+                          (_, idx) => colorArray[idx % colorArray.length] ?? colorArray[colorArray.length - 1] ?? "#808080"
+                        );
+                      }
+                      return colorArray.length >= data.length ? colorArray.slice(0, data.length) : generateArrayFromColor(colorArray, data.length);
+                    })(),
                     index,
                     category
                   ),
@@ -30422,12 +30447,18 @@ function QuillSelectComponent({
         const rect = buttonRef?.current?.getBoundingClientRect();
         if (rect) {
           const viewportHeight = window.innerHeight;
-          const availableHeight = viewportHeight - rect.bottom - 64;
+          const spacing = 12;
+          const availableHeight = viewportHeight - rect.bottom - spacing;
+          const maxHeight = Math.max(availableHeight, 120);
+          const top = Math.max(
+            spacing,
+            Math.min(rect.bottom, viewportHeight - maxHeight - spacing)
+          );
           setPopoverPosition({
-            top: rect.bottom + window.scrollY,
-            left: rect.left + window.scrollX,
+            top,
+            left: rect.left,
             width: rect.width,
-            maxHeight: availableHeight
+            maxHeight
           });
         }
       });
@@ -30565,11 +30596,11 @@ function QuillSelectComponent({
             "div",
             {
               style: {
-                position: "absolute",
+                position: "fixed",
                 top: `${popoverPosition?.top ?? 0}px`,
                 left: `${popoverPosition?.left ?? 0}px`,
                 width: `${popoverPosition?.width ?? 0}px`,
-                maxHeight: `${Math.max(popoverPosition?.maxHeight ?? 0, 100)}px`,
+                maxHeight: `${popoverPosition?.maxHeight ?? 120}px`,
                 minHeight: options.length > 2 ? 120 : options.length * 40,
                 visibility: popoverPosition ? "visible" : "hidden",
                 display: "flex",
@@ -43829,6 +43860,20 @@ function ChartBuilder({
     const resolvedReport = reportId && !tempReport ? allReportsById[reportId] : tempReport;
     return resolvedReport;
   }, [reportId, tempReport, allReportsById]);
+  const reportFieldsByName = (0, import_react44.useMemo)(() => {
+    const fields = report?.fields;
+    if (!fields || fields.length === 0) {
+      return {};
+    }
+    const map = {};
+    for (const f of fields) {
+      const key = f?.name ?? f?.field;
+      if (key) {
+        map[key] = f;
+      }
+    }
+    return map;
+  }, [report]);
   const [windowWidth, setWindowWidth] = (0, import_react44.useState)(1200);
   const [rows, setRows] = (0, import_react44.useState)(() => report?.rows ?? []);
   const [itemQuery, setItemQuery] = (0, import_react44.useState)(report?.itemQuery);
@@ -43859,6 +43904,19 @@ function ChartBuilder({
           return col;
         }
         const newCol = { ...col };
+        const reportField = reportFieldsByName[col.field];
+        if (reportField && typeof reportField.dataTypeID === "number") {
+          const converted = convertPostgresColumn({
+            name: col.field,
+            dataTypeID: reportField.dataTypeID
+          });
+          return {
+            ...col,
+            fieldType: col.fieldType ?? converted.fieldType,
+            jsType: col.jsType ?? converted.jsType,
+            dataTypeID: col.dataTypeID ?? converted.dataTypeID
+          };
+        }
         let foundColumn;
         schemaData.schemaWithCustomFields.forEach((table) => {
           if (table.columns) {
@@ -43871,6 +43929,18 @@ function ChartBuilder({
           }
         });
         if (!foundColumn) {
+          if (typeof col.dataTypeID === "number") {
+            const converted = convertPostgresColumn({
+              field: col.field,
+              dataTypeID: col.dataTypeID
+            });
+            return {
+              ...col,
+              fieldType: col.fieldType ?? converted.fieldType,
+              jsType: col.jsType ?? converted.jsType,
+              dataTypeID: col.dataTypeID ?? converted.dataTypeID
+            };
+          }
           return col;
         }
         newCol.fieldType = foundColumn.fieldType;
@@ -45349,6 +45419,9 @@ function ChartBuilder({
         ),
         pivotRows: selectedPivotTable?.rows || void 0,
         pivotColumns: selectedPivotTable?.columns || void 0,
+        // Preserve underlying column metadata in the in-memory cache.
+        // ChartEditor/ChartBuilder use this for Pivot form field options on edit-chart.
+        columnInternal: report?.columnInternal ?? columns ?? [],
         triggerReload: true,
         error: void 0,
         section: formData.section
@@ -45967,9 +46040,9 @@ function ChartBuilder({
                             /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
                               SelectComponent,
                               {
-                                value: formData.pivot && isDateField(formData.pivot.rowFieldType ?? "") ? "string" : formData.xAxisFormat,
+                                value: formData.pivot && formData.xAxisField === formData.pivot.rowField && isDateField(formData.pivot.rowFieldType ?? "") ? "string" : formData.xAxisFormat,
                                 onChange: (e) => handleChange(e.target.value, "xAxisFormat"),
-                                options: formData.pivot && isDateField(formData.pivot.rowFieldType ?? "") ? [{ value: "string", label: "date" }] : xAxisFormatOptions,
+                                options: formData.pivot && formData.xAxisField === formData.pivot.rowField && isDateField(formData.pivot.rowFieldType ?? "") ? [{ value: "string", label: "date" }] : xAxisFormatOptions,
                                 width: 200,
                                 hideEmptyOption: true
                               }

package/dist/index.js

@@ -24312,15 +24312,33 @@ var useDashboard = (dashboardName, config) => {
   const { eventTracking } = useContext(EventTrackingContext);
   const customFiltersRef = useRef2(customReportFilters);
   const reportRequestIds = useRef2({});
+  const lastDashboardName = useRef2(null);
+  const pendingNameChangeReload = useRef2(false);
   useEffect2(() => {
     customFiltersRef.current = customReportFilters;
   }, [customReportFilters]);
   useEffect2(() => {
-    if (!isLoading && !data && initialLoad.current) {
+    const nameChanged = dashboardName !== lastDashboardName.current;
+    if (nameChanged) {
+      lastDashboardName.current = dashboardName ?? null;
+      initialLoad.current = true;
+      fetchedInitialReports.current = false;
+      backfilledDashboards.current = false;
+      reportRequestIds.current = {};
+      pendingNameChangeReload.current = true;
+    }
+    if (!dashboardName) return;
+    if (pendingNameChangeReload.current && data) {
+      pendingNameChangeReload.current = false;
+      initialLoad.current = false;
+      return;
+    }
+    if (pendingNameChangeReload.current && !isLoading && !data && initialLoad.current) {
       initialLoad.current = false;
+      pendingNameChangeReload.current = false;
       reload();
     }
-  }, [isLoading, data]);
+  }, [isLoading, data, dashboardName]);
   useEffect2(() => {
     if (backfilledDashboards.current) return;
     if (isLoading || !data) return;
@@ -24330,7 +24348,7 @@ var useDashboard = (dashboardName, config) => {
     if (!needsBackfill) return;
     backfilledDashboards.current = true;
     reload(dashboardName, false);
-  }, [isLoading, data, dashboardFilters, dashboardName, reload]);
+  }, [isLoading, data, dashboardFilters, dashboardName]);
   const { allReportsById } = useAllReports();
   const sections = useMemo2(() => {
     if (!data?.sections) return null;
@@ -25888,9 +25906,8 @@ 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 = palette[idx % palette.length];
+    const baseColor = colors.length > 0 ? idx < colors.length ? colors[idx] : colors[colors.length - 1] : "#808080";
     return {
       ...dataPoint,
       color: baseColor,
@@ -25908,7 +25925,7 @@ var parseData2 = (data, colors, categoryKey, valueKey) => {
       ),
       0
     );
-    const otherColor = palette[parsedData.length % palette.length] ?? palette[palette.length - 1];
+    const otherColor = colors.length > 0 ? colors[colors.length - 1] : "#808080";
     const normalizedOtherSum = totalValue ? otherSum * 100 / totalValue : 100 / (maxItems + 1);
     parsedData.push({
       [categoryKey]: "Other",
@@ -26278,10 +26295,18 @@ var PieChartWrapper = React3.forwardRef(
                 {
                   data: parseData2(
                     data,
-                    (colorMap[category] && colorMap[category]["primary"] && generateArrayFromColor(
-                      colorMap[category]["primary"],
-                      data.length
-                    )) ?? (colors.length >= data.length ? colors : generateArrayFromColor(colors, data.length)),
+                    (() => {
+                      const colorArray = colorMap[category] && colorMap[category]["primary"] && colorMap[category]["primary"] || colors;
+                      const containsCssVars = colorArray.some(
+                        (color2) => typeof color2 === "string" && color2.includes("var(")
+                      );
+                      if (containsCssVars) {
+                        return Array.from({ length: data.length }).map(
+                          (_, idx) => colorArray[idx % colorArray.length] ?? colorArray[colorArray.length - 1] ?? "#808080"
+                        );
+                      }
+                      return colorArray.length >= data.length ? colorArray.slice(0, data.length) : generateArrayFromColor(colorArray, data.length);
+                    })(),
                     index,
                     category
                   ),
@@ -30497,12 +30522,18 @@ function QuillSelectComponent({
         const rect = buttonRef?.current?.getBoundingClientRect();
         if (rect) {
           const viewportHeight = window.innerHeight;
-          const availableHeight = viewportHeight - rect.bottom - 64;
+          const spacing = 12;
+          const availableHeight = viewportHeight - rect.bottom - spacing;
+          const maxHeight = Math.max(availableHeight, 120);
+          const top = Math.max(
+            spacing,
+            Math.min(rect.bottom, viewportHeight - maxHeight - spacing)
+          );
           setPopoverPosition({
-            top: rect.bottom + window.scrollY,
-            left: rect.left + window.scrollX,
+            top,
+            left: rect.left,
             width: rect.width,
-            maxHeight: availableHeight
+            maxHeight
           });
         }
       });
@@ -30640,11 +30671,11 @@ function QuillSelectComponent({
             "div",
             {
               style: {
-                position: "absolute",
+                position: "fixed",
                 top: `${popoverPosition?.top ?? 0}px`,
                 left: `${popoverPosition?.left ?? 0}px`,
                 width: `${popoverPosition?.width ?? 0}px`,
-                maxHeight: `${Math.max(popoverPosition?.maxHeight ?? 0, 100)}px`,
+                maxHeight: `${popoverPosition?.maxHeight ?? 120}px`,
                 minHeight: options.length > 2 ? 120 : options.length * 40,
                 visibility: popoverPosition ? "visible" : "hidden",
                 display: "flex",
@@ -43986,6 +44017,20 @@ function ChartBuilder({
     const resolvedReport = reportId && !tempReport ? allReportsById[reportId] : tempReport;
     return resolvedReport;
   }, [reportId, tempReport, allReportsById]);
+  const reportFieldsByName = useMemo21(() => {
+    const fields = report?.fields;
+    if (!fields || fields.length === 0) {
+      return {};
+    }
+    const map = {};
+    for (const f of fields) {
+      const key = f?.name ?? f?.field;
+      if (key) {
+        map[key] = f;
+      }
+    }
+    return map;
+  }, [report]);
   const [windowWidth, setWindowWidth] = useState29(1200);
   const [rows, setRows] = useState29(() => report?.rows ?? []);
   const [itemQuery, setItemQuery] = useState29(report?.itemQuery);
@@ -44016,6 +44061,19 @@ function ChartBuilder({
           return col;
         }
         const newCol = { ...col };
+        const reportField = reportFieldsByName[col.field];
+        if (reportField && typeof reportField.dataTypeID === "number") {
+          const converted = convertPostgresColumn({
+            name: col.field,
+            dataTypeID: reportField.dataTypeID
+          });
+          return {
+            ...col,
+            fieldType: col.fieldType ?? converted.fieldType,
+            jsType: col.jsType ?? converted.jsType,
+            dataTypeID: col.dataTypeID ?? converted.dataTypeID
+          };
+        }
         let foundColumn;
         schemaData.schemaWithCustomFields.forEach((table) => {
           if (table.columns) {
@@ -44028,6 +44086,18 @@ function ChartBuilder({
           }
         });
         if (!foundColumn) {
+          if (typeof col.dataTypeID === "number") {
+            const converted = convertPostgresColumn({
+              field: col.field,
+              dataTypeID: col.dataTypeID
+            });
+            return {
+              ...col,
+              fieldType: col.fieldType ?? converted.fieldType,
+              jsType: col.jsType ?? converted.jsType,
+              dataTypeID: col.dataTypeID ?? converted.dataTypeID
+            };
+          }
           return col;
         }
         newCol.fieldType = foundColumn.fieldType;
@@ -45506,6 +45576,9 @@ function ChartBuilder({
         ),
         pivotRows: selectedPivotTable?.rows || void 0,
         pivotColumns: selectedPivotTable?.columns || void 0,
+        // Preserve underlying column metadata in the in-memory cache.
+        // ChartEditor/ChartBuilder use this for Pivot form field options on edit-chart.
+        columnInternal: report?.columnInternal ?? columns ?? [],
         triggerReload: true,
         error: void 0,
         section: formData.section
@@ -46124,9 +46197,9 @@ function ChartBuilder({
                             /* @__PURE__ */ jsx66(
                               SelectComponent,
                               {
-                                value: formData.pivot && isDateField(formData.pivot.rowFieldType ?? "") ? "string" : formData.xAxisFormat,
+                                value: formData.pivot && formData.xAxisField === formData.pivot.rowField && isDateField(formData.pivot.rowFieldType ?? "") ? "string" : formData.xAxisFormat,
                                 onChange: (e) => handleChange(e.target.value, "xAxisFormat"),
-                                options: formData.pivot && isDateField(formData.pivot.rowFieldType ?? "") ? [{ value: "string", label: "date" }] : xAxisFormatOptions,
+                                options: formData.pivot && formData.xAxisField === formData.pivot.rowField && isDateField(formData.pivot.rowFieldType ?? "") ? [{ value: "string", label: "date" }] : xAxisFormatOptions,
                                 width: 200,
                                 hideEmptyOption: true
                               }

package/package.json

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