@internetstiftelsen/charts 0.0.1

package/layout-manager.js

@@ -0,0 +1,123 @@
+/**
+ * Layout manager that calculates component positions and plot area bounds
+ * Follows D3's margin convention pattern
+ */
+export class LayoutManager {
+    constructor(theme) {
+        Object.defineProperty(this, "theme", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "plotBounds", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "componentPositions", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new Map()
+        });
+        this.theme = theme;
+    }
+    /**
+     * Calculate layout based on registered components
+     * Returns the plot area bounds
+     */
+    calculateLayout(components) {
+        // Start with base margins from theme
+        let marginTop = this.theme.margins.top;
+        let marginRight = this.theme.margins.right;
+        let marginBottom = this.theme.margins.bottom;
+        let marginLeft = this.theme.margins.left;
+        // Accumulate space requirements from components
+        for (const component of components) {
+            const space = component.getRequiredSpace();
+            switch (space.position) {
+                case 'top':
+                    marginTop += space.height;
+                    break;
+                case 'bottom':
+                    marginBottom += space.height;
+                    break;
+                case 'left':
+                    marginLeft += space.width;
+                    break;
+                case 'right':
+                    marginRight += space.width;
+                    break;
+            }
+        }
+        // Calculate plot area bounds
+        this.plotBounds = {
+            left: marginLeft,
+            right: this.theme.width - marginRight,
+            top: marginTop,
+            bottom: this.theme.height - marginBottom,
+            width: this.theme.width - marginLeft - marginRight,
+            height: this.theme.height - marginTop - marginBottom,
+        };
+        // Calculate component positions
+        this.calculateComponentPositions(components);
+        return this.plotBounds;
+    }
+    /**
+     * Get the position for a specific component
+     */
+    getComponentPosition(component) {
+        const position = this.componentPositions.get(component);
+        if (!position) {
+            throw new Error('Component not found in layout');
+        }
+        return position;
+    }
+    /**
+     * Calculate positions for all components based on their space requirements
+     * Components are positioned in registration order, stacking outward from the plot area
+     */
+    calculateComponentPositions(components) {
+        if (!this.plotBounds)
+            return;
+        // Track cumulative offsets from plot area edges
+        let topOffset = 0;
+        let bottomOffset = 0;
+        let leftOffset = 0;
+        let rightOffset = 0;
+        for (const component of components) {
+            const space = component.getRequiredSpace();
+            let x = 0;
+            let y = 0;
+            switch (space.position) {
+                case 'top':
+                    // Position above plot area, stacking upward
+                    x = 0;
+                    y = this.plotBounds.top - topOffset - space.height;
+                    topOffset += space.height;
+                    break;
+                case 'bottom':
+                    // Position below plot area, stacking downward
+                    x = 0;
+                    y = this.plotBounds.bottom + bottomOffset;
+                    bottomOffset += space.height;
+                    break;
+                case 'left':
+                    // Position left of plot area, stacking leftward
+                    x = this.plotBounds.left - leftOffset - space.width;
+                    y = 0;
+                    leftOffset += space.width;
+                    break;
+                case 'right':
+                    // Position right of plot area, stacking rightward
+                    x = this.plotBounds.right + rightOffset;
+                    y = 0;
+                    rightOffset += space.width;
+                    break;
+            }
+            this.componentPositions.set(component, { x, y });
+        }
+    }
+}

package/legend.d.ts

