@internetstiftelsen/charts 0.1.1 → 0.3.0

package/chart-interface.d.ts

@@ -1,5 +1,5 @@
 export interface ChartComponent {
-    type: 'line' | 'bar' | 'xAxis' | 'yAxis' | 'grid' | 'tooltip' | 'legend' | 'title';
+    type: 'line' | 'bar' | 'xAxis' | 'yAxis' | 'grid' | 'tooltip' | 'legend' | 'title' | 'donutCenterContent';
 }
 export type ComponentSpace = {
     width: number;

package/donut-center-content.d.ts

@@ -0,0 +1,27 @@
+import { type Selection } from 'd3';
+import type { ChartTheme } from './types.js';
+import type { ChartComponent } from './chart-interface.js';
+type TextStyle = {
+    fontSize?: number;
+    fontWeight?: string;
+    fontFamily?: string;
+    color?: string;
+};
+export type DonutCenterContentConfig = {
+    mainValue?: string;
+    title?: string;
+    subtitle?: string;
+    mainValueStyle?: TextStyle;
+    titleStyle?: TextStyle;
+    subtitleStyle?: TextStyle;
+};
+export declare class DonutCenterContent implements ChartComponent {
+    readonly type: "donutCenterContent";
+    readonly mainValue?: string;
+    readonly title?: string;
+    readonly subtitle?: string;
+    private readonly config;
+    constructor(config?: DonutCenterContentConfig);
+    render(svg: Selection<SVGSVGElement, undefined, null, undefined>, cx: number, cy: number, theme: ChartTheme): void;
+}
+export {};

package/donut-center-content.js

@@ -0,0 +1,98 @@
+export class DonutCenterContent {
+    constructor(config = {}) {
+        Object.defineProperty(this, "type", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: 'donutCenterContent'
+        });
+        Object.defineProperty(this, "mainValue", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "title", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "subtitle", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "config", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        this.mainValue = config.mainValue;
+        this.title = config.title;
+        this.subtitle = config.subtitle;
+        this.config = config;
+    }
+    render(svg, cx, cy, theme) {
+        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,
+                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,
+                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,
+                fontWeight: style?.fontWeight ?? defaults.subtitle.fontWeight,
+                fontFamily: style?.fontFamily ??
+                    defaults.subtitle.fontFamily ??
+                    theme.fontFamily,
+                color: style?.color ?? defaults.subtitle.color,
+            });
+        }
+        if (elements.length === 0)
+            return;
+        const lineSpacing = 6;
+        const totalHeight = elements.reduce((sum, el, i) => sum + el.fontSize + (i < elements.length - 1 ? lineSpacing : 0), 0);
+        const group = svg.append('g').attr('class', 'donut-center-content');
+        let currentY = cy - totalHeight / 2;
+        for (const el of elements) {
+            group
+                .append('text')
+                .attr('x', cx)
+                .attr('y', currentY + el.fontSize / 2)
+                .attr('text-anchor', 'middle')
+                .attr('dominant-baseline', 'middle')
+                .style('font-size', `${el.fontSize}px`)
+                .style('font-weight', el.fontWeight)
+                .style('font-family', el.fontFamily)
+                .style('fill', el.color)
+                .text(el.text);
+            currentY += el.fontSize + lineSpacing;
+        }
+    }
+}

package/donut-chart.d.ts

@@ -0,0 +1,32 @@
+import type { DataItem } from './types.js';
+import { BaseChart, type BaseChartConfig } from './base-chart.js';
+import type { ChartComponent, LayoutAwareComponent } from './chart-interface.js';
+export type DonutConfig = {
+    innerRadius?: number;
+    padAngle?: number;
+    cornerRadius?: number;
+};
+export type DonutChartConfig = BaseChartConfig & {
+    donut?: DonutConfig;
+    valueKey?: string;
+    labelKey?: string;
+};
+export declare class DonutChart extends BaseChart {
+    private readonly innerRadiusRatio;
+    private readonly padAngle;
+    private readonly cornerRadius;
+    private readonly valueKey;
+    private readonly labelKey;
+    private segments;
+    private centerContent;
+    constructor(config: DonutChartConfig);
+    private validateDonutData;
+    private prepareSegments;
+    addChild(component: ChartComponent): this;
+    update(data: DataItem[]): void;
+    protected getLayoutComponents(): LayoutAwareComponent[];
+    protected renderChart(): void;
+    private positionTooltip;
+    private buildTooltipContent;
+    private renderSegments;
+}

