@internetstiftelsen/charts 0.11.0 → 0.13.0

package/dist/text.d.ts

@@ -0,0 +1,40 @@
+import { type Selection } from 'd3';
+import type { ChartTheme, ExportHooks, TextAlign, TextConfig, TextConfigBase, TextPosition } from './types.js';
+import type { ComponentSpace, LayoutAwareComponent } from './chart-interface.js';
+type TextComponentType = 'text' | 'title';
+type ResolvedTextStyle = {
+    fontSize: number;
+    fontWeight: string;
+    fontFamily: string;
+    color: string;
+    lineHeight: number;
+    marginTop: number;
+    marginBottom: number;
+};
+export declare class Text implements LayoutAwareComponent<TextConfigBase> {
+    readonly type: TextComponentType;
+    readonly display: boolean;
+    readonly text: string;
+    readonly position: TextPosition;
+    readonly variant: string;
+    readonly align: TextAlign;
+    readonly exportHooks?: ExportHooks<TextConfigBase>;
+    protected readonly fontSize?: number;
+    protected readonly fontWeight?: string;
+    protected readonly fontFamily?: string;
+    protected readonly color?: string;
+    protected readonly lineHeight?: number;
+    protected readonly marginTop?: number;
+    protected readonly marginBottom?: number;
+    constructor(config: TextConfig, componentType?: TextComponentType);
+    getExportConfig(): TextConfigBase;
+    createExportComponent(override?: Partial<TextConfigBase>): LayoutAwareComponent<TextConfigBase>;
+    getRequiredSpace(theme?: ChartTheme): ComponentSpace;
+    render(svg: Selection<SVGSVGElement, undefined, null, undefined>, theme: ChartTheme, width: number, x?: number, y?: number): void;
+    protected resolveStyle(theme?: ChartTheme): ResolvedTextStyle;
+    private resolveStyleValue;
+    private getLines;
+    private resolveTextPosition;
+    private resolveClassName;
+}
+export {};

package/dist/text.js

