@internetstiftelsen/charts 0.10.0 → 0.11.0

package/dist/donut-center-content.js

@@ -62,44 +62,11 @@ export class DonutCenterContent {
     }
     render(svg, cx, cy, theme, fontScale = 1) {
         const defaults = theme.donut.centerContent;
-        const elements = [];
-        if (this.mainValue) {
-            const style = this.config.mainValueStyle;
-            elements.push({
-                text: this.mainValue,
-                fontSize: (style?.fontSize ?? defaults.mainValue.fontSize) *
-                    fontScale,
-                fontWeight: style?.fontWeight ?? defaults.mainValue.fontWeight,
-                fontFamily: style?.fontFamily ??
-                    defaults.mainValue.fontFamily ??
-                    theme.fontFamily,
-                color: style?.color ?? defaults.mainValue.color,
-            });
-        }
-        if (this.title) {
-            const style = this.config.titleStyle;
-            elements.push({
-                text: this.title,
-                fontSize: (style?.fontSize ?? defaults.title.fontSize) * fontScale,
-                fontWeight: style?.fontWeight ?? defaults.title.fontWeight,
-                fontFamily: style?.fontFamily ??
-                    defaults.title.fontFamily ??
-                    theme.fontFamily,
-                color: style?.color ?? defaults.title.color,
-            });
-        }
-        if (this.subtitle) {
-            const style = this.config.subtitleStyle;
-            elements.push({
-                text: this.subtitle,
-                fontSize: (style?.fontSize ?? defaults.subtitle.fontSize) * fontScale,
-                fontWeight: style?.fontWeight ?? defaults.subtitle.fontWeight,
-                fontFamily: style?.fontFamily ??
-                    defaults.subtitle.fontFamily ??
-                    theme.fontFamily,
-                color: style?.color ?? defaults.subtitle.color,
-            });
-        }
+        const elements = [
+            this.buildElement(this.mainValue, this.config.mainValueStyle, defaults.mainValue, theme.fontFamily, fontScale),
+            this.buildElement(this.title, this.config.titleStyle, defaults.title, theme.fontFamily, fontScale),
+            this.buildElement(this.subtitle, this.config.subtitleStyle, defaults.subtitle, theme.fontFamily, fontScale),
+        ].filter((element) => element !== null);
         if (elements.length === 0) {
             return;
         }
@@ -122,4 +89,20 @@ export class DonutCenterContent {
             currentY += el.fontSize + lineSpacing;
         }
     }
+    buildElement(text, style, defaults, themeFontFamily, fontScale) {
+        if (!text) {
+            return null;
+        }
+        const resolvedStyle = {
+            ...defaults,
+            ...style,
+        };
+        return {
+            text,
+            fontSize: resolvedStyle.fontSize * fontScale,
+            fontWeight: resolvedStyle.fontWeight,
+            fontFamily: resolvedStyle.fontFamily || themeFontFamily,
+            color: resolvedStyle.color,
+        };
+    }
 }

package/dist/donut-chart.js

@@ -6,6 +6,15 @@ const HOVER_EXPAND_PX = 8;
 const ANIMATION_DURATION_MS = 150;
 const OUTSIDE_LABEL_TEXT_OFFSET_PX = 10;
 const OUTSIDE_LABEL_LINE_INSET_PX = 4;
