pace-chart-lib 1.0.60 → 1.0.62

package/dist/index.d.ts

@@ -0,0 +1,37 @@
+import "./Components/Charts/Core/ChartStyles.scss";
+export { default as ColumnChart } from "./Components/Charts/ChartsWithAxis/ColumnFamily/ColumnChart";
+export { default as CustomColumnChart } from "./Components/Charts/ChartsWithAxis/ColumnFamily/CustomColumnChart";
+export { default as LayeredColumnChart } from "./Components/Charts/ChartsWithAxis/ColumnFamily/LayeredColumnChart";
+export { default as StackColumnChart } from "./Components/Charts/ChartsWithAxis/ColumnFamily/StackColumnChart";
+export { default as NormalizedStackColumnChart } from "./Components/Charts/ChartsWithAxis/ColumnFamily/NormalizedStackColumnChart";
+export { default as ColumnHistogramChart } from "./Components/Charts/ChartsWithAxis/ColumnFamily/ColumnHistogramChart";
+export { default as LineChart } from "./Components/Charts/ChartsWithAxis/LineFamily/LineChart";
+export { default as StackLineChart } from "./Components/Charts/ChartsWithAxis/LineFamily/StackLineChart";
+export { default as NormalizedStackLineChart } from "./Components/Charts/ChartsWithAxis/LineFamily/NormalizedStackLineChart";
+export { default as HorizontalBarChart } from "./Components/Charts/ChartsWithAxis/HorizontalBarFamily/HorizontalBarChart";
+export { default as StackHorizontalBarChart } from "./Components/Charts/ChartsWithAxis/HorizontalBarFamily/StackHorizontalBarChart";
+export { default as NormalizedStackHorizontalBarChart } from "./Components/Charts/ChartsWithAxis/HorizontalBarFamily/NormalizedStackHorizontalBarChart";
+export { default as LayeredHorizontalBarChart } from "./Components/Charts/ChartsWithAxis/HorizontalBarFamily/LayeredHorizontalBarChart";
+export { default as HorizontalHistogramChart } from "./Components/Charts/ChartsWithAxis/HorizontalBarFamily/HorizontalHistogramChart";
+export { default as AreaChart } from "./Components/Charts/ChartsWithAxis/AreaFamily/AreaChart";
+export { default as StackAreaChart } from "./Components/Charts/ChartsWithAxis/AreaFamily/StackAreaChart";
+export { default as NormalizedStackAreaChart } from "./Components/Charts/ChartsWithAxis/AreaFamily/NormalizedStackAreaChart";
+export { default as PieChart } from "./Components/Charts/ChartsWithoutAxis/PieFamily/PieChart";
+export { default as DonutChart } from "./Components/Charts/ChartsWithoutAxis/PieFamily/DonutChart";
+export { default as Treemap } from "./Components/Charts/ChartsWithoutAxis/PieFamily/TreemapChart";
+export { default as PieofPie } from "./Components/Charts/ChartsWithoutAxis/PieFamily/PieofPieChart";
+export { default as PyramidChart } from "./Components/Charts/ChartsWithoutAxis/OtherCharts/PyramidChart";
+export { default as ProgressChart } from "./Components/Charts/ChartsWithoutAxis/OtherCharts/ProgressChart";
+export { default as Speedometer } from "./Components/Charts/ChartsWithoutAxis/OtherCharts/Speedometer";
+export { default as RadialBarChart } from "./Components/Charts/ChartsWithoutAxis/OtherCharts/RadialBarChart";
+export { default as WordCloud } from "./Components/Charts/ChartsWithoutAxis/OtherCharts/WordCloud";
+export { default as VennChart } from "./Components/Charts/ChartsWithoutAxis/OtherCharts/VennChart";
+export { default as SankeyChart } from "./Components/Charts/ChartsWithoutAxis/OtherCharts/SankeyChart";
+export { default as Maps } from "./Components/Charts/ChartsWithoutAxis/Maps/Maps";
+export { default as OrganizationChart } from "./Components/Charts/ChartsWithoutAxis/OtherCharts/OrganizationChart";
+export { default as BubbleChart } from "./Components/Charts/ChartsWithoutAxis/OtherCharts/BubbleChart";
+export { default as ScatterChart } from "./Components/Charts/ChartsWithoutAxis/OtherCharts/ScatterChart";
+export { default as WaterfallChart } from "./Components/Charts/ChartsWithAxis/MiscellaneousChartFamily/WaterfallChart";
+export { default as TornadoChart } from "./Components/Charts/ChartsWithAxis/MiscellaneousChartFamily/TornadoChart";
+export { default as DotPlot } from "./Components/Charts/ChartsWithAxis/MiscellaneousChartFamily/DotPlot";
+export { CJSColumnChart, CJSStackColumnChart, CJSHorizontalBarChart, CJSStackHorizontalBarChart, CJSLineChart, CJSStackLineChart, CJSAreaChart, CJSStackAreaChart, CJSPieChart, CJSDonutChart, CJSScatterChart, CJSBubbleChart, CJSRadarChart, CJSPolarAreaChart, CJSNormalizedStackColumnChart, CJSNormalizedStackHorizontalBarChart, CJSNormalizedStackLineChart, CJSNormalizedStackAreaChart, ChartJSWrapper, transformToChartJSData, transformToNormalizedChartJSData, mapFormatOptionsToChartJS, hexToRgba, CJS_DEFAULT_COLORS, } from "./Components/Charts/ChartJS/index";

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