@@ -0,0 +1,217 @@
+import { mergeDeep, sanitizeForCSS } from './utils.js';
+export class Text {
+    constructor(config, componentType = 'text') {
+        Object.defineProperty(this, "type", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "display", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "text", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "position", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "variant", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "align", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "exportHooks", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "fontSize", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "fontWeight", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "fontFamily", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "color", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "lineHeight", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "marginTop", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "marginBottom", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        this.type = componentType;
+        this.display = config.display ?? true;
+        this.text = config.text;
+        this.position = config.position ?? 'top';
+        this.variant = config.variant ?? 'caption';
+        this.align = config.align ?? 'center';
+        this.fontSize = config.fontSize;
+        this.fontWeight = config.fontWeight;
+        this.fontFamily = config.fontFamily;
+        this.color = config.color;
+        this.lineHeight = config.lineHeight;
+        this.marginTop = config.marginTop;
+        this.marginBottom = config.marginBottom;
+        this.exportHooks = config.exportHooks;
+    }
+    getExportConfig() {
+        return {
+            display: this.display,
+            text: this.text,
+            position: this.position,
+            variant: this.variant,
+            align: this.align,
+            fontSize: this.fontSize,
+            fontWeight: this.fontWeight,
+            fontFamily: this.fontFamily,
+            color: this.color,
+            lineHeight: this.lineHeight,
+            marginTop: this.marginTop,
+            marginBottom: this.marginBottom,
+        };
+    }
+    createExportComponent(override) {
+        const merged = mergeDeep(this.getExportConfig(), override);
+        return new Text({
+            ...merged,
+            exportHooks: this.exportHooks,
+        }, this.type);
+    }
+    getRequiredSpace(theme) {
+        if (!this.display) {
+            return {
+                width: 0,
+                height: 0,
+                position: this.position,
+            };
+        }
+        const style = this.resolveStyle(theme);
+        const lineCount = this.getLines().length;
+        const textHeight = style.fontSize +
+            Math.max(0, lineCount - 1) * style.fontSize * style.lineHeight;
+        return {
+            width: 0,
+            height: style.marginTop + textHeight + style.marginBottom,
+            position: this.position,
+        };
+    }
+    render(svg, theme, width, x = 0, y = 0) {
+        if (!this.display) {
+            return;
+        }
+        const style = this.resolveStyle(theme);
+        const { textX, textAnchor } = this.resolveTextPosition(theme, width);
+        const textGroup = svg
+            .append('g')
+            .attr('class', this.resolveClassName())
+            .attr('transform', `translate(${x}, ${y})`);
+        const text = textGroup
+            .append('text')
+            .attr('x', textX)
+            .attr('text-anchor', textAnchor)
+            .attr('font-size', `${style.fontSize}px`)
+            .attr('font-weight', style.fontWeight)
+            .attr('font-family', style.fontFamily)
+            .attr('fill', style.color);
+        this.getLines().forEach((line, index) => {
+            const tspan = text.append('tspan').attr('x', textX).text(line);
+            if (index === 0) {
+                tspan.attr('y', style.marginTop + style.fontSize);
+                return;
+            }
+            tspan.attr('dy', `${style.lineHeight}em`);
+        });
+    }
+    resolveStyle(theme) {
+        const variant = theme?.text.variants[this.variant] ?? {};
+        return {
+            fontSize: this.resolveStyleValue(this.fontSize, variant.fontSize, 12),
+            fontWeight: this.resolveStyleValue(this.fontWeight, variant.fontWeight, 'normal'),
+            fontFamily: this.fontFamily ??
+                variant.fontFamily ??
+                theme?.fontFamily ??
+                '',
+            color: this.resolveStyleValue(this.color, variant.color, '#1f2a36'),
+            lineHeight: this.resolveStyleValue(this.lineHeight, variant.lineHeight, 1.2),
+            marginTop: this.resolveStyleValue(this.marginTop, variant.marginTop, 0),
+            marginBottom: this.resolveStyleValue(this.marginBottom, variant.marginBottom, 0),
+        };
+    }
+    resolveStyleValue(configured, variant, fallback) {
+        return configured ?? variant ?? fallback;
+    }
+    getLines() {
+        return this.text.split('\n');
+    }
+    resolveTextPosition(theme, width) {
+        if (this.align === 'left') {
+            return {
+                textX: theme.margins.left,
+                textAnchor: 'start',
+            };
+        }
+        if (this.align === 'right') {
+            return {
+                textX: width - theme.margins.right,
+                textAnchor: 'end',
+            };
+        }
+        return {
+            textX: width / 2,
+            textAnchor: 'middle',
+        };
+    }
+    resolveClassName() {
+        const classes = ['text', `text--${sanitizeForCSS(this.variant)}`];
+        if (this.type === 'title') {
+            classes.unshift('title');
+        }
+        return classes.join(' ');
+    }
+}

package/dist/theme.js

@@ -40,6 +40,34 @@ export const defaultTheme = {
         itemSpacingX: 20,
         itemSpacingY: 8,
     },
+    text: {
+        variants: {
+            title: {
+                fontSize: 18,
+                fontWeight: 'bold',
+                color: '#1f2a36',
+                lineHeight: 1.2,
+                marginTop: 10,
+                marginBottom: 15,
+            },
+            subtitle: {
+                fontSize: 14,
+                fontWeight: 'normal',
+                color: '#4b5563',
+                lineHeight: 1.35,
+                marginTop: 0,
+                marginBottom: 12,
+            },
+            caption: {
+                fontSize: 12,
+                fontWeight: 'normal',
+                color: '#6b7280',
+                lineHeight: 1.3,
+                marginTop: 8,
+                marginBottom: 0,
+            },
+        },
+    },
     tooltip: {
         background: '#ffffff',
         border: '#dddddd',
@@ -128,10 +156,38 @@ export const newspaperTheme = {
         itemSpacingX: 20,
         itemSpacingY: 8,
     },
+    text: {
+        variants: {
+            title: {
+                fontSize: 18,
+                fontWeight: 'bold',
+                color: '#1a1a1a',
+                lineHeight: 1.2,
+                marginTop: 10,
+                marginBottom: 15,
+            },
+            subtitle: {
+                fontSize: 14,
+                fontWeight: 'normal',
+                color: '#4a4a4a',
+                lineHeight: 1.35,
+                marginTop: 0,
+                marginBottom: 12,
+            },
+            caption: {
+                fontSize: 12,
+                fontWeight: 'normal',
+                color: '#6b6b6b',
+                lineHeight: 1.3,
+                marginTop: 8,
+                marginBottom: 0,
+            },
+        },
+    },
     tooltip: {
-        background: '#ffffff',
-        border: '#2c2c2c',
-        color: '#1a1a1a',
+        background: '#111111',
+        border: '#111111',
+        color: '#ffffff',
         fontFamily: 'Georgia, "Times New Roman", Times, serif',
         fontSize: 11,
         fontWeight: 'normal',

package/dist/title.d.ts

@@ -1,23 +1,17 @@
 import { type Selection } from 'd3';
-import type { TitleConfig, ChartTheme, ExportHooks, TitleConfigBase } from './types.js';
-import type { LayoutAwareComponent, ComponentSpace } from './chart-interface.js';
+import type { ChartTheme, ExportHooks, TitleConfig, TitleConfigBase } from './types.js';
+import type { ComponentSpace, LayoutAwareComponent } from './chart-interface.js';
 export declare class Title implements LayoutAwareComponent<TitleConfigBase> {
     readonly type: "title";
     readonly display: boolean;
     readonly text: string;
+    readonly position: "top";
+    readonly variant = "title";
     readonly exportHooks?: ExportHooks<TitleConfigBase>;
-    private readonly fontSize;
-    private readonly fontWeight;
-    private readonly fontFamily?;
-    private readonly align;
-    private readonly marginTop;
-    private readonly marginBottom;
+    private readonly textComponent;
     constructor(config: TitleConfig);
     getExportConfig(): TitleConfigBase;
     createExportComponent(override?: Partial<TitleConfigBase>): LayoutAwareComponent<TitleConfigBase>;
-    /**
-     * Returns the space required by the title
-     */
-    getRequiredSpace(): ComponentSpace;
+    getRequiredSpace(theme?: ChartTheme): ComponentSpace;
     render(svg: Selection<SVGSVGElement, undefined, null, undefined>, theme: ChartTheme, width: number, x?: number, y?: number): void;
 }

package/dist/title.js

@@ -1,3 +1,4 @@
+import { Text } from './text.js';
 import { mergeDeep } from './utils.js';
 export class Title {
     constructor(config) {
@@ -19,68 +20,53 @@ export class Title {
             writable: true,
             value: void 0
         });
-        Object.defineProperty(this, "exportHooks", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, "fontSize", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, "fontWeight", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, "fontFamily", {
+        Object.defineProperty(this, "position", {
             enumerable: true,
             configurable: true,
             writable: true,
-            value: void 0
+            value: 'top'
         });
-        Object.defineProperty(this, "align", {
+        Object.defineProperty(this, "variant", {
             enumerable: true,
             configurable: true,
             writable: true,
-            value: void 0
+            value: 'title'
         });
-        Object.defineProperty(this, "marginTop", {
+        Object.defineProperty(this, "exportHooks", {
             enumerable: true,
             configurable: true,
             writable: true,
             value: void 0
         });
-        Object.defineProperty(this, "marginBottom", {
+        Object.defineProperty(this, "textComponent", {
             enumerable: true,
             configurable: true,
             writable: true,
             value: void 0
         });
-        this.display = config.display ?? true;
-        this.text = config.text;
-        this.fontSize = config.fontSize ?? 18;
-        this.fontWeight = config.fontWeight ?? 'bold';
-        this.fontFamily = config.fontFamily;
-        this.align = config.align ?? 'center';
-        this.marginTop = config.marginTop ?? 10;
-        this.marginBottom = config.marginBottom ?? 15;
+        this.textComponent = new Text({
+            ...config,
+            position: 'top',
+            variant: 'title',
+            exportHooks: config.exportHooks,
+        }, 'title');
+        this.display = this.textComponent.display;
+        this.text = this.textComponent.text;
         this.exportHooks = config.exportHooks;
     }
     getExportConfig() {
+        const config = this.textComponent.getExportConfig();
         return {
-            display: this.display,
-            text: this.text,
-            fontSize: this.fontSize,
-            fontWeight: this.fontWeight,
-            fontFamily: this.fontFamily,
-            align: this.align,
-            marginTop: this.marginTop,
-            marginBottom: this.marginBottom,
+            display: config.display,
+            text: config.text,
+            fontSize: config.fontSize,
+            fontWeight: config.fontWeight,
+            fontFamily: config.fontFamily,
+            align: config.align,
+            color: config.color,
+            lineHeight: config.lineHeight,
+            marginTop: config.marginTop,
+            marginBottom: config.marginBottom,
         };
     }
     createExportComponent(override) {
@@ -90,49 +76,10 @@ export class Title {
             exportHooks: this.exportHooks,
         });
     }
-    /**
-     * Returns the space required by the title
-     */
-    getRequiredSpace() {
-        if (!this.display) {
-            return {
-                width: 0,
-                height: 0,
-                position: 'top',
-            };
-        }
-        return {
-            width: 0, // Title spans full width
-            height: this.marginTop + this.fontSize + this.marginBottom,
-            position: 'top',
-        };
+    getRequiredSpace(theme) {
+        return this.textComponent.getRequiredSpace(theme);
     }
     render(svg, theme, width, x = 0, y = 0) {
-        if (!this.display) {
-            return;
-        }
-        const titleGroup = svg
-            .append('g')
-            .attr('class', 'title')
-            .attr('transform', `translate(${x}, ${y})`);
-        let textX = width / 2;
-        let textAnchor = 'middle';
-        if (this.align === 'left') {
-            textX = theme.margins.left;
-            textAnchor = 'start';
-        }
-        else if (this.align === 'right') {
-            textX = width - theme.margins.right;
-            textAnchor = 'end';
-        }
-        titleGroup
-            .append('text')
-            .attr('x', textX)
-            .attr('y', this.marginTop + this.fontSize)
-            .attr('text-anchor', textAnchor)
-            .attr('font-size', `${this.fontSize}px`)
-            .attr('font-weight', this.fontWeight)
-            .attr('font-family', this.fontFamily || theme.fontFamily)
-            .text(this.text);
+        this.textComponent.render(svg, theme, width, x, y);
     }
 }

package/dist/tooltip.d.ts

@@ -49,6 +49,9 @@ export declare class Tooltip implements ChartComponent<TooltipConfigBase> {
     private hideTooltipElement;
     private setTooltipMarkup;
     private appendTooltipConnector;
+    private appendTooltipArrow;
+    private appendTooltipArrowTriangle;
+    private resolveTooltipArrowPosition;
     private resolveBarTooltipAnchor;
     private resolvePointTooltipAnchor;
     private getSplitTooltip;
@@ -64,9 +67,8 @@ export declare class Tooltip implements ChartComponent<TooltipConfigBase> {
     private getAnchoredTooltipPosition;
     private resolveTooltipConnectorLayout;
     private resolveTooltipBoxArrowPosition;
-    private resolveTooltipArrowBaseMaskPath;
     private resolveTooltipConnectorPath;
-    private resolveTooltipBoxArrow;
+    private resolveTooltipArrowTip;
     private hasFiniteNumbers;
     private resolveSplitTooltipCollisions;
     private getOppositeSideArrowEdge;