@internetstiftelsen/charts 0.0.1

package/bar.d.ts

@@ -0,0 +1,13 @@
+import type { Selection } from 'd3';
+import type { BarConfig, DataItem, ScaleType, Orientation } from './types';
+import type { ChartComponent } from '@/lib/chart-interface';
+export declare class Bar implements ChartComponent {
+    readonly type: "bar";
+    readonly dataKey: string;
+    readonly fill: string;
+    readonly orientation: Orientation;
+    constructor(config: BarConfig);
+    render(plotGroup: Selection<SVGGElement, undefined, null, undefined>, data: DataItem[], xKey: string, x: any, y: any, parseValue: (value: any) => number, xScaleType?: ScaleType): void;
+    private renderVertical;
+    private renderHorizontal;
+}

package/bar.js

@@ -0,0 +1,137 @@
+export class Bar {
+    constructor(config) {
+        Object.defineProperty(this, "type", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: 'bar'
+        });
+        Object.defineProperty(this, "dataKey", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "fill", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "orientation", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        this.dataKey = config.dataKey;
+        this.fill = config.fill || '#8884d8';
+        this.orientation = config.orientation || 'vertical';
+    }
+    render(plotGroup, data, xKey, x, y, parseValue, xScaleType = 'band') {
+        if (this.orientation === 'vertical') {
+            this.renderVertical(plotGroup, data, xKey, x, y, parseValue, xScaleType);
+        }
+        else {
+            this.renderHorizontal(plotGroup, data, xKey, x, y, parseValue, xScaleType);
+        }
+    }
+    renderVertical(plotGroup, data, xKey, x, y, parseValue, xScaleType) {
+        const getXPosition = (d) => {
+            const xValue = d[xKey];
+            let scaledValue;
+            switch (xScaleType) {
+                case 'band':
+                    scaledValue = xValue;
+                    break;
+                case 'time':
+                    scaledValue =
+                        xValue instanceof Date ? xValue : new Date(xValue);
+                    break;
+                case 'linear':
+                case 'log':
+                    scaledValue =
+                        typeof xValue === 'number' ? xValue : Number(xValue);
+                    break;
+            }
+            return x(scaledValue) || 0;
+        };
+        const bandwidth = x.bandwidth ? x.bandwidth() : 20;
+        // Get the baseline value from the Y scale's domain
+        // For linear scales, use 0 if it's in the domain, otherwise use domain max (bottom of chart)
+        // For log scales, use the minimum value from the domain
+        const yDomain = y.domain();
+        const baselineValue = yDomain[0] >= 0 ? Math.max(0, yDomain[0]) : yDomain[0];
+        const yBaseline = y(baselineValue) || 0;
+        // Add bar rectangles
+        plotGroup
+            .selectAll(`.bar-${this.dataKey.replace(/\s+/g, '-')}`)
+            .data(data)
+            .join('rect')
+            .attr('class', `bar-${this.dataKey.replace(/\s+/g, '-')}`)
+            .attr('x', (d) => {
+            const xPos = getXPosition(d);
+            // For non-band scales, center the bar
+            return xScaleType === 'band' ? xPos : xPos - bandwidth / 2;
+        })
+            .attr('y', (d) => {
+            const yPos = y(parseValue(d[this.dataKey])) || 0;
+            return Math.min(yBaseline, yPos);
+        })
+            .attr('width', bandwidth)
+            .attr('height', (d) => {
+            const yPos = y(parseValue(d[this.dataKey])) || 0;
+            return Math.abs(yBaseline - yPos);
+        })
+            .attr('fill', this.fill);
+    }
+    renderHorizontal(plotGroup, data, xKey, x, y, parseValue, yScaleType) {
+        const getYPosition = (d) => {
+            const yValue = d[xKey];
+            let scaledValue;
+            switch (yScaleType) {
+                case 'band':
+                    scaledValue = yValue;
+                    break;
+                case 'time':
+                    scaledValue =
+                        yValue instanceof Date ? yValue : new Date(yValue);
+                    break;
+                case 'linear':
+                case 'log':
+                    scaledValue =
+                        typeof yValue === 'number' ? yValue : Number(yValue);
+                    break;
+            }
+            return y(scaledValue) || 0;
+        };
+        const bandwidth = y.bandwidth ? y.bandwidth() : 20;
+        // Get the baseline value from the scale's domain
+        // For linear scales, use 0 if it's in the domain, otherwise use domain min
+        // For log scales, use the minimum value from the domain
+        const domain = x.domain();
+        const baselineValue = domain[0] >= 0 ? Math.max(0, domain[0]) : domain[0];
+        const xBaseline = x(baselineValue) || 0;
+        // Add bar rectangles (horizontal)
+        plotGroup
+            .selectAll(`.bar-${this.dataKey.replace(/\s+/g, '-')}`)
+            .data(data)
+            .join('rect')
+            .attr('class', `bar-${this.dataKey.replace(/\s+/g, '-')}`)
+            .attr('x', (d) => {
+            const xPos = x(parseValue(d[this.dataKey])) || 0;
+            return Math.min(xBaseline, xPos);
+        })
+            .attr('y', (d) => {
+            const yPos = getYPosition(d);
+            // For non-band scales, center the bar
+            return yScaleType === 'band' ? yPos : yPos - bandwidth / 2;
+        })
+            .attr('width', (d) => {
+            const xPos = x(parseValue(d[this.dataKey])) || 0;
+            return Math.abs(xPos - xBaseline);
+        })
+            .attr('height', bandwidth)
+            .attr('fill', this.fill);
+    }
+}

