@internetstiftelsen/charts 0.9.2 → 0.10.1

package/dist/gauge-chart.js

@@ -2,6 +2,9 @@ import { arc, easeBounceOut, easeCubicIn, easeCubicInOut, easeCubicOut, easeElas
 import { BaseChart, } from './base-chart.js';
 import { DEFAULT_COLOR_PALETTE } from './theme.js';
 import { ChartValidator } from './validation.js';
+function resolveDefault(value, fallback) {
+    return value === undefined ? fallback : value;
+}
 const DEFAULT_START_ANGLE = -Math.PI * 0.75;
 const DEFAULT_END_ANGLE = Math.PI * 0.75;
 const DEFAULT_HALF_START_ANGLE = -Math.PI / 2;
@@ -251,32 +254,27 @@ export class GaugeChart extends BaseChart {
             }
         });
         const gauge = config.gauge ?? {};
-        this.configuredValue = gauge.value;
-        this.configuredTargetValue = gauge.targetValue;
-        this.configuredSegments = gauge.segments ?? [];
-        this.valueKey = config.valueKey ?? DEFAULT_VALUE_KEY;
-        this.targetValueKey = config.targetValueKey;
-        this.minValue = gauge.min ?? DEFAULT_MIN_VALUE;
-        this.maxValue = gauge.max ?? DEFAULT_MAX_VALUE;
+        const resolvedGauge = this.resolveGaugeConstructorValues(config, gauge);
+        this.configuredValue = resolvedGauge.configuredValue;
+        this.configuredTargetValue = resolvedGauge.configuredTargetValue;
+        this.configuredSegments = resolvedGauge.configuredSegments;
+        this.valueKey = resolvedGauge.valueKey;
+        this.targetValueKey = resolvedGauge.targetValueKey;
+        this.minValue = resolvedGauge.minValue;
+        this.maxValue = resolvedGauge.maxValue;
         this.animation = this.normalizeAnimationConfig(gauge.animate);
-        this.halfCircle = gauge.halfCircle ?? DEFAULT_HALF_CIRCLE;
-        this.startAngle =
-            gauge.startAngle ??
-                (this.halfCircle ? DEFAULT_HALF_START_ANGLE : DEFAULT_START_ANGLE);
-        this.endAngle =
-            gauge.endAngle ??
-                (this.halfCircle ? DEFAULT_HALF_END_ANGLE : DEFAULT_END_ANGLE);
-        this.innerRadiusRatio = gauge.innerRadius ?? DEFAULT_INNER_RADIUS_RATIO;
-        this.thickness = gauge.thickness ?? null;
-        this.cornerRadius = gauge.cornerRadius ?? DEFAULT_CORNER_RADIUS;
-        this.trackColor = gauge.trackColor ?? DEFAULT_TRACK_COLOR;
-        this.progressColor =
-            gauge.progressColor ??
-                this.getThemePaletteColor(DEFAULT_THEME_PALETTE_INDEX);
-        this.targetColor = gauge.targetColor ?? DEFAULT_TARGET_COLOR;
-        this.segmentStyle = gauge.segmentStyle ?? DEFAULT_SEGMENT_STYLE;
-        this.valueFormatter = gauge.valueFormatter ?? this.defaultFormat;
-        this.showValue = gauge.showValue ?? DEFAULT_SHOW_VALUE;
+        this.halfCircle = resolvedGauge.halfCircle;
+        this.startAngle = resolvedGauge.startAngle;
+        this.endAngle = resolvedGauge.endAngle;
+        this.innerRadiusRatio = resolvedGauge.innerRadiusRatio;
+        this.thickness = resolvedGauge.thickness;
+        this.cornerRadius = resolvedGauge.cornerRadius;
+        this.trackColor = resolvedGauge.trackColor;
+        this.progressColor = resolvedGauge.progressColor;
+        this.targetColor = resolvedGauge.targetColor;
+        this.segmentStyle = resolvedGauge.segmentStyle;
+        this.valueFormatter = resolvedGauge.valueFormatter;
+        this.showValue = resolvedGauge.showValue;
         this.needle = this.normalizeNeedleConfig(gauge.needle);
         this.marker = this.normalizeMarkerConfig(gauge.marker, !this.needle.show);
         this.ticks = this.normalizeTickConfig(gauge.ticks);
