pace-chart-lib 1.0.64 → 1.0.66

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

@@ -11261,7 +11261,7 @@ const defaultChartFormatOptions = {
     dataLabelsCoordinates: [],
     hideInsignificantValue: false,
     sortBy: "default",
-    chartDirection: "top",
+    chartDirection: "right",
     plotAreaRangeFilter: {
       enabled: false,
       condition: "lt",
@@ -13097,7 +13097,7 @@ function setChartTitle(svg, formatOptions, width, chartTitleHeight) {
   let object2 = svg.append("foreignObject").attr(
     "visibility",
     formatOptions.chartTitle.chartTitleVisibility ? "visible" : "hidden"
-  ).attr("transform", `translate(2,2)`).attr("class", "chartTitle").attr("width", width).attr("height", chartTitleHeight + "px");
+  ).attr("transform", `translate(2,2)`).attr("class", "chartTitle").attr("width", width - 4).attr("height", chartTitleHeight + "px");
   const parseHTMLText = (html) => {
     const temp = document.createElement("div");
     temp.innerHTML = html;
@@ -21000,19 +21000,20 @@ function marginCalculationForBubbleScatter(width, height, maxMeasure, formatOpti
     let maxLegendWidth = maxLegendDimensions[0];
     let legendMargin = width15Percent < maxLegendWidth + 10 ? width15Percent : maxLegendWidth + 10;
     let totalHeight = formatOptions.plotArea.numberOfBubbles ? 20 : 0;
-    let dimensionHeightWidth = preCalculateTextDimensions(
-      getNumberWithFormatFunction(
-        formatOptions.xAxisLabel.xAxisDisplayUnits,
-        formatOptions.xAxisLabel.xAxisNumberFormat,
-        formatOptions.xAxisLabel.xAxisLabelDecimalPrecision ?? "2"
-      )(
-        maxDimension
-      ).toString(),
-      convertStringToNumber(formatOptions.xAxisLabel.xAxisLabelFontSize),
+    const maxDim = getNumberWithFormatFunction(
+      formatOptions.xAxisLabel.xAxisDisplayUnits,
+      formatOptions.xAxisLabel.xAxisNumberFormat,
+      formatOptions.xAxisLabel.xAxisLabelDecimalPrecision ?? "2"
+    )(
+      maxDimension
+    ).toString();
+    let dimensionHeightWidth = calculateWidthHeightDynamically(
+      maxDim,
+      formatOptions.xAxisLabel.xAxisLabelFontSize,
       formatOptions.xAxisLabel.xAxisLabelFontFamily,
       formatOptions.xAxisLabel.xAxisLabelRotation
     );
-    let maxDimensionWidth = dimensionHeightWidth.width + 10;
+    let maxDimensionWidth = dimensionHeightWidth[3] + 10;
     let xTitle = formatOptions.xAxisTitle.xAxisTitleVisibility ? formatOptions.xAxisTitle.xAxisDynamicTitleText.length !== 0 ? preCalculateTextDimensions(
       formatOptions.xAxisTitle.xAxisTitleHTML,
       void 0,
@@ -54272,6 +54273,12 @@ const OrganizationChart = ({
   let chartData = [];
   let scrollWidth = 0;
   let scrollHeight = 0;
+  let legendListWidth;
+  let displayedLegends = /* @__PURE__ */ new Map();
+  let maxLegendDimensions;
+  let maxMeasure = Number.NEGATIVE_INFINITY;
+  let minMeasure = Number.POSITIVE_INFINITY;
+  let heatMapScale;
   useEffect(() => {
     drawChart();
   }, [chartId, data, formatOptions]);
@@ -54280,19 +54287,64 @@ const OrganizationChart = ({
       svgRef,
       formatOptions
     ));
-    ({ margins, chartTitleHeight, innerHeight, innerWidth } = marginCalculationsForChartsWithoutLegends(
+    dataPreparation();
+    maxLegendDimensions = calculateLegendsMaxPossibleWidth2(displayedLegends);
+    ({ margins, innerHeight, innerWidth, legendListWidth, chartTitleHeight } = marginCalculationsForChartsWithoutAxis(
       chartFormatOptions,
+      width,
       height,
-      width
+      maxLegendDimensions,
+      margins
     ));
     initSvg(svgRef, width, height, chartFormatOptions);
     drawChartTitle(svgRef, chartTitleHeight, width, chartFormatOptions);
-    dataPreparation();
     scrollWidthHeightCalculation();
     drawOrganizationChart(chartData);
+    initLegendListForOrganizationChart();
+  };
+  const calculateLegendsMaxPossibleWidth2 = (displayedLegendsMap) => {
+    const legends = [];
+    displayedLegendsMap.forEach((_value, key) => {
+      legends.push(key);
+    });
+    const longestLegend = legends.reduce((a2, b) => a2.length > b.length ? a2 : b, "");
+    const legendDims = preCalculateTextDimensions(
+      longestLegend,
+      convertStringToNumber(chartFormatOptions.legends.legendFontSize),
+      chartFormatOptions.legends.legendFontFamily
+    );
+    return [legendDims.width, legendDims.height];
+  };
+  const initLegendListForOrganizationChart = () => {
+    let seriesData = [];
+    displayedLegends.forEach((colors2, label) => {
+      const color2 = `linear-gradient(90deg, ${colors2.join(", ")})`;
+      seriesData.push({
+        properties: {
+          ...legendEntries[0],
+          name: label,
+          alias: label,
+          color: color2
+        }
+      });
+    });
+    initLegendListWithTotalValueAllowance(
+      chartFormatOptions,
+      svg,
+      seriesData,
+      width,
+      height,
+      legendListWidth,
+      chartTitleHeight,
+      chartId,
+      margins,
+      staticLegendShape.rectangle,
+      void 0
+    );
   };
   const dataPreparation = () => {
     try {
+      const sortType = formatOptions?.plotArea?.sortBy ?? "default";
       chartDirection = chartFormatOptions.plotArea.chartDirection || orgChartDirection.left;
       var sum2 = 0;
       var absoluteSum = 0;
@@ -54303,9 +54355,19 @@ const OrganizationChart = ({
       let tempData = getFlattenedData(rootNode).filter(
         (data2) => data2.value !== null
       );
+      if (sortType !== "default") {
+        tempData = tempData.sort(
+          (a2, b) => sortType === "asc" ? a2.value - b.value : b.value - a2.value
+        );
+      }
       createIdIndexMap(tempData);
       generateUID(tempData);
       chartData = addStyleObjectToChartData(tempData);
+      if (chartFormatOptions.heatMap.showHeatMap) {
+        heatMapScale = sequential().domain([minMeasure, maxMeasure]).interpolator(
+          interpolateRgb$1(chartFormatOptions.heatMap.heatMapMinColor, chartFormatOptions.heatMap.heatMapMaxColor)
+        );
+      }
     } catch (error) {
       logError$2(fileName$1, "dataPreparation", error);
     }
@@ -54362,11 +54424,22 @@ const OrganizationChart = ({
         indexMapForStyleObject.set(styleObject.name, styleObject);
       });
       Object.keys(data2).forEach((key) => {
-        const legendObject = indexMapForStyleObject.get(data2[key].UID ?? data2[key].nodeLabel);
+        const nodeObj = data2[key];
+        const legendObject = indexMapForStyleObject.get(nodeObj.UID ?? nodeObj.nodeLabel) ?? legendEntries[0];
         data2[key] = {
-          ...data2[key],
-          styleObject: legendObject || legendEntries[0]
+          ...nodeObj,
+          styleObject: legendObject
         };
+        if (nodeObj.label) {
+          if (displayedLegends.has(nodeObj.label)) {
+            const colors2 = displayedLegends.get(nodeObj.label);
+            displayedLegends.set(nodeObj.label, [...colors2, legendObject.color ?? "#eedddd"]);
+          } else {
+            displayedLegends.set(nodeObj.label, [legendObject.color ?? "#eedddd"]);
+          }
+        }
+        maxMeasure = Math.max(maxMeasure, nodeObj.value);
+        minMeasure = Math.min(minMeasure, nodeObj.value);
       });
       return data2;
     } catch (error) {
@@ -54407,6 +54480,7 @@ const OrganizationChart = ({
       let connectorVisibility = parseInt(
         chartFormatOptions.connector.connectorLineThickness
       );
+      select$2(floatingSvgRef.current).selectAll("*").remove();
       let organizationalChart = new OrgChart();
       organizationalChart.container(`#floating-${chartId}`).svgWidth(scrollWidth).svgHeight(scrollHeight).nodeHeight((d) => calculateNodeHeight(d)).nodeWidth((d) => calculateNodeWidth(d, true)).layout(chartDirection).diagonal((s2, t, m, offsets = { sy: 0 }) => {
         if (chartDirection == "top" || chartDirection == "bottom" || !chartDirection) {
@@ -54580,7 +54654,7 @@ const OrganizationChart = ({
                   justify-content: center;
                   align-items: center;
                   text-align: center;
-                  background-color: ${d.data.styleObject.color ? d.data.styleObject.color : d.data.styleObject.backgroundColor};
+                  background-color: ${chartFormatOptions.heatMap.showHeatMap ? heatMapScale(d.data.value) : chartFormatOptions.nodes.nodesSingleColor ? chartFormatOptions.nodes.nodesColor : d.data.styleObject.color};
                   z-index: 99;
                   transform: ${transform};
                   transition: unset;">
@@ -55316,6 +55390,15 @@ const ScatterChart = ({
     ));
     initSvg(svgRef, width, height, chartFormatOptions);
     chartAreaTagG = initChartArea(svg, margins);
+    initPlotArea(
+      chartAreaTagG,
+      formatOptions,
+      0,
+      innerWidth2,
+      innerHeight2,
+      "Scatter",
+      chartId
+    );
     drawChartTitle(svgRef, chartTitleHeight, width, chartFormatOptions);
     initScale();
     drawXAxis();
@@ -55462,11 +55545,8 @@ const ScatterChart = ({
   };
   const initScale = () => {
     try {
-      let xStartValue = chartFormatOptions.xAxisLabel.xAxisIntervalsVisibility && chartFormatOptions.xAxisLabel.xAxisMinText !== "" ? parseFloat(chartFormatOptions.xAxisLabel.xAxisMinText) : minDimension > 0 ? 0 : minDimension * 1.1;
-      let xEndValue = chartFormatOptions.xAxisLabel.xAxisIntervalsVisibility && chartFormatOptions.xAxisLabel.xAxisMaxText !== "" ? parseFloat(chartFormatOptions.xAxisLabel.xAxisMaxText) : maxDimension * 1.1;
       let yStartValue = chartFormatOptions.yAxisLabel.yAxisIntervalsVisibility && chartFormatOptions.yAxisLabel.yAxisMinText !== "" ? parseFloat(chartFormatOptions.yAxisLabel.yAxisMinText) : minMeasure > 0 ? 0 : minMeasure * 1.1;
       let yEndValue = chartFormatOptions.yAxisLabel.yAxisIntervalsVisibility && chartFormatOptions.yAxisLabel.yAxisMaxText !== "" ? parseFloat(chartFormatOptions.yAxisLabel.yAxisMaxText) : maxMeasure * 1.1;
-      xScale = linear$1().domain([xStartValue, xEndValue]).range([0, innerWidth2]);
       yScale = linear$1().domain([yStartValue, yEndValue]).range([innerHeight2, 0]);
       sizeScale = linear$1().domain([sizeValueMin, sizeValueMax]).range([1, 10]);
     } catch (e) {
@@ -55475,6 +55555,8 @@ const ScatterChart = ({
   };
   const drawXAxis = () => {
     try {
+      const tickHeightPercentage = parseFloat(formatOptions.plotArea.ticksHeight) || 100;
+      const tickSize = tickHeightPercentage / 100 * innerHeight2;
       let { xAxisLabelArray, customTickValue } = responsiveXaxisLabelForNumericValue(
         maxDimension,
         minDimension,
@@ -55485,6 +55567,11 @@ const ScatterChart = ({
         innerHeight2,
         false
       );
+      if (xAxisLabelArray.length > 0) {
+        xScale = linear$1().domain([xAxisLabelArray[0], xAxisLabelArray[xAxisLabelArray.length - 1]]).range([0, innerWidth2]);
+      } else {
+        xScale = linear$1().domain([customXaxisMinValue, customXaxisMaxValue]).range([0, innerWidth2]);
+      }
       const xAxis = axisBottom(xScale).tickFormat(
         getNumberWithFormatFunction(
           formatOptions.xAxisLabel.xAxisDisplayUnits,
@@ -55492,7 +55579,7 @@ const ScatterChart = ({
           formatOptions.xAxisLabel.xAxisLabelDecimalPrecision ?? "2"
         )
       ).tickSize(
-        chartFormatOptions.plotArea.gridLinesVisibility ? chartFormatOptions.plotArea.gridLinesVertical ? chartFormatOptions.xAxisLabel.xAxisPosition === "0" ? -innerHeight2 : chartFormatOptions.xAxisLabel.xAxisPosition === "1" ? innerHeight2 : 0 : 0 : 0
+        chartFormatOptions.plotArea.gridLinesVisibility ? chartFormatOptions.plotArea.gridLinesVertical ? chartFormatOptions.xAxisLabel.xAxisPosition === "0" ? -tickSize : chartFormatOptions.xAxisLabel.xAxisPosition === "1" ? tickSize : 0 : 0 : 0
       ).tickValues(xAxisLabelArray.length > 0 ? xAxisLabelArray : null).ticks(customTickValue).tickPadding(8).tickSizeOuter(0);
       initXaxis(
         chartAreaTagG,
@@ -55511,6 +55598,8 @@ const ScatterChart = ({
   };
   const drawYAxis = () => {
     try {
+      const tickWidthPercentage = parseFloat(formatOptions.plotArea.ticksWidth) || 100;
+      const tickSize = tickWidthPercentage / 100 * innerWidth2;
       let { yAxisLabelArray, customTickValue } = responsiveYaxisLabel(
         maxMeasure,
         minMeasure,
@@ -55526,7 +55615,7 @@ const ScatterChart = ({
           formatOptions.yAxisLabel.yAxisLabelDecimalPrecision ?? "2"
         )
       ).tickSize(
-        chartFormatOptions.plotArea.gridLinesVisibility ? chartFormatOptions.plotArea.gridLinesHorizontal ? -innerWidth2 : 0 : 0
+        chartFormatOptions.plotArea.gridLinesVisibility ? chartFormatOptions.plotArea.gridLinesHorizontal ? -tickSize : 0 : 0
       ).tickValues(yAxisLabelArray.length > 0 ? yAxisLabelArray : null).ticks(customTickValue).tickPadding(8).tickSizeOuter(0);
       initYaxis(
         chartAreaTagG,
@@ -55709,10 +55798,12 @@ const ScatterChart = ({
       ).style("flex-wrap", "nowrap").style("padding-left", "3px");
       ColorList.forEach((d, i) => {
         let innerdiv = div.append("div").style("display", "inline-flex").style("justify-content", "flex-start").style("align-items", "center").style("margin", "3px 0px").style("width", "fit-content").style("flex-wrap", "nowrap").style("white-space", "nowrap").style("font-size", chartFormatOptions.legends.legendFontSize + "px").style("font-family", chartFormatOptions.legends.legendFontFamily).on("mousemove", function(d2) {
-          svg.selectAll(".parentGroup").classed("highlight", false).classed("unhighlight", true);
-          svg.selectAll(
-            '[colorId="' + getJQuerySelector2(this.textContent.replace(/ /g, "-")) + '"]'
-          ).classed("highlight", true).classed("unhighlight", false);
+          if (chartFormatOptions.legends.onHoverEffect) {
+            svg.selectAll(".parentGroup").classed("highlight", false).classed("unhighlight", true);
+            svg.selectAll(
+              '[colorId="' + getJQuerySelector2(this.textContent.replace(/ /g, "-")) + '"]'
+            ).classed("highlight", true).classed("unhighlight", false);
+          }
         }).on("mouseout", function(d2) {
           svg.selectAll(".parentGroup").classed("highlight", false).classed("unhighlight", false);
           svg.selectAll(
@@ -55795,35 +55886,24 @@ const ScatterChart = ({
       logError$2(fileName, "shapeListWithScroll", e);
     }
   };
-  const shapesForScatterPlot = (innerdiv, shapes) => {
+  const shapesForScatterPlot = (innerdiv, shape) => {
     try {
-      shapes = shapes.toLowerCase();
-      switch (shapes) {
-        case "circle":
-        case "none":
-          innerdiv.append("svg").attr("height", "10px").attr("width", "10px").append("circle").attr("cx", "5px").attr("cy", "5px").attr("r", "5px").style("fill", "black");
-          break;
-        case "square":
-          innerdiv.append("div").style("height", "10px").style("width", "10px").style("background", "black").style("border-radius", "1px");
-          break;
-        case "triangle":
-          innerdiv.append("div").style("border-left", "6px solid transparent").style("border-right", "6px solid transparent").style("border-bottom", "10px solid black");
-          break;
-        case "cross":
-          innerdiv.append("div").style("height", "4px").style("width", "10px").style("background", "black").style("border-radius", "1px").append("div").style("height", "10px").style("width", "4px").style("background", "black").style("border-radius", "1px").style("position", "relative").style("top", "-3px").style("left", "3px");
-          break;
-        case "diamond":
-          innerdiv.append("div").style("height", "10px").style("width", "10px").style("background", "black").style("border-radius", "1px").style("transform", "rotate(45deg)");
-          break;
-        case "star":
-          innerdiv.append("div").style("border-left", "6px solid transparent").style("border-right", "6px solid transparent").style("border-bottom", "10px solid black").style("position", "relative").style("top", "-2px").style("transform", "rotate(0deg)").append("div").style("border-left", "6px solid transparent").style("border-right", "6px solid transparent").style("border-top", "10px solid black").style("position", "absolute").style("top", "2px").style("left", "-5.5px").style("transform", "rotate(360deg)");
-          break;
-        case "wye":
-          innerdiv.append("div").style("height", "6.5px").style("width", "3px").style("background", "black").append("div").style("height", "5px").style("width", "3px").style("background", "black").style("transform", "rotate(-55deg)").style("position", "relative").style("top", "-2px").style("left", "-2px").append("div").style("height", "5px").style("width", "3px").style("background", "black").style("transform", "rotate(108deg)").style("position", "relative").style("top", "3px").style("left", "2px");
-          break;
-        default:
-          break;
-      }
+      const symbolMap = {
+        none: circle,
+        circle,
+        square,
+        triangle,
+        cross,
+        diamond,
+        star,
+        wye
+      };
+      const symbolType = symbolMap[shape?.toLowerCase()] || circle;
+      const size = 80;
+      innerdiv.append("svg").attr("width", 14).attr("height", 14).append("path").attr(
+        "d",
+        Symbol$1().type(symbolType).size(size)()
+      ).attr("transform", "translate(7,7)").attr("fill", "black");
     } catch (error) {
       logError$2(fileName, "shapesForScatterPlot", error);
     }

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

@@ -11264,7 +11264,7 @@
       dataLabelsCoordinates: [],
       hideInsignificantValue: false,
       sortBy: "default",
-      chartDirection: "top",
+      chartDirection: "right",
       plotAreaRangeFilter: {
         enabled: false,
         condition: "lt",
@@ -13100,7 +13100,7 @@
     let object2 = svg.append("foreignObject").attr(
       "visibility",
       formatOptions.chartTitle.chartTitleVisibility ? "visible" : "hidden"
-    ).attr("transform", `translate(2,2)`).attr("class", "chartTitle").attr("width", width).attr("height", chartTitleHeight + "px");
+    ).attr("transform", `translate(2,2)`).attr("class", "chartTitle").attr("width", width - 4).attr("height", chartTitleHeight + "px");
     const parseHTMLText = (html) => {
       const temp = document.createElement("div");
       temp.innerHTML = html;
@@ -21003,19 +21003,20 @@
       let maxLegendWidth = maxLegendDimensions[0];
       let legendMargin = width15Percent < maxLegendWidth + 10 ? width15Percent : maxLegendWidth + 10;
       let totalHeight = formatOptions.plotArea.numberOfBubbles ? 20 : 0;
-      let dimensionHeightWidth = preCalculateTextDimensions(
-        getNumberWithFormatFunction(
-          formatOptions.xAxisLabel.xAxisDisplayUnits,
-          formatOptions.xAxisLabel.xAxisNumberFormat,
-          formatOptions.xAxisLabel.xAxisLabelDecimalPrecision ?? "2"
-        )(
-          maxDimension
-        ).toString(),
-        convertStringToNumber(formatOptions.xAxisLabel.xAxisLabelFontSize),
+      const maxDim = getNumberWithFormatFunction(
+        formatOptions.xAxisLabel.xAxisDisplayUnits,
+        formatOptions.xAxisLabel.xAxisNumberFormat,
+        formatOptions.xAxisLabel.xAxisLabelDecimalPrecision ?? "2"
+      )(
+        maxDimension
+      ).toString();
+      let dimensionHeightWidth = calculateWidthHeightDynamically(
+        maxDim,
+        formatOptions.xAxisLabel.xAxisLabelFontSize,
         formatOptions.xAxisLabel.xAxisLabelFontFamily,
         formatOptions.xAxisLabel.xAxisLabelRotation
       );
-      let maxDimensionWidth = dimensionHeightWidth.width + 10;
+      let maxDimensionWidth = dimensionHeightWidth[3] + 10;
       let xTitle = formatOptions.xAxisTitle.xAxisTitleVisibility ? formatOptions.xAxisTitle.xAxisDynamicTitleText.length !== 0 ? preCalculateTextDimensions(
         formatOptions.xAxisTitle.xAxisTitleHTML,
         void 0,
@@ -54275,6 +54276,12 @@
     let chartData = [];
     let scrollWidth = 0;
     let scrollHeight = 0;
+    let legendListWidth;
+    let displayedLegends = /* @__PURE__ */ new Map();
+    let maxLegendDimensions;
+    let maxMeasure = Number.NEGATIVE_INFINITY;
+    let minMeasure = Number.POSITIVE_INFINITY;
+    let heatMapScale;
     require$$0$1.useEffect(() => {
       drawChart();
     }, [chartId, data, formatOptions]);
@@ -54283,19 +54290,64 @@
         svgRef,
         formatOptions
       ));
-      ({ margins, chartTitleHeight, innerHeight, innerWidth } = marginCalculationsForChartsWithoutLegends(
+      dataPreparation();
+      maxLegendDimensions = calculateLegendsMaxPossibleWidth2(displayedLegends);
+      ({ margins, innerHeight, innerWidth, legendListWidth, chartTitleHeight } = marginCalculationsForChartsWithoutAxis(
         chartFormatOptions,
+        width,
         height,
-        width
+        maxLegendDimensions,
+        margins
       ));
       initSvg(svgRef, width, height, chartFormatOptions);
       drawChartTitle(svgRef, chartTitleHeight, width, chartFormatOptions);
-      dataPreparation();
       scrollWidthHeightCalculation();
       drawOrganizationChart(chartData);
+      initLegendListForOrganizationChart();
+    };
+    const calculateLegendsMaxPossibleWidth2 = (displayedLegendsMap) => {
+      const legends = [];
+      displayedLegendsMap.forEach((_value, key) => {
+        legends.push(key);
+      });
+      const longestLegend = legends.reduce((a2, b) => a2.length > b.length ? a2 : b, "");
+      const legendDims = preCalculateTextDimensions(
+        longestLegend,
+        convertStringToNumber(chartFormatOptions.legends.legendFontSize),
+        chartFormatOptions.legends.legendFontFamily
+      );
+      return [legendDims.width, legendDims.height];
+    };
+    const initLegendListForOrganizationChart = () => {
+      let seriesData = [];
+      displayedLegends.forEach((colors2, label) => {
+        const color2 = `linear-gradient(90deg, ${colors2.join(", ")})`;
+        seriesData.push({
+          properties: {
+            ...legendEntries[0],
+            name: label,
+            alias: label,
+            color: color2
+          }
+        });
+      });
+      initLegendListWithTotalValueAllowance(
+        chartFormatOptions,
+        svg,
+        seriesData,
+        width,
+        height,
+        legendListWidth,
+        chartTitleHeight,
+        chartId,
+        margins,
+        staticLegendShape.rectangle,
+        void 0
+      );
     };
     const dataPreparation = () => {
       try {
+        const sortType = formatOptions?.plotArea?.sortBy ?? "default";
         chartDirection = chartFormatOptions.plotArea.chartDirection || orgChartDirection.left;
         var sum2 = 0;
         var absoluteSum = 0;
@@ -54306,9 +54358,19 @@
         let tempData = getFlattenedData(rootNode).filter(
           (data2) => data2.value !== null
         );
+        if (sortType !== "default") {
+          tempData = tempData.sort(
+            (a2, b) => sortType === "asc" ? a2.value - b.value : b.value - a2.value
+          );
+        }
         createIdIndexMap(tempData);
         generateUID(tempData);
         chartData = addStyleObjectToChartData(tempData);
+        if (chartFormatOptions.heatMap.showHeatMap) {
+          heatMapScale = sequential().domain([minMeasure, maxMeasure]).interpolator(
+            interpolateRgb$1(chartFormatOptions.heatMap.heatMapMinColor, chartFormatOptions.heatMap.heatMapMaxColor)
+          );
+        }
       } catch (error) {
         logError$2(fileName$1, "dataPreparation", error);
       }
@@ -54365,11 +54427,22 @@
           indexMapForStyleObject.set(styleObject.name, styleObject);
         });
         Object.keys(data2).forEach((key) => {
-          const legendObject = indexMapForStyleObject.get(data2[key].UID ?? data2[key].nodeLabel);
+          const nodeObj = data2[key];
+          const legendObject = indexMapForStyleObject.get(nodeObj.UID ?? nodeObj.nodeLabel) ?? legendEntries[0];
           data2[key] = {
-            ...data2[key],
-            styleObject: legendObject || legendEntries[0]
+            ...nodeObj,
+            styleObject: legendObject
           };
+          if (nodeObj.label) {
+            if (displayedLegends.has(nodeObj.label)) {
+              const colors2 = displayedLegends.get(nodeObj.label);
+              displayedLegends.set(nodeObj.label, [...colors2, legendObject.color ?? "#eedddd"]);
+            } else {
+              displayedLegends.set(nodeObj.label, [legendObject.color ?? "#eedddd"]);
+            }
+          }
+          maxMeasure = Math.max(maxMeasure, nodeObj.value);
+          minMeasure = Math.min(minMeasure, nodeObj.value);
         });
         return data2;
       } catch (error) {
@@ -54410,6 +54483,7 @@
         let connectorVisibility = parseInt(
           chartFormatOptions.connector.connectorLineThickness
         );
+        select$2(floatingSvgRef.current).selectAll("*").remove();
         let organizationalChart = new OrgChart();
         organizationalChart.container(`#floating-${chartId}`).svgWidth(scrollWidth).svgHeight(scrollHeight).nodeHeight((d) => calculateNodeHeight(d)).nodeWidth((d) => calculateNodeWidth(d, true)).layout(chartDirection).diagonal((s2, t, m, offsets = { sy: 0 }) => {
           if (chartDirection == "top" || chartDirection == "bottom" || !chartDirection) {
@@ -54583,7 +54657,7 @@
                   justify-content: center;
                   align-items: center;
                   text-align: center;
-                  background-color: ${d.data.styleObject.color ? d.data.styleObject.color : d.data.styleObject.backgroundColor};
+                  background-color: ${chartFormatOptions.heatMap.showHeatMap ? heatMapScale(d.data.value) : chartFormatOptions.nodes.nodesSingleColor ? chartFormatOptions.nodes.nodesColor : d.data.styleObject.color};
                   z-index: 99;
                   transform: ${transform};
                   transition: unset;">
@@ -55319,6 +55393,15 @@
       ));
       initSvg(svgRef, width, height, chartFormatOptions);
       chartAreaTagG = initChartArea(svg, margins);
+      initPlotArea(
+        chartAreaTagG,
+        formatOptions,
+        0,
+        innerWidth2,
+        innerHeight2,
+        "Scatter",
+        chartId
+      );
       drawChartTitle(svgRef, chartTitleHeight, width, chartFormatOptions);
       initScale();
       drawXAxis();
@@ -55465,11 +55548,8 @@
     };
     const initScale = () => {
       try {
-        let xStartValue = chartFormatOptions.xAxisLabel.xAxisIntervalsVisibility && chartFormatOptions.xAxisLabel.xAxisMinText !== "" ? parseFloat(chartFormatOptions.xAxisLabel.xAxisMinText) : minDimension > 0 ? 0 : minDimension * 1.1;
-        let xEndValue = chartFormatOptions.xAxisLabel.xAxisIntervalsVisibility && chartFormatOptions.xAxisLabel.xAxisMaxText !== "" ? parseFloat(chartFormatOptions.xAxisLabel.xAxisMaxText) : maxDimension * 1.1;
         let yStartValue = chartFormatOptions.yAxisLabel.yAxisIntervalsVisibility && chartFormatOptions.yAxisLabel.yAxisMinText !== "" ? parseFloat(chartFormatOptions.yAxisLabel.yAxisMinText) : minMeasure > 0 ? 0 : minMeasure * 1.1;
         let yEndValue = chartFormatOptions.yAxisLabel.yAxisIntervalsVisibility && chartFormatOptions.yAxisLabel.yAxisMaxText !== "" ? parseFloat(chartFormatOptions.yAxisLabel.yAxisMaxText) : maxMeasure * 1.1;
-        xScale = linear$1().domain([xStartValue, xEndValue]).range([0, innerWidth2]);
         yScale = linear$1().domain([yStartValue, yEndValue]).range([innerHeight2, 0]);
         sizeScale = linear$1().domain([sizeValueMin, sizeValueMax]).range([1, 10]);
       } catch (e) {
@@ -55478,6 +55558,8 @@
     };
     const drawXAxis = () => {
       try {
+        const tickHeightPercentage = parseFloat(formatOptions.plotArea.ticksHeight) || 100;
+        const tickSize = tickHeightPercentage / 100 * innerHeight2;
         let { xAxisLabelArray, customTickValue } = responsiveXaxisLabelForNumericValue(
           maxDimension,
           minDimension,
@@ -55488,6 +55570,11 @@
           innerHeight2,
           false
         );
+        if (xAxisLabelArray.length > 0) {
+          xScale = linear$1().domain([xAxisLabelArray[0], xAxisLabelArray[xAxisLabelArray.length - 1]]).range([0, innerWidth2]);
+        } else {
+          xScale = linear$1().domain([customXaxisMinValue, customXaxisMaxValue]).range([0, innerWidth2]);
+        }
         const xAxis = axisBottom(xScale).tickFormat(
           getNumberWithFormatFunction(
             formatOptions.xAxisLabel.xAxisDisplayUnits,
@@ -55495,7 +55582,7 @@
             formatOptions.xAxisLabel.xAxisLabelDecimalPrecision ?? "2"
           )
         ).tickSize(
-          chartFormatOptions.plotArea.gridLinesVisibility ? chartFormatOptions.plotArea.gridLinesVertical ? chartFormatOptions.xAxisLabel.xAxisPosition === "0" ? -innerHeight2 : chartFormatOptions.xAxisLabel.xAxisPosition === "1" ? innerHeight2 : 0 : 0 : 0
+          chartFormatOptions.plotArea.gridLinesVisibility ? chartFormatOptions.plotArea.gridLinesVertical ? chartFormatOptions.xAxisLabel.xAxisPosition === "0" ? -tickSize : chartFormatOptions.xAxisLabel.xAxisPosition === "1" ? tickSize : 0 : 0 : 0
         ).tickValues(xAxisLabelArray.length > 0 ? xAxisLabelArray : null).ticks(customTickValue).tickPadding(8).tickSizeOuter(0);
         initXaxis(
           chartAreaTagG,
@@ -55514,6 +55601,8 @@
     };
     const drawYAxis = () => {
       try {
+        const tickWidthPercentage = parseFloat(formatOptions.plotArea.ticksWidth) || 100;
+        const tickSize = tickWidthPercentage / 100 * innerWidth2;
         let { yAxisLabelArray, customTickValue } = responsiveYaxisLabel(
           maxMeasure,
           minMeasure,
@@ -55529,7 +55618,7 @@
             formatOptions.yAxisLabel.yAxisLabelDecimalPrecision ?? "2"
           )
         ).tickSize(
-          chartFormatOptions.plotArea.gridLinesVisibility ? chartFormatOptions.plotArea.gridLinesHorizontal ? -innerWidth2 : 0 : 0
+          chartFormatOptions.plotArea.gridLinesVisibility ? chartFormatOptions.plotArea.gridLinesHorizontal ? -tickSize : 0 : 0
         ).tickValues(yAxisLabelArray.length > 0 ? yAxisLabelArray : null).ticks(customTickValue).tickPadding(8).tickSizeOuter(0);
         initYaxis(
           chartAreaTagG,
@@ -55712,10 +55801,12 @@
         ).style("flex-wrap", "nowrap").style("padding-left", "3px");
         ColorList.forEach((d, i) => {
           let innerdiv = div.append("div").style("display", "inline-flex").style("justify-content", "flex-start").style("align-items", "center").style("margin", "3px 0px").style("width", "fit-content").style("flex-wrap", "nowrap").style("white-space", "nowrap").style("font-size", chartFormatOptions.legends.legendFontSize + "px").style("font-family", chartFormatOptions.legends.legendFontFamily).on("mousemove", function(d2) {
-            svg.selectAll(".parentGroup").classed("highlight", false).classed("unhighlight", true);
-            svg.selectAll(
-              '[colorId="' + getJQuerySelector2(this.textContent.replace(/ /g, "-")) + '"]'
-            ).classed("highlight", true).classed("unhighlight", false);
+            if (chartFormatOptions.legends.onHoverEffect) {
+              svg.selectAll(".parentGroup").classed("highlight", false).classed("unhighlight", true);
+              svg.selectAll(
+                '[colorId="' + getJQuerySelector2(this.textContent.replace(/ /g, "-")) + '"]'
+              ).classed("highlight", true).classed("unhighlight", false);
+            }
           }).on("mouseout", function(d2) {
             svg.selectAll(".parentGroup").classed("highlight", false).classed("unhighlight", false);
             svg.selectAll(
@@ -55798,35 +55889,24 @@
         logError$2(fileName, "shapeListWithScroll", e);
       }
     };
-    const shapesForScatterPlot = (innerdiv, shapes) => {
+    const shapesForScatterPlot = (innerdiv, shape) => {
       try {
-        shapes = shapes.toLowerCase();
-        switch (shapes) {
-          case "circle":
-          case "none":
-            innerdiv.append("svg").attr("height", "10px").attr("width", "10px").append("circle").attr("cx", "5px").attr("cy", "5px").attr("r", "5px").style("fill", "black");
-            break;
-          case "square":
-            innerdiv.append("div").style("height", "10px").style("width", "10px").style("background", "black").style("border-radius", "1px");
-            break;
-          case "triangle":
-            innerdiv.append("div").style("border-left", "6px solid transparent").style("border-right", "6px solid transparent").style("border-bottom", "10px solid black");
-            break;
-          case "cross":
-            innerdiv.append("div").style("height", "4px").style("width", "10px").style("background", "black").style("border-radius", "1px").append("div").style("height", "10px").style("width", "4px").style("background", "black").style("border-radius", "1px").style("position", "relative").style("top", "-3px").style("left", "3px");
-            break;
-          case "diamond":
-            innerdiv.append("div").style("height", "10px").style("width", "10px").style("background", "black").style("border-radius", "1px").style("transform", "rotate(45deg)");
-            break;
-          case "star":
-            innerdiv.append("div").style("border-left", "6px solid transparent").style("border-right", "6px solid transparent").style("border-bottom", "10px solid black").style("position", "relative").style("top", "-2px").style("transform", "rotate(0deg)").append("div").style("border-left", "6px solid transparent").style("border-right", "6px solid transparent").style("border-top", "10px solid black").style("position", "absolute").style("top", "2px").style("left", "-5.5px").style("transform", "rotate(360deg)");
-            break;
-          case "wye":
-            innerdiv.append("div").style("height", "6.5px").style("width", "3px").style("background", "black").append("div").style("height", "5px").style("width", "3px").style("background", "black").style("transform", "rotate(-55deg)").style("position", "relative").style("top", "-2px").style("left", "-2px").append("div").style("height", "5px").style("width", "3px").style("background", "black").style("transform", "rotate(108deg)").style("position", "relative").style("top", "3px").style("left", "2px");
-            break;
-          default:
-            break;
-        }
+        const symbolMap = {
+          none: circle,
+          circle,
+          square,
+          triangle,
+          cross,
+          diamond,
+          star,
+          wye
+        };
+        const symbolType = symbolMap[shape?.toLowerCase()] || circle;
+        const size = 80;
+        innerdiv.append("svg").attr("width", 14).attr("height", 14).append("path").attr(
+          "d",
+          Symbol$1().type(symbolType).size(size)()
+        ).attr("transform", "translate(7,7)").attr("fill", "black");
       } catch (error) {
         logError$2(fileName, "shapesForScatterPlot", error);
       }

package/package.json

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