gloomberb 0.18.3 → 0.18.5

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,23 @@ function buildAxisDomain(
   series: ResolvedSeries[],
   scale: PanelScale,
   rows: number,
+  manualScale?: CompositeManualValueScale,
+  referenceLevels?: BuildCompositeChartSceneOptions["referenceLevels"],
 ): 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 references = referenceLevels && axisSeries.some((entry) => entry.id === referenceLevels.seriesId)
+    ? referenceLevels.items.map((level) => level.value).filter(Number.isFinite)
+    : [];
+  const fitted = paddedDomain([...values, ...priorCloseInReach(axisSeries, values), ...references], 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 +359,8 @@ function buildAxisDomain(
     seriesIds: axisSeries.map((entry) => entry.id),
     maxTicks: compositeAxisMaxTicks(rows),
     tickRows: rows,
+    scaleKey,
+    ...(manual ? { manual: true } : {}),
   };
 }
 
@@ -510,7 +525,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 +853,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")], options.referenceLevels);
+    const right = buildAxisDomain("right", domainSeries, scale, rows, options.valueScales?.[valueScaleSlot(panel.id, "right")], options.referenceLevels);
     const axes: Partial<Record<CompositeAxisSide, CompositeAxisDomain>> = { left, right };
     return {
       id: panel.id,

package/src/components/chart/composite/series-axis-tags.tsx

@@ -7,20 +7,23 @@ import type { SeriesAxisTag } from "./panel-labels";
  * ties. A forward pass separates neighbours; a backward pass fits the bottom
  * edge. Panels shorter than the readout use parallel lanes, not dropped tags
  * or smaller type. The gutter reserves those lanes before the cursor moves.
+ * Only a tag pushed off its value's height gets a leader: a tick beside a tag
+ * still on its value reads as a minus sign (`-8k` for a positive 8k).
  */
 export function placeSeriesAxisTags(tags: readonly SeriesAxisTag[], pixelHeight: number, labelHeight: number) {
   const height = Math.max(pixelHeight, labelHeight);
   const capacity = Math.max(1, Math.floor(height / labelHeight));
   const sorted = tags.map((tag, order) => ({ ...tag, order, anchorY: clamp(tag.yRatio, 0, 1) * Math.max(pixelHeight - 1, 0) }))
     .sort((a, b) => a.anchorY - b.anchorY || a.order - b.order);
-  const placed: Array<SeriesAxisTag & { anchorY: number; centerY: number; lane: number }> = [];
+  const placed: Array<SeriesAxisTag & { anchorY: number; centerY: number; lane: number; leader: boolean }> = [];
   for (let start = 0; start < sorted.length; start += capacity) {
     const lane = sorted.slice(start, start + capacity);
     const centers = lane.map((tag) => clamp(tag.anchorY, labelHeight / 2, height - labelHeight / 2));
     for (let i = 1; i < centers.length; i++) centers[i] = Math.max(centers[i]!, centers[i - 1]! + labelHeight);
     if (centers.length) centers[centers.length - 1] = Math.min(centers.at(-1)!, height - labelHeight / 2);
     for (let i = centers.length - 2; i >= 0; i--) centers[i] = Math.min(centers[i]!, centers[i + 1]! - labelHeight);
-    lane.forEach((tag, index) => placed.push({ ...tag, centerY: centers[index]!, lane: Math.floor(start / capacity) }));
+    lane.forEach((tag, index) => placed.push({ ...tag, centerY: centers[index]!, lane: Math.floor(start / capacity),
+      leader: Math.abs(centers[index]! - tag.anchorY) > labelHeight / 2 }));
   }
   return placed;
 }
@@ -37,13 +40,14 @@ export function SeriesAxisTags({ placed, pixelHeight, lanes, background }: {
     const edge = left ? "right" : "left";
     const inset = `${tag.lane * 100 / lanes}%`;
     return <Box key={tag.seriesId} style={{ position: "absolute", inset: 0, pointerEvents: "none" }}>
-      {/* The tick stays at the observation, even when the badge must move. */}
+      {/* The anchor stays at the observation; it draws a tick when the badge had to move off it. */}
       <Box
         data-gloom-role="chart-series-axis-anchor"
         data-series-id={tag.seriesId}
-        style={{ position: "absolute", [edge]: 0, top: percent(tag.anchorY), width: `calc(${inset} + .5em)`, height: 0, borderTop: `1px ${tag.carried ? "dashed" : "solid"} ${tag.color}` }}
+        data-leader={tag.leader ? "true" : undefined}
+        style={{ position: "absolute", [edge]: 0, top: percent(tag.anchorY), width: `calc(${inset} + .5em)`, height: 0, borderTop: tag.leader ? `1px ${tag.carried ? "dashed" : "solid"} ${tag.color}` : undefined }}
       />
-      <Box style={{ position: "absolute", [edge]: `calc(${inset} + .25em)`, top: percent(Math.min(tag.anchorY, tag.centerY)), height: percent(Math.abs(tag.centerY - tag.anchorY)), width: 0, borderLeft: `1px solid ${tag.color}` }} />
+      {tag.leader ? <Box style={{ position: "absolute", [edge]: `calc(${inset} + .25em)`, top: percent(Math.min(tag.anchorY, tag.centerY)), height: percent(Math.abs(tag.centerY - tag.anchorY)), width: 0, borderLeft: `1px solid ${tag.color}` }} /> : null}
       <Box
         data-gloom-role="chart-series-axis-tag"
         data-series-id={tag.seriesId}
@@ -52,12 +56,15 @@ export function SeriesAxisTags({ placed, pixelHeight, lanes, background }: {
         data-carried={tag.carried ? "true" : undefined}
         aria-label={`${tag.seriesLabel}: ${tag.label}${tag.carried ? " (carried)" : ""}`}
         style={{
-          position: "absolute", [edge]: `calc(${inset} + .5em)`, top: percent(tag.centerY), transform: "translateY(-50%)",
-          width: `calc(${100 / lanes}% - .5em)`, height: "1.5em", lineHeight: "1.5em",
-          alignItems: left ? "flex-end" : "flex-start", justifyContent: "center",
+          position: "absolute", [edge]: inset, top: percent(tag.centerY), transform: "translateY(-50%)",
+          // The value sits in a box in its series colour, as a chart level's label does, so nothing
+          // beside it can read as the value's sign. A box wider than its lane is clipped, not wrapped.
+          width: "max-content", maxWidth: `calc(${100 / lanes}% - ${lanes > 1 ? ".25em" : "0px"})`,
+          boxSizing: "border-box", height: "1.5em", lineHeight: "1.5em", paddingInline: ".15em",
+          alignItems: left ? "flex-end" : "flex-start", justifyContent: "center", overflow: "hidden",
           // Every badge paints above every leader, including another lane's.
           zIndex: 2, color: tag.color, backgroundColor: background, whiteSpace: "nowrap",
-          borderBlockEnd: tag.carried ? `1px dashed ${tag.color}` : undefined,
+          border: `1px ${tag.carried ? "dashed" : "solid"} ${tag.color}`,
         }}
       >
         <Text fg={tag.color} selectable={false}>{tag.label}</Text>

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,10 @@ 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;
+  /** Reference guides participate in auto-scaling on the axis of this series. */
+  referenceLevels?: CompositeChartLevels | null;
 }
 
 export interface CompositeChartXMarker {
@@ -329,9 +338,17 @@ 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.
    */
   levels?: CompositeChartLevels | null;
+  /** Mean and population ±1σ of at least 20 finite observations in the active viewport. */
+  rangeStatisticsSeriesId?: string;
 }