@@ -11261,7 +11261,13 @@ const defaultChartFormatOptions = {
     dataLabelsCoordinates: [],
     hideInsignificantValue: false,
     sortBy: "default",
-    chartDirection: "top"
+    chartDirection: "top",
+    plotAreaRangeFilter: {
+      enabled: false,
+      condition: "lt",
+      minVal: 0,
+      maxVal: 100
+    }
   },
   heatMap: {
     showHeatMap: false,
@@ -13147,9 +13153,9 @@ function applyAnnotationRangeFilter(annotationsList, formatOptions, getMeasure)
     const measure = getMeasure(item);
     switch (condition) {
       case "lt":
-        return measure < maxVal;
+        return measure <= maxVal;
       case "gt":
-        return measure > minVal;
+        return measure >= minVal;
       case "in":
         return measure >= minVal && measure <= maxVal;
       case "not-in":
@@ -20935,6 +20941,25 @@ const NormalizedStackColumnChart = ({
   ) });
 };
 const fileName$a = "ChartsWithoutAxisFunctions.ts";
+function applyPlotAreaRangeFilter(labelsList, formatOptions, getMeasure) {
+  if (!formatOptions?.plotArea?.plotAreaRangeFilter?.enabled) return labelsList;
+  const { condition, minVal, maxVal } = formatOptions.plotArea.plotAreaRangeFilter;
+  return labelsList.filter((item) => {
+    const measure = getMeasure(item);
+    switch (condition) {
+      case "lt":
+        return measure <= maxVal;
+      case "gt":
+        return measure >= minVal;
+      case "in":
+        return measure >= minVal && measure <= maxVal;
+      case "not-in":
+        return measure < minVal || measure > maxVal;
+      default:
+        return true;
+    }
+  });
+}
 function marginCalculationForBubbleScatter(width, height, maxMeasure, formatOptions, maxDimension, maxLegendDimensions) {
   try {
     formatOptions.xAxisLabel.xAxisDateFormat = formatOptions.xAxisLabel.xAxisDateFormat == "DD-MM-YYYY" ? "," : formatOptions.xAxisLabel.xAxisDateFormat;
@@ -28905,8 +28930,10 @@ const PieChart = ({ data, formatOptions, chartId, isReportEditable, onDataLabelC
       if (chartFormatOptions.plotArea.dataLabels) {
         const isSingleDataLabel = pieChartData && pieChartData.length === 1;
         chartAreaTagG.append("g").attr("class", "parentGroup").attr("transform", `${getPiePosition()}`).attr("pointer-events", "none").attr("text-anchor", "middle").selectAll("text").data(
-          pieChartData.filter(
-            (d) => d.data.properties.dataLabelPosition == "1"
+          applyAnnotationRangeFilter(
+            pieChartData.filter((d) => d.data.properties.dataLabelPosition == "1"),
+            chartFormatOptions,
+            (d) => d.data.data[0].value
           )
         ).enter().append("text").attr(
           "hoverId",
@@ -28942,8 +28969,10 @@ const PieChart = ({ data, formatOptions, chartId, isReportEditable, onDataLabelC
           return "";
         });
         chartAreaTagG.append("g").attr("class", "parentGroup").attr("transform", `${getPiePosition()}`).attr("pointer-events", "none").attr("text-anchor", "middle").selectAll("text").data(
-          pieChartData.filter(
-            (d) => d.data.properties.dataLabelPosition == "1"
+          applyAnnotationRangeFilter(
+            pieChartData.filter((d) => d.data.properties.dataLabelPosition == "1"),
+            chartFormatOptions,
+            (d) => d.data.data[0].value
           )
         ).enter().append("text").attr(
           "hoverId",
@@ -29010,8 +29039,10 @@ const PieChart = ({ data, formatOptions, chartId, isReportEditable, onDataLabelC
         let outerRadius = arc$1().startAngle((d) => d.x0).endAngle((d) => d.x1).innerRadius((d) => d.depth > 1 ? d.y1 - 1 + radius / 7 : 0).outerRadius((d) => d.depth > 1 ? d.y1 - 1 + radius / 7 : 0);
         let innerRadius = arc$1().startAngle((d) => d.x0).endAngle((d) => d.x1).innerRadius((d) => d.depth > 2 ? d.y0 : 0).outerRadius((d) => d.y1 + radius / 1.5);
         chartAreaTagG.selectAll("polyline").data(
-          pieChartData.filter(
-            (d) => d.data.properties.dataLabelPosition == "2"
+          applyAnnotationRangeFilter(
+            pieChartData.filter((d) => d.data.properties.dataLabelPosition == "2"),
+            chartFormatOptions,
+            (d) => d.data.data[0].value
           )
         ).join("polyline").attr("transform", getPiePosition()).style(
           "stroke",
@@ -29032,8 +29063,10 @@ const PieChart = ({ data, formatOptions, chartId, isReportEditable, onDataLabelC
           return [posA, posB, [xC, yC]].map((point2) => point2.join(",")).join(" ");
         });
         chartAreaTagG.append("g").attr("transform", getPiePosition()).selectAll("foreignObject").data(
-          pieChartData.filter(
-            (d) => d.data.properties.dataLabelPosition == "2"
+          applyAnnotationRangeFilter(
+            pieChartData.filter((d) => d.data.properties.dataLabelPosition == "2"),
+            chartFormatOptions,
+            (d) => d.data.data[0].value
           )
         ).join("foreignObject").attr("width", 80).attr("height", 60).attr("x", (d) => {
           let midangle = d.x0 + (d.x1 - d.x0) / 2;
@@ -29340,8 +29373,10 @@ const DonutChart = ({
       if (chartFormatOptions.plotArea.dataLabels) {
         const isSingleDataLabel = pieChartData && pieChartData.length === 1;
         chartAreaTagG.append("g").attr("class", "parentGroup").attr("transform", `${getPiePosition()}`).attr("pointer-events", "none").attr("text-anchor", "middle").selectAll("text").data(
-          pieChartData.filter(
-            (d) => d.data.properties.dataLabelPosition == "1"
+          applyAnnotationRangeFilter(
+            pieChartData.filter((d) => d.data.properties.dataLabelPosition == "1"),
+            chartFormatOptions,
+            (d) => d.data.data[0].value
           )
         ).enter().append("text").attr(
           "hoverId",
@@ -29377,8 +29412,10 @@ const DonutChart = ({
           return "";
         });
         chartAreaTagG.append("g").attr("class", "parentGroup").attr("transform", `${getPiePosition()}`).attr("pointer-events", "none").attr("text-anchor", "middle").selectAll("text").data(
-          pieChartData.filter(
-            (d) => d.data.properties.dataLabelPosition == "1"
+          applyAnnotationRangeFilter(
+            pieChartData.filter((d) => d.data.properties.dataLabelPosition == "1"),
+            chartFormatOptions,
+            (d) => d.data.data[0].value
           )
         ).enter().append("text").attr(
           "hoverId",
@@ -29451,8 +29488,10 @@ const DonutChart = ({
         let outerRadius = arc$1().startAngle((d) => d.x0).endAngle((d) => d.x1).innerRadius((d) => d.depth > 1 ? d.y1 - 1 + radius / 7 : 0).outerRadius((d) => d.depth > 1 ? d.y1 - 1 + radius / 7 : 0);
         let innerRadius2 = arc$1().startAngle((d) => d.x0).endAngle((d) => d.x1).innerRadius((d) => d.depth > 2 ? d.y0 : 0).outerRadius((d) => d.y1 + radius / 1.5);
         chartAreaTagG.selectAll("polyline").data(
-          pieChartData.filter(
-            (d) => d.data.properties.dataLabelPosition == "2"
+          applyAnnotationRangeFilter(
+            pieChartData.filter((d) => d.data.properties.dataLabelPosition == "2"),
+            chartFormatOptions,
+            (d) => d.data.data[0].value
           )
         ).join("polyline").attr("transform", getPiePosition()).style(
           "stroke",
@@ -29473,8 +29512,10 @@ const DonutChart = ({
           return [posA, posB, [xC, yC]].map((point2) => point2.join(",")).join(" ");
         });
         chartAreaTagG.append("g").attr("transform", getPiePosition()).selectAll("foreignObject").data(
-          pieChartData.filter(
-            (d) => d.data.properties.dataLabelPosition == "2"
+          applyAnnotationRangeFilter(
+            pieChartData.filter((d) => d.data.properties.dataLabelPosition == "2"),
+            chartFormatOptions,
+            (d) => d.data.data[0].value
           )
         ).join("foreignObject").attr("width", 80).attr("height", 60).attr("x", (d) => {
           let midangle = d.x0 + (d.x1 - d.x0) / 2;
@@ -29773,7 +29814,23 @@ const Treemap = ({ data, formatOptions, chartId }) => {
       }
       leaf.append("clipPath").attr("id", (d, i) => `clip-${i}-${chartId}`).append("rect").attr("width", (d) => d.x1 - d.x0).attr("height", (d) => d.y1 - d.y0);
       if (chartFormatOptions.plotArea.dataLabels) {
-        leaf.append("text").style("fill", (d) => d.data.properties.labelFontColor).style("font-family", (d) => d.data.properties.fontFamily).style("font-size", (d) => d.data.properties.fontSize).style(
+        const rf = chartFormatOptions.annotation.annotationRangeFilter;
+        leaf.filter((d) => {
+          if (!rf?.enabled) return true;
+          const val = d.data.data[0].value;
+          switch (rf.condition) {
+            case "lt":
+              return val < rf.maxVal;
+            case "gt":
+              return val > rf.minVal;
+            case "in":
+              return val >= rf.minVal && val <= rf.maxVal;
+            case "not-in":
+              return val < rf.minVal || val > rf.maxVal;
+            default:
+              return true;
+          }
+        }).append("text").style("fill", (d) => d.data.properties.labelFontColor).style("font-family", (d) => d.data.properties.fontFamily).style("font-size", (d) => d.data.properties.fontSize).style(
           "font-style",
           (d) => d.data.properties.fontStyle.includes(fontStyleOptions.italic) ? fontStyleOptions.italic : ""
         ).style(
@@ -30082,7 +30139,7 @@ const PieofPie = ({
   const drawParentPieDataLabels = () => {
     try {
       if (chartFormatOptions.plotArea.dataLabels) {
-        chartAreaTagG.append("g").attr("class", "parentLabels parentGroup").attr("transform", `${getParentPiePosition()}`).attr("pointer-events", "none").attr("text-anchor", "middle").selectAll("text").data(pieOfPieData).enter().append("text").attr("hoverId", (d) => d.data.legend.replace(/ /g, "-")).attr("font-size", (d) => d.data.properties?.labelFontSize ?? 11).attr(
+        chartAreaTagG.append("g").attr("class", "parentLabels parentGroup").attr("transform", `${getParentPiePosition()}`).attr("pointer-events", "none").attr("text-anchor", "middle").selectAll("text").data(applyAnnotationRangeFilter(pieOfPieData, chartFormatOptions, (d) => d.data.data[0].value)).enter().append("text").attr("hoverId", (d) => d.data.legend.replace(/ /g, "-")).attr("font-size", (d) => d.data.properties?.labelFontSize ?? 11).attr(
           "fill",
           (d) => d.data.properties?.labelFontColor ?? commonColors.black
         ).attr(
@@ -30106,7 +30163,7 @@ const PieofPie = ({
           }
           return "";
         });
-        chartAreaTagG.append("g").attr("class", "parentLabels parentGroup").attr("transform", `${getParentPiePosition()}`).attr("pointer-events", "none").attr("text-anchor", "middle").selectAll("text").data(pieOfPieData).enter().append("text").attr("hoverId", (d) => d.data.legend.replace(/ /g, "-")).attr("font-size", (d) => d.data.properties?.valueFontSize ?? 11).attr(
+        chartAreaTagG.append("g").attr("class", "parentLabels parentGroup").attr("transform", `${getParentPiePosition()}`).attr("pointer-events", "none").attr("text-anchor", "middle").selectAll("text").data(applyAnnotationRangeFilter(pieOfPieData, chartFormatOptions, (d) => d.data.data[0].value)).enter().append("text").attr("hoverId", (d) => d.data.legend.replace(/ /g, "-")).attr("font-size", (d) => d.data.properties?.valueFontSize ?? 11).attr(
           "fill",
           (d) => d.data.properties?.valueFontColor ?? commonColors.black
         ).attr(
@@ -30152,7 +30209,7 @@ const PieofPie = ({
   const drawChildPieDataLabels = (childData) => {
     try {
       if (chartFormatOptions.plotArea.dataLabels) {
-        chartAreaTagG.append("g").attr("class", "childLabels parentGroup").attr("transform", `${getChildPiePosition()}`).attr("pointer-events", "none").attr("text-anchor", "middle").selectAll("text").data(childData).enter().append("text").attr("hoverId", (d) => d.data.legend.replace(/ /g, "-")).attr("font-size", (d) => d.data.properties?.labelFontSize ?? 11).attr(
+        chartAreaTagG.append("g").attr("class", "childLabels parentGroup").attr("transform", `${getChildPiePosition()}`).attr("pointer-events", "none").attr("text-anchor", "middle").selectAll("text").data(applyAnnotationRangeFilter(childData, chartFormatOptions, (d) => d.data.data[0].value)).enter().append("text").attr("hoverId", (d) => d.data.legend.replace(/ /g, "-")).attr("font-size", (d) => d.data.properties?.labelFontSize ?? 11).attr(
           "fill",
           (d) => d.data.properties?.labelFontColor ?? commonColors.black
         ).attr(
@@ -30176,7 +30233,7 @@ const PieofPie = ({
           }
           return "";
         });
-        chartAreaTagG.append("g").attr("class", "childLabels parentGroup").attr("transform", `${getChildPiePosition()}`).attr("pointer-events", "none").attr("text-anchor", "middle").selectAll("text").data(childData).enter().append("text").attr("hoverId", (d) => d.data.legend.replace(/ /g, "-")).attr("font-size", (d) => d.data.properties?.valueFontSize ?? 11).attr(
+        chartAreaTagG.append("g").attr("class", "childLabels parentGroup").attr("transform", `${getChildPiePosition()}`).attr("pointer-events", "none").attr("text-anchor", "middle").selectAll("text").data(applyAnnotationRangeFilter(childData, chartFormatOptions, (d) => d.data.data[0].value)).enter().append("text").attr("hoverId", (d) => d.data.legend.replace(/ /g, "-")).attr("font-size", (d) => d.data.properties?.valueFontSize ?? 11).attr(
           "fill",
           (d) => d.data.properties?.valueFontColor ?? commonColors.black
         ).attr(
@@ -30425,7 +30482,11 @@ const PyramidChart = ({
       if (chartFormatOptions.annotation.annotationVisibility) {
         let makeAnnotations = annotation();
         let ConnectorType = chartFormatOptions.annotation.connectorType ? chartFormatOptions.annotation.connectorType.toLowerCase() : "None";
-        let finalAnnotationList = annotationsList;
+        let finalAnnotationList = applyAnnotationRangeFilter(
+          annotationsList,
+          chartFormatOptions,
+          (item) => item.data.measure
+        );
         const connectorStyleKey = chartFormatOptions.annotation.connectorStyle?.toLowerCase();
         makeAnnotations.editMode(chartFormatOptions.annotation.annotationDraggable).accessors({
           x: function() {
@@ -30847,7 +30908,15 @@ const ProgressChart = ({
       });
       chartAreaTagG.append("text").attr("transform", getTransformString()).attr("dy", "0.35em").attr("text-anchor", "middle").attr(
         "visibility",
-        chartFormatOptions.plotArea.dataLabels ? "visible" : "hidden"
+        () => {
+          if (!chartFormatOptions.plotArea.dataLabels) return "hidden";
+          const passed = applyPlotAreaRangeFilter(
+            [{ value: progressValue }],
+            chartFormatOptions,
+            (d) => d?.value ?? 0
+          );
+          return passed.length > 0 ? "visible" : "hidden";
+        }
       ).attr(
         "fill",
         chartFormatOptions.plotArea.dataLabelValueColor !== commonColors.white ? chartFormatOptions.plotArea.dataLabelValueColor : chartFormatOptions.toolTip.toolTipDisplayUnits
@@ -31651,7 +31720,11 @@ const RadialBarChart = ({
         arcs.attr("d", (d, i) => animArc({ ...d, endAngle: scale2(Math.abs(d.data[0].value)) }, i));
       }
       if (chartFormatOptions.plotArea.dataLabels) {
-        const labelsData = getModifiedDataForLabels(ChartData);
+        const labelsData = applyPlotAreaRangeFilter(
+          getModifiedDataForLabels(ChartData),
+          chartFormatOptions,
+          (d) => d?.data?.[0]?.value ?? 0
+        );
         svg2.selectAll(".arc-label-" + chartId).data(labelsData).enter().append("text").attr("class", "arc-label-" + chartId).attr("class", "parentGroup").attr("text-anchor", "start").attr("dy", (d, i) => (getOuterRadius(d.index ?? i) - getInnerRadius(d.index ?? i)) / 1.75).append("textPath").attr("xlink:href", (d, i) => `#arc-path-${d.index ?? i}-` + chartId).style("startOffset", "50%").attr("hoverId", (d) => d.legend.replaceAll(" ", "-")).text(
           (d) => `  ${d.properties.alias} 
            ${chartFormatOptions.plotArea.dataLabelValue ? getNumberWithFormatFunction(
@@ -54106,9 +54179,10 @@ const fileName$1 = "OrganizationChart.tsx";
 const OrganizationChart = ({
   data,
   formatOptions,
-  legendEntries,
+  // legendEntries,
   legendSequence
 }) => {
+  let legendEntries = data.LegendList ?? [];
   const chartId = crypto.randomUUID();
   const svgRef = useRef();
   const floatingSvgRef = useRef();
@@ -54148,20 +54222,11 @@ const OrganizationChart = ({
       chartDirection = chartFormatOptions.plotArea.chartDirection || orgChartDirection.left;
       var sum2 = 0;
       var absoluteSum = 0;
-      data.forEach((item) => {
-        sum2 = sum2 + item.value;
-        absoluteSum = absoluteSum + item.absoluteValue;
-      });
-      var newObj = {
-        id: 0,
-        children: data,
-        value: sum2,
-        // Total value of all children
-        absoluteValue: absoluteSum,
-        nodeLabel: "",
-        UID: ""
+      const rootNode = {
+        ...data.ChartData,
+        UID: void 0
       };
-      let tempData = getFlattenedData(newObj).filter(
+      let tempData = getFlattenedData(rootNode).filter(
         (data2) => data2.value !== null
       );
       createIdIndexMap(tempData);
@@ -54210,8 +54275,7 @@ const OrganizationChart = ({
       data2.forEach((nodeObject, i) => {
         if (nodeObject.id != 0) {
           let parentUID = data2[idIndexMap.get(nodeObject.parentId)].UID;
-          parentUID === "" ? nodeObject.UID = nodeObject.nodeLabel : nodeObject.UID = parentUID + "-" + nodeObject.nodeLabel;
-          indexMapForStyleObject.set(nodeObject.UID, i);
+          parentUID === void 0 ? nodeObject.UID = nodeObject.nodeLabel : nodeObject.UID = parentUID + "-" + nodeObject.nodeLabel;
         }
       });
     } catch (error) {
@@ -54220,12 +54284,15 @@ const OrganizationChart = ({
   };
   const addStyleObjectToChartData = (data2) => {
     try {
-      data2[0] = { ...data2[0], styleObject: legendEntries[0] };
       legendEntries.forEach((styleObject) => {
-        if (styleObject === legendEntries[0]) return;
-        let dataIndex = indexMapForStyleObject.get(styleObject.name);
-        let obj = data2[dataIndex];
-        data2[dataIndex] = { ...obj, styleObject };
+        indexMapForStyleObject.set(styleObject.name, styleObject);
+      });
+      Object.keys(data2).forEach((key) => {
+        const legendObject = indexMapForStyleObject.get(data2[key].UID ?? data2[key].nodeLabel);
+        data2[key] = {
+          ...data2[key],
+          styleObject: legendObject || legendEntries[0]
+        };
       });
       return data2;
     } catch (error) {
@@ -54439,7 +54506,7 @@ const OrganizationChart = ({
                   justify-content: center;
                   align-items: center;
                   text-align: center;
-                  background-color: ${d.data.styleObject.backgroundColor ? d.data.styleObject.backgroundColor : d.data.styleObject.Color};
+                  background-color: ${d.data.styleObject.color ? d.data.styleObject.color : d.data.styleObject.backgroundColor};
                   z-index: 99;
                   transform: ${transform};
                   transition: unset;">
@@ -55074,10 +55141,11 @@ const fileName = "ScatterChart.tsx";
 const ScatterChart = ({
   data,
   formatOptions,
-  chartId,
-  shapesList,
-  colorsList
+  chartId
 }) => {
+  const colorsList = data.ColorElements ?? [];
+  const shapesList = data.ShapeElements ?? [];
+  let modifiedData = [];
   const svgRef = useRef();
   let chartFormatOptions;
   let maxLegendDimensions = [0, 0];
@@ -55089,12 +55157,12 @@ const ScatterChart = ({
   let innerWidth2;
   let chartAreaTagG;
   let svg;
-  let measuresList = [];
-  let dimensionsList = [];
-  let minDimension;
-  let maxDimension;
-  let minMeasure;
-  let maxMeasure;
+  let minDimension = Number.POSITIVE_INFINITY;
+  let maxDimension = Number.NEGATIVE_INFINITY;
+  let minMeasure = Number.POSITIVE_INFINITY;
+  let maxMeasure = Number.NEGATIVE_INFINITY;
+  let sizeValueMin = Number.POSITIVE_INFINITY;
+  let sizeValueMax = Number.NEGATIVE_INFINITY;
   let yLabel;
   let xLabel;
   let yTitle;
@@ -55110,6 +55178,7 @@ const ScatterChart = ({
   let customYaxisMinValue;
   let xScale;
   let yScale;
+  let sizeScale;
   let colorsMap = /* @__PURE__ */ new Map();
   let shapesMap = /* @__PURE__ */ new Map();
   useEffect(() => {
@@ -55211,7 +55280,7 @@ const ScatterChart = ({
       innerHeight2,
       xTitle,
       xLabel,
-      data.length
+      modifiedData.length
     );
   };
   const initCircles = () => {
@@ -55221,17 +55290,11 @@ const ScatterChart = ({
       };
       const circles = chartAreaTagG.append("g").attr("class", "circles").attr("class", "parentGroup");
       const shouldAnimate = chartFormatOptions.animation.animationEnabled;
-      const scatterPaths = circles.append("g").selectAll(".bubbleScatter").data(data).enter().append("g").attr("fill", (d) => d.selectedColor).attr(
-        "colorId",
-        (d) => d.legendName.includes("-") ? d.legendName.split("-")[0].replace(/ /g, "-") : d.legendName.replace(/ /g, "-")
-      ).attr(
-        "shapeId",
-        (d) => d.legendName.includes("-") ? d.legendName.split("-")[1].replace(/ /g, "-") : d.legendName.replace(/ /g, "-")
-      ).append("path").attr("class", "path").attr("id", function(d, i) {
+      const scatterPaths = circles.append("g").selectAll(".bubbleScatter").data(modifiedData).enter().append("g").attr("fill", (d) => d.color).attr("colorId", (d) => d.colorName.replace(/ /g, "-")).attr("shapeId", (d) => d.shapeName?.replace(/ /g, "-")).append("path").attr("class", "path").attr("id", function(d, i) {
         select$2(this).attr(
           "d",
-          Symbol$1().type(getMarkershapes(d.selectedShape)).size(
-            (d.sizeValue ? d.sizeValue : 10) * 2 * convertStringToNumber(
+          Symbol$1().type(getMarkershapes(d.shape)).size(
+            (d.sizeValue ? sizeScale(d.sizeValue) : 10) * 2 * convertStringToNumber(
               chartFormatOptions.plotArea.scatterSizeIndex
             )
           )
@@ -55244,24 +55307,26 @@ const ScatterChart = ({
       ).on("mousemove", (event2, d) => {
         showTooltipOnMouseMove(
           [
-            {
-              key: chartFormatOptions.xAxisTitle.xAxisTitleText,
-              value: getNumberWithFormatFunction(
-                chartFormatOptions.toolTip.toolTipDisplayUnits,
-                chartFormatOptions.toolTip.toolTipNumberFormat,
-                chartFormatOptions.toolTip.toolTipDecimalPrecision
-              )(d.dimension)
-            },
-            {
-              key: chartFormatOptions.yAxisTitle.yAxisTitleText,
-              value: getNumberWithFormatFunction(
-                chartFormatOptions.toolTip.toolTipDisplayUnits,
-                chartFormatOptions.toolTip.toolTipNumberFormat,
-                chartFormatOptions.toolTip.toolTipDecimalPrecision
-              )(d.measure)
-            },
-            { key: "Legend", value: d.legendName }
-            // { key: "Calculated Tooltip", value: d.tooltip },
+            ...[
+              {
+                key: chartFormatOptions.xAxisTitle.xAxisTitleText,
+                value: getNumberWithFormatFunction(
+                  chartFormatOptions.toolTip.toolTipDisplayUnits,
+                  chartFormatOptions.toolTip.toolTipNumberFormat,
+                  chartFormatOptions.toolTip.toolTipDecimalPrecision
+                )(d.dimension)
+              },
+              {
+                key: chartFormatOptions.yAxisTitle.yAxisTitleText,
+                value: getNumberWithFormatFunction(
+                  chartFormatOptions.toolTip.toolTipDisplayUnits,
+                  chartFormatOptions.toolTip.toolTipNumberFormat,
+                  chartFormatOptions.toolTip.toolTipDecimalPrecision
+                )(d.measure)
+              },
+              { key: "Color", value: d.colorName }
+            ],
+            ...d.shapeName ? [{ key: "Shape", value: d.shapeName }] : []
           ],
           chartFormatOptions
         );
@@ -55277,33 +55342,41 @@ const ScatterChart = ({
   };
   const iterateOverChartData = () => {
     try {
+      let addDataToModifiedData = function(dataPoint, legend, shape) {
+        minMeasure = Math.min(minMeasure, dataPoint.value);
+        maxMeasure = Math.max(maxMeasure, dataPoint.value);
+        minDimension = Math.min(minDimension, dataPoint.dimension);
+        maxDimension = Math.max(maxDimension, dataPoint.dimension);
+        sizeValueMin = Math.min(sizeValueMin, dataPoint.value2 ?? 10);
+        sizeValueMax = Math.max(sizeValueMax, dataPoint.value2 ?? 10);
+        modifiedData.push({
+          dimension: dataPoint.dimension,
+          measure: dataPoint.value,
+          sizeValue: dataPoint.value2,
+          colorName: legend,
+          shapeName: shape,
+          shape: shapesMap.get(shape) || "Circle",
+          color: colorsMap.get(legend) || "#6ba2b8ff"
+        });
+      };
       colorsList.forEach((colorObject) => {
         colorsMap.set(colorObject.name, colorObject.color);
       });
       shapesList.forEach((shapeObject) => {
         shapesMap.set(shapeObject.name, shapeObject.markerShape);
       });
-      data.forEach((d) => {
-        let legendNameArr = d.legendName.split("-");
-        d["selectedColor"] = colorsMap.get(legendNameArr[0]) || "#6ba2b8ff";
-        d["selectedShape"] = shapesMap.get(legendNameArr[1]) || "Circle";
-        if (d.measureName) {
-          measuresList.push(d.measure);
-          if (d.measure < minMeasure || minMeasure === void 0) {
-            minMeasure = d.measure;
-          }
-          if (d.measure > maxMeasure || maxMeasure === void 0) {
-            maxMeasure = d.measure;
-          }
+      data.ChartData.forEach((d) => {
+        if (d.children && d.children.length > 0) {
+          d.children.forEach((child) => {
+            child.data.forEach((dataPoint) => {
+              addDataToModifiedData(dataPoint, d.legend, child.legend);
+            });
+          });
         }
-        if (d.dimensionName) {
-          dimensionsList.push(d.dimension);
-          if (d.dimension < minDimension || minDimension === void 0) {
-            minDimension = d.dimension;
-          }
-          if (d.dimension > maxDimension || maxDimension === void 0) {
-            maxDimension = d.dimension;
-          }
+        if (d.data && d.data.length > 0) {
+          d.data.forEach((dataPoint) => {
+            addDataToModifiedData(dataPoint, d.legend);
+          });
         }
       });
     } catch (e) {
@@ -55318,6 +55391,7 @@ const ScatterChart = ({
       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) {
       logError$2(fileName, "initScale", e);
     }
@@ -55395,10 +55469,10 @@ const ScatterChart = ({
         let xCordinate;
         switch (chartFormatOptions.plotArea.xCoordinate) {
           case referenceLineTypes.Mean:
-            xCordinate = mean(data, (d) => d.dimension);
+            xCordinate = mean(modifiedData, (d) => d.dimension);
             break;
           case referenceLineTypes.Median:
-            xCordinate = median(data, (d) => d.dimension);
+            xCordinate = median(modifiedData, (d) => d.dimension);
             break;
           case referenceLineTypes.Custom:
             xCordinate = convertStringToNumber(
@@ -55415,10 +55489,13 @@ const ScatterChart = ({
         let yCordinate;
         switch (chartFormatOptions.plotArea.yCoordinate) {
           case referenceLineTypes.Mean:
-            yCordinate = mean(data, (d) => d.measure);
+            yCordinate = mean(modifiedData, (d) => d.value);
             break;
           case referenceLineTypes.Median:
-            yCordinate = median(data, (d) => d.measure);
+            yCordinate = median(
+              modifiedData,
+              (d) => d.value
+            );
             break;
           case referenceLineTypes.Custom:
             yCordinate = convertStringToNumber(