pace-chart-lib 1.0.63 → 1.0.64

package/dist/Components/Charts/ChartJS/charts/CJSAreaChart.d.ts

@@ -9,6 +9,7 @@ interface ICJSAreaChartProps {
     isChartStacked?: boolean;
     /** Active theme colour bank from the host application. Falls back to default palette. */
     colorBank?: string[];
+    addLocalFilterFromLib?: (clickedLegendData: any) => void;
 }
 /**
  * Chart.js area chart.

package/dist/Components/Charts/ChartJS/charts/CJSBubbleChart.d.ts

@@ -7,6 +7,7 @@ interface ICJSBubbleChartProps {
     clientHeight: number;
     /** Active theme colour bank from the host application. Falls back to default palette. */
     colorBank?: string[];
+    addLocalFilterFromLib?: (clickedLegendData: any) => void;
 }
 /**
  * Chart.js bubble chart.

package/dist/Components/Charts/ChartJS/charts/CJSColumnChart.d.ts

@@ -9,6 +9,7 @@ interface ICJSColumnChartProps {
     isChartStacked?: boolean;
     /** Active theme colour bank from the host application. Falls back to default palette. */
     colorBank?: string[];
+    addLocalFilterFromLib?: (clickedLegendData: any) => void;
 }
 /**
  * Chart.js vertical bar chart.

package/dist/Components/Charts/ChartJS/charts/CJSDonutChart.d.ts

@@ -7,6 +7,7 @@ interface ICJSDonutChartProps {
     clientHeight: number;
     /** Active theme colour bank from the host application. Falls back to default palette. */
     colorBank?: string[];
+    addLocalFilterFromLib?: (clickedLegendData: any) => void;
 }
 /**
  * Chart.js doughnut (donut) chart.

package/dist/Components/Charts/ChartJS/charts/CJSHorizontalBarChart.d.ts

@@ -8,6 +8,7 @@ interface ICJSHorizontalBarChartProps {
     isChartStacked?: boolean;
     /** Active theme colour bank from the host application. Falls back to default palette. */
     colorBank?: string[];
+    addLocalFilterFromLib?: (clickedLegendData: any) => void;
 }
 /**
  * Chart.js horizontal bar chart.

package/dist/Components/Charts/ChartJS/charts/CJSLineChart.d.ts

@@ -9,6 +9,7 @@ interface ICJSLineChartProps {
     isChartStacked?: boolean;
     /** Active theme colour bank from the host application. Falls back to default palette. */
     colorBank?: string[];
+    addLocalFilterFromLib?: (clickedLegendData: any) => void;
 }
 /**
  * Chart.js line chart.

package/dist/Components/Charts/ChartJS/charts/CJSNormalizedStackAreaChart.d.ts

@@ -6,6 +6,7 @@ interface ICJSNormalizedStackAreaChartProps {
     clientWidth?: number;
     clientHeight?: number;
     colorBank?: string[];
+    addLocalFilterFromLib?: (clickedLegendData: any) => void;
 }
 /**
  * Chart.js 100% normalized stacked area chart.

package/dist/Components/Charts/ChartJS/charts/CJSNormalizedStackColumnChart.d.ts

@@ -6,6 +6,7 @@ interface ICJSNormalizedStackColumnChartProps {
     clientWidth?: number;
     clientHeight?: number;
     colorBank?: string[];
+    addLocalFilterFromLib?: (clickedLegendData: any) => void;
 }
 /**
  * Chart.js 100% normalized stacked vertical bar chart.

package/dist/Components/Charts/ChartJS/charts/CJSNormalizedStackHorizontalBarChart.d.ts

@@ -6,6 +6,7 @@ interface ICJSNormalizedStackHorizontalBarChartProps {
     clientWidth?: number;
     clientHeight?: number;
     colorBank?: string[];
+    addLocalFilterFromLib?: (clickedLegendData: any) => void;
 }
 /**
  * Chart.js 100% normalized stacked horizontal bar chart.

package/dist/Components/Charts/ChartJS/charts/CJSNormalizedStackLineChart.d.ts

@@ -6,6 +6,7 @@ interface ICJSNormalizedStackLineChartProps {
     clientWidth?: number;
     clientHeight?: number;
     colorBank?: string[];
+    addLocalFilterFromLib?: (clickedLegendData: any) => void;
 }
 /**
  * Chart.js 100% normalized stacked line chart.

package/dist/Components/Charts/ChartJS/charts/CJSPieChart.d.ts

@@ -7,6 +7,7 @@ interface ICJSPieChartProps {
     clientHeight: number;
     /** Active theme colour bank from the host application. Falls back to default palette. */
     colorBank?: string[];
