pace-chart-lib 1.0.62 → 1.0.64

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();
   };
@@ -54683,7 +54757,8 @@ const OrganizationChart = ({
 const BubbleChart = ({
   data,
   formatOptions,
-  chartId
+  chartId,
+  addLocalFilterFromLib
 }) => {
   let legendEntries = data.LegendList;
   const svgRef = useRef();
@@ -55097,7 +55172,9 @@ const BubbleChart = ({
         chartTitleHeight,
         chartId,
         margins,
-        staticLegendShape.circle
+        staticLegendShape.circle,
+        false,
+        addLocalFilterFromLib
       );
     } catch (e) {
       logError$2("BubbleChart", "initLegendList", e);
@@ -57118,7 +57195,8 @@ const DotPlot = ({
   formatOptions,
   data,
   isReportEditable,
-  onDataLabelCoordinatesChange
+  onDataLabelCoordinatesChange,
+  addLocalFilterFromLib
 }) => {
   const chartId = crypto.randomUUID();
   let columnWidth = 0;
@@ -57289,7 +57367,9 @@ const DotPlot = ({
       chartId,
       0,
       margin,
-      staticLegendShape.rectangle
+      staticLegendShape.rectangle,
+      chartType,
+      addLocalFilterFromLib
     );
     horizontalScrollBar(
       seriesData,
@@ -58043,9 +58123,14 @@ function formatValueForAxis(value2, displayUnits, decimalPrecision) {
   if (displayUnits === "Billions") return (value2 / 1e9).toFixed(precision) + "B";
   return value2.toFixed(precision);
 }
-function mapFormatOptionsToChartJS(formatOptions, chartType, hasSecondaryAxis = false) {
+function findLegendFromAlias(legendList, alias) {
+  return legendList.find((d) => d.alias == alias);
+}
+function mapFormatOptionsToChartJS(formatOptions, chartType, hasSecondaryAxis = false, addLocalFilterFromLib, legendList) {
   const isCircular = chartType === "pie" || chartType === "doughnut" || chartType === "polarArea";
   const isHorizontal = chartType === "horizontalBar";
+  let lastClickTime = 0;
+  const DOUBLE_CLICK_DELAY = 300;
   const gridColor = formatOptions.plotArea?.gridLinesColor ?? "#e0e0e0";
   const legendLabelColor = formatOptions.legends?.legendFontColor ?? "#333333";
   const opts = {
@@ -58070,6 +58155,21 @@ function mapFormatOptionsToChartJS(formatOptions, chartType, hasSecondaryAxis =
           usePointStyle: false,
           boxWidth: 12,
           padding: 16
+        },
+        onClick: function(e, legendItem, legend) {
+          if (addLocalFilterFromLib) {
+            const currentTime = (/* @__PURE__ */ new Date()).getTime();
+            const timeDiff = currentTime - lastClickTime;
+            if (timeDiff < DOUBLE_CLICK_DELAY) {
+              const actualLegend = findLegendFromAlias(legendList, legendItem.text);
+              if (actualLegend) {
+                addLocalFilterFromLib(actualLegend);
+              }
+              lastClickTime = 0;
+            } else {
+              lastClickTime = currentTime;
+            }
+          }
         }
       },
       // ---- Tooltip ----
@@ -73471,9 +73571,14 @@ const CJSColumnChart = ({
   clientWidth = 0,
   clientHeight = 0,
   isChartStacked,
-  colorBank
+  colorBank,
   //= CJS_DEFAULT_COLORS,
+  addLocalFilterFromLib
 }) => {
+  const legendList = useMemo(
+    () => data.ChartData?.map((s2) => s2.properties),
+    [data]
+  );
   const hasSecondaryAxis = useMemo(
     () => data.ChartData?.some((s2) => s2.Axis === "Secondary" || s2.properties?.axis === "Secondary"),
     [data]
@@ -73483,7 +73588,7 @@ const CJSColumnChart = ({
     [data, formatOptions, colorBank]
   );
   const chartOptions = useMemo(() => {
-    const opts = mapFormatOptionsToChartJS(formatOptions, "bar", hasSecondaryAxis);
+    const opts = mapFormatOptionsToChartJS(formatOptions, "bar", hasSecondaryAxis, addLocalFilterFromLib, legendList);
     if (isChartStacked) {
       opts.scales ??= {};
       opts.scales.x ??= {};
@@ -73512,8 +73617,13 @@ const CJSHorizontalBarChart = ({
   clientWidth = 0,
   clientHeight = 0,
   isChartStacked,
-  colorBank = CJS_DEFAULT_COLORS
+  colorBank = CJS_DEFAULT_COLORS,
+  addLocalFilterFromLib
 }) => {
+  const legendList = useMemo(
+    () => data.ChartData?.map((s2) => s2.properties),
+    [data]
+  );
   const hasSecondaryAxis = useMemo(
     () => data.ChartData?.some((s2) => s2.Axis === "Secondary" || s2.properties?.axis === "Secondary"),
     [data]
@@ -73523,7 +73633,7 @@ const CJSHorizontalBarChart = ({
     [data, formatOptions, colorBank]
   );
   const chartOptions = useMemo(() => {
-    const opts = mapFormatOptionsToChartJS(formatOptions, "horizontalBar", hasSecondaryAxis);
+    const opts = mapFormatOptionsToChartJS(formatOptions, "horizontalBar", hasSecondaryAxis, addLocalFilterFromLib, legendList);
     opts.indexAxis = "y";
     if (isChartStacked) {
       opts.scales ??= {};
@@ -73553,8 +73663,13 @@ const CJSLineChart = ({
   clientWidth = 0,
   clientHeight = 0,
   isChartStacked,
-  colorBank = CJS_DEFAULT_COLORS
+  colorBank = CJS_DEFAULT_COLORS,
+  addLocalFilterFromLib
 }) => {
+  const legendList = useMemo(
+    () => data.ChartData?.map((s2) => s2.properties),
+    [data]
+  );
   const hasSecondaryAxis = useMemo(
     () => data.ChartData?.some((s2) => s2.Axis === "Secondary" || s2.properties?.axis === "Secondary"),
     [data]
@@ -73564,7 +73679,7 @@ const CJSLineChart = ({
     [data, formatOptions, colorBank]
   );
   const chartOptions = useMemo(() => {
-    const opts = mapFormatOptionsToChartJS(formatOptions, "line", hasSecondaryAxis);
+    const opts = mapFormatOptionsToChartJS(formatOptions, "line", hasSecondaryAxis, addLocalFilterFromLib, legendList);
     if (isChartStacked) {
       opts.scales ??= {};
       opts.scales.y ??= {};
@@ -73591,8 +73706,13 @@ const CJSAreaChart = ({
   clientWidth = 0,
   clientHeight = 0,
   isChartStacked,
-  colorBank = CJS_DEFAULT_COLORS
+  colorBank,
+  addLocalFilterFromLib
 }) => {
+  const legendList = useMemo(
+    () => data.ChartData?.map((s2) => s2.properties),
+    [data]
+  );
   const hasSecondaryAxis = useMemo(
     () => data.ChartData?.some((s2) => s2.Axis === "Secondary" || s2.properties?.axis === "Secondary"),
     [data]
@@ -73602,7 +73722,7 @@ const CJSAreaChart = ({
     [data, formatOptions, colorBank]
   );
   const chartOptions = useMemo(() => {
-    const opts = mapFormatOptionsToChartJS(formatOptions, "area", hasSecondaryAxis);
+    const opts = mapFormatOptionsToChartJS(formatOptions, "area", hasSecondaryAxis, addLocalFilterFromLib, legendList);
     if (isChartStacked) {
       opts.scales ??= {};
       opts.scales.y ??= {};
@@ -73628,14 +73748,19 @@ const CJSPieChart = ({
   formatOptions,
   clientWidth,
   clientHeight,
-  colorBank
+  colorBank,
+  addLocalFilterFromLib
 }) => {
+  const legendList = useMemo(
+    () => data.LegendList ?? [],
+    [data]
+  );
   const chartData = useMemo(
     () => transformToChartJSData(data, "pie", formatOptions, colorBank),
     [data, formatOptions, colorBank]
   );
   const chartOptions = useMemo(
-    () => mapFormatOptionsToChartJS(formatOptions, "pie", false),
+    () => mapFormatOptionsToChartJS(formatOptions, "pie", false, addLocalFilterFromLib, legendList),
     [formatOptions]
   );
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -73655,14 +73780,19 @@ const CJSDonutChart = ({
   formatOptions,
   clientWidth,
   clientHeight,
-  colorBank = CJS_DEFAULT_COLORS
+  colorBank = CJS_DEFAULT_COLORS,
+  addLocalFilterFromLib
 }) => {
+  const legendList = useMemo(
+    () => data.LegendList ?? [],
+    [data]
+  );
   const chartData = useMemo(
     () => transformToChartJSData(data, "doughnut", formatOptions, colorBank),
     [data, formatOptions, colorBank]
   );
   const chartOptions = useMemo(() => {
-    const base = mapFormatOptionsToChartJS(formatOptions, "doughnut", false);
+    const base = mapFormatOptionsToChartJS(formatOptions, "doughnut", false, addLocalFilterFromLib, legendList);
     const rawInner = formatOptions.plotArea?.innerRadius;
     if (rawInner !== void 0 && rawInner !== null) {
       base.cutout = `${rawInner}%`;
@@ -73713,14 +73843,19 @@ const CJSBubbleChart = ({
   formatOptions,
   clientWidth,
   clientHeight,
-  colorBank = CJS_DEFAULT_COLORS
+  colorBank = CJS_DEFAULT_COLORS,
+  addLocalFilterFromLib
 }) => {
+  const legendList = useMemo(
+    () => data.ChartData?.map((s2) => s2.properties),
+    [data]
+  );
   const chartData = useMemo(
     () => transformToChartJSData(data, "bubble", formatOptions, colorBank),
     [data, formatOptions, colorBank]
   );
   const chartOptions = useMemo(
-    () => mapFormatOptionsToChartJS(formatOptions, "bubble", false),
+    () => mapFormatOptionsToChartJS(formatOptions, "bubble", false, addLocalFilterFromLib, legendList),
     [formatOptions]
   );
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -73788,15 +73923,20 @@ const CJSPolarAreaChart = ({
   formatOptions,
   clientWidth,
   clientHeight,
-  colorBank = CJS_DEFAULT_COLORS
+  colorBank = CJS_DEFAULT_COLORS,
+  addLocalFilterFromLib
 }) => {
+  const legendList = useMemo(
+    () => data.LegendList ?? [],
+    [data]
+  );
   const chartData = useMemo(
     // Reuse the circular builder (same shape as pie)
     () => transformToChartJSData(data, "polarArea", formatOptions, colorBank),
     [data, formatOptions, colorBank]
   );
   const chartOptions = useMemo(() => {
-    const opts = mapFormatOptionsToChartJS(formatOptions, "polarArea", false);
+    const opts = mapFormatOptionsToChartJS(formatOptions, "polarArea", false, addLocalFilterFromLib, legendList);
     delete opts.scales;
     const xAxisFontStyle = formatOptions.xAxisLabel?.xAxisLabelFontStyle;
     const isItalic = Array.isArray(xAxisFontStyle) ? xAxisFontStyle.includes("Italic") || xAxisFontStyle.includes("italic") : false;
@@ -73837,8 +73977,13 @@ const CJSNormalizedStackColumnChart = ({
   formatOptions,
   clientWidth = 0,
   clientHeight = 0,
-  colorBank = CJS_DEFAULT_COLORS
+  colorBank = CJS_DEFAULT_COLORS,
+  addLocalFilterFromLib
 }) => {
+  const legendList = useMemo(
+    () => data.ChartData?.map((s2) => s2.properties),
+    [data]
+  );
   const chartData = useMemo(
     () => transformToNormalizedChartJSData(data, "bar", formatOptions, colorBank),
     [data, formatOptions, colorBank]
@@ -73848,7 +73993,7 @@ const CJSNormalizedStackColumnChart = ({
     [chartData]
   );
   const chartOptions = useMemo(() => {
-    const opts = mapFormatOptionsToChartJS(formatOptions, "bar", false);
+    const opts = mapFormatOptionsToChartJS(formatOptions, "bar", false, addLocalFilterFromLib, legendList);
     opts.scales ??= {};
     opts.scales.x ??= {};
     opts.scales.y ??= {};
@@ -73879,8 +74024,13 @@ const CJSNormalizedStackHorizontalBarChart = ({
   formatOptions,
   clientWidth = 0,
   clientHeight = 0,
-  colorBank = CJS_DEFAULT_COLORS
+  colorBank = CJS_DEFAULT_COLORS,
+  addLocalFilterFromLib
 }) => {
+  const legendList = useMemo(
+    () => data.ChartData?.map((s2) => s2.properties),
+    [data]
+  );
   const chartData = useMemo(
     () => transformToNormalizedChartJSData(data, "horizontalBar", formatOptions, colorBank),
     [data, formatOptions, colorBank]
@@ -73890,7 +74040,7 @@ const CJSNormalizedStackHorizontalBarChart = ({
     [chartData]
   );
   const chartOptions = useMemo(() => {
-    const opts = mapFormatOptionsToChartJS(formatOptions, "horizontalBar", false);
+    const opts = mapFormatOptionsToChartJS(formatOptions, "horizontalBar", false, addLocalFilterFromLib, legendList);
     opts.indexAxis = "y";
     opts.scales ??= {};
     opts.scales.x ??= {};
@@ -73922,8 +74072,13 @@ const CJSNormalizedStackLineChart = ({
   formatOptions,
   clientWidth = 0,
   clientHeight = 0,
-  colorBank = CJS_DEFAULT_COLORS
+  colorBank = CJS_DEFAULT_COLORS,
+  addLocalFilterFromLib
 }) => {
+  const legendList = useMemo(
+    () => data.ChartData?.map((s2) => s2.properties),
+    [data]
+  );
   const chartData = useMemo(
     () => transformToNormalizedChartJSData(data, "line", formatOptions, colorBank),
     [data, formatOptions, colorBank]
@@ -73933,7 +74088,7 @@ const CJSNormalizedStackLineChart = ({
     [chartData]
   );
   const chartOptions = useMemo(() => {
-    const opts = mapFormatOptionsToChartJS(formatOptions, "line", false);
+    const opts = mapFormatOptionsToChartJS(formatOptions, "line", false, addLocalFilterFromLib, legendList);
     opts.scales ??= {};
     opts.scales.y ??= {};
     opts.scales.y.stacked = true;
@@ -73962,8 +74117,13 @@ const CJSNormalizedStackAreaChart = ({
   formatOptions,
   clientWidth = 0,
   clientHeight = 0,
-  colorBank = CJS_DEFAULT_COLORS
+  colorBank = CJS_DEFAULT_COLORS,
+  addLocalFilterFromLib
 }) => {
+  const legendList = useMemo(
+    () => data.ChartData?.map((s2) => s2.properties),
+    [data]
+  );
   const chartData = useMemo(
     () => transformToNormalizedChartJSData(data, "area", formatOptions, colorBank),
     [data, formatOptions, colorBank]
@@ -73973,7 +74133,7 @@ const CJSNormalizedStackAreaChart = ({
     [chartData]
   );
   const chartOptions = useMemo(() => {
-    const opts = mapFormatOptionsToChartJS(formatOptions, "area", false);
+    const opts = mapFormatOptionsToChartJS(formatOptions, "area", false, addLocalFilterFromLib, legendList);
     opts.scales ??= {};
     opts.scales.y ??= {};
     opts.scales.y.stacked = true;