package/base-chart.d.ts

@@ -0,0 +1,72 @@
+import { type Selection } from 'd3';
+import type { DataItem, ChartTheme, AxisScaleConfig } from './types';
+import type { ChartComponent } from '@/lib/chart-interface';
+import type { XAxis } from './x-axis';
+import type { YAxis } from './y-axis';
+import type { Grid } from './grid';
+import type { Tooltip } from './tooltip';
+import type { Legend } from './legend';
+import type { Title } from './title';
+import { LayoutManager, type PlotAreaBounds } from './layout-manager';
+export type BaseChartConfig = {
+    data: DataItem[];
+    theme?: Partial<ChartTheme>;
+    scales?: AxisScaleConfig;
+};
+/**
+ * Base chart class that provides common functionality for all chart types
+ */
+export declare abstract class BaseChart {
+    protected data: DataItem[];
+    protected readonly theme: ChartTheme;
+    protected readonly scaleConfig: AxisScaleConfig;
+    protected width: number;
+    protected xAxis: XAxis | null;
+    protected yAxis: YAxis | null;
+    protected grid: Grid | null;
+    protected tooltip: Tooltip | null;
+    protected legend: Legend | null;
+    protected title: Title | null;
+    protected svg: Selection<SVGSVGElement, undefined, null, undefined> | null;
+    protected plotGroup: Selection<SVGGElement, undefined, null, undefined> | null;
+    protected container: HTMLElement | null;
+    protected x: any;
+    protected y: any;
+    protected resizeObserver: ResizeObserver | null;
+    protected layoutManager: LayoutManager;
+    protected plotArea: PlotAreaBounds | null;
+    protected constructor(config: BaseChartConfig);
+    /**
+     * Adds a component (axis, grid, tooltip, etc.) to the chart
+     */
+    abstract addChild(component: ChartComponent): this;
+    /**
+     * Renders the chart to the specified target element
+     */
+    render(target: string): HTMLElement | null;
+    /**
+     * Performs the actual rendering logic
+     */
+    private performRender;
+    /**
+     * Get layout-aware components in order
+     */
+    private getLayoutComponents;
+    /**
+     * Setup ResizeObserver for automatic resize handling
+     */
+    private setupResizeObserver;
+    /**
+     * Subclasses must implement this method to define their rendering logic
+     */
+    protected abstract renderChart(): void;
+    /**
+     * Updates the chart with new data
+     */
+    update(data: DataItem[]): void;
+    /**
+     * Destroys the chart and cleans up resources
+     */
+    destroy(): void;
+    protected parseValue(value: any): number;
+}

