@internetstiftelsen/charts 0.0.1

package/xy-chart.js

@@ -0,0 +1,272 @@
+import { max, min, scaleBand, scaleLinear, scaleTime, scaleLog, } from 'd3';
+import { getSeriesColor } from './types';
+import { BaseChart } from './base-chart';
+import { ChartValidator } from './validation';
+export class XYChart extends BaseChart {
+    constructor(config) {
+        super(config);
+        Object.defineProperty(this, "series", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: []
+        });
+        Object.defineProperty(this, "sortedDataCache", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "xKeyCache", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+    }
+    addChild(component) {
+        const type = component.type;
+        if (type === 'line' || type === 'bar') {
+            const series = component;
+            // Auto-assign color if not specified
+            const defaultColor = '#8884d8';
+            const currentColor = getSeriesColor(series);
+            if (!currentColor || currentColor === defaultColor) {
+                const colorIndex = this.series.length % this.theme.colorPalette.length;
+                const newColor = this.theme.colorPalette[colorIndex];
+                if (type === 'line') {
+                    series.stroke = newColor;
+                }
+                else {
+                    series.fill = newColor;
+                }
+            }
+            this.series.push(series);
+        }
+        else if (type === 'xAxis') {
+            this.xAxis = component;
+        }
+        else if (type === 'yAxis') {
+            this.yAxis = component;
+        }
+        else if (type === 'grid') {
+            this.grid = component;
+        }
+        else if (type === 'tooltip') {
+            this.tooltip = component;
+        }
+        else if (type === 'legend') {
+            this.legend = component;
+            this.legend.setToggleCallback(() => {
+                this.rerender();
+            });
+        }
+        else if (type === 'title') {
+            this.title = component;
+        }
+        return this;
+    }
+    rerender() {
+        this.update(this.data);
+    }
+    renderChart() {
+        if (!this.plotArea) {
+            throw new Error('Plot area not calculated');
+        }
+        // Validate that all series dataKeys exist in data
+        this.series.forEach((series) => {
+            const typeName = series.type === 'line' ? 'Line' : 'Bar';
+            ChartValidator.validateDataKey(this.data, series.dataKey, typeName);
+            ChartValidator.validateNumericData(this.data, series.dataKey, typeName);
+        });
+        // Validate xAxis dataKey if specified
+        if (this.xAxis?.dataKey) {
+            ChartValidator.validateDataKey(this.data, this.xAxis.dataKey, 'XAxis');
+        }
+        // Cache sorted data
+        const xKey = this.getXKey();
+        const sortedData = this.getSortedData(xKey);
+        this.setupScales();
+        // Render title if present
+        if (this.title) {
+            const titlePos = this.layoutManager.getComponentPosition(this.title);
+            this.title.render(this.svg, this.theme, this.width, titlePos.x, titlePos.y);
+        }
+        // Render grid in the plot group
+        if (this.grid && this.x && this.y) {
+            this.grid.render(this.plotGroup, this.x, this.y, this.theme);
+        }
+        // Render series in the plot group
+        this.renderSeries();
+        // Render axes at plot area boundaries
+        if (this.x && this.y) {
+            if (this.xAxis) {
+                this.xAxis.render(this.svg, this.x, this.theme, this.plotArea.bottom);
+            }
+            if (this.yAxis) {
+                this.yAxis.render(this.svg, this.y, this.theme, this.plotArea.left);
+            }
+        }
+        // Render tooltip
+        if (this.tooltip && this.x && this.y) {
+            this.tooltip.initialize(this.theme);
+            this.tooltip.attachToArea(this.svg, sortedData, this.series, xKey, this.x, this.y, this.theme, this.plotArea, this.parseValue.bind(this));
+        }
+        // Render legend if present
+        if (this.legend) {
+            const legendPos = this.layoutManager.getComponentPosition(this.legend);
+            this.legend.render(this.svg, this.series, this.theme, this.width, legendPos.x, legendPos.y);
+        }
+    }
+    getXKey() {
+        if (this.xAxis?.dataKey) {
+            return this.xAxis.dataKey;
+        }
+        return (Object.keys(this.data[0]).find((key) => !this.series.some((s) => s.dataKey === key)) || 'column');
+    }
+    getSortedData(xKey) {
+        // Return cached data if xKey matches
+        if (this.sortedDataCache && this.xKeyCache === xKey) {
+            return this.sortedDataCache;
+        }
+        // Sort and cache
+        this.xKeyCache = xKey;
+        this.sortedDataCache = [...this.data].sort((a, b) => String(a[xKey]).localeCompare(String(b[xKey])));
+        return this.sortedDataCache;
+    }
+    setupScales() {
+        const xKey = this.getXKey();
+        const isHorizontal = this.isHorizontalOrientation();
+        let xConfig;
+        let yConfig;
+        if (isHorizontal) {
+            // For horizontal bars, swap the user's scale configuration
+            // User's X scale config → Y scale (categories)
+            // User's Y scale config → X scale (values)
+            xConfig = this.scaleConfig.y || { type: 'linear' };
+            yConfig = this.scaleConfig.x || { type: 'band' };
+        }
+        else {
+            // Vertical orientation uses normal configuration
+            xConfig = this.scaleConfig.x || { type: 'band' };
+            yConfig = this.scaleConfig.y || { type: 'linear' };
+        }
+        // Setup X scale
+        this.x = this.createScale(xConfig, isHorizontal ? null : xKey, 'x');
+        // Setup Y scale
+        this.y = this.createScale(yConfig, isHorizontal ? xKey : null, 'y');
+    }
+    isHorizontalOrientation() {
+        return this.series.some((s) => s.type === 'bar' && s.orientation === 'horizontal');
+    }
+    createScale(config, dataKey, axis) {
+        if (!this.plotArea) {
+            throw new Error('Plot area not calculated');
+        }
+        const scaleType = config.type || (axis === 'x' ? 'band' : 'linear');
+        const isXAxis = axis === 'x';
+        // Add padding between plot area and axis
+        const plotPadding = 10;
+        // For X-axis: add padding on the left (start)
+        // For Y-axis: add padding on the bottom (start, which is the larger value since Y goes bottom-to-top)
+        const rangeStart = isXAxis
+            ? this.plotArea.left + plotPadding
+            : this.plotArea.bottom - plotPadding;
+        const rangeEnd = isXAxis ? this.plotArea.right : this.plotArea.top;
+        let domain;
+        if (config.domain) {
+            domain = config.domain;
+        }
+        else if (scaleType === 'band' && dataKey) {
+            domain = this.data.map((d) => String(d[dataKey]));
+        }
+        else if (scaleType === 'time' && dataKey) {
+            domain = [
+                min(this.data, (d) => new Date(d[dataKey])),
+                max(this.data, (d) => new Date(d[dataKey])),
+            ];
+        }
+        else if ((scaleType === 'linear' || scaleType === 'log') && dataKey) {
+            // For linear and log scales with a dataKey, calculate from that key
+            const values = this.data.map((d) => this.parseValue(d[dataKey]));
+            const minVal = min(values) ?? 0;
+            const maxVal = max(values) ?? 100;
+            domain =
+                scaleType === 'log' && minVal <= 0
+                    ? [1, maxVal]
+                    : [minVal, maxVal];
+        }
+        else {
+            // Calculate from series data (for value axes without explicit dataKey)
+            const values = this.data.flatMap((d) => this.series.map((s) => this.parseValue(d[s.dataKey])));
+            const minVal = min(values) ?? 0;
+            const maxVal = max(values) ?? 100;
+            domain =
+                scaleType === 'log' && minVal <= 0
+                    ? [1, maxVal]
+                    : [minVal, maxVal];
+        }
+        switch (scaleType) {
+            case 'band': {
+                const scale = scaleBand()
+                    .domain(domain)
+                    .rangeRound([rangeStart, rangeEnd]);
+                if (config.padding !== undefined) {
+                    scale.paddingInner(config.padding);
+                }
+                else {
+                    scale.paddingInner(0.1);
+                }
+                return scale;
+            }
+            case 'linear': {
+                const scale = scaleLinear()
+                    .domain(domain)
+                    .rangeRound([rangeStart, rangeEnd]);
+                if (config.nice !== false) {
+                    scale.nice();
+                }
+                return scale;
+            }
+            case 'time': {
+                const scale = scaleTime()
+                    .domain(domain)
+                    .range([rangeStart, rangeEnd]);
+                if (config.nice !== false) {
+                    scale.nice();
+                }
+                return scale;
+            }
+            case 'log': {
+                const scale = scaleLog()
+                    .domain(domain)
+                    .rangeRound([rangeStart, rangeEnd]);
+                if (config.nice !== false) {
+                    scale.nice();
+                }
+                return scale;
+            }
+            default:
+                throw new Error(`Unsupported scale type: ${scaleType}`);
+        }
+    }
+    renderSeries() {
+        if (!this.plotGroup || !this.x || !this.y)
+            return;
+        const xKey = this.getXKey();
+        const sortedData = this.getSortedData(xKey);
+        const isHorizontal = this.isHorizontalOrientation();
+        // For horizontal bars, the category scale is on Y (user's X config becomes Y)
+        // For vertical bars, the category scale is on X (user's X config stays X)
+        const categoryScaleType = isHorizontal
+            ? this.scaleConfig.x?.type || 'band'
+            : this.scaleConfig.x?.type || 'band';
+        // Filter series based on legend visibility
+        const visibleSeries = this.legend
+            ? this.series.filter((series) => this.legend.isSeriesVisible(series.dataKey))
+            : this.series;
+        visibleSeries.forEach((series) => {
+            series.render(this.plotGroup, sortedData, xKey, this.x, this.y, this.parseValue, categoryScaleType);
+        });
+    }
+}

