@k2b/editor 0.8.0 → 0.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@k2b/editor",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "description": "Configurable Markdown editor for SolidJS: editor, toolbar, bubble menu, and slash menu on one shared state.",
   "type": "module",
   "sideEffects": [
@@ -70,7 +70,7 @@
     "@codemirror/state": "6.7.1",
     "@codemirror/view": "6.43.7",
     "@k2b/stdlib": "0.30.0",
-    "@k2b/ui": "0.51.0",
+    "@k2b/ui": "0.52.0",
     "@lezer/common": "1.5.3",
     "@lezer/highlight": "1.2.4",
     "@lezer/markdown": "1.7.2",

package/src/chart-schema.ts

@@ -35,6 +35,7 @@ export const chartKindSchema = () =>
     "area",
     "bar",
     "hbar",
+    "funnel",
     "line",
     "scatter",
     "pie",
@@ -46,6 +47,10 @@ export const chartKindSchema = () =>
     "heatmap",
     "barGauge",
     "stat",
+    "treemap",
+    "pareto",
+    "bubble",
+    "radar",
   ]);
 
 export const chartParts = (limits?: ChartLimits) => {
@@ -219,6 +224,10 @@ export const chartKinds = (limits?: ChartLimits) => {
         ).optional(),
         layout: z.enum(["columns", "rows", "grouped", "stacked"]).optional(),
         normalize: z.boolean().optional(),
+        share: z.boolean().optional(),
+        limit: z.number().int().positive().optional(),
+        tone: z.enum(["in", "out"]).optional(),
+        format: numberFormat.optional(),
         compare: z.object({ label: ChartLabel, data: list(ChartNumber.nullable(), 0, limits?.maxValues) }).optional(),
         xAxis: ChartAxis.pick({ label: true }).extend({ ordered: z.boolean().optional() }).strict().optional(),
         yAxis: ChartAxis.optional(),
@@ -231,6 +240,10 @@ export const chartKinds = (limits?: ChartLimits) => {
         const issue = (message: string) => ctx.addIssue({ code: "custom", message });
         if (limits && !bar.series && !bar.data.length)
           ctx.addIssue({ code: "custom", path: ["data"], message: "A bar chart needs data or aligned series." });
+        if ((bar.share !== undefined || bar.limit !== undefined || bar.tone !== undefined) && bar.layout !== "rows")
+          issue("Share, limit and tone require rows layout.");
+        if (bar.layout === "rows" && bar.data.some((d) => Number.isFinite(d.value) && d.value < 0))
+          issue("Ranked bar lists require nonnegative values.");
         if (bar.series) {
           if (!bar.x || bar.series.some((s) => s.data.length !== bar.x?.length)) issue("Bar series must have the same length as x.");
           if (bar.data.length) issue("Use data or aligned series, not both.");
@@ -244,6 +257,12 @@ export const chartKinds = (limits?: ChartLimits) => {
         if (bar.compare && (bar.series?.length !== 1 || bar.compare.data.length !== bar.x?.length || bar.layout === "stacked"))
           issue("Comparison needs one current series and aligned previous values.");
       }),
+    z.object({
+      kind: z.literal("funnel"),
+      ...ChartKindCommon,
+      data: list(z.object({ label: ChartLabel, value: z.number().nonnegative().nullable() }), 1, limits?.maxValues),
+      format: numberFormat.optional(),
+    }),
     z
       .object({
         kind: z.literal("hbar"),
@@ -398,6 +417,81 @@ export const chartKinds = (limits?: ChartLimits) => {
       better: z.enum(["up", "down"]).optional(),
       sparkline: list(ChartNumber, 2, limits?.maxValues).optional(),
     }),
+    z
+      .object({
+        kind: z.literal("treemap"),
+        ...ChartKindCommon,
+        groups: list(ChartLabel, 1, limits?.maxSeries),
+        data: list(z.object({ label: ChartLabel, group: ChartLabel, value: z.number().nonnegative() }), 1, limits?.maxMarks),
+        legend: z.boolean().optional(),
+        format: numberFormat.optional(),
+        locale: chartLocaleSchema().optional(),
+      })
+      .superRefine((spec, ctx) => {
+        if (!Number.isFinite(spec.data.reduce((sum, d) => sum + d.value, 0)))
+          ctx.addIssue({ code: "custom", message: "Treemap total must be finite." });
+        if (spec.data.some((d) => !spec.groups.includes(d.group)))
+          ctx.addIssue({ code: "custom", message: "Treemap groups must contain every item group." });
+      }),
+    z
+      .object({
+        kind: z.literal("pareto"),
+        ...ChartKindCommon,
+        labels: z.tuple([ChartLabel, ChartLabel]),
+        data: list(z.object({ label: ChartLabel, value: z.number().nonnegative(), prev: z.number().nonnegative() }), 1, limits?.maxValues),
+        format: numberFormat.optional(),
+        locale: chartLocaleSchema().optional(),
+      })
+      .superRefine((spec, ctx) => {
+        if (!Number.isFinite(spec.data.reduce((sum, d) => sum + d.value, 0)))
+          ctx.addIssue({ code: "custom", message: "Pareto total must be finite." });
+      }),
+    z
+      .object({
+        kind: z.literal("bubble"),
+        ...ChartKindCommon,
+        groups: list(ChartLabel, 1, limits?.maxSeries),
+        data: list(
+          z.object({ label: ChartLabel, group: ChartLabel, x: z.number(), y: z.number(), size: z.number().nonnegative().optional() }),
+          1,
+          limits?.maxMarks,
+        ),
+        xLabel: ChartLabel,
+        yLabel: ChartLabel,
+        sizeLabel: ChartLabel.optional(),
+        averages: z.boolean().optional(),
+        legend: z.boolean().optional(),
+        xFormat: numberFormat.optional(),
+        yFormat: numberFormat.optional(),
+        format: numberFormat.optional(),
+        locale: chartLocaleSchema().optional(),
+      })
+      .superRefine((spec, ctx) => {
+        if (spec.data.some((p) => !spec.groups.includes(p.group)))
+          ctx.addIssue({ code: "custom", message: "Bubble groups must contain every point group." });
+        for (const key of ["x", "y"] as const)
+          if (!Number.isFinite(Math.max(0, ...spec.data.map((p) => p[key])) - Math.min(0, ...spec.data.map((p) => p[key]))))
+            ctx.addIssue({ code: "custom", message: "Bubble coordinate ranges must be finite." });
+      }),
+    z
+      .object({
+        kind: z.literal("radar"),
+        ...ChartKindCommon,
+        axes: z.array(ChartLabel).min(3).max(8),
+        max: z.number().positive(),
+        unit: ChartUnit.optional(),
+        series: z
+          .array(z.object({ label: ChartLabel, data: z.array(z.number().nonnegative()).min(3).max(8) }))
+          .min(1)
+          .max(4),
+        format: numberFormat.optional(),
+        legend: z.boolean().optional(),
+        locale: chartLocaleSchema().optional(),
+      })
+      .superRefine((spec, ctx) => {
+        if (spec.series.some((s) => s.data.length !== spec.axes.length || s.data.some((v) => v > spec.max)))
+          ctx.addIssue({ code: "custom", message: "Radar series need one value per axis between zero and the common maximum." });
+      }),
   ]);
 };
 

