pace-chart-lib 1.0.51 → 1.0.53

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

@@ -11178,6 +11178,7 @@ const defaultChartFormatOptions = {
     totalColor: "#41a5b4",
     positiveColor: "#9fb700",
     negativeColor: "#e25a42",
+    dotPlotLineColor: "#c7c7c7",
     dataLabelValue: true,
     plotAreaAbsoluteValue: false,
     dataLabelName: true,
@@ -16079,11 +16080,13 @@ function calculateMaxLegendWidth(list, formatOptions) {
     let maxLength = 0;
     let maxLegend = list[0];
     list.forEach((legend) => {
-      let splitedLegend = legend.includes("~$~") ? legend.split("~$~")[1] : legend.includes("-") ? legend.slice(legend.indexOf("-") + 1) : legend;
-      let splitedLegendLength = splitedLegend.length;
-      if (maxLength < splitedLegendLength) {
-        maxLength = splitedLegendLength;
-        maxLegend = splitedLegend;
+      if (legend !== void 0) {
+        let splitedLegend = legend.includes("~$~") ? legend.split("~$~")[1] : legend.includes("-") ? legend.slice(legend.indexOf("-") + 1) : legend;
+        let splitedLegendLength = splitedLegend.length;
+        if (maxLength < splitedLegendLength) {
+          maxLength = splitedLegendLength;
+          maxLegend = splitedLegend;
+        }
       }
     });
     return calculateWidthHeightDynamically(maxLegend, formatOptions.legends.legendFontSize, formatOptions.legends.legendFontFamily);
@@ -16413,6 +16416,15 @@ function showTooltipOnMouseMove(elements, chartFormatOptions, event2, prop) {
     const bgColor = isLightTheme ? "rgba(255, 255, 255)" : "#272729ff";
     const textColor = isLightTheme ? "black" : commonColors.white;
     const subTextColor = isLightTheme ? "gray" : "#d1d5db";
+    const formatValueWithWordLimit = (text, wordsPerLine = 6) => {
+      if (!text) return "";
+      const words = text.split(" ");
+      let result = "";
+      for (let i = 0; i < words.length; i += wordsPerLine) {
+        result += words.slice(i, i + wordsPerLine).join(" ") + "<br/>";
+      }
+      return result;
+    };
     selectAll(".chartTooltip").style("visibility", visibilityCondition.hidden);
     const tooltip = select$2("#chartTooltipDiv").html("").append("div").attr(
       "class",
@@ -16447,29 +16459,53 @@ function showTooltipOnMouseMove(elements, chartFormatOptions, event2, prop) {
         }
       })();
       p += `
-                <div style="display:flex; align-items:center; margin-bottom:4px;">
+                <div style="
+                    display:flex;
+                    align-items:flex-start;
+                    justify-content:space-between;
+                    margin-bottom:6px;
+                    gap:10px;
+                ">
+
+                    <!-- LEFT SIDE (Dot + Key) -->
+                    <div style="
+                    display:flex;
+                    align-items:flex-start;
+                    gap:6px;
+                    flex-shrink:0;
+                    ">
                     <span style="
-                        display:inline-block;
                         width:6px;
                         height:6px;
-                        background-color:${markerColor};
-                        margin-right:6px;
-                        ${shapeStyle}
+                        background:${markerColor};
+                        margin-top:5px;
+                        border-radius:50%;
                     "></span>
+
                     <span style="
-                        font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;
                         font-size:11px;
                         color:${subTextColor};
-                        flex:1;
-                    ">${c2.key || ""}</span>
-                    <span style="
-                        font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;
-                        font-size:11px;
-                        color:${textColor};
-                        font-weight:bold;
-                        margin-left:6px;
-                    ">${c2.value || ""}</span>
-                </div>`;
+                        white-space:nowrap;
+                    ">
+                        ${c2.key || ""}
+                    </span>
+                    </div>
+
+                    <!-- RIGHT SIDE (Value) -->
+                    <div style="
+                    font-size:11px;
+                    font-weight:bold;
+                    color:${textColor};
+                    text-align:right;
+                    max-width:200px;
+                    word-break:break-word;
+                    line-height:1.4;
+                    ">
+                    ${formatValueWithWordLimit(String(c2.value), 6)}
+                    </div>
+
+                </div>
+                `;
       return p;
     }, ``);
     tooltip.html(`
@@ -16481,35 +16517,20 @@ function showTooltipOnMouseMove(elements, chartFormatOptions, event2, prop) {
     const tooltipNode = tooltip.node();
     const tooltipWidth = tooltipNode.offsetWidth;
     const tooltipHeight = tooltipNode.offsetHeight;
-    const halfWidth = window.innerWidth / 2;
-    const halfHeight = window.innerHeight / 2;
-    let left2 = 0;
-    let top2 = 0;
-    let arrow = "";
-    if (mouseX > halfWidth && mouseY < halfHeight) {
-      left2 = mouseX - tooltipWidth - 10;
-      top2 = mouseY - 10;
-      arrow = "right-top";
-    } else if (mouseX < halfWidth && mouseY < halfHeight) {
-      left2 = mouseX + 20;
-      top2 = mouseY - 10;
-      arrow = "left-top";
-    } else if (mouseX < halfWidth && mouseY >= halfHeight) {
-      left2 = mouseX + 20;
-      top2 = mouseY - tooltipHeight + 10;
-      arrow = "left-bottom";
-    } else {
+    let left2 = mouseX + 15;
+    let top2 = mouseY + 15;
+    if (left2 + tooltipWidth > window.innerWidth) {
       left2 = mouseX - tooltipWidth - 10;
-      top2 = mouseY - tooltipHeight + 10;
-      arrow = "right-bottom";
+    }
+    if (top2 + tooltipHeight > window.innerHeight) {
+      top2 = mouseY - tooltipHeight - 10;
     }
     tooltip.style("left", `${left2}px`).style("top", `${top2}px`).style(
       "visibility",
-      chartFormatOptions.toolTip.toolTipVisibility ? visibilityCondition.visible : visibilityCondition.hidden
-    ).style("transform", "scale(1)").style("opacity", "1");
-    tooltip.select(".arrow-placeholder").attr("class", `arrow-${arrow}`);
+      chartFormatOptions.toolTip.toolTipVisibility ? "visible" : "hidden"
+    );
   } catch (error) {
-    logError$2(fileName$b, "showTooltipOnMouseMove", error);
+    console.error("Tooltip Error:", error);
   }
 }
 function hideTooltipOnMouseOut() {
@@ -16578,12 +16599,14 @@ const legendsWithScroll = (svg, seriesData, x2, y2, width, height, legendPositio
             const hoverId = this.textContent.replace(/\s+/g, "-");
             svg.selectAll(".parentGroup").classed("highlight", false).classed("unhighlight", true);
             svg.selectAll(`[hoverId="${hoverId}"]`).classed("highlight", true).classed("unhighlight", false);
+            svg.selectAll(".cleveland-line-group").classed("highlight", false).classed("unhighlight", true);
           }
         }).on("mouseout", function() {
           if (chartFormatOptions.legends.onHoverEffect) {
             const hoverId = this.textContent.replace(/\s+/g, "-");
             svg.selectAll(".parentGroup").classed("highlight", false).classed("unhighlight", false);
             svg.selectAll(`[hoverId="${hoverId}"]`).classed("highlight", false).classed("unhighlight", false);
+            svg.selectAll(".cleveland-line-group").classed("highlight", false).classed("unhighlight", false);
           }
         });
         if (legendPosition == staticLegendPosition.top || legendPosition == staticLegendPosition.bottom) {
@@ -55633,6 +55656,7 @@ const WaterfallChart = ({
         }
       }
     });
