@weasyprint-tsx/ui 0.1.6 → 0.1.8

package/README.md

@@ -276,3 +276,77 @@ LaTeX equation rendering via KaTeX.
 | `displayMode` | `boolean` | `false` | Render as block-level equation |
 | `aligned` | `boolean` | `false` | Wrap in `\begin{aligned}…\end{aligned}` |
 | `chemical` | `boolean` | `false` | Wrap in `\ce{…}` for chemical notation |
+
+---
+
+## Chart
+
+Renders a [chart.js](https://www.chartjs.org/) chart server-side as a base64-encoded PNG `<img>`.
+
+### `Chart`
+
+```tsx
+import type { ChartConfiguration } from "chart.js";
+import { Chart } from "@weasyprint-tsx/ui";
+
+const config: ChartConfiguration = {
+  type: "bar",
+  data: {
+    labels: ["Jan", "Feb", "Mar"],
+    datasets: [{ label: "Sales", data: [12, 8, 21] }],
+  },
+};
+
+<Chart config={config} width={600} height={300} />
+```
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `config` | `ChartConfiguration` | — | chart.js configuration object |
+| `width` | `number` | `800` | Canvas width in pixels |
+| `height` | `number` | `500` | Canvas height in pixels |
+| `...rest` | `Omit<ComponentProps<"img">, "src">` | — | All standard `<img>` attributes except `src` |
+
+---
+
+### `chartFunction`
+
+Samples a numeric function into a data array for chart datasets. Produces `sample + 1` values evaluated at `n * step` for `n` in `0..sample`.
+
+```ts
+chartFunction(func, options?)
+```
+
+| Param | Type | Default | Description |
+|-------|------|---------|-------------|
+| `func` | `(n: number) => number` | — | Function to sample |
+| `options.step` | `number` | `1` | Multiplier applied to the index before calling `func` |
+| `options.sample` | `number` | `100` | Number of intervals (yields `sample + 1` points) |
+
+```tsx
+import { Chart, chartFunction } from "@weasyprint-tsx/ui";
+
+<Chart config={{
+  type: "line",
+  data: {
+    labels: chartFunction(n => n, { step: 0.1 }),
+    datasets: [{ label: "sin(x)", data: chartFunction(Math.sin, { step: 0.1 }) }],
+  },
+}} />
+```
+
+---
+
+### `labelFunction`
+
+Same as `chartFunction` but the sampling function may return a `number` or `string`. Use to generate axis labels.
+
+```ts
+labelFunction(func, options?)
+```
+
+| Param | Type | Default | Description |
+|-------|------|---------|-------------|
+| `func` | `(n: number) => number \| string` | — | Function to sample |
+| `options.step` | `number` | `1` | Multiplier applied to the index |
+| `options.sample` | `number` | `100` | Number of intervals (yields `sample + 1` values) |

package/package.json

@@ -1,11 +1,13 @@
 {
   "name": "@weasyprint-tsx/ui",
-  "version": "0.1.6",
+  "version": "0.1.8",
   "exports": {
     ".": "./src/index.ts"
   },
   "types": "./src/index.ts",
   "dependencies": {
+    "@napi-rs/canvas": "^1.0.0",
+    "chart.js": "^4.5.1",
     "highlight.js": "11.11.1",
     "katex": "^0.16.47"
   }

package/src/Chart.tsx

@@ -0,0 +1,54 @@
+import { createCanvas } from "@napi-rs/canvas";
+import type { ChartConfiguration } from "chart.js";
+import { Chart as ChartJS } from "chart.js/auto";
+import { ComponentProps } from "preact";
+
+export interface ChartProps extends Omit<ComponentProps<"img">, "src"> {
+  config: ChartConfiguration;
+  width?: number;
+  height?: number;
+}
+
+export function Chart({
+  config,
+  width = 800,
+  height = 500,
+  ...props
+}: ChartProps) {
+  const canvas = createCanvas(width, height);
+
+  const chart = new ChartJS(canvas as unknown as HTMLCanvasElement, {
+    ...config,
+    options: {
+      ...config.options,
+      animation: false,
+      responsive: false,
+    },
+  });
+
+  const dataUrl = `data:image/png;base64,${canvas.toBuffer("image/png").toString("base64")}`;
+  chart.destroy();
+
+  return <img src={dataUrl} width={width} height={height} {...props} />;
+}
+
+type FunctionOptions = {
+  step?: number;
+  sample?: number;
+};
+
+export function chartFunction(
+  func: (n: number) => number,
+  options?: FunctionOptions,
+) {
+  const { sample = 100, step = 1 } = options ?? {};
+  return Array.from({ length: sample + 1 }, (_, n) => func(n * step));
+}
+
+export function labelFunction(
+  func: (n: number) => number | string,
+  options?: FunctionOptions
+) {
+  const { sample = 100, step = 1 } = options ?? {};
+  return Array.from({ length: sample + 1 }, (_, n) => func(n * step));
+}

package/src/List.module.css

@@ -1,5 +1,5 @@
 .ol {
-  & > .li {
+  .li {
     counter-increment: list-items;
     &::before {
       content: var(--ol-marker-pre, "") counter(list-items, decimal)

package/src/index.ts

@@ -1,3 +1,5 @@
+export { Chart, chartFunction, labelFunction } from "./Chart";
+export type { ChartProps } from "./Chart";
 export { Block, BlockBox } from "./BlockBox";
 export type { BlockBoxProps, BlockProps } from "./BlockBox";
 export { CodeBlock } from "./CodeBlock";