@internetstiftelsen/charts 0.0.1

package/tooltip.js

@@ -0,0 +1,138 @@
+import { pointer, select } from 'd3';
+import { getSeriesColor } from './types';
+export class Tooltip {
+    constructor(config) {
+        Object.defineProperty(this, "type", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: 'tooltip'
+        });
+        Object.defineProperty(this, "formatter", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "tooltipDiv", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        this.formatter = config?.formatter;
+    }
+    initialize(theme) {
+        this.tooltipDiv = select('body')
+            .append('div')
+            .attr('class', 'chart-tooltip')
+            .style('position', 'absolute')
+            .style('visibility', 'hidden')
+            .style('background-color', 'white')
+            .style('border', '1px solid #ddd')
+            .style('border-radius', '4px')
+            .style('padding', '8px')
+            .style('box-shadow', '0 2px 4px rgba(0,0,0,0.1)')
+            .style('font-family', theme.axis.fontFamily)
+            .style('font-size', '12px')
+            .style('pointer-events', 'none')
+            .style('z-index', '1000');
+    }
+    attachToArea(svg, data, series, xKey, x, y, _theme, plotArea, parseValue) {
+        if (!this.tooltipDiv)
+            return;
+        const tooltip = this.tooltipDiv;
+        const formatter = this.formatter;
+        // Helper to get x position for any scale type
+        const getXPosition = (dataPoint) => {
+            const xValue = dataPoint[xKey];
+            const scaled = x(xValue instanceof Date
+                ? xValue
+                : typeof xValue === 'string'
+                    ? xValue
+                    : new Date(xValue));
+            return (scaled || 0) + (x.bandwidth ? x.bandwidth() / 2 : 0);
+        };
+        // Create overlay rect for mouse tracking using plot area bounds
+        const overlay = svg
+            .append('rect')
+            .attr('class', 'tooltip-overlay')
+            .attr('x', plotArea.left)
+            .attr('y', plotArea.top)
+            .attr('width', plotArea.width)
+            .attr('height', plotArea.height)
+            .style('fill', 'none')
+            .style('pointer-events', 'all');
+        // Create focus circles for each series
+        const focusCircles = series.map((s) => {
+            return svg
+                .append('circle')
+                .attr('class', `focus-circle-${s.dataKey.replace(/\s+/g, '-')}`)
+                .attr('r', 5)
+                .attr('fill', getSeriesColor(s))
+                .attr('stroke', 'white')
+                .attr('stroke-width', 2)
+                .style('opacity', 0)
+                .style('pointer-events', 'none');
+        });
+        overlay
+            .on('mousemove', (event) => {
+            const [mouseX] = pointer(event, svg.node());
+            // Find closest x value
+            const xPositions = data.map((d) => getXPosition(d));
+            let closestIndex = 0;
+            let minDistance = Math.abs(mouseX - xPositions[0]);
+            for (let i = 1; i < xPositions.length; i++) {
+                const distance = Math.abs(mouseX - xPositions[i]);
+                if (distance < minDistance) {
+                    minDistance = distance;
+                    closestIndex = i;
+                }
+            }
+            const dataPoint = data[closestIndex];
+            const xPos = xPositions[closestIndex];
+            // Update focus circles
+            series.forEach((s, i) => {
+                const yValue = parseValue(dataPoint[s.dataKey]);
+                const yPos = y(yValue);
+                focusCircles[i]
+                    .attr('cx', xPos)
+                    .attr('cy', yPos)
+                    .style('opacity', 1);
+            });
+            // Build tooltip content
+            let content = `<strong>${dataPoint[xKey]}</strong><br/>`;
+            series.forEach((s) => {
+                const value = dataPoint[s.dataKey];
+                if (formatter) {
+                    content +=
+                        formatter(s.dataKey, value, dataPoint) + '<br/>';
+                }
+                else {
+                    content += `${s.dataKey}: ${value}<br/>`;
+                }
+            });
+            // Position tooltip relative to the data point
+            const svgRect = svg.node().getBoundingClientRect();
+            const tooltipX = svgRect.left + xPos + 10;
+            const tooltipY = svgRect.top +
+                y(parseValue(dataPoint[series[0].dataKey])) -
+                10;
+            tooltip
+                .style('visibility', 'visible')
+                .html(content)
+                .style('left', `${tooltipX}px`)
+                .style('top', `${tooltipY}px`);
+        })
+            .on('mouseout', () => {
+            tooltip.style('visibility', 'hidden');
+            focusCircles.forEach((circle) => circle.style('opacity', 0));
+        });
+    }
+    cleanup() {
+        if (this.tooltipDiv) {
+            this.tooltipDiv.remove();
+            this.tooltipDiv = null;
+        }
+    }
+}

