pace-table-lib 1.0.68 → 1.0.70

package/dist/pace-table-lib.umd.js

@@ -17232,8 +17232,8 @@
     hideMarkerButton: false
   };
   function JQuerySparkLine({
-    width = 76,
-    height = 16,
+    width,
+    height,
     slPropData
   }) {
     const sparkRef = React.useRef(null);
@@ -17256,7 +17256,7 @@
           case SL_TYPE.LINE:
             {
               const sparkOptions = {
-                type: "line",
+                type: SL_TYPE.LINE,
                 width: `${width}px`,
                 height: `${height}px`,
                 lineColor: slPropData.slStyle.lineColor,
@@ -17274,12 +17274,12 @@
           case SL_TYPE.BAR:
             {
               $(sparkRef.current).sparkline([...slPropData.dataArr], {
-                type: "bar",
+                type: SL_TYPE.BAR,
                 width: `${width}px`,
                 height: `${height}px`,
-                barColor: slPropData.slStyle?.barColor,
+                barColor: slPropData.slStyle?.posBarColor,
                 negBarColor: slPropData.slStyle?.negBarColor,
-                zeroColor: slPropData.slStyle?.zeroBarColor,
+                zeroColor: slPropData.slStyle?.zeroColor,
                 barWidth: slPropData.slStyle?.barWidth,
                 barSpacing: slPropData.slStyle?.barSpacing,
                 chartRangeMin: 0
@@ -17289,7 +17289,7 @@
           case SL_TYPE.BOX:
             {
               $(sparkRef.current).sparkline([...slPropData.dataArr], {
-                type: "box",
+                type: SL_TYPE.BOX,
                 width: `${width}px`,
                 height: `${height}px`,
                 boxLineColor: slPropData.slStyle?.boxLineColor,
@@ -17302,7 +17302,7 @@
           case SL_TYPE.DISCRETE:
             {
               $(sparkRef.current).sparkline([...slPropData.dataArr], {
-                type: "discrete",
+                type: SL_TYPE.DISCRETE,
                 width: `${width}`,
                 height: `${height}px`,
                 lineColor: slPropData.slStyle?.lineColor || "#007bff",
@@ -17314,9 +17314,10 @@
           case SL_TYPE.PIE:
             {
               $(sparkRef.current).sparkline([...slPropData.dataArr], {
-                type: "pie",
-                // width: `${40}px`,
-                height: `${height}px`,
+                type: SL_TYPE.PIE,
+                //Why min in order to center align the pie chart , in case of fit table.
+                width: `${Math.min(height, width)}px`,
+                height: `${Math.min(height, width)}px`,
                 borderWidth: 0,
                 offset: slPropData.slStyle?.offset || 0,
                 tooltipFormatter: function(sparkline, options, fields) {
@@ -17332,14 +17333,14 @@
           case SL_TYPE.TRISTATE:
             {
               $(sparkRef.current).sparkline(slPropData.dataArr, {
-                type: "tristate",
+                type: SL_TYPE.TRISTATE,
                 width: `${width}px`,
                 height: `${height}px`,
                 posBarColor: slPropData.slStyle?.posBarColor || "#28a745",
                 // positive
                 negBarColor: slPropData.slStyle?.negBarColor || "#dc3545",
                 // negative
-                zeroBarColor: slPropData.slStyle?.zeroBarColor || "#bab0ac",
+                zeroBarColor: slPropData.slStyle?.zeroColor || "#bab0ac",
                 // neutral
                 barWidth: slPropData.slStyle?.barWidth || 4,
                 barSpacing: slPropData.slStyle?.barSpacing || 2,
@@ -17367,7 +17368,7 @@
       "span",
       {
         ref: sparkRef,
-        style: { display: "inline-block", verticalAlign: "middle" }
+        style: { display: "inline-block", verticalAlign: "middle", zIndex: 10 }
       }
     );
   }
@@ -17434,23 +17435,33 @@
     const outsideBorder = isOutsideBorderVisible ? createBorder(Border.LineWidth, Border.LineStyle, Border.LineColor) : null;
     const insideVBorder = isInsideVerticalBVisible ? createBorder(Border.VerticalBorderLineWidth, Border.VerticalBorderLineStyle, Border.VerticalBorderLineColor) : null;
     const insideHBorder = isInsideHorizontalBVisible ? createBorder(Border.HorizontalBorderLineWidth, Border.HorizontalBorderLineStyle, Border.HorizontalBorderLineColor) : null;
+    const {
+      ShowHeatMap,
+      HeatMapView,
+      HeatMapMinColor,
+      HeatMapMaxColor
+    } = HeatMap || {};
+    const gridRef = React.useRef(null);
     const renderDataCell = (label, styles, className, childClassName, toolTip, dataBarBg) => /* @__PURE__ */ jsxRuntimeExports.jsx(
       "div",
       {
         ...ToolTipVisibility ? { title: getCleanString(toolTip) ?? "" } : {},
         className,
         style: styles,
+        onContextMenu: styles.hasOwnProperty("oncontextmenu") ? styles.oncontextmenu : null,
         children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
           "div",
           {
             className: `${childClassName} cell_inner`,
             style: {
               fontFamily: styles.fontFamily,
-              background: dataBarBg ?? "none"
+              background: dataBarBg ?? "none",
+              //Show icon only then align icon to center
+              ...styles?.iconPosition === ICON_POSITION.OIcon ? { justifyContent: "center" } : {}
             },
             children: [
               styles && styles?.iconPosition === ICON_POSITION.Left && styles?.iconUrl && /* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: styles?.iconUrl, className: "cell_icon left" }),
-              styles && styles?.iconPosition === ICON_POSITION.OIcon && styles?.iconUrl ? /* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: styles?.iconUrl, className: "cell_icon left" }) : /* @__PURE__ */ jsxRuntimeExports.jsx("span", { style: { textAlign: styles.justifyContent }, className: "cell_text", children: label }),
+              styles && styles?.iconPosition === ICON_POSITION.OIcon && styles?.iconUrl ? /* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: styles?.iconUrl, className: "cell_icon" }) : /* @__PURE__ */ jsxRuntimeExports.jsx("span", { style: { textAlign: styles.justifyContent }, className: "cell_text", children: label }),
               styles && styles?.iconPosition === ICON_POSITION.Right && styles?.iconUrl && /* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: styles?.iconUrl, className: "cell_icon right" })
             ]
           }
@@ -17497,12 +17508,6 @@
       color: DataFieldColor,
       ...getFontStyleObj(DataFieldFontStyle)
     }), [DataField]);
-    const {
-      ShowHeatMap,
-      HeatMapView,
-      HeatMapMinColor,
-      HeatMapMaxColor
-    } = HeatMap || {};
     const fixedRowCount = React.useMemo(() => {
       if (!isColHeaderVisible) {
         return headerAtStart && isColTotalOn ? 1 : 0;
@@ -17610,7 +17615,6 @@
       Table2.TableWidth,
       Table2.FixHeaderWidth
     ]);
-    const gridRef = React.useRef(null);
     React.useEffect(() => {
       const t = setTimeout(() => {
         if (gridRef.current) {
@@ -18234,7 +18238,7 @@
             height: rowCellHeight,
             top: baseTop + measuresBySlice.length * rowCellHeight,
             left: widthForTheTotal,
-            background: getBgColorForCell(rowCount - 1, rowColors),
+            background: finalStyleForRow.background ?? getBgColorForCell(getGroupIndex(measuresBySlice), rowColors),
             fontWeight: "bold"
           };
           let measures = [];
@@ -18272,7 +18276,7 @@
             top: fixedRowCount * rowCellHeight + rowIdx * rowCellHeight,
             // directly under headers
             left: sparkColIndex * fixedColWidth,
-            background: getBgColorForCell(rowIdx - 1, rowColors),
+            background: rowHeaderBandColorMap[item.sliceMark[0]],
             display: "flex",
             justifyContent: "center",
             alignItems: "center"
@@ -18430,10 +18434,12 @@
         if (operator === "duplicate") {
           const currentVal = value?.toLowerCase();
           if (type === CONDITIONAL_FORMAT_FOR.ROW) {
-            const allChildren = measuresBySlice.map((item) => item.sliceMark[level]?.toLowerCase()).filter((v) => v);
-            return allChildren.filter((v) => v === currentVal).length > 1;
+            const marks = measuresBySlice.map((m) => m.sliceMark);
+            const renderedValues = measuresBySlice.map((item, i) => isFirstOccurrence(marks, i, level) ? item.sliceMark[level]?.toLowerCase() : null).filter((v) => v !== null && v !== void 0);
+            return renderedValues.filter((v) => v === currentVal).length > 1;
           } else if (type === CONDITIONAL_FORMAT_FOR.COLUMN) {
-            return dimensionMarks.filter((row) => row.some((item) => item?.toLowerCase() === currentVal)).length > 1;
+            const renderedValues = dimensionMarks.map((d, i) => isFirstOccurrence(dimensionMarks, i, level) ? d[level]?.toLowerCase() : null).filter((v) => v !== null && v !== void 0);
+            return renderedValues.filter((v) => v === currentVal).length > 1;
           }
         }
         if (type === CONDITIONAL_FORMAT_FOR.VALUE) {
@@ -18593,55 +18599,38 @@
         innerDivBg
       );
     };
-    function getSparkLineStyleObj(lineType) {
+    function getSparkLineStyleObj() {
       const slStyle = structuredClone(DEFAULT_SL_STYLE);
-      switch (lineType) {
-        case SL_TYPE.LINE: {
-          if (SparkLine?.SparkLineColor)
-            slStyle.lineColor = SparkLine.SparkLineColor;
-          if (SparkLine?.SparkLineWidth)
-            slStyle.lineWidth = SparkLine.SparkLineWidth;
-          if (SparkLine?.HideMarkerButton !== void 0)
-            slStyle.hideMarkerButton = SparkLine.HideMarkerButton;
-          if (SparkLine?.SparkLineMarkerColor)
-            slStyle.spotColor = SparkLine.SparkLineMarkerColor;
-          break;
-        }
-        case SL_TYPE.BAR: {
-          if (SparkLine?.PositiveBarChartColor)
-            slStyle.posBarColor = SparkLine.PositiveBarChartColor;
-          if (SparkLine?.NegativeBarChartColor)
-            slStyle.negBarColor = SparkLine.NegativeBarChartColor;
-          if (SparkLine?.ZeroBarChartColor)
-            slStyle.zeroColor = SparkLine.ZeroBarChartColor;
-          if (SparkLine?.BarWidth)
-            slStyle.barWidth = SparkLine.BarWidth;
-          if (SparkLine?.BarSpacing)
-            slStyle.barSpacing = SparkLine.BarSpacing;
-          break;
-        }
-        case SL_TYPE.DISCRETE: {
-          if (SparkLine?.ThresholdValue !== void 0)
-            slStyle.thresholdValue = SparkLine.ThresholdValue;
-          if (SparkLine?.ThresholdColor)
-            slStyle.thresholdColor = SparkLine.ThresholdColor;
-          break;
-        }
-        case SL_TYPE.BOX: {
-          if (SparkLine?.MedianColor)
-            slStyle.medianColor = SparkLine.MedianColor;
-          if (SparkLine?.BoxFillColor)
-            slStyle.boxFillColor = SparkLine.BoxFillColor;
-          if (SparkLine?.BoxBorderColor)
-            slStyle.boxLineColor = SparkLine.BoxBorderColor;
-          if (SparkLine?.MinMaxLineColor)
-            slStyle.whiskerColor = SparkLine.MinMaxLineColor;
-          break;
-        }
-        case SL_TYPE.PIE: {
-          break;
-        }
-      }
+      if (SparkLine?.SparkLineColor)
+        slStyle.lineColor = SparkLine.SparkLineColor;
+      if (SparkLine?.SparkLineWidth)
+        slStyle.lineWidth = SparkLine.SparkLineWidth;
+      if (SparkLine?.HideMarkerButton !== void 0)
+        slStyle.hideMarkerButton = SparkLine.HideMarkerButton;
+      if (SparkLine?.SparkLineMarkerColor)
+        slStyle.spotColor = SparkLine.SparkLineMarkerColor;
+      if (SparkLine?.PositiveBarChartColor)
+        slStyle.posBarColor = SparkLine.PositiveBarChartColor;
+      if (SparkLine?.NegativeBarChartColor)
+        slStyle.negBarColor = SparkLine.NegativeBarChartColor;
+      if (SparkLine?.ZeroBarChartColor)
+        slStyle.zeroColor = SparkLine.ZeroBarChartColor;
+      if (SparkLine?.BarWidth)
+        slStyle.barWidth = SparkLine.BarWidth;
+      if (SparkLine?.BarSpacing)
+        slStyle.barSpacing = SparkLine.BarSpacing;
+      if (SparkLine?.ThresholdValue !== void 0)
+        slStyle.thresholdValue = SparkLine.ThresholdValue;
+      if (SparkLine?.ThresholdColor)
+        slStyle.thresholdColor = SparkLine.ThresholdColor;
+      if (SparkLine?.MedianColor)
+        slStyle.medianColor = SparkLine.MedianColor;
+      if (SparkLine?.BoxFillColor)
+        slStyle.boxFillColor = SparkLine.BoxFillColor;
+      if (SparkLine?.BoxBorderColor)
+        slStyle.boxLineColor = SparkLine.BoxBorderColor;
+      if (SparkLine?.MinMaxLineColor)
+        slStyle.whiskerColor = SparkLine.MinMaxLineColor;
       return slStyle;
     }
     function getSparkLine(dataArr, styleObj) {
@@ -18649,7 +18638,7 @@
       const lineType = SPARK_LINE_TYPE_MAPPING[SparkLine.SparkLineType];
       const slPropData = {
         dataArr,
-        slStyle: getSparkLineStyleObj(lineType),
+        slStyle: getSparkLineStyleObj(),
         slType: lineType
       };
       return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "spark_line_div", style: { ...styleObj }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -18860,15 +18849,27 @@
   const interpolateColor = (minColor, maxColor, factor) => {
     const toRgb = (hex) => {
       const clean = hex.replace("#", "");
+      if (!/^[0-9A-Fa-f]{6}$/.test(clean)) {
+        return { r: 0, g: 0, b: 0 };
+      }
       const n = parseInt(clean, 16);
-      return { r: n >> 16 & 255, g: n >> 8 & 255, b: n & 255 };
+      return {
+        r: n >> 16 & 255,
+        g: n >> 8 & 255,
+        b: n & 255
+      };
     };
-    const toHex = (r2, g, b) => `#${[r2, g, b]?.map((x) => x.toString(16).padStart(2, "0")).join("")}`;
-    const c1 = toRgb(minColor), c2 = toRgb(maxColor);
+    const toHex = (r2, g, b) => `#${[r2, g, b].map((x) => {
+      const safe = Number.isFinite(x) ? x : 0;
+      return safe.toString(16).padStart(2, "0");
+    }).join("")}`;
+    const c1 = toRgb(minColor);
+    const c2 = toRgb(maxColor);
+    const safeFactor = Number.isFinite(factor) ? Math.max(0, Math.min(1, factor)) : 0;
     return toHex(
-      Math.round(c1.r + (c2.r - c1.r) * factor),
-      Math.round(c1.g + (c2.g - c1.g) * factor),
-      Math.round(c1.b + (c2.b - c1.b) * factor)
+      Math.round(c1.r + (c2.r - c1.r) * safeFactor),
+      Math.round(c1.g + (c2.g - c1.g) * safeFactor),
+      Math.round(c1.b + (c2.b - c1.b) * safeFactor)
     );
   };
   function getHeatmapColor(value, minValue, maxValue, minColor, maxColor) {
@@ -19172,6 +19173,18 @@
     const [showCornerMenu, setShowCornerMenu] = React.useState(false);
     const [collapsedRows, setCollapsedRows] = React.useState(/* @__PURE__ */ new Set());
     const [collapsedCols, setCollapsedCols] = React.useState(/* @__PURE__ */ new Set());
+    const cornerMenuRef = React.useRef(null);
+    React.useEffect(() => {
+      const handleOutsideClick = (event) => {
+        if (cornerMenuRef.current && !cornerMenuRef.current.contains(event.target)) {
+          setShowCornerMenu(false);
+        }
+      };
+      document.addEventListener("mousedown", handleOutsideClick);
+      return () => {
+        document.removeEventListener("mousedown", handleOutsideClick);
+      };
+    }, []);
     const visibleRows = React.useMemo(
       () => flatRows?.filter((row) => {
         const nonSubSegs = row.segments?.filter((s) => s !== "!subtotal");
@@ -19979,6 +19992,7 @@
           }
         }
         let percentage = 0;
+        let kpiColor = "";
         if (KPI.KPIVisibility) {
           const baseType = tableStyleProps.KPI.KPIBaseFormat;
           const values = baseType === "Column-wise" ? flatRows?.map(
@@ -19995,7 +20009,7 @@
             0,
             Math.min(100, (Number(rawValue) - min) / (max - min) * 100)
           ) : 0;
-          interpolateColor(
+          kpiColor = interpolateColor(
             KPI.KPIMinColor,
             KPI.KPIMaxColor,
             percentage / 100
@@ -20038,7 +20052,7 @@
               "div",
               {
                 className: "kpi-wrapper cell_inner_pivot",
-                style: { justifyContent: dataCellFont.justifyContent },
+                style: { justifyContent: dataCellFont.justifyContent, background: kpiColor ?? "none" },
                 children: [
                   conditionalFormatObj && conditionalFormatObj?.iconPosition === ICON_POSITION.Left && conditionalFormatObj?.iconUrl && /* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: conditionalFormatObj?.iconUrl, className: "cell_icon_pivot left" }),
                   conditionalFormatObj && conditionalFormatObj?.iconPosition === ICON_POSITION.OIcon && conditionalFormatObj?.iconUrl ? /* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: conditionalFormatObj?.iconUrl, className: "cell_icon_pivot left" }) : /* @__PURE__ */ jsxRuntimeExports.jsx("span", { style: { textAlign: dataCellFont.justifyContent, ...shouldWrap ? { wordBreak: "break-word", whiteSpace: "normal" } : { whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" } }, className: "kpi-text cell_text_pivot_pivot", children: formattedValue }),
@@ -20130,7 +20144,7 @@
                               children: "+/−"
                             }
                           ),
-                          showCornerMenu && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "pivot-corner-menu", children: [
+                          showCornerMenu && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "pivot-corner-menu", ref: cornerMenuRef, children: [
                             hasCollapsibleRows && /* @__PURE__ */ jsxRuntimeExports.jsxs(
                               "div",
                               {