@@ -286,6 +284,30 @@ export class GaugeChart extends BaseChart {
         this.segments = this.prepareSegments();
         this.initializeDataState();
     }
+    resolveGaugeConstructorValues(config, gauge) {
+        const halfCircle = resolveDefault(gauge.halfCircle, DEFAULT_HALF_CIRCLE);
+        return {
+            configuredValue: gauge.value,
+            configuredTargetValue: gauge.targetValue,
+            configuredSegments: resolveDefault(gauge.segments, []),
+            valueKey: resolveDefault(config.valueKey, DEFAULT_VALUE_KEY),
+            targetValueKey: config.targetValueKey,
+            minValue: resolveDefault(gauge.min, DEFAULT_MIN_VALUE),
+            maxValue: resolveDefault(gauge.max, DEFAULT_MAX_VALUE),
+            halfCircle,
+            startAngle: resolveDefault(gauge.startAngle, halfCircle ? DEFAULT_HALF_START_ANGLE : DEFAULT_START_ANGLE),
+            endAngle: resolveDefault(gauge.endAngle, halfCircle ? DEFAULT_HALF_END_ANGLE : DEFAULT_END_ANGLE),
+            innerRadiusRatio: resolveDefault(gauge.innerRadius, DEFAULT_INNER_RADIUS_RATIO),
+            thickness: resolveDefault(gauge.thickness, null),
+            cornerRadius: resolveDefault(gauge.cornerRadius, DEFAULT_CORNER_RADIUS),
+            trackColor: resolveDefault(gauge.trackColor, DEFAULT_TRACK_COLOR),
+            progressColor: resolveDefault(gauge.progressColor, this.getThemePaletteColor(DEFAULT_THEME_PALETTE_INDEX)),
+            targetColor: resolveDefault(gauge.targetColor, DEFAULT_TARGET_COLOR),
+            segmentStyle: resolveDefault(gauge.segmentStyle, DEFAULT_SEGMENT_STYLE),
+            valueFormatter: resolveDefault(gauge.valueFormatter, this.defaultFormat),
+            showValue: resolveDefault(gauge.showValue, DEFAULT_SHOW_VALUE),
+        };
+    }
     normalizeNeedleConfig(config) {
         if (config === false) {
             return {
@@ -342,14 +364,24 @@ export class GaugeChart extends BaseChart {
         return palette[index % palette.length];
     }
     normalizeTickConfig(config) {
+        const resolvedConfig = {
+            count: DEFAULT_TICK_COUNT,
+            show: DEFAULT_TICKS_SHOW,
+            showLines: DEFAULT_TICKS_SHOW_LINES,
+            showLabels: DEFAULT_TICKS_SHOW_LABELS,
+            size: DEFAULT_TICK_SIZE,
+            labelOffset: DEFAULT_TICK_LABEL_OFFSET,
+            formatter: this.defaultFormat,
+            ...config,
+        };
         return {
-            count: config?.count ?? DEFAULT_TICK_COUNT,
-            show: config?.show ?? DEFAULT_TICKS_SHOW,
-            showLines: config?.showLines ?? DEFAULT_TICKS_SHOW_LINES,
-            showLabels: config?.showLabels ?? DEFAULT_TICKS_SHOW_LABELS,
-            size: config?.size ?? DEFAULT_TICK_SIZE,
-            labelOffset: config?.labelOffset ?? DEFAULT_TICK_LABEL_OFFSET,
-            formatter: config?.formatter ?? this.defaultFormat,
+            count: resolvedConfig.count,
+            show: resolvedConfig.show,
+            showLines: resolvedConfig.showLines,
+            showLabels: resolvedConfig.showLabels,
+            size: resolvedConfig.size,
+            labelOffset: resolvedConfig.labelOffset,
+            formatter: resolvedConfig.formatter,
         };
     }
     normalizeAnimationConfig(config) {
@@ -405,35 +437,51 @@ export class GaugeChart extends BaseChart {
         if (tokens.length < 2) {
             return null;
         }
-        const rawStops = tokens.map((token) => {
-            const parts = token.split(/\s+/).filter(Boolean);
-            if (parts.length === 0 || parts.length > 2) {
-                return null;
-            }
-            const value = Number(parts[0]);
-            if (!Number.isFinite(value)) {
-                return null;
-            }
-            if (parts.length === 1) {
-                return { value, position: undefined };
-            }
-            const percentageToken = parts[1];
-            if (!percentageToken.endsWith('%')) {
-                return null;
-            }
-            const percentageValue = Number(percentageToken.slice(0, -1));
-            if (!Number.isFinite(percentageValue)) {
-                return null;
-            }
+        const rawStops = tokens.map((token) => this.parseLinearEasingStop(token));
+        if (rawStops.some((stop) => stop === null)) {
+            return null;
+        }
+        const stops = rawStops;
+        const positions = this.resolveLinearEasingPositions(stops);
+        if (!positions) {
+            return null;
+        }
+        const easingPoints = stops.map((stop, index) => {
             return {
-                value,
-                position: percentageValue / 100,
+                value: stop.value,
+                position: positions[index],
             };
         });
-        if (rawStops.some((stop) => stop === null)) {
+        return (progress) => {
+            return this.interpolateLinearEasing(progress, easingPoints);
+        };
+    }
+    parseLinearEasingStop(token) {
+        const parts = token.split(/\s+/).filter(Boolean);
+        if (parts.length === 0 || parts.length > 2) {
             return null;
         }
-        const stops = rawStops;
+        const value = Number(parts[0]);
+        if (!Number.isFinite(value)) {
+            return null;
+        }
+        if (parts.length === 1) {
+            return { value, position: undefined };
+        }
+        const percentageToken = parts[1];
+        if (!percentageToken.endsWith('%')) {
+            return null;
+        }
+        const percentageValue = Number(percentageToken.slice(0, -1));
+        if (!Number.isFinite(percentageValue)) {
+            return null;
+        }
+        return {
+            value,
+            position: percentageValue / 100,
+        };
+    }
+    resolveLinearEasingPositions(stops) {
         const positions = stops.map((stop) => stop.position);
         if (positions[0] === undefined) {
             positions[0] = 0;
@@ -451,47 +499,44 @@ export class GaugeChart extends BaseChart {
             if (currentPosition < previousPosition) {
                 return null;
             }
-            const missingCount = currentIndex - previousDefinedIndex - 1;
-            if (missingCount > 0) {
-                for (let missingIndex = 1; missingIndex <= missingCount; missingIndex += 1) {
-                    const ratio = missingIndex / (missingCount + 1);
-                    positions[previousDefinedIndex + missingIndex] =
-                        previousPosition +
-                            (currentPosition - previousPosition) * ratio;
-                }
-            }
+            this.fillMissingLinearEasingPositions(positions, previousDefinedIndex, currentIndex);
             previousDefinedIndex = currentIndex;
         }
-        const easingPoints = stops.map((stop, index) => {
-            return {
-                value: stop.value,
-                position: positions[index],
-            };
-        });
-        return (progress) => {
-            const clamped = Math.max(0, Math.min(1, progress));
-            if (clamped <= easingPoints[0].position) {
-                return easingPoints[0].value;
-            }
-            const lastPoint = easingPoints[easingPoints.length - 1];
-            if (clamped >= lastPoint.position) {
-                return lastPoint.value;
+        return positions;
+    }
+    fillMissingLinearEasingPositions(positions, previousDefinedIndex, currentIndex) {
+        const previousPosition = positions[previousDefinedIndex];
+        const currentPosition = positions[currentIndex];
+        const missingCount = currentIndex - previousDefinedIndex - 1;
+        for (let missingIndex = 1; missingIndex <= missingCount; missingIndex += 1) {
+            const ratio = missingIndex / (missingCount + 1);
+            positions[previousDefinedIndex + missingIndex] =
+                previousPosition + (currentPosition - previousPosition) * ratio;
+        }
+    }
+    interpolateLinearEasing(progress, easingPoints) {
+        const clamped = Math.max(0, Math.min(1, progress));
+        if (clamped <= easingPoints[0].position) {
+            return easingPoints[0].value;
+        }
+        const lastPoint = easingPoints[easingPoints.length - 1];
+        if (clamped >= lastPoint.position) {
+            return lastPoint.value;
+        }
+        for (let index = 0; index < easingPoints.length - 1; index += 1) {
+            const left = easingPoints[index];
+            const right = easingPoints[index + 1];
+            if (clamped > right.position) {
+                continue;
             }
-            for (let index = 0; index < easingPoints.length - 1; index += 1) {
-                const left = easingPoints[index];
-                const right = easingPoints[index + 1];
-                if (clamped > right.position) {
-                    continue;
-                }
-                const span = right.position - left.position;
-                if (span <= 0) {
-                    return right.value;
-                }
-                const localProgress = (clamped - left.position) / span;
-                return left.value + (right.value - left.value) * localProgress;
+            const span = right.position - left.position;
+            if (span <= 0) {
+                return right.value;
             }
-            return lastPoint.value;
-        };
+            const localProgress = (clamped - left.position) / span;
+            return left.value + (right.value - left.value) * localProgress;
+        }
+        return lastPoint.value;
     }
     normalizeTickLabelStyle(config) {
         return {
@@ -512,6 +557,14 @@ export class GaugeChart extends BaseChart {
         };
     }
     validateGaugeConfig() {
+        this.validateGaugeRange();
+        this.validateGaugeGeometry();
+        this.validateTickSettings();
+        this.validateIndicatorSettings();
+        this.validateAnimationSettings();
+        this.validateSegments(this.configuredSegments);
+    }
+    validateGaugeRange() {
         if (!Number.isFinite(this.minValue) ||
             !Number.isFinite(this.maxValue)) {
             throw new Error(`GaugeChart: gauge.min and gauge.max must be finite numbers, received min='${this.minValue}' and max='${this.maxValue}'`);
@@ -519,6 +572,8 @@ export class GaugeChart extends BaseChart {
         if (this.minValue >= this.maxValue) {
             throw new Error(`GaugeChart: gauge.min must be less than gauge.max, received min='${this.minValue}' and max='${this.maxValue}'`);
         }
+    }
+    validateGaugeGeometry() {
         if (!Number.isFinite(this.startAngle) ||
             !Number.isFinite(this.endAngle)) {
             throw new Error(`GaugeChart: gauge.startAngle and gauge.endAngle must be finite numbers, received startAngle='${this.startAngle}' and endAngle='${this.endAngle}'`);
@@ -536,6 +591,8 @@ export class GaugeChart extends BaseChart {
             (!Number.isFinite(this.thickness) || this.thickness <= 0)) {
             throw new Error(`GaugeChart: gauge.thickness must be > 0 when provided, received '${this.thickness}'`);
         }
+    }
+    validateTickSettings() {
         if (!Number.isInteger(this.ticks.count) || this.ticks.count < 0) {
             throw new Error(`GaugeChart: gauge.ticks.count must be a non-negative integer, received '${this.ticks.count}'`);
         }
@@ -545,6 +602,8 @@ export class GaugeChart extends BaseChart {
         if (this.ticks.labelOffset < 0) {
             throw new Error(`GaugeChart: gauge.ticks.labelOffset must be >= 0, received '${this.ticks.labelOffset}'`);
         }
+    }
+    validateIndicatorSettings() {
         if (this.needle.width <= 0) {
             throw new Error(`GaugeChart: gauge.needle.width must be > 0, received '${this.needle.width}'`);
         }
@@ -557,11 +616,12 @@ export class GaugeChart extends BaseChart {
         if (this.marker.width <= 0) {
             throw new Error(`GaugeChart: gauge.marker.width must be > 0, received '${this.marker.width}'`);
         }
+    }
+    validateAnimationSettings() {
         if (!Number.isFinite(this.animation.duration) ||
             this.animation.duration < 0) {
             throw new Error(`GaugeChart: gauge.animate.duration must be >= 0, received '${this.animation.duration}'`);
         }
-        this.validateSegments(this.configuredSegments);
     }
     validateSegments(segments) {
         if (segments.length === 0) {
@@ -675,7 +735,7 @@ export class GaugeChart extends BaseChart {
         return this.getBaseExportComponents({
             title: true,
             tooltip: true,
-            legend: this.legend?.isInlineMode(),
+            legend: this.shouldIncludeLegendInExport(),
         });
     }
     update(data) {
@@ -729,31 +789,7 @@ export class GaugeChart extends BaseChart {
         if (this.tooltip) {
             this.tooltip.initialize(this.renderTheme);
         }
-        const labelAllowance = this.ticks.show && this.ticks.showLabels
-            ? this.ticks.size + this.ticks.labelOffset + 14
-            : this.ticks.show && this.ticks.showLines
-                ? this.ticks.size + 10
-                : 8;
-        let outerRadius;
-        const centerX = plotArea.left + plotArea.width / 2;
-        let centerY;
-        if (this.halfCircle) {
-            const valueSpace = this.showValue
-                ? DEFAULT_HALF_CIRCLE_VALUE_SPACE_WITH_LABEL
-                : DEFAULT_HALF_CIRCLE_VALUE_SPACE_WITHOUT_LABEL;
-            const maxHorizontalRadius = plotArea.width / 2 - labelAllowance - 8;
-            const maxVerticalRadius = plotArea.height - valueSpace - labelAllowance - 8;
-            outerRadius = Math.max(24, Math.min(maxHorizontalRadius, maxVerticalRadius));
-            centerY = plotArea.top + labelAllowance + outerRadius + 4;
-        }
-        else {
-            const maxRadius = Math.min(plotArea.width, plotArea.height) / 2;
-            outerRadius = Math.max(24, maxRadius - labelAllowance);
-            centerY = plotArea.top + plotArea.height / 2;
-        }
-        const innerRadius = this.thickness !== null
-            ? Math.max(0, outerRadius - Math.min(this.thickness, outerRadius - 1))
-            : Math.max(8, Math.min(outerRadius - 4, outerRadius * this.innerRadiusRatio));
+        const { centerX, centerY, innerRadius, outerRadius } = this.resolveGaugeGeometry(plotArea);
         const gaugeGroup = plotGroup
             .append('g')
             .attr('class', 'gauge')
@@ -761,20 +797,76 @@ export class GaugeChart extends BaseChart {
         const animationStartValue = this.resolveAnimationStartValue();
         this.renderTrack(gaugeGroup, innerRadius, outerRadius);
         const visibleSegments = this.getVisibleSegments();
+        const progressColor = this.resolveProgressColor(visibleSegments);
+        this.renderSegmentsOrProgress(gaugeGroup, visibleSegments, innerRadius, outerRadius, progressColor, animationStartValue);
+        this.renderGaugeLabels(gaugeGroup, outerRadius, animationStartValue);
+        this.renderGaugeIndicators(gaugeGroup, innerRadius, outerRadius, animationStartValue);
+        this.attachTooltipIfEnabled(gaugeGroup, innerRadius, outerRadius, progressColor);
+        this.renderInlineLegend(svg);
+    }
+    resolveGaugeGeometry(plotArea) {
+        const labelAllowance = this.resolveLabelAllowance();
+        const centerX = plotArea.left + plotArea.width / 2;
+        const { centerY, outerRadius } = this.halfCircle
+            ? this.resolveHalfCircleGeometry(plotArea, labelAllowance)
+            : this.resolveFullCircleGeometry(plotArea, labelAllowance);
+        return {
+            centerX,
+            centerY,
+            outerRadius,
+            innerRadius: this.resolveInnerRadius(outerRadius),
+        };
+    }
+    resolveLabelAllowance() {
+        if (this.ticks.show && this.ticks.showLabels) {
+            return this.ticks.size + this.ticks.labelOffset + 14;
+        }
+        if (this.ticks.show && this.ticks.showLines) {
+            return this.ticks.size + 10;
+        }
+        return 8;
+    }
+    resolveHalfCircleGeometry(plotArea, labelAllowance) {
+        const valueSpace = this.showValue
+            ? DEFAULT_HALF_CIRCLE_VALUE_SPACE_WITH_LABEL
+            : DEFAULT_HALF_CIRCLE_VALUE_SPACE_WITHOUT_LABEL;
+        const maxHorizontalRadius = plotArea.width / 2 - labelAllowance - 8;
+        const maxVerticalRadius = plotArea.height - valueSpace - labelAllowance - 8;
+        const outerRadius = Math.max(24, Math.min(maxHorizontalRadius, maxVerticalRadius));
+        return {
+            outerRadius,
+            centerY: plotArea.top + labelAllowance + outerRadius + 4,
+        };
+    }
+    resolveFullCircleGeometry(plotArea, labelAllowance) {
+        const maxRadius = Math.min(plotArea.width, plotArea.height) / 2;
+        return {
+            outerRadius: Math.max(24, maxRadius - labelAllowance),
+            centerY: plotArea.top + plotArea.height / 2,
+        };
+    }
+    resolveInnerRadius(outerRadius) {
+        if (this.thickness !== null) {
+            return Math.max(0, outerRadius - Math.min(this.thickness, outerRadius - 1));
+        }
+        return Math.max(8, Math.min(outerRadius - 4, outerRadius * this.innerRadiusRatio));
+    }
+    renderSegmentsOrProgress(gaugeGroup, visibleSegments, innerRadius, outerRadius, progressColor, animationStartValue) {
         if (visibleSegments.length > 0) {
-            if (this.segmentStyle === 'gradient') {
-                this.renderGradientSegments(gaugeGroup, visibleSegments, innerRadius, outerRadius);
-            }
-            else {
-                this.renderSegments(gaugeGroup, visibleSegments, innerRadius, outerRadius);
-            }
+            this.renderVisibleSegments(gaugeGroup, visibleSegments, innerRadius, outerRadius);
+            return;
         }
-        const progressColor = this.resolveProgressColor(visibleSegments);
-        const shouldRenderProgress = visibleSegments.length === 0;
-        if (shouldRenderProgress) {
-            const progressRadii = this.getProgressRadii(innerRadius, outerRadius);
-            this.renderProgress(gaugeGroup, progressColor, progressRadii.inner, progressRadii.outer, animationStartValue);
+        const progressRadii = this.getProgressRadii(innerRadius, outerRadius);
+        this.renderProgress(gaugeGroup, progressColor, progressRadii.inner, progressRadii.outer, animationStartValue);
+    }
+    renderVisibleSegments(gaugeGroup, visibleSegments, innerRadius, outerRadius) {
+        if (this.segmentStyle === 'gradient') {
+            this.renderGradientSegments(gaugeGroup, visibleSegments, innerRadius, outerRadius);
+            return;
         }
+        this.renderSegments(gaugeGroup, visibleSegments, innerRadius, outerRadius);
+    }
+    renderGaugeLabels(gaugeGroup, outerRadius, animationStartValue) {
         if (this.ticks.show &&
             this.ticks.count > 0 &&
             (this.ticks.showLines || this.ticks.showLabels)) {
@@ -783,19 +875,23 @@ export class GaugeChart extends BaseChart {
         if (this.showValue) {
             this.renderValueText(gaugeGroup, outerRadius, animationStartValue);
         }
+    }
+    renderGaugeIndicators(gaugeGroup, innerRadius, outerRadius, animationStartValue) {
         if (this.targetValue !== null) {
             this.renderTargetMarker(gaugeGroup, innerRadius, outerRadius);
         }
         if (this.needle.show) {
             this.renderNeedle(gaugeGroup, innerRadius, outerRadius, animationStartValue);
+            return;
         }
-        else if (this.marker.show) {
+        if (this.marker.show) {
             this.renderCurrentValueMarker(gaugeGroup, innerRadius, outerRadius, animationStartValue);
         }
+    }
+    attachTooltipIfEnabled(gaugeGroup, innerRadius, outerRadius, progressColor) {
         if (this.tooltip) {
             this.attachTooltipLayer(gaugeGroup, innerRadius, outerRadius, progressColor);
         }
-        this.renderInlineLegend(svg);
     }
     resolveAnimationStartValue() {
         if (this.lastRenderedValue === null) {

package/dist/legend-state.d.ts

@@ -0,0 +1,19 @@
+export type LegendVisibilityMap = Record<string, boolean>;
+type LegendStateMutationOptions = {
+    silent?: boolean;
+};
+export declare class LegendStateController {
+    private visibilityState;
+    private readonly changeCallbacks;
+    clone(): LegendStateController;
+    hasSeries(dataKey: string): boolean;
+    isSeriesVisible(dataKey: string): boolean;
+    ensureSeries(dataKeys: Iterable<string>, options?: LegendStateMutationOptions): void;
+    setSeriesVisible(dataKey: string, visible: boolean, options?: LegendStateMutationOptions): void;
+    toggleSeries(dataKey: string, options?: LegendStateMutationOptions): void;
+    setVisibilityMap(visibility: LegendVisibilityMap, options?: LegendStateMutationOptions): void;
+    subscribe(callback: () => void): () => void;
+    toVisibilityMap(): LegendVisibilityMap;
+    private triggerChange;
+}
+export {};

package/dist/legend-state.js

@@ -0,0 +1,81 @@
+export class LegendStateController {
+    constructor() {
+        Object.defineProperty(this, "visibilityState", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new Map()
+        });
+        Object.defineProperty(this, "changeCallbacks", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new Set()
+        });
+    }
+    clone() {
+        const controller = new LegendStateController();
+        controller.visibilityState = new Map(this.visibilityState);
+        return controller;
+    }
+    hasSeries(dataKey) {
+        return this.visibilityState.has(dataKey);
+    }
+    isSeriesVisible(dataKey) {
+        return this.visibilityState.get(dataKey) ?? true;
+    }
+    ensureSeries(dataKeys, options) {
+        let changed = false;
+        for (const dataKey of dataKeys) {
+            if (this.visibilityState.has(dataKey)) {
+                continue;
+            }
+            this.visibilityState.set(dataKey, true);
+            changed = true;
+        }
+        if (changed && !options?.silent) {
+            this.triggerChange();
+        }
+    }
+    setSeriesVisible(dataKey, visible, options) {
+        const currentValue = this.visibilityState.get(dataKey);
+        if (currentValue === visible) {
+            return;
+        }
+        this.visibilityState.set(dataKey, visible);
+        if (!options?.silent) {
+            this.triggerChange();
+        }
+    }
+    toggleSeries(dataKey, options) {
+        this.setSeriesVisible(dataKey, !this.isSeriesVisible(dataKey), options);
+    }
+    setVisibilityMap(visibility, options) {
+        let changed = false;
+        Object.entries(visibility).forEach(([dataKey, visible]) => {
+            const currentValue = this.visibilityState.get(dataKey);
+            if (currentValue === visible) {
+                return;
+            }
+            this.visibilityState.set(dataKey, visible);
+            changed = true;
+        });
+        if (changed && !options?.silent) {
+            this.triggerChange();
+        }
+    }
+    subscribe(callback) {
+        this.changeCallbacks.add(callback);
+        return () => {
+            this.changeCallbacks.delete(callback);
+        };
+    }
+    toVisibilityMap() {
+        return Object.fromEntries(this.visibilityState.entries());
+    }
+    triggerChange() {
+        this.changeCallbacks.forEach((callback) => {
+            callback();
+        });
+    }
+}

package/dist/legend.d.ts

@@ -1,6 +1,7 @@
 import { type Selection } from 'd3';
 import type { LegendConfig, ChartTheme, LegendSeries, ExportHooks, LegendConfigBase, LegendMode } from './types.js';
 import type { LayoutAwareComponent, ComponentSpace } from './chart-interface.js';
+import { LegendStateController } from './legend-state.js';
 export declare class Legend implements LayoutAwareComponent<LegendConfigBase> {
     readonly type: "legend";
     mode: LegendMode;
@@ -13,7 +14,8 @@ export declare class Legend implements LayoutAwareComponent<LegendConfigBase> {
     private readonly itemSpacingX?;
     private readonly itemSpacingY?;
     private readonly gapBetweenBoxAndText;
-    private visibilityState;
+    private stateController;
+    private stateControllerCleanup;
     private onToggleCallback?;
     private onChangeCallbacks;
     private estimatedLayout;
@@ -22,6 +24,7 @@ export declare class Legend implements LayoutAwareComponent<LegendConfigBase> {
     getExportConfig(): LegendConfigBase;
     createExportComponent(override?: Partial<LegendConfigBase>): LayoutAwareComponent<LegendConfigBase>;
     setToggleCallback(callback: () => void): void;
+    setStateController(controller: LegendStateController): void;
     isInlineMode(): boolean;
     isDisconnectedMode(): boolean;
     isHiddenMode(): boolean;
@@ -50,5 +53,5 @@ export declare class Legend implements LayoutAwareComponent<LegendConfigBase> {
     private positionRows;
     private getLayoutSignature;
     private getFallbackRowHeight;
-    private triggerChange;
+    private bindStateController;
 }