pace-chart-lib 1.0.61 → 1.0.63

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

@@ -16195,7 +16195,7 @@ const fileName$b = "CommonFunctions.ts";
   chartTypes.Speedometer,
   chartTypes.RadialBarChart
 ];
-function drawLegends(height, svg, maxLegendDimensions, chartTitleHeight, width, legendMargin, formatOptions, seriesData, chartId, dataTableHeight, margin, legendShape, chartType) {
+function drawLegends(height, svg, maxLegendDimensions, chartTitleHeight, width, legendMargin, formatOptions, seriesData, chartId, dataTableHeight, margin, legendShape, chartType, addLocalFilterFromLib) {
   try {
     let position = formatOptions.legends.legendPosition;
     let horizontalLegendAlignment = formatOptions.legends.legendAlignmentTopBottom;
@@ -16217,7 +16217,9 @@ function drawLegends(height, svg, maxLegendDimensions, chartTitleHeight, width,
             verticalLegendAlignment,
             legendShape,
             formatOptions,
-            chartId
+            chartId,
+            false,
+            addLocalFilterFromLib
           );
           break;
         case staticLegendPosition.top:
@@ -16232,7 +16234,9 @@ function drawLegends(height, svg, maxLegendDimensions, chartTitleHeight, width,
             horizontalLegendAlignment,
             legendShape,
             formatOptions,
-            chartId
+            chartId,
+            false,
+            addLocalFilterFromLib
           );
           break;
         case staticLegendPosition.left:
@@ -16249,7 +16253,9 @@ function drawLegends(height, svg, maxLegendDimensions, chartTitleHeight, width,
             verticalLegendAlignment,
             legendShape,
             formatOptions,
-            chartId
+            chartId,
+            false,
+            addLocalFilterFromLib
           );
           break;
         case staticLegendPosition.bottom:
@@ -16264,7 +16270,9 @@ function drawLegends(height, svg, maxLegendDimensions, chartTitleHeight, width,
             horizontalLegendAlignment,
             legendShape,
             formatOptions,
-            chartId
+            chartId,
+            false,
+            addLocalFilterFromLib
           );
           break;
       }
@@ -16789,7 +16797,7 @@ const findStringWithLongestLength = (data, key) => {
     logError$2(fileName$b, "findStringWithLongestLength", error);
   }
 };
-const legendsWithScroll = (svg, seriesData, x2, y2, width, height, legendPosition, alignment, legendShape, chartFormatOptions, chartId, isVennChart = false) => {
+const legendsWithScroll = (svg, seriesData, x2, y2, width, height, legendPosition, alignment, legendShape, chartFormatOptions, chartId, isVennChart = false, addLocalFilterFromLib) => {
   try {
     if (chartFormatOptions.legends.legendVisibility) {
       let justifyContent = "";
@@ -16812,7 +16820,9 @@ const legendsWithScroll = (svg, seriesData, x2, y2, width, height, legendPositio
       if (legendPosition == staticLegendPosition.top || legendPosition == staticLegendPosition.bottom)
         div.style("flex-direction", "row");
       seriesData.forEach((d, i) => {
-        let innerdiv = div.append("div").style("display", "inline-flex").style("justify-content", "flex-start").style("align-items", "center").style("width", "fit-content").style("margin", "3px 0px").style("flex-wrap", "nowrap").style("white-space", "nowrap").on("mousemove", function() {
+        let innerdiv = div.append("div").style("display", "inline-flex").style("justify-content", "flex-start").style("align-items", "center").style("width", "fit-content").style("margin", "3px 0px").style("flex-wrap", "nowrap").style("white-space", "nowrap").on("dblclick", function() {
+          addLocalFilterFromLib(d?.properties);
+        }).on("mousemove", function() {
           if (chartFormatOptions.legends.onHoverEffect) {
             const hoverId = this.textContent.replace(/\s+/g, "-");
             svg.selectAll(".parentGroup").classed("highlight", false).classed("unhighlight", true);
@@ -17080,7 +17090,7 @@ const marginCalculationsForChartsWithoutAxis = (chartFormatOptions, width, heigh
     logError$2(fileName$b, "marginCalculationsForChartsWithoutAxis", error);
   }
 };
-const initLegendListWithTotalValueAllowance = (chartFormatOptions, svg, seriesData, width, height, legendListWidth, chartTitleHeight, chartId, margins, staticLegendShape2, shouldAllowTotalValueMargin = true) => {
+const initLegendListWithTotalValueAllowance = (chartFormatOptions, svg, seriesData, width, height, legendListWidth, chartTitleHeight, chartId, margins, staticLegendShape2, shouldAllowTotalValueMargin = true, addLocalFilterFromLib) => {
   try {
     let position = chartFormatOptions.legends.legendPosition;
     let totalPosition = chartFormatOptions.total.totalPosition;
@@ -17103,7 +17113,9 @@ const initLegendListWithTotalValueAllowance = (chartFormatOptions, svg, seriesDa
           verticalLegendAlignment,
           staticLegendShape2,
           chartFormatOptions,
-          chartId
+          chartId,
+          false,
+          addLocalFilterFromLib
         );
         break;
       case staticLegendPosition.top:
@@ -17118,7 +17130,9 @@ const initLegendListWithTotalValueAllowance = (chartFormatOptions, svg, seriesDa
           horizontalLegendAlignment,
           staticLegendShape2,
           chartFormatOptions,
-          chartId
+          chartId,
+          false,
+          addLocalFilterFromLib
         );
         break;
       case staticLegendPosition.left:
@@ -17133,7 +17147,9 @@ const initLegendListWithTotalValueAllowance = (chartFormatOptions, svg, seriesDa
           verticalLegendAlignment,
           staticLegendShape2,
           chartFormatOptions,
-          chartId
+          chartId,
+          false,
+          addLocalFilterFromLib
         );
         break;
       case staticLegendPosition.bottom:
@@ -17148,7 +17164,9 @@ const initLegendListWithTotalValueAllowance = (chartFormatOptions, svg, seriesDa
           horizontalLegendAlignment,
           staticLegendShape2,
           chartFormatOptions,
-          chartId
+          chartId,
+          false,
+          addLocalFilterFromLib
         );
         break;
     }
@@ -17382,7 +17400,8 @@ const ColumnChart = ({
   formatOptions,
   data,
   isReportEditable,
-  onDataLabelCoordinatesChange
+  onDataLabelCoordinatesChange,
+  addLocalFilterFromLib
 }) => {
   const chartId = crypto.randomUUID();
   let columnWidth = 0;
@@ -17598,7 +17617,9 @@ const ColumnChart = ({
       chartId,
       dataTableHeight,
       margin,
-      staticLegendShape.rectangle
+      staticLegendShape.rectangle,
+      chartType,
+      addLocalFilterFromLib
     );
     horizontalScrollBar(
       seriesData,
@@ -17954,7 +17975,8 @@ const CustomColumnChart = ({
   formatOptions,
   data,
   isReportEditable,
-  onDataLabelCoordinatesChange
+  onDataLabelCoordinatesChange,
+  addLocalFilterFromLib
 }) => {
   const chartId = crypto.randomUUID();
   let columnWidth = 0;
@@ -18182,8 +18204,9 @@ const CustomColumnChart = ({
       chartId,
       dataTableHeight,
       margin,
-      null
-      // legendShape.rectangle
+      null,
+      chartType,
+      addLocalFilterFromLib
     );
     horizontalScrollBar(
       seriesData,
@@ -19097,7 +19120,8 @@ const LayeredColumnChart = ({
   formatOptions,
   data,
   isReportEditable,
-  onDataLabelCoordinatesChange
+  onDataLabelCoordinatesChange,
+  addLocalFilterFromLib
 }) => {
   const chartId = crypto.randomUUID();
   let columnWidth = 0;
@@ -19300,7 +19324,9 @@ const LayeredColumnChart = ({
       chartId,
       dataTableHeight,
       margin,
-      staticLegendShape.rectangle
+      staticLegendShape.rectangle,
+      chartType,
+      addLocalFilterFromLib
     );
     horizontalScrollBar(
       seriesData,
@@ -19651,7 +19677,8 @@ const StackColumnChart = ({
   formatOptions,
   data,
   isReportEditable,
-  onDataLabelCoordinatesChange
+  onDataLabelCoordinatesChange,
+  addLocalFilterFromLib
 }) => {
   const chartId = crypto.randomUUID();
   let columnWidth = 0;
@@ -19853,7 +19880,9 @@ const StackColumnChart = ({
       chartId,
       dataTableHeight,
       margin,
-      staticLegendShape.rectangle
+      staticLegendShape.rectangle,
+      chartType,
+      addLocalFilterFromLib
     );
     horizontalScrollBar(
       seriesData,
@@ -20387,7 +20416,8 @@ const NormalizedStackColumnChart = ({
   formatOptions,
   data,
   isReportEditable,
-  onDataLabelCoordinatesChange
+  onDataLabelCoordinatesChange,
+  addLocalFilterFromLib
 }) => {
   const chartId = crypto.randomUUID();
   let columnWidth = 0;
@@ -20588,7 +20618,9 @@ const NormalizedStackColumnChart = ({
       chartId,
       dataTableHeight,
       margin,
-      staticLegendShape.rectangle
+      staticLegendShape.rectangle,
+      chartType,
+      addLocalFilterFromLib
     );
     horizontalScrollBar(
       seriesData,
@@ -22223,7 +22255,8 @@ const LineChart = ({
   formatOptions,
   data,
   isReportEditable,
-  onDataLabelCoordinatesChange
+  onDataLabelCoordinatesChange,
+  addLocalFilterFromLib
 }) => {
   const chartId = crypto.randomUUID();
   const barWidth = 0;
@@ -22441,7 +22474,9 @@ const LineChart = ({
       chartId,
       dataTableHeight,
       margin,
-      staticLegendShape.line
+      staticLegendShape.line,
+      chartType,
+      addLocalFilterFromLib
     );
     horizontalScrollBar(
       seriesData,
@@ -22796,7 +22831,8 @@ const StackLineChart = ({
   formatOptions,
   data,
   isReportEditable,
-  onDataLabelCoordinatesChange
+  onDataLabelCoordinatesChange,
+  addLocalFilterFromLib
 }) => {
   const chartId = crypto.randomUUID();
   const barWidth = 0;
@@ -22999,7 +23035,9 @@ const StackLineChart = ({
       chartId,
       dataTableHeight,
       margin,
-      staticLegendShape.line
+      staticLegendShape.line,
+      chartType,
+      addLocalFilterFromLib
     );
     horizontalScrollBar(
       seriesData,
@@ -23381,7 +23419,8 @@ const NormalisedStackLineChart = ({
   formatOptions,
   data,
   isReportEditable,
-  onDataLabelCoordinatesChange
+  onDataLabelCoordinatesChange,
+  addLocalFilterFromLib
 }) => {
   const chartId = crypto.randomUUID();
   const barWidth = 0;
@@ -23575,7 +23614,9 @@ const NormalisedStackLineChart = ({
       chartId,
       dataTableHeight,
       margin,
-      staticLegendShape.line
+      staticLegendShape.line,
+      chartType,
+      addLocalFilterFromLib
     );
     horizontalScrollBar(
       seriesData,
@@ -23909,7 +23950,8 @@ const HorizontalBarChart = ({
   formatOptions,
   data,
   isReportEditable,
-  onDataLabelCoordinatesChange
+  onDataLabelCoordinatesChange,
+  addLocalFilterFromLib
 }) => {
   const chartId = crypto.randomUUID();
   let columnWidth = 0;
@@ -24111,7 +24153,9 @@ const HorizontalBarChart = ({
       chartId,
       dataTableHeight,
       margin,
-      staticLegendShape.rectangle
+      staticLegendShape.rectangle,
+      chartType,
+      addLocalFilterFromLib
     );
     horizontalScrollBar(
       seriesData,
@@ -24459,7 +24503,8 @@ const StackHorizontalChart = ({
   formatOptions,
   data,
   isReportEditable,
-  onDataLabelCoordinatesChange
+  onDataLabelCoordinatesChange,
+  addLocalFilterFromLib
 }) => {
   const chartId = crypto.randomUUID();
   let columnWidth = 0;
@@ -24633,7 +24678,9 @@ const StackHorizontalChart = ({
       chartId,
       0,
       margin,
-      staticLegendShape.rectangle
+      staticLegendShape.rectangle,
+      chartType,
+      addLocalFilterFromLib
     );
     horizontalScrollBar(
       seriesData,
@@ -25181,7 +25228,8 @@ const NormalizedStackHorizontalBarChart = ({
   formatOptions,
   data,
   isReportEditable,
-  onDataLabelCoordinatesChange
+  onDataLabelCoordinatesChange,
+  addLocalFilterFromLib
 }) => {
   const chartId = crypto.randomUUID();
   let columnWidth = 0;
@@ -25354,7 +25402,9 @@ const NormalizedStackHorizontalBarChart = ({
       chartId,
       0,
       margin,
-      staticLegendShape.rectangle
+      staticLegendShape.rectangle,
+      chartType,
+      addLocalFilterFromLib
     );
     horizontalScrollBar(
       seriesData,
@@ -25659,7 +25709,8 @@ const LayeredHorizontalBarChart = ({
   formatOptions,
   data,
   isReportEditable,
-  onDataLabelCoordinatesChange
+  onDataLabelCoordinatesChange,
+  addLocalFilterFromLib
 }) => {
   const chartId = crypto.randomUUID();
   let columnWidth = 0;
@@ -25831,7 +25882,9 @@ const LayeredHorizontalBarChart = ({
       chartId,
       0,
       margin,
-      staticLegendShape.rectangle
+      staticLegendShape.rectangle,
+      chartType,
+      addLocalFilterFromLib
     );
     horizontalScrollBar(
       seriesData,
@@ -26873,7 +26926,8 @@ const AreaChart = ({
   formatOptions,
   data,
   isReportEditable,
-  onDataLabelCoordinatesChange
+  onDataLabelCoordinatesChange,
+  addLocalFilterFromLib
 }) => {
   const chartId = crypto.randomUUID();
   const barWidth = 0;
@@ -27089,7 +27143,9 @@ const AreaChart = ({
       chartId,
       dataTableHeight,
       margin,
-      staticLegendShape.areaWithLine
+      staticLegendShape.areaWithLine,
+      chartType,
+      addLocalFilterFromLib
     );
     horizontalScrollBar(
       seriesData,
@@ -27463,7 +27519,8 @@ const StackAreaChart = ({
   formatOptions,
   data,
   isReportEditable,
-  onDataLabelCoordinatesChange
+  onDataLabelCoordinatesChange,
+  addLocalFilterFromLib
 }) => {
   const chartId = crypto.randomUUID();
   const barWidth = 0;
@@ -27666,7 +27723,9 @@ const StackAreaChart = ({
       chartId,
       dataTableHeight,
       margin,
-      staticLegendShape.areaWithLine
+      staticLegendShape.areaWithLine,
+      chartType,
+      addLocalFilterFromLib
     );
     horizontalScrollBar(
       seriesData,
@@ -28063,7 +28122,8 @@ const NormalizedStackAreaChart = ({
   formatOptions,
   data,
   isReportEditable,
-  onDataLabelCoordinatesChange
+  onDataLabelCoordinatesChange,
+  addLocalFilterFromLib
 }) => {
   const chartId = crypto.randomUUID();
   const barWidth = 0;
@@ -28256,7 +28316,9 @@ const NormalizedStackAreaChart = ({
       chartId,
       dataTableHeight,
       margin,
-      staticLegendShape.areaWithLine
+      staticLegendShape.areaWithLine,
+      chartType,
+      addLocalFilterFromLib
     );
     horizontalScrollBar(
       seriesData,
@@ -28720,7 +28782,7 @@ const drawTotalValue = (chartFormatOptions, totalValue, chartTitleHeight, chartA
   }
 };
 const fileName$8 = "PieChart.tsx";
-const PieChart = ({ data, formatOptions, chartId, isReportEditable, onDataLabelCoordinatesChange }) => {
+const PieChart = ({ data, formatOptions, chartId, isReportEditable, onDataLabelCoordinatesChange, addLocalFilterFromLib }) => {
   const svgRef = useRef();
   const seriesData = generalizedChartData(data.ChartData);
   let chartFormatOptions;
@@ -28772,7 +28834,9 @@ const PieChart = ({ data, formatOptions, chartId, isReportEditable, onDataLabelC
       chartTitleHeight,
       chartId,
       margins,
-      staticLegendShape.circle
+      staticLegendShape.circle,
+      void 0,
+      addLocalFilterFromLib
     );
     initPieChartData();
     drawPieChart();
@@ -29150,7 +29214,8 @@ const DonutChart = ({
   formatOptions,
   chartId,
   isReportEditable,
-  onDataLabelCoordinatesChange
+  onDataLabelCoordinatesChange,
+  addLocalFilterFromLib
 }) => {
   const svgRef = useRef();
   const seriesData = generalizedChartData(data.ChartData);
@@ -29205,7 +29270,8 @@ const DonutChart = ({
       chartId,
       margins,
       staticLegendShape.hollowCircle,
-      false
+      false,
+      addLocalFilterFromLib
     );
     initPieChartData();
     drawDonutChart();
@@ -30316,7 +30382,8 @@ const PyramidChart = ({
   data,
   formatOptions,
   chartId,
-  onDataLabelCoordinatesChange
+  onDataLabelCoordinatesChange,
+  addLocalFilterFromLib
 }) => {
   const svgRef = useRef();
   let seriesData = generalizedChartData(data.ChartData);
@@ -30370,7 +30437,8 @@ const PyramidChart = ({
       chartId,
       margins,
       staticLegendShape.rectangle,
-      false
+      false,
+      addLocalFilterFromLib
     );
     initPyramidData();
     drawPyramidChart();
@@ -30704,7 +30772,8 @@ const fileName$3 = "ProgressChart.tsx";
 const ProgressChart = ({
   data: { ChartData },
   formatOptions,
-  chartId
+  chartId,
+  addLocalFilterFromLib
 }) => {
   const svgRef = useRef();
   let seriesData = generalizedChartData(ChartData);
@@ -30757,7 +30826,9 @@ const ProgressChart = ({
       chartTitleHeight,
       chartId,
       margins,
-      staticLegendShape.hollowCircle
+      staticLegendShape.hollowCircle,
+      true,
+      addLocalFilterFromLib
     );
     initProgressChartData();
     drawProgressChart();
@@ -31484,7 +31555,8 @@ function logError(fileName2, functionName, error) {
 const RadialBarChart = ({
   data: { ChartData },
   formatOptions,
-  chartId
+  chartId,
+  addLocalFilterFromLib
 }) => {
   const svgRef = useRef();
   const seriesData = generalizedChartData(ChartData);
@@ -31533,7 +31605,9 @@ const RadialBarChart = ({
       chartTitleHeight,
       chartId,
       margins,
-      staticLegendShape.hollowCircle
+      staticLegendShape.hollowCircle,
+      false,
+      addLocalFilterFromLib
     );
     initRadialBarChart();
   };
@@ -54179,9 +54253,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();
@@ -54221,20 +54296,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);
@@ -54283,8 +54349,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) {
@@ -54293,12 +54358,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) {
@@ -54512,7 +54580,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;">
@@ -54689,7 +54757,8 @@ const OrganizationChart = ({
 const BubbleChart = ({
   data,
   formatOptions,
-  chartId
+  chartId,
+  addLocalFilterFromLib
 }) => {
   let legendEntries = data.LegendList;
   const svgRef = useRef();
@@ -55103,7 +55172,9 @@ const BubbleChart = ({
         chartTitleHeight,
         chartId,
         margins,
-        staticLegendShape.circle
+        staticLegendShape.circle,
+        false,
+        addLocalFilterFromLib
       );
     } catch (e) {
       logError$2("BubbleChart", "initLegendList", e);
@@ -55147,10 +55218,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];
@@ -55162,12 +55234,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;
@@ -55183,6 +55255,7 @@ const ScatterChart = ({
   let customYaxisMinValue;
   let xScale;
   let yScale;
+  let sizeScale;
   let colorsMap = /* @__PURE__ */ new Map();
   let shapesMap = /* @__PURE__ */ new Map();
   useEffect(() => {
@@ -55284,7 +55357,7 @@ const ScatterChart = ({
       innerHeight2,
       xTitle,
       xLabel,
-      data.length
+      modifiedData.length
     );
   };
   const initCircles = () => {
@@ -55294,17 +55367,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
             )
           )
@@ -55317,24 +55384,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
         );
@@ -55350,33 +55419,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) {
@@ -55391,6 +55468,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);
     }
@@ -55468,10 +55546,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(
@@ -55488,10 +55566,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(
@@ -57114,7 +57195,8 @@ const DotPlot = ({
   formatOptions,
   data,
   isReportEditable,
-  onDataLabelCoordinatesChange
+  onDataLabelCoordinatesChange,
+  addLocalFilterFromLib
 }) => {
   const chartId = crypto.randomUUID();
   let columnWidth = 0;
@@ -57285,7 +57367,9 @@ const DotPlot = ({
       chartId,
       0,
       margin,
-      staticLegendShape.rectangle
+      staticLegendShape.rectangle,
+      chartType,
+      addLocalFilterFromLib
     );
     horizontalScrollBar(
       seriesData,