package/base-chart.js

@@ -0,0 +1,227 @@
+import { create } from 'd3';
+import { defaultTheme } from './theme';
+import { ChartValidator } from './validation';
+import { LayoutManager } from './layout-manager';
+/**
+ * Base chart class that provides common functionality for all chart types
+ */
+export class BaseChart {
+    constructor(config) {
+        Object.defineProperty(this, "data", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "theme", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "scaleConfig", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "width", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        }); // Current rendering width
+        Object.defineProperty(this, "xAxis", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "yAxis", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "grid", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "tooltip", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "legend", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "title", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "svg", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "plotGroup", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "container", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "x", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "y", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "resizeObserver", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "layoutManager", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "plotArea", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        // Validate data
+        ChartValidator.validateData(config.data);
+        this.data = config.data;
+        this.theme = { ...defaultTheme, ...config.theme };
+        this.width = this.theme.width;
+        this.scaleConfig = config.scales || {};
+        this.layoutManager = new LayoutManager(this.theme);
+    }
+    /**
+     * Renders the chart to the specified target element
+     */
+    render(target) {
+        const container = document.querySelector(target);
+        if (!container) {
+            throw new Error(`Container "${target}" not found`);
+        }
+        this.container = container;
+        container.innerHTML = '';
+        // Perform initial render
+        this.performRender();
+        // Set up ResizeObserver for automatic resize handling
+        this.setupResizeObserver();
+        return container;
+    }
+    /**
+     * Performs the actual rendering logic
+     */
+    performRender() {
+        if (!this.container)
+            return;
+        // Calculate current width
+        this.width = Math.min(this.container.getBoundingClientRect().width || this.theme.width, this.theme.width);
+        // Clear and setup SVG
+        this.container.innerHTML = '';
+        this.svg = create('svg')
+            .attr('width', '100%')
+            .attr('height', this.theme.height)
+            .style('max-width', `${this.theme.width}px`)
+            .style('display', 'block');
+        this.container.appendChild(this.svg.node());
+        // Calculate layout
+        const layoutTheme = { ...this.theme, width: this.width };
+        this.layoutManager = new LayoutManager(layoutTheme);
+        const components = this.getLayoutComponents();
+        this.plotArea = this.layoutManager.calculateLayout(components);
+        // Create plot group
+        this.plotGroup = this.svg.append('g').attr('class', 'chart-plot');
+        // Render chart content
+        this.renderChart();
+    }
+    /**
+     * Get layout-aware components in order
+     */
+    getLayoutComponents() {
+        const components = [];
+        if (this.title)
+            components.push(this.title);
+        if (this.xAxis)
+            components.push(this.xAxis);
+        if (this.yAxis)
+            components.push(this.yAxis);
+        if (this.legend)
+            components.push(this.legend);
+        return components;
+    }
+    /**
+     * Setup ResizeObserver for automatic resize handling
+     */
+    setupResizeObserver() {
+        if (!this.container)
+            return;
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+        }
+        this.resizeObserver = new ResizeObserver(() => this.performRender());
+        this.resizeObserver.observe(this.container);
+    }
+    /**
+     * Updates the chart with new data
+     */
+    update(data) {
+        ChartValidator.validateData(data);
+        this.data = data;
+        if (!this.container) {
+            throw new Error('Chart must be rendered before update()');
+        }
+        this.performRender();
+    }
+    /**
+     * Destroys the chart and cleans up resources
+     */
+    destroy() {
+        this.tooltip?.cleanup();
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+            this.resizeObserver = null;
+        }
+        if (this.container) {
+            this.container.innerHTML = '';
+        }
+        this.svg = null;
+        this.plotGroup = null;
+        this.plotArea = null;
+        this.x = null;
+        this.y = null;
+    }
+    parseValue(value) {
+        return typeof value === 'string' ? parseFloat(value) : value;
+    }
+}

package/chart-interface.d.ts

