@quillsql/react 2.16.55 → 2.16.57

package/dist/index.cjs

@@ -22575,7 +22575,8 @@ var formatRowsFromReport = (report, xAxisField, xAxisFormat) => {
     return formattedRow;
   });
 };
-function formattedPivotRowsAndColumns(report, dashboardFilters = []) {
+function formattedPivotRowsAndColumns(report, dashboardFilters = [], options = {}) {
+  const shouldFormatRows = options.formatRows ?? true;
   let columns = report.pivotColumns ?? report.columns;
   let rows = report.pivotRows ?? report.rows;
   if (report.chartType === "table") {
@@ -22591,12 +22592,16 @@ function formattedPivotRowsAndColumns(report, dashboardFilters = []) {
         format: col.format ?? "whole_number"
       };
     }) ?? report.columns;
-    rows = formatRowsFromReport({ rows, columns });
+    if (shouldFormatRows) {
+      rows = formatRowsFromReport({ rows, columns });
+    }
   } else if (report.chartType === "metric") {
     columns = report.pivotColumns?.map((col) => {
       return { ...col, format: report.xAxisFormat };
     }) ?? report.columns;
-    rows = formatRowsFromReport({ rows, columns });
+    if (shouldFormatRows) {
+      rows = formatRowsFromReport({ rows, columns });
+    }
   }
   const legacyPivotFormat = report.yAxisFields?.[0]?.format;
   const formattedYAxisFields = getYAxisFields(
@@ -22652,7 +22657,7 @@ function convertInternalReportToReport(report, dashboardFilters, eventTracking,
         report.xAxisField,
         report.xAxisFormat
       );
-    } else if (report.chartType === "table") {
+    } else if (report.chartType === "table" && initiator !== "useDashboardReport") {
       rows = formatRowsFromReport(report);
     }
     return {
@@ -34150,8 +34155,7 @@ var createCustomBar = (yAxisFields, theme, layout, active = false) => {
       yAxisFields,
       theme,
       layout,
-      stroke: active ? theme?.primaryTextColor ?? "#111827" : props.stroke,
-      strokeWidth: active ? 1.5 : props.strokeWidth
+      fillOpacity: active ? 0.8 : props.fillOpacity
     }
   );
 };