package/donut-chart.js

@@ -0,0 +1,240 @@
+import { arc, pie, select } from 'd3';
+import { BaseChart } from './base-chart.js';
+import { sanitizeForCSS } from './utils.js';
+import { ChartValidator } from './validation.js';
+const HOVER_EXPAND_PX = 8;
+const ANIMATION_DURATION_MS = 150;
+const TOOLTIP_OFFSET_PX = 12;
+const EDGE_MARGIN_PX = 10;
+export class DonutChart extends BaseChart {
+    constructor(config) {
+        super(config);
+        Object.defineProperty(this, "innerRadiusRatio", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "padAngle", {
+            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, "valueKey", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "labelKey", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "segments", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: []
+        });
+        Object.defineProperty(this, "centerContent", {
+            enumerable: true,
+            configurable: true,
+            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.validateDonutData();
+        this.prepareSegments();
+    }
+    validateDonutData() {
+        ChartValidator.validateDataKey(this.data, this.labelKey, 'DonutChart');
+        ChartValidator.validateDataKey(this.data, this.valueKey, 'DonutChart');
+        ChartValidator.validateNumericData(this.data, this.valueKey, 'DonutChart');
+        for (const [index, item] of this.data.entries()) {
+            const value = this.parseValue(item[this.valueKey]);
+            if (value < 0) {
+                throw new Error(`DonutChart: data item at index ${index} has negative value '${item[this.valueKey]}' for key '${this.valueKey}'`);
+            }
+        }
+    }
+    prepareSegments() {
+        this.segments = this.data.map((item, index) => ({
+            label: String(item[this.labelKey]),
+            value: this.parseValue(item[this.valueKey]),
+            color: item.color ||
+                this.theme.colorPalette[index % this.theme.colorPalette.length],
+        }));
+    }
+    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;
+        }
+        else if (type === 'donutCenterContent') {
+            this.centerContent = component;
+        }
+        return this;
+    }
+    update(data) {
+        this.data = data;
+        this.validateDonutData();
+        this.prepareSegments();
+        super.update(data);
+    }
+    getLayoutComponents() {
+        const components = [];
+        if (this.title)
+            components.push(this.title);
+        if (this.legend)
+            components.push(this.legend);
+        return components;
+    }
+    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;
+        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;
+        this.renderSegments(visibleSegments, cx, cy, innerRadius, outerRadius);
+        if (this.centerContent) {
+            this.centerContent.render(this.svg, cx, cy, this.theme);
+        }
+        if (this.legend) {
+            const pos = this.layoutManager.getComponentPosition(this.legend);
+            const legendSeries = this.segments.map((seg) => ({
+                dataKey: seg.label,
+                fill: seg.color,
+            }));
+            this.legend.render(this.svg, legendSeries, this.theme, this.width, pos.x, pos.y);
+        }
+        if (this.tooltip) {
+            this.tooltip.initialize(this.theme);
+        }
+    }
+    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`);
+    }
+    buildTooltipContent(d, segments) {
+        const total = segments.reduce((sum, s) => sum + s.value, 0);
+        const percentage = total > 0 ? ((d.data.value / total) * 100).toFixed(1) : '0.0';
+        const dataItem = this.data.find((item) => String(item[this.labelKey]) === d.data.label);
+        if (this.tooltip?.customFormatter) {
+            return this.tooltip.customFormatter(dataItem || {}, [
+                { dataKey: d.data.label, fill: d.data.color },
+            ]);
+        }
+        if (this.tooltip?.formatter) {
+            return `<strong>${d.data.label}</strong><br/>${this.tooltip.formatter(d.data.label, d.data.value, dataItem || {})}`;
+        }
+        return `<strong>${d.data.label}</strong><br/>${d.data.value} (${percentage}%)`;
+    }
+    renderSegments(segments, cx, cy, innerRadius, outerRadius) {
+        if (!this.plotGroup || !this.svg)
+            return;
+        const pieGenerator = pie()
+            .value((d) => d.value)
+            .padAngle(this.padAngle)
+            .sort(null);
+        const arcGenerator = arc()
+            .innerRadius(innerRadius)
+            .outerRadius(outerRadius)
+            .cornerRadius(this.cornerRadius);
+        const hoverArcGenerator = arc()
+            .innerRadius(innerRadius)
+            .outerRadius(outerRadius + HOVER_EXPAND_PX)
+            .cornerRadius(this.cornerRadius);
+        const pieData = pieGenerator(segments);
+        const segmentGroup = this.plotGroup
+            .append('g')
+            .attr('class', 'donut-segments')
+            .attr('transform', `translate(${cx}, ${cy})`);
+        const tooltipDiv = this.tooltip
+            ? select(`#${this.tooltip.id}`)
+            : null;
+        segmentGroup
+            .selectAll('.donut-segment')
+            .data(pieData)
+            .join('path')
+            .attr('class', (d) => `donut-segment segment-${sanitizeForCSS(d.data.label)}`)
+            .attr('d', arcGenerator)
+            .attr('fill', (d) => d.data.color)
+            .style('cursor', 'pointer')
+            .style('transition', 'opacity 0.15s ease')
+            .on('mouseenter', (event, d) => {
+            select(event.currentTarget)
+                .transition()
+                .duration(ANIMATION_DURATION_MS)
+                .attr('d', hoverArcGenerator(d));
+            segmentGroup
+                .selectAll('.donut-segment')
+                .filter((_, i, nodes) => nodes[i] !== event.currentTarget)
+                .style('opacity', 0.5);
+            if (tooltipDiv && !tooltipDiv.empty()) {
+                tooltipDiv
+                    .style('visibility', 'visible')
+                    .html(this.buildTooltipContent(d, segments));
+                this.positionTooltip(event, tooltipDiv);
+            }
+        })
+            .on('mousemove', (event) => {
+            if (tooltipDiv && !tooltipDiv.empty()) {
+                this.positionTooltip(event, tooltipDiv);
+            }
+        })
+            .on('mouseleave', (event, d) => {
+            select(event.currentTarget)
+                .transition()
+                .duration(ANIMATION_DURATION_MS)
+                .attr('d', arcGenerator(d));
+            segmentGroup.selectAll('.donut-segment').style('opacity', 1);
+            if (tooltipDiv && !tooltipDiv.empty()) {
+                tooltipDiv.style('visibility', 'hidden');
+            }
+        });
+    }
+}