+    addLocalFilterFromLib?: (clickedLegendData: any) => void;
 }
 /**
  * Chart.js pie chart.

package/dist/Components/Charts/ChartJS/charts/CJSPolarAreaChart.d.ts

@@ -7,6 +7,7 @@ interface ICJSPolarAreaChartProps {
     clientHeight: number;
     /** Active theme colour bank from the host application. Falls back to default palette. */
     colorBank?: string[];
+    addLocalFilterFromLib?: (clickedLegendData: any) => void;
 }
 /**
  * Chart.js polar area chart.

package/dist/Components/Charts/ChartJS/core/ChartJSOptionsMapper.d.ts

@@ -6,4 +6,4 @@ import type { TCJSChartType } from "./ChartJSDataTransformer";
  * All colours, fonts, and visibility flags are derived from formatOptions so the
  * CJS charts match the styling configured in the host application's right pane.
  */
-export declare function mapFormatOptionsToChartJS(formatOptions: TDefaultChartFormatOptionsType, chartType: TCJSChartType, hasSecondaryAxis?: boolean): ChartOptions;
+export declare function mapFormatOptionsToChartJS(formatOptions: TDefaultChartFormatOptionsType, chartType: TCJSChartType, hasSecondaryAxis?: boolean, addLocalFilterFromLib?: (clickedLegendData: any) => void, legendList?: any[]): ChartOptions;

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

@@ -58123,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 = {
@@ -58150,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 ----
@@ -73551,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]
@@ -73563,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 ??= {};
@@ -73592,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]
@@ -73603,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 ??= {};
@@ -73633,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]
@@ -73644,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 ??= {};
@@ -73671,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]
@@ -73682,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 ??= {};
@@ -73708,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(
@@ -73735,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}%`;
@@ -73793,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(
@@ -73868,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;
@@ -73917,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]
@@ -73928,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 ??= {};
@@ -73959,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]
@@ -73970,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 ??= {};
@@ -74002,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]
@@ -74013,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;
@@ -74042,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]
@@ -74053,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;

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

@@ -58126,9 +58126,14 @@
     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 = {
@@ -58153,6 +58158,21 @@
             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 ----
@@ -73554,9 +73574,14 @@ ${formattedValue}` : formattedValue;
     clientWidth = 0,
     clientHeight = 0,
     isChartStacked,
-    colorBank
+    colorBank,
     //= CJS_DEFAULT_COLORS,
