@internetstiftelsen/charts 0.10.0 → 0.11.0

package/dist/gauge-chart.js

@@ -1,7 +1,10 @@
-import { arc, easeBounceOut, easeCubicIn, easeCubicInOut, easeCubicOut, easeElasticOut, easeLinear, interpolateNumber, select, } from 'd3';
-import { BaseChart, } from './base-chart.js';
+import { arc, easeBounceOut, easeCubicIn, easeCubicInOut, easeCubicOut, easeElasticOut, easeLinear, interpolateNumber, } from 'd3';
 import { DEFAULT_COLOR_PALETTE } from './theme.js';
 import { ChartValidator } from './validation.js';
+import { RadialChartBase } from './radial-chart-base.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;
@@ -46,8 +49,6 @@ const DEFAULT_PROGRESS_RADIUS_INSET = 2;
 const MIN_PROGRESS_BAND_THICKNESS = 1;
 const DEFAULT_HALF_CIRCLE_VALUE_TEXT_Y = 32;
 const DEFAULT_FULL_CIRCLE_VALUE_TEXT_MIN_Y = 22;
-const TOOLTIP_OFFSET_PX = 12;
-const EDGE_MARGIN_PX = 10;
 const GAUGE_ANIMATION_EASING_PRESETS = {
     linear: easeLinear,
     'ease-in': easeCubicIn,
@@ -62,7 +63,7 @@ const DUMMY_ARC_DATUM = {
     startAngle: 0,
     endAngle: 0,
 };
-export class GaugeChart extends BaseChart {
+export class GaugeChart extends RadialChartBase {
     constructor(config) {
         super(config);
         Object.defineProperty(this, "configuredValue", {
@@ -251,32 +252,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 +282,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 +362,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 +435,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 +497,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 +555,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 +570,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 +589,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 +600,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 +614,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) {
@@ -726,34 +784,8 @@ export class GaugeChart extends BaseChart {
     renderChart({ svg, plotGroup, plotArea, }) {
         svg.attr('role', 'img').attr('aria-label', this.buildAriaLabel());
         this.renderTitle(svg);
-        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));
+        this.initializeTooltip();
+        const { centerX, centerY, innerRadius, outerRadius } = this.resolveGaugeGeometry(plotArea);
         const gaugeGroup = plotGroup
             .append('g')
             .attr('class', 'gauge')
@@ -761,20 +793,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 +871,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) {
@@ -1180,39 +1272,15 @@ export class GaugeChart extends BaseChart {
             .style('pointer-events', 'all')
             .style('cursor', 'pointer')
             .on('mouseenter', (event) => {
-            const tooltipDiv = this.resolveTooltipDiv();
-            if (!tooltipDiv) {
-                return;
-            }
-            tooltipDiv
-                .style('visibility', 'visible')
-                .html(this.buildTooltipContent(progressColor));
-            this.positionTooltip(event, tooltipDiv);
+            this.showTooltipFromPointer(event, this.buildTooltipContent(progressColor));
         })
             .on('mousemove', (event) => {
-            const tooltipDiv = this.resolveTooltipDiv();
-            if (!tooltipDiv) {
-                return;
-            }
-            tooltipDiv
-                .style('visibility', 'visible')
-                .html(this.buildTooltipContent(progressColor));
-            this.positionTooltip(event, tooltipDiv);
+            this.showTooltipFromPointer(event, this.buildTooltipContent(progressColor));
         })
             .on('mouseleave', () => {
-            const tooltipDiv = this.resolveTooltipDiv();
-            if (!tooltipDiv) {
-                return;
-            }
-            tooltipDiv.style('visibility', 'hidden');
+            this.hideTooltip();
         });
     }
-    resolveTooltipDiv() {
-        if (!this.tooltip) {
-            return null;
-        }
-        return select(`#${this.tooltip.id}`);
-    }
     buildTooltipContent(progressColor) {
         const payload = {
             value: this.value,
@@ -1242,24 +1310,6 @@ export class GaugeChart extends BaseChart {
         }
         return content;
     }
-    positionTooltip(event, tooltipDiv) {
-        const node = tooltipDiv.node();
-        if (!node) {
-            return;
-        }
-        const rect = node.getBoundingClientRect();
-        let x = event.pageX + TOOLTIP_OFFSET_PX;
-        let y = event.pageY - rect.height / 2;
-        if (x + rect.width > window.innerWidth - EDGE_MARGIN_PX) {
-            x = event.pageX - rect.width - TOOLTIP_OFFSET_PX;
-        }
-        x = Math.max(EDGE_MARGIN_PX, x);
-        y = Math.max(EDGE_MARGIN_PX, Math.min(y, window.innerHeight +
-            window.scrollY -
-            rect.height -
-            EDGE_MARGIN_PX));
-        tooltipDiv.style('left', `${x}px`).style('top', `${y}px`);
-    }
     getLegendSeries() {
         return this.segments.map((segment) => {
             return {

package/dist/lazy-mount.d.ts

@@ -0,0 +1,13 @@
+export type LazyMountableChart = {
+    destroy: () => void;
+};
+export type LazyChartFactory<TChart extends LazyMountableChart> = (container: HTMLElement) => TChart | Promise<TChart>;
+export type LazyChartMountOptions = Pick<IntersectionObserverInit, 'root' | 'rootMargin' | 'threshold'> & {
+    onError?: (error: unknown) => void;
+};
+export type LazyChartMountHandle<TChart extends LazyMountableChart> = {
+    load: () => Promise<TChart | null>;
+    destroy: () => void;
+    getChart: () => TChart | null;
+};
+export declare function mountChartWhenVisible<TChart extends LazyMountableChart>(target: string | HTMLElement, factory: LazyChartFactory<TChart>, options?: LazyChartMountOptions): LazyChartMountHandle<TChart>;