package/legend.d.ts

@@ -1,7 +1,5 @@
 import { type Selection } from 'd3';
-import type { LegendConfig, ChartTheme } from './types.js';
-import type { Line } from './line.js';
-import type { Bar } from './bar.js';
+import type { LegendConfig, ChartTheme, LegendSeries } from './types.js';
 import type { LayoutAwareComponent, ComponentSpace } from './chart-interface.js';
 export declare class Legend implements LayoutAwareComponent {
     readonly type: "legend";
@@ -20,5 +18,5 @@ export declare class Legend implements LayoutAwareComponent {
      * Returns the space required by the legend
      */
     getRequiredSpace(): ComponentSpace;
-    render(svg: Selection<SVGSVGElement, undefined, null, undefined>, series: (Line | Bar)[], theme: ChartTheme, width: number, _x?: number, y?: number): void;
+    render(svg: Selection<SVGSVGElement, undefined, null, undefined>, series: LegendSeries[], theme: ChartTheme, width: number, _x?: number, y?: number): void;
 }

package/line.js

@@ -50,7 +50,9 @@ export class Line {
                 case 'time':
                     // Time scale - convert to Date
                     scaledValue =
-                        xValue instanceof Date ? xValue : new Date(String(xValue));
+                        xValue instanceof Date
+                            ? xValue
+                            : new Date(String(xValue));
                     break;
                 case 'linear':
                 case 'log':

package/package.json

@@ -1,5 +1,5 @@
 {
-    "version": "0.1.1",
+    "version": "0.3.0",
     "name": "@internetstiftelsen/charts",
     "type": "module",
     "sideEffects": false,

package/theme.js

@@ -50,6 +50,28 @@ export const defaultTheme = {
         borderRadius: 4,
         padding: 4,
     },
+    donut: {
+        innerRadius: 0.5,
+        padAngle: 0.02,
+        cornerRadius: 0,
+        centerContent: {
+            mainValue: {
+                fontSize: 32,
+                fontWeight: 'bold',
+                color: '#1f2a36',
+            },
+            title: {
+                fontSize: 14,
+                fontWeight: 'normal',
+                color: '#6b7280',
+            },
+            subtitle: {
+                fontSize: 12,
+                fontWeight: 'normal',
+                color: '#9ca3af',
+            },
+        },
+    },
 };
 export const newspaperTheme = {
     width: 928,
@@ -104,6 +126,28 @@ export const newspaperTheme = {
         borderRadius: 2,
         padding: 3,
     },
+    donut: {
+        innerRadius: 0.5,
+        padAngle: 0.015,
+        cornerRadius: 0,
+        centerContent: {
+            mainValue: {
+                fontSize: 28,
+                fontWeight: 'bold',
+                color: '#1a1a1a',
+            },
+            title: {
+                fontSize: 13,
+                fontWeight: 'normal',
+                color: '#4a4a4a',
+            },
+            subtitle: {
+                fontSize: 11,
+                fontWeight: 'normal',
+                color: '#6b6b6b',
+            },
+        },
+    },
 };
 export const themes = {
     default: defaultTheme,

package/tooltip.js

@@ -59,7 +59,6 @@ export class Tooltip {
             .style('font-family', theme.axis.fontFamily)
             .style('font-size', '12px')
             .style('pointer-events', 'none')
-            .style('transition', 'left 0.1s ease-out, top 0.1s ease-out')
             .style('z-index', '1000');
     }
     attachToArea(svg, data, series, xKey, x, y, theme, plotArea, parseValue, isHorizontal = false) {
@@ -171,8 +170,7 @@ export class Tooltip {
             if (hasBarSeries) {
                 barSeries.forEach((s) => {
                     const sanitizedKey = sanitizeForCSS(s.dataKey);
-                    svg.selectAll(`.bar-${sanitizedKey}`)
-                        .style('opacity', (_, i) => i === closestIndex ? 1 : 0.5);
+                    svg.selectAll(`.bar-${sanitizedKey}`).style('opacity', (_, i) => (i === closestIndex ? 1 : 0.5));
                 });
             }
             // Build tooltip content
@@ -197,33 +195,74 @@ export class Tooltip {
                     }
                 });
             }
-            // Position tooltip relative to the data point
+            // Position tooltip: X anchored to data point, Y at midpoint of values
+            tooltip.style('visibility', 'visible').html(content);
+            // Get tooltip dimensions after content is set
+            const tooltipNode = tooltip.node();
+            const tooltipRect = tooltipNode.getBoundingClientRect();
+            const tooltipWidth = tooltipRect.width;
+            const tooltipHeight = tooltipRect.height;
             const svgRect = svg.node().getBoundingClientRect();
+            const offsetX = 12;
+            // Calculate min/max values across all series for this data point
+            const values = series.map((s) => parseValue(dataPoint[s.dataKey]));
+            const minValue = Math.min(...values);
+            const maxValue = Math.max(...values);
             let tooltipX;
             let tooltipY;
             if (isHorizontal) {
-                // Horizontal: position near bar end (X = value, Y = category)
-                tooltipX =
-                    svgRect.left +
-                        window.scrollX +
-                        x(parseValue(dataPoint[series[0].dataKey])) +
-                        10;
+                // Horizontal: X at midpoint of values, Y anchored to category
+                const minX = x(minValue);
+                const maxX = x(maxValue);
+                const midX = (minX + maxX) / 2;
+                tooltipX = svgRect.left + window.scrollX + midX + offsetX;
                 tooltipY =
-                    svgRect.top + window.scrollY + dataPointPosition - 10;
+                    svgRect.top +
+                        window.scrollY +
+                        dataPointPosition -
+                        tooltipHeight / 2;
             }
             else {
-                // Vertical: position near data point (X = category, Y = value)
+                // Vertical: X anchored to category, Y at midpoint of values
+                const minY = y(maxValue); // Note: Y scale is inverted
+                const maxY = y(minValue);
+                const midY = (minY + maxY) / 2;
                 tooltipX =
-                    svgRect.left + window.scrollX + dataPointPosition + 10;
+                    svgRect.left +
+                        window.scrollX +
+                        dataPointPosition +
+                        offsetX;
                 tooltipY =
-                    svgRect.top +
-                        window.scrollY +
-                        y(parseValue(dataPoint[series[0].dataKey])) -
-                        10;
+                    svgRect.top + window.scrollY + midY - tooltipHeight / 2;
+            }
+            // Edge detection - flip horizontally if approaching right edge
+            const viewportWidth = window.innerWidth;
+            if (tooltipX + tooltipWidth > viewportWidth - 10) {
+                if (isHorizontal) {
+                    const minX = x(minValue);
+                    tooltipX =
+                        svgRect.left +
+                            window.scrollX +
+                            minX -
+                            tooltipWidth -
+                            offsetX;
+                }
+                else {
+                    tooltipX =
+                        svgRect.left +
+                            window.scrollX +
+                            dataPointPosition -
+                            tooltipWidth -
+                            offsetX;
+                }
             }
+            // Ensure tooltip doesn't go off edges
+            tooltipX = Math.max(10, tooltipX);
+            tooltipY = Math.max(10, Math.min(tooltipY, window.innerHeight +
+                window.scrollY -
+                tooltipHeight -
+                10));
             tooltip
-                .style('visibility', 'visible')
-                .html(content)
                 .style('left', `${tooltipX}px`)
                 .style('top', `${tooltipY}px`);
         })

