@quillsql/react 2.16.56 → 2.16.58

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) {
@@ -60832,7 +60837,12 @@ function isPivotTableDateBucketRowAxis(chart, xAxisField) {
   if (!rowField || xf !== rowField) return false;
   return isDateType(String(chart.pivot.rowFieldType ?? ""));
 }
-var RESOLVABLE_X_AXIS_DATE_BUCKETS = /* @__PURE__ */ new Set(["year", "month", "day"]);
+var RESOLVABLE_X_AXIS_DATE_BUCKETS = /* @__PURE__ */ new Set([
+  "year",
+  "month",
+  "week",
+  "day"
+]);
 function resolvePivotDateBucketXAxisFormat(chart, xAxisField) {
   if (String(chart?.chartType ?? "").toLowerCase() === "table") return null;
   const dateBucket = String(chart?.pivot?.dateBucket ?? "").trim().toLowerCase();
@@ -63395,6 +63405,7 @@ function useReport(reportIdArg, options = {}) {
   ].map((entry) => String(entry ?? "").trim()).find((entry) => entry.length > 0) ?? "";
   const initialFormState = (0, import_react61.useMemo)(
     () => ({
+      reportName: void 0,
       columns: [],
       queryColumns: [],
       filterStack: [],
@@ -63425,6 +63436,7 @@ function useReport(reportIdArg, options = {}) {
     pivotRefreshVersion
   } = formRuntimeState;
   const {
+    reportName: formReportName,
     columns: displayColumns,
     queryColumns,
     filterStack,
@@ -64469,6 +64481,7 @@ function useReport(reportIdArg, options = {}) {
       updater: (previous) => {
         return {
           ...previous,
+          reportName: void 0,
           schemaDatasourceIds: void 0,
           filterStack: [],
           queryFilters: { combinator: "and", rules: [] },
@@ -64561,6 +64574,7 @@ function useReport(reportIdArg, options = {}) {
   const sourceReportNameForTitle = String(sourceReport?.name ?? "").trim();
   const reportTitleFromTask = String(reportNameQuery.data?.name ?? "").trim();
   const resolvedReportName = reportNameQueryReportId && sourceReportIdForTitle === reportNameQueryReportId && sourceReportNameForTitle ? sourceReportNameForTitle : reportTitleFromTask || sourceReportNameForTitle || "";
+  const displayReportName = formReportName !== void 0 ? formReportName : resolvedReportName;
   (0, import_react61.useEffect)(() => {
     if (reportOverride) return;
     const report = initialLoadQuery.data?.report ?? null;
@@ -64664,12 +64678,15 @@ function useReport(reportIdArg, options = {}) {
           schemaTables: schemaForReportBuilderState
         });
         const sourceDisplayColumns = sourceDisplayColumnsFromSchema.length > 0 ? sourceDisplayColumnsFromSchema : sourceQueryColumns;
-        const nextGroupRowsBy = shouldTakePivotGroupsFromSource ? groupRowsBySetViaSetReportRef.current ? prev.groupRowsBy : sourceRowGroupOption : prev.groupRowsBy !== void 0 ? prev.groupRowsBy : groupRowsBySetViaSetReportRef.current ? prev.groupRowsBy : sourceRowGroupOption;
-        const nextGroupColumnsBy = shouldTakePivotGroupsFromSource ? groupColumnsBySetViaSetReportRef.current ? prev.groupColumnsBy : sourceColumnGroupOption : prev.groupColumnsBy !== void 0 ? prev.groupColumnsBy : prev.groupRowsBy !== void 0 ? prev.groupColumnsBy : sourceColumnGroupOption;
+        const shouldKeepLocalRowGroup = groupRowsBySetViaSetReportRef.current || groupColumnsBySetViaSetReportRef.current && prev.groupRowsBy !== void 0;
+        const shouldKeepLocalColumnGroup = groupColumnsBySetViaSetReportRef.current || groupRowsBySetViaSetReportRef.current && prev.groupColumnsBy !== void 0;
+        const nextGroupRowsBy = shouldTakePivotGroupsFromSource ? shouldKeepLocalRowGroup ? prev.groupRowsBy : sourceRowGroupOption : prev.groupRowsBy !== void 0 ? prev.groupRowsBy : groupRowsBySetViaSetReportRef.current ? prev.groupRowsBy : sourceRowGroupOption;
+        const nextGroupColumnsBy = shouldTakePivotGroupsFromSource ? shouldKeepLocalColumnGroup ? prev.groupColumnsBy : sourceColumnGroupOption : prev.groupColumnsBy !== void 0 ? prev.groupColumnsBy : prev.groupRowsBy !== void 0 ? prev.groupColumnsBy : sourceColumnGroupOption;
         const sourceDateBucket = sourceReport.pivot?.dateBucket ?? sourceReport.reportBuilderState?.pivot?.dateBucket;
         const nextDateBucket = dateBucketSetViaSetReportRef.current ? prev.dateBucket : sourceDateBucket;
         const nextFromSource = {
           ...prev,
+          reportName: prev.reportName !== void 0 ? prev.reportName : String(sourceReport.name ?? "").trim() || void 0,
           queryColumns: prev.queryColumns.length ? prev.queryColumns : sourceQueryColumns,
           columns: prev.columns.length ? prev.columns : sourceDisplayColumns,
           filterStack: nextFilterStack.length > 0 ? nextFilterStack : prev.filterStack,
@@ -65256,11 +65273,7 @@ function useReport(reportIdArg, options = {}) {
     const report = tableRefreshQuery.data?.report;
     if (tableRefreshQuery.data?.error || !report) return;
     setSourceReport(report);
-  }, [
-    effectiveReportId,
-    tableRefreshQuery.data,
-    tableRefreshQueryEnabled
-  ]);
+  }, [effectiveReportId, tableRefreshQuery.data, tableRefreshQueryEnabled]);
   const chartTypes = (0, import_react61.useMemo)(() => {
     return getChartTypeOptions2({ pivot: pivotState });
   }, [pivotState]);
@@ -66299,14 +66312,12 @@ function useReport(reportIdArg, options = {}) {
       chartAxisOptionByField.get(resolvedXAxisField)?.format ?? chartAxesBaseChart.xAxisFormat ?? resolvedYAxisFields[0]?.format,
       "string"
     );
-    if (defaultFormat === "string") {
-      const bucketFormat = resolvePivotDateBucketXAxisFormat(
-        chartAxesBaseChart,
-        resolvedXAxisField
-      );
-      if (bucketFormat) {
-        defaultFormat = bucketFormat;
-      }
+    const bucketFormat = resolvePivotDateBucketXAxisFormat(
+      chartAxesBaseChart,
+      resolvedXAxisField
+    );
+    if (bucketFormat && (defaultFormat === "string" || chartAxesBaseChart.pivot?.dateBucket === "week")) {
+      defaultFormat = bucketFormat;
     }
     if (isPivotTableDateBucketRowAxis(chartAxesBaseChart, resolvedXAxisField) && chartAxisEdits.xAxisFormat === void 0) {
       defaultFormat = "string";
@@ -67429,6 +67440,9 @@ function useReport(reportIdArg, options = {}) {
           columns: normalizeReportBuilderColumns(prev.columns ?? []),
           queryColumns: normalizeReportBuilderColumns(prev.queryColumns ?? [])
         };
+        if (effectiveNextState.name !== void 0) {
+          next.reportName = String(effectiveNextState.name);
+        }
         if (effectiveNextState.datasources !== void 0) {
           const nextIds = effectiveNextState.datasources.map((tableName) => String(tableName ?? "").trim()).filter(Boolean);
           next.schemaDatasourceIds = nextIds.length > 0 ? nextIds : void 0;
@@ -67918,7 +67932,7 @@ function useReport(reportIdArg, options = {}) {
       report: {
         ...EMPTY_INTERNAL_REPORT,
         ...sourceRest,
-        name: String(sourceRest.name ?? "").trim() ? sourceRest.name : effectiveReportBuilderState.tables[0]?.name ? snakeAndCamelCaseToTitleCase(
+        name: String(formReportName ?? "").trim() ? formReportName : String(sourceRest.name ?? "").trim() ? sourceRest.name : effectiveReportBuilderState.tables[0]?.name ? snakeAndCamelCaseToTitleCase(
           String(effectiveReportBuilderState.tables[0].name)
         ) : "New report",
         // Match chart rendering (`chartData`): form `chartType` wins over stale `sourceReport`.
@@ -67954,6 +67968,7 @@ function useReport(reportIdArg, options = {}) {
     effectiveReportBuilderState,
     effectiveReportId,
     eventTracking,
+    formReportName,
     getToken,
     resolvedXAxisField,
     resolvedXAxisFormat,
@@ -67972,8 +67987,8 @@ function useReport(reportIdArg, options = {}) {
     table,
     tableLoading,
     loading,
-    /** Report title: matching `sourceReport.name`, else `report-name` task, else empty. */
-    name: resolvedReportName,
+    /** Report title: form override, then `sourceReport.name`, else `report-name` task. */
+    name: displayReportName,
     /**
      * Resolved report id: the `reportId` argument when provided, otherwise the id
      * returned from `create-report` after the first datasource selection.
@@ -69077,7 +69092,8 @@ function ReportDetail({
   table,
   tableLoading,
   showLegend,
-  hideTableChartOuterBorder = false
+  hideTableChartOuterBorder = false,
+  onClickChartElement
 }) {
   const [theme] = (0, import_react65.useContext)(ThemeContext);
   const surfaceBackground = theme?.backgroundColor ?? "#fff";
@@ -69169,6 +69185,7 @@ function ReportDetail({
                   flexShrink: 0
                 },
                 showLegend,
+                onClickChartElement,
                 tableChartWrapperBorders: hideTableChartOuterBorder && isTableChart ? {
                   borderRadius: 0,
                   borderLeft: "none",

package/dist/index.d.cts

@@ -3004,6 +3004,8 @@ type SetReportChartAxesInput = {
     };
 };
 interface SetReportBuilderInput {
+    /** Report display name, persisted by `saveChanges`. */
+    name?: string;
     /** Complete selected column list in display order. */
     columns?: ReportColumnValue[];
     filters?: Filter[];
@@ -3186,7 +3188,7 @@ declare function useReport(reportIdArg?: string, options?: UseReportOptions): {
     table: UseFormTable;
     tableLoading: boolean;
     loading: boolean;
-    /** Report title: matching `sourceReport.name`, else `report-name` task, else empty. */
+    /** Report title: form override, then `sourceReport.name`, else `report-name` task. */
     name: string;
     /**
      * Resolved report id: the `reportId` argument when provided, otherwise the id
@@ -3421,8 +3423,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

@@ -3004,6 +3004,8 @@ type SetReportChartAxesInput = {
     };
 };
 interface SetReportBuilderInput {
+    /** Report display name, persisted by `saveChanges`. */
+    name?: string;
     /** Complete selected column list in display order. */
     columns?: ReportColumnValue[];
     filters?: Filter[];
@@ -3186,7 +3188,7 @@ declare function useReport(reportIdArg?: string, options?: UseReportOptions): {
     table: UseFormTable;
     tableLoading: boolean;
     loading: boolean;
-    /** Report title: matching `sourceReport.name`, else `report-name` task, else empty. */
+    /** Report title: form override, then `sourceReport.name`, else `report-name` task. */
     name: string;
     /**
      * Resolved report id: the `reportId` argument when provided, otherwise the id
@@ -3421,8 +3423,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) {
@@ -61044,7 +61049,12 @@ function isPivotTableDateBucketRowAxis(chart, xAxisField) {
   if (!rowField || xf !== rowField) return false;
   return isDateType(String(chart.pivot.rowFieldType ?? ""));
 }
-var RESOLVABLE_X_AXIS_DATE_BUCKETS = /* @__PURE__ */ new Set(["year", "month", "day"]);
+var RESOLVABLE_X_AXIS_DATE_BUCKETS = /* @__PURE__ */ new Set([
+  "year",
+  "month",
+  "week",
+  "day"
+]);
 function resolvePivotDateBucketXAxisFormat(chart, xAxisField) {
   if (String(chart?.chartType ?? "").toLowerCase() === "table") return null;
   const dateBucket = String(chart?.pivot?.dateBucket ?? "").trim().toLowerCase();
@@ -63607,6 +63617,7 @@ function useReport(reportIdArg, options = {}) {
   ].map((entry) => String(entry ?? "").trim()).find((entry) => entry.length > 0) ?? "";
   const initialFormState = useMemo32(
     () => ({
+      reportName: void 0,
       columns: [],
       queryColumns: [],
       filterStack: [],
@@ -63637,6 +63648,7 @@ function useReport(reportIdArg, options = {}) {
     pivotRefreshVersion
   } = formRuntimeState;
   const {
+    reportName: formReportName,
     columns: displayColumns,
     queryColumns,
     filterStack,
@@ -64681,6 +64693,7 @@ function useReport(reportIdArg, options = {}) {
       updater: (previous) => {
         return {
           ...previous,
+          reportName: void 0,
           schemaDatasourceIds: void 0,
           filterStack: [],
           queryFilters: { combinator: "and", rules: [] },
@@ -64773,6 +64786,7 @@ function useReport(reportIdArg, options = {}) {
   const sourceReportNameForTitle = String(sourceReport?.name ?? "").trim();
   const reportTitleFromTask = String(reportNameQuery.data?.name ?? "").trim();
   const resolvedReportName = reportNameQueryReportId && sourceReportIdForTitle === reportNameQueryReportId && sourceReportNameForTitle ? sourceReportNameForTitle : reportTitleFromTask || sourceReportNameForTitle || "";
+  const displayReportName = formReportName !== void 0 ? formReportName : resolvedReportName;
   useEffect31(() => {
     if (reportOverride) return;
     const report = initialLoadQuery.data?.report ?? null;
@@ -64876,12 +64890,15 @@ function useReport(reportIdArg, options = {}) {
           schemaTables: schemaForReportBuilderState
         });
         const sourceDisplayColumns = sourceDisplayColumnsFromSchema.length > 0 ? sourceDisplayColumnsFromSchema : sourceQueryColumns;
-        const nextGroupRowsBy = shouldTakePivotGroupsFromSource ? groupRowsBySetViaSetReportRef.current ? prev.groupRowsBy : sourceRowGroupOption : prev.groupRowsBy !== void 0 ? prev.groupRowsBy : groupRowsBySetViaSetReportRef.current ? prev.groupRowsBy : sourceRowGroupOption;
-        const nextGroupColumnsBy = shouldTakePivotGroupsFromSource ? groupColumnsBySetViaSetReportRef.current ? prev.groupColumnsBy : sourceColumnGroupOption : prev.groupColumnsBy !== void 0 ? prev.groupColumnsBy : prev.groupRowsBy !== void 0 ? prev.groupColumnsBy : sourceColumnGroupOption;
+        const shouldKeepLocalRowGroup = groupRowsBySetViaSetReportRef.current || groupColumnsBySetViaSetReportRef.current && prev.groupRowsBy !== void 0;
+        const shouldKeepLocalColumnGroup = groupColumnsBySetViaSetReportRef.current || groupRowsBySetViaSetReportRef.current && prev.groupColumnsBy !== void 0;
+        const nextGroupRowsBy = shouldTakePivotGroupsFromSource ? shouldKeepLocalRowGroup ? prev.groupRowsBy : sourceRowGroupOption : prev.groupRowsBy !== void 0 ? prev.groupRowsBy : groupRowsBySetViaSetReportRef.current ? prev.groupRowsBy : sourceRowGroupOption;
+        const nextGroupColumnsBy = shouldTakePivotGroupsFromSource ? shouldKeepLocalColumnGroup ? prev.groupColumnsBy : sourceColumnGroupOption : prev.groupColumnsBy !== void 0 ? prev.groupColumnsBy : prev.groupRowsBy !== void 0 ? prev.groupColumnsBy : sourceColumnGroupOption;
         const sourceDateBucket = sourceReport.pivot?.dateBucket ?? sourceReport.reportBuilderState?.pivot?.dateBucket;
         const nextDateBucket = dateBucketSetViaSetReportRef.current ? prev.dateBucket : sourceDateBucket;
         const nextFromSource = {
           ...prev,
+          reportName: prev.reportName !== void 0 ? prev.reportName : String(sourceReport.name ?? "").trim() || void 0,
           queryColumns: prev.queryColumns.length ? prev.queryColumns : sourceQueryColumns,
           columns: prev.columns.length ? prev.columns : sourceDisplayColumns,
           filterStack: nextFilterStack.length > 0 ? nextFilterStack : prev.filterStack,
@@ -65468,11 +65485,7 @@ function useReport(reportIdArg, options = {}) {
     const report = tableRefreshQuery.data?.report;
     if (tableRefreshQuery.data?.error || !report) return;
     setSourceReport(report);
-  }, [
-    effectiveReportId,
-    tableRefreshQuery.data,
-    tableRefreshQueryEnabled
-  ]);
+  }, [effectiveReportId, tableRefreshQuery.data, tableRefreshQueryEnabled]);
   const chartTypes = useMemo32(() => {
     return getChartTypeOptions2({ pivot: pivotState });
   }, [pivotState]);
@@ -66511,14 +66524,12 @@ function useReport(reportIdArg, options = {}) {
       chartAxisOptionByField.get(resolvedXAxisField)?.format ?? chartAxesBaseChart.xAxisFormat ?? resolvedYAxisFields[0]?.format,
       "string"
     );
-    if (defaultFormat === "string") {
-      const bucketFormat = resolvePivotDateBucketXAxisFormat(
-        chartAxesBaseChart,
-        resolvedXAxisField
-      );
-      if (bucketFormat) {
-        defaultFormat = bucketFormat;
-      }
+    const bucketFormat = resolvePivotDateBucketXAxisFormat(
+      chartAxesBaseChart,
+      resolvedXAxisField
+    );
+    if (bucketFormat && (defaultFormat === "string" || chartAxesBaseChart.pivot?.dateBucket === "week")) {
+      defaultFormat = bucketFormat;
     }
     if (isPivotTableDateBucketRowAxis(chartAxesBaseChart, resolvedXAxisField) && chartAxisEdits.xAxisFormat === void 0) {
       defaultFormat = "string";
@@ -67641,6 +67652,9 @@ function useReport(reportIdArg, options = {}) {
           columns: normalizeReportBuilderColumns(prev.columns ?? []),
           queryColumns: normalizeReportBuilderColumns(prev.queryColumns ?? [])
         };
+        if (effectiveNextState.name !== void 0) {
+          next.reportName = String(effectiveNextState.name);
+        }
         if (effectiveNextState.datasources !== void 0) {
           const nextIds = effectiveNextState.datasources.map((tableName) => String(tableName ?? "").trim()).filter(Boolean);
           next.schemaDatasourceIds = nextIds.length > 0 ? nextIds : void 0;
@@ -68130,7 +68144,7 @@ function useReport(reportIdArg, options = {}) {
       report: {
         ...EMPTY_INTERNAL_REPORT,
         ...sourceRest,
-        name: String(sourceRest.name ?? "").trim() ? sourceRest.name : effectiveReportBuilderState.tables[0]?.name ? snakeAndCamelCaseToTitleCase(
+        name: String(formReportName ?? "").trim() ? formReportName : String(sourceRest.name ?? "").trim() ? sourceRest.name : effectiveReportBuilderState.tables[0]?.name ? snakeAndCamelCaseToTitleCase(
           String(effectiveReportBuilderState.tables[0].name)
         ) : "New report",
         // Match chart rendering (`chartData`): form `chartType` wins over stale `sourceReport`.
@@ -68166,6 +68180,7 @@ function useReport(reportIdArg, options = {}) {
     effectiveReportBuilderState,
     effectiveReportId,
     eventTracking,
+    formReportName,
     getToken,
     resolvedXAxisField,
     resolvedXAxisFormat,
@@ -68184,8 +68199,8 @@ function useReport(reportIdArg, options = {}) {
     table,
     tableLoading,
     loading,
-    /** Report title: matching `sourceReport.name`, else `report-name` task, else empty. */
-    name: resolvedReportName,
+    /** Report title: form override, then `sourceReport.name`, else `report-name` task. */
+    name: displayReportName,
     /**
      * Resolved report id: the `reportId` argument when provided, otherwise the id
      * returned from `create-report` after the first datasource selection.
@@ -69294,7 +69309,8 @@ function ReportDetail({
   table,
   tableLoading,
   showLegend,
-  hideTableChartOuterBorder = false
+  hideTableChartOuterBorder = false,
+  onClickChartElement
 }) {
   const [theme] = useContext38(ThemeContext);
   const surfaceBackground = theme?.backgroundColor ?? "#fff";
@@ -69386,6 +69402,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.56",
+  "version": "2.16.58",
   "type": "module",
   "exports": {
     ".": {