gloomberb 0.18.2 → 0.18.4

package/src/components/chart/composite/rasterizer.ts

@@ -27,6 +27,7 @@ import type {
   CompositeProjectedSeries,
 } from "./types";
 import { clamp } from "../../../utils/math";
+import { clipSegmentToBand } from "./value-scale";
 
 interface RenderCompositePanelBitmapOptions {
   pixelWidth: number;
@@ -45,18 +46,29 @@ const PRIOR_CLOSE_DOT_PIXELS = 2;
 const PRIOR_CLOSE_GAP_PIXELS = 3;
 const PRIOR_CLOSE_OPACITY = 0.7;
 
-function pixelPoint(point: CompositeProjectedPoint, width: number, height: number): { x: number; y: number } {
+/**
+ * Where a point falls in the bitmap. An axis fitted to the data holds every
+ * point; one scaled by hand can put points past the edges, which `keepY` keeps
+ * there for the drawing to clip, rather than flattening them onto the edge.
+ */
+function pixelPoint(point: CompositeProjectedPoint, width: number, height: number, keepY = false): { x: number; y: number } {
+  const y = point.yRatio * Math.max(height - 1, 0);
   return {
     x: clamp(point.xRatio * Math.max(width - 1, 0), 0, Math.max(width - 1, 0)),
-    y: clamp(point.yRatio * Math.max(height - 1, 0), 0, Math.max(height - 1, 0)),
+    y: keepY ? y : clamp(y, 0, Math.max(height - 1, 0)),
   };
 }
 
 function pixelY(value: number, domain: CompositeAxisDomain, height: number): number | null {
   const ratio = projectCompositeValue(value, domain);
-  return ratio === null ? null : clamp(ratio * Math.max(height - 1, 0), 0, Math.max(height - 1, 0));
+  if (ratio === null) return null;
+  const y = ratio * Math.max(height - 1, 0);
+  return domain.manual ? y : clamp(y, 0, Math.max(height - 1, 0));
 }
 
+/** Rows past the bitmap's edges a clipped stroke still reaches, so its end is not cut square. */
+const CLIP_MARGIN_PIXELS = 4;
+
 const AREA_FILL_MAX_OPACITY = 0.3;
 const AREA_FILL_MIN_OPACITY = 0.02;
 
@@ -270,7 +282,8 @@ function drawConnectedSeries(
   area: boolean,
   cue?: SeriesLineCue,
 ): void {
-  const points = series.points.map((point) => pixelPoint(point, width, height));
+  const manual = domain.manual === true;
+  const points = series.points.map((point) => pixelPoint(point, width, height, manual));
   if (points.length === 0) return;
   const baseline = pixelY(0, domain, height) ?? height - 1;
   const step = series.source.style === "step" || series.source.interpolation === "step-after";
@@ -278,22 +291,23 @@ function drawConnectedSeries(
   if (area) fillAreaGradient(data, width, height, series, points, baseline, step, color);
 
   const stroke = cue ? new DashedStroke(data, width, height, color, cue) : null;
+  // A hand-scaled axis can send a segment far past the plot: only the part
+  // near it is stroked, so a dash pattern never walks the rest.
+  const segment = (x0: number, y0: number, x1: number, y1: number, thickness: number) => {
+    const clipped = manual ? clipSegmentToBand(x0, y0, x1, y1, -CLIP_MARGIN_PIXELS, height - 1 + CLIP_MARGIN_PIXELS) : [x0, y0, x1, y1] as const;
+    if (!clipped) return;
+    if (stroke) stroke.segment(clipped[0], clipped[1], clipped[2], clipped[3]);
+    else drawLine(data, width, height, clipped[0], clipped[1], clipped[2], clipped[3], color, thickness);
+  };
   for (let index = 1; index < points.length; index += 1) {
     const previous = points[index - 1]!;
     const current = points[index]!;
     if (series.points[index]?.breakBefore) continue;
-    if (stroke) {
-      if (step) {
-        stroke.segment(previous.x, previous.y, current.x, previous.y);
-        stroke.segment(current.x, previous.y, current.x, current.y);
-      } else {
-        stroke.segment(previous.x, previous.y, current.x, current.y);
-      }
-    } else if (step) {
-      drawLine(data, width, height, previous.x, previous.y, current.x, previous.y, color, 1.4);
-      drawLine(data, width, height, current.x, previous.y, current.x, current.y, color, 1.4);
+    if (step) {
+      segment(previous.x, previous.y, current.x, previous.y, 1.4);
+      segment(current.x, previous.y, current.x, current.y, 1.4);
     } else {
-      drawLine(data, width, height, previous.x, previous.y, current.x, current.y, color, 1.5);
+      segment(previous.x, previous.y, current.x, current.y, 1.5);
     }
   }
 
@@ -429,7 +443,7 @@ function drawColumns(
   const baseline = pixelY(0, domain, height) ?? height - 1;
   for (const projected of series.points) {
     const fill = projected.value < 0 ? negativeColor : color;
-    const point = pixelPoint(projected, width, height);
+    const point = pixelPoint(projected, width, height, domain.manual);
     const geometry = columnPixelGeometry(projected, width, layout, widthByFamily);
     fillRect(
       data,
@@ -583,12 +597,23 @@ export function renderCompositePanelBitmap(
         fillBand(data, width, height, series, domain, color);
         drawConnectedSeries(data, width, height, series, domain, color, false, cue);
         break;
-      case "points":
+      case "points": {
+        // Like candles, a point owns its full mark at the viewport edge.
+        // Reserve its radius and antialias fringe instead of clipping half a disc.
+        const radius = Math.min(2.4, (width - 1) / 2, (height - 1) / 2);
+        const insetX = Math.min(Math.ceil(radius + 1), (width - 1) / 2);
+        const insetY = Math.min(Math.ceil(radius + 1), (height - 1) / 2);
         for (const point of series.points) {
-          const projected = pixelPoint(point, width, height);
-          drawCircle(data, width, height, projected.x, projected.y, 2.4, color);
+          // Inset only visible values: a manual axis must not pull an
+          // out-of-range observation back onto the plot's edge.
+          if (domain.manual && (point.yRatio < 0 || point.yRatio > 1)) continue;
+          const projected = pixelPoint(point, width, height, domain.manual);
+          drawCircle(data, width, height,
+            clamp(projected.x, insetX, width - 1 - insetX),
+            clamp(projected.y, insetY, height - 1 - insetY), radius, color);
         }
         break;
+      }
       case "candles":
       case "ohlc":
       case "hlc":

package/src/components/chart/composite/scene.ts

@@ -26,6 +26,7 @@ import { isFiniteNumber } from "../../../utils/guards";
 import { volumeProfile } from "../../../time-series/trader-studies";
 import { extendedHoursSpans, isIntradaySeries } from "./session-shading";
 import { listingTimeZone } from "../../../market-data/market/trading-sessions";
+import { manualValueRangeApplies, valueScaleKey, valueScaleSlot, type CompositeManualValueScale } from "./value-scale";
 
 const DAY_MS = 24 * 60 * 60 * 1000;
 
@@ -328,11 +329,19 @@ function buildAxisDomain(
   series: ResolvedSeries[],
   scale: PanelScale,
   rows: number,
+  manualScale?: CompositeManualValueScale,
 ): CompositeAxisDomain | undefined {
   const axisSeries = series.filter((entry) => entry.axis === side);
   if (axisSeries.length === 0) return undefined;
   const values = axisSeries.flatMap(seriesDomainValues);
-  const { min, max } = paddedDomain([...values, ...priorCloseInReach(axisSeries, values)], scale);
+  const fitted = paddedDomain([...values, ...priorCloseInReach(axisSeries, values)], scale);
+  const scaleKey = valueScaleKey(scale, axisSeries);
+  // A range set by hand holds while the axis plots the same series and some
+  // of their data is in it; otherwise the axis fits the data again.
+  const manual = manualScale && manualScale.key === scaleKey && manualValueRangeApplies(manualScale, fitted, scale)
+    ? manualScale
+    : null;
+  const { min, max } = manual ?? fitted;
   const first = axisSeries[0]!;
   return {
     side,
@@ -346,6 +355,8 @@ function buildAxisDomain(
     seriesIds: axisSeries.map((entry) => entry.id),
     maxTicks: compositeAxisMaxTicks(rows),
     tickRows: rows,
+    scaleKey,
+    ...(manual ? { manual: true } : {}),
   };
 }
 
@@ -510,7 +521,8 @@ function attachLastPriceMarker(
   const value = lastCloseOf(projected.points);
   if (value === null) return;
   const yRatio = projectCompositeValue(value, domain);
-  if (yRatio === null) return;
+  // An axis scaled by hand can leave the last close off the panel.
+  if (yRatio === null || (domain.manual && (yRatio < 0 || yRatio > 1))) return;
   panel.lastPrice = {
     seriesId: primary.id,
     color: primary.color,
@@ -837,8 +849,8 @@ export function buildCompositeChartScene(
       ? dataSeries.filter((entry) => entry.panelId === panel.id)
       : panelSeries;
     const rows = panelHeights.get(panel.id) ?? 1;
-    const left = buildAxisDomain("left", domainSeries, scale, rows);
-    const right = buildAxisDomain("right", domainSeries, scale, rows);
+    const left = buildAxisDomain("left", domainSeries, scale, rows, options.valueScales?.[valueScaleSlot(panel.id, "left")]);
+    const right = buildAxisDomain("right", domainSeries, scale, rows, options.valueScales?.[valueScaleSlot(panel.id, "right")]);
     const axes: Partial<Record<CompositeAxisSide, CompositeAxisDomain>> = { left, right };
     return {
       id: panel.id,

package/src/components/chart/composite/text-renderer.ts

@@ -13,6 +13,7 @@ import type {
   CompositeProjectedSeries,
 } from "./types";
 import { clamp } from "../../../utils/math";
+import { clipSegmentToBand } from "./value-scale";
 
 function setCell(rows: string[][], x: number, y: number, value: string): void {
   const row = rows[y];
@@ -43,16 +44,40 @@ function drawLine(rows: string[][], x0: number, y0: number, x1: number, y1: numb
   }
 }
 
-function cellPoint(point: CompositeProjectedPoint, width: number, height: number): { x: number; y: number } {
+/**
+ * The cell a point falls in. An axis scaled by hand can put it past the top or
+ * bottom row, where `keepY` leaves it for the drawing to clip.
+ */
+function cellPoint(point: CompositeProjectedPoint, width: number, height: number, keepY = false): { x: number; y: number } {
+  const y = Math.round(point.yRatio * Math.max(height - 1, 0));
   return {
     x: clamp(Math.round(point.xRatio * Math.max(width - 1, 0)), 0, Math.max(width - 1, 0)),
-    y: clamp(Math.round(point.yRatio * Math.max(height - 1, 0)), 0, Math.max(height - 1, 0)),
+    y: keepY ? y : clamp(y, 0, Math.max(height - 1, 0)),
   };
 }
 
 function valueRow(value: number, domain: CompositeAxisDomain, height: number): number | null {
   const ratio = projectCompositeValue(value, domain);
-  return ratio === null ? null : clamp(Math.round(ratio * Math.max(height - 1, 0)), 0, Math.max(height - 1, 0));
+  if (ratio === null) return null;
+  const row = Math.round(ratio * Math.max(height - 1, 0));
+  return domain.manual ? row : clamp(row, 0, Math.max(height - 1, 0));
+}
+
+/** A line between two cells, the part outside the rows (a hand-scaled axis) left off. */
+function drawRowsLine(rows: string[][], x0: number, y0: number, x1: number, y1: number, mark: string): void {
+  const last = rows.length - 1;
+  if (y0 >= 0 && y0 <= last && y1 >= 0 && y1 <= last) {
+    drawLine(rows, x0, y0, x1, y1, mark);
+    return;
+  }
+  const clipped = clipSegmentToBand(x0, y0, x1, y1, -0.49, last + 0.49);
+  if (!clipped) return;
+  drawLine(rows, Math.round(clipped[0]), Math.round(clipped[1]), Math.round(clipped[2]), Math.round(clipped[3]), mark);
+}
+
+/** Rows from `from` to `to`, both ends kept to the rows there are. */
+function rowSpan(from: number, to: number, height: number): [number, number] {
+  return [Math.max(0, Math.min(from, to)), Math.min(height - 1, Math.max(from, to))];
 }
 
 function renderLineLike(
@@ -61,8 +86,9 @@ function renderLineLike(
   width: number,
   height: number,
   cue?: SeriesLineCue,
+  keepY = false,
 ): void {
-  const points = series.points.map((point) => ({ ...cellPoint(point, width, height), point }));
+  const points = series.points.map((point) => ({ ...cellPoint(point, width, height, keepY), point }));
   if (points.length === 0) return;
   const step = series.source.style === "step" || series.source.interpolation === "step-after";
   // Beside other lines, each line keeps its own mark the whole way, steps
@@ -73,10 +99,10 @@ function renderLineLike(
     const current = points[index]!;
     if (current.point.breakBefore) continue;
     if (step) {
-      drawLine(rows, previous.x, previous.y, current.x, previous.y, mark ?? "─");
-      drawLine(rows, current.x, previous.y, current.x, current.y, mark ?? "│");
+      drawRowsLine(rows, previous.x, previous.y, current.x, previous.y, mark ?? "─");
+      drawRowsLine(rows, current.x, previous.y, current.x, current.y, mark ?? "│");
     } else {
-      drawLine(rows, previous.x, previous.y, current.x, current.y, mark ?? "•");
+      drawRowsLine(rows, previous.x, previous.y, current.x, current.y, mark ?? "•");
     }
   }
   for (let index = 0; index < points.length; index += 1) {
@@ -94,9 +120,10 @@ function renderPoints(
   series: CompositeProjectedSeries,
   width: number,
   height: number,
+  keepY: boolean,
 ): void {
   for (const point of series.points) {
-    const cell = cellPoint(point, width, height);
+    const cell = cellPoint(point, width, height, keepY);
     setCell(rows, cell.x, cell.y, "●");
   }
 }
@@ -109,14 +136,14 @@ function renderArea(
   height: number,
   cue?: SeriesLineCue,
 ): void {
+  const keepY = domain.manual === true;
   const baseline = valueRow(0, domain, height) ?? height - 1;
-  const points = series.points.map((point) => cellPoint(point, width, height));
+  const points = series.points.map((point) => cellPoint(point, width, height, keepY));
   for (const point of points) {
-    const top = Math.min(point.y, baseline);
-    const bottom = Math.max(point.y, baseline);
+    const [top, bottom] = rowSpan(point.y, baseline, height);
     for (let row = top; row <= bottom; row += 1) setCell(rows, point.x, row, "░");
   }
-  renderLineLike(rows, series, width, height, cue);
+  renderLineLike(rows, series, width, height, cue, keepY);
 }
 
 /** A band's range as shade between its points' low and high rows, under its line. */
@@ -138,7 +165,7 @@ function renderBand(
       : { x: cellPoint(projected, width, height).x, top: Math.min(top, bottom), bottom: Math.max(top, bottom) };
   });
   const shade = (x: number, top: number, bottom: number) => {
-    for (let row = Math.round(top); row <= Math.round(bottom); row += 1) {
+    for (let row = Math.max(0, Math.round(top)); row <= Math.min(height - 1, Math.round(bottom)); row += 1) {
       const current = rows[row]?.[x];
       if (current === " " || current === "·") setCell(rows, x, row, "░");
     }
@@ -157,7 +184,7 @@ function renderBand(
       shade(x, previous.top + (current.top - previous.top) * t, previous.bottom + (current.bottom - previous.bottom) * t);
     }
   }
-  renderLineLike(rows, series, width, height, cue);
+  renderLineLike(rows, series, width, height, cue, domain.manual === true);
 }
 
 function renderColumns(
@@ -170,7 +197,7 @@ function renderColumns(
 ): void {
   const baseline = valueRow(0, domain, height) ?? height - 1;
   for (const point of series.points) {
-    const cell = cellPoint(point, width, height);
+    const cell = cellPoint(point, width, height, domain.manual);
     const group = layout.groupByPoint.get(point) ?? {
       index: 0,
       count: 1,
@@ -194,8 +221,7 @@ function renderColumns(
         : Math.round(group.index * (groupWidth - 1) / (group.count - 1));
       cell.x = groupStart + slot;
     }
-    const top = Math.min(cell.y, baseline);
-    const bottom = Math.max(cell.y, baseline);
+    const [top, bottom] = rowSpan(cell.y, baseline, height);
     for (let row = top; row <= bottom; row += 1) setCell(rows, cell.x, row, "█");
   }
 }
@@ -221,9 +247,10 @@ function renderOhlc(
     const highRow = valueRow(high, domain, height);
     const lowRow = valueRow(low, domain, height);
     if (closeRow === null || highRow === null || lowRow === null) continue;
-    drawLine(rows, x, highRow, x, lowRow, "│");
+    drawRowsLine(rows, x, highRow, x, lowRow, "│");
     if (series.source.style === "candles" && openRow !== null) {
-      for (let row = Math.min(openRow, closeRow); row <= Math.max(openRow, closeRow); row += 1) {
+      const [bodyTop, bodyBottom] = rowSpan(openRow, closeRow, height);
+      for (let row = bodyTop; row <= bodyBottom; row += 1) {
         for (let offset = -halfCandleWidth; offset <= halfCandleWidth; offset += 1) {
           setCell(rows, x + offset, row, "█");
         }
@@ -292,10 +319,10 @@ export function renderCompositePanelText(
         break;
       case "line":
       case "step":
-        renderLineLike(rows, series, plotWidth, height, cue);
+        renderLineLike(rows, series, plotWidth, height, cue, domain.manual === true);
         break;
       case "points":
-        renderPoints(rows, series, plotWidth, height);
+        renderPoints(rows, series, plotWidth, height, domain.manual === true);
         break;
     }
   }

package/src/components/chart/composite/toolbar.tsx

@@ -7,18 +7,35 @@ import { CHART_TOOLS } from "./tool-catalog";
 /** Icon cells plus the gap between chips. */
 export const CHART_TOOLBAR_WIDTH = CHART_TOOLS.length * 3 + (CHART_TOOLS.length - 1);
 
+/** The bar's own button that folds it away, and the one it folds to. */
+const FOLD_BUTTON = {
+  label: "Hide drawing tools (Shift+T)",
+  glyph: "\u2039",
+  icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M10 3.5 5.5 8l4.5 4.5" fill="none" stroke="#000" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>`,
+};
+const UNFOLD_BUTTON = {
+  label: "Show drawing tools (Shift+T)",
+  glyph: "\u203a",
+  icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M6 3.5 10.5 8 6 12.5" fill="none" stroke="#000" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>`,
+};
+
 function ChartToolButton({
   tool,
   active,
   isDesktopWeb,
   onPress,
+  role = "composite-chart-tool",
+  reveal,
 }: {
-  tool: (typeof CHART_TOOLS)[number];
+  tool: { label: string; glyph: string; icon: string; shortcut?: string; hint?: string };
   active: boolean;
   isDesktopWeb: boolean;
   onPress: () => void;
+  role?: string;
+  /** Drawn only while the pointer is over the bar (desktop and web). */
+  reveal?: boolean;
 }) {
-  const label = `${tool.label} (${tool.shortcut}). ${tool.hint}`;
+  const label = tool.shortcut ? `${tool.label} (${tool.shortcut}). ${tool.hint}` : tool.label;
   const color = active ? themeColors.text : themeColors.textDim;
   return (
     <Box
@@ -36,8 +53,9 @@ function ChartToolButton({
       }}
       cursor="pointer"
       data-gloom-interactive="true"
-      data-gloom-role="composite-chart-tool"
+      data-gloom-role={role}
       data-gloom-label={label}
+      data-gloom-reveal={reveal ? "hover" : undefined}
       data-active={active ? "true" : "false"}
       title={isDesktopWeb ? label : undefined}
       // A tool is a toggle button: the icon button family, pressed while it is the chart's tool.
@@ -130,6 +148,8 @@ export function ChartToolbar({
   drawColor,
   showColors,
   levelTool,
+  folded,
+  onToggleFolded,
   onArmTool,
   onPickColor,
 }: {
@@ -141,6 +161,10 @@ export function ChartToolbar({
   showColors: boolean;
   /** The chart's levels can be edited here. */
   levelTool: boolean;
+  /** Hidden by the user: the bar is the one button that brings it back. */
+  folded: boolean;
+  /** Folds the bar away, from the button it shows under the pointer, or opens it again. */
+  onToggleFolded: () => void;
   onArmTool: (tool: ChartToolKind | null) => void;
   onPickColor: (color: string) => void;
 }) {
@@ -166,8 +190,19 @@ export function ChartToolbar({
         }
         : undefined}
       data-gloom-role="composite-chart-toolbar"
+      data-gloom-reveal-scope="true"
+      data-folded={folded ? "true" : undefined}
     >
-      {CHART_TOOLS.filter((tool) => levelTool || tool.kind !== "level").map((tool) => (
+      {folded ? (
+        <ChartToolButton
+          tool={UNFOLD_BUTTON}
+          active={false}
+          isDesktopWeb={isDesktopWeb}
+          onPress={onToggleFolded}
+          role="composite-chart-toolbar-toggle"
+        />
+      ) : null}
+      {folded ? null : CHART_TOOLS.filter((tool) => levelTool || tool.kind !== "level").map((tool) => (
         <ChartToolButton
           key={tool.kind ?? "pan"}
           tool={tool}
@@ -177,7 +212,7 @@ export function ChartToolbar({
         />
       ))}
       {/* Colours only take space while something can use them. */}
-      {showColors ? CHART_DRAWING_COLORS.map((color) => (
+      {!folded && showColors ? CHART_DRAWING_COLORS.map((color) => (
         <ChartColorSwatch
           key={color}
           color={color}
@@ -186,6 +221,18 @@ export function ChartToolbar({
           onPress={() => onPickColor(color)}
         />
       )) : null}
+      {/* The way to fold the bar shows under the pointer, so a chart at rest
+          draws the bar as it always has; the terminal has Shift+T and the menu. */}
+      {!folded && isDesktopWeb ? (
+        <ChartToolButton
+          tool={FOLD_BUTTON}
+          active={false}
+          isDesktopWeb={isDesktopWeb}
+          onPress={onToggleFolded}
+          role="composite-chart-toolbar-toggle"
+          reveal
+        />
+      ) : null}
     </Box>
   );
 }

package/src/components/chart/composite/types.ts

@@ -1,6 +1,7 @@
 import type { ReactNode } from "react";
 import type { CompositeChartLevels } from "./levels";
 import type { SeriesLineCue } from "./series-cues";
+import type { CompositeValueScales } from "./value-scale";
 import type {
   ChartPanelSpec,
   PanelScale,
@@ -38,6 +39,10 @@ export interface CompositeAxisDomain {
   /** Rows the labels snap to, one per row, in the terminal. Unset where labels
    * sit at their exact heights. */
   tickRows?: number;
+  /** What the axis plots, which a range set by hand holds to (see `valueScaleKey`). */
+  scaleKey?: string;
+  /** The range was stretched or squeezed by hand instead of fitted to the data. */
+  manual?: boolean;
 }
 
 export interface CompositeProjectedPoint {
@@ -203,6 +208,8 @@ export interface BuildCompositeChartSceneOptions {
    * is not time, where the last observation belongs at the right edge.
    */
   rightOffsetRatio?: number;
+  /** Value axes stretched or squeezed by hand, in place of fitting them to the data. */
+  valueScales?: CompositeValueScales;
 }
 
 export interface CompositeChartXMarker {
@@ -315,6 +322,12 @@ export interface CompositeChartProps {
     interaction: "pan" | "reset" | "zoom",
   ) => void;
   onActivate?: () => void;
+  /**
+   * A press on the chart itself (plot, legend or tool bar), not a wheel turn.
+   * The chart consumes the press, so an owner that shares the pane with a
+   * field that takes typed keys hears it here to hand the keyboard back.
+   */
+  onPress?: () => void;
   onToggleSeries?: (seriesId: string) => void;
   isSeriesToggleable?: (series: ResolvedSeries) => boolean;
   /**
@@ -323,6 +336,12 @@ export interface CompositeChartProps {
    * Enter hint, such as "anchor here".
    */
   timePick?: { label: string; onPick: (date: Date) => void; onCancel: () => void } | null;
+  /**
+   * Picks a price on the levels' series instead of panning: a press on its
+   * plot hands back the price under the pointer, Enter the price at the
+   * keyboard cursor; Esc cancels. `label` is the Enter hint, such as "set limit".
+   */
+  pricePick?: { label: string; onPick: (value: number) => void; onCancel: () => void } | null;
   /**
    * Horizontal price levels on one series' panel. With `onEdit` the level
    * tool (Shift+H) adds, moves and deletes them by mouse and keyboard.