pace-chart-lib 1.0.29 → 1.0.30

package/dist/Components/Charts/Core/DefaultProperties.types.d.ts

@@ -566,6 +566,7 @@ export declare const defaultChartFormatOptions: {
         dataTableDecimalPrecision: string;
         dataTableDisplayUnits: string;
         dataTableLabelColor: commonColors;
+        dataTableAxisLabel: boolean;
     };
     dataTableOuterBorder: {
         borderButtonVisibility: boolean;

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

@@ -11443,7 +11443,8 @@ const defaultChartFormatOptions = {
     dataTableNumberFormat: ",",
     dataTableDecimalPrecision: "2",
     dataTableDisplayUnits: "None",
-    dataTableLabelColor: commonColors.black
+    dataTableLabelColor: commonColors.black,
+    dataTableAxisLabel: true
   },
   dataTableOuterBorder: {
     borderButtonVisibility: true,
@@ -11784,7 +11785,7 @@ function calculateVerticalMargins(windowWidth, windowHeight, maxNumberForPrimary
         bottom2 = xAxisRelatedMargin + 5 + scrollHeightConstant;
         break;
       case staticLegendPosition.bottom:
-        bottom2 = 40 + xAxisRelatedMargin + scrollHeightConstant;
+        bottom2 = 30 + xAxisRelatedMargin + scrollHeightConstant;
         top2 = metrics.chartTitleHeight + 5 + (isNormalizedChart ? 12 : 0);
         break;
       case staticLegendPosition.left:
@@ -13744,7 +13745,7 @@ const dataTablePreCalculation = (formatOptions, yLabel, yTitle, seriesData, dime
     let dataTableHeight = 20;
     if (formatOptions.dataTableProperties && formatOptions.dataTableProperties.dataTable) {
       formatOptions.xAxisLabel.xAxisLabelVisibility = false;
-      let exactAvailableWidth = yLabel + yTitle - 36;
+      let exactAvailableWidth = yLabel + yTitle;
       seriesData.forEach((data, i) => {
         let tempObj = {
           "data": data.data.filter((data2) => dimensionList.includes(data2.dimension)),
@@ -13836,14 +13837,14 @@ function addDataTable(isFitChart, svg, currentTag, dataTable, colWidth, yAxis, x
     selectAll("#dataTableG" + chartId).remove();
     let tag = currentTag.append("g").attr("id", "dataTableG" + chartId);
     dataTable.forEach((data, i) => {
-      yCordinate = yCordinate + cellHeight;
+      yCordinate = yCordinate + (!formatOptions.dataTableProperties.dataTableAxisLabel && i === 0 ? 0 : cellHeight);
       cellHeight = data.properties.height;
       getLegendsAppended(tag, i, data, cellHeight);
       let parentTag = tag.append("g").attr("class", "dataTableBorder").selectAll("#scaling-svg" + chartId + " .foreignObject").data((d, pos) => data["data"]).enter().filter((d) => xAxis(d.dimension)).append("g").attr("fill", commonColors.transparent).attr(
         "transform",
         (d, index2) => `translate(${index2 === 0 ? 0 : xAxis(d.dimension) - cellWidth / 2},0)`
       );
-      if (i == 0) {
+      if (i == 0 && formatOptions.dataTableProperties.dataTableAxisLabel) {
         parentTag.append("foreignObject").attr("class", "dataTableColHeaders").attr("x", 0).attr("y", tableStartY).attr("id", (d, index2) => index2).attr("width", (d, index2) => index2 === 0 ? cellWidth + outerPadding + calWidthForSeriesNames / 2 : index2 === dimensionCount - 1 ? cellWidth + outerPadding - calWidthForSeriesNames / 2 : cellWidth).attr("height", "20px").append("xhtml:div").style("width", (d, index2) => index2 === 0 ? cellWidth + outerPadding + calWidthForSeriesNames / 2 : index2 === dimensionCount - 1 ? cellWidth + outerPadding - calWidthForSeriesNames / 2 : cellWidth).style("height", `${20}px`).style("border-width", (d, index2) => getBorderStyle(formatOptions, index2, void 0, dimensionCount, legendsCount, "width", "colHeaders")).style("border-style", (d, index2) => getBorderStyle(formatOptions, index2, void 0, dimensionCount, legendsCount, "style", "colHeaders")).style("border-color", (d, index2) => getBorderStyle(formatOptions, index2, void 0, dimensionCount, legendsCount, "color", "colHeaders")).style("text-align", "center").style("white-space", "nowrap").style("text-overflow", "ellipsis").style("overflow", "hidden").style("padding-left", "3px").style("font-size", formatOptions.dataTableProperties.dataTableFontSize + "px").style("font-family", formatOptions.dataTableProperties.dataTableFontFamily).style("font-style", fontStyle.includes("Italic") ? "Italic" : "").style(
           "text-decoration",
           fontStyle.includes("Underline") ? "Underline" : ""
@@ -15434,7 +15435,7 @@ function drawLegends(height, svg, maxLegendDimensions, chartTitleHeight, width,
             svg,
             seriesData,
             7,
-            height - 25,
+            height - 35,
             width - 10,
             30,
             position,
@@ -16911,10 +16912,10 @@ const ColumnChart = ({
         return yScale(0);
       }).attr("height", 0).attr("fill", data2.properties.color).attr(
         "stroke-dasharray",
-        (d) => d.stackBorderStyle === 2 ? "5,3" : "0"
-      ).attr("stroke-width", (d) => `${d.stackBorderWidth}px`).attr(
+        (d) => data2.properties.stackBorderStyle == 2 ? "5,3" : "0"
+      ).attr("stroke-width", (d) => `${data2.properties.stackBorderWidth}px`).attr(
         "stroke",
-        (d) => data2.properties.stackBorderStyle === 0 ? "none" : formatOptions.column.stackBorderVisibility ? data2.properties.stackBorderStyle : "none"
+        (d) => data2.properties.stackBorderStyle == 0 ? "none" : formatOptions.column.stackBorderVisibility ? data2.properties.stackBorderColor : "none"
       ).style("clip-path", "inset(0px) fill-box").style("shape-rendering", "crispEdges").attr(
         "visibility",
         (d) => d.value === 0 && formatOptions.xAxisLabel.hideZeroValues ? "hidden" : "visible"
@@ -17622,9 +17623,9 @@ const CustomColumnChart = ({
     }).attr("height", (d) => {
       const yScale = data2.properties.axis === axisTypes.primary ? yScaleLeft : yScaleRight;
       return Math.abs(yScale(d.value) - yScale(0));
-    }).attr("fill", data2.properties.color).attr("stroke-dasharray", (d) => d.stackBorderStyle === 2 ? "5,3" : "0").attr("stroke-width", (d) => `${d.stackBorderWidth}px`).attr(
+    }).attr("fill", data2.properties.color).attr("stroke-dasharray", (d) => data2.properties.stackBorderStyle == 2 ? "5,3" : "0").attr("stroke-width", (d) => `${data2.properties.stackBorderWidth}px`).attr(
       "stroke",
-      (d) => data2.properties.stackBorderStyle === 0 ? "none" : formatOptions.column.stackBorderVisibility ? data2.properties.stackBorderStyle : "none"
+      (d) => data2.properties.stackBorderStyle == 0 ? "none" : formatOptions.column.stackBorderVisibility ? data2.properties.stackBorderColor : "none"
     ).style("clip-path", "inset(0px) fill-box").style("shape-rendering", "crispEdges").attr(
       "visibility",
       (d) => d.value === 0 && formatOptions.xAxisLabel.hideZeroValues ? "hidden" : "visible"
@@ -17886,12 +17887,12 @@ const CustomColumnChart = ({
         (sdata) => sdata.legend === d.key
       );
       const props = seriesData[seriesIndex]?.properties;
-      return props?.stackBorderStyle === 0 ? "none" : formatOptions.column.stackBorderVisibility ? props.stackBorderColor : "none";
+      return props?.stackBorderStyle == 0 ? "none" : formatOptions.column.stackBorderVisibility ? props.stackBorderColor : "none";
     }).attr("stroke-dasharray", (d, i, nodes) => {
       const seriesIndex = Array.from(seriesData).findIndex(
         (sdata) => sdata.legend === d.key
       );
-      return seriesData[seriesIndex]?.properties.stackBorderStyle === 2 ? "5,3" : "0";
+      return seriesData[seriesIndex]?.properties.stackBorderStyle == 2 ? "5,3" : "0";
     }).attr("stroke-width", (d, i, nodes) => {
       const seriesIndex = Array.from(seriesData).findIndex(
         (sdata) => sdata.legend === d.key
@@ -18495,10 +18496,10 @@ const LayeredColumnChart = ({
         return Math.abs(yScale(d.value) - yScale(0));
       }).attr("fill", data2.properties.color).attr(
         "stroke-dasharray",
-        (d) => d.stackBorderStyle === 2 ? "5,3" : "0"
-      ).attr("stroke-width", (d) => `${d.stackBorderWidth}px`).attr(
+        (d) => data2.properties.stackBorderStyle == 2 ? "5,3" : "0"
+      ).attr("stroke-width", () => `${data2.properties.stackBorderWidth}px`).attr(
         "stroke",
-        (d) => data2.properties.stackBorderStyle === 0 ? "none" : formatOptions.column.stackBorderVisibility ? data2.properties.stackBorderStyle : "none"
+        () => data2.properties.stackBorderStyle == 0 ? "none" : formatOptions.column.stackBorderVisibility ? data2.properties.stackBorderColor : "none"
       ).style("clip-path", "inset(0px) fill-box").style("shape-rendering", "crispEdges").attr("opacity", 0.7).attr(
         "visibility",
         (d) => d.value === 0 && formatOptions.xAxisLabel.hideZeroValues ? "hidden" : "visible"
@@ -18978,16 +18979,16 @@ const StackColumnChart = ({
       return props?.color || "gray";
     }).attr("stroke", (d, i, nodes) => {
       const { props } = getPropsForRect(nodes, i);
-      return props?.stackBorderStyle === 0 ? "none" : formatOptions.column.stackBorderVisibility ? props.stackBorderColor : "none";
+      return props?.stackBorderStyle == 0 ? "none" : formatOptions.column.stackBorderVisibility ? props.stackBorderColor : "none";
     }).attr("stroke-dasharray", (d, i, nodes) => {
       const { props } = getPropsForRect(nodes, i);
-      return props?.stackBorderStyle === 2 ? "5,3" : "0";
+      return props?.stackBorderStyle == 2 ? "5,3" : "0";
     }).attr("stroke-width", (d, i, nodes) => {
       const { props } = getPropsForRect(nodes, i);
       return (props?.stackBorderWidth || 0) + "px";
     }).style("clip-path", "inset(0px) fill-box").style("shape-rendering", "crispEdges").attr("visibility", (d, i, nodes) => {
       const { props } = getPropsForRect(nodes, i);
-      return d.data[d.key] === 0 && props?.hideZeroValues ? "hidden" : "visible";
+      return d.data[d.key] == 0 && props?.hideZeroValues ? "hidden" : "visible";
     }).on("mousemove", (event2, d) => {
       showTooltipOnMouseMove(
         [

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

@@ -11446,7 +11446,8 @@
       dataTableNumberFormat: ",",
       dataTableDecimalPrecision: "2",
       dataTableDisplayUnits: "None",
-      dataTableLabelColor: commonColors.black
+      dataTableLabelColor: commonColors.black,
+      dataTableAxisLabel: true
     },
     dataTableOuterBorder: {
       borderButtonVisibility: true,
@@ -11787,7 +11788,7 @@
           bottom2 = xAxisRelatedMargin + 5 + scrollHeightConstant;
           break;
         case staticLegendPosition.bottom:
-          bottom2 = 40 + xAxisRelatedMargin + scrollHeightConstant;
+          bottom2 = 30 + xAxisRelatedMargin + scrollHeightConstant;
           top2 = metrics.chartTitleHeight + 5 + (isNormalizedChart ? 12 : 0);
           break;
         case staticLegendPosition.left:
@@ -13747,7 +13748,7 @@
       let dataTableHeight = 20;
       if (formatOptions.dataTableProperties && formatOptions.dataTableProperties.dataTable) {
         formatOptions.xAxisLabel.xAxisLabelVisibility = false;
-        let exactAvailableWidth = yLabel + yTitle - 36;
+        let exactAvailableWidth = yLabel + yTitle;
         seriesData.forEach((data, i) => {
           let tempObj = {
             "data": data.data.filter((data2) => dimensionList.includes(data2.dimension)),
@@ -13839,14 +13840,14 @@
       selectAll("#dataTableG" + chartId).remove();
       let tag = currentTag.append("g").attr("id", "dataTableG" + chartId);
       dataTable.forEach((data, i) => {
-        yCordinate = yCordinate + cellHeight;
+        yCordinate = yCordinate + (!formatOptions.dataTableProperties.dataTableAxisLabel && i === 0 ? 0 : cellHeight);
         cellHeight = data.properties.height;
         getLegendsAppended(tag, i, data, cellHeight);
         let parentTag = tag.append("g").attr("class", "dataTableBorder").selectAll("#scaling-svg" + chartId + " .foreignObject").data((d, pos) => data["data"]).enter().filter((d) => xAxis(d.dimension)).append("g").attr("fill", commonColors.transparent).attr(
           "transform",
           (d, index2) => `translate(${index2 === 0 ? 0 : xAxis(d.dimension) - cellWidth / 2},0)`
         );
-        if (i == 0) {
+        if (i == 0 && formatOptions.dataTableProperties.dataTableAxisLabel) {
           parentTag.append("foreignObject").attr("class", "dataTableColHeaders").attr("x", 0).attr("y", tableStartY).attr("id", (d, index2) => index2).attr("width", (d, index2) => index2 === 0 ? cellWidth + outerPadding + calWidthForSeriesNames / 2 : index2 === dimensionCount - 1 ? cellWidth + outerPadding - calWidthForSeriesNames / 2 : cellWidth).attr("height", "20px").append("xhtml:div").style("width", (d, index2) => index2 === 0 ? cellWidth + outerPadding + calWidthForSeriesNames / 2 : index2 === dimensionCount - 1 ? cellWidth + outerPadding - calWidthForSeriesNames / 2 : cellWidth).style("height", `${20}px`).style("border-width", (d, index2) => getBorderStyle(formatOptions, index2, void 0, dimensionCount, legendsCount, "width", "colHeaders")).style("border-style", (d, index2) => getBorderStyle(formatOptions, index2, void 0, dimensionCount, legendsCount, "style", "colHeaders")).style("border-color", (d, index2) => getBorderStyle(formatOptions, index2, void 0, dimensionCount, legendsCount, "color", "colHeaders")).style("text-align", "center").style("white-space", "nowrap").style("text-overflow", "ellipsis").style("overflow", "hidden").style("padding-left", "3px").style("font-size", formatOptions.dataTableProperties.dataTableFontSize + "px").style("font-family", formatOptions.dataTableProperties.dataTableFontFamily).style("font-style", fontStyle.includes("Italic") ? "Italic" : "").style(
             "text-decoration",
             fontStyle.includes("Underline") ? "Underline" : ""
@@ -15437,7 +15438,7 @@
               svg,
               seriesData,
               7,
-              height - 25,
+              height - 35,
               width - 10,
               30,
               position,
@@ -16914,10 +16915,10 @@
           return yScale(0);
         }).attr("height", 0).attr("fill", data2.properties.color).attr(
           "stroke-dasharray",
-          (d) => d.stackBorderStyle === 2 ? "5,3" : "0"
-        ).attr("stroke-width", (d) => `${d.stackBorderWidth}px`).attr(
+          (d) => data2.properties.stackBorderStyle == 2 ? "5,3" : "0"
+        ).attr("stroke-width", (d) => `${data2.properties.stackBorderWidth}px`).attr(
           "stroke",
-          (d) => data2.properties.stackBorderStyle === 0 ? "none" : formatOptions.column.stackBorderVisibility ? data2.properties.stackBorderStyle : "none"
+          (d) => data2.properties.stackBorderStyle == 0 ? "none" : formatOptions.column.stackBorderVisibility ? data2.properties.stackBorderColor : "none"
         ).style("clip-path", "inset(0px) fill-box").style("shape-rendering", "crispEdges").attr(
           "visibility",
           (d) => d.value === 0 && formatOptions.xAxisLabel.hideZeroValues ? "hidden" : "visible"
@@ -17625,9 +17626,9 @@
       }).attr("height", (d) => {
         const yScale = data2.properties.axis === axisTypes.primary ? yScaleLeft : yScaleRight;
         return Math.abs(yScale(d.value) - yScale(0));
-      }).attr("fill", data2.properties.color).attr("stroke-dasharray", (d) => d.stackBorderStyle === 2 ? "5,3" : "0").attr("stroke-width", (d) => `${d.stackBorderWidth}px`).attr(
+      }).attr("fill", data2.properties.color).attr("stroke-dasharray", (d) => data2.properties.stackBorderStyle == 2 ? "5,3" : "0").attr("stroke-width", (d) => `${data2.properties.stackBorderWidth}px`).attr(
         "stroke",
-        (d) => data2.properties.stackBorderStyle === 0 ? "none" : formatOptions.column.stackBorderVisibility ? data2.properties.stackBorderStyle : "none"
+        (d) => data2.properties.stackBorderStyle == 0 ? "none" : formatOptions.column.stackBorderVisibility ? data2.properties.stackBorderColor : "none"
       ).style("clip-path", "inset(0px) fill-box").style("shape-rendering", "crispEdges").attr(
         "visibility",
         (d) => d.value === 0 && formatOptions.xAxisLabel.hideZeroValues ? "hidden" : "visible"
@@ -17889,12 +17890,12 @@
           (sdata) => sdata.legend === d.key
         );
         const props = seriesData[seriesIndex]?.properties;
-        return props?.stackBorderStyle === 0 ? "none" : formatOptions.column.stackBorderVisibility ? props.stackBorderColor : "none";
+        return props?.stackBorderStyle == 0 ? "none" : formatOptions.column.stackBorderVisibility ? props.stackBorderColor : "none";
       }).attr("stroke-dasharray", (d, i, nodes) => {
         const seriesIndex = Array.from(seriesData).findIndex(
           (sdata) => sdata.legend === d.key
         );
-        return seriesData[seriesIndex]?.properties.stackBorderStyle === 2 ? "5,3" : "0";
+        return seriesData[seriesIndex]?.properties.stackBorderStyle == 2 ? "5,3" : "0";
       }).attr("stroke-width", (d, i, nodes) => {
         const seriesIndex = Array.from(seriesData).findIndex(
           (sdata) => sdata.legend === d.key
@@ -18498,10 +18499,10 @@
           return Math.abs(yScale(d.value) - yScale(0));
         }).attr("fill", data2.properties.color).attr(
           "stroke-dasharray",
-          (d) => d.stackBorderStyle === 2 ? "5,3" : "0"
-        ).attr("stroke-width", (d) => `${d.stackBorderWidth}px`).attr(
+          (d) => data2.properties.stackBorderStyle == 2 ? "5,3" : "0"
+        ).attr("stroke-width", () => `${data2.properties.stackBorderWidth}px`).attr(
           "stroke",
-          (d) => data2.properties.stackBorderStyle === 0 ? "none" : formatOptions.column.stackBorderVisibility ? data2.properties.stackBorderStyle : "none"
+          () => data2.properties.stackBorderStyle == 0 ? "none" : formatOptions.column.stackBorderVisibility ? data2.properties.stackBorderColor : "none"
         ).style("clip-path", "inset(0px) fill-box").style("shape-rendering", "crispEdges").attr("opacity", 0.7).attr(
           "visibility",
           (d) => d.value === 0 && formatOptions.xAxisLabel.hideZeroValues ? "hidden" : "visible"
@@ -18981,16 +18982,16 @@
         return props?.color || "gray";
       }).attr("stroke", (d, i, nodes) => {
         const { props } = getPropsForRect(nodes, i);
-        return props?.stackBorderStyle === 0 ? "none" : formatOptions.column.stackBorderVisibility ? props.stackBorderColor : "none";
+        return props?.stackBorderStyle == 0 ? "none" : formatOptions.column.stackBorderVisibility ? props.stackBorderColor : "none";
       }).attr("stroke-dasharray", (d, i, nodes) => {
         const { props } = getPropsForRect(nodes, i);
-        return props?.stackBorderStyle === 2 ? "5,3" : "0";
+        return props?.stackBorderStyle == 2 ? "5,3" : "0";
       }).attr("stroke-width", (d, i, nodes) => {
         const { props } = getPropsForRect(nodes, i);
         return (props?.stackBorderWidth || 0) + "px";
       }).style("clip-path", "inset(0px) fill-box").style("shape-rendering", "crispEdges").attr("visibility", (d, i, nodes) => {
         const { props } = getPropsForRect(nodes, i);
-        return d.data[d.key] === 0 && props?.hideZeroValues ? "hidden" : "visible";
+        return d.data[d.key] == 0 && props?.hideZeroValues ? "hidden" : "visible";
       }).on("mousemove", (event2, d) => {
         showTooltipOnMouseMove(
           [

package/package.json

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