package/y-axis.d.ts

@@ -0,0 +1,15 @@
+import { type Selection } from 'd3';
+import type { ChartTheme, YAxisConfig } from './types';
+import type { LayoutAwareComponent, ComponentSpace } from '@/lib/chart-interface';
+export declare class YAxis implements LayoutAwareComponent {
+    readonly type: "yAxis";
+    private readonly tickPadding;
+    private readonly maxLabelWidth;
+    private readonly tickFormat;
+    constructor(config?: YAxisConfig);
+    /**
+     * Returns the space required by the y-axis
+     */
+    getRequiredSpace(): ComponentSpace;
+    render(svg: Selection<SVGSVGElement, undefined, null, undefined>, y: any, theme: ChartTheme, xPosition: number): void;
+}

package/y-axis.js

@@ -0,0 +1,58 @@
+import { axisLeft } from 'd3';
+export class YAxis {
+    constructor(config) {
+        Object.defineProperty(this, "type", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: 'yAxis'
+        });
+        Object.defineProperty(this, "tickPadding", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: 10
+        });
+        Object.defineProperty(this, "maxLabelWidth", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: 40
+        }); // Estimated max width for Y-axis labels
+        Object.defineProperty(this, "tickFormat", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        this.tickFormat = config?.tickFormat ?? null;
+    }
+    /**
+     * Returns the space required by the y-axis
+     */
+    getRequiredSpace() {
+        // Width = max label width + tick padding
+        return {
+            width: this.maxLabelWidth + this.tickPadding,
+            height: 0, // Y-axis spans full height
+            position: 'left',
+        };
+    }
+    render(svg, y, theme, xPosition) {
+        const axis = axisLeft(y).tickSize(0).tickPadding(this.tickPadding);
+        // Apply tick formatting if specified
+        if (this.tickFormat) {
+            axis.ticks(5, this.tickFormat);
+        }
+        else {
+            axis.ticks(5);
+        }
+        svg.append('g')
+            .attr('transform', `translate(${xPosition},0)`)
+            .call(axis)
+            .attr('font-size', theme.axis.fontSize)
+            .attr('font-family', theme.axis.fontFamily)
+            .selectAll('.domain')
+            .remove();
+    }
+}