@internetstiftelsen/charts 0.9.0 → 0.9.2

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

@@ -2,14 +2,23 @@ import { axisBottom } from 'd3';
 import { measureTextWidth, truncateText, wrapText, mergeDeep } from './utils.js';
 import { GROUPED_CATEGORY_ID_KEY, GROUPED_CATEGORY_LABEL_KEY, GROUPED_GAP_TICK_PREFIX, GROUPED_GROUP_LABEL_KEY, } from './grouped-data.js';
 export class XAxis {
+    resolveFontSizeValue(fontSize, fallback) {
+        if (typeof fontSize === 'number' && Number.isFinite(fontSize)) {
+            return fontSize;
+        }
+        if (typeof fontSize === 'string') {
+            const parsedFontSize = parseFloat(fontSize);
+            if (Number.isFinite(parsedFontSize)) {
+                return parsedFontSize;
+            }
+        }
+        return fallback;
+    }
     resolveGroupLabelStyle(theme) {
         const axisGroupLabel = theme.axis.groupLabel;
         const fontFamily = axisGroupLabel?.fontFamily ?? theme.axis.fontFamily;
         const fontWeight = axisGroupLabel?.fontWeight ?? '700';
-        const parsedFontSize = parseFloat(axisGroupLabel?.fontSize ?? theme.axis.fontSize);
-        const fontSize = Number.isFinite(parsedFontSize)
-            ? parsedFontSize
-            : this.fontSize;
+        const fontSize = this.resolveFontSizeValue(axisGroupLabel?.fontSize ?? theme.axis.fontSize, this.fontSize);
         const color = axisGroupLabel?.color ?? '#111827';
         return {
             fontFamily,
@@ -91,7 +100,6 @@ export class XAxis {
             writable: true,
             value: void 0
         });
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         Object.defineProperty(this, "tickFormat", {
             enumerable: true,
             configurable: true,
@@ -223,12 +231,7 @@ export class XAxis {
             this.wrapLineCount = 1;
             return;
         }
-        const parsedFontSize = typeof theme.axis.fontSize === 'string'
-            ? parseFloat(theme.axis.fontSize)
-            : theme.axis.fontSize;
-        this.fontSize = Number.isFinite(parsedFontSize)
-            ? parsedFontSize
-            : this.fontSize;
+        this.fontSize = this.resolveFontSizeValue(theme.axis.fontSize, this.fontSize);
         const fontSize = this.fontSize;
         const fontFamily = theme.axis.fontFamily;
         const fontWeight = theme.axis.fontWeight || 'normal';
@@ -308,11 +311,12 @@ export class XAxis {
         }
         else if (this.tickFormat) {
             // Apply tick formatting if specified
-            if (typeof this.tickFormat === 'function') {
-                axisGenerator.tickFormat(this.tickFormat);
+            const tickFormat = this.tickFormat;
+            if (typeof tickFormat === 'function') {
+                axisGenerator.tickFormat((value) => tickFormat(value));
             }
             else {
-                axisGenerator.ticks(5, this.tickFormat);
+                axisGenerator.ticks(5, tickFormat);
             }
         }
         const axis = svg

package/{xy-chart.d.ts → dist/xy-chart.d.ts}

@@ -1,7 +1,8 @@
 import { BaseChart, type BaseChartConfig, type BaseLayoutContext, type BaseRenderContext } from './base-chart.js';
-import type { ChartComponent } from './chart-interface.js';
-import { type AreaStackConfig, type BarStackConfig, type LegendSeries } from './types.js';
+import type { ChartComponentBase } from './chart-interface.js';
+import { type AreaStackConfig, type BarStackConfig, type LegendSeries, type Orientation } from './types.js';
 export type XYChartConfig = BaseChartConfig & {
+    orientation?: Orientation;
     barStack?: BarStackConfig;
     areaStack?: AreaStackConfig;
 };
@@ -11,11 +12,12 @@ export declare class XYChart extends BaseChart {
     private barStackGap;
     private barStackReverseSeries;
     private areaStackMode;
+    private readonly orientation;
     constructor(config: XYChartConfig);
-    addChild(component: ChartComponent): this;
-    protected getExportComponents(): ChartComponent[];
+    addChild(component: ChartComponentBase): this;
+    protected getExportComponents(): ChartComponentBase[];
     protected createExportChart(): BaseChart;
-    protected applyComponentOverrides(overrides: Map<ChartComponent, ChartComponent>): () => void;
+    protected applyComponentOverrides(overrides: Map<ChartComponentBase, ChartComponentBase>): () => void;
     protected prepareLayout(context: BaseLayoutContext): void;
     protected renderChart({ svg, plotGroup, plotArea, }: BaseRenderContext): void;
     private getXKey;
@@ -28,6 +30,7 @@ export declare class XYChart extends BaseChart {
     private cloneSeriesWithOverride;
     private setupScales;
     private isHorizontalOrientation;
+    private validateSeriesOrientation;
     private collectSeriesValues;
     private getStackedAreaGroups;
     private buildBandDomainWithGroupGaps;

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

@@ -2,6 +2,7 @@ import { max, min, scaleBand, scaleLinear, scaleLog, scaleTime, } from 'd3';
 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' ||
@@ -41,6 +42,13 @@ 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;
@@ -71,9 +79,12 @@ export class XYChart extends BaseChart {
     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,
@@ -108,6 +119,7 @@ export class XYChart extends BaseChart {
         }
     }
     renderChart({ svg, plotGroup, plotArea, }) {
+        this.validateSeriesOrientation();
         this.series.forEach((series) => {
             const typeName = series.type === 'line'
                 ? 'Line'
@@ -137,7 +149,7 @@ export class XYChart extends BaseChart {
         this.setupScales();
         this.renderTitle(svg);
         if (this.grid && this.x && this.y) {
-            this.grid.render(plotGroup, this.x, this.y, this.renderTheme);
+            this.grid.render(plotGroup, this.x, this.y, this.renderTheme, this.isHorizontalOrientation());
         }
         this.renderSeries(visibleSeries);
         if (this.x && this.y) {
@@ -241,7 +253,7 @@ export class XYChart extends BaseChart {
     }
     setupScales() {
         const xKey = this.getXKey();
-        const isHorizontal = this.isHorizontalOrientation();
+        const isHorizontal = this.orientation === 'horizontal';
         let xConfig;
         let yConfig;
         if (isHorizontal) {
@@ -256,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 = [];
@@ -340,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) {
@@ -506,7 +532,7 @@ export class XYChart extends BaseChart {
                 gap: this.barStackGap,
                 nextLayerData,
             };
-            series.render(this.plotGroup, this.data, xKey, this.x, this.y, this.parseValue, categoryScaleType, this.renderTheme, 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.renderTheme, areaStackingContextBySeries.get(series), areaValueLabelLayer ?? undefined);

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.9.0",
+    "version": "0.9.2",
     "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,57 +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",
-        "d3-cloud": "^1.2.9",
-        "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/d3": "^7.4.3",
         "@types/d3-cloud": "^1.2.9",
-        "@types/node": "^24.10.13",
+        "@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;
-}