package/types.d.ts

@@ -50,6 +50,31 @@ export type ChartTheme = {
         borderRadius: number;
         padding: number;
     };
+    donut: {
+        innerRadius: number;
+        padAngle: number;
+        cornerRadius: number;
+        centerContent: {
+            mainValue: {
+                fontSize: number;
+                fontWeight: string;
+                fontFamily?: string;
+                color: string;
+            };
+            title: {
+                fontSize: number;
+                fontWeight: string;
+                fontFamily?: string;
+                color: string;
+            };
+            subtitle: {
+                fontSize: number;
+                fontWeight: string;
+                fontFamily?: string;
+                color: string;
+            };
+        };
+    };
 };
 export type ValueLabelConfig = {
     fontSize?: number;
@@ -98,6 +123,9 @@ export type XAxisConfig = {
     maxLabelWidth?: number;
     oversizedBehavior?: LabelOversizedBehavior;
     tickFormat?: string | ((value: number) => string) | null;
+    autoHideOverlapping?: boolean;
+    minLabelGap?: number;
+    preserveEndLabels?: boolean;
 };
 export type YAxisConfig = {
     tickFormat?: string | ((value: number) => string) | null;
@@ -123,6 +151,11 @@ export type LegendConfig = {
     marginTop?: number;
     marginBottom?: number;
 };
+export type LegendSeries = {
+    dataKey: string;
+    stroke?: string;
+    fill?: string;
+};
 export type TitleConfig = {
     text: string;
     fontSize?: number;

package/x-axis.d.ts

@@ -11,6 +11,9 @@ export declare class XAxis implements LayoutAwareComponent {
     private readonly oversizedBehavior;
     private readonly tickFormat;
     private wrapLineCount;
+    private readonly autoHideOverlapping;
+    private readonly minLabelGap;
+    private readonly preserveEndLabels;
     constructor(config?: XAxisConfig);
     /**
      * Returns the space required by the x-axis
@@ -20,4 +23,5 @@ export declare class XAxis implements LayoutAwareComponent {
     private applyLabelConstraints;
     private wrapTextElement;
     private addTitleTooltip;
+    private applyAutoHiding;
 }