pace-table-lib 1.0.8 → 1.0.9

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

@@ -8051,45 +8051,48 @@
     return new Date(ms);
   }
   function formatDate(value, formatKey) {
-    const date = toDateFromExcel(value);
-    const day = pad(date.getDate());
-    const month = pad(date.getMonth() + 1);
-    const year = date.getFullYear();
-    const shortYear = year.toString().slice(-2);
-    const monthShort = MONTHS_SHORT[date.getMonth()];
-    const monthFull = MONTHS_FULL[date.getMonth()];
-    switch (formatKey) {
-      case DATE_FORMAT_OBJ.DD_MM_YYYY:
-        return `${day}-${month}-${year}`;
-      case DATE_FORMAT_OBJ.MM_DD_YYYY:
-        return `${month}-${day}-${year}`;
-      case DATE_FORMAT_OBJ.YYYY_MM_DD:
-        return `${year}-${month}-${day}`;
-      case DATE_FORMAT_OBJ.YYYY:
-        return `${year}`;
-      case DATE_FORMAT_OBJ.DD_MM:
-        return `${day}-${month}`;
-      case DATE_FORMAT_OBJ.MMM_YY:
-        return `${monthShort}-${shortYear}`;
-      case DATE_FORMAT_OBJ.YY_MMM:
-        return `${shortYear}-${monthShort}`;
-      case DATE_FORMAT_OBJ.MM_YYYY:
-        return `${month}-${year}`;
-      case DATE_FORMAT_OBJ.YYYY_MM:
-        return `${year}-${month}`;
-      case DATE_FORMAT_OBJ.MMMM_YYYY:
-        return `${monthFull}-${year}`;
-      case DATE_FORMAT_OBJ.MMMM_YY:
-        return `${monthFull}-${shortYear}`;
-      case DATE_FORMAT_OBJ.DD_MMM:
-        return `${day}-${monthShort}`;
-      case DATE_FORMAT_OBJ.DD_MMM_YY:
-        return `${day}-${monthShort}-${shortYear}`;
-      case DATE_FORMAT_OBJ.DD_MMM_YYYY:
-        return `${day}-${monthShort}-${year}`;
-      default:
-        throw new Error("Unsupported date format: " + formatKey);
+    try {
+      const date = toDateFromExcel(value);
+      const day = pad(date.getDate());
+      const month = pad(date.getMonth() + 1);
+      const year = date.getFullYear();
+      const shortYear = year.toString().slice(-2);
+      const monthShort = MONTHS_SHORT[date.getMonth()];
+      const monthFull = MONTHS_FULL[date.getMonth()];
+      switch (formatKey) {
+        case DATE_FORMAT_OBJ.DD_MM_YYYY:
+          return `${day}-${month}-${year}`;
+        case DATE_FORMAT_OBJ.MM_DD_YYYY:
+          return `${month}-${day}-${year}`;
+        case DATE_FORMAT_OBJ.YYYY_MM_DD:
+          return `${year}-${month}-${day}`;
+        case DATE_FORMAT_OBJ.YYYY:
+          return `${year}`;
+        case DATE_FORMAT_OBJ.DD_MM:
+          return `${day}-${month}`;
+        case DATE_FORMAT_OBJ.MMM_YY:
+          return `${monthShort}-${shortYear}`;
+        case DATE_FORMAT_OBJ.YY_MMM:
+          return `${shortYear}-${monthShort}`;
+        case DATE_FORMAT_OBJ.MM_YYYY:
+          return `${month}-${year}`;
+        case DATE_FORMAT_OBJ.YYYY_MM:
+          return `${year}-${month}`;
+        case DATE_FORMAT_OBJ.MMMM_YYYY:
+          return `${monthFull}-${year}`;
+        case DATE_FORMAT_OBJ.MMMM_YY:
+          return `${monthFull}-${shortYear}`;
+        case DATE_FORMAT_OBJ.DD_MMM:
+          return `${day}-${monthShort}`;
+        case DATE_FORMAT_OBJ.DD_MMM_YY:
+          return `${day}-${monthShort}-${shortYear}`;
+        case DATE_FORMAT_OBJ.DD_MMM_YYYY:
+          return `${day}-${monthShort}-${year}`;
+      }
+    } catch (error) {
+      console.log(error);
     }
+    return value;
   }
   function formatValue(value, format, decimalValues = 2, displayUnit = DISPLAY_UNITS_OBJ.NONE) {
     try {
@@ -8152,8 +8155,8 @@
       }
     } catch (error) {
       console.error("Error in formatValue:", error);
-      return value;
     }
+    return value;
   }
   function getFontStyleObj(stylePayload) {
     let baseStyleObj = {
@@ -8260,6 +8263,14 @@
     if (format.hasOwnProperty("decimalPrecision")) obj.decimalPrecision = format.decimalPrecision;
     if (format.hasOwnProperty("displayUnits")) obj.displayUnits = format.displayUnits;
   }
+  function getPercentageBy(dataValue, totalValue) {
+    const num = Number(dataValue);
+    const den = Number(totalValue);
+    if (isNaN(num) || isNaN(den)) return num;
+    if (den === 0) return num;
+    const percentage = num / den;
+    return percentage;
+  }
   const renderDataCell = (label, styles, className, childClassName, toolTip, dataBarBg) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { title: toolTip ?? label, className, style: styles, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: childClassName, style: { fontFamily: styles.fontFamily, textAlign: styles.justifyContent, background: dataBarBg ?? "none" }, children: label }) });
   function StaticTable({
     tableData,
@@ -8429,20 +8440,6 @@
         }
       );
     }, [rawDataMatrix, isDataBarOn, KPI.KPIBaseFormat]);
