@svgrid/grid 3.0.2 → 3.0.4

package/src/SvGridChart.types.ts

@@ -0,0 +1,336 @@
+/**
+ * The props of `SvChart` / `SvGridChart`, in a plain `.ts` file so tooling
+ * that cannot parse a `.svelte` component (the web-component surface
+ * generator, the API reference) can read them.
+ */
+import type { Snippet } from 'svelte'
+import type { ChartDataLabelConfig, ChartDrawing, ChartDrawingKind, ChartGeometry, ChartPointRef, ChartScales, ChartSelection, ChartSpec, ChartZoomWindow } from './chart-types'
+import type { ChartRangePreset } from './chart-zoom'
+import type { ChartMessages } from './chart-messages'
+import type { MenuItem } from './menu-item'
+
+/** The point `onHover` reports: the category, its index in the drawn
+ *  window, the series nearest the pointer (or null) and that series' value. */
+export type ChartHoverPoint = { category: string; index: number; series: string | null; value: number | null }
+
+/** What a custom mark is handed. `scales` is null on non-cartesian types. */
+export type ChartRenderContext = {
+  geo: ChartGeometry
+  /** Pixel x at the centre of category `i`. Null when there is no x axis. */
+  xOf: ChartScales['xOf'] | null
+  /** Pixel y for a value. Null when there is no value axis. */
+  yOf: ChartScales['yOf'] | null
+  scales: ChartScales | null
+}
+
+/** One row of the default tooltip. */
+export type ChartTooltipRow = { label?: string; color?: string; value: string }
+
+/**
+ * What a custom `tooltip` snippet or `tooltipFormat` receives: the hovered
+ * category, its index, and the rows the default tooltip would have shown
+ * (already formatted), plus the single series when `tooltipMode` is
+ * `'single'` or the hover was on one mark.
+ */
+export type ChartTooltipContext = {
+  /** The category (x label) under the pointer, or the mark's own label. */
+  category: string
+  /** Its index in the visible categories, or -1 for a non-category mark. */
+  index: number
+  /** The default rows, one per visible series (or per number of a candle). */
+  rows: ChartTooltipRow[]
+  /** The series under the pointer when the tooltip is for one series. */
+  series?: string
+  /** That series' value at the category, when known. */
+  value?: number
+}
+
+/** What a custom `legendItem` snippet receives. */
+export type ChartLegendItemContext = {
+  label: string
+  color: string
+  /** The series (or slice) is toggled off. */
+  off: boolean
+  index: number
+}
+
+/**
+ * Which zoom gestures the plot answers to. `zoomable: true` is drag only,
+ * the behaviour the chart always had.
+ */
+export type ChartZoomConfig = {
+  /** Rubber-band a rectangle to zoom into it. Default true. */
+  drag?: boolean
+  /** Mouse wheel zooms around the pointer. `'modifier'` needs Ctrl / Cmd held,
+   *  so the page still scrolls over the chart. Default false. */
+  wheel?: boolean | 'modifier'
+  /** Two-finger pinch on touch screens. Default true when `wheel` is set. */
+  pinch?: boolean
+  /** Drag to pan a zoomed chart: `'shift'` with Shift held, `'mode'` through a
+   *  toolbar toggle, `true` both. Default false. */
+  pan?: boolean | 'shift' | 'mode'
+  /** Which axes the rubber band zooms. Default `'x'`. */
+  axis?: 'x' | 'y' | 'xy'
+}
+
+/** How the chart animates. `animate: true` turns on the data-update tween. */
+export type ChartAnimateConfig = {
+  /** Tween length in ms. Default 400. */
+  duration?: number
+  /** How marks first appear: fade (default), grow from the baseline, or wipe
+   *  left to right. `'none'` draws them in place. */
+  enter?: 'fade' | 'grow' | 'wipe' | 'none'
+  /** Slide marks to their new positions when the data changes. Default true
+   *  when `animate` is set at all. */
+  update?: boolean
+}
+
+/** What the context menu's custom items are built against. */
+export type ChartContextTarget = {
+  category?: string
+  index?: number
+  series?: string
+  value?: number
+}
+
+/** Where the legend sits. `true` is `'bottom'`. */
+export type ChartLegendPosition = 'top' | 'bottom' | 'left' | 'right'
+
+/**
+ * The props of `SvChart` (alias `SvGridChart`). Everything is optional but
+ * `spec`; the defaults are noted per field.
+ */
+export type SvChartProps = {
+  spec: ChartSpec
+  /** Show the (clickable) legend, and where. `true` = below the chart.
+   *  Default true. */
+  legend?: boolean | ChartLegendPosition
+  /** Render each legend entry yourself. Receives the label, colour, whether
+   *  it is toggled off, and its index. The click / double-click / hover
+   *  behaviour stays on the button around it. */
+  legendItem?: Snippet<[ChartLegendItemContext]>
+  /** Enable tooltips + crosshair + legend toggling. Default true. */
+  interactive?: boolean
+  /** Draw the value on each bar / point / slice. `true` uses the defaults;
+   *  an object picks placement, a formatter and overlap hiding. On a pie,
+   *  `{ placement: 'outside' }` draws callout labels with leader lines.
+   *  Unset, the spec's own `dataLabels` applies; default off. */
+  dataLabels?: boolean | ChartDataLabelConfig
+  /** Format a value for tooltips, data labels, AND Y-axis ticks. */
+  formatValue?: (value: number) => string
+  /**
+   * Render the tooltip body yourself. Receives the hovered category, the
+   * default rows (already formatted) and, for a single-series hover, that
+   * series. The positioning, flipping and theming stay with the chart.
+   */
+  tooltip?: Snippet<[ChartTooltipContext]>
+  /** Rewrite the default tooltip's title and rows without taking over the
+   *  markup. Return only what you want to change. */
+  tooltipFormat?: (ctx: ChartTooltipContext) => { title?: string; rows?: ChartTooltipRow[] }
+  /** `'shared'` (default) lists every series at the hovered category;
+   *  `'single'` shows only the series nearest the pointer. */
+  tooltipMode?: 'shared' | 'single'
+  /**
+   * Where the tooltip sits: `'follow'` (default) beside the pointer, or
+   * pinned in a corner of the plot so it never covers the mark under the
+   * pointer on a dense chart and never flips.
+   */
+  tooltipPosition?: 'follow' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'
+  /**
+   * A click pins the tooltip: it stays while the pointer leaves, its text
+   * can be selected and copied, and a second click on the same category,
+   * Escape or a click outside the chart releases it. A tap on a touch screen
+   * shows and pins in one. Default false.
+   */
+  tooltipSticky?: boolean
+  /** Fired when a category / slice is clicked (drill into the grid). */
+  onSelect?: (selection: ChartSelection) => void
+  /** Like `onSelect`, but only fires when the spec carries `rowIds` and
+   *  includes them in the payload. Use this to filter / highlight the
+   *  source grid when the user clicks a chart element. */
+  onDrill?: (selection: ChartSelection) => void
+  /** Allow zooming the plot: `true` for drag-to-zoom (double-click resets),
+   *  or an object choosing wheel, pinch, pan and the axes. Cartesian charts
+   *  only. Default false. */
+  zoomable?: boolean | ChartZoomConfig
+  /**
+   * The visible window, bindable: read it to persist a zoom, set it to zoom
+   * from outside (`null` is the whole chart). The component also exposes
+   * `zoomTo(window)` and `resetZoom()` through `bind:this`.
+   */
+  zoom?: ChartZoomWindow | null
+  /** Fired whenever the window changes, by gesture, preset, API or sync. */
+  onZoom?: (window: ChartZoomWindow | null) => void
+  /**
+   * Range buttons in the toolbar for a time axis: `true` for 1W / 1M / 3M /
+   * 6M / YTD / 1Y / All, or your own list (`'1M'`, or
+   * `{ label, days | from, to }`). Also in the context menu.
+   */
+  rangePresets?: boolean | ChartRangePreset[]
+  /**
+   * Charts sharing a group name share their crosshair and their zoom window.
+   * Categories are matched by label, then by date when both parse, so a daily
+   * and a weekly chart still line up.
+   */
+  syncGroup?: string
+  /**
+   * A right-click menu: `true` for the built-in items (export, copy, reset
+   * zoom, series toggles, presets), an array of your own `MenuItem`s appended
+   * after them, or a function of the clicked point returning that array.
+   */
+  contextMenu?: boolean | MenuItem[] | ((target: ChartContextTarget) => MenuItem[])
+  /**
+   * Motion: `true` for a 400ms data-update tween with the default fade-in, or
+   * an object choosing the enter effect and duration. Respects
+   * `prefers-reduced-motion`. Dense charts (thousands of points) never tween.
+   * A feed faster than the tween wants `live` instead.
+   */
+  animate?: boolean | ChartAnimateConfig
+  /**
+   * The spec is a live feed (see `appendPoints`): skip the data-update tween
+   * and the enter effect, because a tween restarted every few hundred
+   * milliseconds never settles and an enter effect replays on every tick.
+   * Default false.
+   */
+  live?: boolean
+  /**
+   * Drill into a tree map, sunburst or pie (built from `tree`) by clicking a
+   * node with children; the toolbar grows a breadcrumb back up. Default false.
+   */
+  drillable?: boolean
+  /** The current drill path (node names from the root), bindable. */
+  drillPath?: string[]
+  /**
+   * Let readers select points: `'single'` (or `true`) keeps one, Ctrl / Shift
+   * adds; `'multi'` toggles on every click. Unselected marks dim while there
+   * is a selection. Default false.
+   */
+  selectable?: boolean | 'single' | 'multi'
+  /** The selected points, bindable. */
+  selected?: ChartPointRef[]
+  onSelectionChange?: (selected: ChartPointRef[]) => void
+  /**
+   * The point under the pointer or the keyboard focus, or `null` when it
+   * leaves. Fires once per change, not per pixel: mirror it into a KPI, a
+   * linked table row or another chart. `series` is null when the whole
+   * category is hovered and no series is near.
+   */
+  onHover?: (point: ChartHoverPoint | null) => void
+  /**
+   * Hovering a mark dims the other series so the one under the pointer
+   * stands out, the way the legend does on hover. On a category chart the
+   * series within 18px of the pointer is the one; farther away, nothing
+   * dims. Default true; `false` keeps every series at full opacity.
+   */
+  hoverHighlight?: boolean
+  /** Announce the focused point to screen readers through a live region.
+   *  Default true. */
+  announce?: boolean
+  /**
+   * Describe the chart in plain words (`chartSummary`: trend and extremes
+   * per series, the biggest slices, a scatter's correlation, the last close)
+   * as the SVG's `aria-description` and in the data table's caption, and
+   * offer "Describe chart" in the context menu, which copies the sentence.
+   * Default true.
+   */
+  describe?: boolean
+  /**
+   * Translations for the chart's own strings: toolbar buttons and titles,
+   * the context menu, the legend's hints, the empty state and what it says
+   * to assistive technology. A partial map; unset keys stay English. See
+   * {@link ChartMessages} for every key.
+   */
+  localeText?: Partial<ChartMessages>
+  /**
+   * Read the crosshair off the axes: the hovered category in a pill on the x
+   * axis and the value under the pointer in a pill on the value axis, the way
+   * a trading chart reads. Default true on cartesian charts; `false` keeps
+   * the crosshair line alone.
+   */
+  crosshairLabels?: boolean
+  /** Show a compact brush / mini-map under the main chart. A draggable
+   *  window selects what the main chart shows. Pairs naturally with
+   *  `zoomable`. Default false. */
+  brush?: boolean
+  /** Height of the brush strip in pixels. Default 88. */
+  brushHeight?: number
+  /** Show a small toolbar above the chart: reset-zoom (when zoomed) and
+   *  export (PNG / SVG / copy). Default true when zoomable or onDrill is
+   *  set, otherwise false. Set to `false` to hide explicitly. */
+  toolbar?: boolean
+  /** Explicit chart pixel size (viewBox). When set, the chart lays out to
+   *  fit exactly - used by the docked panel to size the chart to its body. */
+  width?: number
+  height?: number
+  /**
+   * Size the chart to its container. The SVG is laid out at the container's
+   * pixel size (minus the toolbar, legend and brush) and re-laid-out when it
+   * resizes, so axis labels never squash and the plot uses every pixel. Give
+   * the chart its height through a flex or grid parent that stretches it; in a
+   * plain block it follows the width and keeps its own `height` (default 300).
+   * Explicit `width` / `height` win. Default false.
+   */
+  autosize?: boolean
+  /**
+   * Draw your own marks in the chart's own coordinates - the custom-series
+   * seam. `underlay` paints beneath the built-in marks (bands, shaded
+   * regions, a background you want the bars to sit on); `overlay` paints
+   * above them but below the crosshair and the hit layer, so tooltips and
+   * clicks keep working over whatever you draw.
+   *
+   * Both receive the laid-out geometry and its scales, so a custom mark lands
+   * on exactly the axis the built-in ones did:
+   *
+   * ```svelte
+   * <SvChart {spec}>
+   *   {#snippet overlay({ geo, xOf, yOf })}
+   *     <circle cx={xOf(3)} cy={yOf(120)} r="5" fill="tomato" />
+   *   {/snippet}
+   * </SvChart>
+   * ```
+   *
+   * `xOf` / `yOf` are null for the types with no cartesian axes (pie, gauge,
+   * treemap, sankey, calendar, radar, funnel); `geo` is always there.
+   */
+  underlay?: Snippet<[ChartRenderContext]>
+  overlay?: Snippet<[ChartRenderContext]>
+  /**
+   * Let a reader pin annotations on the plot. Adds an "Annotate" toggle to
+   * the toolbar; while it is on, clicking the plot fires `onAnnotate` with
+   * the point that was clicked, and clicking an existing marker fires
+   * `onAnnotationRemove` with its index.
+   *
+   * The chart does NOT store them. It owns the gesture - which you cannot
+   * build from outside, because drag is already zoom and click is already
+   * drill - and hands back the data point; where the annotations live, and
+   * whether they survive a reload, is the host's business. Put what comes
+   * back into `spec.annotations` and they render like any other.
+   */
+  annotatable?: boolean
+  /**
+   * A point the reader picked while annotating. It is a DATA point, not a
+   * pixel: annotate mode takes over the category gesture, so a note anchors
+   * to the category it was pinned on and stays there when the chart is
+   * re-laid-out, re-sorted or zoomed. That also means it works from the
+   * keyboard, since the category hit zones already navigate with arrows.
+   */
+  onAnnotate?: (at: {
+    /** The category picked, and its index. */
+    category: string
+    index: number
+    /** The value at that category on the first series. */
+    value: number
+  }) => void
+  /** An existing `spec.annotations` entry was clicked, by index. */
+  onAnnotationRemove?: (index: number) => void
+  /**
+   * Drawing tools in the toolbar: `true` for all of them (trend line,
+   * horizontal ray, Fibonacci retracement, rectangle, arrow, text) or a list
+   * of kinds. A tool takes the plot click over; the drawings are DATA points
+   * the host stores in `spec.drawings`. Cartesian charts only.
+   */
+  drawable?: boolean | ChartDrawingKind[]
+  /** The drawings after a reader added, moved or removed one. Store them in
+   *  `spec.drawings` and they render like any other. */
+  onDrawingsChange?: (drawings: ChartDrawing[]) => void
+}