package/types.d.ts

@@ -0,0 +1,83 @@
+export type DataItem = {
+    [key: string]: any;
+};
+export type ColorPalette = string[];
+export type ChartTheme = {
+    width: number;
+    height: number;
+    margins: {
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
+    };
+    gridColor: string;
+    colorPalette: ColorPalette;
+    axis: {
+        fontFamily: string;
+        fontSize: string;
+    };
+    legend: {
+        boxSize: number;
+        uncheckedColor: string;
+        fontSize: number;
+    };
+};
+export type LineConfig = {
+    dataKey: string;
+    stroke?: string;
+    strokeWidth?: number;
+};
+export type BarConfig = {
+    dataKey: string;
+    fill?: string;
+    orientation?: 'vertical' | 'horizontal';
+};
+export declare function getSeriesColor(series: {
+    stroke?: string;
+    fill?: string;
+}): string;
+export type XAxisConfig = {
+    dataKey?: string;
+    rotatedLabels?: boolean;
+};
+export type YAxisConfig = {
+    tickFormat?: string | null;
+};
+export type GridConfig = {
+    horizontal?: boolean;
+    vertical?: boolean;
+};
+export type TooltipConfig = {
+    formatter?: (dataKey: string, value: any, data: DataItem) => string;
+};
+export type LegendConfig = {
+    position?: 'bottom';
+    marginTop?: number;
+    marginBottom?: number;
+};
+export type TitleConfig = {
+    text: string;
+    fontSize?: number;
+    fontWeight?: string;
+    align?: 'left' | 'center' | 'right';
+    marginTop?: number;
+    marginBottom?: number;
+};
+export type ChartStyle = {
+    maxHeight?: string;
+    aspectRatio?: number;
+};
+export type ScaleType = 'band' | 'linear' | 'time' | 'log';
+export type ScaleConfig = {
+    type: ScaleType;
+    domain?: any[];
+    range?: any[];
+    padding?: number;
+    nice?: boolean;
+};
+export type AxisScaleConfig = {
+    x?: Partial<ScaleConfig>;
+    y?: Partial<ScaleConfig>;
+};
+export type Orientation = 'vertical' | 'horizontal';

package/types.js

@@ -0,0 +1,4 @@
+// Helper to get color from any series type
+export function getSeriesColor(series) {
+    return series.stroke || series.fill || '#8884d8';
+}

package/utils.d.ts

@@ -0,0 +1,2 @@
+import { type ClassValue } from 'clsx';
+export declare function cn(...inputs: ClassValue[]): string;

package/utils.js

@@ -0,0 +1,5 @@
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+export function cn(...inputs) {
+    return twMerge(clsx(inputs));
+}

package/validation.d.ts

@@ -0,0 +1,29 @@
+import type { DataItem } from './types';
+export declare class ChartValidationError extends Error {
+    constructor(message: string);
+}
+/**
+ * Validates chart data and configuration
+ */
+export declare class ChartValidator {
+    /**
+     * Validates that data is an array and not empty
+     */
+    static validateData(data: any): asserts data is DataItem[];
+    /**
+     * Validates that the specified dataKey exists in all data items
+     */
+    static validateDataKey(data: DataItem[], dataKey: string, componentName: string): void;
+    /**
+     * Validates that data contains at least one valid numeric value for the specified key
+     */
+    static validateNumericData(data: DataItem[], dataKey: string, componentName: string): void;
+    /**
+     * Validates scale configuration
+     */
+    static validateScaleConfig(scaleType: string, domain: any[] | undefined): void;
+    /**
+     * Warns about potential issues without throwing errors
+     */
+    static warn(message: string): void;
+}

package/validation.js

