@svgrid/grid 3.0.2 → 3.0.4

package/src/GridMenus.svelte

@@ -14,6 +14,7 @@
   import SvListBox from "./SvListBox.svelte";
   import type {
     FilterOperator,
+    MenuPosition,
   } from "./SvGrid.types";
   import {
     getEditorInputType,
@@ -175,6 +176,29 @@
       import("./SvDateRangeInput.svelte").then((m) => (MenuRangePicker = m.default));
   });
 
+  /**
+   * The context menu is placed on a guessed height (280px, flipped above the
+   * click when that would not fit) before it exists. A consumer's menu can be
+   * far taller - the spreadsheet shell's has thirteen entries - and then the
+   * guess leaves its tail below the viewport. Once the menu is in the DOM its
+   * real box is measured and the position pulled back inside: up when it runs
+   * off the bottom, left when it runs off the right. The style reads
+   * `contextMenuPos`, so writing it moves the menu; the action's `update`
+   * runs on every position change and settles in one pass.
+   */
+  function keepInViewport(node: HTMLElement, _pos: MenuPosition) {
+    const fit = () => {
+      const pos = ctrl.contextMenuPos;
+      const box = node.getBoundingClientRect();
+      if (!box.width && !box.height) return;
+      const x = Math.max(8, Math.min(pos.x, window.innerWidth - box.width - 8));
+      const y = Math.max(8, Math.min(pos.y, window.innerHeight - box.height - 8));
+      if (x !== pos.x || y !== pos.y) ctrl.contextMenuPos = { x, y };
+    };
+    fit();
+    return { update: fit };
+  }
+
   /**
    * Opening the filter popover used to leave focus on the funnel button
    * outside it, so a keyboard user landed nowhere and had to tab in past the
@@ -832,6 +856,8 @@
   {/if}
 
   {#if contextMenuFor}
+    {@const items = contextMenuItems()}
+    {@const gutter = items.some((it) => it.icon)}
     <div
       class="sv-grid-menu-backdrop"
       role="presentation"
@@ -843,8 +869,9 @@
       data-svgrid-menu={ctrl.gridDomId}
       role="menu"
       style={`left: ${contextMenuPos.x}px; top: ${contextMenuPos.y}px;`}
+      use:keepInViewport={contextMenuPos}
     >
-      {#each contextMenuItems() as item (item.key)}
+      {#each items as item (item.key)}
         {#if item.separator}
           <div class="sv-grid-menu-sep"></div>
         {:else}
@@ -854,7 +881,22 @@
             role="menuitem"
             disabled={item.disabled}
             onclick={() => { item.run?.(); closeContextMenu(); }}
-          >{item.label}</button>
+          >
+            <!-- Every item keeps the gutter once one has an icon, so the labels
+                 line up. The label is its own span with no whitespace text
+                 around it, so the button reads exactly its label. -->
+            {#if gutter}<span class="sv-grid-menu-icon" aria-hidden="true">
+                {#if typeof item.icon === "string"}
+                  {@render icon(item.icon)}
+                {:else if item.icon}
+                  <svg class="sv-grid-menu-icon-own" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" focusable="false">
+                    {#each item.icon.paths as path, i (i)}
+                      <path d={path.d} fill={path.fill ? "currentColor" : "none"} stroke-width={path.width} stroke-dasharray={path.dash} />
+                    {/each}
+                  </svg>
+                {/if}
+              </span>{/if}<span class="sv-grid-menu-label">{item.label}</span>
+          </button>
         {/if}
       {/each}
     </div>

package/src/SvChartMenu.svelte

@@ -0,0 +1,69 @@
+<script lang="ts">
+  /**
+   * The chart's right-click menu: the same portalled, focus-trapped,
+   * dismissable panel `SvContextMenu` opens, without the zone `<div>` that
+   * component wraps its children in. The chart owns its own `contextmenu`
+   * handler (the SVG is the zone) and hands this the items and a position.
+   *
+   * Lazy-loaded by `SvGridChart` on the first right-click, so a chart that is
+   * never right-clicked never pays for the menu machinery.
+   */
+  import { portalToBody, popIn } from './popover'
+  import { createDismissableLayer, onScrollOutside } from './a11y/dismissable'
+  import { createFocusTrap } from './a11y/focus-trap'
+  import SvMenuList, { type MenuItem } from './SvMenuList.svelte'
+
+  type Props = {
+    items: ReadonlyArray<MenuItem>
+    x: number
+    y: number
+    onClose: () => void
+    ariaLabel?: string
+  }
+  let { items, x, y, onClose, ariaLabel = 'Chart menu' }: Props = $props()
+
+  let panelEl = $state<HTMLDivElement | null>(null)
+  const MENU_W = 220
+  const pos = $derived.by(() => {
+    if (typeof window === 'undefined') return { x, y }
+    const estH = Math.min(items.length, 12) * 34 + 8
+    return {
+      x: Math.max(6, Math.min(x, window.innerWidth - MENU_W - 6)),
+      y: Math.max(6, Math.min(y, window.innerHeight - estH - 6)),
+    }
+  })
+
+  $effect(() => {
+    if (!panelEl) return
+    const trap = createFocusTrap(panelEl, {
+      initialFocus: () => panelEl?.querySelector<HTMLElement>('[role="menuitem"]:not([disabled])') ?? null,
+    })
+    trap.activate()
+    const layer = createDismissableLayer({ element: () => panelEl, onDismiss: onClose })
+    layer.activate()
+    const offScroll = onScrollOutside(() => panelEl, onClose)
+    return () => { layer.release(); trap.release(); offScroll() }
+  })
+</script>
+
+<div
+  bind:this={panelEl}
+  class="sv-ctx sv-grid-chart-menu"
+  use:portalToBody
+  use:popIn={{}}
+  style:position="fixed"
+  style:top={`${pos.y}px`}
+  style:left={`${pos.x}px`}
+  aria-label={ariaLabel}
+>
+  <SvMenuList {items} onclose={onClose} onselect={() => onClose()} />
+</div>
+
+<style>
+  :global(.sv-grid-chart-menu) {
+    z-index: 2147483646; min-width: 220px;
+    background: var(--sg-bg, #fff); color: var(--sg-fg, #0f172a);
+    border: 1px solid var(--sg-border, #e2e8f0); border-radius: 10px;
+    box-shadow: 0 16px 48px -12px rgba(15, 23, 42, 0.35); font-size: 13px;
+  }
+</style>

package/src/SvChartPanes.svelte

@@ -0,0 +1,113 @@
+<script lang="ts">
+  /**
+   * SvChartPanes - a price chart with indicator panes stacked under it, the
+   * way a trading terminal lays them out: one shared x axis (labelled on the
+   * last pane only), one value-axis gutter width so the plots line up, and
+   * one crosshair / zoom window across all of them.
+   *
+   * Composition, not a new layout: every pane is a full `SvChart` in a sync
+   * group of its own, so tooltips, keyboard navigation, the screen-reader
+   * table, export and the context menu all come for free, and the geometry
+   * stays single-plot. The main chart takes every `SvChart` prop.
+   */
+  import SvGridChart from './SvGridChart.svelte'
+  import { indicatorPane, type ChartIndicatorSpec } from './chart-indicators'
+  import type { ChartSpec, ChartZoomWindow } from './chart-types'
+  import type { SvChartProps } from './SvGridChart.types'
+
+  type Props = Omit<SvChartProps, 'spec' | 'syncGroup' | 'zoom'> & {
+    /** The price spec: a candlestick / OHLC / line chart with the series the
+     *  indicators read (`ohlc` and `volumes` on it for the volume-based ones). */
+    spec: ChartSpec
+    /** The panes under the price, top to bottom. */
+    indicators?: ChartIndicatorSpec[]
+    /** A sync group to share with charts outside the stack. Default: private. */
+    syncGroup?: string
+    /** Width of the value-axis gutter every pane uses, so the plots line up.
+     *  Default 56. */
+    axisWidth?: number
+    /** The shared zoom window, bindable. */
+    zoom?: ChartZoomWindow | null
+  }
+  let {
+    spec,
+    indicators = [],
+    syncGroup,
+    axisWidth = 56,
+    zoom = $bindable(null),
+    onZoom,
+    zoomable,
+    legend,
+    toolbar,
+    ...rest
+  }: Props = $props()
+
+  const uid = `svcp-${Math.random().toString(36).slice(2, 8)}`
+  const group = $derived(syncGroup ?? uid)
+  // Every pane is laid out at the stack's pixel width, so the panes line up
+  // and none of them is a 520px viewBox stretched across a 900px column.
+  // Heights stay what the specs say; only the width follows the container.
+  let hostW = $state(0)
+  const widthOf = (s: ChartSpec) => (hostW > 0 && !s.width ? { width: Math.round(hostW) } : {})
+  /** The price chart hides its x labels when a pane below will show them. */
+  const mainSpec = $derived<ChartSpec>({
+    ...spec,
+    ...widthOf(spec),
+    xAxis: { ...spec.xAxis, ...(indicators.length ? { labels: false } : {}) },
+    yAxis: { ...spec.yAxis, width: axisWidth },
+    ...(spec.y2Axis || spec.series.some((s) => s.axis === 'right') ? { y2Axis: { ...spec.y2Axis, width: axisWidth } } : {}),
+  })
+  // The pane's title is drawn by this component as a small corner label
+  // rather than by the chart frame, which would take a third of a 100px
+  // pane for it.
+  const panes = $derived(
+    indicators.map((ind, i) => {
+      const { title, ...pane } = indicatorPane(spec, ind)
+      return {
+        title: title ?? ind.kind,
+        spec: {
+          ...pane,
+          ...widthOf(pane),
+          xAxis: { ...pane.xAxis, labels: i === indicators.length - 1 },
+          yAxis: { ...pane.yAxis, width: axisWidth },
+        } satisfies ChartSpec,
+      }
+    }),
+  )
+</script>
+
+<div class="sv-chart-panes" bind:clientWidth={hostW}>
+  <div class="sv-chart-pane is-main">
+    <SvGridChart spec={mainSpec} syncGroup={group} bind:zoom {onZoom} {zoomable} {legend} {toolbar} {...rest} />
+  </div>
+  {#each panes as pane, i (`${indicators[i]?.kind}-${i}`)}
+    <div class="sv-chart-pane is-indicator" data-indicator={indicators[i]?.kind}>
+      <span class="sv-chart-pane-title" style:left={`${axisWidth + 6}px`}>{pane.title}</span>
+      <SvGridChart spec={pane.spec} syncGroup={group} zoomable={zoomable ? { drag: false, wheel: typeof zoomable === 'object' ? zoomable.wheel : false, pan: typeof zoomable === 'object' ? zoomable.pan : false } : false} legend={false} toolbar={false} interactive localeText={rest.localeText} />
+    </div>
+  {/each}
+</div>
+
+<style>
+  .sv-chart-panes {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    min-width: 0;
+  }
+  .sv-chart-pane {
+    position: relative;
+    min-width: 0;
+  }
+  /* The title of a pane sits in its top-left corner, small, like a terminal. */
+  /* Placed just right of the value-axis gutter, clear of the tick labels. */
+  .sv-chart-pane-title {
+    position: absolute;
+    top: 2px;
+    z-index: 1;
+    font-size: 10px;
+    font-weight: 600;
+    color: var(--sg-muted, #64748b);
+    pointer-events: none;
+  }
+</style>

package/src/SvChartPanes.test.ts

@@ -0,0 +1,66 @@
+import { afterEach, describe, expect, it } from 'vitest'
+import { flushSync, mount, unmount } from 'svelte'
+import SvChartPanes from './SvChartPanes.svelte'
+import type { ChartSpec, OhlcBar } from './chart-types'
+
+let app: ReturnType<typeof mount> | null = null
+let target: HTMLElement | null = null
+afterEach(() => {
+  if (app) unmount(app)
+  app = null
+  target?.remove()
+  target = null
+})
+
+const closes = [44.34, 44.09, 44.15, 43.61, 44.33, 44.83, 45.10, 45.42, 45.84, 46.08, 45.89, 46.03, 45.61, 46.28, 46.28, 46.00, 46.03, 46.41, 46.22, 45.64]
+const bars: OhlcBar[] = closes.map((c, i) => ({ o: i ? closes[i - 1]! : c, h: c + 1, l: c - 1, c }))
+const price: ChartSpec = {
+  type: 'candlestick',
+  categories: closes.map((_, i) => `2026-01-${String(i + 1).padStart(2, '0')}`),
+  series: [{ label: 'ACME', values: closes, ohlc: bars, volumes: closes.map((_, i) => 100 + i) }],
+  xType: 'ordinal-time',
+  width: 600,
+  height: 240,
+}
+
+function render(props: Record<string, unknown>) {
+  target = document.createElement('div')
+  document.body.appendChild(target)
+  app = mount(SvChartPanes, { target, props: props as never })
+  flushSync()
+  return target
+}
+
+describe('SvChartPanes', () => {
+  it('stacks the price chart over one pane per indicator, x labels on the last pane only', () => {
+    const el = render({ spec: price, indicators: [{ kind: 'volume' }, { kind: 'rsi', params: { period: 5 } }] })
+    expect(el.querySelectorAll('.sv-grid-chart-svg')).toHaveLength(3)
+    const panes = [...el.querySelectorAll('.sv-chart-pane.is-indicator')]
+    expect(panes.map((p) => p.getAttribute('data-indicator'))).toEqual(['volume', 'rsi'])
+    expect(panes.map((p) => p.querySelector('.sv-chart-pane-title')!.textContent)).toEqual(['Volume', 'RSI 5'])
+    // Category (x) labels: none on the main chart and the volume pane, some on the RSI pane.
+    const xLabels = (root: Element) => root.querySelectorAll('text.sv-grid-chart-axis.is-x, .sv-grid-chart-xlabel').length
+    const [main, vol, rsi] = [el.querySelector('.sv-chart-pane.is-main')!, panes[0]!, panes[1]!]
+    expect(xLabels(rsi)).toBeGreaterThan(0)
+    expect(xLabels(main)).toBe(0)
+    expect(xLabels(vol)).toBe(0)
+    // The volume pane draws bars, the RSI pane a line with its 30 / 70 lines.
+    expect(vol.querySelectorAll('.sv-grid-chart-bar').length).toBe(20)
+    expect(rsi.querySelectorAll('.sv-grid-chart-refline').length).toBe(2)
+  })
+
+  it('shares the crosshair across the stack through a private sync group', () => {
+    const el = render({ spec: price, indicators: [{ kind: 'volume' }] })
+    const main = el.querySelector('.sv-chart-pane.is-main')!
+    ;(main.querySelectorAll('.sv-grid-chart-cat-hit')[3] as SVGElement).dispatchEvent(new FocusEvent('focus'))
+    flushSync()
+    expect(main.querySelector('.sv-grid-chart-crosshair')).toBeTruthy()
+    expect(el.querySelector('.sv-chart-pane.is-indicator .sv-grid-chart-crosshair')).toBeTruthy()
+  })
+
+  it('with no indicators it is one chart with its own x labels', () => {
+    const el = render({ spec: price })
+    expect(el.querySelectorAll('.sv-grid-chart-svg')).toHaveLength(1)
+    expect(el.querySelectorAll('text.sv-grid-chart-axis.is-x, .sv-grid-chart-xlabel').length).toBeGreaterThan(0)
+  })
+})