pace-table-lib 1.0.8 → 1.0.9

package/dist/components/StaticTable/HelperFunctions.d.ts

@@ -12,3 +12,4 @@ export declare function computeMatrix<T>(rawDataMatrix: number[][], mode: "All"
 export declare function compareVal(a: number, op: string, b: number): boolean;
 export declare function applyConditionalFormatting(style: CSSProperties, conFormat?: any): CSSProperties;
 export declare function applyFormat(obj: any, format: any): void;
+export declare function getPercentageBy(dataValue: any, totalValue: any): number;

package/dist/components/StaticTable/StaticTableTypeDec.types.d.ts

@@ -54,6 +54,8 @@ type TableDataTypes = {
         minValueInRow: number;
     }[];
     totalNumberOfRows: number;
+    rowDateFormatObj?: any;
+    columnDateFormatObj?: any;
 };
 type TableStyleConfig = {
     ToolTip: {

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

@@ -8032,45 +8032,48 @@ function toDateFromExcel(value) {
   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 {
@@ -8133,8 +8136,8 @@ function formatValue(value, format, decimalValues = 2, displayUnit = DISPLAY_UNI
     }
   } catch (error) {
     console.error("Error in formatValue:", error);
-    return value;
   }
+  return value;
 }
 function getFontStyleObj(stylePayload) {
   let baseStyleObj = {
@@ -8241,6 +8244,14 @@ function applyFormat(obj, format) {
   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,
@@ -8410,20 +8421,6 @@ function StaticTable({
       }
     );
   }, [rawDataMatrix, isDataBarOn, KPI.KPIBaseFormat]);
-  const percentageMatrix = 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 = useMemo(() => {
     const cells = [];
     const baseStyle = {
@@ -8510,9 +8507,7 @@ function StaticTable({
         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,
@@ -8586,7 +8581,13 @@ function StaticTable({
           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({
@@ -8607,8 +8608,7 @@ function StaticTable({
           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,
@@ -8674,7 +8674,13 @@ function StaticTable({
           }
           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,
@@ -8699,10 +8705,7 @@ function StaticTable({
           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,
@@ -8759,90 +8762,55 @@ function StaticTable({
     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];