@internetstiftelsen/charts 0.8.0 → 0.9.0

package/pie-chart.d.ts

@@ -1,6 +1,7 @@
 import type { DataItem, LegendSeries } from './types.js';
-import { BaseChart, type BaseChartConfig } from './base-chart.js';
-import type { ChartComponent, LayoutAwareComponent } from './chart-interface.js';
+import { type BaseChartConfig, type BaseRenderContext } from './base-chart.js';
+import type { ChartComponent } from './chart-interface.js';
+import { RadialChartBase } from './radial-chart-base.js';
 export type PieSort = 'none' | 'ascending' | 'descending' | ((a: PieSegmentData, b: PieSegmentData) => number);
 export type PieConfig = {
     innerRadius?: number;
@@ -40,7 +41,7 @@ type PieSegmentData = {
     color: string;
     source: DataItem;
 };
-export declare class PieChart extends BaseChart {
+export declare class PieChart extends RadialChartBase {
     private readonly innerRadiusRatio;
     private readonly startAngle;
     private readonly endAngle;
@@ -55,22 +56,17 @@ export declare class PieChart extends BaseChart {
     private validatePieData;
     private prepareSegments;
     private warnOnTinySlices;
-    addChild(component: ChartComponent): this;
     protected getExportComponents(): ChartComponent[];
     update(data: DataItem[]): void;
-    protected getLayoutComponents(): LayoutAwareComponent[];
-    protected prepareLayout(): void;
-    protected createExportChart(): BaseChart;
-    protected renderChart(): void;
-    private resolveFontScale;
+    protected createExportChart(): RadialChartBase;
+    protected syncDerivedState(): void;
+    protected renderChart({ svg, plotGroup, plotArea, }: BaseRenderContext): void;
     protected getLegendSeries(): LegendSeries[];
     private resolveSortComparator;
     private renderSegments;
     private handleSegmentKeyNavigation;
     private getRenderedSegments;
     private buildAriaLabel;
-    private positionTooltip;
-    private positionTooltipAtElement;
     private buildTooltipContent;
     private getArcPoint;
     private renderLabels;

package/pie-chart.js

@@ -1,16 +1,14 @@
 import { arc, pie, select } from 'd3';
-import { BaseChart } from './base-chart.js';
 import { ChartValidator } from './validation.js';
 import { getContrastTextColor, measureTextWidth, sanitizeForCSS, } from './utils.js';
+import { RadialChartBase } from './radial-chart-base.js';
 const HOVER_EXPAND_PX = 8;
 const ANIMATION_DURATION_MS = 150;
-const TOOLTIP_OFFSET_PX = 12;
-const EDGE_MARGIN_PX = 10;
 const FULL_CIRCLE_RADIANS = Math.PI * 2;
 const OUTSIDE_LABEL_TEXT_OFFSET_PX = 10;
 const OUTSIDE_LABEL_LINE_INSET_PX = 4;
 const TINY_SLICE_THRESHOLD_RATIO = 0.03;
-export class PieChart extends BaseChart {
+export class PieChart extends RadialChartBase {
     constructor(config) {
         super(config);
         Object.defineProperty(this, "innerRadiusRatio", {
@@ -99,8 +97,7 @@ export class PieChart extends BaseChart {
                 legacyLabels?.minVerticalSpacing ??
                 14,
         };
-        this.validatePieData();
-        this.prepareSegments();
+        this.initializeDataState();
     }
     validatePieData() {
         ChartValidator.validateDataKey(this.data, this.labelKey, 'PieChart');
@@ -176,60 +173,16 @@ export class PieChart extends BaseChart {
             ChartValidator.warn(`PieChart: ${tinySliceCount} slices are below ${(TINY_SLICE_THRESHOLD_RATIO * 100).toFixed(0)}% and label readability may degrade`);
         }
     }
-    addChild(component) {
-        const type = component.type;
-        if (type === 'tooltip') {
-            this.tooltip = component;
-        }
-        else if (type === 'legend') {
-            this.legend = component;
-            this.legend.setToggleCallback(() => {
-                if (!this.container) {
-                    return;
-                }
-                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?.isInlineMode()) {
-            components.push(this.legend);
-        }
-        return components;
+        return this.getBaseExportComponents({
+            title: true,
+            tooltip: true,
+            legend: this.legend?.isInlineMode(),
+        });
     }
     update(data) {
-        this.data = data;
-        this.validatePieData();
-        this.prepareSegments();
         super.update(data);
     }
-    getLayoutComponents() {
-        const components = [];
-        if (this.title) {
-            components.push(this.title);
-        }
-        if (this.legend) {
-            components.push(this.legend);
-        }
-        return components;
-    }
-    prepareLayout() {
-        const svgNode = this.svg?.node();
-        if (svgNode && this.legend?.isInlineMode()) {
-            this.legend.estimateLayoutSpace(this.getLegendSeries(), this.theme, this.width, svgNode);
-        }
-    }
     createExportChart() {
         return new PieChart({
             data: this.data,
@@ -248,53 +201,27 @@ export class PieChart extends BaseChart {
             labelKey: this.labelKey,
         });
     }
-    renderChart() {
-        if (!this.plotArea || !this.svg || !this.plotGroup) {
-            throw new Error('Plot area not calculated');
-        }
-        if (this.title) {
-            const pos = this.layoutManager.getComponentPosition(this.title);
-            this.title.render(this.svg, this.theme, this.width, pos.x, pos.y);
-        }
-        const visibleSegments = this.legend
-            ? this.segments.filter((seg) => this.legend.isSeriesVisible(seg.label))
-            : this.segments;
-        if (this.tooltip) {
-            this.tooltip.initialize(this.theme);
-        }
+    syncDerivedState() {
+        this.validatePieData();
+        this.prepareSegments();
+    }
+    renderChart({ svg, plotGroup, plotArea, }) {
+        this.renderTitle(svg);
+        const visibleSegments = this.getVisibleRadialItems(this.segments);
+        this.initializeTooltip();
         if (visibleSegments.length > 0) {
-            const cx = this.plotArea.left + this.plotArea.width / 2;
-            const cy = this.plotArea.top + this.plotArea.height / 2;
-            const outerRadius = Math.min(this.plotArea.width, this.plotArea.height) / 2;
-            const innerRadius = outerRadius * this.innerRadiusRatio;
-            const fontScale = this.resolveFontScale(outerRadius);
-            const { segmentGroup, pieData } = this.renderSegments(visibleSegments, cx, cy, innerRadius, outerRadius);
+            const { cx, cy, outerRadius, innerRadius, fontScale } = this.getRadialLayout(plotArea, this.innerRadiusRatio);
+            const { segmentGroup, pieData } = this.renderSegments(plotGroup, visibleSegments, cx, cy, innerRadius, outerRadius);
             if (this.valueLabel.show) {
                 this.renderLabels(segmentGroup, pieData, innerRadius, outerRadius, visibleSegments.reduce((sum, segment) => {
                     return sum + segment.value;
                 }, 0), fontScale);
             }
         }
-        if (this.legend?.isInlineMode()) {
-            const pos = this.layoutManager.getComponentPosition(this.legend);
-            this.legend.render(this.svg, this.getLegendSeries(), this.theme, this.width, pos.x, pos.y);
-        }
-    }
-    resolveFontScale(outerRadius) {
-        const plotHeight = Math.max(1, this.theme.height -
-            this.theme.margins.top -
-            this.theme.margins.bottom);
-        const referenceRadius = Math.max(1, plotHeight / 2);
-        const rawScale = outerRadius / referenceRadius;
-        return Math.max(0.5, Math.min(1, rawScale));
+        this.renderInlineLegend(svg);
     }
     getLegendSeries() {
-        return this.segments.map((segment) => {
-            return {
-                dataKey: segment.label,
-                fill: segment.color,
-            };
-        });
+        return this.getRadialLegendSeries(this.segments);
     }
     resolveSortComparator() {
         if (typeof this.sort === 'function') {
@@ -308,10 +235,7 @@ export class PieChart extends BaseChart {
         }
         return null;
     }
-    renderSegments(segments, cx, cy, innerRadius, outerRadius) {
-        if (!this.plotGroup || !this.svg) {
-            throw new Error('Plot group not initialized');
-        }
+    renderSegments(plotGroup, segments, cx, cy, innerRadius, outerRadius) {
         const pieGenerator = pie()
             .value((d) => d.value)
             .startAngle(this.startAngle)
@@ -333,7 +257,7 @@ export class PieChart extends BaseChart {
             .outerRadius(outerRadius + HOVER_EXPAND_PX)
             .cornerRadius(this.cornerRadius);
         const pieData = pieGenerator(segments);
-        const segmentGroup = this.plotGroup
+        const segmentGroup = plotGroup
             .append('g')
             .attr('class', 'pie-segments')
             .attr('transform', `translate(${cx}, ${cy})`);
@@ -367,13 +291,13 @@ export class PieChart extends BaseChart {
                 tooltipDiv
                     .style('visibility', 'visible')
                     .html(this.buildTooltipContent(d, segments));
-                this.positionTooltip(event, tooltipDiv);
+                this.positionTooltipFromPointer(event, tooltipDiv);
             }
         })
             .on('mousemove', (event) => {
             const tooltipDiv = resolveTooltipDiv();
             if (tooltipDiv && !tooltipDiv.empty()) {
-                this.positionTooltip(event, tooltipDiv);
+                this.positionTooltipFromPointer(event, tooltipDiv);
             }
         })
             .on('mouseleave', (event, d) => {
@@ -458,53 +382,6 @@ export class PieChart extends BaseChart {
         const percentage = total > 0 ? ((d.data.value / total) * 100).toFixed(1) : '0.0';
         return `${d.data.label}: ${d.data.value} (${percentage}%)`;
     }
-    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`);
-    }
-    positionTooltipAtElement(target, tooltipDiv) {
-        const node = tooltipDiv.node();
-        if (!node) {
-            return;
-        }
-        const targetRect = target.getBoundingClientRect();
-        const tooltipRect = node.getBoundingClientRect();
-        let x = targetRect.left +
-            window.scrollX +
-            targetRect.width / 2 +
-            TOOLTIP_OFFSET_PX;
-        let y = targetRect.top +
-            window.scrollY +
-            targetRect.height / 2 -
-            tooltipRect.height / 2;
-        if (x + tooltipRect.width > window.innerWidth - EDGE_MARGIN_PX) {
-            x =
-                targetRect.left +
-                    window.scrollX -
-                    tooltipRect.width -
-                    TOOLTIP_OFFSET_PX;
-        }
-        x = Math.max(EDGE_MARGIN_PX, x);
-        y = Math.max(EDGE_MARGIN_PX, Math.min(y, window.innerHeight +
-            window.scrollY -
-            tooltipRect.height -
-            EDGE_MARGIN_PX));
-        tooltipDiv.style('left', `${x}px`).style('top', `${y}px`);
-    }
     buildTooltipContent(d, segments) {
         const total = segments.reduce((sum, segment) => sum + segment.value, 0);
         const percentage = total > 0 ? ((d.data.value / total) * 100).toFixed(1) : '0.0';
@@ -534,8 +411,8 @@ export class PieChart extends BaseChart {
         const insideArc = arc()
             .innerRadius(insideLabelRadius)
             .outerRadius(insideLabelRadius);
-        const fontSize = this.theme.legend.fontSize * fontScale;
-        const fontWeight = this.theme.axis.fontWeight ?? 'normal';
+        const fontSize = this.renderTheme.legend.fontSize * fontScale;
+        const fontWeight = this.renderTheme.axis.fontWeight ?? 'normal';
         const outsideLabels = [];
         pieData.forEach((d) => {
             const percentage = total > 0 ? (d.data.value / total) * 100 : 0;
@@ -549,7 +426,7 @@ export class PieChart extends BaseChart {
                     .attr('y', y)
                     .attr('text-anchor', 'middle')
                     .attr('dominant-baseline', 'middle')
-                    .attr('font-family', this.theme.axis.fontFamily)
+                    .attr('font-family', this.renderTheme.axis.fontFamily)
                     .attr('font-size', `${fontSize}px`)
                     .attr('font-weight', fontWeight)
                     .attr('fill', getContrastTextColor(d.data.color))
@@ -594,10 +471,10 @@ export class PieChart extends BaseChart {
                 .attr('y', outsideLabel.y)
                 .attr('text-anchor', outsideLabel.textAnchor)
                 .attr('dominant-baseline', 'middle')
-                .attr('font-family', this.theme.axis.fontFamily)
+                .attr('font-family', this.renderTheme.axis.fontFamily)
                 .attr('font-size', `${fontSize}px`)
                 .attr('font-weight', fontWeight)
-                .attr('fill', this.theme.valueLabel.color)
+                .attr('fill', this.renderTheme.valueLabel.color)
                 .text(outsideLabel.datum.data.label);
         });
     }
@@ -625,7 +502,7 @@ export class PieChart extends BaseChart {
         if (!svgNode) {
             return false;
         }
-        const textWidth = measureTextWidth(datum.data.label, fontSize, this.theme.axis.fontFamily, fontWeight, svgNode);
+        const textWidth = measureTextWidth(datum.data.label, fontSize, this.renderTheme.axis.fontFamily, fontWeight, svgNode);
         const angle = Math.max(0, datum.endAngle - datum.startAngle);
         const availableArcLength = angle * insideLabelRadius - this.valueLabel.insideMargin * 2;
         const availableRadialThickness = outerRadius - innerRadius - this.valueLabel.insideMargin * 2;

package/radial-chart-base.d.ts

@@ -0,0 +1,25 @@
+import type { Selection } from 'd3';
+import { BaseChart } from './base-chart.js';
+import type { PlotAreaBounds } from './layout-manager.js';
+import type { LegendSeries } from './types.js';
+type RadialLegendItem = {
+    label: string;
+    color: string;
+};
+export declare abstract class RadialChartBase extends BaseChart {
+    protected initializeTooltip(): void;
+    protected getVisibleRadialItems<T extends RadialLegendItem>(items: T[]): T[];
+    protected getRadialLayout(plotArea: PlotAreaBounds, innerRadiusRatio: number): {
+        cx: number;
+        cy: number;
+        outerRadius: number;
+        innerRadius: number;
+        fontScale: number;
+    };
+    protected getRadialLegendSeries<T extends RadialLegendItem>(items: T[]): LegendSeries[];
+    protected positionTooltipFromPointer(event: MouseEvent, tooltipDiv: Selection<HTMLDivElement, unknown, HTMLElement, undefined>): void;
+    protected positionTooltipAtElement(target: Element, tooltipDiv: Selection<HTMLDivElement, unknown, HTMLElement, undefined>): void;
+    private applyTooltipPosition;
+    private resolveRadialFontScale;
+}
+export {};

package/radial-chart-base.js

@@ -0,0 +1,77 @@
+import { BaseChart } from './base-chart.js';
+const TOOLTIP_OFFSET_PX = 12;
+const EDGE_MARGIN_PX = 10;
+export class RadialChartBase extends BaseChart {
+    initializeTooltip() {
+        this.tooltip?.initialize(this.renderTheme);
+    }
+    getVisibleRadialItems(items) {
+        return this.filterVisibleItems(items, (item) => item.label);
+    }
+    getRadialLayout(plotArea, innerRadiusRatio) {
+        const cx = plotArea.left + plotArea.width / 2;
+        const cy = plotArea.top + plotArea.height / 2;
+        const outerRadius = Math.min(plotArea.width, plotArea.height) / 2;
+        return {
+            cx,
+            cy,
+            outerRadius,
+            innerRadius: outerRadius * innerRadiusRatio,
+            fontScale: this.resolveRadialFontScale(outerRadius, this.renderTheme),
+        };
+    }
+    getRadialLegendSeries(items) {
+        return items.map((item) => ({
+            dataKey: item.label,
+            fill: item.color,
+        }));
+    }
+    positionTooltipFromPointer(event, tooltipDiv) {
+        const node = tooltipDiv.node();
+        if (!node) {
+            return;
+        }
+        const rect = node.getBoundingClientRect();
+        let x = event.pageX + TOOLTIP_OFFSET_PX;
+        const y = event.pageY - rect.height / 2;
+        if (x + rect.width > window.innerWidth - EDGE_MARGIN_PX) {
+            x = event.pageX - rect.width - TOOLTIP_OFFSET_PX;
+        }
+        this.applyTooltipPosition(tooltipDiv, x, y, rect.height, rect.width);
+    }
+    positionTooltipAtElement(target, tooltipDiv) {
+        const node = tooltipDiv.node();
+        if (!node) {
+            return;
+        }
+        const targetRect = target.getBoundingClientRect();
+        const tooltipRect = node.getBoundingClientRect();
+        let x = targetRect.left +
+            window.scrollX +
+            targetRect.width / 2 +
+            TOOLTIP_OFFSET_PX;
+        const y = targetRect.top +
+            window.scrollY +
+            targetRect.height / 2 -
+            tooltipRect.height / 2;
+        if (x + tooltipRect.width > window.innerWidth - EDGE_MARGIN_PX) {
+            x =
+                targetRect.left +
+                    window.scrollX -
+                    tooltipRect.width -
+                    TOOLTIP_OFFSET_PX;
+        }
+        this.applyTooltipPosition(tooltipDiv, x, y, tooltipRect.height, tooltipRect.width);
+    }
+    applyTooltipPosition(tooltipDiv, rawX, rawY, height, width) {
+        const x = Math.max(EDGE_MARGIN_PX, Math.min(rawX, window.innerWidth + window.scrollX - width - EDGE_MARGIN_PX));
+        const y = Math.max(EDGE_MARGIN_PX, Math.min(rawY, window.innerHeight + window.scrollY - height - EDGE_MARGIN_PX));
+        tooltipDiv.style('left', `${x}px`).style('top', `${y}px`);
+    }
+    resolveRadialFontScale(outerRadius, theme) {
+        const plotHeight = Math.max(1, theme.height - theme.margins.top - theme.margins.bottom);
+        const referenceRadius = Math.max(1, plotHeight / 2);
+        const rawScale = outerRadius / referenceRadius;
+        return Math.max(0.5, Math.min(1, rawScale));
+    }
+}

package/scale-utils.d.ts

@@ -0,0 +1,3 @@
+import type { D3Scale, ScaleType } from './types.js';
+export declare function resolveScaleValue(value: unknown, scaleType: ScaleType): string | number | Date;
+export declare function getScalePosition(scale: D3Scale, value: unknown, scaleType: ScaleType): number;

package/scale-utils.js

@@ -0,0 +1,14 @@
+export function resolveScaleValue(value, scaleType) {
+    switch (scaleType) {
+        case 'band':
+            return String(value);
+        case 'time':
+            return value instanceof Date ? value : new Date(String(value));
+        case 'linear':
+        case 'log':
+            return typeof value === 'number' ? value : Number(value);
+    }
+}
+export function getScalePosition(scale, value, scaleType) {
+    return scale(resolveScaleValue(value, scaleType)) || 0;
+}

package/utils.d.ts

@@ -11,6 +11,13 @@ export declare function cn(...inputs: ClassValue[]): string;
  * @returns A valid CSS class/ID string
  */
 export declare function sanitizeForCSS(str: string): string;
+/**
+ * Escapes a string for safe insertion into HTML content.
+ *
+ * @param str - The string to escape
+ * @returns The escaped HTML string
+ */
+export declare function escapeHtml(str: string): string;
 /**
  * Measures the width of text in pixels using an SVG text element.
  *

package/utils.js

@@ -20,6 +20,30 @@ export function sanitizeForCSS(str) {
         .replace(/^-+|-+$/g, '') // Remove leading/trailing hyphens
         .toLowerCase(); // Convert to lowercase for consistency
 }
+/**
+ * Escapes a string for safe insertion into HTML content.
+ *
+ * @param str - The string to escape
+ * @returns The escaped HTML string
+ */
+export function escapeHtml(str) {
+    return str.replace(/[&<>"']/g, (character) => {
+        switch (character) {
+            case '&':
+                return '&amp;';
+            case '<':
+                return '&lt;';
+            case '>':
+                return '&gt;';
+            case '"':
+                return '&quot;';
+            case "'":
+                return '&#39;';
+            default:
+                return character;
+        }
+    });
+}
 /**
  * Measures the width of text in pixels using an SVG text element.
  *

package/word-cloud-chart.d.ts

@@ -0,0 +1,32 @@
+import { BaseChart, type BaseChartConfig, type BaseRenderContext } from './base-chart.js';
+import type { ChartData } from './types.js';
+export type WordCloudRotationMode = 'none' | 'right-angle';
+export type WordCloudSpiral = 'archimedean' | 'rectangular';
+export type WordCloudConfig = {
+    maxWords?: number;
+    minWordLength?: number;
+    minValue?: number;
+    minFontSize?: number;
+    maxFontSize?: number;
+    padding?: number;
+    rotation?: WordCloudRotationMode;
+    spiral?: WordCloudSpiral;
+};
+export type WordCloudChartConfig = Pick<BaseChartConfig, 'data' | 'theme' | 'responsive'> & {
+    wordCloud?: WordCloudConfig;
+};
+export declare class WordCloudChart extends BaseChart {
+    private readonly options;
+    private layout;
+    private layoutRunId;
+    private resolvePendingReady;
+    constructor(config: WordCloudChartConfig);
+    destroy(): void;
+    protected validateSourceData(data: ChartData): void;
+    protected renderChart({ svg, plotArea }: BaseRenderContext): void;
+    protected createExportChart(): BaseChart;
+    private startLayout;
+    private renderWords;
+    private stopLayout;
+    private finishReady;
+}