@quillsql/react 2.16.66 → 2.16.68

package/dist/index.cjs

@@ -28132,12 +28132,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 +31767,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 +32013,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 +32024,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 +32084,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 +32098,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 +33549,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 +33834,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 +33858,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 +34283,6 @@ function BarChart({
           height: "100%",
           minWidth: 0,
           minHeight: 0,
-          initialDimension: { width: 1, height: 1 },
           children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
             import_recharts4.BarChart,
             {
@@ -39092,6 +39084,7 @@ function GaugeChart({
   xAxisField,
   xAxisFormat,
   containerStyle,
+  className,
   colors,
   isAnimationActive = true
 }) {
@@ -39105,6 +39098,7 @@ function GaugeChart({
       percentage: normalizedPercentage,
       xAxisFormat,
       containerStyle: { ...containerStyle },
+      className,
       colors,
       isAnimationActive
     }
@@ -39113,6 +39107,7 @@ function GaugeChart({
 function D3Gauge({
   percentage,
   containerStyle,
+  className,
   xAxisFormat,
   colors,
   isAnimationActive
@@ -39281,7 +39276,8 @@ function D3Gauge({
     "div",
     {
       ref: containerRef,
-      style: { width: "100%", height: "100%", ...containerStyle }
+      style: { width: "100%", ...containerStyle },
+      className
     }
   );
 }
@@ -39587,12 +39583,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,
@@ -40131,6 +40121,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(
@@ -40149,15 +40155,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,
@@ -40166,7 +40164,8 @@ var ChartDisplay = ({
         onClickChartElement,
         onClickLegendElement,
         yAxisFields: config?.yAxisFields,
-        showLegend: resolvedShowLegend
+        showLegend: resolvedShowLegend,
+        isAnimationActive
       }
     );
   }
@@ -40216,7 +40215,8 @@ var ChartDisplay = ({
         className,
         colorMap,
         onClickChartElement,
-        scrollable
+        scrollable,
+        showAnimation: isAnimationActive
       }
     );
   }
@@ -40371,6 +40371,7 @@ var ChartDisplay = ({
         xAxisField: config?.xAxisField ?? "",
         xAxisFormat: config?.xAxisFormat ?? "whole_number",
         containerStyle,
+        className,
         colors: chartColors,
         isAnimationActive
       }
@@ -43578,7 +43579,9 @@ function StaticChart(props) {
     onClickLegendElement,
     containerStyle,
     showLegend,
-    className
+    showAnimation,
+    className,
+    hideTableChartOuterBorder = true
   } = props;
   const {
     report,
@@ -43635,9 +43638,17 @@ function StaticChart(props) {
       className,
       containerStyle: safeContainerStyle,
       showLegend,
+      isAnimationActive: showAnimation,
       onPageChange: useLocalPivotTablePagination ? void 0 : onPageChange,
       tableRowsLoading: useLocalPivotTablePagination ? false : pageLoading,
-      onSortChange: useLocalPivotTablePagination ? void 0 : onSortChange
+      onSortChange: useLocalPivotTablePagination ? void 0 : onSortChange,
+      tableChartWrapperBorders: hideTableChartOuterBorder && report?.chartType === "table" ? {
+        borderRadius: 0,
+        borderLeft: "none",
+        borderRight: "none",
+        borderTop: "none",
+        borderBottom: "none"
+      } : void 0
     }
   );
 }

package/dist/index.d.cts

@@ -2722,6 +2722,9 @@ interface StaticChartBaseProps {
     onClickChartElement?: (data: any) => void;
     onClickLegendElement?: (data: any) => void;
     showLegend?: boolean;
+    /** Strip QuillTable's outer frame when chart type is `table` (cell borders unchanged). */
+    hideTableChartOuterBorder?: boolean;
+    showAnimation?: boolean;
 }
 type StaticChartProps = (StaticChartBaseProps & {
     className: string;

package/dist/index.d.ts

@@ -2722,6 +2722,9 @@ interface StaticChartBaseProps {
     onClickChartElement?: (data: any) => void;
     onClickLegendElement?: (data: any) => void;
     showLegend?: boolean;
+    /** Strip QuillTable's outer frame when chart type is `table` (cell borders unchanged). */
+    hideTableChartOuterBorder?: boolean;
+    showAnimation?: boolean;
 }
 type StaticChartProps = (StaticChartBaseProps & {
     className: string;