@@ -0,0 +1,75 @@
+export class ChartValidationError extends Error {
+    constructor(message) {
+        super(message);
+        this.name = 'ChartValidationError';
+    }
+}
+/**
+ * Validates chart data and configuration
+ */
+export class ChartValidator {
+    /**
+     * Validates that data is an array and not empty
+     */
+    static validateData(data) {
+        if (!Array.isArray(data)) {
+            throw new ChartValidationError(`Data must be an array, received ${typeof data}`);
+        }
+        if (data.length === 0) {
+            throw new ChartValidationError('Data array cannot be empty');
+        }
+        // Validate that all items are objects
+        data.forEach((item, index) => {
+            if (typeof item !== 'object' || item === null) {
+                throw new ChartValidationError(`Data item at index ${index} must be an object, received ${typeof item}`);
+            }
+        });
+    }
+    /**
+     * Validates that the specified dataKey exists in all data items
+     */
+    static validateDataKey(data, dataKey, componentName) {
+        const missingKeys = [];
+        data.forEach((item, index) => {
+            if (!(dataKey in item)) {
+                missingKeys.push(index);
+            }
+        });
+        if (missingKeys.length > 0) {
+            const indices = missingKeys.slice(0, 3).join(', ');
+            const more = missingKeys.length > 3
+                ? ` and ${missingKeys.length - 3} more`
+                : '';
+            throw new ChartValidationError(`${componentName}: dataKey "${dataKey}" not found in data items at indices: ${indices}${more}`);
+        }
+    }
+    /**
+     * Validates that data contains at least one valid numeric value for the specified key
+     */
+    static validateNumericData(data, dataKey, componentName) {
+        const hasNumericValue = data.some((item) => {
+            const value = item[dataKey];
+            return (typeof value === 'number' || !isNaN(parseFloat(String(value))));
+        });
+        if (!hasNumericValue) {
+            throw new ChartValidationError(`${componentName}: No valid numeric values found for dataKey "${dataKey}"`);
+        }
+    }
+    /**
+     * Validates scale configuration
+     */
+    static validateScaleConfig(scaleType, domain) {
+        if (scaleType === 'log' && domain) {
+            const hasZeroOrNegative = domain.some((v) => typeof v === 'number' && v <= 0);
+            if (hasZeroOrNegative) {
+                throw new ChartValidationError('Logarithmic scale cannot include zero or negative values in domain');
+            }
+        }
+    }
+    /**
+     * Warns about potential issues without throwing errors
+     */
+    static warn(message) {
+        console.warn(`[Chart Warning] ${message}`);
+    }
+}

package/x-axis.d.ts

@@ -0,0 +1,16 @@
+import { type Selection } from 'd3';
+import type { XAxisConfig, ChartTheme } from './types';
+import type { LayoutAwareComponent, ComponentSpace } from '@/lib/chart-interface';
+export declare class XAxis implements LayoutAwareComponent {
+    readonly type: "xAxis";
+    readonly dataKey?: string;
+    private readonly rotatedLabels;
+    private readonly tickPadding;
+    private readonly fontSize;
+    constructor(config?: XAxisConfig);
+    /**
+     * Returns the space required by the x-axis
+     */
+    getRequiredSpace(): ComponentSpace;
+    render(svg: Selection<SVGSVGElement, undefined, null, undefined>, x: any, theme: ChartTheme, yPosition: number): void;
+}

package/x-axis.js

@@ -0,0 +1,70 @@
+import { axisBottom } from 'd3';
+export class XAxis {
+    constructor(config) {
+        Object.defineProperty(this, "type", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: 'xAxis'
+        });
+        Object.defineProperty(this, "dataKey", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "rotatedLabels", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "tickPadding", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: 10
+        });
+        Object.defineProperty(this, "fontSize", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: 14
+        });
+        this.dataKey = config?.dataKey;
+        this.rotatedLabels = config?.rotatedLabels ?? false;
+    }
+    /**
+     * Returns the space required by the x-axis
+     */
+    getRequiredSpace() {
+        // Height = tick padding + font size + some extra space for descenders
+        // Rotated labels need more vertical space (roughly 2.5x for -45deg rotation)
+        const baseHeight = this.tickPadding + this.fontSize + 5;
+        const height = this.rotatedLabels ? baseHeight * 2.5 : baseHeight;
+        return {
+            width: 0, // X-axis spans full width
+            height,
+            position: 'bottom',
+        };
+    }
+    render(svg, x, theme, yPosition) {
+        const axis = svg
+            .append('g')
+            .attr('transform', `translate(0,${yPosition})`)
+            .call(axisBottom(x)
+            .tickSizeOuter(0)
+            .tickSize(0)
+            .tickPadding(this.tickPadding))
+            .attr('font-size', theme.axis.fontSize)
+            .attr('font-family', theme.axis.fontFamily)
+            .attr('stroke', 'none');
+        // Apply rotation to labels if enabled
+        if (this.rotatedLabels) {
+            axis.selectAll('text')
+                .style('text-anchor', 'end')
+                .attr('transform', 'rotate(-45)');
+        }
+        axis.selectAll('.domain').remove();
+    }
+}

package/xy-chart.d.ts

@@ -0,0 +1,18 @@
+import { BaseChart, type BaseChartConfig } from './base-chart';
+import type { ChartComponent } from '@/lib/chart-interface';
+export type XYChartConfig = BaseChartConfig;
+export declare class XYChart extends BaseChart {
+    private readonly series;
+    private sortedDataCache;
+    private xKeyCache;
+    constructor(config: XYChartConfig);
+    addChild(component: ChartComponent): this;
+    private rerender;
+    protected renderChart(): void;
+    private getXKey;
+    private getSortedData;
+    private setupScales;
+    private isHorizontalOrientation;
+    private createScale;
+    private renderSeries;
+}