@validationcloud/fractal-ui 1.56.0 → 1.58.0

package/dist/lib/render-chart-to-image.d.ts

@@ -1,19 +1,18 @@
-import { EChartsInitOpts } from 'echarts';
-/**
- * Minimal ECharts interface for server-side rendering.
- * Only includes the methods needed by renderChartToImage.
- */
-export interface EChartsModule {
-    registerTheme: (name: string, theme: Record<string, unknown>) => void;
-    init: (dom?: any, theme?: string | Record<string, unknown> | null, opts?: EChartsInitOpts) => EChartsInstance;
-}
-interface EChartsInstance {
-    setOption: (option: unknown) => void;
-    dispose: () => void;
+/** Font family registration for server-side chart rendering */
+export interface FontRegistration {
+    /** Font family name (e.g., 'Poppins', 'Inter') */
+    family: string;
+    /** Font data buffers for each weight/style variant */
+    data: readonly Buffer[];
 }
 export interface RenderChartToImageOptions {
     option: unknown;
     theme?: Record<string, unknown>;
+    /**
+     * Fonts to register before rendering. Each font family is registered once
+     * and cached for subsequent renders.
+     */
+    fonts?: FontRegistration[];
     /**
      * Adds Validation Cloud watermark graphic to the chart option before rendering.
      *
@@ -45,5 +44,4 @@ export interface RenderChartToImageOptions {
  * });
  * ```
  */
-export declare function renderChartToImage({ option, theme, includeWatermark, width, height, devicePixelRatio, }: RenderChartToImageOptions): Buffer;
-export {};
+export declare function renderChartToImage({ option, theme, fonts, includeWatermark, width, height, devicePixelRatio, }: RenderChartToImageOptions): Buffer;

package/dist/lib/render-chart-to-image.js

@@ -0,0 +1,75 @@
+import * as p from "echarts";
+import { randomUUID as h } from "node:crypto";
+import { writeFileSync as O, mkdtempSync as T } from "node:fs";
+import { tmpdir as b } from "node:os";
+import d from "node:path";
+import { Image as j, Canvas as F, FontLibrary as S } from "skia-canvas";
+import { calculateTitleLayout as I } from "../components/echarts-renderer/calculate-title-layout.js";
+import { addWatermarkToOptions as C } from "../components/echarts-renderer/watermark-graphic.js";
+globalThis.Image = j;
+const u = /* @__PURE__ */ new Set();
+let f;
+function w() {
+  return f || (f = T(d.join(b(), "chart-fonts-"))), f;
+}
+function A(r) {
+  for (const t of r)
+    if (!u.has(t.family))
+      try {
+        const e = w(), i = t.data.map((o, n) => {
+          const a = d.join(e, `${t.family}-${String(n)}.ttf`);
+          return O(a, o), a;
+        });
+        S.use(t.family, i), u.add(t.family);
+      } catch (e) {
+        console.warn(`Failed to register ${t.family} fonts, charts will use fallback font:`, e);
+      }
+}
+const D = /* @__PURE__ */ new Set([
+  "aria",
+  // Tries to set DOM attributes which node-canvas doesn't implement
+  "toolbox",
+  // Export/zoom/reset buttons - not useful in static image
+  "dataZoom",
+  // Interactive range slider
+  "brush",
+  // Selection tool
+  "axisPointer"
+  // Crosshair on hover
+]);
+function E(r) {
+  if (!r || typeof r != "object" || Array.isArray(r))
+    return { animation: !1 };
+  const t = Object.fromEntries(
+    Object.entries(r).filter(([e]) => !D.has(e))
+  );
+  return t.animation = !1, t;
+}
+function L({
+  option: r,
+  theme: t,
+  fonts: e,
+  includeWatermark: i = !1,
+  width: o = 800,
+  height: n = 600,
+  devicePixelRatio: a = 2
+}) {
+  e?.length && A(e);
+  let s;
+  t && typeof t == "object" && (s = `theme-${h()}`, p.registerTheme(s, t));
+  const m = new F(o, n), c = p.init(m, s, {
+    renderer: "canvas",
+    devicePixelRatio: a,
+    width: o,
+    height: n
+  });
+  try {
+    const y = E(r), l = I(y, o, t), g = i ? C(l) : l;
+    return c.setOption(g), m.toBufferSync("png");
+  } finally {
+    c.dispose();
+  }
+}
+export {
+  L as renderChartToImage
+};

package/dist/lib/render-mavrik-chart-to-image.js

@@ -0,0 +1,28 @@
+import { selectMavrikTheme as n } from "../components/echarts-renderer/mavrik-theme.js";
+import { PoppinsRegular as p, PoppinsMedium as a, PoppinsSemiBold as s, PoppinsBold as f } from "./font-data.js";
+import { renderChartToImage as P } from "./render-chart-to-image.js";
+const d = {
+  family: "Poppins",
+  data: [p, a, s, f]
+};
+function g({
+  option: e,
+  includeWatermark: o = !1,
+  width: r = 800,
+  height: i = 600,
+  devicePixelRatio: m = 2
+}) {
+  const t = n(e);
+  return P({
+    option: e,
+    theme: t.config,
+    fonts: [d],
+    includeWatermark: o,
+    width: r,
+    height: i,
+    devicePixelRatio: m
+  });
+}
+export {
+  g as renderMavrikChartToImage
+};

package/dist/server.js

@@ -1,6 +1,6 @@
-import { renderChartToImage as o } from "./src/lib/render-chart-to-image.js";
-import { renderMavrikChartToImage as a } from "./src/lib/render-mavrik-chart-to-image.js";
-import { sanitizeChartOptionsForStaticRendering as n } from "./src/components/echarts-renderer/sanitize-chart-options-for-static-rendering.js";
+import { renderChartToImage as o } from "./lib/render-chart-to-image.js";
+import { renderMavrikChartToImage as a } from "./lib/render-mavrik-chart-to-image.js";
+import { sanitizeChartOptionsForStaticRendering as n } from "./components/echarts-renderer/sanitize-chart-options-for-static-rendering.js";
 export {
   o as renderChartToImage,
   a as renderMavrikChartToImage,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@validationcloud/fractal-ui",
   "private": false,
-  "version": "1.56.0",
+  "version": "1.58.0",
   "module": "./dist/index.js",
   "type": "module",
   "files": [
@@ -18,7 +18,7 @@
     "url": "https://github.com/validationcloud/fractal-ui/issues"
   },
   "scripts": {
-    "prebuild": "pnpm run generate:theme",
+    "prebuild": "pnpm run generate:theme && pnpm run generate:fonts",
     "build": "vite build",
     "lint": "eslint",
     "storybook": "storybook dev -p 6006",
@@ -28,7 +28,8 @@
     "typecheck": "tsc -b --noEmit",
     "test": "vitest run",
     "prepublishOnly": "pnpm build",
-    "generate:theme": "node --experimental-transform-types scripts/generate-mavrik-theme.ts"
+    "generate:theme": "node --experimental-transform-types scripts/generate-mavrik-theme.ts && prettier --write src/components/echarts-renderer/mavrik-theme*.json",
+    "generate:fonts": "node --experimental-transform-types scripts/generate-font-data.ts && prettier --write src/lib/font-data.ts"
   },
   "exports": {
     ".": {
@@ -50,8 +51,6 @@
     "node": ">=22.14.0"
   },
   "dependencies": {
-    "@radix-ui/react-select": "^2.1.7",
-    "echarts": "^6",
     "radix-ui": "^1",
     "react": "^19",
     "react-dom": "^19",
@@ -97,6 +96,7 @@
   },
   "peerDependencies": {
     "@radix-ui/react-compose-refs": "^1",
+    "echarts": "^6",
     "skia-canvas": "^3",
     "radix-ui": "^1",
     "react": "^19",

package/dist/lib/get-echarts-module.d.ts

@@ -1 +0,0 @@
-export declare function getEChartsModule(): typeof import('echarts');