pace-table-lib 1.0.68 → 1.0.70

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

@@ -17214,8 +17214,8 @@ const DEFAULT_SL_STYLE = {
   hideMarkerButton: false
 };
 function JQuerySparkLine({
-  width = 76,
-  height = 16,
+  width,
+  height,
   slPropData
 }) {
   const sparkRef = useRef(null);
@@ -17238,7 +17238,7 @@ function JQuerySparkLine({
         case SL_TYPE.LINE:
           {
             const sparkOptions = {
-              type: "line",
+              type: SL_TYPE.LINE,
               width: `${width}px`,
               height: `${height}px`,
               lineColor: slPropData.slStyle.lineColor,
@@ -17256,12 +17256,12 @@ function JQuerySparkLine({
         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
@@ -17271,7 +17271,7 @@ function JQuerySparkLine({
         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,
@@ -17284,7 +17284,7 @@ function JQuerySparkLine({
         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",
@@ -17296,9 +17296,10 @@ function JQuerySparkLine({
         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) {
@@ -17314,14 +17315,14 @@ function JQuerySparkLine({
         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,
@@ -17349,7 +17350,7 @@ function JQuerySparkLine({
     "span",
     {
       ref: sparkRef,
-      style: { display: "inline-block", verticalAlign: "middle" }
+      style: { display: "inline-block", verticalAlign: "middle", zIndex: 10 }
     }
   );
 }
@@ -17416,23 +17417,33 @@ function StaticTable({
   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 = 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" })
           ]
         }
@@ -17479,12 +17490,6 @@ function StaticTable({
     color: DataFieldColor,
     ...getFontStyleObj(DataFieldFontStyle)
   }), [DataField]);
-  const {
-    ShowHeatMap,
-    HeatMapView,
-    HeatMapMinColor,
-    HeatMapMaxColor
-  } = HeatMap || {};
   const fixedRowCount = useMemo(() => {
     if (!isColHeaderVisible) {
       return headerAtStart && isColTotalOn ? 1 : 0;
@@ -17592,7 +17597,6 @@ function StaticTable({
     Table2.TableWidth,
     Table2.FixHeaderWidth
   ]);
-  const gridRef = useRef(null);
   useEffect(() => {
     const t = setTimeout(() => {
       if (gridRef.current) {
@@ -18216,7 +18220,7 @@ function StaticTable({
           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 = [];
@@ -18254,7 +18258,7 @@ function StaticTable({
           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"
@@ -18412,10 +18416,12 @@ function StaticTable({
       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) {
@@ -18575,55 +18581,38 @@ function StaticTable({
       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) {
@@ -18631,7 +18620,7 @@ function StaticTable({
     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(
@@ -18842,15 +18831,27 @@ function hexToRgb(hex) {
 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) {
@@ -19154,6 +19155,18 @@ const PivotTable = ({
   const [showCornerMenu, setShowCornerMenu] = useState(false);
   const [collapsedRows, setCollapsedRows] = useState(/* @__PURE__ */ new Set());
   const [collapsedCols, setCollapsedCols] = useState(/* @__PURE__ */ new Set());
+  const cornerMenuRef = useRef(null);
+  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 = useMemo(
     () => flatRows?.filter((row) => {
       const nonSubSegs = row.segments?.filter((s) => s !== "!subtotal");
@@ -19961,6 +19974,7 @@ const PivotTable = ({
         }
       }
       let percentage = 0;
+      let kpiColor = "";
       if (KPI.KPIVisibility) {
         const baseType = tableStyleProps.KPI.KPIBaseFormat;
         const values = baseType === "Column-wise" ? flatRows?.map(
@@ -19977,7 +19991,7 @@ const PivotTable = ({
           0,
           Math.min(100, (Number(rawValue) - min) / (max - min) * 100)
         ) : 0;
-        interpolateColor(
+        kpiColor = interpolateColor(
           KPI.KPIMinColor,
           KPI.KPIMaxColor,
           percentage / 100
@@ -20020,7 +20034,7 @@ const PivotTable = ({
             "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 }),
@@ -20112,7 +20126,7 @@ const PivotTable = ({
                             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",
                             {