package/src/SvGridChartBuilder.svelte

@@ -0,0 +1,323 @@
+<script lang="ts" generics="TFeatures extends TableFeatures = TableFeatures, TData extends RowData = RowData">
+  /**
+   * The chart builder behind the grid panel's Build button: a modal with a
+   * type gallery of live thumbnails, the same pickers the panel shows (one
+   * component, SvGridChartPickers, laid out as a form), and a Format tab for
+   * the things the derived spec does not carry (titles, axis bounds, legend
+   * placement, per-series colour / type / axis / stack, label placement,
+   * series and crosshair labels, a compact rule for narrow widths, palette,
+   * font and colours).
+   *
+   * Format edits are plain data ({@link ChartFormatState}) on the chart tab,
+   * applied by the engine to every spec the panel derives, so they survive a
+   * data change and round-trip through the saved view. Loaded lazily by the
+   * panel on the first open. Every label comes from the panel's messages, so
+   * `localization.text` translates the builder too.
+   */
+  import SvModal from "./SvModal.svelte";
+  import SvTabs from "./SvTabs.svelte";
+  import SvGridChart from "./SvGridChart.svelte";
+  import SvGridChartPickers, { type ChartPanelTypeDef } from "./SvGridChartPickers.svelte";
+  import { sampleChartThumb } from "./chart-samples";
+  import { chartPanelMessage, type GridChartPanelMessages } from "./chart-panel-messages";
+  import type { ChartFormatState, ChartMarkerShape, ChartValueFormat, RowData, TableFeatures } from "./index";
+  import type { SvGridController } from "./SvGrid.controller.svelte";
+
+  let {
+    ctrl,
+    open = $bindable(false),
+    types,
+    messages: m,
+  }: {
+    ctrl: SvGridController<TFeatures, TData>;
+    open?: boolean;
+    /** The types the panel offers for the current columns, in its groups. */
+    types: ChartPanelTypeDef[];
+    messages: GridChartPanelMessages;
+  } = $props();
+
+  let tab = $state("type");
+  const groups = $derived([...new Set(types.map((t) => t.group))]);
+  const spec = $derived(ctrl.chartSpec);
+  const palette = $derived(ctrl.chartPalette ?? undefined);
+  const seriesLabels = $derived(spec?.series.map((s) => s.label) ?? []);
+
+  const fmt = $derived<ChartFormatState>(ctrl.chartFormat ?? {});
+  function patch(p: Partial<ChartFormatState>) {
+    ctrl.chartFormat = { ...fmt, ...p };
+  }
+  function patchAxis(key: "xAxis" | "yAxis" | "y2Axis", p: Record<string, unknown>) {
+    patch({ [key]: { ...(fmt[key] ?? {}), ...p } } as Partial<ChartFormatState>);
+  }
+  function patchSeries(label: string, p: NonNullable<ChartFormatState["series"]>[string]) {
+    patch({ series: { ...(fmt.series ?? {}), [label]: { ...(fmt.series?.[label] ?? {}), ...p } } });
+  }
+  function patchStyle(p: NonNullable<ChartFormatState["style"]>) {
+    patch({ style: { ...(fmt.style ?? {}), ...p } });
+  }
+  const num = (v: string): number | null => (v.trim() === "" ? null : Number(v));
+  const hasRightAxis = $derived(!!spec?.series.some((s) => s.axis === "right") || !!fmt.series && Object.values(fmt.series).some((s) => s?.axis === "right"));
+  /** Stacks only mean something on bars and areas; the column shows for a chart that has any. */
+  const hasStackable = $derived(!!spec && ["bar", "area"].includes(spec.type));
+  const MARKERS: ChartMarkerShape[] = ["circle", "square", "diamond", "triangle", "cross", "none"];
+  const FORMATS: ChartValueFormat[] = ["number", "currency", "percent", "compact"];
+</script>
+
+<SvModal bind:open title={m.chartBuilderTitle} size="lg">
+  <div class="sv-grid-chart-builder">
+    <SvTabs
+      tabs={[{ id: "type", label: m.chartBuilderTabType }, { id: "data", label: m.chartBuilderTabData }, { id: "format", label: m.chartBuilderTabFormat }]}
+      bind:value={tab}
+      ariaLabel={m.chartBuilderTitle}
+    >
+      {#snippet panel(id)}
+        {#if id === "type"}
+          <div class="sv-grid-chart-builder-gallery">
+            {#each groups as g (g)}
+              <div class="sv-grid-chart-builder-group">{g}</div>
+              <div class="sv-grid-chart-builder-cards">
+                {#each types.filter((t) => t.group === g) as t (t.value)}
+                  <button
+                    type="button"
+                    class="sv-grid-chart-builder-card"
+                    class:is-selected={ctrl.chartType === t.value}
+                    aria-pressed={ctrl.chartType === t.value}
+                    title={t.label}
+                    onclick={() => (ctrl.chartType = t.value)}
+                  >
+                    <div class="sv-grid-chart-builder-thumb">
+                      <SvGridChart spec={sampleChartThumb(t.value, palette)} interactive={false} legend={false} toolbar={false} announce={false} />
+                    </div>
+                    <span class="sv-grid-chart-builder-card-label">{t.label}</span>
+                  </button>
+                {/each}
+              </div>
+            {/each}
+          </div>
+        {:else if id === "data"}
+          <div class="sv-grid-chart-builder-form">
+            <SvGridChartPickers {ctrl} messages={m} scope="builder" />
+            <label class="sv-grid-chart-builder-row">
+              <span>{m.chartBuilderLinked}</span>
+              <input type="checkbox" checked={!ctrl.chartFrozen} onchange={(e) => (e.currentTarget.checked ? ctrl.unfreezeChart() : ctrl.freezeChart())} />
+              <small>{ctrl.chartFrozen ? chartPanelMessage(m.chartBuilderFrozenAt, { time: new Date(ctrl.chartFrozen.at).toLocaleTimeString() }) : m.chartBuilderFollows}</small>
+            </label>
+          </div>
+        {:else}
+          <div class="sv-grid-chart-builder-form">
+            <label class="sv-grid-chart-builder-row"><span>{m.chartBuilderTitleField}</span><input type="text" value={fmt.title ?? ""} oninput={(e) => patch({ title: e.currentTarget.value })} /></label>
+            <label class="sv-grid-chart-builder-row"><span>{m.chartBuilderSubtitle}</span><input type="text" value={fmt.subtitle ?? ""} oninput={(e) => patch({ subtitle: e.currentTarget.value })} /></label>
+            <label class="sv-grid-chart-builder-row"><span>{m.chartBuilderCaption}</span><input type="text" value={fmt.caption ?? ""} oninput={(e) => patch({ caption: e.currentTarget.value })} /></label>
+            <label class="sv-grid-chart-builder-row">
+              <span>{m.chartBuilderLegend}</span>
+              <select value={fmt.legend === false ? "none" : (fmt.legend ?? "bottom")} onchange={(e) => patch({ legend: e.currentTarget.value === "none" ? false : (e.currentTarget.value as "top" | "bottom" | "left" | "right") })}>
+                <option value="bottom">{m.chartLegendBottom}</option><option value="top">{m.chartLegendTop}</option><option value="left">{m.chartLegendLeft}</option><option value="right">{m.chartLegendRight}</option><option value="none">{m.chartLegendHidden}</option>
+              </select>
+            </label>
+            <label class="sv-grid-chart-builder-row">
+              <span>{m.chartBuilderDataLabels}</span>
+              <select value={fmt.dataLabels === null ? "none" : (fmt.dataLabels ?? "auto")} onchange={(e) => patch({ dataLabels: e.currentTarget.value === "auto" ? undefined : e.currentTarget.value === "none" ? null : (e.currentTarget.value as "inside" | "outside" | "top" | "center") })}>
+                <option value="auto">{m.chartBuilderPanelSetting}</option><option value="top">{m.chartLabelsTop}</option><option value="outside">{m.chartLabelsOutside}</option><option value="inside">{m.chartLabelsInside}</option><option value="center">{m.chartLabelsCenter}</option><option value="none">{m.chartLabelsHidden}</option>
+              </select>
+            </label>
+            <label class="sv-grid-chart-builder-row"><span>{m.chartBuilderSeriesLabels}</span><input type="checkbox" checked={fmt.seriesLabels === true} onchange={(e) => patch({ seriesLabels: e.currentTarget.checked })} /></label>
+            <label class="sv-grid-chart-builder-row"><span>{m.chartBuilderCrosshairLabels}</span><input type="checkbox" checked={fmt.crosshairLabels !== false} onchange={(e) => patch({ crosshairLabels: e.currentTarget.checked })} /></label>
+            <label class="sv-grid-chart-builder-row" title={m.chartBuilderCompactBelowTitle}>
+              <span>{m.chartBuilderCompactBelow}</span>
+              <input type="number" min="0" step="10" value={fmt.compactBelow ?? ""} placeholder={m.chartBuilderOff} onchange={(e) => patch({ compactBelow: num(e.currentTarget.value) })} />
+            </label>
+            <fieldset class="sv-grid-chart-builder-fs">
+              <legend>{m.chartBuilderValueAxis}</legend>
+              <label class="sv-grid-chart-builder-row"><span>{m.chartBuilderTitleField}</span><input type="text" value={fmt.yAxis?.title ?? ""} oninput={(e) => patchAxis("yAxis", { title: e.currentTarget.value })} /></label>
+              <label class="sv-grid-chart-builder-row"><span>{m.chartBuilderMin}</span><input type="number" value={fmt.yAxis?.min ?? ""} placeholder={m.chartBuilderAuto} onchange={(e) => patchAxis("yAxis", { min: num(e.currentTarget.value) })} /></label>
+              <label class="sv-grid-chart-builder-row"><span>{m.chartBuilderMax}</span><input type="number" value={fmt.yAxis?.max ?? ""} placeholder={m.chartBuilderAuto} onchange={(e) => patchAxis("yAxis", { max: num(e.currentTarget.value) })} /></label>
+              <label class="sv-grid-chart-builder-row">
+                <span>{m.chartFormat}</span>
+                <select value={fmt.yAxis?.format ?? ""} onchange={(e) => patchAxis("yAxis", { format: (e.currentTarget.value || undefined) as ChartValueFormat | undefined })}>
+                  <option value="">{m.chartBuilderPanelSetting}</option>{#each FORMATS as f (f)}<option value={f}>{f}</option>{/each}
+                </select>
+              </label>
+              <label class="sv-grid-chart-builder-row"><span>{m.chartBuilderGridLines}</span><input type="checkbox" checked={fmt.yAxis?.gridLines !== false} onchange={(e) => patchAxis("yAxis", { gridLines: e.currentTarget.checked })} /></label>
+            </fieldset>
+            {#if hasRightAxis}
+              <fieldset class="sv-grid-chart-builder-fs">
+                <legend>{m.chartBuilderRightAxis}</legend>
+                <label class="sv-grid-chart-builder-row"><span>{m.chartBuilderTitleField}</span><input type="text" value={fmt.y2Axis?.title ?? ""} oninput={(e) => patchAxis("y2Axis", { title: e.currentTarget.value })} /></label>
+                <label class="sv-grid-chart-builder-row"><span>{m.chartBuilderMin}</span><input type="number" value={fmt.y2Axis?.min ?? ""} placeholder={m.chartBuilderAuto} onchange={(e) => patchAxis("y2Axis", { min: num(e.currentTarget.value) })} /></label>
+                <label class="sv-grid-chart-builder-row"><span>{m.chartBuilderMax}</span><input type="number" value={fmt.y2Axis?.max ?? ""} placeholder={m.chartBuilderAuto} onchange={(e) => patchAxis("y2Axis", { max: num(e.currentTarget.value) })} /></label>
+              </fieldset>
+            {/if}
+            <fieldset class="sv-grid-chart-builder-fs">
+              <legend>{m.chartBuilderCategoryAxis}</legend>
+              <label class="sv-grid-chart-builder-row"><span>{m.chartBuilderTitleField}</span><input type="text" value={fmt.xAxis?.title ?? ""} oninput={(e) => patchAxis("xAxis", { title: e.currentTarget.value })} /></label>
+              <label class="sv-grid-chart-builder-row"><span>{m.chartBuilderGridLines}</span><input type="checkbox" checked={fmt.xAxis?.gridLines === true} onchange={(e) => patchAxis("xAxis", { gridLines: e.currentTarget.checked })} /></label>
+              <label class="sv-grid-chart-builder-row">
+                <span>{m.chartBuilderAxisLabels}</span>
+                <select value={fmt.xAxis?.labelRotation === undefined ? "auto" : String(fmt.xAxis.labelRotation)} onchange={(e) => patchAxis("xAxis", { labelRotation: e.currentTarget.value === "auto" ? "auto" : Number(e.currentTarget.value) })}>
+                  <option value="auto">{m.chartBuilderLabelsAuto}</option><option value="0">{m.chartBuilderLabelsHorizontal}</option><option value="-45">{m.chartBuilderLabelsTilted}</option><option value="-90">{m.chartBuilderLabelsVertical}</option>
+                </select>
+              </label>
+            </fieldset>
+            {#if seriesLabels.length}
+              <fieldset class="sv-grid-chart-builder-fs">
+                <legend>{m.chartBuilderSeries}</legend>
+                <div class="sv-grid-chart-builder-series-head" class:has-stack={hasStackable}><span>{m.chartBuilderSeries}</span><span>{m.chartBuilderColor}</span><span>{m.chartBuilderSeriesType}</span><span>{m.chartBuilderAxis}</span><span>{m.chartBuilderMarker}</span><span>{m.chartBuilderWidth}</span>{#if hasStackable}<span>{m.chartBuilderStack}</span>{/if}</div>
+                {#each seriesLabels as label (label)}
+                  {@const f = fmt.series?.[label] ?? {}}
+                  {@const s = spec?.series.find((x) => x.label === label)}
+                  <div class="sv-grid-chart-builder-series" class:has-stack={hasStackable} data-series={label}>
+                    <span class="sv-grid-chart-builder-series-name" title={label}>{label}</span>
+                    <input type="color" value={f.color ?? s?.color ?? "#2563eb"} aria-label={chartPanelMessage(m.chartBuilderSeriesColorLabel, { series: label })} oninput={(e) => patchSeries(label, { color: e.currentTarget.value })} />
+                    <select value={f.type ?? s?.type ?? ""} aria-label={chartPanelMessage(m.chartBuilderSeriesTypeLabel, { series: label })} onchange={(e) => patchSeries(label, { type: (e.currentTarget.value || undefined) as "bar" | "line" | "area" | undefined })}>
+                      <option value="">{m.chartBuilderChartType}</option><option value="bar">{m.chartBuilderBar}</option><option value="line">{m.chartBuilderLine}</option><option value="area">{m.chartBuilderArea}</option>
+                    </select>
+                    <select value={f.axis ?? s?.axis ?? "left"} aria-label={chartPanelMessage(m.chartBuilderSeriesAxisLabel, { series: label })} onchange={(e) => patchSeries(label, { axis: e.currentTarget.value as "left" | "right" })}>
+                      <option value="left">{m.chartBuilderLeft}</option><option value="right">{m.chartBuilderRight}</option>
+                    </select>
+                    <select value={f.marker ?? "circle"} aria-label={chartPanelMessage(m.chartBuilderSeriesMarkerLabel, { series: label })} onchange={(e) => patchSeries(label, { marker: e.currentTarget.value as ChartMarkerShape })}>
+                      {#each MARKERS as mk (mk)}<option value={mk}>{mk}</option>{/each}
+                    </select>
+                    <input type="number" min="0.5" max="8" step="0.5" value={f.strokeWidth ?? 2} aria-label={chartPanelMessage(m.chartBuilderSeriesWidthLabel, { series: label })} onchange={(e) => patchSeries(label, { strokeWidth: Number(e.currentTarget.value) || 2 })} />
+                    {#if hasStackable}
+                      <input type="text" value={f.stack ?? s?.stack ?? ""} placeholder={m.chartBuilderStackPlaceholder} aria-label={chartPanelMessage(m.chartBuilderSeriesStackLabel, { series: label })} onchange={(e) => patchSeries(label, { stack: e.currentTarget.value.trim() })} />
+                    {/if}
+                  </div>
+                {/each}
+              </fieldset>
+            {/if}
+            <fieldset class="sv-grid-chart-builder-fs">
+              <legend>{m.chartBuilderStyle}</legend>
+              <label class="sv-grid-chart-builder-row"><span>{m.chartBuilderFontSize}</span><input type="number" min="8" max="32" value={fmt.style?.fontSize ?? ""} placeholder="12" onchange={(e) => patchStyle({ fontSize: num(e.currentTarget.value) ?? undefined })} /></label>
+              <label class="sv-grid-chart-builder-row"><span>{m.chartBuilderFontFamily}</span><input type="text" value={fmt.style?.fontFamily ?? ""} oninput={(e) => patchStyle({ fontFamily: e.currentTarget.value || undefined })} /></label>
+              <label class="sv-grid-chart-builder-row"><span>{m.chartBuilderBackground}</span><input type="text" value={fmt.style?.background ?? ""} placeholder="transparent" oninput={(e) => patchStyle({ background: e.currentTarget.value || undefined })} /></label>
+              <label class="sv-grid-chart-builder-row"><span>{m.chartBuilderTextColor}</span><input type="text" value={fmt.style?.textColor ?? ""} placeholder="inherit" oninput={(e) => patchStyle({ textColor: e.currentTarget.value || undefined })} /></label>
+            </fieldset>
+            <div class="sv-grid-chart-builder-actions">
+              <button type="button" class="sv-grid-chart-btn" onclick={() => (ctrl.chartFormat = null)}>{m.chartBuilderResetFormat}</button>
+            </div>
+          </div>
+        {/if}
+      {/snippet}
+    </SvTabs>
+  </div>
+</SvModal>
+
+<style>
+  .sv-grid-chart-builder {
+    min-height: 420px;
+    max-height: 70vh;
+    overflow: auto;
+    font-size: 12px;
+  }
+  .sv-grid-chart-builder-group {
+    font-size: 11px;
+    font-weight: 600;
+    color: var(--sg-muted, #64748b);
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    margin: 10px 0 6px;
+  }
+  .sv-grid-chart-builder-cards {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+    gap: 8px;
+  }
+  .sv-grid-chart-builder-card {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    padding: 6px;
+    border: 1px solid var(--sg-border, #e2e8f0);
+    border-radius: 8px;
+    background: var(--sg-bg, #fff);
+    color: var(--sg-fg, #0f172a);
+    cursor: pointer;
+    text-align: left;
+    font: inherit;
+  }
+  .sv-grid-chart-builder-card:hover { border-color: var(--sg-accent, #2563eb); }
+  .sv-grid-chart-builder-card.is-selected {
+    border-color: var(--sg-accent, #2563eb);
+    box-shadow: 0 0 0 2px color-mix(in srgb, var(--sg-accent, #2563eb) 30%, transparent 70%);
+  }
+  .sv-grid-chart-builder-thumb {
+    height: 92px;
+    overflow: hidden;
+    pointer-events: none;
+  }
+  .sv-grid-chart-builder-card-label {
+    font-size: 11px;
+    font-weight: 600;
+  }
+  .sv-grid-chart-builder-form {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    padding: 8px 2px;
+  }
+  .sv-grid-chart-builder-row {
+    display: grid;
+    grid-template-columns: 110px 1fr;
+    align-items: center;
+    gap: 8px;
+  }
+  .sv-grid-chart-builder-row > span {
+    color: var(--sg-muted, #64748b);
+  }
+  .sv-grid-chart-builder-row > small {
+    grid-column: 2;
+    color: var(--sg-muted, #64748b);
+  }
+  .sv-grid-chart-builder-row > input[type="checkbox"] {
+    justify-self: start;
+  }
+  .sv-grid-chart-builder-row input[type="text"],
+  .sv-grid-chart-builder-row input[type="number"],
+  .sv-grid-chart-builder-row select,
+  .sv-grid-chart-builder-series input,
+  .sv-grid-chart-builder-series select {
+    font: inherit;
+    border: 1px solid var(--sg-border, #e2e8f0);
+    border-radius: 6px;
+    background: var(--sg-bg, #fff);
+    color: var(--sg-fg, #0f172a);
+    padding: 3px 6px;
+    min-width: 0;
+  }
+  .sv-grid-chart-builder-fs {
+    border: 1px solid var(--sg-border, #e2e8f0);
+    border-radius: 8px;
+    padding: 6px 10px 10px;
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+  }
+  .sv-grid-chart-builder-fs > legend {
+    font-weight: 600;
+    padding: 0 4px;
+  }
+  .sv-grid-chart-builder-series,
+  .sv-grid-chart-builder-series-head {
+    display: grid;
+    grid-template-columns: minmax(80px, 1.4fr) 44px 1fr 1fr 1fr 64px;
+    gap: 6px;
+    align-items: center;
+  }
+  .sv-grid-chart-builder-series.has-stack,
+  .sv-grid-chart-builder-series-head.has-stack {
+    grid-template-columns: minmax(80px, 1.4fr) 44px 1fr 1fr 1fr 64px 72px;
+  }
+  .sv-grid-chart-builder-series-head {
+    color: var(--sg-muted, #64748b);
+    font-size: 11px;
+  }
+  .sv-grid-chart-builder-series-name {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .sv-grid-chart-builder-actions {
+    display: flex;
+    justify-content: flex-end;
+  }
+</style>