@validationcloud/fractal-ui 1.57.0 → 1.59.0

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

@@ -1,13 +1,20 @@
+import { ChartTheme } from '../components/echarts-renderer/chart-theme';
+import { EChartsThemeOption } from '../components/echarts-renderer/echarts-theme-option';
+/** 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>;
+    theme?: EChartsThemeOption | ChartTheme;
     /**
-     * Adds Validation Cloud watermark graphic to the chart option before rendering.
-     *
-     * Note: The default is `false` because some server-side image backends can be
-     * inconsistent when decoding SVG images.
+     * Fonts to register before rendering. Each font family is registered once
+     * and cached for subsequent renders.
      */
-    includeWatermark?: boolean;
+    fonts?: FontRegistration[];
     width?: number;
     height?: number;
     devicePixelRatio?: number;
@@ -32,4 +39,4 @@ export interface RenderChartToImageOptions {
  * });
  * ```
  */
-export declare function renderChartToImage({ option, theme, includeWatermark, width, height, devicePixelRatio, }: RenderChartToImageOptions): Buffer;
+export declare function renderChartToImage({ option, theme, fonts, width, height, devicePixelRatio, }: RenderChartToImageOptions): Buffer;

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

@@ -1,40 +1,32 @@
 import * as p from "echarts";
 import { randomUUID as y } from "node:crypto";
-import e from "node:path";
-import { fileURLToPath as O } from "node:url";
-import { Image as b, Canvas as g, FontLibrary as h } from "skia-canvas";
-import { calculateTitleLayout as j } from "../components/echarts-renderer/calculate-title-layout.js";
-import { addWatermarkToOptions as P } from "../components/echarts-renderer/watermark-graphic.js";
-globalThis.Image = b;
-let s = !1;
-function T() {
-  if (!s)
-    try {
-      const t = e.dirname(O(import.meta.url)), r = [
-        // dist/src/lib -> dist/fonts (packaged) OR src/lib -> src/fonts (dev)
-        e.resolve(t, "../../fonts"),
-        // dist/lib -> dist/fonts (packaged)
-        e.resolve(t, "../fonts")
-      ];
-      let n;
-      for (const o of r)
-        try {
-          h.use("Poppins", [
-            e.join(o, "Poppins-Regular.ttf"),
-            e.join(o, "Poppins-Medium.ttf"),
-            e.join(o, "Poppins-SemiBold.ttf"),
-            e.join(o, "Poppins-Bold.ttf")
-          ]), s = !0;
-          return;
-        } catch (a) {
-          n = a;
-        }
-      throw n;
-    } catch (t) {
-      console.warn("Failed to register Poppins fonts, charts will use fallback font:", t), s = !0;
-    }
+import { writeFileSync as b, mkdtempSync as O } from "node:fs";
+import { tmpdir as j } from "node:os";
+import T from "node:path";
+import { Image as C, Canvas as F, FontLibrary as I } from "skia-canvas";
+import { calculateTitleLayout as S } from "../components/echarts-renderer/calculate-title-layout.js";
+import { isChartTheme as $ } from "../components/echarts-renderer/chart-theme.js";
+import { mergeThemeGraphicIntoOptions as w } from "../components/echarts-renderer/merge-theme-graphic-into-options.js";
+globalThis.Image = C;
+const d = /* @__PURE__ */ new Set();
+let l;
+function A() {
+  return l || (l = O(T.join(j(), "chart-fonts-"))), l;
+}
+function D(e) {
+  for (const t of e)
+    if (!d.has(t.family))
+      try {
+        const r = A(), n = t.data.map((s, m) => {
+          const i = T.join(r, `${t.family}-${String(m)}.ttf`);
+          return b(i, s), i;
+        });
+        I.use(t.family, n), d.add(t.family);
+      } catch (r) {
+        console.warn(`Failed to register ${t.family} fonts, charts will use fallback font:`, r);
+      }
 }
-const I = /* @__PURE__ */ new Set([
+const E = /* @__PURE__ */ new Set([
   "aria",
   // Tries to set DOM attributes which node-canvas doesn't implement
   "toolbox",
@@ -46,38 +38,48 @@ const I = /* @__PURE__ */ new Set([
   "axisPointer"
   // Crosshair on hover
 ]);
-function v(t) {
-  if (!t || typeof t != "object" || Array.isArray(t))
+function G(e) {
+  if (!e || typeof e != "object" || Array.isArray(e))
     return { animation: !1 };
-  const r = Object.fromEntries(
-    Object.entries(t).filter(([n]) => !I.has(n))
+  const t = Object.fromEntries(
+    Object.entries(e).filter(([r]) => !E.has(r))
   );
-  return r.animation = !1, r;
+  return t.animation = !1, t;
 }
-function S({
-  option: t,
-  theme: r,
-  includeWatermark: n = !1,
-  width: o = 800,
-  height: a = 600,
+function M({
+  option: e,
+  theme: t,
+  fonts: r,
+  width: n = 800,
+  height: s = 600,
   devicePixelRatio: m = 2
 }) {
-  T();
-  let i;
-  r && typeof r == "object" && (i = `theme-${y()}`, p.registerTheme(i, r));
-  const f = new g(o, a), c = p.init(f, i, {
+  r?.length && D(r);
+  let i, o, f;
+  const a = t;
+  if (a && typeof a == "object")
+    if ($(a)) {
+      i = `theme-${y()}`, o = a.config, f = o.graphic;
+      const { graphic: h, ...c } = o;
+      p.registerTheme(i, c);
+    } else {
+      i = `theme-${y()}`, o = a, f = o.graphic;
+      const { graphic: h, ...c } = o;
+      p.registerTheme(i, c);
+    }
+  const g = new F(n, s), u = p.init(g, i, {
     renderer: "canvas",
     devicePixelRatio: m,
-    width: o,
-    height: a
+    width: n,
+    height: s
   });
   try {
-    const u = v(t), l = j(u, o, r), d = n ? P(l) : l;
-    return c.setOption(d), f.toBufferSync("png");
+    const h = G(e), c = S(h, n, o);
+    return u.setOption(w(c, f), { replaceMerge: ["graphic"] }), g.toBufferSync("png");
   } finally {
-    c.dispose();
+    u.dispose();
   }
 }
 export {
-  S as renderChartToImage
+  M as renderChartToImage
 };

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

@@ -1,7 +1,6 @@
 import { EChartsOption } from 'echarts';
 export interface RenderMavrikChartToImageOptions {
     option: EChartsOption;
-    includeWatermark?: boolean;
     width?: number;
     height?: number;
     devicePixelRatio?: number;
@@ -31,4 +30,4 @@ export interface RenderMavrikChartToImageOptions {
  * });
  * ```
  */