package/src/charts.ts

@@ -4,6 +4,7 @@ import {
   type AreaOptions,
   autoBin,
   type BarChartOptions,
+  type BubbleOptions,
   barChartLayout,
   barGauge,
   boxplot,
@@ -13,6 +14,7 @@ import {
   computeDomain,
   donut,
   extendDomainToNice,
+  type FunnelOptions,
   gauge,
   type HeatmapChartOptions,
   type HorizontalBarOptions,
@@ -21,15 +23,24 @@ import {
   line,
   niceLogTicks,
   niceStep,
+  type ParetoOptions,
   pie,
+  type RadarOptions,
+  rankedBarLayout,
   renderAreaSvg,
   renderBarChartSvg,
+  renderBubbleSvg,
+  renderFunnelSvg,
   renderHbarSvg,
   renderHeatmapSvg,
+  renderParetoSvg,
+  renderRadarSvg,
+  renderTreemapSvg,
   renderWaterfallSvg,
   scatter,
   sparkline,
   stat,
+  type TreemapOptions,
   type WaterfallOptions,
 } from "@k2b/ui/charts/core";
 import { z } from "zod";
@@ -38,19 +49,29 @@ import { type ChartFormat, type ChartInput, type ChartNumberFormat, chartDateTim
 export * from "./chart-schema";
 
 type RenderOptions = {
-  [K in ChartInput["kind"]]: { kind: K } & (K extends "hbar"
-    ? HorizontalBarOptions
-    : K extends "waterfall"
-      ? WaterfallOptions
-      : K extends "area"
-        ? AreaOptions
-        : K extends "heatmap"
-          ? HeatmapChartOptions
-          : K extends "bar"
-            ? BarChartOptions & { data: NonNullable<BarChartOptions["data"]> }
-            : K extends keyof typeof charts
-              ? Omit<Parameters<(typeof charts)[K]>[0], "width" | "height" | "inspect">
-              : never);
+  [K in ChartInput["kind"]]: { kind: K } & (K extends "funnel"
+    ? FunnelOptions
+    : K extends "hbar"
+      ? HorizontalBarOptions
+      : K extends "waterfall"
+        ? WaterfallOptions
+        : K extends "area"
+          ? AreaOptions
+          : K extends "treemap"
+            ? TreemapOptions
+            : K extends "pareto"
+              ? ParetoOptions
+              : K extends "bubble"
+                ? BubbleOptions
+                : K extends "radar"
+                  ? RadarOptions
+                  : K extends "heatmap"
+                    ? HeatmapChartOptions
+                    : K extends "bar"
+                      ? BarChartOptions & { data: NonNullable<BarChartOptions["data"]> }
+                      : K extends keyof typeof charts
+                        ? Omit<Parameters<(typeof charts)[K]>[0], "width" | "height" | "inspect">
+                        : never);
 }[ChartInput["kind"]];
 
 /**
@@ -65,7 +86,13 @@ const labels = /* @__PURE__ */ i18n.define({
   messages: {
     en: {
       category: "Category",
+      size: "Size",
+      axis: "Axis",
       series: "Series",
+      group: "Group",
+      previous: "Previous",
+      change: "Change",
+      cumulative: "Cumulative",
       balance: "Balance",
       before: "Balance before",
       inflow: "In",
@@ -86,10 +113,19 @@ const labels = /* @__PURE__ */ i18n.define({
       whiskerLow: "Whisker low",
       whiskerHigh: "Whisker high",
       delta: "Change",
+      startShare: "Share of start",
+      previousShare: "Share of previous step",
+      rank: "Rank",
     },
     de: {
       category: "Kategorie",
+      size: "Größe",
+      axis: "Achse",
       series: "Datenreihe",
+      group: "Bereich",
+      previous: "Vorher",
+      change: "Änderung",
+      cumulative: "Kumuliert",
       balance: "Stand",
       before: "Stand davor",
       inflow: "Rein",
@@ -110,6 +146,9 @@ const labels = /* @__PURE__ */ i18n.define({
       whiskerLow: "Unterer Whisker",
       whiskerHigh: "Oberer Whisker",
       delta: "Änderung",
+      startShare: "Anteil am Start",
+      previousShare: "Anteil am vorigen Schritt",
+      rank: "Rang",
     },
   },
 });
@@ -279,6 +318,10 @@ const numberFormat = (format: ChartFormat | undefined) => (format && !("date" in
 /** The values a chart writes with its value format, for whole-number currency. */
 const formattedValues = (input: ChartInput): number[] => {
   switch (input.kind) {
+    case "bubble":
+      return input.data.flatMap((p) => (p.size === undefined ? [] : [p.size]));
+    case "radar":
+      return input.series.flatMap((s) => s.data);
     case "waterfall":
       return [input.start.value, ...input.steps.map((step) => step.value)];
     case "area":
@@ -295,6 +338,10 @@ const formattedValues = (input: ChartInput): number[] => {
       ];
     case "hbar":
       return input.rows.flatMap((r) => r.values.filter((v): v is number => v !== null));
+    case "funnel":
+      return input.data.flatMap((d) => (d.value === null ? [] : [d.value]));
+    case "treemap":
+    case "pareto":
     case "pie":
     case "donut":
       return input.data.map((item) => item.value);
@@ -318,7 +365,7 @@ const formattedValues = (input: ChartInput): number[] => {
   }
 };
 const formats = (input: ChartInput, locale: string): Formats => {
-  const yFormat = "yAxis" in input ? numberFormat(input.yAxis?.format) : "format" in input ? input.format : undefined;
+  const yFormat = ("yAxis" in input ? numberFormat(input.yAxis?.format) : undefined) ?? ("format" in input ? input.format : undefined);
   const y = chartNumberFormatters(yFormat, locale, formattedValues(input));
   const xFormat = "xAxis" in input && input.kind !== "bar" ? input.xAxis?.format : undefined;
   const x = chartNumberFormatters(numberFormat(xFormat), locale);
@@ -398,7 +445,7 @@ export function chartRenderOptions(
     formats?: { x?: (v: number) => string; y?: (v: number) => string; value?: (v: number) => string };
   } = {},
 ): RenderOptions {
-  if (input.kind === "heatmap" && input.layout === "calendar") locale = input.locale ?? locale;
+  if ("locale" in input && input.locale) locale = input.locale;
   const defaults = formats(input, locale);
   // Function formats must be measured with the same text the renderer will print.
   const format = {
@@ -411,6 +458,55 @@ export function chartRenderOptions(
   const width = options.width ?? WIDTH;
   const references = renderReferences(input);
   switch (input.kind) {
+    case "treemap":
+      return {
+        kind: "treemap",
+        legend: input.legend,
+        groups: input.groups,
+        data: input.data,
+        format: format.value,
+        locale: input.locale ?? locale,
+        displayWidth: options.width,
+      };
+    case "pareto":
+      return {
+        kind: "pareto",
+        labels: input.labels,
+        data: input.data,
+        format: format.value,
+        locale: input.locale ?? locale,
+        displayWidth: options.width,
+      };
+    case "bubble":
+      return {
+        kind: "bubble",
+        groups: input.groups,
+        data: input.data,
+        xLabel: input.xLabel,
+        yLabel: input.yLabel,
+        sizeLabel: input.sizeLabel,
+        averages: input.averages,
+        legend: input.legend,
+        locale,
+        displayWidth: options.width,
+        xFormat: options.formats?.x ?? (input.xFormat ? chartNumberFormatters(input.xFormat, locale).value : undefined),
+        yFormat: options.formats?.y ?? (input.yFormat ? chartNumberFormatters(input.yFormat, locale).value : undefined),
+        sizeFormat: format.value,
+      };
+    case "radar":
+      return {
+        kind: "radar",
+        axes: input.axes,
+        max: input.max,
+        unit: input.unit,
+        series: input.series,
+        legend: input.legend,
+        locale,
+        displayWidth: options.width,
+        format: format.value,
+      };
+    case "funnel":
+      return { kind: "funnel", data: input.data, valueFormat: format.value, locale };
     case "hbar":
       return {
         kind: "hbar",
@@ -455,6 +551,9 @@ export function chartRenderOptions(
           series: input.series,
           layout: input.layout,
           normalize: input.normalize,
+          share: input.share,
+          limit: input.limit,
+          tone: input.tone,
           compare: input.compare,
           xAxis: input.xAxis,
           yAxis: axis(yAxis, options.formats?.y ?? format.tick),
@@ -614,6 +713,16 @@ const decode = (value: string) =>
 export const drawChart = (options: RenderOptions): string => {
   const common = { width: WIDTH, height: HEIGHT, inspect: true };
   switch (options.kind) {
+    case "treemap":
+      return renderTreemapSvg({ ...options, ...common });
+    case "pareto":
+      return renderParetoSvg({ ...options, ...common });
+    case "bubble":
+      return renderBubbleSvg({ ...options, ...common });
+    case "radar":
+      return renderRadarSvg({ ...options, ...common });
+    case "funnel":
+      return renderFunnelSvg({ ...options, ...common });
     case "hbar":
       return renderHbarSvg({ ...options, ...common, height: hbarLayout(options).height });
     case "waterfall":
@@ -706,7 +815,7 @@ export function chartRows(
   locale: string,
   options: { formats?: { x?: (v: number) => string; y?: (v: number) => string; value?: (v: number) => string } } = {},
 ) {
-  if (input.kind === "heatmap" && input.layout === "calendar") locale = input.locale ?? locale;
+  if ("locale" in input && input.locale) locale = input.locale;
   const t = labels.resolve([locale]).t;
   const format = formats(input, locale);
   const valueFormat = input.tooltip?.format
@@ -738,8 +847,8 @@ export function chartRows(
     const tooltip = input.kind === "waterfall" ? { title: datum.label, rows: [] as { label: string; value: string }[] } : undefined;
     const cells: Record<string, string> = {};
     const values: Record<string, string | number> = {};
-    const cell = (id: string, label: string, value: string | number, text: string) => {
-      if (!columns.has(id)) columns.set(id, { id, label, numeric: typeof value === "number" });
+    const cell = (id: string, label: string, value: string | number, text: string, numeric = typeof value === "number") => {
+      if (!columns.has(id)) columns.set(id, { id, label, numeric });
       cells[id] = text;
       values[id] = value;
     };
@@ -758,10 +867,35 @@ export function chartRows(
               : input.data[datum.role === "outlier" ? (datum.seriesIndex ?? 0) : datum.index]?.label) ?? datum.label)
           : datum.label;
       if (label)
-        cell("label", input.kind === "heatmap" && input.layout === "calendar" ? calendarWords(locale).day : t.category, label, label);
+        cell(
+          "label",
+          input.kind === "heatmap" && input.layout === "calendar"
+            ? calendarWords(locale).day
+            : input.kind === "radar"
+              ? t.axis
+              : t.category,
+          label,
+          label,
+        );
     }
     for (const field of datum.values) {
       const value = field.value;
+      if (input.kind === "bubble") {
+        const label =
+          field.key === "x"
+            ? input.xLabel
+            : field.key === "y"
+              ? input.yLabel
+              : field.key === "size"
+                ? (input.sizeLabel ?? t.size)
+                : t.group;
+        cell(field.key, label, value, field.formatted ?? String(value));
+        continue;
+      }
+      if (input.kind === "radar" && field.key.startsWith("series:")) {
+        cell(field.key, input.series[Number(field.key.slice(7))]!.label, value, field.formatted ?? String(value));
+        continue;
+      }
       if (typeof value === "string" && input.kind === "area" && field.key === "x") {
         cell("x", t.position, value, field.formatted ?? value);
         continue;
@@ -770,6 +904,18 @@ export function chartRows(
         cell(field.key, field.key.toUpperCase(), value, value);
         continue;
       }
+      if (input.kind === "treemap" && field.key === "group" && typeof value === "string") {
+        cell("group", t.group, value, value);
+        continue;
+      }
+      if (
+        input.kind === "pareto" &&
+        (field.key === "previous" || field.key === "change" || field.key === "cumulative") &&
+        typeof value === "number"
+      ) {
+        cell(field.key, field.key === "previous" ? input.labels[1] : t[field.key], value, field.formatted ?? valueFormat(value));
+        continue;
+      }
       if (input.kind === "hbar" || (input.kind === "bar" && input.series)) {
         const seriesIndex = field.key.startsWith("series:") ? Number(field.key.slice(7)) : undefined;
         const label =
@@ -784,7 +930,30 @@ export function chartRows(
             : input.kind === "hbar"
               ? input.series[seriesIndex]!
               : input.series![seriesIndex]!.label;
-        cell(field.key, label, value, field.formatted ?? String(value));
+        cell(field.key, label, value, field.formatted ?? String(value), true);
+        continue;
+      }
+      if (
+        field.key === "startPercent" ||
+        field.key === "previousPercent" ||
+        field.key === "rank" ||
+        ((input.kind === "bar" || input.kind === "funnel") && typeof value === "string")
+      ) {
+        cell(
+          field.key,
+          field.key === "startPercent"
+            ? t.startShare
+            : field.key === "previousPercent"
+              ? t.previousShare
+              : field.key === "rank"
+                ? t.rank
+                : field.key === "percent"
+                  ? t.share
+                  : t.value,
+          value,
+          field.formatted ?? String(value),
+          true,
+        );
         continue;
       }
       if (typeof value !== "number" || field.key === "total") continue;
@@ -831,11 +1000,13 @@ export function chartRows(
         cell(
           "value",
           input.tooltip?.label ??
-            (input.kind === "bar"
-              ? input.yAxis?.label
-              : input.kind === "heatmap" && input.layout === "calendar"
-                ? input.label
-                : undefined) ??
+            (input.kind === "pareto"
+              ? input.labels[0]
+              : input.kind === "bar"
+                ? input.yAxis?.label
+                : input.kind === "heatmap" && input.layout === "calendar"
+                  ? input.label
+                  : undefined) ??
             t.value,
           value,
           input.kind === "heatmap" && input.layout === "calendar"
@@ -860,7 +1031,37 @@ export function chartRows(
     rows.push(row);
     return row;
   };
-  return { add, columns: () => [...columns.values()], table: (): ChartTable => ({ columns: [...columns.values()], rows }) };
+  return {
+    add,
+    columns: () => [...columns.values()],
+    table: (): ChartTable => {
+      if (input.kind === "bar" && input.layout === "rows" && input.limit !== undefined) {
+        const source = { ...input, limit: undefined };
+        const all = chartRows(source, locale, options);
+        const layout = rankedBarLayout({ data: source.data, title: source.title, subtitle: source.subtitle, valueFormat, locale });
+        for (const row of layout.rows) {
+          const value = Number.isFinite(row.value) ? row.value : null;
+          all.add({
+            role: "item",
+            index: row.index,
+            label: row.label,
+            anchor: [0, row.y],
+            values: [
+              { key: "value", value: value ?? "–", formatted: value === null ? "–" : valueFormat(value) },
+              {
+                key: "percent",
+                value: row.share === null ? "–" : row.share * 100,
+                formatted: row.share === null ? "–" : percent.format(row.share),
+              },
+              { key: "rank", value: row.rank },
+            ],
+          });
+        }
+        return all.table();
+      }
+      return { columns: [...columns.values()], rows };
+    },
+  };
 }
 
 /** The data behind every mark of the chart as a table: the accessible alternative and what Copy data copies. */
@@ -873,6 +1074,10 @@ export function chartTable(input: ChartInput, locale: string): ChartTable {
 /** Input values count against the budget, including observations summarized into boxes or bins. */
 export const chartMarks = (input: ChartInput): number => {
   switch (input.kind) {
+    case "pareto":
+      return input.data.length * 3;
+    case "radar":
+      return input.axes.length * input.series.length;
     case "waterfall":
       return input.steps.length + 2;
     case "area":

package/src/markdown/lib/chart-blocks.ts

@@ -1,6 +1,7 @@
 import { highlight, text } from "@k2b/stdlib";
 import { prepareChartSnapshot } from "@k2b/ui";
 import { barChartLayout, hbarLayout } from "@k2b/ui/charts";
+import { paretoLayout } from "@k2b/ui/charts/core";
 import { Lexer, type Tokens } from "marked";
 import type { z } from "zod";
 import {
@@ -457,6 +458,10 @@ export const chartBlockFrame = (body: string[], options: Pick<MarkdownChartOptio
  */
 export const notebookChartHeight = (input: ChartInput, locale: string): number | undefined => {
   const options = chartRenderOptions(input, locale, { legend: "outside" });
+  if (options.kind === "treemap") return 280;
+  if (options.kind === "pareto") return paretoLayout(options).height;
+
+  if (options.kind === "bubble" || options.kind === "radar") return 280;
   if (options.kind === "hbar") return hbarLayout(options).height;
   if (options.kind === "heatmap" && options.layout === "calendar") return 280;
   if (options.kind === "waterfall" || options.kind === "area") return 280;