@k2b/ui 0.49.0 → 0.51.0

package/dist/browser/charts/core/snapshot.js

@@ -0,0 +1,65 @@
+import { calendarLayout } from "./calendar";
+import { isChartDatum } from "./inspection";
+import { chartRenderHeight, renderChartSvg } from "./render";
+import { escapeXml } from "./svg-renderers";
+
+/** Trusted output of prepareChartSnapshot; never accept arbitrary user SVG. */
+
+// Matches metadata emitted by our SVG renderer, not arbitrary XML.
+const decodeAttribute = value => value.replace(/&quot;/g, '"').replace(/&apos;|&#39;/g, "'").replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&amp;/g, "&");
+
+/** Pure SVG preparation for server or browser. Transfer only this output across SSR boundaries. */
+export function prepareChartSnapshot(options, inspection, sizing = {}) {
+  const calendar = options.kind === "heatmap" && options.layout === "calendar" ? calendarLayout(options) : undefined;
+  const width = calendar?.width ?? 480;
+  const height = chartRenderHeight(options, sizing);
+  const svg = renderChartSvg(options, width, height);
+  const marks = [];
+  const keys = new Set();
+  for (const match of svg.matchAll(/data-chart-datum="([^"]*)"/g)) {
+    const datum = JSON.parse(decodeAttribute(match[1]));
+    if (!isChartDatum(datum)) throw new Error("Invalid renderer chart metadata");
+    const selection = {
+      kind: options.kind,
+      datum
+    };
+    const key = inspection.key(selection);
+    if (!key || keys.has(key)) throw new Error("Chart snapshot requires a unique nonempty key for every mark");
+    keys.add(key);
+    const rowKey = inspection.rowKey?.(selection) ?? key;
+    if (!rowKey) throw new Error("Chart marks require a nonempty rowKey");
+    marks.push({
+      key,
+      rowKey,
+      datum,
+      tooltip: inspection.tooltip(selection),
+      ...(inspection.reference?.(selection) ? {
+        reference: true
+      } : {})
+    });
+  }
+  let markIndex = 0;
+  const formattedSvg = svg.replace(/(<g data-chart-role="[^"]*" data-chart-datum="[^"]*"><title>)[\s\S]*?<\/title>/g, (_match, opening, offset) => {
+    const mark = marks[markIndex++];
+    const tooltip = mark.tooltip;
+    const text = [tooltip.title, ...tooltip.rows.map(row => `${row.label}: ${row.value}`)].filter(Boolean).join(" · ");
+    if (mark.reference) {
+      const children = svg.slice(offset, svg.indexOf("</g>", offset));
+      const palette = Number(children.match(/stdlib-chart-series-(\d+)/)?.[1] ?? mark.datum.seriesIndex ?? 0) % 8 + 1;
+      opening = opening.replace("<g ", `<g data-chart-reference="true" style="--k2b-chart-reference-color:var(--stdlib-chart-c${palette})" `);
+    }
+    return `${opening}${escapeXml(text)}</title>`;
+  });
+  return {
+    kind: options.kind,
+    svg: formattedSvg,
+    width,
+    height,
+    ...(calendar ? {
+      minWidth: calendar.minWidth
+    } : {}),
+    stretch: !calendar && !["map", "pie", "donut", "gauge"].includes(options.kind),
+    marks
+  };
+}
+//# sourceMappingURL=snapshot.js.map