@@ -0,0 +1,23 @@
+import { type Selection } from 'd3';
+import type { LegendConfig, ChartTheme } from './types';
+import type { Line } from './line';
+import type { Bar } from './bar';
+import type { LayoutAwareComponent, ComponentSpace } from '@/lib/chart-interface';
+export declare class Legend implements LayoutAwareComponent {
+    readonly type: "legend";
+    readonly position: LegendConfig['position'];
+    private readonly marginTop;
+    private readonly marginBottom;
+    private readonly itemHeight;
+    private visibilityState;
+    private onToggleCallback?;
+    constructor(config?: LegendConfig);
+    setToggleCallback(callback: () => void): void;
+    isSeriesVisible(dataKey: string): boolean;
+    private getCheckmarkPath;
+    /**
+     * 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;
+}

package/legend.js

@@ -0,0 +1,157 @@
+import {} from 'd3';
+import { getSeriesColor } from './types';
+export class Legend {
+    constructor(config) {
+        Object.defineProperty(this, "type", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: 'legend'
+        });
+        Object.defineProperty(this, "position", {
+            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
+        });
+        Object.defineProperty(this, "itemHeight", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: 15
+        });
+        Object.defineProperty(this, "visibilityState", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new Map()
+        });
+        Object.defineProperty(this, "onToggleCallback", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        this.position = config?.position || 'bottom';
+        this.marginTop = config?.marginTop ?? 20;
+        this.marginBottom = config?.marginBottom ?? 10;
+    }
+    setToggleCallback(callback) {
+        this.onToggleCallback = callback;
+    }
+    isSeriesVisible(dataKey) {
+        return this.visibilityState.get(dataKey) ?? true;
+    }
+    getCheckmarkPath(size) {
+        const scale = size / 24;
+        return `M ${4 * scale} ${12 * scale} L ${9 * scale} ${17 * scale} L ${20 * scale} ${6 * scale}`;
+    }
+    /**
+     * Returns the space required by the legend
+     */
+    getRequiredSpace() {
+        return {
+            width: 0, // Legend spans full width
+            height: this.marginTop + this.itemHeight + this.marginBottom,
+            position: 'bottom',
+        };
+    }
+    render(svg, series, theme, width, _x = 0, y = 0) {
+        const boxSize = theme.legend.boxSize;
+        const gapBetweenBoxAndText = 8;
+        const itemSpacing = 20; // Space between legend items
+        const legendItems = series.map((s) => ({
+            label: s.dataKey,
+            color: getSeriesColor(s),
+            dataKey: s.dataKey,
+        }));
+        legendItems.forEach((item) => {
+            if (!this.visibilityState.has(item.dataKey)) {
+                this.visibilityState.set(item.dataKey, true);
+            }
+        });
+        // Create temporary text elements to measure widths
+        const tempSvg = svg.append('g').style('visibility', 'hidden');
+        const itemWidths = legendItems.map((item) => {
+            const textElem = tempSvg
+                .append('text')
+                .attr('font-size', `${theme.legend.fontSize}px`)
+                .attr('font-family', theme.axis.fontFamily)
+                .text(item.label);
+            const textWidth = textElem.node()?.getBBox().width || 0;
+            textElem.remove();
+            return boxSize + gapBetweenBoxAndText + textWidth;
+        });
+        tempSvg.remove();
+        // Calculate positions for each item
+        const itemPositions = [];
+        let currentX = 0;
+        itemWidths.forEach((itemWidth) => {
+            itemPositions.push(currentX);
+            currentX += itemWidth + itemSpacing;
+        });
+        const totalLegendWidth = currentX - itemSpacing;
+        const legendX = (width - totalLegendWidth) / 2;
+        const legendY = y + this.marginTop;
+        const legend = svg
+            .append('g')
+            .attr('class', 'legend')
+            .attr('transform', `translate(${legendX}, ${legendY})`);
+        const legendGroups = legend
+            .selectAll('g')
+            .data(legendItems)
+            .join('g')
+            .attr('transform', (_d, i) => `translate(${itemPositions[i]}, 0)`)
+            .style('cursor', 'pointer')
+            .on('click', (_event, d) => {
+            const currentState = this.visibilityState.get(d.dataKey) ?? true;
+            this.visibilityState.set(d.dataKey, !currentState);
+            if (this.onToggleCallback) {
+                this.onToggleCallback();
+            }
+        });
+        // Add checkbox rect
+        legendGroups
+            .append('rect')
+            .attr('width', boxSize)
+            .attr('height', boxSize)
+            .attr('fill', (d) => {
+            const isVisible = this.visibilityState.get(d.dataKey) ?? true;
+            return isVisible ? d.color : theme.legend.uncheckedColor;
+        })
+            .attr('rx', 2);
+        // Add checkmark when visible
+        legendGroups
+            .append('path')
+            .attr('d', this.getCheckmarkPath(boxSize))
+            .attr('fill', 'none')
+            .attr('stroke', '#000')
+            .attr('stroke-width', 2)
+            .attr('stroke-linecap', 'round')
+            .attr('stroke-linejoin', 'round')
+            .style('display', (d) => {
+            const isVisible = this.visibilityState.get(d.dataKey) ?? true;
+            return isVisible ? 'block' : 'none';
+        });
+        // Add label text
+        legendGroups
+            .append('text')
+            .attr('x', boxSize + gapBetweenBoxAndText)
+            .attr('y', boxSize / 2 + 4)
+            .attr('font-size', `${theme.legend.fontSize}px`)
+            .attr('font-family', theme.axis.fontFamily)
+            .text((d) => d.label);
+    }
+}

package/line.d.ts