-    const percentageMatrix = React.useMemo(() => {
-      console.log("Calculating percentage matrix");
-      if (DataField.hasOwnProperty("percentageBy") && DataField.percentageBy?.toLowerCase() !== "absolute")
-        return computeMatrix(
-          rawDataMatrix,
-          DataField.percentageBy,
-          (v, min, max) => {
-            if (max === min) return 1;
-            const pct = (v - min) / (max - min);
-            return Math.min(1, Math.max(0, pct));
-          }
-        );
-      console.log(DataField?.percentageBy);
-    }, [rawDataMatrix, DataField, DataField?.percentageBy]);
     const cornerCells = React.useMemo(() => {
       const cells = [];
       const baseStyle = {
@@ -8529,9 +8526,7 @@
           DisplayUnits
         );
         if (DataField.hasOwnProperty("percentageBy") && DataField.percentageBy && DataField.percentageBy?.toLowerCase() !== "absolute") {
-          const lastRow = percentageMatrix && percentageMatrix[percentageMatrix.length - 1];
-          const lastVal = lastRow && lastRow[lastRow?.length - 1];
-          label = formatValue(lastVal, VALUE_FORMAT_OBJ.PERCENT_SHORT);
+          label = formatValue(1, VALUE_FORMAT_OBJ.PERCENT_SHORT);
         }
         cells.push({
           label,
@@ -8605,7 +8600,13 @@
             const parent = dimensionMarks[i][0] ?? "";
             if (isFirstOccurrence(dimensionMarks, i, level)) {
               const span = getSpan(dimensionMarks, i, level);
-              const colLabel = getCleanString(dimensionMarks[i][level]);
+              let colLabel = getCleanString(dimensionMarks[i][level]);
+              if (tableData.hasOwnProperty("columnDateFormatObj") && tableData?.columnDateFormatObj) {
+                const dFormat = tableData.columnDateFormatObj[level];
+                if (dFormat) {
+                  colLabel = formatValue(colLabel, dFormat);
+                }
+              }
               levelStyle.background = parentColorMap[parent];
               const finalStyleForColumn = getFinalStyleObj(STYLE_FOR.COLUMN, levelStyle, colLabel, level);
               headers.push({
@@ -8626,8 +8627,7 @@
             let label = formatValue(item.columnTotal, NumberFormat, DataFieldDecimalPrecision, DisplayUnits);
             const innerBg = getBgColorForDataBar(0, idx);
             if (DataField.hasOwnProperty("percentageBy") && DataField.percentageBy && DataField.percentageBy?.toLowerCase() !== "absolute") {
-              const percentageVal = percentageMatrix && percentageMatrix[percentageMatrix?.length - 1][idx];
-              label = formatValue(percentageVal, VALUE_FORMAT_OBJ.PERCENT_SHORT);
+              label = formatValue(1, VALUE_FORMAT_OBJ.PERCENT_SHORT);
             }
             headers.push({
               ...dataCellFont,
@@ -8693,7 +8693,13 @@
             }
             if (isFirstOccurrence(marks, i, level)) {
               const span = getSpan(marks, i, level);
-              const rowLabel = marks[i][level];
+              let rowLabel = marks[i][level];
+              if (tableData.hasOwnProperty("rowDateFormatObj") && tableData?.rowDateFormatObj) {
+                const dFormat = tableData.rowDateFormatObj[level];
+                if (dFormat) {
+                  rowLabel = formatValue(rowLabel, dFormat);
+                }
+              }
               const finalStyleForRow = getFinalStyleObj(STYLE_FOR.ROW, baseStyleObj, rowLabel, level, groupIndex);
               headers.push({
                 ...finalStyleForRow,
@@ -8718,10 +8724,7 @@
             let label = formatValue(row.rowTotal, NumberFormat, DataFieldDecimalPrecision, DisplayUnits);
             const innerBg = getBgColorForDataBar(i, dataBarMatrix[0]?.length - 1);
             if (DataField.hasOwnProperty("percentageBy") && DataField.percentageBy && DataField.percentageBy?.toLowerCase() !== "absolute") {
-              const rowData = (percentageMatrix && percentageMatrix[i]) ?? [0];
-              const percentageVal = rowData[rowData?.length - 1];
-              label = formatValue(percentageVal, VALUE_FORMAT_OBJ.PERCENT_SHORT);
-              console.log(rawDataMatrix);
+              label = formatValue(1, VALUE_FORMAT_OBJ.PERCENT_SHORT);
             }
             headers.push({
               ...dataCellFont,
@@ -8778,90 +8781,55 @@
       if (rowIndex < fixedRowCount || columnIndex < fixedColCount) return null;
       const rowIdxHeat = rowIndex - fixedRowCount;
       const colIdxHeat = columnIndex - fixedColCount;
-      let pct;
-      let innerDivBg = "none";
-      if (isDataBarOn) {
-        if (showDataBarValOnTooltip) {
-          const val = dataBarMatrix[rowIdxHeat]?.[colIdxHeat];
-          if (val !== void 0) pct = `${(val * 100).toFixed(2)}%`;
-        }
-        innerDivBg = getBgColorForDataBar(rowIdxHeat, colIdxHeat);
-      }
-      const parent = measuresBySlice[rowIdxHeat]?.sliceMark?.[0];
-      const parentBg = parent ? parentBandColorMap[parent] : void 0;
-      let outerDivBg = "none";
-      if (ShowHeatMap) {
-        outerDivBg = getBgColorForHetMap(rowIdxHeat, colIdxHeat);
-      } else {
-        outerDivBg = parentBg ?? dataColors.evenColor;
-      }
-      const baseStyle = {
-        ...style,
-        ...dataCellFont,
-        background: outerDivBg
-      };
+      const isPercentageMode = DataField?.percentageBy?.toLowerCase?.() && DataField.percentageBy.toLowerCase() !== "absolute";
       const isLastRow = rowIndex === rowCount - 1;
       const isLastCol = columnIndex === columnCount - 1;
+      const val = dataBarMatrix[rowIdxHeat]?.[colIdxHeat];
+      const pct = isDataBarOn && showDataBarValOnTooltip && val !== void 0 ? `${(val * 100).toFixed(2)}%` : void 0;
+      const innerDivBg = isDataBarOn ? getBgColorForDataBar(rowIdxHeat, colIdxHeat) : "none";
+      const parent = measuresBySlice[rowIdxHeat]?.sliceMark?.[0];
+      const outerDivBg = ShowHeatMap ? getBgColorForHetMap(rowIdxHeat, colIdxHeat) : parent ? parentBandColorMap[parent] : dataColors.evenColor;
+      const baseStyle = { ...style, ...dataCellFont, background: outerDivBg };
       let rawValue;
       let isBold = true;
       const bgColorForTotals = getBgColorForCell(rowCount - fixedRowCount, dataColors);
       if (isColTotalOn && isRowTotalOn && !headerAtStart && isLastRow && isLastCol) {
         baseStyle.background = bgColorForTotals;
-        rawValue = grandTotal;
-        if (DataField.hasOwnProperty("percentageBy") && DataField.percentageBy && DataField.percentageBy?.toLowerCase() !== "absolute") {
-          const lastRow = percentageMatrix && percentageMatrix[percentageMatrix.length - 1];
-          rawValue = lastRow && lastRow[lastRow?.length - 1];
-        }
+        rawValue = isPercentageMode ? 1 : grandTotal;
       } else if (isColTotalOn && !headerAtStart && isLastRow) {
         baseStyle.background = bgColorForTotals;
-        rawValue = columnTotalRow[colIdxHeat]?.columnTotal;
-        if (DataField.hasOwnProperty("percentageBy") && DataField.percentageBy && DataField.percentageBy?.toLowerCase() !== "absolute") {
-          rawValue = percentageMatrix && percentageMatrix[percentageMatrix.length - 1][colIdxHeat];
-        }
+        rawValue = isPercentageMode ? 1 : columnTotalRow[colIdxHeat]?.columnTotal;
       } else if (isRowTotalOn && !headerAtStart && isLastCol) {
-        const rowData = (percentageMatrix && percentageMatrix[rowIdxHeat]) ?? [0];
-        rawValue = rowData[rowData?.length - 1];
-      } else if (DataField.hasOwnProperty("percentageBy") && DataField?.percentageBy && DataField.percentageBy?.toLowerCase() !== "absolute") {
-        rawValue = percentageMatrix && percentageMatrix[rowIdxHeat][colIdxHeat];
+        rawValue = 1;
+      } else if (isPercentageMode) {
+        if (DataField?.percentageBy === "Row-wise") {
+          rawValue = getPercentageBy(measuresBySlice[rowIdxHeat]?.measures?.[colIdxHeat], measuresBySlice[rowIdxHeat].rowTotal);
+        } else {
+          rawValue = getPercentageBy(measuresBySlice[rowIdxHeat]?.measures?.[colIdxHeat], tableData.columnTotalRow[rowIdxHeat].columnTotal);
+        }
         isBold = false;
       } else {
         rawValue = measuresBySlice[rowIdxHeat]?.measures?.[colIdxHeat];
         isBold = false;
       }
       if (rawValue === void 0) return null;
-      const dimName = dimensionMarks[colIdxHeat]?.[fixedRowCount - 1] ?? void 0;
+      const dimName = dimensionMarks[colIdxHeat]?.[fixedRowCount - 1];
       const formattingObj = getMeasureFormattingObj(dimName);
       const conditionalFormatObj = getConditionalFormat(rawValue, CONDITIONAL_FORMAT_FOR.VALUE);
       const numberFormat = conditionalFormatObj?.numberFormat ?? formattingObj.numberFormat;
       const decimalPrecision = conditionalFormatObj?.decimalPrecision ?? formattingObj.decimalPrecision;
       const displayUnits = conditionalFormatObj?.displayUnits ?? formattingObj.displayUnits;
-      let formattedValue = formatValue(
-        rawValue,
-        numberFormat,
-        decimalPrecision,
-        displayUnits
-      );
-      if (DataField.hasOwnProperty("percentageBy") && DataField?.percentageBy && DataField.percentageBy?.toLowerCase() !== "absolute") {
-        formattedValue = formatValue(rawValue, VALUE_FORMAT_OBJ.PERCENT_SHORT);
-      }
-      let finalStyle = {
+      let formattedValue = formatValue(rawValue, numberFormat, decimalPrecision, displayUnits);
+      if (isPercentageMode) formattedValue = formatValue(rawValue, VALUE_FORMAT_OBJ.PERCENT_SHORT);
+      const finalStyle = {
         ...baseStyle,
-        fontWeight: isBold ? "bold" : "normal"
+        fontWeight: isBold ? "bold" : "normal",
+        ...conditionalFormatObj?.fontFamily && { fontFamily: conditionalFormatObj.fontFamily },
+        ...conditionalFormatObj?.fontSize && { fontSize: conditionalFormatObj.fontSize },
+        ...conditionalFormatObj?.backgroundColor && { background: conditionalFormatObj.backgroundColor },
+        ...conditionalFormatObj?.color && { color: conditionalFormatObj.color }
       };
-      if (conditionalFormatObj) {
-        if (conditionalFormatObj.fontFamily) finalStyle.fontFamily = conditionalFormatObj.fontFamily;
-        if (conditionalFormatObj.fontSize) finalStyle.fontSize = conditionalFormatObj.fontSize;
-        if (conditionalFormatObj.backgroundColor) finalStyle.background = conditionalFormatObj.backgroundColor;
-        if (conditionalFormatObj.color) finalStyle.color = conditionalFormatObj.color;
-      }
-      return renderDataCell(
-        formattedValue,
-        finalStyle,
-        "data_div",
-        "data_label_div",
-        pct,
-        innerDivBg
-      );
+      return renderDataCell(formattedValue, finalStyle, "data_div", "data_label_div", pct, innerDivBg);
     };
     function getBgColorForHetMap(rowIdx, colIdx) {
       return heatColorMatrix[rowIdx][colIdx];