@@ -34402,24 +34406,27 @@ function BarChart({
                       if (!payload || payload.length === 0) {
                         return null;
                       }
-                      const activeLabel = label ?? payload[0]?.payload?.[xAxisField] ?? "";
-                      const payloadItems = payload.map((p) => {
-                        const rawName = yAxisFields?.find(
-                          (f) => f.field === p.name?.toString()
-                        )?.label;
+                      const row = payload[0]?.payload ?? {};
+                      const activeLabel = label ?? row[xAxisField] ?? "";
+                      const payloadItems = sortYAxisFields([
+                        ...yAxisFields
+                      ]).map((field) => {
+                        const rawName = field.label;
                         const name2 = rawName ? humanizeChartSeriesTooltipLabel(rawName) : "";
                         return {
-                          ...p,
-                          color: p.color || "black",
                           chartType: "line",
-                          dataKey: p.dataKey?.toLocaleString() || "",
+                          color: getCustomColor(field.field) ?? selectColor(
+                            field,
+                            colors,
+                            stableColorIndex(field.field)
+                          ),
+                          dataKey: field.field,
                           name: snakeAndCamelCaseToTitleCase(
-                            name2 || p.name?.toString() || ""
+                            name2 || field.field
                           ),
-                          payload: p.payload || {},
-                          type: p.type || "none",
-                          unit: "string",
-                          value: p.value || ""
+                          payload: row,
+                          type: "none",
+                          value: row[field.field] ?? ""
                         };
                       });
                       return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
@@ -34468,9 +34475,7 @@ function BarChart({
                       isAnimationActive,
                       shape: customBarShape,
                       activeBar: customActiveBarShape ?? {
-                        fillOpacity: 1,
-                        stroke: theme?.primaryTextColor ?? "#111827",
-                        strokeWidth: 1.5
+                        fillOpacity: 0.8
                       },
                       style: {
                         cursor: onClickChartElement ? "pointer" : void 0
@@ -43595,7 +43600,7 @@ function StaticChart(props) {
   const config = (0, import_react41.useMemo)(() => {
     return report ? {
       ...report,
-      ...report.pivot ? formattedPivotRowsAndColumns(report) : {}
+      ...report.pivot ? formattedPivotRowsAndColumns(report, [], { formatRows: false }) : {}
     } : void 0;
   }, [report]);
   if (error) {
@@ -65982,8 +65987,9 @@ function useReport(reportIdArg, options = {}) {
       return {
         ...previousReport,
         ...report,
+        // Keep chart axis metadata from the pivot load; detail fetch is flat
+        // (`pivot: null`) and must supply wide `columns` for the detail table.
         xAxisFormat: previousReport.xAxisFormat,
-        columns: previousReport.columns,
         yAxisFields: previousReport.yAxisFields,
         pivot: previousReport.pivot,
         pivotRows: previousReport.pivotRows,
@@ -67912,6 +67918,7 @@ function useReport(reportIdArg, options = {}) {
       adminMode: _omitAdminMode,
       ...sourceRest
     } = sourceReport;
+    const isFlatTable = String(resolvedChartType).toLowerCase() === "table" && !effectiveReportBuilderState.pivot;
     const resp = await saveReport({
       report: {
         ...EMPTY_INTERNAL_REPORT,
@@ -67922,6 +67929,10 @@ function useReport(reportIdArg, options = {}) {
         // Match chart rendering (`chartData`): form `chartType` wins over stale `sourceReport`.
         chartType: resolvedChartType,
         dashboardName: dashboardNameForNewReport,
+        ...isFlatTable ? {
+          columns: table.columns,
+          sort: effectiveReportBuilderState.sort?.[0] ?? null
+        } : {},
         reportBuilderState: effectiveReportBuilderState,
         pivot: effectiveReportBuilderState.pivot ?? null,
         // Axis control state (measures / aggregation fields). Do not use
@@ -67956,6 +67967,7 @@ function useReport(reportIdArg, options = {}) {
     resolvedYAxisFields,
     sourceReport,
     setDraftSessionId,
+    table.columns,
     tenants
   ]);
   return {
@@ -69070,7 +69082,8 @@ function ReportDetail({
   table,
   tableLoading,
   showLegend,
-  hideTableChartOuterBorder = false
+  hideTableChartOuterBorder = false,
+  onClickChartElement
 }) {
   const [theme] = (0, import_react65.useContext)(ThemeContext);
   const surfaceBackground = theme?.backgroundColor ?? "#fff";
@@ -69162,6 +69175,7 @@ function ReportDetail({
                   flexShrink: 0
                 },
                 showLegend,
+                onClickChartElement,
                 tableChartWrapperBorders: hideTableChartOuterBorder && isTableChart ? {
                   borderRadius: 0,
                   borderLeft: "none",

package/dist/index.d.cts

@@ -3421,8 +3421,10 @@ type ReportDetailProps = {
     showLegend?: boolean;
     /** Strip QuillTable's outer frame when chart type is `table` (cell borders unchanged). */
     hideTableChartOuterBorder?: boolean;
+    /** Forwarded to `ChartDisplay` for chart element click interactions (e.g. drilldowns). */
+    onClickChartElement?: (data: any) => void;
 };
-declare function ReportDetail({ reportTitle, chart, chartLoading, table, tableLoading, showLegend, hideTableChartOuterBorder, }: ReportDetailProps): react_jsx_runtime.JSX.Element;
+declare function ReportDetail({ reportTitle, chart, chartLoading, table, tableLoading, showLegend, hideTableChartOuterBorder, onClickChartElement, }: ReportDetailProps): react_jsx_runtime.JSX.Element;
 
 declare const quillFormat: ({ value, format, }: {
     value: any;

package/dist/index.d.ts

@@ -3421,8 +3421,10 @@ type ReportDetailProps = {
     showLegend?: boolean;
     /** Strip QuillTable's outer frame when chart type is `table` (cell borders unchanged). */
     hideTableChartOuterBorder?: boolean;
+    /** Forwarded to `ChartDisplay` for chart element click interactions (e.g. drilldowns). */
+    onClickChartElement?: (data: any) => void;
 };
-declare function ReportDetail({ reportTitle, chart, chartLoading, table, tableLoading, showLegend, hideTableChartOuterBorder, }: ReportDetailProps): react_jsx_runtime.JSX.Element;
+declare function ReportDetail({ reportTitle, chart, chartLoading, table, tableLoading, showLegend, hideTableChartOuterBorder, onClickChartElement, }: ReportDetailProps): react_jsx_runtime.JSX.Element;
 
 declare const quillFormat: ({ value, format, }: {
     value: any;

package/dist/index.js

@@ -22572,7 +22572,8 @@ var formatRowsFromReport = (report, xAxisField, xAxisFormat) => {
     return formattedRow;
   });
 };
-function formattedPivotRowsAndColumns(report, dashboardFilters = []) {
+function formattedPivotRowsAndColumns(report, dashboardFilters = [], options = {}) {
+  const shouldFormatRows = options.formatRows ?? true;
   let columns = report.pivotColumns ?? report.columns;
   let rows = report.pivotRows ?? report.rows;
   if (report.chartType === "table") {
@@ -22588,12 +22589,16 @@ function formattedPivotRowsAndColumns(report, dashboardFilters = []) {
         format: col.format ?? "whole_number"
       };
     }) ?? report.columns;
-    rows = formatRowsFromReport({ rows, columns });
+    if (shouldFormatRows) {
+      rows = formatRowsFromReport({ rows, columns });
+    }
   } else if (report.chartType === "metric") {
     columns = report.pivotColumns?.map((col) => {
       return { ...col, format: report.xAxisFormat };
     }) ?? report.columns;
-    rows = formatRowsFromReport({ rows, columns });
+    if (shouldFormatRows) {
+      rows = formatRowsFromReport({ rows, columns });
+    }
   }
   const legacyPivotFormat = report.yAxisFields?.[0]?.format;
   const formattedYAxisFields = getYAxisFields(
@@ -22649,7 +22654,7 @@ function convertInternalReportToReport(report, dashboardFilters, eventTracking,
         report.xAxisField,
         report.xAxisFormat
       );
-    } else if (report.chartType === "table") {
+    } else if (report.chartType === "table" && initiator !== "useDashboardReport") {
       rows = formatRowsFromReport(report);
     }
     return {
@@ -34210,8 +34215,7 @@ var createCustomBar = (yAxisFields, theme, layout, active = false) => {
       yAxisFields,
       theme,
       layout,
-      stroke: active ? theme?.primaryTextColor ?? "#111827" : props.stroke,
-      strokeWidth: active ? 1.5 : props.strokeWidth
+      fillOpacity: active ? 0.8 : props.fillOpacity
     }
   );
 };
@@ -34462,24 +34466,27 @@ function BarChart({
                       if (!payload || payload.length === 0) {
                         return null;
                       }
-                      const activeLabel = label ?? payload[0]?.payload?.[xAxisField] ?? "";
-                      const payloadItems = payload.map((p) => {
-                        const rawName = yAxisFields?.find(
-                          (f) => f.field === p.name?.toString()
-                        )?.label;
+                      const row = payload[0]?.payload ?? {};
+                      const activeLabel = label ?? row[xAxisField] ?? "";
+                      const payloadItems = sortYAxisFields([
+                        ...yAxisFields
+                      ]).map((field) => {
+                        const rawName = field.label;
                         const name2 = rawName ? humanizeChartSeriesTooltipLabel(rawName) : "";
                         return {
-                          ...p,
-                          color: p.color || "black",
                           chartType: "line",
-                          dataKey: p.dataKey?.toLocaleString() || "",
+                          color: getCustomColor(field.field) ?? selectColor(
+                            field,
+                            colors,
+                            stableColorIndex(field.field)
+                          ),
+                          dataKey: field.field,
                           name: snakeAndCamelCaseToTitleCase(
-                            name2 || p.name?.toString() || ""
+                            name2 || field.field
                           ),
-                          payload: p.payload || {},
-                          type: p.type || "none",
-                          unit: "string",
-                          value: p.value || ""
+                          payload: row,
+                          type: "none",
+                          value: row[field.field] ?? ""
                         };
                       });
                       return /* @__PURE__ */ jsx38(
@@ -34528,9 +34535,7 @@ function BarChart({
                       isAnimationActive,
                       shape: customBarShape,
                       activeBar: customActiveBarShape ?? {
-                        fillOpacity: 1,
-                        stroke: theme?.primaryTextColor ?? "#111827",
-                        strokeWidth: 1.5
+                        fillOpacity: 0.8
                       },
                       style: {
                         cursor: onClickChartElement ? "pointer" : void 0
@@ -43698,7 +43703,7 @@ function StaticChart(props) {
   const config = useMemo20(() => {
     return report ? {
       ...report,
-      ...report.pivot ? formattedPivotRowsAndColumns(report) : {}
+      ...report.pivot ? formattedPivotRowsAndColumns(report, [], { formatRows: false }) : {}
     } : void 0;
   }, [report]);
   if (error) {
@@ -66194,8 +66199,9 @@ function useReport(reportIdArg, options = {}) {
       return {
         ...previousReport,
         ...report,
+        // Keep chart axis metadata from the pivot load; detail fetch is flat
+        // (`pivot: null`) and must supply wide `columns` for the detail table.
         xAxisFormat: previousReport.xAxisFormat,
-        columns: previousReport.columns,
         yAxisFields: previousReport.yAxisFields,
         pivot: previousReport.pivot,
         pivotRows: previousReport.pivotRows,
@@ -68124,6 +68130,7 @@ function useReport(reportIdArg, options = {}) {
       adminMode: _omitAdminMode,
       ...sourceRest
     } = sourceReport;
+    const isFlatTable = String(resolvedChartType).toLowerCase() === "table" && !effectiveReportBuilderState.pivot;
     const resp = await saveReport({
       report: {
         ...EMPTY_INTERNAL_REPORT,
@@ -68134,6 +68141,10 @@ function useReport(reportIdArg, options = {}) {
         // Match chart rendering (`chartData`): form `chartType` wins over stale `sourceReport`.
         chartType: resolvedChartType,
         dashboardName: dashboardNameForNewReport,
+        ...isFlatTable ? {
+          columns: table.columns,
+          sort: effectiveReportBuilderState.sort?.[0] ?? null
+        } : {},
         reportBuilderState: effectiveReportBuilderState,
         pivot: effectiveReportBuilderState.pivot ?? null,
         // Axis control state (measures / aggregation fields). Do not use
@@ -68168,6 +68179,7 @@ function useReport(reportIdArg, options = {}) {
     resolvedYAxisFields,
     sourceReport,
     setDraftSessionId,
+    table.columns,
     tenants
   ]);
   return {
@@ -69287,7 +69299,8 @@ function ReportDetail({
   table,
   tableLoading,
   showLegend,
-  hideTableChartOuterBorder = false
+  hideTableChartOuterBorder = false,
+  onClickChartElement
 }) {
   const [theme] = useContext38(ThemeContext);
   const surfaceBackground = theme?.backgroundColor ?? "#fff";
@@ -69379,6 +69392,7 @@ function ReportDetail({
                   flexShrink: 0
                 },
                 showLegend,
+                onClickChartElement,
                 tableChartWrapperBorders: hideTableChartOuterBorder && isTableChart ? {
                   borderRadius: 0,
                   borderLeft: "none",

package/package.json

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