@@ -0,0 +1,11 @@
+import { type Selection } from 'd3';
+import type { LineConfig, DataItem, ScaleType } from './types';
+import type { ChartComponent } from '@/lib/chart-interface';
+export declare class Line implements ChartComponent {
+    readonly type: "line";
+    readonly dataKey: string;
+    readonly stroke: string;
+    readonly strokeWidth: number;
+    constructor(config: LineConfig);
+    render(plotGroup: Selection<SVGGElement, undefined, null, undefined>, data: DataItem[], xKey: string, x: any, y: any, parseValue: (value: any) => number, xScaleType?: ScaleType): void;
+}

package/line.js

@@ -0,0 +1,82 @@
+import { line } from 'd3';
+export class Line {
+    constructor(config) {
+        Object.defineProperty(this, "type", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: 'line'
+        });
+        Object.defineProperty(this, "dataKey", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "stroke", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "strokeWidth", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        this.dataKey = config.dataKey;
+        this.stroke = config.stroke || '#8884d8';
+        this.strokeWidth = config.strokeWidth || 2;
+    }
+    render(plotGroup, data, xKey, x, y, parseValue, xScaleType = 'band') {
+        const getXPosition = (d) => {
+            const xValue = d[xKey];
+            // Handle different scale types appropriately
+            let scaledValue;
+            switch (xScaleType) {
+                case 'band':
+                    // Band scale - use string or value as-is
+                    scaledValue = xValue;
+                    break;
+                case 'time':
+                    // Time scale - convert to Date
+                    scaledValue =
+                        xValue instanceof Date ? xValue : new Date(xValue);
+                    break;
+                case 'linear':
+                case 'log':
+                    // Linear/log scale - convert to number
+                    scaledValue =
+                        typeof xValue === 'number' ? xValue : Number(xValue);
+                    break;
+            }
+            const scaled = x(scaledValue);
+            // Handle band scales with bandwidth
+            return (scaled || 0) + (x.bandwidth ? x.bandwidth() / 2 : 0);
+        };
+        const lineGenerator = line()
+            .x(getXPosition)
+            .y((d) => y(parseValue(d[this.dataKey])) || 0);
+        // Add line path
+        plotGroup
+            .append('path')
+            .datum(data)
+            .attr('fill', 'none')
+            .attr('stroke', this.stroke)
+            .attr('stroke-width', this.strokeWidth)
+            .attr('d', lineGenerator);
+        // Add data point circles
+        plotGroup
+            .selectAll(`.circle-${this.dataKey.replace(/\s+/g, '-')}`)
+            .data(data)
+            .join('circle')
+            .attr('class', `circle-${this.dataKey.replace(/\s+/g, '-')}`)
+            .attr('cx', getXPosition)
+            .attr('cy', (d) => y(parseValue(d[this.dataKey])) || 0)
+            .attr('r', 4)
+            .attr('fill', this.stroke)
+            .attr('stroke', 'white')
+            .attr('stroke-width', 2);
+    }
+}

package/package.json

@@ -0,0 +1,57 @@
+{
+    "version": "0.0.1",
+    "name": "@internetstiftelsen/charts",
+    "type": "module",
+    "exports": {
+        "./*": {
+            "types": "./*.d.ts",
+            "import": "./*.js"
+        }
+    },
+    "files": [
+        "*.js",
+        "*.d.ts"
+    ],
+    "scripts": {
+        "dev": "vite",
+        "build": "tsc -b && vite build",
+        "lint": "eslint .",
+        "preview": "vite preview",
+        "build:lib": "tsc --project tsconfig.lib.json && tsc-alias --project tsconfig.lib.json",
+        "prepub": "rm -rf dist && npm run build:lib && cp package.json dist",
+        "pub": "npm run prepub && cd dist && npm publish --access public"
+    },
+    "dependencies": {
+        "@radix-ui/react-label": "^2.1.8",
+        "@radix-ui/react-select": "^2.2.6",
+        "@radix-ui/react-switch": "^1.2.6",
+        "@radix-ui/react-tabs": "^1.1.13",
+        "@tailwindcss/vite": "^4.1.16",
+        "@types/d3": "^7.4.3",
+        "class-variance-authority": "^0.7.1",
+        "clsx": "^2.1.1",
+        "d3": "^7.9.0",
+        "lucide-react": "^0.548.0",
+        "react": "^19.2.0",
+        "react-dom": "^19.2.0",
+        "tailwind-merge": "^3.3.1",
+        "tailwindcss": "^4.1.16"
+    },
+    "devDependencies": {
+        "@eslint/js": "^9.38.0",
+        "@types/node": "^24.9.2",
+        "@types/react": "^19.2.2",
+        "@types/react-dom": "^19.2.2",
+        "@vitejs/plugin-react-swc": "^4.2.0",
+        "eslint": "^9.38.0",
+        "eslint-plugin-react-hooks": "^7.0.1",
+        "eslint-plugin-react-refresh": "^0.4.24",
+        "globals": "^16.4.0",
+        "prettier": "3.6.2",
+        "tsc-alias": "^1.8.16",
+        "tw-animate-css": "^1.4.0",
+        "typescript": "~5.9.3",
+        "typescript-eslint": "^8.46.2",
+        "vite": "^7.1.12"
+    }
+}