package/dist/browser/charts/core/snapshot.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["charts/core/snapshot.ts"],"sourcesContent":["import { calendarLayout } from \"./calendar\";\nimport { type ChartSelection, type ChartTooltip, type ChartTooltipFormatter, isChartDatum } from \"./inspection\";\nimport { type ChartRenderOptions, chartRenderHeight, renderChartSvg } from \"./render\";\nimport { escapeXml } from \"./svg-renderers\";\nimport type { ChartDatum, ChartKind } from \"./types\";\n\n/** Trusted output of prepareChartSnapshot; never accept arbitrary user SVG. */\nexport type ChartSnapshot = {\n  kind: ChartKind;\n  svg: string;\n  width: number;\n  height: number;\n  stretch: boolean;\n  minWidth?: number;\n  marks: readonly { key: string; rowKey: string; datum: ChartDatum; tooltip: ChartTooltip; reference?: boolean }[];\n};\n\n// Matches metadata emitted by our SVG renderer, not arbitrary XML.\nconst decodeAttribute = (value: string) =>\n  value\n    .replace(/&quot;/g, '\"')\n    .replace(/&apos;|&#39;/g, \"'\")\n    .replace(/&lt;/g, \"<\")\n    .replace(/&gt;/g, \">\")\n    .replace(/&amp;/g, \"&\");\n\n/** Pure SVG preparation for server or browser. Transfer only this output across SSR boundaries. */\nexport function prepareChartSnapshot(\n  options: ChartRenderOptions,\n  inspection: {\n    key: (selection: ChartSelection) => string;\n    /** Defaults to the mark key for one-to-one charts. */\n    rowKey?: (selection: ChartSelection) => string;\n    tooltip: ChartTooltipFormatter;\n    reference?: (selection: ChartSelection) => boolean;\n  },\n  sizing: Parameters<typeof chartRenderHeight>[1] = {},\n): ChartSnapshot {\n  const calendar = options.kind === \"heatmap\" && options.layout === \"calendar\" ? calendarLayout(options) : undefined;\n  const width = calendar?.width ?? 480;\n  const height = chartRenderHeight(options, sizing);\n  const svg = renderChartSvg(options, width, height);\n  const marks: ChartSnapshot[\"marks\"][number][] = [];\n  const keys = new Set<string>();\n  for (const match of svg.matchAll(/data-chart-datum=\"([^\"]*)\"/g)) {\n    const datum: unknown = JSON.parse(decodeAttribute(match[1]!));\n    if (!isChartDatum(datum)) throw new Error(\"Invalid renderer chart metadata\");\n    const selection = { kind: options.kind, datum };\n    const key = inspection.key(selection);\n    if (!key || keys.has(key)) throw new Error(\"Chart snapshot requires a unique nonempty key for every mark\");\n    keys.add(key);\n    const rowKey = inspection.rowKey?.(selection) ?? key;\n    if (!rowKey) throw new Error(\"Chart marks require a nonempty rowKey\");\n    marks.push({\n      key,\n      rowKey,\n      datum,\n      tooltip: inspection.tooltip(selection),\n      ...(inspection.reference?.(selection) ? { reference: true } : {}),\n    });\n  }\n  let markIndex = 0;\n  const formattedSvg = svg.replace(\n    /(<g data-chart-role=\"[^\"]*\" data-chart-datum=\"[^\"]*\"><title>)[\\s\\S]*?<\\/title>/g,\n    (_match, opening: string, offset: number) => {\n      const mark = marks[markIndex++]!;\n      const tooltip = mark.tooltip;\n      const text = [tooltip.title, ...tooltip.rows.map((row) => `${row.label}: ${row.value}`)].filter(Boolean).join(\" · \");\n      if (mark.reference) {\n        const children = svg.slice(offset, svg.indexOf(\"</g>\", offset));\n        const palette = (Number(children.match(/stdlib-chart-series-(\\d+)/)?.[1] ?? mark.datum.seriesIndex ?? 0) % 8) + 1;\n        opening = opening.replace(\n          \"<g \",\n          `<g data-chart-reference=\"true\" style=\"--k2b-chart-reference-color:var(--stdlib-chart-c${palette})\" `,\n        );\n      }\n      return `${opening}${escapeXml(text)}</title>`;\n    },\n  );\n  return {\n    kind: options.kind,\n    svg: formattedSvg,\n    width,\n    height,\n    ...(calendar ? { minWidth: calendar.minWidth } : {}),\n    stretch: !calendar && ![\"map\", \"pie\", \"donut\", \"gauge\"].includes(options.kind),\n    marks,\n  };\n}\n"],"mappings":"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","ignoreList":[]}