@@ -0,0 +1,11 @@
+export interface ChartComponent {
+    type: 'line' | 'bar' | 'xAxis' | 'yAxis' | 'grid' | 'tooltip' | 'legend' | 'title';
+}
+export type ComponentSpace = {
+    width: number;
+    height: number;
+    position: 'top' | 'bottom' | 'left' | 'right';
+};
+export interface LayoutAwareComponent extends ChartComponent {
+    getRequiredSpace(): ComponentSpace;
+}

package/chart-interface.js

@@ -0,0 +1 @@
+export {};

package/grid.d.ts

@@ -0,0 +1,10 @@
+import { type Selection } from 'd3';
+import type { GridConfig, ChartTheme } from './types';
+import type { ChartComponent } from '@/lib/chart-interface';
+export declare class Grid implements ChartComponent {
+    readonly type: "grid";
+    readonly horizontal: boolean;
+    readonly vertical: boolean;
+    constructor(config?: GridConfig);
+    render(plotGroup: Selection<SVGGElement, undefined, null, undefined>, x: any, y: any, theme: ChartTheme): void;
+}

package/grid.js

@@ -0,0 +1,63 @@
+import { axisBottom, axisLeft } from 'd3';
+export class Grid {
+    constructor(config) {
+        Object.defineProperty(this, "type", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: 'grid'
+        });
+        Object.defineProperty(this, "horizontal", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "vertical", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        this.horizontal = config?.horizontal ?? true;
+        this.vertical = config?.vertical ?? true;
+    }
+    render(plotGroup, x, y, theme) {
+        // Get plot area dimensions from the scale ranges
+        const xRange = x.range();
+        const yRange = y.range();
+        const plotWidth = xRange[1] - xRange[0];
+        const plotHeight = yRange[0] - yRange[1];
+        if (this.horizontal) {
+            plotGroup
+                .append('g')
+                .attr('class', 'grid-lines horizontal')
+                .attr('transform', `translate(${xRange[0]},0)`)
+                .call(axisLeft(y)
+                .ticks(5)
+                .tickSize(-plotWidth)
+                .tickFormat(() => ''))
+                .call((g) => g
+                .selectAll('.tick line')
+                .attr('stroke', theme.gridColor)
+                .attr('stroke-opacity', 0.5))
+                .selectAll('.domain')
+                .remove();
+        }
+        if (this.vertical) {
+            plotGroup
+                .append('g')
+                .attr('class', 'grid-lines vertical')
+                .attr('transform', `translate(0,${yRange[0]})`)
+                .call(axisBottom(x)
+                .tickSize(-plotHeight)
+                .tickFormat(() => ''))
+                .call((g) => g
+                .selectAll('.tick line')
+                .attr('stroke', theme.gridColor)
+                .attr('stroke-opacity', 0.5))
+                .selectAll('.domain')
+                .remove();
+        }
+    }
+}

package/layout-manager.d.ts

@@ -0,0 +1,38 @@
+import type { LayoutAwareComponent } from './chart-interface';
+import type { ChartTheme } from './types';
+export type PlotAreaBounds = {
+    left: number;
+    right: number;
+    top: number;
+    bottom: number;
+    width: number;
+    height: number;
+};
+export type ComponentPosition = {
+    x: number;
+    y: number;
+};
+/**
+ * Layout manager that calculates component positions and plot area bounds
+ * Follows D3's margin convention pattern
+ */
+export declare class LayoutManager {
+    private theme;
+    private plotBounds;
+    private componentPositions;
+    constructor(theme: ChartTheme);
+    /**
+     * Calculate layout based on registered components
+     * Returns the plot area bounds
+     */
+    calculateLayout(components: LayoutAwareComponent[]): PlotAreaBounds;
+    /**
+     * Get the position for a specific component
+     */
+    getComponentPosition(component: LayoutAwareComponent): ComponentPosition;
+    /**
+     * Calculate positions for all components based on their space requirements
+     * Components are positioned in registration order, stacking outward from the plot area
+     */
+    private calculateComponentPositions;
+}