pace-chart-lib 1.0.69 → 1.0.70

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

@@ -14262,38 +14262,49 @@
       throw e;
     }
   };
-  const dataTablePreCalculation = (formatOptions, yLabel, yTitle, seriesData, dimensionList) => {
+  const dataTablePreCalculation = (formatOptions, yLabel, yTitle, seriesData, dimensionList, data) => {
     try {
+      const extraDataTableFields = data?.DataTableData ?? [];
       let dataTable = [];
       let dataTableHeight = 20;
       if (formatOptions.dataTableProperties && formatOptions.dataTableProperties.dataTable) {
+        const dataTableData = [...seriesData, ...extraDataTableFields];
         formatOptions.xAxisLabel.xAxisLabelVisibility = false;
-        let exactAvailableWidth = yLabel + yTitle;
-        seriesData.forEach((data, i) => {
-          let tempObj = {
-            data: data.data.filter(
-              (data2) => dimensionList.includes(data2.dimension)
-            ),
-            properties: {
-              legend: data.properties.alias,
-              color: data.properties.color,
-              markerColor: data.properties.markerColor,
-              markerShape: data.properties.markerShape,
-              lineStyle: data.properties.lineStyle,
-              height: calculateDataTableObjectHeight(
-                data.properties.alias.includes("~$~") ? data.properties.alias.split("~$~")[1] : data.properties.alias,
-                exactAvailableWidth,
-                formatOptions
-              )
-            }
-          };
-          dataTableHeight += tempObj.properties.height;
-          dataTable.push(tempObj);
+        const isLegendIconVisible = formatOptions.dataTableProperties.disableLegendIcon ? false : true;
+        const widthToSubtract = isLegendIconVisible ? 35 : 0;
+        let exactAvailableWidth = yLabel + yTitle - widthToSubtract;
+        dataTableData.forEach((data2, i) => {
+          if (data2?.properties?.showInDataTable ?? true) {
+            let tempObj = {
+              data: data2.data.filter(
+                (data3) => dimensionList.includes(data3.dimension)
+              ),
+              properties: {
+                legend: data2.properties.alias,
+                color: data2.properties.color,
+                markerColor: data2.properties.markerColor,
+                markerShape: data2.properties.markerShape,
+                lineStyle: data2.properties.lineStyle,
+                height: calculateDataTableObjectHeight(
+                  data2.properties.alias.includes("~$~") ? data2.properties.alias.split("~$~")[1] : data2.properties.alias,
+                  exactAvailableWidth,
+                  formatOptions
+                )
+              }
+            };
+            dataTableHeight += tempObj.properties.height;
+            dataTable.push(tempObj);
+          }
         });
       } else {
         dataTableHeight = 0;
         dataTable = [];
       }
+      if (dataTable.length == 0) {
+        dataTableHeight = 0;
+        dataTable = [];
+        formatOptions.dataTableProperties.dataTable = false;
+      }
       return { dataTable, dataTableHeight };
     } catch (e) {
     }
@@ -14336,7 +14347,7 @@
           ).style("text-align", "center").style("vertical-align", "middle").text("");
         }
         let legendsParentTag = temp.append("foreignObject").attr("x", -margin.left).attr("y", tableStartY + yCordinate).attr("width", margin.left).attr("height", cellHeight2);
-        let innerdiv = legendsParentTag.append("xhtml:div").style("display", "flex").style("justify-content", "flex-start").style("align-items", "center").attr("class", "parentClass").style("flex-wrap", "nowrap").style("pointer-events", "auto").style("width", cellWidth).style("height", `${cellHeight2}px`).style("padding-left", formatOptions.dataTableProperties.disableLegendIcon ? `2px` : `5px`).style("padding-right", `3px`).style(
+        let innerdiv = legendsParentTag.append("xhtml:div").style("display", "flex").style("justify-content", "center").style("align-items", "center").attr("class", "parentClass").style("flex-wrap", "wrap").style("flex-direction", "row").style("pointer-events", "auto").style("width", cellWidth).style("height", `${cellHeight2}px`).style("padding-left", formatOptions.dataTableProperties.disableLegendIcon ? `2px` : `5px`).style("padding-right", `3px`).style(
           "border-width",
           getBorderStyle(
             formatOptions,
@@ -14399,7 +14410,7 @@
         ).style("font-style", fontStyle.includes("Italic") ? "Italic" : "").style(
           "text-decoration",
           fontStyle.includes("Underline") ? "Underline" : ""
-        ).style("padding-left", `5px`).style("white-space", "normal").style("overflow-wrap", "break-word").style("color", "black").style("width", "100%").style("font-weight", fontStyle.includes("Bold") ? "Bold" : "").attr("title", text).text(text);
+        ).style("padding-left", `5px`).style("white-space", "normal").style("overflow-wrap", "break-word").style("color", "black").style("width", formatOptions.dataTableProperties.disableLegendIcon ? "100%" : "calc(100% - 30px)").style("font-weight", fontStyle.includes("Bold") ? "Bold" : "").attr("title", text).text(text);
       };
       let innerVerticalBorderLineWidth = formatOptions.dataTableInnerBorder.verticalBorderLineWidth;
       let innerHorizontalBorderLineWidth = formatOptions.dataTableInnerBorder.horizontalBorderLineWidth;
@@ -17615,7 +17626,8 @@
         yLabel,
         yTitle,
         seriesData,
-        chartJSON.dimensionList
+        chartJSON.dimensionList,
+        data
       ));
       initSvg$1(
         // for svg creation
@@ -18201,7 +18213,8 @@
         yLabel,
         yTitle,
         seriesData,
-        chartJSON.dimensionList
+        chartJSON.dimensionList,
+        data
       ));
       initSvg$1(
         // for svg creation
@@ -19324,7 +19337,8 @@
         yLabel,
         yTitle,
         seriesData,
-        chartJSON.dimensionList
+        chartJSON.dimensionList,
+        data
       ));
       initSvg$1(
         // for svg creation
@@ -19880,7 +19894,8 @@
         yLabel,
         yTitle,
         seriesData,
-        chartJSON.dimensionList
+        chartJSON.dimensionList,
+        data
       ));
       initSvg$1(
         // for svg creation
@@ -20619,7 +20634,8 @@
         yLabel,
         yTitle,
         seriesData,
-        chartJSON.dimensionList
+        chartJSON.dimensionList,
+        data
       ));
       initSvg$1(
         // for svg creation
@@ -22462,7 +22478,8 @@
         yLabel,
         yTitle,
         seriesData,
-        chartJSON.dimensionList
+        chartJSON.dimensionList,
+        data
       ));
       initSvg$1(
         // for svg creation
@@ -23036,7 +23053,8 @@
         yLabel,
         yTitle,
         seriesData,
-        chartJSON.dimensionList
+        chartJSON.dimensionList,
+        data
       ));
       initSvg$1(
         // for svg creation
@@ -23615,7 +23633,8 @@
         yLabel,
         yTitle,
         seriesData,
-        chartJSON.dimensionList
+        chartJSON.dimensionList,
+        data
       ));
       initSvg$1(
         // for svg creation
@@ -27133,7 +27152,8 @@
         yLabel,
         yTitle,
         seriesData,
-        chartJSON.dimensionList
+        chartJSON.dimensionList,
+        data
       ));
       initSvg$1(
         // for svg creation
@@ -27728,7 +27748,8 @@
         yLabel,
         yTitle,
         seriesData,
-        chartJSON.dimensionList
+        chartJSON.dimensionList,
+        data
       ));
       initSvg$1(
         // for svg creation
@@ -28326,7 +28347,8 @@
         yLabel,
         yTitle,
         seriesData,
-        chartJSON.dimensionList
+        chartJSON.dimensionList,
+        data
       ));
       initSvg$1(
         // for svg creation
@@ -56857,14 +56879,6 @@
         chartJSON
       ));
       setSVGContainer(margin);
-      ({ dataTable, dataTableHeight } = dataTablePreCalculation(
-        // calculations for data tables
-        formatOptions,
-        yLabel,
-        yTitle,
-        seriesData,
-        chartJSON.dimensionList
-      ));
       initSvg$1(
         // for svg creation
         svg,
@@ -57150,7 +57164,7 @@
           customYaxisMaxValue,
           barChart,
           innerWidth2
-        ).customTickValue ?? (dataTableHeight > 0 ? (innerWidth2 - dataTableHeight) / 30 : innerWidth2 / 30)
+        ).customTickValue ?? innerWidth2 / 30
       ).tickPadding(8).tickSizeOuter(0);
     };
     const getChartType = () => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pace-chart-lib",
-  "version": "1.0.69",
+  "version": "1.0.70",
   "description": "A simple React + Vite + TS UI library with a Button using custom fonts via SCSS.",
   "license": "MIT",
   "type": "module",