@quillsql/react 2.16.67 → 2.16.69

package/dist/index.cjs

@@ -17269,6 +17269,7 @@ async function generatePivotWithSQL({
     sort: pivot.sort,
     sortDirection: pivot.sortDirection,
     sortField: pivot.sortField,
+    sortFieldTable: pivot.sortFieldTable,
     sortFieldType: pivot.sortFieldType,
     rowLimit: pivot.rowLimit,
     dateBucket: resolvedDateBucket
@@ -28132,12 +28133,10 @@ var useDashboardReportInternal = (reportId, config) => {
   const { dashboardCustomFilters } = (0, import_react2.useContext)(DashboardFiltersContext);
   const reportState = reports[reportId];
   const reportDashboardName = reportState?.dashboardName;
+  const reportDashboardFilterState = reportDashboardName ? dashboardFilters[reportDashboardName] : void 0;
   const reportDashboardFilters = (0, import_react2.useMemo)(() => {
-    if (!reportDashboardName) return [];
-    return Object.values(dashboardFilters[reportDashboardName] ?? {}).map(
-      (f) => f.filter
-    );
-  }, [dashboardFilters, reportDashboardName]);
+    return Object.values(reportDashboardFilterState ?? {}).map((f) => f.filter);
+  }, [reportDashboardFilterState]);
   const {
     data: dashboardData,
     dashboardFilters: dashboardFiltersInternal,
@@ -31769,7 +31768,7 @@ var import_jsx_runtime28 = require("react/jsx-runtime");
 var defaultValueFormatter = (value) => (value * 1).toFixed(1) + "%";
 var parseData2 = (data, colors, categoryKey, valueKey) => {
   const maxItems = 20;
-  const slicedData = deepCopy(data).slice(0, maxItems);
+  const slicedData = deepCopy(data.slice(0, maxItems));
   const totalValue = slicedData.reduce(
     (acc, dataPoint) => (
       // Big(acc)
@@ -32015,8 +32014,8 @@ var PieChartWrapper = import_react13.default.forwardRef(
       category = "pct_of_the_total",
       index = "status",
       data,
-      colors = [],
-      colorMap = {},
+      colors,
+      colorMap,
       variant = "donut",
       valueFormatter: valueFormatter2 = defaultValueFormatter,
       className,
@@ -32026,10 +32025,24 @@ var PieChartWrapper = import_react13.default.forwardRef(
       onClickLegendElement,
       yAxisFields,
       showLegend = false,
+      showAnimation,
+      isAnimationActive,
       ...other
     } = props;
     const isDonut = variant == "donut";
-    if (!data || data.length === 0) {
+    const chartData = data ?? [];
+    const parsedData = (0, import_react13.useMemo)(() => {
+      const palette = colorMap?.[category]?.primary ?? colors ?? [];
+      const containsCssVars = palette.some(
+        (color) => typeof color === "string" && color.includes("var(")
+      );
+      const resolvedColors = containsCssVars ? Array.from({ length: chartData.length }).map(
+        (_, idx) => palette[idx % palette.length] ?? palette[palette.length - 1] ?? "#808080"
+      ) : palette.length >= chartData.length ? palette.slice(0, chartData.length) : generateArrayFromColor(palette, chartData.length);
+      return parseData2(chartData, resolvedColors, index, category);
+    }, [category, colorMap, colors, chartData, index]);
+    const animationActive = isAnimationActive ?? showAnimation ?? true;
+    if (chartData.length === 0) {
       return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
         "div",
         {
@@ -32072,28 +32085,11 @@ var PieChartWrapper = import_react13.default.forwardRef(
             height: "100%",
             minWidth: 0,
             minHeight: 0,
-            initialDimension: { width: 1, height: 1 },
             children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_recharts.PieChart, { children: [
               /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
                 import_recharts.Pie,
                 {
-                  data: parseData2(
-                    data,
-                    (() => {
-                      const colorArray = colorMap[category] && colorMap[category]["primary"] && colorMap[category]["primary"] || colors;
-                      const containsCssVars = colorArray.some(
-                        (color) => typeof color === "string" && color.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
-                  ),
+                  data: parsedData,
                   cx: "50%",
                   cy: "50%",
                   startAngle: 90,
@@ -32103,7 +32099,7 @@ var PieChartWrapper = import_react13.default.forwardRef(
                   paddingAngle: 0,
                   dataKey: category,
                   nameKey: index,
-                  isAnimationActive: true,
+                  isAnimationActive: animationActive,
                   onClick: onClickChartElement,
                   labelLine: false,
                   label: false
@@ -33554,7 +33550,6 @@ function LineChart({
       height: "100%",
       minWidth: 0,
       minHeight: 0,
-      initialDimension: { width: 1, height: 1 },
       children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
         import_recharts2.ComposedChart,
         {
@@ -33840,7 +33835,7 @@ function RadarChart({
     );
   }
   const getCustomColor = (index, field) => {
-    let key = index === 0 ? "comparison" : "primary";
+    const key = index === 0 ? "comparison" : "primary";
     field = field.replace("comparison_", "");
     if (colorMap && colorMap[field]) {
       return colorMap[field][key];
@@ -33864,7 +33859,6 @@ function RadarChart({
       height: "100%",
       minWidth: 0,
       minHeight: 0,
-      initialDimension: { width: 1, height: 1 },
       children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
         import_recharts3.RadarChart,
         {
@@ -34290,7 +34284,6 @@ function BarChart({
           height: "100%",
           minWidth: 0,
           minHeight: 0,
-          initialDimension: { width: 1, height: 1 },
           children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
             import_recharts4.BarChart,
             {
@@ -39591,12 +39584,6 @@ function QuillTableDashboardComponent({
 init_valueFormatter();
 var import_jsx_runtime50 = require("react/jsx-runtime");
 var MAX_ROWS_FOR_GENERIC_TABLE = 500;
-function sumByKey(arr, key) {
-  return arr.reduce((acc, cur) => {
-    const val = parseInt(cur[key], 10);
-    return isNaN(val) ? acc : acc + val;
-  }, 0);
-}
 function Chart({
   colors,
   reportId,
@@ -40135,6 +40122,22 @@ var ChartDisplay = ({
       )
     };
   }, [config]);
+  const pieData = (0, import_react32.useMemo)(() => {
+    if (!config || config.chartType?.toLowerCase() !== "pie") return [];
+    if (config.pivot) return config.rows ?? [];
+    const rows = config.rows ?? [];
+    const configuredValueField = config.yAxisFields?.[0]?.field;
+    if (!configuredValueField) return rows;
+    const valueField = configuredValueField;
+    const total = rows.reduce((sum, row) => {
+      const value = parseInt(row[valueField] ?? "", 10);
+      return isNaN(value) ? sum : sum + value;
+    }, 0);
+    return rows.map((row) => ({
+      ...row,
+      count: parseInt(row[valueField] ?? "", 10) / total
+    }));
+  }, [config]);
   if (loading) {
     return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className, style: containerStyle, children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(LoadingComponent, {}) });
   } else if (config && !["metric", "table", "gauge", "US map", "World map"].includes(
@@ -40153,15 +40156,7 @@ var ChartDisplay = ({
       {
         className,
         containerStyle,
-        data: !config?.pivot ? config?.rows?.map((row) => {
-          return {
-            ...row,
-            count: (
-              // @ts-ignore
-              parseInt(row[config?.yAxisFields[0]?.field]) / sumByKey(config?.rows, config?.yAxisFields[0]?.field)
-            )
-          };
-        }) || [] : config?.rows || [],
+        data: pieData,
         category: config?.yAxisFields?.[0]?.field,
         index: config?.xAxisField,
         colors: chartColors,
@@ -40170,7 +40165,8 @@ var ChartDisplay = ({
         onClickChartElement,
         onClickLegendElement,
         yAxisFields: config?.yAxisFields,
-        showLegend: resolvedShowLegend
+        showLegend: resolvedShowLegend,
+        isAnimationActive
       }
     );
   }
@@ -40220,7 +40216,8 @@ var ChartDisplay = ({
         className,
         colorMap,
         onClickChartElement,
-        scrollable
+        scrollable,
+        showAnimation: isAnimationActive
       }
     );
   }
@@ -43583,6 +43580,7 @@ function StaticChart(props) {
     onClickLegendElement,
     containerStyle,
     showLegend,
+    showAnimation,
     className,
     hideTableChartOuterBorder = true
   } = props;
@@ -43641,6 +43639,7 @@ function StaticChart(props) {
       className,
       containerStyle: safeContainerStyle,
       showLegend,
+      isAnimationActive: showAnimation,
       onPageChange: useLocalPivotTablePagination ? void 0 : onPageChange,
       tableRowsLoading: useLocalPivotTablePagination ? false : pageLoading,
       onSortChange: useLocalPivotTablePagination ? void 0 : onSortChange,
@@ -59993,12 +59992,13 @@ var QUERY_BUILDER_MULTI_VALUE_OPERATORS = /* @__PURE__ */ new Set(["in", "notin"
 var TABLE_FORMAT_CACHE_MAX_ENTRIES = 5e3;
 var PIVOT_DATE_BUCKET_FORMAT_OPTIONS = ["date"];
 var PIVOT_DATE_BUCKET_OPTIONS = [
-  { label: "Automatic", value: "" },
+  { label: "Dynamic", value: "" },
   { label: "Daily", value: "day" },
   { label: "Weekly", value: "week" },
   { label: "Monthly", value: "month" },
   { label: "Yearly", value: "year" }
 ];
+var STANDARD_PIVOT_DATE_BUCKET_OPTIONS = PIVOT_DATE_BUCKET_OPTIONS.slice(1);
 var AXIS_FORMAT_OPTIONS = [
   { value: "string", label: "string" },
   { value: "whole_number", label: "whole number" },
@@ -60476,17 +60476,26 @@ function buildPivotAggregationsWithFieldTables({
     columnFieldTable
   };
 }
+function resolvePivotSortFieldTable(pivot, sortField) {
+  const explicitTable = String(pivot?.sortFieldTable ?? "").trim();
+  if (explicitTable && sortField === pivot?.sortField) return explicitTable;
+  if (sortField === pivot?.rowField) return pivot?.rowFieldTable;
+  if (sortField === pivot?.columnField) return pivot?.columnFieldTable;
+  return void 0;
+}
 function normalizePivotForRefreshComparison(pivot) {
   if (pivot == null) return pivot;
   const record = pivot;
   const {
     rowFieldTable: _pivotRowTable,
     columnFieldTable: _pivotColumnTable,
+    sortFieldTable: _pivotSortTable,
     rowFilter: _rowFilter,
     columnFilter: _columnFilter,
     aggregations,
     ...pivotRest
   } = record;
+  void _pivotSortTable;
   const next = { ...pivotRest };
   if (Array.isArray(aggregations)) {
     next.aggregations = aggregations.map((entry) => {
@@ -63288,6 +63297,7 @@ function useReport(reportIdArg, options = {}) {
   const { eventTracking } = (0, import_react61.useContext)(EventTrackingContext);
   const [draftSessionId, setDraftSessionId] = (0, import_react61.useState)(generateDraftSessionId);
   const useInMemoryEngines = options.useInMemoryEngines ?? false;
+  const dateBucketMode = options.dateBucketMode ?? "dynamic";
   const restrictFieldOptionsToSelectedDatasources = options.restrictFieldOptionsToSelectedDatasources ?? true;
   const reportOverride = options.reportOverride ?? null;
   const initialReportBuilderState = options.initialReportBuilderState ?? null;
@@ -64836,17 +64846,24 @@ function useReport(reportIdArg, options = {}) {
       rowTableHint,
       columnTableHint
     });
+    const configuredDateBucket = chartPivotHydratedFromSourceRef.current ? dateBucket : dateBucket ?? priorPivot?.dateBucket;
     const built = {
       ...priorPivot ?? {},
       rowField: effectiveRowField,
       rowFieldType,
       columnField: effectiveColumnField,
       columnFieldType,
-      dateBucket: chartPivotHydratedFromSourceRef.current ? dateBucket : dateBucket ?? priorPivot?.dateBucket,
+      dateBucket: configuredDateBucket,
       aggregations,
       ...rowFieldTable ? { rowFieldTable } : {},
       ...columnFieldTable ? { columnFieldTable } : {}
     };
+    if (dateBucketMode === "standard" && effectiveRowField && isDateType(String(rowFieldType ?? ""))) {
+      built.dateBucket = resolvePivotDateBucket({
+        pivot: built,
+        filters: internalFilters
+      }) ?? "month";
+    }
     return built;
   }, [
     aggregationState,
@@ -64854,8 +64871,10 @@ function useReport(reportIdArg, options = {}) {
     appliedAggregationState,
     baseReportBuilderTables,
     dateBucket,
+    dateBucketMode,
     groupColumnsBy,
     groupRowsBy,
+    internalFilters,
     schemaForReportBuilderState,
     sourceReport?.columnInternal,
     sourceReport?.columns,
@@ -65199,6 +65218,10 @@ function useReport(reportIdArg, options = {}) {
         ...pivotState,
         sort: Boolean(pivotSort?.sortField),
         sortField: pivotSort?.sortField,
+        sortFieldTable: resolvePivotSortFieldTable(
+          pivotState,
+          pivotSort?.sortField
+        ),
         sortDirection: pivotSort?.sortDirection,
         sortFieldType: resolvedSortFieldType,
         rowLimit: limit?.value
@@ -65856,6 +65879,10 @@ function useReport(reportIdArg, options = {}) {
       ...pivotState,
       sort: Boolean(pivotSort?.sortField),
       sortField: pivotSort?.sortField,
+      sortFieldTable: resolvePivotSortFieldTable(
+        pivotState,
+        pivotSort?.sortField
+      ),
       sortDirection: pivotSort?.sortDirection,
       sortFieldType: resolvedSortFieldType,
       rowLimit: limit?.value
@@ -68158,8 +68185,8 @@ function useReport(reportIdArg, options = {}) {
     groupRowsByOptions,
     groupColumnsBy,
     groupColumnsByOptions,
-    dateBucket,
-    dateBucketOptions: hasDatePivotRow ? PIVOT_DATE_BUCKET_OPTIONS : [],
+    dateBucket: dateBucketMode === "standard" ? pivotState?.dateBucket : dateBucket,
+    dateBucketOptions: hasDatePivotRow ? dateBucketMode === "standard" ? STANDARD_PIVOT_DATE_BUCKET_OPTIONS : PIVOT_DATE_BUCKET_OPTIONS : [],
     /** Encoded selection per aggregation slot (`'sum:transactions::amount'`, `'count:transactions'`, `''` = placeholder). Update via `setReport({ aggregations: nextStringArray })`. */
     aggregations: aggregationValues,
     /** Flat aggregation pick list shared by all slots; always contains every non-empty `aggregations` entry. */

package/dist/index.d.cts

@@ -558,6 +558,8 @@ interface BasePivot {
     sort?: boolean;
     sortDirection?: 'ASC' | 'DESC';
     sortField?: string;
+    /** Source table for sortField when it references a pivot dimension. */
+    sortFieldTable?: string;
     sortFieldType?: string;
     title?: string;
     triggerButtonText?: string;
@@ -2724,6 +2726,7 @@ interface StaticChartBaseProps {
     showLegend?: boolean;
     /** Strip QuillTable's outer frame when chart type is `table` (cell borders unchanged). */
     hideTableChartOuterBorder?: boolean;
+    showAnimation?: boolean;
 }
 type StaticChartProps = (StaticChartBaseProps & {
     className: string;
@@ -3052,6 +3055,12 @@ interface UseReportOptions {
     useInMemoryEngines?: boolean;
     reportOverride?: QuillReportInternal | null;
     initialReportBuilderState?: ReportBuilderState | null;
+    /**
+     * `dynamic` exposes an empty "Dynamic" selection when the bucket is inferred.
+     * `standard` exposes only concrete buckets and returns the currently resolved
+     * bucket from `useReport().dateBucket`. Defaults to `dynamic`.
+     */
+    dateBucketMode?: 'dynamic' | 'standard';
     /**
      * When the report payload has no `dashboardName` and the client has no
      * `defaultDashboard`, use this for engine tasks that require a dashboard

package/dist/index.d.ts

@@ -558,6 +558,8 @@ interface BasePivot {
     sort?: boolean;
     sortDirection?: 'ASC' | 'DESC';
     sortField?: string;
+    /** Source table for sortField when it references a pivot dimension. */
+    sortFieldTable?: string;
     sortFieldType?: string;
     title?: string;
     triggerButtonText?: string;
@@ -2724,6 +2726,7 @@ interface StaticChartBaseProps {
     showLegend?: boolean;
     /** Strip QuillTable's outer frame when chart type is `table` (cell borders unchanged). */
     hideTableChartOuterBorder?: boolean;
+    showAnimation?: boolean;
 }
 type StaticChartProps = (StaticChartBaseProps & {
     className: string;
@@ -3052,6 +3055,12 @@ interface UseReportOptions {
     useInMemoryEngines?: boolean;
     reportOverride?: QuillReportInternal | null;
     initialReportBuilderState?: ReportBuilderState | null;
+    /**
+     * `dynamic` exposes an empty "Dynamic" selection when the bucket is inferred.
+     * `standard` exposes only concrete buckets and returns the currently resolved
+     * bucket from `useReport().dateBucket`. Defaults to `dynamic`.
+     */
+    dateBucketMode?: 'dynamic' | 'standard';
     /**
      * When the report payload has no `dashboardName` and the client has no
      * `defaultDashboard`, use this for engine tasks that require a dashboard