@internetstiftelsen/charts 0.8.0 → 0.9.1

package/{xy-chart.js → dist/xy-chart.js}

@@ -1,7 +1,14 @@
 import { max, min, scaleBand, scaleLinear, scaleLog, scaleTime, } from 'd3';
-import { BaseChart } from './base-chart.js';
+import { BaseChart, } from './base-chart.js';
 import { ChartValidator } from './validation.js';
 import { GROUPED_GAP_TICK_PREFIX, GROUPED_GROUP_LABEL_KEY, } from './grouped-data.js';
+import { resolveScaleValue } from './scale-utils.js';
+const DEFAULT_SERIES_COLOR = '#8884d8';
+function isXYSeries(component) {
+    return (component.type === 'line' ||
+        component.type === 'bar' ||
+        component.type === 'area');
+}
 export class XYChart extends BaseChart {
     constructor(config) {
         super(config);
@@ -35,95 +42,49 @@ export class XYChart extends BaseChart {
             writable: true,
             value: void 0
         });
+        Object.defineProperty(this, "orientation", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        this.orientation = config.orientation ?? 'vertical';
         this.barStackMode = config.barStack?.mode ?? 'normal';
         this.barStackGap = config.barStack?.gap ?? 0.1;
         this.barStackReverseSeries = config.barStack?.reverseSeries ?? false;
         this.areaStackMode = config.areaStack?.mode ?? 'none';
     }
     addChild(component) {
-        const type = component.type;
-        if (type === 'line' || type === 'bar' || type === 'area') {
-            const series = component;
-            const defaultColor = '#8884d8';
-            const colorIndex = this.series.length % this.theme.colorPalette.length;
-            const newColor = this.theme.colorPalette[colorIndex];
-            if (type === 'line') {
-                const lineSeries = series;
-                const currentColor = lineSeries.stroke;
-                if (!currentColor || currentColor === defaultColor) {
-                    lineSeries.stroke = newColor;
-                }
-            }
-            else if (type === 'bar') {
-                const barSeries = series;
-                const currentColor = barSeries.fill;
-                if (!currentColor || currentColor === defaultColor) {
-                    barSeries.fill = newColor;
-                }
-            }
-            else {
-                const areaSeries = series;
-                const isUsingDefaultColor = (!areaSeries.fill || areaSeries.fill === defaultColor) &&
-                    (!areaSeries.stroke || areaSeries.stroke === defaultColor);
-                if (isUsingDefaultColor) {
-                    areaSeries.fill = newColor;
-                    areaSeries.stroke = newColor;
-                }
-            }
-            this.series.push(series);
-        }
-        else if (type === 'xAxis') {
-            this.xAxis = component;
+        if (isXYSeries(component)) {
+            this.series.push(this.resolveSeriesDefaults(component));
+            return this;
         }
-        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;
+        return super.addChild(component);
     }
     getExportComponents() {
-        const components = [];
-        if (this.title) {
-            components.push(this.title);
-        }
-        if (this.grid) {
-            components.push(this.grid);
-        }
-        components.push(...this.series);
-        if (this.xAxis) {
-            components.push(this.xAxis);
-        }
-        if (this.yAxis) {
-            components.push(this.yAxis);
-        }
-        if (this.tooltip) {
-            components.push(this.tooltip);
-        }
-        if (this.legend) {
-            components.push(this.legend);
-        }
-        return components;
+        return [
+            ...this.getBaseExportComponents({
+                title: true,
+                grid: true,
+            }),
+            ...this.series,
+            ...this.getBaseExportComponents({
+                xAxis: true,
+                yAxis: true,
+                tooltip: true,
+                legend: true,
+            }),
+        ];
     }
     createExportChart() {
         return new XYChart({
             data: this.data,
+            width: this.configuredWidth,
+            height: this.configuredHeight,
             theme: this.theme,
             scales: this.scaleConfig,
             responsive: this.responsiveConfig,
+            orientation: this.orientation,
             barStack: {
                 mode: this.barStackMode,
                 gap: this.barStackGap,
@@ -136,34 +97,16 @@ export class XYChart extends BaseChart {
     }
     applyComponentOverrides(overrides) {
         const restoreBase = super.applyComponentOverrides(overrides);
-        if (overrides.size === 0) {
-            return restoreBase;
-        }
-        const previousSeries = [...this.series];
-        this.series.forEach((series, index) => {
-            const override = overrides.get(series);
-            if (override &&
-                (override.type === 'line' ||
-                    override.type === 'bar' ||
-                    override.type === 'area')) {
-                this.series[index] = override;
-            }
-        });
+        const restoreSeries = this.applyArrayComponentOverrides(this.series, overrides, isXYSeries);
         return () => {
-            this.series.splice(0, this.series.length, ...previousSeries);
+            restoreSeries();
             restoreBase();
         };
     }
-    rerender() {
-        if (!this.container) {
-            return;
-        }
-        this.update(this.sourceData);
-    }
-    prepareLayout() {
-        const svgNode = this.svg?.node();
+    prepareLayout(context) {
+        super.prepareLayout(context);
         this.xAxis?.clearEstimatedSpace?.();
-        if (svgNode && this.xAxis) {
+        if (this.xAxis) {
             const xKey = this.getXKey();
             const labelKey = this.xAxis.labelKey;
             const labels = this.data.map((item) => {
@@ -172,16 +115,11 @@ export class XYChart extends BaseChart {
                 }
                 return item[xKey];
             });
-            this.xAxis.estimateLayoutSpace?.(labels, this.theme, svgNode);
-        }
-        if (svgNode && this.legend?.isInlineMode()) {
-            this.legend.estimateLayoutSpace(this.getLegendSeries(), this.theme, this.width, svgNode);
+            this.xAxis.estimateLayoutSpace?.(labels, this.renderTheme, context.svgNode);
         }
     }
-    renderChart() {
-        if (!this.plotArea) {
-            throw new Error('Plot area not calculated');
-        }
+    renderChart({ svg, plotGroup, plotArea, }) {
+        this.validateSeriesOrientation();
         this.series.forEach((series) => {
             const typeName = series.type === 'line'
                 ? 'Line'
@@ -209,32 +147,26 @@ export class XYChart extends BaseChart {
         const categoryScaleType = this.getCategoryScaleType();
         const visibleSeries = this.getVisibleSeries();
         this.setupScales();
-        if (this.title) {
-            const titlePos = this.layoutManager.getComponentPosition(this.title);
-            this.title.render(this.svg, this.theme, this.width, titlePos.x, titlePos.y);
-        }
+        this.renderTitle(svg);
         if (this.grid && this.x && this.y) {
-            this.grid.render(this.plotGroup, this.x, this.y, this.theme);
+            this.grid.render(plotGroup, this.x, this.y, this.renderTheme);
         }
         this.renderSeries(visibleSeries);
         if (this.x && this.y) {
             if (this.xAxis) {
-                this.xAxis.render(this.svg, this.x, this.theme, this.plotArea.bottom, this.data);
+                this.xAxis.render(svg, this.x, this.renderTheme, plotArea.bottom, this.data);
             }
             if (this.yAxis) {
-                this.yAxis.render(this.svg, this.y, this.theme, this.plotArea.left);
+                this.yAxis.render(svg, this.y, this.renderTheme, plotArea.left);
             }
         }
         if (this.tooltip && this.x && this.y) {
             const visibleAreaSeries = visibleSeries.filter((series) => series.type === 'area');
             const areaStackingContextBySeries = this.computeAreaStackingContexts(this.data, xKey, visibleAreaSeries);
-            this.tooltip.initialize(this.theme);
-            this.tooltip.attachToArea(this.svg, this.data, visibleSeries, xKey, this.x, this.y, this.theme, this.plotArea, this.parseValue.bind(this), this.isHorizontalOrientation(), categoryScaleType, (series, dataPoint) => this.getSeriesTooltipValue(series, dataPoint, xKey, areaStackingContextBySeries));
-        }
-        if (this.legend?.isInlineMode()) {
-            const legendPos = this.layoutManager.getComponentPosition(this.legend);
-            this.legend.render(this.svg, this.getLegendSeries(), this.theme, this.width, legendPos.x, legendPos.y);
+            this.tooltip.initialize(this.renderTheme);
+            this.tooltip.attachToArea(svg, this.data, visibleSeries, xKey, this.x, this.y, this.renderTheme, plotArea, this.parseValue.bind(this), this.isHorizontalOrientation(), categoryScaleType, (series, dataPoint) => this.getSeriesTooltipValue(series, dataPoint, xKey, areaStackingContextBySeries));
         }
+        this.renderInlineLegend(svg);
     }
     getXKey() {
         if (this.xAxis?.dataKey) {
@@ -261,11 +193,9 @@ export class XYChart extends BaseChart {
         return this.scaleConfig.x?.type || 'band';
     }
     getVisibleSeries() {
-        const displaySeries = this.getDisplaySeries();
-        if (!this.legend) {
-            return displaySeries;
-        }
-        return displaySeries.filter((series) => this.legend.isSeriesVisible(series.dataKey));
+        return this.filterVisibleItems(this.getDisplaySeries(), (series) => {
+            return series.dataKey;
+        });
     }
     getDisplaySeries() {
         if (!this.barStackReverseSeries) {
@@ -288,9 +218,42 @@ export class XYChart extends BaseChart {
             return nextBar;
         });
     }
+    resolveSeriesDefaults(series) {
+        const colorIndex = this.series.length % this.theme.colorPalette.length;
+        const paletteColor = this.theme.colorPalette[colorIndex];
+        if (series.type === 'line') {
+            return this.cloneSeriesWithOverride(series, {
+                stroke: this.shouldReplaceSeriesColor(series.stroke)
+                    ? paletteColor
+                    : series.stroke,
+            });
+        }
+        if (series.type === 'bar') {
+            return this.cloneSeriesWithOverride(series, {
+                fill: this.shouldReplaceSeriesColor(series.fill)
+                    ? paletteColor
+                    : series.fill,
+            });
+        }
+        const shouldUsePaletteColor = this.shouldReplaceSeriesColor(series.fill) &&
+            this.shouldReplaceSeriesColor(series.stroke);
+        return this.cloneSeriesWithOverride(series, shouldUsePaletteColor
+            ? {
+                fill: paletteColor,
+                stroke: paletteColor,
+            }
+            : {});
+    }
+    shouldReplaceSeriesColor(color) {
+        return !color || color === DEFAULT_SERIES_COLOR;
+    }
+    cloneSeriesWithOverride(series, override) {
+        const exportable = series;
+        return exportable.createExportComponent(override);
+    }
     setupScales() {
         const xKey = this.getXKey();
-        const isHorizontal = this.isHorizontalOrientation();
+        const isHorizontal = this.orientation === 'horizontal';
         let xConfig;
         let yConfig;
         if (isHorizontal) {
@@ -305,7 +268,21 @@ export class XYChart extends BaseChart {
         this.y = this.createScale(yConfig, isHorizontal ? xKey : null, 'y');
     }
     isHorizontalOrientation() {
-        return this.series.some((s) => s.type === 'bar' && s.orientation === 'horizontal');
+        return this.orientation === 'horizontal';
+    }
+    validateSeriesOrientation() {
+        if (this.orientation !== 'horizontal') {
+            return;
+        }
+        const hasLineSeries = this.series.some((series) => {
+            return series.type === 'line';
+        });
+        const hasAreaSeries = this.series.some((series) => {
+            return series.type === 'area';
+        });
+        if (hasLineSeries || hasAreaSeries) {
+            throw new Error('XYChart: horizontal orientation currently supports Bar series only');
+        }
     }
     collectSeriesValues(series) {
         const values = [];
@@ -389,8 +366,8 @@ export class XYChart extends BaseChart {
         }
         else if (scaleType === 'time' && dataKey) {
             domain = [
-                min(this.data, (d) => new Date(d[dataKey])),
-                max(this.data, (d) => new Date(d[dataKey])),
+                min(this.data, (d) => resolveScaleValue(d[dataKey], 'time')),
+                max(this.data, (d) => resolveScaleValue(d[dataKey], 'time')),
             ];
         }
         else if ((scaleType === 'linear' || scaleType === 'log') && dataKey) {
@@ -555,13 +532,13 @@ export class XYChart extends BaseChart {
                 gap: this.barStackGap,
                 nextLayerData,
             };
-            series.render(this.plotGroup, this.data, xKey, this.x, this.y, this.parseValue, categoryScaleType, this.theme, stackingContext);
+            series.render(this.plotGroup, this.data, xKey, this.x, this.y, this.parseValue, categoryScaleType, this.renderTheme, stackingContext, this.orientation);
         });
         areaSeries.forEach((series) => {
-            series.render(this.plotGroup, this.data, xKey, this.x, this.y, this.parseValue, categoryScaleType, this.theme, areaStackingContextBySeries.get(series), areaValueLabelLayer ?? undefined);
+            series.render(this.plotGroup, this.data, xKey, this.x, this.y, this.parseValue, categoryScaleType, this.renderTheme, areaStackingContextBySeries.get(series), areaValueLabelLayer ?? undefined);
         });
         lineSeries.forEach((series) => {
-            series.render(this.plotGroup, this.data, xKey, this.x, this.y, this.parseValue, categoryScaleType, this.theme);
+            series.render(this.plotGroup, this.data, xKey, this.x, this.y, this.parseValue, categoryScaleType, this.renderTheme);
         });
         if (areaValueLabelLayer) {
             areaValueLabelLayer.raise();

package/{y-axis.d.ts → dist/y-axis.d.ts}

@@ -13,7 +13,7 @@ export declare class YAxis implements LayoutAwareComponent<YAxisConfigBase> {
     readonly exportHooks?: ExportHooks<YAxisConfigBase>;
     constructor(config?: YAxisConfig);
     getExportConfig(): YAxisConfigBase;
-    createExportComponent(override?: Partial<YAxisConfigBase>): LayoutAwareComponent;
+    createExportComponent(override?: Partial<YAxisConfigBase>): LayoutAwareComponent<YAxisConfigBase>;
     /**
      * Returns the space required by the y-axis
      */

package/{y-axis.js → dist/y-axis.js}

@@ -32,7 +32,6 @@ export class YAxis {
             writable: true,
             value: void 0
         });
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         Object.defineProperty(this, "tickFormat", {
             enumerable: true,
             configurable: true,
@@ -108,11 +107,12 @@ export class YAxis {
         const axis = axisLeft(y).tickSize(0).tickPadding(this.tickPadding);
         // Apply tick formatting if specified
         if (this.tickFormat) {
-            if (typeof this.tickFormat === 'function') {
-                axis.ticks(5).tickFormat(this.tickFormat);
+            const tickFormat = this.tickFormat;
+            if (typeof tickFormat === 'function') {
+                axis.ticks(5).tickFormat((value) => tickFormat(value));
             }
             else {
-                axis.ticks(5, this.tickFormat);
+                axis.ticks(5, tickFormat);
             }
         }
         else {

package/package.json

@@ -1,23 +1,24 @@
 {
-    "version": "0.8.0",
+    "version": "0.9.1",
     "name": "@internetstiftelsen/charts",
     "type": "module",
     "sideEffects": false,
     "exports": {
         "./*": {
-            "types": "./*.d.ts",
-            "import": "./*.js"
-        }
+            "types": "./dist/*.d.ts",
+            "import": "./dist/*.js"
+        },
+        "./package.json": "./package.json"
     },
     "files": [
-        "*.js",
-        "*.d.ts",
-        "README.md"
+        "dist",
+        "README.md",
+        "LICENSE"
     ],
     "scripts": {
         "dev": "vite",
         "dev:docs": "vite --config vite.docs.config.ts --open",
-        "build": "tsc --project tsconfig.lib.json && tsc-alias --project tsconfig.lib.json",
+        "build": "rm -rf dist && tsc --project tsconfig.lib.json && tsc-alias --project tsconfig.lib.json",
         "build:demo": "tsc -b && vite build",
         "build:docs": "vite build --config vite.docs.config.ts && cp -R docs dist-docs/docs",
         "lint": "eslint .",
@@ -26,55 +27,58 @@
         "preview:docs": "vite preview --config vite.docs.config.ts",
         "test": "vitest",
         "test:run": "vitest run",
+        "verify": "pnpm lint && pnpm test:run && pnpm build",
         "build:lib": "npm run build",
-        "prepub": "rm -rf dist && npm run build:lib && cp package.json dist && cp README.md dist",
-        "pub": "npm run prepub && cd dist && npm publish --access public"
+        "prepublishOnly": "pnpm verify",
+        "pub": "npm publish --access public"
     },
     "dependencies": {
-        "@handsontable/react-wrapper": "^16.2.0",
-        "@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",
-        "@types/d3": "^7.4.3",
-        "class-variance-authority": "^0.7.1",
-        "clsx": "^2.1.1",
         "d3": "^7.9.0",
-        "handsontable": "^16.2.0",
-        "lucide-react": "^0.548.0",
-        "react": "^19.2.4",
-        "react-dom": "^19.2.4",
-        "tailwind-merge": "^3.4.0",
-        "tailwindcss": "^4.1.18"
+        "d3-cloud": "^1.2.9"
     },
     "optionalDependencies": {
-        "jspdf": "^4.1.0",
+        "jspdf": "^4.2.1",
         "xlsx": "^0.18.5"
     },
     "devDependencies": {
-        "@eslint/js": "^9.39.2",
-        "@internetstiftelsen/styleguide": "^5.1.23",
-        "@speed-highlight/core": "^1.2.14",
-        "@tailwindcss/vite": "^4.1.18",
+        "@eslint/js": "^9.39.4",
+        "@handsontable/react-wrapper": "^16.2.0",
+        "@internetstiftelsen/styleguide": "^5.1.24",
+        "@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",
+        "@speed-highlight/core": "^1.2.15",
+        "@tailwindcss/vite": "^4.2.2",
         "@testing-library/dom": "^10.4.1",
         "@testing-library/jest-dom": "^6.9.1",
         "@testing-library/react": "^16.3.2",
-        "@types/node": "^24.10.13",
+        "@types/d3": "^7.4.3",
+        "@types/d3-cloud": "^1.2.9",
+        "@types/node": "^24.12.0",
         "@types/react": "^19.2.14",
         "@types/react-dom": "^19.2.3",
-        "@vitejs/plugin-react-swc": "^4.2.3",
-        "eslint": "^9.39.2",
+        "@vitejs/plugin-react-swc": "^4.3.0",
+        "class-variance-authority": "^0.7.1",
+        "clsx": "^2.1.1",
+        "eslint": "^9.39.4",
         "eslint-plugin-react-hooks": "^7.0.1",
         "eslint-plugin-react-refresh": "^0.4.26",
         "globals": "^16.5.0",
+        "handsontable": "^16.2.0",
         "jsdom": "^27.4.0",
+        "lucide-react": "^0.548.0",
         "prettier": "3.6.2",
-        "sass": "^1.97.3",
+        "react": "^19.2.4",
+        "react-dom": "^19.2.4",
+        "sass": "^1.98.0",
+        "tailwind-merge": "^3.5.0",
+        "tailwindcss": "^4.2.2",
         "tsc-alias": "^1.8.16",
         "tw-animate-css": "^1.4.0",
         "typescript": "~5.9.3",
-        "typescript-eslint": "^8.55.0",
+        "typescript-eslint": "^8.57.1",
         "vite": "^7.3.1",
-        "vitest": "^4.0.18"
+        "vitest": "^4.1.0"
     }
 }

package/chart-interface.d.ts

@@ -1,13 +0,0 @@
-import type { ExportHooks } from './types.js';
-export interface ChartComponent<TConfig = any> {
-    type: 'line' | 'area' | 'bar' | 'xAxis' | 'yAxis' | 'grid' | 'tooltip' | 'legend' | 'title' | 'donutCenterContent';
-    exportHooks?: ExportHooks<TConfig>;
-}
-export type ComponentSpace = {
-    width: number;
-    height: number;
-    position: 'top' | 'bottom' | 'left' | 'right';
-};
-export interface LayoutAwareComponent<TConfig = any> extends ChartComponent<TConfig> {
-    getRequiredSpace(): ComponentSpace;
-}

package/donut-chart.d.ts

@@ -1,38 +0,0 @@
-import type { DataItem, LegendSeries } from './types.js';
-import { BaseChart, type BaseChartConfig } from './base-chart.js';
-import type { ChartComponent, LayoutAwareComponent } from './chart-interface.js';
-export type DonutConfig = {
-    innerRadius?: number;
-    padAngle?: number;
-    cornerRadius?: number;
-};
-export type DonutChartConfig = BaseChartConfig & {
-    donut?: DonutConfig;
-    valueKey?: string;
-    labelKey?: string;
-};
-export declare class DonutChart extends BaseChart {
-    private readonly innerRadiusRatio;
-    private readonly padAngle;
-    private readonly cornerRadius;
-    private readonly valueKey;
-    private readonly labelKey;
-    private segments;
-    private centerContent;
-    constructor(config: DonutChartConfig);
-    private validateDonutData;
-    private prepareSegments;
-    addChild(component: ChartComponent): this;
-    protected getExportComponents(): ChartComponent[];
-    update(data: DataItem[]): void;
-    protected getLayoutComponents(): LayoutAwareComponent[];
-    protected prepareLayout(): void;
-    protected createExportChart(): BaseChart;
-    protected applyComponentOverrides(overrides: Map<ChartComponent, ChartComponent>): () => void;
-    protected renderChart(): void;
-    private resolveFontScale;
-    protected getLegendSeries(): LegendSeries[];
-    private positionTooltip;
-    private buildTooltipContent;
-    private renderSegments;
-}