-export declare function renderMavrikChartToImage({ option, includeWatermark, width, height, devicePixelRatio, }: RenderMavrikChartToImageOptions): Buffer;
+export declare function renderMavrikChartToImage({ option, width, height, devicePixelRatio, }: RenderMavrikChartToImageOptions): Buffer;

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

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

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

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@validationcloud/fractal-ui",
   "private": false,
-  "version": "1.57.0",
+  "version": "1.59.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 && prettier --write src/components/echarts-renderer/mavrik-theme*.json"
+    "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": {
     ".": {

package/dist/assets/vc-logo.svg.js

@@ -1,4 +0,0 @@
-const a = "data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='210'%20height='24'%20fill='none'%20viewBox='0%200%20210%2024'%3e%3cg%20fill='%23a7a9ad'%20fill-opacity='0.3'%3e%3cpath%20fill-rule='evenodd'%20d='M33.733%201.868h-21.67C6.438%201.868%201.878%206.404%201.878%2012s4.56%2010.132%2010.185%2010.132h21.67c5.625%200%2010.185-4.536%2010.185-10.132S39.358%201.868%2033.733%201.868M0%2012c0%206.627%205.4%2012%2012.063%2012h21.67c6.662%200%2012.063-5.373%2012.063-12s-5.4-12-12.063-12h-21.67C5.401%200%200%205.373%200%2012'%20clip-rule='evenodd'/%3e%3cpath%20fill-rule='evenodd'%20d='M33.734%205.174h-21.67C8.273%205.174%205.2%208.23%205.2%2012s3.073%206.826%206.863%206.826h21.67c3.79%200%206.862-3.056%206.862-6.826s-3.072-6.826-6.862-6.826M3.323%2012c0%204.802%203.912%208.695%208.74%208.695h21.67c4.827%200%208.74-3.893%208.74-8.695s-3.913-8.695-8.74-8.695h-21.67c-4.828%200-8.74%203.893-8.74%208.695'%20clip-rule='evenodd'/%3e%3cpath%20fill-rule='evenodd'%20d='M33.733%208.48h-21.67A3.53%203.53%200%200%200%208.523%2012a3.53%203.53%200%200%200%203.54%203.521h21.67a3.53%203.53%200%200%200%203.54-3.52%203.53%203.53%200%200%200-3.54-3.522M6.646%2012c0%202.976%202.425%205.39%205.417%205.39h21.67c2.992%200%205.418-2.414%205.418-5.39s-2.426-5.39-5.418-5.39h-21.67c-2.992%200-5.417%202.414-5.417%205.39'%20clip-rule='evenodd'/%3e%3cpath%20d='M58.45%2020.695h-2.77L48.592%203.327h2.7l5.773%2014.542%205.773-14.542h2.7zM73.986%2020.695h-2.06l-.14-1.482q-.64.81-1.617%201.262-.978.45-2.165.451-1.246%200-2.223-.486a3.86%203.86%200%200%201-1.537-1.332%203.4%203.4%200%200%201-.559-1.922q0-1.134.606-1.991.605-.868%201.653-1.355%201.047-.498%202.386-.498.838%200%201.699.197a6.6%206.6%200%200%201%201.571.556v-.429q0-.844-.442-1.447a2.7%202.7%200%200%200-1.187-.938%204.1%204.1%200%200%200-1.653-.324q-.802%200-1.641.278-.826.277-1.56.857l-.721-1.934a9.3%209.3%200%200%201%202.2-.95%208.3%208.3%200%200%201%202.257-.323q1.583%200%202.724.625a4.35%204.35%200%200%201%201.78%201.783q.63%201.146.63%202.71zm-5.517-1.783q.827%200%201.525-.336a2.93%202.93%200%200%200%201.129-.973q.442-.636.477-1.482v-.162a4.7%204.7%200%200%200-1.338-.683%204.6%204.6%200%200%200-1.502-.255q-1.176%200-1.955.556-.78.555-.78%201.424%200%20.544.314.984.326.43.873.683.56.244%201.257.244M77.988%2020.695h-2.54V2.864h2.54zM80.666%205.758q-.548%200-.92-.382a1.28%201.28%200%200%201-.373-.926q0-.545.373-.915.372-.382.92-.382.56%200%20.932.382.385.37.385.915t-.385.926q-.373.382-.932.382m1.188%2014.937h-2.388V9.116h2.388zM95.628%2020.695H93.52l-.128-1.656a5.7%205.7%200%200%201-1.909%201.39q-1.106.497-2.432.497-1.677%200-3.003-.787a5.7%205.7%200%200%201-2.095-2.154q-.757-1.365-.757-3.08%200-1.724.757-3.08a5.7%205.7%200%200%201%202.095-2.153q1.326-.787%203.003-.787%201.257%200%202.328.451a5.5%205.5%200%200%201%201.862%201.262V3.327h2.386zm-6.18-1.9q1.059%200%201.908-.486a3.75%203.75%200%200%200%201.374-1.32q.512-.833.512-1.898v-.394q0-1.065-.512-1.899a3.66%203.66%200%200%200-1.374-1.308q-.85-.475-1.908-.475-1.083%200-1.944.51a3.7%203.7%200%200%200-1.362%201.389q-.5.869-.5%201.98t.5%201.991a3.8%203.8%200%200%200%201.362%201.401q.861.51%201.944.51M107.269%2020.695h-2.061l-.139-1.482q-.64.81-1.618%201.262-.978.45-2.165.451-1.245%200-2.223-.486a3.86%203.86%200%200%201-1.536-1.332%203.4%203.4%200%200%201-.56-1.922q0-1.134.606-1.991.605-.868%201.653-1.355%201.047-.498%202.386-.498a7.6%207.6%200%200%201%201.699.197%206.6%206.6%200%200%201%201.571.556v-.429q0-.844-.442-1.447a2.7%202.7%200%200%200-1.187-.938%204.1%204.1%200%200%200-1.653-.324%205.166%205.166%200%200%200-3.2%201.135l-.722-1.934a9.3%209.3%200%200%201%202.2-.95%208.3%208.3%200%200%201%202.258-.323q1.583%200%202.723.625a4.35%204.35%200%200%201%201.781%201.783q.629%201.146.629%202.71zm-5.517-1.783q.826%200%201.524-.336a2.9%202.9%200%200%200%201.129-.973q.442-.636.477-1.482v-.162a4.6%204.6%200%200%200-1.338-.683%204.6%204.6%200%200%200-1.502-.255q-1.175%200-1.955.556-.78.555-.78%201.424%200%20.544.314.984.327.43.873.683.56.244%201.258.244M116.424%2020.405q-1.221.521-2.362.521t-2.002-.486a3.5%203.5%200%200%201-1.339-1.366q-.477-.892-.477-2.05v-5.789h-2.037V9.116h2.153V6.222h2.27v2.894h3.399v2.119h-3.399v5.35q0%201.018.547%201.62.558.59%201.432.59.734%200%201.455-.44zM118.58%205.758q-.548%200-.92-.382a1.28%201.28%200%200%201-.373-.926q0-.545.373-.915.372-.382.92-.382.56%200%20.932.382.385.37.385.915t-.385.926a1.25%201.25%200%200%201-.932.382m1.188%2014.937h-2.388V9.116h2.388zM127.257%2020.926q-1.746%200-3.143-.787a5.85%205.85%200%200%201-2.2-2.142q-.803-1.366-.803-3.092%200-1.713.803-3.068a5.8%205.8%200%200%201%202.2-2.153q1.397-.8%203.143-.8%201.757%200%203.142.8a5.76%205.76%200%200%201%202.177%202.153q.803%201.355.803%203.068%200%201.725-.803%203.092a5.8%205.8%200%200%201-2.177%202.142q-1.385.787-3.142.787m-.012-2.13q1.06%200%201.886-.51a3.7%203.7%200%200%200%201.315-1.39q.489-.88.489-2.002%200-1.1-.489-1.969a3.6%203.6%200%200%200-1.315-1.389q-.827-.52-1.886-.52-1.047%200-1.885.52a3.7%203.7%200%200%200-1.327%201.39q-.477.868-.477%201.968%200%201.123.477%202.003a3.8%203.8%200%200%200%201.327%201.39q.837.509%201.885.509M145.816%2020.695h-2.386v-6.287q0-1.54-.849-2.455-.839-.915-2.258-.915-1.466%200-2.363.973-.896.972-.896%202.582v6.102h-2.386V9.116h2.013l.082%201.864a4.25%204.25%200%200%201%201.676-1.551q1.035-.544%202.432-.544%202.294%200%203.609%201.377%201.326%201.379%201.326%203.798zM166.178%2018.483a8.7%208.7%200%200%201-2.888%201.887q-1.664.672-3.631.672t-3.632-.672a8.7%208.7%200%200%201-2.898-1.887%208.9%208.9%200%200%201-1.908-2.871q-.676-1.656-.676-3.601%200-1.957.676-3.601a8.7%208.7%200%200%201%201.908-2.872%208.7%208.7%200%200%201%202.898-1.887q1.665-.671%203.632-.671%201.955%200%203.619.683%201.677.671%202.875%201.864l-1.78%201.806a6.2%206.2%200%200%200-2.094-1.54q-1.212-.567-2.654-.567-1.397%200-2.573.51a6%206%200%200%200-2.049%201.423%206.6%206.6%200%200%200-1.361%202.154q-.478%201.239-.478%202.698t.478%202.698a6.7%206.7%200%200%200%201.361%202.165%206.2%206.2%200%200%200%202.049%201.424q1.175.498%202.573.498%201.442%200%202.654-.556a6.2%206.2%200%200%200%202.083-1.552zM170.092%2020.695h-2.54V2.864h2.54zM177.534%2020.926q-1.745%200-3.143-.787a5.84%205.84%200%200%201-2.199-2.142q-.803-1.366-.803-3.092%200-1.713.803-3.068a5.8%205.8%200%200%201%202.199-2.153q1.398-.8%203.143-.8%201.758%200%203.142.8a5.75%205.75%200%200%201%202.176%202.153q.804%201.355.803%203.068%200%201.725-.803%203.092a5.8%205.8%200%200%201-2.176%202.142q-1.384.787-3.142.787m-.013-2.13q1.06%200%201.887-.51a3.7%203.7%200%200%200%201.315-1.39q.488-.88.488-2.002%200-1.1-.488-1.969a3.6%203.6%200%200%200-1.315-1.389q-.827-.52-1.887-.52a3.5%203.5%200%200%200-1.885.52%203.7%203.7%200%200%200-1.326%201.39q-.477.868-.477%201.968%200%201.123.477%202.003a3.8%203.8%200%200%200%201.326%201.39%203.56%203.56%200%200%200%201.885.509M196.1%2020.695h-2.026l-.082-1.864q-.64%201.018-1.676%201.563-1.025.532-2.433.532-2.28%200-3.607-1.378-1.316-1.39-1.316-3.797V9.116h2.387v6.287q0%201.54.837%202.455.84.915%202.258.915%201.468%200%202.364-.973.907-.984.907-2.582V9.116h2.387zM209.84%2020.695h-2.106l-.129-1.656a5.7%205.7%200%200%201-1.908%201.39q-1.105.497-2.433.497-1.676%200-3.002-.787a5.7%205.7%200%200%201-2.096-2.154q-.756-1.365-.756-3.08%200-1.724.756-3.08a5.7%205.7%200%200%201%202.096-2.153q1.326-.787%203.002-.787%201.257%200%202.329.451a5.5%205.5%200%200%201%201.862%201.262V3.327h2.385zm-6.18-1.9q1.059%200%201.908-.486a3.74%203.74%200%200%200%201.374-1.32q.512-.833.513-1.898v-.394q0-1.065-.513-1.899a3.65%203.65%200%200%200-1.374-1.308q-.849-.475-1.908-.475-1.082%200-1.943.51a3.7%203.7%200%200%200-1.363%201.389q-.5.869-.499%201.98%200%201.111.499%201.991a3.8%203.8%200%200%200%201.363%201.401q.86.51%201.943.51'/%3e%3c/g%3e%3c/svg%3e";
-export {
-  a as default
-};

package/dist/components/echarts-renderer/echarts-theme-option.js

@@ -1,9 +0,0 @@
-import { z as t } from "zod";
-const n = t.object({}).catchall(t.unknown());
-function s(e) {
-  return n.safeParse(e).success;
-}
-export {
-  n as EChartsThemeOption,
-  s as isEChartsThemeOption
-};

package/dist/components/echarts-renderer/watermark-graphic.d.ts

@@ -1,12 +0,0 @@
-import { GraphicComponentOption } from 'echarts';
-/**
- * Watermark graphic element for ECharts charts.
- * This is applied via setOption(), not via theme (themes don't properly merge graphic components).
- */
-export declare const WATERMARK_GRAPHIC: GraphicComponentOption;
-/**
- * Merges watermark graphic into existing ECharts options.
- */
-export declare function addWatermarkToOptions<T extends {
-    graphic?: GraphicComponentOption | GraphicComponentOption[];
-}>(options: T): T;

package/dist/components/echarts-renderer/watermark-graphic.js

@@ -1,25 +0,0 @@
-import o from "../../assets/vc-logo.svg.js";
-const a = 210, c = 24, i = {
-  type: "image",
-  left: "center",
-  top: "middle",
-  style: {
-    image: o,
-    width: a,
-    height: c
-  },
-  z: 100,
-  silent: !0
-};
-function s(r) {
-  const e = r.graphic;
-  let t;
-  return e === void 0 ? t = i : Array.isArray(e) ? t = [...e, i] : t = [e, i], {
-    ...r,
-    graphic: t
-  };
-}
-export {
-  i as WATERMARK_GRAPHIC,
-  s as addWatermarkToOptions
-};