@internetstiftelsen/charts 0.7.0 → 0.7.1

package/README.md

@@ -20,6 +20,42 @@ A framework-agnostic, composable charting library built on D3.js with TypeScript
 npm install @internetstiftelsen/charts
 ```
 
+## Local Development
+
+```bash
+pnpm dev
+```
+
+Runs the interactive demo app (`index.html`) with sidebar controls and
+Chart/Data/Showcase tabs.
+
+```bash
+pnpm dev:docs
+```
+
+Runs the marketing landing page (`docs.html`) built on
+`@internetstiftelsen/styleguide`.
+
+## Build Targets
+
+```bash
+pnpm build
+```
+
+Builds the publishable chart library output into `dist`.
+
+```bash
+pnpm build:docs
+```
+
+Builds the static marketing site into `dist-docs` (used for Pages deploys).
+
+```bash
+pnpm build:demo
+```
+
+Builds the demo app using the default Vite config.
+
 ## Quick Start
 
 ```javascript

package/base-chart.js

@@ -377,15 +377,12 @@ export class BaseChart {
                 const matchesIndex = match.index === undefined || match.index === index;
                 const matchesType = match.type === undefined || match.type === component.type;
                 const matchesDataKey = match.dataKey === undefined ||
-                    (typeof dataKey === 'string' &&
-                        dataKey === match.dataKey);
+                    (typeof dataKey === 'string' && dataKey === match.dataKey);
                 if (!matchesIndex || !matchesType || !matchesDataKey) {
                     return;
                 }
                 const existing = componentOverrides.get(component);
-                componentOverrides.set(component, existing
-                    ? mergeDeep(existing, override)
-                    : { ...override });
+                componentOverrides.set(component, existing ? mergeDeep(existing, override) : { ...override });
             });
         });
         return {

package/package.json

@@ -1,5 +1,5 @@
 {
-    "version": "0.7.0",
+    "version": "0.7.1",
     "name": "@internetstiftelsen/charts",
     "type": "module",
     "sideEffects": false,
@@ -16,13 +16,17 @@
     ],
     "scripts": {
         "dev": "vite",
-        "build": "tsc -b && vite build",
+        "dev:docs": "vite --config vite.docs.config.ts --open",
+        "build": "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 .",
         "format": "prettier --write ./src",
         "preview": "vite preview",
+        "preview:docs": "vite preview --config vite.docs.config.ts",
         "test": "vitest",
         "test:run": "vitest run",
-        "build:lib": "tsc --project tsconfig.lib.json && tsc-alias --project tsconfig.lib.json",
+        "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"
     },
@@ -49,6 +53,8 @@
     },
     "devDependencies": {
         "@eslint/js": "^9.39.2",
+        "@internetstiftelsen/styleguide": "^5.1.23",
+        "@speed-highlight/core": "^1.2.14",
         "@tailwindcss/vite": "^4.1.18",
         "@testing-library/dom": "^10.4.1",
         "@testing-library/jest-dom": "^6.9.1",
@@ -63,6 +69,7 @@
         "globals": "^16.5.0",
         "jsdom": "^27.4.0",
         "prettier": "3.6.2",
+        "sass": "^1.97.3",
         "tsc-alias": "^1.8.16",
         "tw-animate-css": "^1.4.0",
         "typescript": "~5.9.3",

package/title.d.ts

@@ -3,6 +3,7 @@ import type { TitleConfig, ChartTheme, ExportHooks, TitleConfigBase } from './ty
 import type { LayoutAwareComponent, ComponentSpace } from './chart-interface.js';
 export declare class Title implements LayoutAwareComponent<TitleConfigBase> {
     readonly type: "title";
+    readonly display: boolean;
     readonly text: string;
     readonly exportHooks?: ExportHooks<TitleConfigBase>;
     private readonly fontSize;

package/title.js

@@ -7,6 +7,12 @@ export class Title {
             writable: true,
             value: 'title'
         });
+        Object.defineProperty(this, "display", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
         Object.defineProperty(this, "text", {
             enumerable: true,
             configurable: true,
@@ -55,6 +61,7 @@ export class Title {
             writable: true,
             value: void 0
         });
+        this.display = config.display ?? true;
         this.text = config.text;
         this.fontSize = config.fontSize ?? 18;
         this.fontWeight = config.fontWeight ?? 'bold';
@@ -66,6 +73,7 @@ export class Title {
     }
     getExportConfig() {
         return {
+            display: this.display,
             text: this.text,
             fontSize: this.fontSize,
             fontWeight: this.fontWeight,
@@ -86,6 +94,13 @@ export class Title {
      * Returns the space required by the title
      */
     getRequiredSpace() {
+        if (!this.display) {
+            return {
+                width: 0,
+                height: 0,
+                position: 'top',
+            };
+        }
         return {
             width: 0, // Title spans full width
             height: this.marginTop + this.fontSize + this.marginBottom,
@@ -93,6 +108,9 @@ export class Title {
         };
     }
     render(svg, theme, width, x = 0, y = 0) {
+        if (!this.display) {
+            return;
+        }
         const titleGroup = svg
             .append('g')
             .attr('class', 'title')

package/types.d.ts

@@ -218,6 +218,7 @@ export declare function getSeriesColor(series: {
 }): string;
 export type LabelOversizedBehavior = 'truncate' | 'wrap' | 'hide';
 export type XAxisConfigBase = {
+    display?: boolean;
     dataKey?: string;
     labelKey?: string;
     groupLabelKey?: string;
@@ -235,6 +236,7 @@ export type XAxisConfig = XAxisConfigBase & {
     exportHooks?: ExportHooks<XAxisConfigBase>;
 };
 export type YAxisConfigBase = {
+    display?: boolean;
     tickFormat?: string | ((value: number) => string) | null;
     rotatedLabels?: boolean;
     maxLabelWidth?: number;
@@ -287,6 +289,7 @@ export type LegendItem = {
     visible: boolean;
 };
 export type TitleConfigBase = {
+    display?: boolean;
     text: string;
     fontSize?: number;
     fontWeight?: string;

package/x-axis.d.ts

@@ -3,6 +3,7 @@ import type { XAxisConfig, ChartTheme, D3Scale, DataItem, ExportHooks, XAxisConf
 import type { LayoutAwareComponent, ComponentSpace } from './chart-interface.js';
 export declare class XAxis implements LayoutAwareComponent<XAxisConfigBase> {
     readonly type: "xAxis";
+    readonly display: boolean;
     readonly dataKey?: string;
     readonly labelKey?: string;
     readonly groupLabelKey?: string;
@@ -16,6 +17,7 @@ export declare class XAxis implements LayoutAwareComponent<XAxisConfigBase> {
     private readonly tickFormat;
     private wrapLineCount;
     private estimatedHeight;
+    private estimatedTickLabelVerticalFootprint;
     private readonly autoHideOverlapping;
     private readonly minLabelGap;
     private readonly preserveEndLabels;
@@ -30,6 +32,7 @@ export declare class XAxis implements LayoutAwareComponent<XAxisConfigBase> {
     getRequiredSpace(): ComponentSpace;
     estimateLayoutSpace(labels: unknown[], theme: ChartTheme, svg: SVGSVGElement): void;
     clearEstimatedSpace(): void;
+    private getTickLabelVerticalFootprint;
     render(svg: Selection<SVGSVGElement, undefined, null, undefined>, x: D3Scale, theme: ChartTheme, yPosition: number, data?: DataItem[]): void;
     private buildLabelLookup;
     private renderGroupLabels;

package/x-axis.js

@@ -25,6 +25,12 @@ export class XAxis {
             writable: true,
             value: 'xAxis'
         });
+        Object.defineProperty(this, "display", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
         Object.defineProperty(this, "dataKey", {
             enumerable: true,
             configurable: true,
@@ -104,6 +110,12 @@ export class XAxis {
             writable: true,
             value: null
         });
+        Object.defineProperty(this, "estimatedTickLabelVerticalFootprint", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
         Object.defineProperty(this, "autoHideOverlapping", {
             enumerable: true,
             configurable: true,
@@ -128,6 +140,7 @@ export class XAxis {
             writable: true,
             value: void 0
         });
+        this.display = config?.display ?? true;
         this.dataKey = config?.dataKey;
         this.labelKey = config?.labelKey;
         this.groupLabelKey = config?.groupLabelKey;
@@ -144,6 +157,7 @@ export class XAxis {
     }
     getExportConfig() {
         return {
+            display: this.display,
             dataKey: this.dataKey,
             labelKey: this.labelKey,
             groupLabelKey: this.groupLabelKey,
@@ -169,6 +183,13 @@ export class XAxis {
      * Returns the space required by the x-axis
      */
     getRequiredSpace() {
+        if (!this.display) {
+            return {
+                width: 0,
+                height: 0,
+                position: 'bottom',
+            };
+        }
         if (this.estimatedHeight !== null) {
             return {
                 width: 0,
@@ -198,6 +219,8 @@ export class XAxis {
     estimateLayoutSpace(labels, theme, svg) {
         if (!labels.length) {
             this.estimatedHeight = null;
+            this.estimatedTickLabelVerticalFootprint = null;
+            this.wrapLineCount = 1;
             return;
         }
         const parsedFontSize = typeof theme.axis.fontSize === 'string'
@@ -232,9 +255,13 @@ export class XAxis {
         if (this.rotatedLabels) {
             const radians = Math.PI / 4;
             const verticalFootprint = Math.sin(radians) * maxWidth + Math.cos(radians) * textHeight;
+            this.estimatedTickLabelVerticalFootprint = verticalFootprint;
             this.estimatedHeight = this.tickPadding + verticalFootprint + 5;
         }
         else {
+            const wrappedExtraHeight = Math.max(0, maxLines - 1) * lineHeight;
+            this.estimatedTickLabelVerticalFootprint =
+                this.fontSize + wrappedExtraHeight;
             this.estimatedHeight = this.tickPadding + textHeight + 5;
         }
         if (this.showGroupLabels) {
@@ -242,12 +269,29 @@ export class XAxis {
             this.estimatedHeight +=
                 this.groupLabelGap + groupLabelStyle.fontSize + 5;
         }
-        this.wrapLineCount = Math.max(this.wrapLineCount, maxLines);
+        this.wrapLineCount = maxLines;
     }
     clearEstimatedSpace() {
         this.estimatedHeight = null;
+        this.estimatedTickLabelVerticalFootprint = null;
+    }
+    getTickLabelVerticalFootprint() {
+        if (this.estimatedTickLabelVerticalFootprint !== null) {
+            return this.estimatedTickLabelVerticalFootprint;
+        }
+        if (this.rotatedLabels) {
+            // Fallback to the same rough factor used by getRequiredSpace().
+            const baseHeight = this.tickPadding + this.fontSize + 5;
+            return Math.max(baseHeight * 2.5 - this.tickPadding - 5, 0);
+        }
+        const lineHeight = this.fontSize * 1.2;
+        const wrappedExtraHeight = Math.max(0, this.wrapLineCount - 1) * lineHeight;
+        return this.fontSize + wrappedExtraHeight;
     }
     render(svg, x, theme, yPosition, data = []) {
+        if (!this.display) {
+            return;
+        }
         const labelLookup = this.buildLabelLookup(data);
         const axisGenerator = axisBottom(x)
             .tickSizeOuter(0)
@@ -321,7 +365,8 @@ export class XAxis {
         if (groupRanges.length === 0) {
             return;
         }
-        const yOffset = this.tickPadding + this.fontSize + this.groupLabelGap;
+        const tickLabelVerticalFootprint = this.getTickLabelVerticalFootprint();
+        const yOffset = this.tickPadding + tickLabelVerticalFootprint + this.groupLabelGap;
         const groupLabelStyle = this.resolveGroupLabelStyle(theme);
         const groupLayer = svg
             .append('g')

package/y-axis.d.ts

@@ -3,6 +3,7 @@ import type { ChartTheme, YAxisConfig, D3Scale, ExportHooks, YAxisConfigBase } f
 import type { LayoutAwareComponent, ComponentSpace } from './chart-interface.js';
 export declare class YAxis implements LayoutAwareComponent<YAxisConfigBase> {
     readonly type: "yAxis";
+    readonly display: boolean;
     private readonly tickPadding;
     private readonly fontSize;
     private readonly maxLabelWidth;

package/y-axis.js

@@ -8,6 +8,12 @@ export class YAxis {
             writable: true,
             value: 'yAxis'
         });
+        Object.defineProperty(this, "display", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
         Object.defineProperty(this, "tickPadding", {
             enumerable: true,
             configurable: true,
@@ -51,6 +57,7 @@ export class YAxis {
             writable: true,
             value: void 0
         });
+        this.display = config?.display ?? true;
         this.tickFormat = config?.tickFormat ?? null;
         this.rotatedLabels = config?.rotatedLabels ?? false;
         this.maxLabelWidth = config?.maxLabelWidth ?? 40; // Default 40 for backward compatibility
@@ -59,6 +66,7 @@ export class YAxis {
     }
     getExportConfig() {
         return {
+            display: this.display,
             tickFormat: this.tickFormat,
             rotatedLabels: this.rotatedLabels,
             maxLabelWidth: this.maxLabelWidth,
@@ -76,6 +84,13 @@ export class YAxis {
      * Returns the space required by the y-axis
      */
     getRequiredSpace() {
+        if (!this.display) {
+            return {
+                width: 0,
+                height: 0,
+                position: 'left',
+            };
+        }
         // Width = max label width + tick padding
         // Rotated labels need less width (cos(45°) ≈ 0.7 of horizontal width)
         const baseWidth = this.maxLabelWidth + this.tickPadding;
@@ -87,6 +102,9 @@ export class YAxis {
         };
     }
     render(svg, y, theme, xPosition) {
+        if (!this.display) {
+            return;
+        }
         const axis = axisLeft(y).tickSize(0).tickPadding(this.tickPadding);
         // Apply tick formatting if specified
         if (this.tickFormat) {