+    gTag.selectAll(".parentGroup").raise();
   };
   const setSVGContainer = (margin2) => {
     innerWidth2 = width - margin2.left - margin2.right;
@@ -55702,7 +55726,6 @@ const WaterfallChart = ({
     drawColumnChart();
   };
   const drawColumnChart = () => {
-    getChartType();
     initXaxis$1(
       gTag,
       chartJSON,
@@ -55720,6 +55743,7 @@ const WaterfallChart = ({
       chartJSON.legendList,
       xScale
     );
+    getChartType();
   };
   const generateWaterFallData = () => {
     try {
@@ -55835,7 +55859,7 @@ const TornadoChart = ({
   const chartId = crypto.randomUUID();
   let columnWidth = 0;
   const chartType = chartTypes.TornadoChart;
-  const isAdvanceAnalyticsChart = data.IsadvanceanalyticsChart;
+  const isAdvanceAnalyticsChart = data.IsadvanceanalyticsChart ?? data.IsCalCSensitivity;
   const svgRef = useRef();
   let seriesData = generalizedChartData(
     data.ChartData,
@@ -56152,23 +56176,38 @@ const TornadoChart = ({
     }
   };
   const initScale = () => {
+    let min2 = chartJSON.yMaxLeft;
+    let max2 = chartJSON.yMaxRight;
+    let adjustedPosition = formatOptions.annotation.annotationVisibility != "5" && formatOptions.annotation.annotationPosition == "1" ? 20 : 0;
+    let maxValue;
     let right2 = false;
     let left2 = false;
-    let maxValue;
-    if (chartJSON.yMaxLeft > chartJSON.yMaxRight) {
-      maxValue = chartJSON.yMaxLeft;
+    if (min2 > max2) {
+      maxValue = min2;
       right2 = true;
     } else {
-      maxValue = chartJSON.yMaxRight;
+      maxValue = max2;
       left2 = true;
     }
-    let adjustedPosition = formatOptions.annotation.annotationVisibility != "5" && formatOptions.annotation.annotationPosition == "1" ? 20 : 0;
-    let scaleFactor = formatOptions.annotation.annotationVisibility != "5" ? chartJSON.yMaxLeft / maxValue !== 1 ? Math.abs(chartJSON.yMaxLeft / maxValue) * 100 < 10 ? 3 : 0 : Math.abs(chartJSON.yMaxRight / maxValue) * 100 < 10 ? 3 : 0 : 0;
-    chartJSON.yMaxLeft = chartJSON.yMaxLeft;
-    xScaleForLegends = linear$1().domain([
-      chartJSON.yMaxLeft * (1.2 + (left2 ? scaleFactor : 0)),
-      chartJSON.yMaxRight * (1.2 + (right2 ? scaleFactor : 0))
-    ]).range([adjustedPosition, innerWidth2 - adjustedPosition]);
+    let scaleFactor = formatOptions.annotation.annotationVisibility != "5" ? min2 / maxValue !== 1 ? Math.abs(min2 / maxValue) * 100 < 10 ? 3 : 0 : Math.abs(max2 / maxValue) * 100 < 10 ? 3 : 0 : 0;
+    let domainMin = 0;
+    let domainMax = 0;
+    if (min2 < 0 && max2 > 0) {
+      domainMin = min2 * (1.2 + (left2 ? scaleFactor : 0));
+      domainMax = max2 * (1.2 + (right2 ? scaleFactor : 0));
+    } else if (min2 >= 0 && max2 >= 0) {
+      domainMin = 0;
+      domainMax = max2 * (1.2 + (right2 ? scaleFactor : 0));
+    } else if (min2 <= 0 && max2 <= 0) {
+      domainMin = min2 * (1.2 + (left2 ? scaleFactor : 0));
+      domainMax = 0;
+    } else {
+      domainMin = min2 * 1.2;
+      domainMax = max2 * 1.2;
+    }
+    domainMin = Math.floor(domainMin);
+    domainMax = Math.ceil(domainMax);
+    xScaleForLegends = linear$1().domain([domainMin, domainMax]).range([adjustedPosition, innerWidth2 - adjustedPosition]);
     xScale = xScaleForLegends;
     calculatedRange = [0, innerWidth2];
     getXScale();
@@ -56262,7 +56301,7 @@ const TornadoChart = ({
         [
           {
             key: "Measure",
-            value: formatOptions.yAxisTitle.yAxisTitleHTML !== "" ? new DOMParser().parseFromString(formatOptions.yAxisTitle.yAxisTitleHTML, "text/html").body.textContent?.trim() : d.dimension
+            value: formatOptions.yAxisTitle.yAxisTitleHTML !== "" ? new DOMParser().parseFromString(formatOptions.yAxisTitle.yAxisTitleHTML, "text/html").body.textContent?.trim() : !data.IsCalCSensitivity ? d.dimension : d.properties.currentMeasure.split("~$~")[1]
           },
           { key: "Legend", value: d.legendText },
           {
@@ -56278,7 +56317,7 @@ const TornadoChart = ({
         ],
         formatOptions,
         event2,
-        d.properties
+        !data.IsCalCSensitivity ? d.properties : d.properties.legend === "Calculated Low(-ve)" ? { markerColor: formatOptions.plotArea.plotAreaCalculatedLow } : { markerColor: formatOptions.plotArea.plotAreaCalculatedHigh }
       );
     }).on("mouseout", hideTooltipOnMouseOut);
   };
@@ -56780,6 +56819,8 @@ const DotPlot = ({
         d.markerColor = lData.properties.markerColor || lData.properties.color;
         d.alias = lData.properties.alias;
         d.lineStyle = lData.properties.lineStyle;
+        d.lineWidth = lData.properties.lineWidth;
+        d.lineColor = formatOptions.plotArea.dotPlotLineColor ?? "#c7c7c7";
       });
     });
     const groupedData = group(
@@ -56799,10 +56840,10 @@ const DotPlot = ({
     ).attr(
       "x2",
       ([, v]) => xScaleBottom(Math.max(v[0]?.value ?? 0, v[1]?.value ?? 0))
-    ).attr("stroke", "#c7c7c7").attr("stroke-width", 2).attr("stroke-dasharray", (d) => {
+    ).attr("stroke", (d) => d[1][0].lineColor).attr("stroke-width", (d) => d[1][0].lineStyle !== "None" ? d[1][0].lineWidth : 0).attr("stroke-dasharray", (d) => {
       switch (d[1][0].lineStyle) {
         case staticLineStyle.dotted:
-          return `0,${d[1][0].lineStyle + 2}`;
+          return "1,4";
         case staticLineStyle.dashed:
           return strokeDashValues;
         default:
@@ -56856,10 +56897,6 @@ const DotPlot = ({
           event2,
           data2.properties
         );
-        let legend = (data2.properties.alias || data2.properties.name || "Legend").replace(/ /g, "-");
-        selectAll(".parentGroup").classed("highlight", false).classed("unhighlight", true);
-        selectAll('[hoverId="' + legend + '"]').classed("highlight", true).classed("unhighlight", false);
-        select$2(event2.currentTarget.parentNode).selectAll(".halo").data([d]).join("circle").attr("class", "halo").attr("cx", xScaleBottom(d.value)).attr("cy", yScale(d.dimension)).attr("r", (d.markerSize || 6) * 3).attr("fill", d.markerColor).attr("opacity", 0.4);
       }).on("mouseout", () => {
         selectAll(".parentGroup").classed("highlight", false).classed("unhighlight", false);
         selectAll(".halo").remove();

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

@@ -11181,6 +11181,7 @@
       totalColor: "#41a5b4",
       positiveColor: "#9fb700",
       negativeColor: "#e25a42",
+      dotPlotLineColor: "#c7c7c7",
       dataLabelValue: true,
       plotAreaAbsoluteValue: false,
       dataLabelName: true,
@@ -16082,11 +16083,13 @@
       let maxLength = 0;
       let maxLegend = list[0];
       list.forEach((legend) => {
-        let splitedLegend = legend.includes("~$~") ? legend.split("~$~")[1] : legend.includes("-") ? legend.slice(legend.indexOf("-") + 1) : legend;
-        let splitedLegendLength = splitedLegend.length;
-        if (maxLength < splitedLegendLength) {
-          maxLength = splitedLegendLength;
-          maxLegend = splitedLegend;
+        if (legend !== void 0) {
+          let splitedLegend = legend.includes("~$~") ? legend.split("~$~")[1] : legend.includes("-") ? legend.slice(legend.indexOf("-") + 1) : legend;
+          let splitedLegendLength = splitedLegend.length;
+          if (maxLength < splitedLegendLength) {
+            maxLength = splitedLegendLength;
+            maxLegend = splitedLegend;
+          }
         }
       });
       return calculateWidthHeightDynamically(maxLegend, formatOptions.legends.legendFontSize, formatOptions.legends.legendFontFamily);
@@ -16416,6 +16419,15 @@
       const bgColor = isLightTheme ? "rgba(255, 255, 255)" : "#272729ff";
       const textColor = isLightTheme ? "black" : commonColors.white;
       const subTextColor = isLightTheme ? "gray" : "#d1d5db";
+      const formatValueWithWordLimit = (text, wordsPerLine = 6) => {
+        if (!text) return "";
+        const words = text.split(" ");
+        let result = "";
+        for (let i = 0; i < words.length; i += wordsPerLine) {
+          result += words.slice(i, i + wordsPerLine).join(" ") + "<br/>";
+        }
+        return result;
+      };
       selectAll(".chartTooltip").style("visibility", visibilityCondition.hidden);
       const tooltip = select$2("#chartTooltipDiv").html("").append("div").attr(
         "class",
@@ -16450,29 +16462,53 @@
           }
         })();
         p += `
-                <div style="display:flex; align-items:center; margin-bottom:4px;">
+                <div style="
+                    display:flex;
+                    align-items:flex-start;
+                    justify-content:space-between;
+                    margin-bottom:6px;
+                    gap:10px;
+                ">
+
+                    <!-- LEFT SIDE (Dot + Key) -->
+                    <div style="
+                    display:flex;
+                    align-items:flex-start;
+                    gap:6px;
+                    flex-shrink:0;
+                    ">
                     <span style="
-                        display:inline-block;
                         width:6px;
                         height:6px;
-                        background-color:${markerColor};
-                        margin-right:6px;
-                        ${shapeStyle}
+                        background:${markerColor};
+                        margin-top:5px;
+                        border-radius:50%;
                     "></span>
+
                     <span style="
-                        font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;
                         font-size:11px;
                         color:${subTextColor};
-                        flex:1;
-                    ">${c2.key || ""}</span>
-                    <span style="
-                        font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;
-                        font-size:11px;
-                        color:${textColor};
-                        font-weight:bold;
-                        margin-left:6px;
-                    ">${c2.value || ""}</span>
-                </div>`;
+                        white-space:nowrap;
+                    ">
+                        ${c2.key || ""}
+                    </span>
+                    </div>
+
+                    <!-- RIGHT SIDE (Value) -->
+                    <div style="
+                    font-size:11px;
+                    font-weight:bold;
+                    color:${textColor};
+                    text-align:right;
+                    max-width:200px;
+                    word-break:break-word;
+                    line-height:1.4;
+                    ">
+                    ${formatValueWithWordLimit(String(c2.value), 6)}
+                    </div>
+
+                </div>
+                `;
         return p;
       }, ``);
       tooltip.html(`
@@ -16484,35 +16520,20 @@
       const tooltipNode = tooltip.node();
       const tooltipWidth = tooltipNode.offsetWidth;
       const tooltipHeight = tooltipNode.offsetHeight;
-      const halfWidth = window.innerWidth / 2;
-      const halfHeight = window.innerHeight / 2;
-      let left2 = 0;
-      let top2 = 0;
-      let arrow = "";
-      if (mouseX > halfWidth && mouseY < halfHeight) {
-        left2 = mouseX - tooltipWidth - 10;
-        top2 = mouseY - 10;
-        arrow = "right-top";
-      } else if (mouseX < halfWidth && mouseY < halfHeight) {
-        left2 = mouseX + 20;
-        top2 = mouseY - 10;
-        arrow = "left-top";
-      } else if (mouseX < halfWidth && mouseY >= halfHeight) {
-        left2 = mouseX + 20;
-        top2 = mouseY - tooltipHeight + 10;
-        arrow = "left-bottom";
-      } else {
+      let left2 = mouseX + 15;
+      let top2 = mouseY + 15;
+      if (left2 + tooltipWidth > window.innerWidth) {
         left2 = mouseX - tooltipWidth - 10;
-        top2 = mouseY - tooltipHeight + 10;
-        arrow = "right-bottom";
+      }
+      if (top2 + tooltipHeight > window.innerHeight) {
+        top2 = mouseY - tooltipHeight - 10;
       }
       tooltip.style("left", `${left2}px`).style("top", `${top2}px`).style(
         "visibility",
-        chartFormatOptions.toolTip.toolTipVisibility ? visibilityCondition.visible : visibilityCondition.hidden
-      ).style("transform", "scale(1)").style("opacity", "1");
-      tooltip.select(".arrow-placeholder").attr("class", `arrow-${arrow}`);
+        chartFormatOptions.toolTip.toolTipVisibility ? "visible" : "hidden"
+      );
     } catch (error) {
-      logError$2(fileName$b, "showTooltipOnMouseMove", error);
+      console.error("Tooltip Error:", error);
     }
   }
   function hideTooltipOnMouseOut() {
@@ -16581,12 +16602,14 @@
               const hoverId = this.textContent.replace(/\s+/g, "-");
               svg.selectAll(".parentGroup").classed("highlight", false).classed("unhighlight", true);
               svg.selectAll(`[hoverId="${hoverId}"]`).classed("highlight", true).classed("unhighlight", false);
+              svg.selectAll(".cleveland-line-group").classed("highlight", false).classed("unhighlight", true);
             }
           }).on("mouseout", function() {
             if (chartFormatOptions.legends.onHoverEffect) {
               const hoverId = this.textContent.replace(/\s+/g, "-");
               svg.selectAll(".parentGroup").classed("highlight", false).classed("unhighlight", false);
               svg.selectAll(`[hoverId="${hoverId}"]`).classed("highlight", false).classed("unhighlight", false);
+              svg.selectAll(".cleveland-line-group").classed("highlight", false).classed("unhighlight", false);
             }
           });
           if (legendPosition == staticLegendPosition.top || legendPosition == staticLegendPosition.bottom) {
@@ -55636,6 +55659,7 @@
           }
         }
       });
+      gTag.selectAll(".parentGroup").raise();
     };
     const setSVGContainer = (margin2) => {
       innerWidth2 = width - margin2.left - margin2.right;
@@ -55705,7 +55729,6 @@
       drawColumnChart();
     };
     const drawColumnChart = () => {
-      getChartType();
       initXaxis$1(
         gTag,
         chartJSON,
@@ -55723,6 +55746,7 @@
         chartJSON.legendList,
         xScale
       );
+      getChartType();
     };
     const generateWaterFallData = () => {
       try {
@@ -55838,7 +55862,7 @@
     const chartId = crypto.randomUUID();
     let columnWidth = 0;
     const chartType = chartTypes.TornadoChart;
-    const isAdvanceAnalyticsChart = data.IsadvanceanalyticsChart;
+    const isAdvanceAnalyticsChart = data.IsadvanceanalyticsChart ?? data.IsCalCSensitivity;
     const svgRef = require$$0$1.useRef();
     let seriesData = generalizedChartData(
       data.ChartData,
@@ -56155,23 +56179,38 @@
       }
     };
     const initScale = () => {
+      let min2 = chartJSON.yMaxLeft;
+      let max2 = chartJSON.yMaxRight;
+      let adjustedPosition = formatOptions.annotation.annotationVisibility != "5" && formatOptions.annotation.annotationPosition == "1" ? 20 : 0;
+      let maxValue;
       let right2 = false;
       let left2 = false;
-      let maxValue;
-      if (chartJSON.yMaxLeft > chartJSON.yMaxRight) {
-        maxValue = chartJSON.yMaxLeft;
+      if (min2 > max2) {
+        maxValue = min2;
         right2 = true;
       } else {
-        maxValue = chartJSON.yMaxRight;
+        maxValue = max2;
         left2 = true;
       }
-      let adjustedPosition = formatOptions.annotation.annotationVisibility != "5" && formatOptions.annotation.annotationPosition == "1" ? 20 : 0;
-      let scaleFactor = formatOptions.annotation.annotationVisibility != "5" ? chartJSON.yMaxLeft / maxValue !== 1 ? Math.abs(chartJSON.yMaxLeft / maxValue) * 100 < 10 ? 3 : 0 : Math.abs(chartJSON.yMaxRight / maxValue) * 100 < 10 ? 3 : 0 : 0;
-      chartJSON.yMaxLeft = chartJSON.yMaxLeft;
-      xScaleForLegends = linear$1().domain([
-        chartJSON.yMaxLeft * (1.2 + (left2 ? scaleFactor : 0)),
-        chartJSON.yMaxRight * (1.2 + (right2 ? scaleFactor : 0))
-      ]).range([adjustedPosition, innerWidth2 - adjustedPosition]);
+      let scaleFactor = formatOptions.annotation.annotationVisibility != "5" ? min2 / maxValue !== 1 ? Math.abs(min2 / maxValue) * 100 < 10 ? 3 : 0 : Math.abs(max2 / maxValue) * 100 < 10 ? 3 : 0 : 0;
+      let domainMin = 0;
+      let domainMax = 0;
+      if (min2 < 0 && max2 > 0) {
+        domainMin = min2 * (1.2 + (left2 ? scaleFactor : 0));
+        domainMax = max2 * (1.2 + (right2 ? scaleFactor : 0));
+      } else if (min2 >= 0 && max2 >= 0) {
+        domainMin = 0;
+        domainMax = max2 * (1.2 + (right2 ? scaleFactor : 0));
+      } else if (min2 <= 0 && max2 <= 0) {
+        domainMin = min2 * (1.2 + (left2 ? scaleFactor : 0));
+        domainMax = 0;
+      } else {
+        domainMin = min2 * 1.2;
+        domainMax = max2 * 1.2;
+      }
+      domainMin = Math.floor(domainMin);
+      domainMax = Math.ceil(domainMax);
+      xScaleForLegends = linear$1().domain([domainMin, domainMax]).range([adjustedPosition, innerWidth2 - adjustedPosition]);
       xScale = xScaleForLegends;
       calculatedRange = [0, innerWidth2];
       getXScale();
@@ -56265,7 +56304,7 @@
           [
             {
               key: "Measure",
-              value: formatOptions.yAxisTitle.yAxisTitleHTML !== "" ? new DOMParser().parseFromString(formatOptions.yAxisTitle.yAxisTitleHTML, "text/html").body.textContent?.trim() : d.dimension
+              value: formatOptions.yAxisTitle.yAxisTitleHTML !== "" ? new DOMParser().parseFromString(formatOptions.yAxisTitle.yAxisTitleHTML, "text/html").body.textContent?.trim() : !data.IsCalCSensitivity ? d.dimension : d.properties.currentMeasure.split("~$~")[1]
             },
             { key: "Legend", value: d.legendText },
             {
@@ -56281,7 +56320,7 @@
           ],
           formatOptions,
           event2,
-          d.properties
+          !data.IsCalCSensitivity ? d.properties : d.properties.legend === "Calculated Low(-ve)" ? { markerColor: formatOptions.plotArea.plotAreaCalculatedLow } : { markerColor: formatOptions.plotArea.plotAreaCalculatedHigh }
         );
       }).on("mouseout", hideTooltipOnMouseOut);
     };
@@ -56783,6 +56822,8 @@
           d.markerColor = lData.properties.markerColor || lData.properties.color;
           d.alias = lData.properties.alias;
           d.lineStyle = lData.properties.lineStyle;
+          d.lineWidth = lData.properties.lineWidth;
+          d.lineColor = formatOptions.plotArea.dotPlotLineColor ?? "#c7c7c7";
         });
       });
       const groupedData = group(
@@ -56802,10 +56843,10 @@
       ).attr(
         "x2",
         ([, v]) => xScaleBottom(Math.max(v[0]?.value ?? 0, v[1]?.value ?? 0))
-      ).attr("stroke", "#c7c7c7").attr("stroke-width", 2).attr("stroke-dasharray", (d) => {
+      ).attr("stroke", (d) => d[1][0].lineColor).attr("stroke-width", (d) => d[1][0].lineStyle !== "None" ? d[1][0].lineWidth : 0).attr("stroke-dasharray", (d) => {
         switch (d[1][0].lineStyle) {
           case staticLineStyle.dotted:
-            return `0,${d[1][0].lineStyle + 2}`;
+            return "1,4";
           case staticLineStyle.dashed:
             return strokeDashValues;
           default:
@@ -56859,10 +56900,6 @@
             event2,
             data2.properties
           );
-          let legend = (data2.properties.alias || data2.properties.name || "Legend").replace(/ /g, "-");
-          selectAll(".parentGroup").classed("highlight", false).classed("unhighlight", true);
-          selectAll('[hoverId="' + legend + '"]').classed("highlight", true).classed("unhighlight", false);
-          select$2(event2.currentTarget.parentNode).selectAll(".halo").data([d]).join("circle").attr("class", "halo").attr("cx", xScaleBottom(d.value)).attr("cy", yScale(d.dimension)).attr("r", (d.markerSize || 6) * 3).attr("fill", d.markerColor).attr("opacity", 0.4);
         }).on("mouseout", () => {
           selectAll(".parentGroup").classed("highlight", false).classed("unhighlight", false);
           selectAll(".halo").remove();

package/package.json

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

package/dist/Components/Charts/ChartsWithAxis/AreaFamily/AreaChart.d.ts

@@ -1,4 +0,0 @@
-import React from "react";
-import { type TChartProps } from "../ChartsWithAxisTypes.types";
-declare const AreaChart: React.FC<TChartProps>;
-export default AreaChart;

package/dist/Components/Charts/ChartsWithAxis/AreaFamily/NormalizedStackAreaChart.d.ts

@@ -1,4 +0,0 @@
-import React from "react";
-import { type TChartProps } from "../ChartsWithAxisTypes.types";
-declare const NormalizedStackAreaChart: React.FC<TChartProps>;
-export default NormalizedStackAreaChart;

package/dist/Components/Charts/ChartsWithAxis/AreaFamily/StackAreaChart.d.ts

@@ -1,4 +0,0 @@
-import React from "react";
-import { type TChartProps } from "../ChartsWithAxisTypes.types";
-declare const StackAreaChart: React.FC<TChartProps>;
-export default StackAreaChart;