pace-chart-lib 1.0.48 → 1.0.50

package/dist/Components/Charts/ChartsWithAxis/ChartsWithAxisFunctions.d.ts

@@ -245,7 +245,7 @@ export declare function initChartArea(svg: any, margin: TMargin): any;
  *
  * @returns {void} Does not return a value.
  */
-export declare function initPlotArea(g: any, formatOptions: TDefaultChartFormatOptionsType, dataTableHeight: number, innerWidth: number, innerHeight: number, chartType: string): void;
+export declare function initPlotArea(g: any, formatOptions: TDefaultChartFormatOptionsType, dataTableHeight: number, innerWidth: number, innerHeight: number, chartType: string, chartId?: string): void;
 /**
  * Checks whether two objects overlap vertically based on their y-position and height.
  *

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

@@ -12374,10 +12374,10 @@ function initChartArea$1(svg, margin) {
     throw error;
   }
 }
-function initPlotArea(g, formatOptions, dataTableHeight, innerWidth2, innerHeight2, chartType) {
+function initPlotArea(g, formatOptions, dataTableHeight, innerWidth2, innerHeight2, chartType, chartId) {
   try {
-    let uniqueID = crypto.randomUUID().toUpperCase();
-    g.append("defs").append("clipPath").attr("id", uniqueID).append("rect").attr("width", innerWidth2).attr(
+    let uniqueID = chartId ?? crypto.randomUUID().toUpperCase();
+    g.append("defs").append("clipPath").attr("id", uniqueID + "-clip").append("rect").attr("width", innerWidth2).attr(
       "height",
       dataTableHeight > 0 ? innerHeight2 - dataTableHeight : innerHeight2
     );
@@ -13353,7 +13353,8 @@ function commonAnnotations(chartData, xScale, yScaleLeft, yScaleRight, margin, d
             let axis2 = d.x.axis;
             return dataLabelsPositionForBarChartFamily(formatOptions, d.x.measure ? d.x.measure : 0, d.position, requiredXScale, minValue, void 0, chartType, isSensitivityChart, axis2);
           } else if (chartType === chartTypes.ColumnChart) {
-            const legend = xScaleForLegends(d.currentLegend);
+            const legendUniqueId = d.legendUniqueId.includes("~$~") ? d.legendUniqueId.split("~$~")[0] : d.legendUniqueId;
+            const legend = xScaleForLegends(legendUniqueId);
             const x2 = legend != null ? xScale(d.x) + legend - (columnWidth - xScaleForLegends.bandwidth()) / 2 : xScale(d.x);
             return x2;
           } else {
@@ -15461,10 +15462,10 @@ const initYaxisBar = (formatOptions, gTag, xLabel, innerHeight2, innerWidth2, yA
     const isRotationZero = formatOptions.xAxisLabel.xAxisLabelRotation == 0;
     let yRect = gTag.append("rect").attr("id", "yAxisRect").attr(
       "transform",
-      chartType === chartTypes.TornadoChart ? `translate(${-xLabelMargin + 10},0)` : `translate(${xaxisLabelPosition === 0 ? -xLabelMargin - 5 : xaxisLabelPosition === 1 ? innerWidth2 : xScaleBottom(0) + (-xLabelMargin - 5)},0)`
+      chartType === chartTypes.TornadoChart ? `translate(${-xLabelMargin - 1},0)` : `translate(${xaxisLabelPosition === 0 ? -xLabelMargin - 5 : xaxisLabelPosition === 1 ? innerWidth2 : xScaleBottom(0) + (-xLabelMargin - 5)},0)`
     ).attr("height", innerHeight2).attr(
       "width",
-      chartType === chartTypes.TornadoChart ? xLabelMargin + 20 : xLabelMargin + 5
+      chartType === chartTypes.TornadoChart ? xLabelMargin : xLabelMargin + 5
     ).attr(
       "fill",
       formatOptions.xAxisLabel.xAxisLabelVisibility ? formatOptions.xAxisLabel.xAxisBackgroundColor ? formatOptions.xAxisLabel.xAxisBackgroundColor !== commonColors.white ? formatOptions.xAxisLabel.xAxisBackgroundColor : "none" : formatOptions.chartArea.chartAreaColor : formatOptions.chartArea.chartAreaColor
@@ -15729,7 +15730,7 @@ const horizontalScrollBar = (seriesData, height, width, svg, margin, innerWidth2
     );
     svg.on("wheel", (event2) => {
       event2.preventDefault();
-      const scrollDelta = Math.abs(event2.deltaX) > Math.abs(event2.deltaY) ? event2.deltaX : event2.deltaY;
+      const scrollDelta = isBarChart ? event2.deltaY : event2.deltaX;
       const step2 = scrollDelta > 0 ? 1 : -1;
       updateFromScrollPosition(step2, scrollMax, handleWidth, handle, true);
       if (isBarChart) {
@@ -17585,9 +17586,7 @@ const ColumnChart = ({
         (data2.properties.alias || data2.properties.name || "Legend").replace(/ /g, "-");
         hideTooltipOnMouseOut();
       });
-      columnGroups.exit().remove().each(function(d) {
-        console.log("Exiting:", d.dimension, d.legend);
-      });
+      columnGroups.exit().remove();
     });
     gTag.selectAll(".parentGroup").raise();
   };
@@ -18213,6 +18212,7 @@ const CustomColumnChart = ({
   const getChartType = (lineData) => {
     lineData.forEach((data2) => {
       switch (data2.properties.type) {
+        default:
         case chartTypes.ColumnChart:
           drawColumnChart(data2);
           break;
@@ -18314,7 +18314,7 @@ const CustomColumnChart = ({
       (d) => xScale(d.dimension) ? xScale(d.dimension) : null
     ).y(
       (d) => d.axis == axisTypes.primary ? yScaleLeft(d.value) : yScaleRight(d.value)
-    ).defined((d) => d.hideZero ? Boolean(d.value) : true).curve(getCurveType(formatOptions));
+    ).defined((d) => formatOptions?.plotArea?.hideZeroValues ? Boolean(d.value) : true).curve(getCurveType(formatOptions));
     let lines = gTag.selectAll(".lines.parentGroup").data([1]);
     lines = lines.enter().append("g").attr("class", "lines parentGroup").merge(lines);
     let lineGroups = lines.selectAll(".line-group").data(lineData, (d) => d.properties.legendUniqueId);
@@ -30763,11 +30763,7 @@ const Speedometer = ({
         "font-family",
         chartFormatOptions.pointerValue.pointerValueFontFamily
       ).text(
-        (d) => `${KPIName}: ${!chartFormatOptions.pointerValue.pointerValueAlias && d != 0 ? getNumberWithFormatFunction(
-          "None",
-          chartFormatOptions.pointerValue.pointerValueNumberFormat,
-          chartFormatOptions.pointerValue.pointerValueDecimalPrecision
-        )(ChartData[1].data[0].value) : chartFormatOptions.pointerValue.pointerValueAliasText}`
+        (d) => `${KPIName}: ${!chartFormatOptions.pointerValue.pointerValueAlias && d != 0 ? connectorNumberFormat2(ChartData[0].data[0].value, ChartData[1].data[0].value) : chartFormatOptions.pointerValue.pointerValueAliasText}`
       ).attr(
         "visibility",
         chartFormatOptions.plotArea.dataLabels ? "visible" : "hidden"
@@ -30776,6 +30772,45 @@ const Speedometer = ({
       logError$2(fileName2, "setPointerValueText", error);
     }
   }
+  function connectorNumberFormat2(numerator, denominator) {
+    try {
+      let Measure = numerator - denominator;
+      let noOfYears = 1;
+      let KPI = parseInt(
+        chartFormatOptions.pointerValue.connectorKPIforSpeedometer
+      );
+      let formatter;
+      let value2;
+      const decimalValues = chartFormatOptions.pointerValue.pointerValueDecimalPrecision;
+      switch (KPI) {
+        case 1:
+          Measure = denominator;
+          break;
+        case 2:
+          Measure = Math.abs(Measure);
+          break;
+        case 3:
+          formatter = `.${decimalValues}%`;
+          Measure = Math.pow(denominator / numerator, 1 / noOfYears) - 1;
+          value2 = format(formatter)(Measure);
+          return value2;
+        case 4:
+          formatter = `.${decimalValues}%`;
+          Measure = Math.round(denominator / numerator * 100 - 100) / 100;
+          value2 = format(formatter)(Measure);
+          return value2;
+      }
+      isNaN(Measure) ? Measure = 0 : Measure;
+      return getNumberWithFormatFunction(
+        chartFormatOptions.pointerValue.pointerValueDisplayUnits,
+        chartFormatOptions.pointerValue.pointerValueNumberFormat,
+        decimalValues
+      )(Measure);
+    } catch (error) {
+      logError$2(fileName2, "connectorNumberFormat", error);
+      return "";
+    }
+  }
   return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { width: "100%", height: "100%" }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
     "svg",
     {
@@ -30982,7 +31017,7 @@ const RadialBarChart = ({
         "visibility",
         chartFormatOptions.plotArea.axialAxis ? "visible" : "hidden"
       );
-      let arcs = svg2.attr("class", "data").selectAll("path").data(ChartData).enter().append("path").attr("class", "parentGroup").attr("hoverId", (d) => d.data[0].legend).style("fill", (d, i) => d.properties.color).on("mousemove", (event2, d) => {
+      let arcs = svg2.attr("class", "data").selectAll("path").data(ChartData).enter().append("path").attr("class", "parentGroup").attr("hoverId", (d) => d.data[0].legend.replaceAll(" ", "-")).style("fill", (d, i) => d.properties.color).on("mousemove", (event2, d) => {
         showTooltipOnMouseMove(
           [
             {

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

@@ -12377,10 +12377,10 @@
       throw error;
     }
   }
-  function initPlotArea(g, formatOptions, dataTableHeight, innerWidth2, innerHeight2, chartType) {
+  function initPlotArea(g, formatOptions, dataTableHeight, innerWidth2, innerHeight2, chartType, chartId) {
     try {
-      let uniqueID = crypto.randomUUID().toUpperCase();
-      g.append("defs").append("clipPath").attr("id", uniqueID).append("rect").attr("width", innerWidth2).attr(
+      let uniqueID = chartId ?? crypto.randomUUID().toUpperCase();
+      g.append("defs").append("clipPath").attr("id", uniqueID + "-clip").append("rect").attr("width", innerWidth2).attr(
         "height",
         dataTableHeight > 0 ? innerHeight2 - dataTableHeight : innerHeight2
       );
@@ -13356,7 +13356,8 @@
               let axis2 = d.x.axis;
               return dataLabelsPositionForBarChartFamily(formatOptions, d.x.measure ? d.x.measure : 0, d.position, requiredXScale, minValue, void 0, chartType, isSensitivityChart, axis2);
             } else if (chartType === chartTypes.ColumnChart) {
-              const legend = xScaleForLegends(d.currentLegend);
+              const legendUniqueId = d.legendUniqueId.includes("~$~") ? d.legendUniqueId.split("~$~")[0] : d.legendUniqueId;
+              const legend = xScaleForLegends(legendUniqueId);
               const x2 = legend != null ? xScale(d.x) + legend - (columnWidth - xScaleForLegends.bandwidth()) / 2 : xScale(d.x);
               return x2;
             } else {
@@ -15464,10 +15465,10 @@
       const isRotationZero = formatOptions.xAxisLabel.xAxisLabelRotation == 0;
       let yRect = gTag.append("rect").attr("id", "yAxisRect").attr(
         "transform",
-        chartType === chartTypes.TornadoChart ? `translate(${-xLabelMargin + 10},0)` : `translate(${xaxisLabelPosition === 0 ? -xLabelMargin - 5 : xaxisLabelPosition === 1 ? innerWidth2 : xScaleBottom(0) + (-xLabelMargin - 5)},0)`
+        chartType === chartTypes.TornadoChart ? `translate(${-xLabelMargin - 1},0)` : `translate(${xaxisLabelPosition === 0 ? -xLabelMargin - 5 : xaxisLabelPosition === 1 ? innerWidth2 : xScaleBottom(0) + (-xLabelMargin - 5)},0)`
       ).attr("height", innerHeight2).attr(
         "width",
-        chartType === chartTypes.TornadoChart ? xLabelMargin + 20 : xLabelMargin + 5
+        chartType === chartTypes.TornadoChart ? xLabelMargin : xLabelMargin + 5
       ).attr(
         "fill",
         formatOptions.xAxisLabel.xAxisLabelVisibility ? formatOptions.xAxisLabel.xAxisBackgroundColor ? formatOptions.xAxisLabel.xAxisBackgroundColor !== commonColors.white ? formatOptions.xAxisLabel.xAxisBackgroundColor : "none" : formatOptions.chartArea.chartAreaColor : formatOptions.chartArea.chartAreaColor
@@ -15732,7 +15733,7 @@
       );
       svg.on("wheel", (event2) => {
         event2.preventDefault();
-        const scrollDelta = Math.abs(event2.deltaX) > Math.abs(event2.deltaY) ? event2.deltaX : event2.deltaY;
+        const scrollDelta = isBarChart ? event2.deltaY : event2.deltaX;
         const step2 = scrollDelta > 0 ? 1 : -1;
         updateFromScrollPosition(step2, scrollMax, handleWidth, handle, true);
         if (isBarChart) {
@@ -17588,9 +17589,7 @@
           (data2.properties.alias || data2.properties.name || "Legend").replace(/ /g, "-");
           hideTooltipOnMouseOut();
         });
-        columnGroups.exit().remove().each(function(d) {
-          console.log("Exiting:", d.dimension, d.legend);
-        });
+        columnGroups.exit().remove();
       });
       gTag.selectAll(".parentGroup").raise();
     };
@@ -18216,6 +18215,7 @@
     const getChartType = (lineData) => {
       lineData.forEach((data2) => {
         switch (data2.properties.type) {
+          default:
           case chartTypes.ColumnChart:
             drawColumnChart(data2);
             break;
@@ -18317,7 +18317,7 @@
         (d) => xScale(d.dimension) ? xScale(d.dimension) : null
       ).y(
         (d) => d.axis == axisTypes.primary ? yScaleLeft(d.value) : yScaleRight(d.value)
-      ).defined((d) => d.hideZero ? Boolean(d.value) : true).curve(getCurveType(formatOptions));
+      ).defined((d) => formatOptions?.plotArea?.hideZeroValues ? Boolean(d.value) : true).curve(getCurveType(formatOptions));
       let lines = gTag.selectAll(".lines.parentGroup").data([1]);
       lines = lines.enter().append("g").attr("class", "lines parentGroup").merge(lines);
       let lineGroups = lines.selectAll(".line-group").data(lineData, (d) => d.properties.legendUniqueId);
@@ -30766,11 +30766,7 @@
           "font-family",
           chartFormatOptions.pointerValue.pointerValueFontFamily
         ).text(
-          (d) => `${KPIName}: ${!chartFormatOptions.pointerValue.pointerValueAlias && d != 0 ? getNumberWithFormatFunction(
-            "None",
-            chartFormatOptions.pointerValue.pointerValueNumberFormat,
-            chartFormatOptions.pointerValue.pointerValueDecimalPrecision
-          )(ChartData[1].data[0].value) : chartFormatOptions.pointerValue.pointerValueAliasText}`
+          (d) => `${KPIName}: ${!chartFormatOptions.pointerValue.pointerValueAlias && d != 0 ? connectorNumberFormat2(ChartData[0].data[0].value, ChartData[1].data[0].value) : chartFormatOptions.pointerValue.pointerValueAliasText}`
         ).attr(
           "visibility",
           chartFormatOptions.plotArea.dataLabels ? "visible" : "hidden"
@@ -30779,6 +30775,45 @@
         logError$2(fileName2, "setPointerValueText", error);
       }
     }
+    function connectorNumberFormat2(numerator, denominator) {
+      try {
+        let Measure = numerator - denominator;
+        let noOfYears = 1;
+        let KPI = parseInt(
+          chartFormatOptions.pointerValue.connectorKPIforSpeedometer
+        );
+        let formatter;
+        let value2;
+        const decimalValues = chartFormatOptions.pointerValue.pointerValueDecimalPrecision;
+        switch (KPI) {
+          case 1:
+            Measure = denominator;
+            break;
+          case 2:
+            Measure = Math.abs(Measure);
+            break;
+          case 3:
+            formatter = `.${decimalValues}%`;
+            Measure = Math.pow(denominator / numerator, 1 / noOfYears) - 1;
+            value2 = format(formatter)(Measure);
+            return value2;
+          case 4:
+            formatter = `.${decimalValues}%`;
+            Measure = Math.round(denominator / numerator * 100 - 100) / 100;
+            value2 = format(formatter)(Measure);
+            return value2;
+        }
+        isNaN(Measure) ? Measure = 0 : Measure;
+        return getNumberWithFormatFunction(
+          chartFormatOptions.pointerValue.pointerValueDisplayUnits,
+          chartFormatOptions.pointerValue.pointerValueNumberFormat,
+          decimalValues
+        )(Measure);
+      } catch (error) {
+        logError$2(fileName2, "connectorNumberFormat", error);
+        return "";
+      }
+    }
     return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { width: "100%", height: "100%" }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
       "svg",
       {
@@ -30985,7 +31020,7 @@
           "visibility",
           chartFormatOptions.plotArea.axialAxis ? "visible" : "hidden"
         );
-        let arcs = svg2.attr("class", "data").selectAll("path").data(ChartData).enter().append("path").attr("class", "parentGroup").attr("hoverId", (d) => d.data[0].legend).style("fill", (d, i) => d.properties.color).on("mousemove", (event2, d) => {
+        let arcs = svg2.attr("class", "data").selectAll("path").data(ChartData).enter().append("path").attr("class", "parentGroup").attr("hoverId", (d) => d.data[0].legend.replaceAll(" ", "-")).style("fill", (d, i) => d.properties.color).on("mousemove", (event2, d) => {
           showTooltipOnMouseMove(
             [
               {

package/package.json

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