@internetstiftelsen/charts 0.9.2 → 0.10.1

package/dist/chart-interface.d.ts

@@ -1,5 +1,5 @@
 import type { ExportHooks } from './types.js';
-export type ChartComponentType = 'line' | 'area' | 'bar' | 'xAxis' | 'yAxis' | 'grid' | 'tooltip' | 'legend' | 'title' | 'donutCenterContent';
+export type ChartComponentType = 'line' | 'scatter' | 'area' | 'bar' | 'xAxis' | 'yAxis' | 'grid' | 'tooltip' | 'legend' | 'title' | 'donutCenterContent';
 export interface ChartComponentBase {
     type: ChartComponentType;
 }

package/dist/donut-center-content.d.ts

@@ -29,5 +29,6 @@ export declare class DonutCenterContent implements ChartComponent<DonutCenterCon
     getExportConfig(): DonutCenterContentConfigBase;
     createExportComponent(override?: Partial<DonutCenterContentConfigBase>): ChartComponent<DonutCenterContentConfigBase>;
     render(svg: Selection<SVGSVGElement, undefined, null, undefined>, cx: number, cy: number, theme: ChartTheme, fontScale?: number): void;
+    private buildElement;
 }
 export {};

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() {
@@ -122,7 +137,7 @@ export class DonutChart extends RadialChartBase {
             ...(this.centerContent ? [this.centerContent] : []),
             ...this.getBaseExportComponents({
                 tooltip: true,
-                legend: this.legend?.isInlineMode(),
+                legend: this.shouldIncludeLegendInExport(),
             }),
         ];
     }

package/dist/gauge-chart.d.ts

@@ -101,6 +101,7 @@ export declare class GaugeChart extends BaseChart {
     private targetValue;
     private lastRenderedValue;
     constructor(config: GaugeChartConfig);
+    private resolveGaugeConstructorValues;
     private normalizeNeedleConfig;
     private normalizeMarkerConfig;
     private getThemePaletteColor;
@@ -108,9 +109,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 +135,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;