@internetstiftelsen/charts 0.14.2 → 0.15.0

package/README.md

@@ -385,17 +385,16 @@ their own centers on initial render and `chart.update(...)`.
 
 ## Export
 
-`chart.export()` supports `svg`, `json`, `csv`, `xlsx`, `png`, `jpg`, and `pdf`.
+`chart.export()` supports `svg`, `json`, `csv`, `xlsx`, `png`, and `jpg`.
 
 ```javascript
 await chart.export('png', { download: true });
 await chart.export('csv', { download: true, delimiter: ';' });
 await chart.export('xlsx', { download: true, sheetName: 'Data' });
-await chart.export('pdf', { download: true, pdfMargin: 16 });
 ```
 
-`xlsx` and `pdf` are lazy-loaded and require optional dependencies
-(`write-excel-file` and `jspdf`) only when those formats are used.
+`xlsx` is lazy-loaded and requires the optional `write-excel-file` dependency
+only when that format is used.
 
 ## Import
 

package/dist/base-chart.d.ts

@@ -9,7 +9,7 @@ import type { Legend } from './legend.js';
 import type { Title } from './title.js';
 import { LayoutManager, type PlotAreaBounds } from './layout-manager.js';
 import { LegendStateController } from './legend-state.js';
-type VisualExportFormat = 'svg' | 'png' | 'jpg' | 'pdf';
+type VisualExportFormat = 'svg' | 'png' | 'jpg';
 type RenderDimensions = {
     width: number;
     height: number;
@@ -262,7 +262,6 @@ export declare abstract class BaseChart {
     private exportSize;
     private exportXLSX;
     private exportImage;
-    private exportPDF;
     protected exportSVG(options?: ExportOptions, formatForHooks?: VisualExportFormat): Promise<string>;
     private requireRenderedSvg;
     private resolveExportContext;

package/dist/base-chart.js

@@ -5,7 +5,6 @@ import { LayoutManager } from './layout-manager.js';
 import { serializeCSV } from './export-tabular.js';
 import { exportRasterBlob } from './export-image.js';
 import { exportXLSXBlob } from './export-xlsx.js';
-import { exportPDFBlob } from './export-pdf.js';
 import { normalizeChartData } from './grouped-data.js';
 import { LegendStateController } from './legend-state.js';
 import { mergeDeep } from './utils.js';
@@ -1251,7 +1250,7 @@ export class BaseChart {
             content = await this.exportImage(format, options);
         }
         else {
-            content = await this.exportPDF(options);
+            throw new Error(`Unsupported export format: ${format}`);
         }
         if (options?.download) {
             this.downloadContent(content, format, options);
@@ -1296,7 +1295,7 @@ export class BaseChart {
         if (format === 'jpg') {
             return 'image/jpeg';
         }
-        return 'application/pdf';
+        throw new Error(`Unsupported export format: ${format}`);
     }
     exportCSV(options) {
         return serializeCSV(this.sourceData, options);
@@ -1325,24 +1324,6 @@ export class BaseChart {
             jpegQuality: options?.jpegQuality ?? 0.92,
         });
     }
-    async exportPDF(options) {
-        const { width, height } = this.exportSize(options);
-        const svg = await this.exportSVG(options, 'pdf');
-        const pngBlob = await exportRasterBlob({
-            format: 'png',
-            svg,
-            width,
-            height,
-            pixelRatio: options?.pixelRatio ?? 1,
-            backgroundColor: options?.backgroundColor ?? '#ffffff',
-            jpegQuality: options?.jpegQuality ?? 0.92,
-        });
-        return exportPDFBlob(pngBlob, {
-            width,
-            height,
-            margin: options?.pdfMargin ?? 0,
-        });
-    }
     async exportSVG(options, formatForHooks = 'svg') {
         const liveSvg = this.requireRenderedSvg();
         await this.whenReady();

package/dist/chart-group.d.ts

@@ -40,7 +40,7 @@ export type ChartGroupChartOptions = {
     order?: number;
     responsive?: ChartGroupItemResponsiveConfig;
 };
-export type ChartGroupExportFormat = 'svg' | 'png' | 'jpg' | 'pdf';
+export type ChartGroupExportFormat = 'svg' | 'png' | 'jpg';
 export declare class ChartGroup {
     private readonly cols;
     private readonly gap;
@@ -127,7 +127,6 @@ export declare class ChartGroup {
     private requireRenderedContainer;
     private resolveExportContent;
     private createRasterExportOptions;
-    private exportPdfContent;
     private resolveExportLayoutState;
     private createExportLayoutState;
     private createExportRenderContext;

package/dist/chart-group.js

@@ -1,6 +1,5 @@
 import { create } from 'd3';
 import { exportRasterBlob } from './export-image.js';
-import { exportPDFBlob } from './export-pdf.js';
 import { LegendStateController } from './legend-state.js';
 import { DEFAULT_CHART_HEIGHT, DEFAULT_CHART_WIDTH, defaultTheme, } from './theme.js';
 import { ChartValidator } from './validation.js';
@@ -988,9 +987,6 @@ export class ChartGroup {
             return svg;
         }
         const rasterOptions = this.createRasterExportOptions(svg, width, height, options);
-        if (format === 'pdf') {
-            return this.exportPdfContent(rasterOptions, width, height, options);
-        }
         return exportRasterBlob({
             format,
             ...rasterOptions,
@@ -1006,17 +1002,6 @@ export class ChartGroup {
             jpegQuality: options?.jpegQuality ?? 0.92,
         };
     }
-    async exportPdfContent(rasterOptions, width, height, options) {
-        const pngBlob = await exportRasterBlob({
-            format: 'png',
-            ...rasterOptions,
-        });
-        return exportPDFBlob(pngBlob, {
-            width,
-            height,
-            margin: options?.pdfMargin ?? 0,
-        });
-    }
     resolveExportLayoutState(width, context) {
         const textComponents = this.textComponents
             .map((component) => {
@@ -1327,6 +1312,6 @@ export class ChartGroup {
         if (format === 'jpg') {
             return 'image/jpeg';
         }
-        return 'application/pdf';
+        throw new Error(`Unsupported export format: ${format}`);
     }
 }

package/dist/pie-chart.js

@@ -492,9 +492,9 @@ export class PieChart extends RadialChartBase {
         const insideArc = arc()
             .innerRadius(insideLabelRadius)
             .outerRadius(insideLabelRadius);
-        const fontSize = this.renderTheme.legend.fontSize * fontScale;
-        const fontFamily = this.renderTheme.axis.fontFamily;
-        const fontWeight = this.renderTheme.axis.fontWeight ?? 'normal';
+        const fontSize = this.renderTheme.valueLabel.fontSize * fontScale;
+        const fontFamily = this.renderTheme.valueLabel.fontFamily;
+        const fontWeight = this.renderTheme.valueLabel.fontWeight;
         const labelOverflowOptions = {
             maxLabelWidth: this.valueLabel.maxLabelWidth,
             oversizedBehavior: this.valueLabel.oversizedBehavior,

package/dist/types.d.ts

@@ -9,7 +9,7 @@ export type GroupedDataGroup = {
     data: DataItem[];
 };
 export type ChartData = DataItem[] | GroupedDataGroup[];
-export type ExportFormat = 'svg' | 'json' | 'csv' | 'xlsx' | 'png' | 'jpg' | 'pdf';
+export type ExportFormat = 'svg' | 'json' | 'csv' | 'xlsx' | 'png' | 'jpg';
 export type ExportOptions = {
     download?: boolean;
     filename?: string;
@@ -21,7 +21,6 @@ export type ExportOptions = {
     pixelRatio?: number;
     backgroundColor?: string;
     sheetName?: string;
-    pdfMargin?: number;
 };
 export type ExportRenderContext = {
     format: ExportFormat;

package/docs/chart-group.md

@@ -219,7 +219,6 @@ group.onLegendChange(() => {
 await group.export('svg');
 await group.export('png');
 await group.export('jpg');
-await group.export('pdf');
 ```
 
 - Export width can be overridden with `options.width`

package/docs/components.md

@@ -344,7 +344,7 @@ new Text({
 
 Components can provide `exportHooks` to adjust export-only settings or mutate
 the exported SVG right before serialization. Hooks run only for visual exports
-(`svg`, `png`, `jpg`, `pdf`) and never touch the live chart instance. Use
+(`svg`, `png`, `jpg`) and never touch the live chart instance. Use
 `beforeRender` to return config overrides and `before` to mutate the export
 SVG.
 
@@ -403,24 +403,21 @@ breakpoints in chart constructor config (see
 - `xlsx` (lazy-loads optional `write-excel-file`)
 - `png`
 - `jpg`
-- `pdf` (lazy-loads optional `jspdf`)
 
 ```typescript
 await chart.export('png', { download: true });
 await chart.export('csv', { download: true, delimiter: ';' });
 await chart.export('xlsx', { download: true, sheetName: 'Data' });
-await chart.export('pdf', { download: true, pdfMargin: 16 });
 ```
 
 Export option highlights:
 
 - `columns`: choose specific columns for `csv` and `xlsx`
 - `delimiter`: CSV delimiter (default `,`)
-- `pixelRatio`: render scale for `png`, `jpg`, `pdf`
-- `backgroundColor`: defaults transparent for `png`, white for `jpg`/`pdf`
+- `pixelRatio`: render scale for `png` and `jpg`
+- `backgroundColor`: defaults transparent for `png` and white for `jpg`
 - `jpegQuality`: JPEG quality for `jpg` (default `0.92`)
 - `sheetName`: sheet name for `xlsx` (default `Sheet1`)
-- `pdfMargin`: page margin for `pdf` (default `0`)
 
 `json` export returns only the chart data payload
 

package/docs/theming.md

@@ -70,6 +70,10 @@ through the `themes` map as `themes.default`, `themes.ruby`,
 | `tooltip.fontFamily`  | `string`   | -                                              | Tooltip text font                            |
 | `tooltip.fontSize`    | `number`   | `12`                                           | Tooltip text size in pixels                  |
 | `tooltip.fontWeight`  | `string`   | `'normal'`                                     | Tooltip text weight                          |
+| `valueLabel.color`      | `string`   | `'#1f2a36'`                                    | Value label text color                       |
+| `valueLabel.fontFamily` | `string`   | -                                              | Value label text font                        |
+| `valueLabel.fontSize`   | `number`   | `12`                                           | Value label text size in pixels              |
+| `valueLabel.fontWeight` | `string`   | `'600'`                                        | Value label text weight                      |
 
 ---
 

package/package.json

@@ -1,5 +1,5 @@
 {
-    "version": "0.14.2",
+    "version": "0.15.0",
     "name": "@internetstiftelsen/charts",
     "type": "module",
     "sideEffects": false,
@@ -38,48 +38,47 @@
         "d3-cloud": "^1.2.9"
     },
     "optionalDependencies": {
-        "jspdf": "^4.2.1",
-        "write-excel-file": "^4.0.7"
+        "write-excel-file": "^4.1.1"
     },
     "devDependencies": {
         "@eslint/js": "^10.0.1",
         "@handsontable/react-wrapper": "^17.1.0",
         "@internetstiftelsen/styleguide": "^5.1.27",
-        "@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.3.0",
+        "@radix-ui/react-label": "^2.1.9",
+        "@radix-ui/react-select": "^2.3.0",
+        "@radix-ui/react-switch": "^1.3.0",
+        "@radix-ui/react-tabs": "^1.1.14",
+        "@speed-highlight/core": "^1.2.17",
+        "@tailwindcss/vite": "^4.3.1",
         "@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": "^25.9.1",
-        "@types/react": "^19.2.16",
+        "@types/node": "^25.9.3",
+        "@types/react": "^19.2.17",
         "@types/react-dom": "^19.2.3",
         "@vitejs/plugin-react-swc": "^4.3.1",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
-        "eslint": "^10.4.1",
+        "eslint": "^10.5.0",
         "eslint-plugin-react-hooks": "^7.1.1",
         "eslint-plugin-react-refresh": "^0.5.2",
         "globals": "^17.6.0",
         "handsontable": "^17.1.0",
         "jsdom": "^29.1.1",
-        "lucide-react": "^1.17.0",
-        "prettier": "3.8.3",
-        "radix-ui": "^1.4.3",
+        "lucide-react": "^1.18.0",
+        "prettier": "3.8.4",
+        "radix-ui": "^1.5.0",
         "react": "^19.2.7",
         "react-dom": "^19.2.7",
-        "sass": "^1.100.0",
+        "sass": "^1.101.0",
         "tailwind-merge": "^3.6.0",
-        "tailwindcss": "^4.3.0",
+        "tailwindcss": "^4.3.1",
         "tsc-alias": "^1.8.17",
         "tw-animate-css": "^1.4.0",
         "typescript": "~6.0.3",
-        "typescript-eslint": "^8.60.1",
+        "typescript-eslint": "^8.61.0",
         "vite": "^8.0.16",
         "vitest": "^4.1.8"
     }

package/dist/export-pdf.d.ts

@@ -1,8 +0,0 @@
-type JsPdfLoader = () => Promise<unknown>;
-export type PDFExportOptions = {
-    width: number;
-    height: number;
-    margin: number;
-};
-export declare function exportPDFBlob(imageBlob: Blob, options: PDFExportOptions, loader?: JsPdfLoader): Promise<Blob>;
-export {};

package/dist/export-pdf.js

@@ -1,67 +0,0 @@
-function isObject(value) {
-    return typeof value === 'object' && value !== null;
-}
-function resolveJsPdfConstructor(moduleValue) {
-    if (!isObject(moduleValue)) {
-        throw new Error('Invalid "jspdf" module export');
-    }
-    const moduleCandidate = moduleValue;
-    const defaultCandidate = moduleCandidate.default;
-    let ctor = moduleCandidate.jsPDF;
-    if (!ctor && isObject(defaultCandidate)) {
-        ctor = defaultCandidate.jsPDF;
-    }
-    if (!ctor && typeof defaultCandidate === 'function') {
-        ctor = defaultCandidate;
-    }
-    if (typeof ctor !== 'function') {
-        throw new Error('Invalid "jspdf" module export');
-    }
-    return ctor;
-}
-async function defaultJsPdfLoader() {
-    return import('jspdf');
-}
-function blobToDataUrl(blob) {
-    return new Promise((resolve, reject) => {
-        const reader = new FileReader();
-        reader.onload = () => resolve(String(reader.result));
-        reader.onerror = () => reject(new Error('Failed to create PDF image data'));
-        reader.readAsDataURL(blob);
-    });
-}
-export async function exportPDFBlob(imageBlob, options, loader = defaultJsPdfLoader) {
-    let jsPdfModule;
-    try {
-        jsPdfModule = await loader();
-    }
-    catch {
-        throw new Error('PDF export requires optional dependency "jspdf". Install optional dependency "jspdf".');
-    }
-    const JsPdfCtor = resolveJsPdfConstructor(jsPdfModule);
-    const margin = Math.max(0, options.margin);
-    const pageWidth = Math.max(1, options.width + margin * 2);
-    const pageHeight = Math.max(1, options.height + margin * 2);
-    const orientation = pageWidth >= pageHeight ? 'landscape' : 'portrait';
-    const pdf = new JsPdfCtor({
-        unit: 'px',
-        format: [pageWidth, pageHeight],
-        orientation,
-        hotfixes: ['px_scaling'],
-    });
-    const actualPageWidth = pdf.internal.pageSize.getWidth();
-    const actualPageHeight = pdf.internal.pageSize.getHeight();
-    const availableWidth = actualPageWidth - margin * 2;
-    const availableHeight = actualPageHeight - margin * 2;
-    if (availableWidth <= 0 || availableHeight <= 0) {
-        throw new Error('Invalid PDF margin: no drawable area remains');
-    }
-    const imageDataUrl = await blobToDataUrl(imageBlob);
-    const scale = Math.min(availableWidth / options.width, availableHeight / options.height);
-    const drawWidth = options.width * scale;
-    const drawHeight = options.height * scale;
-    const x = (actualPageWidth - drawWidth) / 2;
-    const y = (actualPageHeight - drawHeight) / 2;
-    pdf.addImage(imageDataUrl, 'PNG', x, y, drawWidth, drawHeight);
-    return pdf.output('blob');
-}