+    addLocalFilterFromLib
   }) => {
+    const legendList = require$$0$1.useMemo(
+      () => data.ChartData?.map((s2) => s2.properties),
+      [data]
+    );
     const hasSecondaryAxis = require$$0$1.useMemo(
       () => data.ChartData?.some((s2) => s2.Axis === "Secondary" || s2.properties?.axis === "Secondary"),
       [data]
@@ -73566,7 +73591,7 @@ ${formattedValue}` : formattedValue;
       [data, formatOptions, colorBank]
     );
     const chartOptions = require$$0$1.useMemo(() => {
-      const opts = mapFormatOptionsToChartJS(formatOptions, "bar", hasSecondaryAxis);
+      const opts = mapFormatOptionsToChartJS(formatOptions, "bar", hasSecondaryAxis, addLocalFilterFromLib, legendList);
       if (isChartStacked) {
         opts.scales ??= {};
         opts.scales.x ??= {};
@@ -73595,8 +73620,13 @@ ${formattedValue}` : formattedValue;
     clientWidth = 0,
     clientHeight = 0,
     isChartStacked,
-    colorBank = CJS_DEFAULT_COLORS
+    colorBank = CJS_DEFAULT_COLORS,
+    addLocalFilterFromLib
   }) => {
+    const legendList = require$$0$1.useMemo(
+      () => data.ChartData?.map((s2) => s2.properties),
+      [data]
+    );
     const hasSecondaryAxis = require$$0$1.useMemo(
       () => data.ChartData?.some((s2) => s2.Axis === "Secondary" || s2.properties?.axis === "Secondary"),
       [data]
@@ -73606,7 +73636,7 @@ ${formattedValue}` : formattedValue;
       [data, formatOptions, colorBank]
     );
     const chartOptions = require$$0$1.useMemo(() => {
-      const opts = mapFormatOptionsToChartJS(formatOptions, "horizontalBar", hasSecondaryAxis);
+      const opts = mapFormatOptionsToChartJS(formatOptions, "horizontalBar", hasSecondaryAxis, addLocalFilterFromLib, legendList);
       opts.indexAxis = "y";
       if (isChartStacked) {
         opts.scales ??= {};
@@ -73636,8 +73666,13 @@ ${formattedValue}` : formattedValue;
     clientWidth = 0,
     clientHeight = 0,
     isChartStacked,
-    colorBank = CJS_DEFAULT_COLORS
+    colorBank = CJS_DEFAULT_COLORS,
+    addLocalFilterFromLib
   }) => {
+    const legendList = require$$0$1.useMemo(
+      () => data.ChartData?.map((s2) => s2.properties),
+      [data]
+    );
     const hasSecondaryAxis = require$$0$1.useMemo(
       () => data.ChartData?.some((s2) => s2.Axis === "Secondary" || s2.properties?.axis === "Secondary"),
       [data]
@@ -73647,7 +73682,7 @@ ${formattedValue}` : formattedValue;
       [data, formatOptions, colorBank]
     );
     const chartOptions = require$$0$1.useMemo(() => {
-      const opts = mapFormatOptionsToChartJS(formatOptions, "line", hasSecondaryAxis);
+      const opts = mapFormatOptionsToChartJS(formatOptions, "line", hasSecondaryAxis, addLocalFilterFromLib, legendList);
       if (isChartStacked) {
         opts.scales ??= {};
         opts.scales.y ??= {};
@@ -73674,8 +73709,13 @@ ${formattedValue}` : formattedValue;
     clientWidth = 0,
     clientHeight = 0,
     isChartStacked,
-    colorBank = CJS_DEFAULT_COLORS
+    colorBank,
+    addLocalFilterFromLib
   }) => {
+    const legendList = require$$0$1.useMemo(
+      () => data.ChartData?.map((s2) => s2.properties),
+      [data]
+    );
     const hasSecondaryAxis = require$$0$1.useMemo(
       () => data.ChartData?.some((s2) => s2.Axis === "Secondary" || s2.properties?.axis === "Secondary"),
       [data]
@@ -73685,7 +73725,7 @@ ${formattedValue}` : formattedValue;
       [data, formatOptions, colorBank]
     );
     const chartOptions = require$$0$1.useMemo(() => {
-      const opts = mapFormatOptionsToChartJS(formatOptions, "area", hasSecondaryAxis);
+      const opts = mapFormatOptionsToChartJS(formatOptions, "area", hasSecondaryAxis, addLocalFilterFromLib, legendList);
       if (isChartStacked) {
         opts.scales ??= {};
         opts.scales.y ??= {};
@@ -73711,14 +73751,19 @@ ${formattedValue}` : formattedValue;
     formatOptions,
     clientWidth,
     clientHeight,
-    colorBank
+    colorBank,
+    addLocalFilterFromLib
   }) => {
+    const legendList = require$$0$1.useMemo(
+      () => data.LegendList ?? [],
+      [data]
+    );
     const chartData = require$$0$1.useMemo(
       () => transformToChartJSData(data, "pie", formatOptions, colorBank),
       [data, formatOptions, colorBank]
     );
     const chartOptions = require$$0$1.useMemo(
-      () => mapFormatOptionsToChartJS(formatOptions, "pie", false),
+      () => mapFormatOptionsToChartJS(formatOptions, "pie", false, addLocalFilterFromLib, legendList),
       [formatOptions]
     );
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -73738,14 +73783,19 @@ ${formattedValue}` : formattedValue;
     formatOptions,
     clientWidth,
     clientHeight,
-    colorBank = CJS_DEFAULT_COLORS
+    colorBank = CJS_DEFAULT_COLORS,
+    addLocalFilterFromLib
   }) => {
+    const legendList = require$$0$1.useMemo(
+      () => data.LegendList ?? [],
+      [data]
+    );
     const chartData = require$$0$1.useMemo(
       () => transformToChartJSData(data, "doughnut", formatOptions, colorBank),
       [data, formatOptions, colorBank]
     );
     const chartOptions = require$$0$1.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}%`;
@@ -73796,14 +73846,19 @@ ${formattedValue}` : formattedValue;
     formatOptions,
     clientWidth,
     clientHeight,
-    colorBank = CJS_DEFAULT_COLORS
+    colorBank = CJS_DEFAULT_COLORS,
+    addLocalFilterFromLib
   }) => {
+    const legendList = require$$0$1.useMemo(
+      () => data.ChartData?.map((s2) => s2.properties),
+      [data]
+    );
     const chartData = require$$0$1.useMemo(
       () => transformToChartJSData(data, "bubble", formatOptions, colorBank),
       [data, formatOptions, colorBank]
     );
     const chartOptions = require$$0$1.useMemo(
-      () => mapFormatOptionsToChartJS(formatOptions, "bubble", false),
+      () => mapFormatOptionsToChartJS(formatOptions, "bubble", false, addLocalFilterFromLib, legendList),
       [formatOptions]
     );
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -73871,15 +73926,20 @@ ${formattedValue}` : formattedValue;
     formatOptions,
     clientWidth,
     clientHeight,
-    colorBank = CJS_DEFAULT_COLORS
+    colorBank = CJS_DEFAULT_COLORS,
+    addLocalFilterFromLib
   }) => {
+    const legendList = require$$0$1.useMemo(
+      () => data.LegendList ?? [],
+      [data]
+    );
     const chartData = require$$0$1.useMemo(
       // Reuse the circular builder (same shape as pie)
       () => transformToChartJSData(data, "polarArea", formatOptions, colorBank),
       [data, formatOptions, colorBank]
     );
     const chartOptions = require$$0$1.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;
@@ -73920,8 +73980,13 @@ ${formattedValue}` : formattedValue;
     formatOptions,
     clientWidth = 0,
     clientHeight = 0,
-    colorBank = CJS_DEFAULT_COLORS
+    colorBank = CJS_DEFAULT_COLORS,
+    addLocalFilterFromLib
   }) => {
+    const legendList = require$$0$1.useMemo(
+      () => data.ChartData?.map((s2) => s2.properties),
+      [data]
+    );
     const chartData = require$$0$1.useMemo(
       () => transformToNormalizedChartJSData(data, "bar", formatOptions, colorBank),
       [data, formatOptions, colorBank]
@@ -73931,7 +73996,7 @@ ${formattedValue}` : formattedValue;
       [chartData]
     );
     const chartOptions = require$$0$1.useMemo(() => {
-      const opts = mapFormatOptionsToChartJS(formatOptions, "bar", false);
+      const opts = mapFormatOptionsToChartJS(formatOptions, "bar", false, addLocalFilterFromLib, legendList);
       opts.scales ??= {};
       opts.scales.x ??= {};
       opts.scales.y ??= {};
@@ -73962,8 +74027,13 @@ ${formattedValue}` : formattedValue;
     formatOptions,
     clientWidth = 0,
     clientHeight = 0,
-    colorBank = CJS_DEFAULT_COLORS
+    colorBank = CJS_DEFAULT_COLORS,
+    addLocalFilterFromLib
   }) => {
+    const legendList = require$$0$1.useMemo(
+      () => data.ChartData?.map((s2) => s2.properties),
+      [data]
+    );
     const chartData = require$$0$1.useMemo(
       () => transformToNormalizedChartJSData(data, "horizontalBar", formatOptions, colorBank),
       [data, formatOptions, colorBank]
@@ -73973,7 +74043,7 @@ ${formattedValue}` : formattedValue;
       [chartData]
     );
     const chartOptions = require$$0$1.useMemo(() => {
-      const opts = mapFormatOptionsToChartJS(formatOptions, "horizontalBar", false);
+      const opts = mapFormatOptionsToChartJS(formatOptions, "horizontalBar", false, addLocalFilterFromLib, legendList);
       opts.indexAxis = "y";
       opts.scales ??= {};
       opts.scales.x ??= {};
@@ -74005,8 +74075,13 @@ ${formattedValue}` : formattedValue;
     formatOptions,
     clientWidth = 0,
     clientHeight = 0,
-    colorBank = CJS_DEFAULT_COLORS
+    colorBank = CJS_DEFAULT_COLORS,
+    addLocalFilterFromLib
   }) => {
+    const legendList = require$$0$1.useMemo(
+      () => data.ChartData?.map((s2) => s2.properties),
+      [data]
+    );
     const chartData = require$$0$1.useMemo(
       () => transformToNormalizedChartJSData(data, "line", formatOptions, colorBank),
       [data, formatOptions, colorBank]
@@ -74016,7 +74091,7 @@ ${formattedValue}` : formattedValue;
       [chartData]
     );
     const chartOptions = require$$0$1.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;
@@ -74045,8 +74120,13 @@ ${formattedValue}` : formattedValue;
     formatOptions,
     clientWidth = 0,
     clientHeight = 0,
-    colorBank = CJS_DEFAULT_COLORS
+    colorBank = CJS_DEFAULT_COLORS,
+    addLocalFilterFromLib
   }) => {
+    const legendList = require$$0$1.useMemo(
+      () => data.ChartData?.map((s2) => s2.properties),
+      [data]
+    );
     const chartData = require$$0$1.useMemo(
       () => transformToNormalizedChartJSData(data, "area", formatOptions, colorBank),
       [data, formatOptions, colorBank]
@@ -74056,7 +74136,7 @@ ${formattedValue}` : formattedValue;
       [chartData]
     );
     const chartOptions = require$$0$1.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;

package/package.json

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