+const DEFAULT_DONUT_VALUE_LABEL = {
+    show: false,
+    position: 'auto',
+    outsideOffset: 16,
+    minVerticalSpacing: 14,
+    formatter: (label, value, _data, _percentage) => {
+        return `${label}: ${value}`;
+    },
+};
 export class DonutChart extends RadialChartBase {
     constructor(config) {
         super(config);
@@ -57,21 +66,27 @@ export class DonutChart extends RadialChartBase {
             writable: true,
             value: null
         });
-        const donut = config.donut ?? {};
-        this.innerRadiusRatio =
-            donut.innerRadius ?? this.theme.donut.innerRadius;
-        this.padAngle = donut.padAngle ?? this.theme.donut.padAngle;
-        this.cornerRadius = donut.cornerRadius ?? this.theme.donut.cornerRadius;
-        this.valueKey = config.valueKey ?? 'value';
-        this.labelKey = config.labelKey ?? 'name';
-        this.valueLabel = {
-            show: config.valueLabel?.show ?? false,
-            position: config.valueLabel?.position ?? 'auto',
-            outsideOffset: config.valueLabel?.outsideOffset ?? 16,
-            minVerticalSpacing: config.valueLabel?.minVerticalSpacing ?? 14,
-            formatter: config.valueLabel?.formatter ??
-                ((label, value, _data, _percentage) => `${label}: ${value}`),
+        const donut = {
+            innerRadius: this.theme.donut.innerRadius,
+            padAngle: this.theme.donut.padAngle,
+            cornerRadius: this.theme.donut.cornerRadius,
+            ...config.donut,
         };
+        const resolvedConfig = {
+            valueKey: 'value',
+            labelKey: 'name',
+            ...config,
+        };
+        const valueLabel = {
+            ...DEFAULT_DONUT_VALUE_LABEL,
+            ...config.valueLabel,
+        };
+        this.innerRadiusRatio = donut.innerRadius;
+        this.padAngle = donut.padAngle;
+        this.cornerRadius = donut.cornerRadius;
+        this.valueKey = resolvedConfig.valueKey;
+        this.labelKey = resolvedConfig.labelKey;
+        this.valueLabel = valueLabel;
         this.initializeDataState();
     }
     validateDonutData() {
@@ -220,9 +235,6 @@ export class DonutChart extends RadialChartBase {
             .append('g')
             .attr('class', 'donut-segments')
             .attr('transform', `translate(${cx}, ${cy})`);
-        const resolveTooltipDiv = () => this.tooltip
-            ? select(`#${this.tooltip.id}`)
-            : null;
         segmentGroup
             .selectAll('.donut-segment')
             .data(pieData)
@@ -241,19 +253,10 @@ export class DonutChart extends RadialChartBase {
                 .selectAll('.donut-segment')
                 .filter((_, i, nodes) => nodes[i] !== event.currentTarget)
                 .style('opacity', 0.5);
-            const tooltipDiv = resolveTooltipDiv();
-            if (tooltipDiv && !tooltipDiv.empty()) {
-                tooltipDiv
-                    .style('visibility', 'visible')
-                    .html(this.buildTooltipContent(d, segments));
-                this.positionTooltipFromPointer(event, tooltipDiv);
-            }
+            this.showTooltipFromPointer(event, this.buildTooltipContent(d, segments));
         })
             .on('mousemove', (event) => {
-            const tooltipDiv = resolveTooltipDiv();
-            if (tooltipDiv && !tooltipDiv.empty()) {
-                this.positionTooltipFromPointer(event, tooltipDiv);
-            }
+            this.positionTooltipFromPointer(event);
         })
             .on('mouseleave', (event, d) => {
             select(event.currentTarget)
@@ -261,10 +264,7 @@ export class DonutChart extends RadialChartBase {
                 .duration(ANIMATION_DURATION_MS)
                 .attr('d', arcGenerator(d));
             segmentGroup.selectAll('.donut-segment').style('opacity', 1);
-            const tooltipDiv = resolveTooltipDiv();
-            if (tooltipDiv && !tooltipDiv.empty()) {
-                tooltipDiv.style('visibility', 'hidden');
-            }
+            this.hideTooltip();
         });
         return {
             segmentGroup,

package/dist/gauge-chart.d.ts

@@ -1,6 +1,7 @@
 import type { DataItem, LegendSeries } from './types.js';
-import { BaseChart, type BaseChartConfig, type BaseRenderContext } from './base-chart.js';
+import type { BaseChart, BaseChartConfig, BaseRenderContext } from './base-chart.js';
 import type { ChartComponentBase } from './chart-interface.js';
+import { RadialChartBase } from './radial-chart-base.js';
 export type GaugeSegment = {
     from: number;
     to: number;
@@ -70,7 +71,7 @@ export type GaugeChartConfig = BaseChartConfig & {
     valueKey?: string;
     targetValueKey?: string;
 };
-export declare class GaugeChart extends BaseChart {
+export declare class GaugeChart extends RadialChartBase {
     private readonly configuredValue;
     private readonly configuredTargetValue;
     private readonly configuredSegments;
@@ -101,6 +102,7 @@ export declare class GaugeChart extends BaseChart {
     private targetValue;
     private lastRenderedValue;
     constructor(config: GaugeChartConfig);
+    private resolveGaugeConstructorValues;
     private normalizeNeedleConfig;
     private normalizeMarkerConfig;
     private getThemePaletteColor;
@@ -108,9 +110,18 @@ export declare class GaugeChart extends BaseChart {
     private normalizeAnimationConfig;
     private resolveAnimationEasing;
     private parseCssLinearEasing;
+    private parseLinearEasingStop;
+    private resolveLinearEasingPositions;
+    private fillMissingLinearEasingPositions;
+    private interpolateLinearEasing;
     private normalizeTickLabelStyle;
     private normalizeValueLabelStyle;
     private validateGaugeConfig;
+    private validateGaugeRange;
+    private validateGaugeGeometry;
+    private validateTickSettings;
+    private validateIndicatorSettings;
+    private validateAnimationSettings;
     private validateSegments;
     private refreshResolvedValues;
     private resolveValue;
@@ -125,6 +136,16 @@ export declare class GaugeChart extends BaseChart {
     protected createExportChart(): BaseChart;
     protected syncDerivedState(): void;
     protected renderChart({ svg, plotGroup, plotArea, }: BaseRenderContext): void;
+    private resolveGaugeGeometry;
+    private resolveLabelAllowance;
+    private resolveHalfCircleGeometry;
+    private resolveFullCircleGeometry;
+    private resolveInnerRadius;
+    private renderSegmentsOrProgress;
+    private renderVisibleSegments;
+    private renderGaugeLabels;
+    private renderGaugeIndicators;
+    private attachTooltipIfEnabled;
     private resolveAnimationStartValue;
     private shouldAnimateTransition;
     private buildAriaLabel;
@@ -144,8 +165,6 @@ export declare class GaugeChart extends BaseChart {
     private renderCurrentValueMarker;
     private renderValueText;
     private attachTooltipLayer;
-    private resolveTooltipDiv;
     private buildTooltipContent;
-    private positionTooltip;
     protected getLegendSeries(): LegendSeries[];
 }