@internetstiftelsen/charts 0.5.1 → 0.6.0

package/gauge-chart.js

@@ -0,0 +1,1041 @@
+import { arc, select } from 'd3';
+import { BaseChart } from './base-chart.js';
+import { DEFAULT_COLOR_PALETTE } from './theme.js';
+import { ChartValidator } from './validation.js';
+const DEFAULT_START_ANGLE = -Math.PI * 0.75;
+const DEFAULT_END_ANGLE = Math.PI * 0.75;
+const DEFAULT_HALF_START_ANGLE = -Math.PI / 2;
+const DEFAULT_HALF_END_ANGLE = Math.PI / 2;
+const DEFAULT_VALUE_KEY = 'value';
+const DEFAULT_HALF_CIRCLE = false;
+const DEFAULT_MIN_VALUE = 0;
+const DEFAULT_MAX_VALUE = 100;
+const DEFAULT_INNER_RADIUS_RATIO = 0.68;
+const DEFAULT_CORNER_RADIUS = 4;
+const DEFAULT_TRACK_COLOR = '#e5e7eb';
+const DEFAULT_TARGET_COLOR = '#111827';
+const DEFAULT_SEGMENT_STYLE = 'solid';
+const DEFAULT_SHOW_VALUE = true;
+const DEFAULT_NEEDLE_SHOW = true;
+const DEFAULT_THEME_PALETTE_INDEX = 0;
+const DEFAULT_NEEDLE_WIDTH = 3;
+const DEFAULT_NEEDLE_LENGTH_RATIO = 0.92;
+const DEFAULT_NEEDLE_CAP_RADIUS = 6;
+const DEFAULT_MARKER_WIDTH = 3;
+const DEFAULT_TICK_COUNT = 5;
+const DEFAULT_TICKS_SHOW = true;
+const DEFAULT_TICKS_SHOW_LINES = true;
+const DEFAULT_TICKS_SHOW_LABELS = true;
+const DEFAULT_TICK_SIZE = 8;
+const DEFAULT_TICK_LABEL_OFFSET = 12;
+const DEFAULT_TICK_LABEL_FONT_SIZE = 11;
+const DEFAULT_TICK_LABEL_FONT_WEIGHT = 'normal';
+const DEFAULT_TICK_LABEL_COLOR = '#4b5563';
+const DEFAULT_VALUE_LABEL_FONT_SIZE = 28;
+const DEFAULT_VALUE_LABEL_FONT_WEIGHT = '700';
+const DEFAULT_VALUE_LABEL_COLOR = '#111827';
+const DEFAULT_HALF_CIRCLE_VALUE_SPACE_WITH_LABEL = 46;
+const DEFAULT_HALF_CIRCLE_VALUE_SPACE_WITHOUT_LABEL = 12;
+const DEFAULT_TICK_LINE_COLOR = '#6b7280';
+const DEFAULT_TICK_LINE_STROKE_WIDTH = 1.5;
+const DEFAULT_TARGET_MARKER_STROKE_WIDTH = 2.5;
+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 DUMMY_ARC_DATUM = {
+    innerRadius: 0,
+    outerRadius: 0,
+    startAngle: 0,
+    endAngle: 0,
+};
+export class GaugeChart extends BaseChart {
+    constructor(config) {
+        super(config);
+        Object.defineProperty(this, "configuredValue", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "configuredTargetValue", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "configuredSegments", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "valueKey", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "targetValueKey", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "minValue", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "maxValue", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "halfCircle", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "startAngle", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "endAngle", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "innerRadiusRatio", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "thickness", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "cornerRadius", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "trackColor", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "progressColor", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "targetColor", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "segmentStyle", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "valueFormatter", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "showValue", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "needle", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "marker", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "ticks", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "tickLabelStyle", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "valueLabelStyle", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "segments", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: []
+        });
+        Object.defineProperty(this, "value", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: 0
+        });
+        Object.defineProperty(this, "targetValue", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "defaultFormat", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (value) => {
+                if (Number.isInteger(value)) {
+                    return String(value);
+                }
+                return value.toFixed(1);
+            }
+        });
+        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;
+        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.needle = this.normalizeNeedleConfig(gauge.needle);
+        this.marker = this.normalizeMarkerConfig(gauge.marker, !this.needle.show);
+        this.ticks = this.normalizeTickConfig(gauge.ticks);
+        this.tickLabelStyle = this.normalizeTickLabelStyle(gauge.ticks?.labelStyle);
+        this.valueLabelStyle = this.normalizeValueLabelStyle(gauge.valueLabelStyle);
+        this.validateGaugeConfig();
+        this.segments = this.prepareSegments();
+        this.refreshResolvedValues();
+    }
+    normalizeNeedleConfig(config) {
+        if (config === false) {
+            return {
+                show: false,
+                color: DEFAULT_TARGET_COLOR,
+                width: DEFAULT_NEEDLE_WIDTH,
+                lengthRatio: DEFAULT_NEEDLE_LENGTH_RATIO,
+                capRadius: DEFAULT_NEEDLE_CAP_RADIUS,
+            };
+        }
+        if (config === true || config === undefined) {
+            return {
+                show: true,
+                color: DEFAULT_TARGET_COLOR,
+                width: DEFAULT_NEEDLE_WIDTH,
+                lengthRatio: DEFAULT_NEEDLE_LENGTH_RATIO,
+                capRadius: DEFAULT_NEEDLE_CAP_RADIUS,
+            };
+        }
+        return {
+            show: config.show ?? DEFAULT_NEEDLE_SHOW,
+            color: config.color ?? DEFAULT_TARGET_COLOR,
+            width: config.width ?? DEFAULT_NEEDLE_WIDTH,
+            lengthRatio: config.lengthRatio ?? DEFAULT_NEEDLE_LENGTH_RATIO,
+            capRadius: config.capRadius ?? DEFAULT_NEEDLE_CAP_RADIUS,
+        };
+    }
+    normalizeMarkerConfig(config, defaultShow) {
+        if (config === false) {
+            return {
+                show: false,
+                color: this.getThemePaletteColor(DEFAULT_THEME_PALETTE_INDEX),
+                width: DEFAULT_MARKER_WIDTH,
+            };
+        }
+        if (config === true || config === undefined) {
+            return {
+                show: defaultShow,
+                color: this.getThemePaletteColor(DEFAULT_THEME_PALETTE_INDEX),
+                width: DEFAULT_MARKER_WIDTH,
+            };
+        }
+        return {
+            show: config.show ?? defaultShow,
+            color: config.color ?? this.getThemePaletteColor(DEFAULT_THEME_PALETTE_INDEX),
+            width: config.width ?? DEFAULT_MARKER_WIDTH,
+        };
+    }
+    getThemePaletteColor(index) {
+        const palette = this.theme.colorPalette.length > 0
+            ? this.theme.colorPalette
+            : DEFAULT_COLOR_PALETTE;
+        return palette[index % palette.length];
+    }
+    normalizeTickConfig(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,
+        };
+    }
+    normalizeTickLabelStyle(config) {
+        return {
+            fontSize: config?.fontSize ?? DEFAULT_TICK_LABEL_FONT_SIZE,
+            fontFamily: config?.fontFamily ?? this.theme.axis.fontFamily,
+            fontWeight: config?.fontWeight ??
+                this.theme.axis.fontWeight ??
+                DEFAULT_TICK_LABEL_FONT_WEIGHT,
+            color: config?.color ?? DEFAULT_TICK_LABEL_COLOR,
+        };
+    }
+    normalizeValueLabelStyle(config) {
+        return {
+            fontSize: config?.fontSize ?? DEFAULT_VALUE_LABEL_FONT_SIZE,
+            fontFamily: config?.fontFamily ?? this.theme.axis.fontFamily,
+            fontWeight: config?.fontWeight ?? DEFAULT_VALUE_LABEL_FONT_WEIGHT,
+            color: config?.color ?? DEFAULT_VALUE_LABEL_COLOR,
+        };
+    }
+    validateGaugeConfig() {
+        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}'`);
+        }
+        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}'`);
+        }
+        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}'`);
+        }
+        if (this.endAngle <= this.startAngle) {
+            throw new Error(`GaugeChart: gauge.endAngle must be greater than gauge.startAngle, received startAngle='${this.startAngle}' and endAngle='${this.endAngle}'`);
+        }
+        if (this.innerRadiusRatio < 0 || this.innerRadiusRatio >= 1) {
+            throw new Error(`GaugeChart: gauge.innerRadius must be between 0 and <1, received '${this.innerRadiusRatio}'`);
+        }
+        if (this.cornerRadius < 0) {
+            throw new Error(`GaugeChart: gauge.cornerRadius must be >= 0, received '${this.cornerRadius}'`);
+        }
+        if (this.thickness !== null &&
+            (!Number.isFinite(this.thickness) || this.thickness <= 0)) {
+            throw new Error(`GaugeChart: gauge.thickness must be > 0 when provided, received '${this.thickness}'`);
+        }
+        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}'`);
+        }
+        if (this.ticks.size < 0) {
+            throw new Error(`GaugeChart: gauge.ticks.size must be >= 0, received '${this.ticks.size}'`);
+        }
+        if (this.ticks.labelOffset < 0) {
+            throw new Error(`GaugeChart: gauge.ticks.labelOffset must be >= 0, received '${this.ticks.labelOffset}'`);
+        }
+        if (this.needle.width <= 0) {
+            throw new Error(`GaugeChart: gauge.needle.width must be > 0, received '${this.needle.width}'`);
+        }
+        if (this.needle.lengthRatio <= 0 || this.needle.lengthRatio > 1.2) {
+            throw new Error(`GaugeChart: gauge.needle.lengthRatio must be > 0 and <= 1.2, received '${this.needle.lengthRatio}'`);
+        }
+        if (this.needle.capRadius < 0) {
+            throw new Error(`GaugeChart: gauge.needle.capRadius must be >= 0, received '${this.needle.capRadius}'`);
+        }
+        if (this.marker.width <= 0) {
+            throw new Error(`GaugeChart: gauge.marker.width must be > 0, received '${this.marker.width}'`);
+        }
+        this.validateSegments(this.configuredSegments);
+    }
+    validateSegments(segments) {
+        if (segments.length === 0) {
+            return;
+        }
+        segments.forEach((segment, index) => {
+            if (!Number.isFinite(segment.from) ||
+                !Number.isFinite(segment.to)) {
+                throw new Error(`GaugeChart: gauge.segments[${index}] must use finite from/to values, received from='${segment.from}' and to='${segment.to}'`);
+            }
+            if (segment.from >= segment.to) {
+                throw new Error(`GaugeChart: gauge.segments[${index}] must have from < to, received from='${segment.from}' and to='${segment.to}'`);
+            }
+            if (segment.from < this.minValue || segment.to > this.maxValue) {
+                throw new Error(`GaugeChart: gauge.segments[${index}] must be within [${this.minValue}, ${this.maxValue}], received from='${segment.from}' and to='${segment.to}'`);
+            }
+        });
+        const sortedSegments = [...segments].sort((left, right) => {
+            return left.from - right.from;
+        });
+        for (let index = 1; index < sortedSegments.length; index += 1) {
+            const previous = sortedSegments[index - 1];
+            const current = sortedSegments[index];
+            if (current.from < previous.to) {
+                throw new Error(`GaugeChart: gauge.segments overlap between [${previous.from}, ${previous.to}] and [${current.from}, ${current.to}]`);
+            }
+        }
+    }
+    refreshResolvedValues() {
+        this.value = this.resolveValue(this.configuredValue);
+        this.targetValue = this.resolveTargetValue(this.configuredTargetValue);
+    }
+    resolveValue(configuredValue) {
+        if (configuredValue !== undefined) {
+            const parsed = this.parseFiniteNumber(configuredValue, 'gauge.value');
+            return this.clampToDomain(parsed, 'value');
+        }
+        ChartValidator.validateDataKey(this.data, this.valueKey, 'GaugeChart');
+        this.warnIfMultipleRows('value');
+        const rawValue = this.data[0][this.valueKey];
+        const parsed = this.parseFiniteNumber(rawValue, `data['${this.valueKey}']`);
+        return this.clampToDomain(parsed, 'value');
+    }
+    resolveTargetValue(configuredTargetValue) {
+        if (configuredTargetValue !== undefined) {
+            const parsed = this.parseFiniteNumber(configuredTargetValue, 'gauge.targetValue');
+            return this.clampToDomain(parsed, 'targetValue');
+        }
+        if (!this.targetValueKey) {
+            return null;
+        }
+        ChartValidator.validateDataKey(this.data, this.targetValueKey, 'GaugeChart');
+        this.warnIfMultipleRows('targetValue');
+        const rawTargetValue = this.data[0][this.targetValueKey];
+        if (rawTargetValue === undefined ||
+            rawTargetValue === null ||
+            rawTargetValue === '') {
+            return null;
+        }
+        const parsed = this.parseFiniteNumber(rawTargetValue, `data['${this.targetValueKey}']`);
+        return this.clampToDomain(parsed, 'targetValue');
+    }
+    warnIfMultipleRows(field) {
+        if (this.data.length <= 1) {
+            return;
+        }
+        ChartValidator.warn(`GaugeChart: received ${this.data.length} rows; using the first row for ${field}`);
+    }
+    parseFiniteNumber(rawValue, fieldLabel) {
+        const parsed = typeof rawValue === 'number'
+            ? rawValue
+            : typeof rawValue === 'string'
+                ? parseFloat(rawValue)
+                : NaN;
+        if (!Number.isFinite(parsed)) {
+            throw new Error(`GaugeChart: ${fieldLabel} must be a finite number, received '${rawValue}'`);
+        }
+        return parsed;
+    }
+    clampToDomain(value, label) {
+        const clamped = Math.min(this.maxValue, Math.max(this.minValue, value));
+        if (clamped !== value) {
+            ChartValidator.warn(`GaugeChart: clamped ${label} from '${value}' to '${clamped}' within [${this.minValue}, ${this.maxValue}]`);
+        }
+        return clamped;
+    }
+    prepareSegments() {
+        if (this.configuredSegments.length === 0) {
+            return [];
+        }
+        const sortedSegments = [...this.configuredSegments].sort((left, right) => {
+            return left.from - right.from;
+        });
+        const labelCount = new Map();
+        return sortedSegments.map((segment, index) => {
+            const baseLabel = segment.label?.trim()
+                ? segment.label.trim()
+                : `${this.defaultFormat(segment.from)}-${this.defaultFormat(segment.to)}`;
+            const existingCount = labelCount.get(baseLabel) ?? 0;
+            labelCount.set(baseLabel, existingCount + 1);
+            return {
+                ...segment,
+                color: segment.color ??
+                    this.getThemePaletteColor(index),
+                legendLabel: existingCount === 0
+                    ? baseLabel
+                    : `${baseLabel} (${existingCount + 1})`,
+            };
+        });
+    }
+    addChild(component) {
+        const type = component.type;
+        if (type === 'tooltip') {
+            this.tooltip = component;
+        }
+        else if (type === 'legend') {
+            this.legend = component;
+            this.legend.setToggleCallback(() => this.update(this.data));
+        }
+        else if (type === 'title') {
+            this.title = component;
+        }
+        return this;
+    }
+    getExportComponents() {
+        const components = [];
+        if (this.title) {
+            components.push(this.title);
+        }
+        if (this.tooltip) {
+            components.push(this.tooltip);
+        }
+        if (this.legend) {
+            components.push(this.legend);
+        }
+        return components;
+    }
+    update(data) {
+        this.data = data;
+        this.refreshResolvedValues();
+        super.update(data);
+    }
+    getLayoutComponents() {
+        const components = [];
+        if (this.title) {
+            components.push(this.title);
+        }
+        if (this.legend) {
+            components.push(this.legend);
+        }
+        return components;
+    }
+    createExportChart() {
+        return new GaugeChart({
+            data: this.data,
+            theme: this.theme,
+            valueKey: this.valueKey,
+            targetValueKey: this.targetValueKey,
+            gauge: {
+                value: this.configuredValue,
+                targetValue: this.configuredTargetValue,
+                min: this.minValue,
+                max: this.maxValue,
+                halfCircle: this.halfCircle,
+                startAngle: this.startAngle,
+                endAngle: this.endAngle,
+                innerRadius: this.innerRadiusRatio,
+                thickness: this.thickness ?? undefined,
+                cornerRadius: this.cornerRadius,
+                trackColor: this.trackColor,
+                progressColor: this.progressColor,
+                targetColor: this.targetColor,
+                segmentStyle: this.segmentStyle,
+                segments: this.configuredSegments,
+                needle: this.needle,
+                marker: this.marker,
+                showValue: this.showValue,
+                valueFormatter: this.valueFormatter,
+                valueLabelStyle: this.valueLabelStyle,
+                ticks: {
+                    ...this.ticks,
+                    labelStyle: this.tickLabelStyle,
+                },
+            },
+        });
+    }
+    renderChart() {
+        if (!this.plotArea || !this.svg || !this.plotGroup) {
+            throw new Error('Plot area not calculated');
+        }
+        this.svg.attr('role', 'img').attr('aria-label', this.buildAriaLabel());
+        if (this.title) {
+            const titlePosition = this.layoutManager.getComponentPosition(this.title);
+            this.title.render(this.svg, this.theme, this.width, titlePosition.x, titlePosition.y);
+        }
+        if (this.tooltip) {
+            this.tooltip.initialize(this.theme);
+        }
+        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 = this.plotArea.left + this.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 = this.plotArea.width / 2 - labelAllowance - 8;
+            const maxVerticalRadius = this.plotArea.height - valueSpace - labelAllowance - 8;
+            outerRadius = Math.max(24, Math.min(maxHorizontalRadius, maxVerticalRadius));
+            centerY = this.plotArea.top + labelAllowance + outerRadius + 4;
+        }
+        else {
+            const maxRadius = Math.min(this.plotArea.width, this.plotArea.height) / 2;
+            outerRadius = Math.max(24, maxRadius - labelAllowance);
+            centerY = this.plotArea.top + this.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 gaugeGroup = this.plotGroup
+            .append('g')
+            .attr('class', 'gauge')
+            .attr('transform', `translate(${centerX}, ${centerY})`);
+        this.renderTrack(gaugeGroup, innerRadius, outerRadius);
+        const visibleSegments = this.getVisibleSegments();
+        if (visibleSegments.length > 0) {
+            if (this.segmentStyle === 'gradient') {
+                this.renderGradientSegments(gaugeGroup, visibleSegments, innerRadius, outerRadius);
+            }
+            else {
+                this.renderSegments(gaugeGroup, visibleSegments, innerRadius, outerRadius);
+            }
+        }
+        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);
+        }
+        if (this.ticks.show &&
+            this.ticks.count > 0 &&
+            (this.ticks.showLines || this.ticks.showLabels)) {
+            this.renderTicks(gaugeGroup, outerRadius);
+        }
+        if (this.showValue) {
+            this.renderValueText(gaugeGroup, outerRadius);
+        }
+        if (this.targetValue !== null) {
+            this.renderTargetMarker(gaugeGroup, innerRadius, outerRadius);
+        }
+        if (this.needle.show) {
+            this.renderNeedle(gaugeGroup, innerRadius, outerRadius);
+        }
+        else if (this.marker.show) {
+            this.renderCurrentValueMarker(gaugeGroup, innerRadius, outerRadius);
+        }
+        if (this.tooltip) {
+            this.attachTooltipLayer(gaugeGroup, innerRadius, outerRadius, progressColor);
+        }
+        this.renderLegend();
+    }
+    buildAriaLabel() {
+        const statusLabel = this.findSegmentStatusLabel();
+        const targetText = this.targetValue === null
+            ? ''
+            : ` Target ${this.valueFormatter(this.targetValue)}.`;
+        const statusText = statusLabel ? ` Status: ${statusLabel}.` : '';
+        return `Gauge chart. Value ${this.valueFormatter(this.value)} on scale ${this.valueFormatter(this.minValue)} to ${this.valueFormatter(this.maxValue)}.${targetText}${statusText}`;
+    }
+    findSegmentStatusLabel() {
+        if (this.segments.length === 0) {
+            return null;
+        }
+        for (const segment of this.segments) {
+            if (this.value >= segment.from && this.value <= segment.to) {
+                return segment.label ?? segment.legendLabel;
+            }
+        }
+        return null;
+    }
+    getVisibleSegments() {
+        if (!this.legend) {
+            return this.segments;
+        }
+        return this.segments.filter((segment) => {
+            return this.legend.isSeriesVisible(segment.legendLabel);
+        });
+    }
+    resolveProgressColor(segments) {
+        for (const segment of segments) {
+            if (this.value >= segment.from && this.value <= segment.to) {
+                return segment.color;
+            }
+        }
+        return this.progressColor;
+    }
+    valueToAngle(value) {
+        const ratio = (value - this.minValue) / (this.maxValue - this.minValue);
+        const clampedRatio = Math.min(1, Math.max(0, ratio));
+        return (this.startAngle + clampedRatio * (this.endAngle - this.startAngle));
+    }
+    getProgressRadii(innerRadius, outerRadius) {
+        const bandThickness = Math.max(0, outerRadius - innerRadius);
+        const maxInset = Math.max(0, (bandThickness - MIN_PROGRESS_BAND_THICKNESS) / 2);
+        const inset = Math.min(DEFAULT_PROGRESS_RADIUS_INSET, maxInset);
+        return {
+            inner: innerRadius + inset,
+            outer: outerRadius - inset,
+        };
+    }
+    pointAt(angle, radius) {
+        return {
+            x: Math.sin(angle) * radius,
+            y: -Math.cos(angle) * radius,
+        };
+    }
+    renderTrack(gaugeGroup, innerRadius, outerRadius) {
+        const trackArc = arc()
+            .innerRadius(innerRadius)
+            .outerRadius(outerRadius)
+            .startAngle(this.startAngle)
+            .endAngle(this.endAngle)
+            .cornerRadius(this.cornerRadius);
+        gaugeGroup
+            .append('path')
+            .attr('class', 'gauge-track')
+            .attr('fill', this.trackColor)
+            .attr('d', trackArc(DUMMY_ARC_DATUM));
+    }
+    renderSegments(gaugeGroup, segments, innerRadius, outerRadius) {
+        const segmentArc = arc()
+            .innerRadius(innerRadius)
+            .outerRadius(outerRadius)
+            .startAngle((segment) => this.valueToAngle(segment.from))
+            .endAngle((segment) => this.valueToAngle(segment.to))
+            .cornerRadius(this.cornerRadius);
+        gaugeGroup
+            .append('g')
+            .attr('class', 'gauge-segments')
+            .selectAll('.gauge-segment')
+            .data(segments)
+            .join('path')
+            .attr('class', 'gauge-segment')
+            .attr('fill', (segment) => segment.color)
+            .attr('opacity', 0.92)
+            .attr('d', (segment) => segmentArc(segment));
+    }
+    renderGradientSegments(gaugeGroup, segments, innerRadius, outerRadius) {
+        if (!this.svg || segments.length === 0) {
+            return;
+        }
+        const defs = this.svg.select('defs').empty()
+            ? this.svg.append('defs')
+            : this.svg.select('defs');
+        const gradientId = `gauge-gradient-${Math.random()
+            .toString(36)
+            .slice(2, 10)}`;
+        const midRadius = (innerRadius + outerRadius) / 2;
+        const startPoint = this.pointAt(this.startAngle, midRadius);
+        const endPoint = this.pointAt(this.endAngle, midRadius);
+        const strokeWidth = Math.max(1, outerRadius - innerRadius);
+        const sortedSegments = [...segments].sort((left, right) => {
+            return left.from - right.from;
+        });
+        const gradient = defs
+            .append('linearGradient')
+            .attr('id', gradientId)
+            .attr('gradientUnits', 'userSpaceOnUse')
+            .attr('x1', startPoint.x)
+            .attr('y1', startPoint.y)
+            .attr('x2', endPoint.x)
+            .attr('y2', endPoint.y);
+        if (sortedSegments.length > 0) {
+            const firstSegment = sortedSegments[0];
+            gradient
+                .append('stop')
+                .attr('offset', '0%')
+                .attr('stop-color', firstSegment.color);
+            sortedSegments.forEach((segment) => {
+                const toOffset = ((segment.to - this.minValue) /
+                    (this.maxValue - this.minValue)) *
+                    100;
+                gradient
+                    .append('stop')
+                    .attr('offset', `${Math.min(100, Math.max(0, toOffset)).toFixed(3)}%`)
+                    .attr('stop-color', segment.color);
+            });
+        }
+        const sweep = this.endAngle - this.startAngle;
+        const largeArcFlag = Math.abs(sweep) > Math.PI ? 1 : 0;
+        const sweepFlag = sweep >= 0 ? 1 : 0;
+        const gradientPath = `M${startPoint.x},${startPoint.y} A${midRadius},${midRadius} 0 ${largeArcFlag},${sweepFlag} ${endPoint.x},${endPoint.y}`;
+        gaugeGroup
+            .append('path')
+            .attr('class', 'gauge-gradient-ring')
+            .attr('d', gradientPath)
+            .attr('fill', 'none')
+            .attr('stroke', `url(#${gradientId})`)
+            .attr('stroke-width', strokeWidth)
+            .attr('stroke-linecap', 'butt')
+            .attr('stroke-opacity', 0.95)
+            .style('pointer-events', 'none');
+    }
+    renderProgress(gaugeGroup, progressColor, innerRadius, outerRadius) {
+        const progressArc = arc()
+            .innerRadius(innerRadius)
+            .outerRadius(outerRadius)
+            .startAngle(this.startAngle)
+            .endAngle(this.valueToAngle(this.value))
+            .cornerRadius(this.cornerRadius);
+        gaugeGroup
+            .append('path')
+            .attr('class', 'gauge-progress')
+            .attr('fill', progressColor)
+            .attr('d', progressArc(DUMMY_ARC_DATUM));
+    }
+    renderTicks(gaugeGroup, outerRadius) {
+        const tickGroup = gaugeGroup.append('g').attr('class', 'gauge-ticks');
+        for (let tickIndex = 0; tickIndex <= this.ticks.count; tickIndex += 1) {
+            const ratio = tickIndex / this.ticks.count;
+            const value = this.minValue + ratio * (this.maxValue - this.minValue);
+            const angle = this.valueToAngle(value);
+            const innerTickRadius = outerRadius + 2;
+            const outerTickRadius = innerTickRadius + this.ticks.size;
+            const innerPoint = this.pointAt(angle, innerTickRadius);
+            const outerPoint = this.pointAt(angle, outerTickRadius);
+            if (this.ticks.showLines) {
+                tickGroup
+                    .append('line')
+                    .attr('class', 'gauge-tick')
+                    .attr('x1', innerPoint.x)
+                    .attr('y1', innerPoint.y)
+                    .attr('x2', outerPoint.x)
+                    .attr('y2', outerPoint.y)
+                    .attr('stroke', DEFAULT_TICK_LINE_COLOR)
+                    .attr('stroke-width', DEFAULT_TICK_LINE_STROKE_WIDTH);
+            }
+            if (!this.ticks.showLabels) {
+                continue;
+            }
+            const labelRadius = outerTickRadius + this.ticks.labelOffset;
+            const labelPoint = this.pointAt(angle, labelRadius);
+            const alignment = Math.abs(labelPoint.x) < 10
+                ? 'middle'
+                : labelPoint.x > 0
+                    ? 'start'
+                    : 'end';
+            tickGroup
+                .append('text')
+                .attr('class', 'gauge-tick-label')
+                .attr('x', labelPoint.x)
+                .attr('y', labelPoint.y)
+                .attr('text-anchor', alignment)
+                .attr('dominant-baseline', 'middle')
+                .attr('font-size', this.tickLabelStyle.fontSize)
+                .attr('font-family', this.tickLabelStyle.fontFamily)
+                .attr('font-weight', this.tickLabelStyle.fontWeight)
+                .attr('fill', this.tickLabelStyle.color)
+                .text(this.ticks.formatter(value));
+        }
+    }
+    renderTargetMarker(gaugeGroup, innerRadius, outerRadius) {
+        if (this.targetValue === null) {
+            return;
+        }
+        const targetAngle = this.valueToAngle(this.targetValue);
+        const markerInner = innerRadius + 1;
+        const markerOuter = Math.max(markerInner + 1, outerRadius - 1);
+        const innerPoint = this.pointAt(targetAngle, markerInner);
+        const outerPoint = this.pointAt(targetAngle, markerOuter);
+        gaugeGroup
+            .append('line')
+            .attr('class', 'gauge-target-marker')
+            .attr('x1', innerPoint.x)
+            .attr('y1', innerPoint.y)
+            .attr('x2', outerPoint.x)
+            .attr('y2', outerPoint.y)
+            .attr('stroke', this.targetColor)
+            .attr('stroke-width', DEFAULT_TARGET_MARKER_STROKE_WIDTH)
+            .attr('stroke-linecap', 'round');
+    }
+    renderNeedle(gaugeGroup, innerRadius, outerRadius) {
+        const needleAngle = this.valueToAngle(this.value);
+        const maxLength = Math.max(innerRadius + 2, outerRadius - 2);
+        const length = maxLength * this.needle.lengthRatio;
+        const needlePoint = this.pointAt(needleAngle, length);
+        gaugeGroup
+            .append('line')
+            .attr('class', 'gauge-needle')
+            .attr('x1', 0)
+            .attr('y1', 0)
+            .attr('x2', needlePoint.x)
+            .attr('y2', needlePoint.y)
+            .attr('stroke', this.needle.color)
+            .attr('stroke-width', this.needle.width)
+            .attr('stroke-linecap', 'round');
+        gaugeGroup
+            .append('circle')
+            .attr('class', 'gauge-needle-cap')
+            .attr('cx', 0)
+            .attr('cy', 0)
+            .attr('r', this.needle.capRadius)
+            .attr('fill', this.needle.color);
+    }
+    renderCurrentValueMarker(gaugeGroup, innerRadius, outerRadius) {
+        const markerAngle = this.valueToAngle(this.value);
+        const markerInner = innerRadius + 1;
+        const markerOuter = Math.max(markerInner + 1, outerRadius - 1);
+        const innerPoint = this.pointAt(markerAngle, markerInner);
+        const outerPoint = this.pointAt(markerAngle, markerOuter);
+        gaugeGroup
+            .append('line')
+            .attr('class', 'gauge-marker')
+            .attr('x1', innerPoint.x)
+            .attr('y1', innerPoint.y)
+            .attr('x2', outerPoint.x)
+            .attr('y2', outerPoint.y)
+            .attr('stroke', this.marker.color)
+            .attr('stroke-width', this.marker.width)
+            .attr('stroke-linecap', 'round');
+    }
+    renderValueText(gaugeGroup, outerRadius) {
+        const mainValueY = this.halfCircle
+            ? DEFAULT_HALF_CIRCLE_VALUE_TEXT_Y
+            : Math.max(DEFAULT_FULL_CIRCLE_VALUE_TEXT_MIN_Y, outerRadius * 0.58);
+        gaugeGroup
+            .append('text')
+            .attr('class', 'gauge-value')
+            .attr('x', 0)
+            .attr('y', mainValueY)
+            .attr('text-anchor', 'middle')
+            .attr('font-size', this.valueLabelStyle.fontSize)
+            .attr('font-weight', this.valueLabelStyle.fontWeight)
+            .attr('font-family', this.valueLabelStyle.fontFamily)
+            .attr('fill', this.valueLabelStyle.color)
+            .text(this.valueFormatter(this.value));
+    }
+    attachTooltipLayer(gaugeGroup, innerRadius, outerRadius, progressColor) {
+        const interactionArc = arc()
+            .innerRadius(Math.max(0, innerRadius - 20))
+            .outerRadius(outerRadius + 20)
+            .startAngle(this.startAngle)
+            .endAngle(this.endAngle);
+        gaugeGroup
+            .append('path')
+            .attr('class', 'gauge-interaction-layer')
+            .attr('fill', 'transparent')
+            .attr('d', interactionArc(DUMMY_ARC_DATUM))
+            .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);
+        })
+            .on('mousemove', (event) => {
+            const tooltipDiv = this.resolveTooltipDiv();
+            if (!tooltipDiv) {
+                return;
+            }
+            tooltipDiv
+                .style('visibility', 'visible')
+                .html(this.buildTooltipContent(progressColor));
+            this.positionTooltip(event, tooltipDiv);
+        })
+            .on('mouseleave', () => {
+            const tooltipDiv = this.resolveTooltipDiv();
+            if (!tooltipDiv) {
+                return;
+            }
+            tooltipDiv.style('visibility', 'hidden');
+        });
+    }
+    resolveTooltipDiv() {
+        if (!this.tooltip) {
+            return null;
+        }
+        return select(`#${this.tooltip.id}`);
+    }
+    buildTooltipContent(progressColor) {
+        const payload = {
+            value: this.value,
+            targetValue: this.targetValue,
+            min: this.minValue,
+            max: this.maxValue,
+        };
+        if (this.tooltip?.customFormatter) {
+            const series = [
+                { dataKey: 'value', fill: progressColor },
+                { dataKey: 'targetValue', stroke: this.targetColor },
+            ];
+            return this.tooltip.customFormatter(payload, series);
+        }
+        if (this.tooltip?.formatter) {
+            let content = '<strong>Gauge</strong><br/>';
+            content += this.tooltip.formatter('value', this.value, payload);
+            if (this.targetValue !== null) {
+                content += '<br/>';
+                content += this.tooltip.formatter('targetValue', this.targetValue, payload);
+            }
+            return content;
+        }
+        let content = `<strong>Value</strong>: ${this.valueFormatter(this.value)}`;
+        if (this.targetValue !== null) {
+            content += `<br/><strong>Target</strong>: ${this.valueFormatter(this.targetValue)}`;
+        }
+        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`);
+    }
+    renderLegend() {
+        if (!this.legend || !this.svg || this.segments.length === 0) {
+            return;
+        }
+        const legendPosition = this.layoutManager.getComponentPosition(this.legend);
+        const legendSeries = this.segments.map((segment) => ({
+            dataKey: segment.legendLabel,
+            fill: segment.color,
+        }));
+        this.legend.render(this.svg, legendSeries, this.theme, this.width, legendPosition.x, legendPosition.y);
+    }
+}