package/theme.d.ts

@@ -0,0 +1,2 @@
+import { type ChartTheme } from '@/lib/types';
+export declare const defaultTheme: ChartTheme;

package/theme.js

@@ -0,0 +1,31 @@
+import {} from '@/lib/types';
+export const defaultTheme = {
+    width: 928,
+    height: 600,
+    margins: {
+        top: 20,
+        right: 20,
+        bottom: 30,
+        left: 40,
+    },
+    gridColor: '#e0e0e0',
+    colorPalette: [
+        '#50b2fc', // ocean
+        '#ff4069', // ruby
+        '#55c7b4', // jade
+        '#ffce2e', // lemon
+        '#c27fec', // peacock
+        '#f99963', // sandstone
+        '#ff9fb4', // ruby-light
+        '#1f2a36', // cyberspace
+    ],
+    axis: {
+        fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
+        fontSize: '14',
+    },
+    legend: {
+        boxSize: 20,
+        uncheckedColor: '#d0d0d0',
+        fontSize: 14,
+    },
+};

package/title.d.ts

@@ -0,0 +1,18 @@
+import { type Selection } from 'd3';
+import type { TitleConfig, ChartTheme } from './types';
+import type { LayoutAwareComponent, ComponentSpace } from './chart-interface';
+export declare class Title implements LayoutAwareComponent {
+    readonly type: "title";
+    readonly text: string;
+    private readonly fontSize;
+    private readonly fontWeight;
+    private readonly align;
+    private readonly marginTop;
+    private readonly marginBottom;
+    constructor(config: TitleConfig);
+    /**
+     * Returns the space required by the title
+     */
+    getRequiredSpace(): ComponentSpace;
+    render(svg: Selection<SVGSVGElement, undefined, null, undefined>, theme: ChartTheme, width: number, x?: number, y?: number): void;
+}

package/title.js

@@ -0,0 +1,88 @@
+import {} from 'd3';
+export class Title {
+    constructor(config) {
+        Object.defineProperty(this, "type", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: 'title'
+        });
+        Object.defineProperty(this, "text", {
+            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, "align", {
+            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.text = config.text;
+        this.fontSize = config.fontSize ?? 18;
+        this.fontWeight = config.fontWeight ?? 'bold';
+        this.align = config.align ?? 'center';
+        this.marginTop = config.marginTop ?? 10;
+        this.marginBottom = config.marginBottom ?? 15;
+    }
+    /**
+     * Returns the space required by the title
+     */
+    getRequiredSpace() {
+        return {
+            width: 0, // Title spans full width
+            height: this.marginTop + this.fontSize + this.marginBottom,
+            position: 'top',
+        };
+    }
+    render(svg, theme, width, x = 0, y = 0) {
+        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', theme.axis.fontFamily)
+            .text(this.text);
+    }
+}

package/tooltip.d.ts

@@ -0,0 +1,15 @@
+import { type Selection } from 'd3';
+import type { TooltipConfig, DataItem, ChartTheme } from './types';
+import type { ChartComponent } from '@/lib/chart-interface';
+import type { Line } from './line';
+import type { Bar } from './bar';
+import type { PlotAreaBounds } from './layout-manager';
+export declare class Tooltip implements ChartComponent {
+    readonly type: "tooltip";
+    readonly formatter?: (dataKey: string, value: any, data: DataItem) => string;
+    private tooltipDiv;
+    constructor(config?: TooltipConfig);
+    initialize(theme: ChartTheme): void;
+    attachToArea(svg: Selection<SVGSVGElement, undefined, null, undefined>, data: DataItem[], series: (Line | Bar)[], xKey: string, x: any, y: any, _theme: ChartTheme, plotArea: PlotAreaBounds, parseValue: (value: any) => number): void;
+    cleanup(): void;
+}