gloomberb 0.18.3 → 0.18.4

package/src/components/chart/composite/panel-surface.tsx

@@ -10,6 +10,9 @@ import {
 } from "../../../ui";
 import { colors as themeColors } from "../../../theme/colors";
 import { consumeChartMouseEvent, getGlobalMouseX, getLocalPlotPointer, type ChartMouseEvent } from "../core/pointer";
+import { Button } from "../../ui/button";
+import { clamp } from "../../../utils/math";
+import { panValueRange, resolveAxisDragSpanFactor, zoomValueRange, type CompositeValueRange } from "./value-scale";
 import { useStaticChartBitmapSize } from "./bitmap";
 import { useMeasuredCells } from "../../../ui/measured-cells";
 import { PriceAxisLabels, placeAxisTicks } from "./price-axis-labels";
@@ -57,16 +60,21 @@ import {
 import { compositeRightOffsetRatio, unprojectCompositeTimestamp } from "./time-scale";
 import { resolveCompositeCursorDate, unprojectCompositeValue } from "./scene";
 import { compositeAxisTickLabels, renderCompositeAxisText, renderCompositePanelText } from "./text-renderer";
-import type { CompositeChartColors, CompositeChartScene, CompositePanelScene } from "./types";
+import type { CompositeAxisSide, CompositeChartColors, CompositeChartScene, CompositePanelScene } from "./types";
 import { useCompositePanelBitmap } from "./panel-bitmap";
 import { nextDrawingId, nextLevelId } from "./drawing-store";
 import {
+  AXIS_DOUBLE_PRESS_MS,
+  PLOT_DOUBLE_CLICK_MS,
   COMPOSITE_PANEL_ROLE,
   isVerticalWheelDirection,
+  manualValueAxes,
   startPanGesture,
   releaseEditableFocus,
   type PanGesture,
+  type PendingAxisWheel,
   type PendingWheel,
+  type ValueAxisStart,
 } from "./panel-gestures";
 import { resolvePanelCrosshair, axisLabelRows, cursorAxisLabel, resolveSeriesCursorYRatio, resolveSeriesAxisTags } from "./panel-labels";
 import type { KeyboardToolDrag } from "./use-composite-chart-keyboard";
@@ -78,6 +86,11 @@ const webFrame = globalThis as typeof globalThis & {
 
 const NO_LEVELS: readonly ProjectedLevel[] = [];
 
+/** The pointer's height in rows, to a fraction of one where the host reports it. */
+function pointerRow(event: ChartMouseEvent): number {
+  return typeof event.preciseY === "number" ? event.preciseY : event.y;
+}
+
 interface CompositePanelSurfaceProps {
   panel: CompositePanelScene;
   scene: CompositeChartScene;
@@ -121,13 +134,41 @@ interface CompositePanelSurfaceProps {
   showTextFallback: boolean;
   /** Set while the owner is picking a bar: a press picks instead of panning. */
   onPickTime?: (date: Date) => void;
+  /** Set while the owner is picking a price on the levels' series: a press picks the one under it. */
+  onPickPrice?: (value: number) => void;
   /** The chart's levels when they draw on this panel. */
   levels: CompositeChartLevels | null;
   selectedLevelId: string | null;
   onSelectLevel: (id: string | null) => void;
+  /** The value axes stretch and squeeze under a drag or the wheel, and a double click fits them again. */
+  valueScalable: boolean;
+  onSetValueScale: (panelId: string, side: CompositeAxisSide, key: string, range: CompositeValueRange) => void;
+  onResetValueScale: (panelId: string) => void;
+  /** The line above this panel, which a drag moves (desktop and web): null for the top panel. */
+  dividerAbove?: { active: boolean; gestures: PanelDividerGestures } | null;
+  /** A double click on bare plot gives this panel the whole chart, or gives the others back. */
+  onToggleMaximized?: () => void;
+}
+
+interface PanelDividerGestures {
+  onMouseDown: (event: ChartMouseEvent) => void;
+  onMouseDrag: (event: ChartMouseEvent) => void;
+  onMouseUp: (event: ChartMouseEvent) => void;
+  onMouseDragEnd: (event: ChartMouseEvent) => void;
 }
 
 const DESKTOP_PLOT_STYLE = { flex: "1 1 0px", width: "auto", minWidth: 0, height: "auto", alignSelf: "stretch" } as const;
+/** Over a level that drags, or while one does: it moves up and down only. */
+const DESKTOP_PLOT_LEVEL_STYLE = { ...DESKTOP_PLOT_STYLE, cursor: "ns-resize" } as const;
+const DESKTOP_PLOT_PICK_STYLE = { ...DESKTOP_PLOT_STYLE, cursor: "crosshair" } as const;
+/** The grab strip over the line between two panels: the line and a few pixels either side of it. */
+const PANEL_DIVIDER_STYLE = {
+  left: 0,
+  right: 0,
+  width: "auto",
+  top: "calc(-1 * var(--gloom-space-xs))",
+  height: "calc(2 * var(--gloom-space-xs) + 1px)",
+} as const;
 
 export function CompositePanelSurface({
   panel,
@@ -162,9 +203,15 @@ export function CompositePanelSurface({
   onPointerPress,
   showTextFallback,
   onPickTime,
+  onPickPrice,
   levels,
   selectedLevelId,
   onSelectLevel,
+  valueScalable,
+  onSetValueScale,
+  onResetValueScale,
+  dividerAbove = null,
+  onToggleMaximized,
 }: CompositePanelSurfaceProps) {
   const isDesktopWeb = useUiCapabilities().nativePaneChrome === true;
   const { cellHeightPx = 18, cellWidthPx = 8, fractionalViewport = false } = useUiCapabilities();
@@ -186,6 +233,8 @@ export function CompositePanelSurface({
   const activeCursorYRatio = scene.cursorXRatio === null
     ? null
     : heldCursorYRatio ?? seriesCursorYRatio;
+  // The last press on bare plot, for a double press where the host does not count clicks.
+  const lastPlotPressRef = useRef<{ at: number; x: number; y: number } | null>(null);
   const dragRef = useRef<
     | PanGesture
     | {
@@ -302,6 +351,13 @@ export function CompositePanelSurface({
     () => levels && levelDomain ? projectLevels(levels.items, levelDomain, levelDraft) : NO_LEVELS,
     [levelDomain, levelDraft, levels],
   );
+  // Over a line a plain drag moves, and while one moves, the pointer says it goes up and down.
+  const levelGrab = useMemo(() => {
+    if (levelDraft) return true;
+    if (!levels?.onEdit || cursorYRatio === null || onPickTime || onPickPrice || (armedTool && armedTool !== "level")) return false;
+    const hit = hitTestLevel(projectedLevels, cursorYRatio, levelGrabRatio(panel.height));
+    return !!hit?.editable && !!hit.draggable;
+  }, [armedTool, cursorYRatio, levelDraft, levels?.onEdit, onPickPrice, onPickTime, panel.height, projectedLevels]);
   // Drawings project through the time scale alone: the crosshair moving,
   // here or on a linked chart, must not repaint the plot, which the terminal's
   // kitty surface would upload whole again.
@@ -569,6 +625,13 @@ export function CompositePanelSurface({
       if (date) onPickTime(date);
       return;
     }
+    if (onPickPrice) {
+      // Only the levels' own panel has their prices; a press elsewhere picks nothing.
+      const ratios = pointerRatios(event);
+      const value = ratios && levelDomain ? unprojectCompositeValue(ratios.yRatio, levelDomain) : null;
+      if (value !== null && levelDomain) onPickPrice(roundLevelValue(value, levelDomain));
+      return;
+    }
     // A keyboard-armed tool covers terminals that never forward modifier drags.
     const tool = resolveChartToolKind(event.modifiers) ?? armedTool;
     if (tool === "level" && levels?.onEdit && levelDomain) {
@@ -626,6 +689,7 @@ export function CompositePanelSurface({
     // With no tool in hand, a press on a drawing or a level picks it so Backspace
     // or Delete can remove it; the press still pans, and one on bare plot lets go.
     const ratios = pointerRatios(event);
+    let bare = true;
     if (ratios) {
       const drawingHit = drawings.length > 0 ? hitTestDrawings(drawings, scene, panel, ratios, plotAspect) : null;
       const levelHit = !drawingHit && levels?.onEdit && levelDomain
@@ -633,15 +697,46 @@ export function CompositePanelSurface({
         : null;
       onSelectDrawing(drawingHit ? drawingHit.drawing.id : null);
       onSelectLevel(levelHit?.editable ? levelHit.id : null);
+      bare = !drawingHit && !levelHit;
+      // An order's line drags without the level tool; other levels keep the press for panning.
+      if (levelHit?.editable && levelHit.draggable) {
+        dragRef.current = { kind: "level-move", id: levelHit.id };
+        lastPlotPressRef.current = null;
+        updateCursor(event);
+        return;
+      }
+    }
+    // A double click on bare plot gives the panel the whole chart, or the
+    // others back (the terminal counts two presses on one spot). Its first
+    // press must have landed here too: a double click on a button that goes
+    // away under it (All panels) ends on this plot, and is not one of its.
+    if (!bare) lastPlotPressRef.current = null;
+    if (onToggleMaximized && bare) {
+      const now = Date.now();
+      const last = lastPlotPressRef.current;
+      const double = typeof event.detail === "number"
+        ? event.detail >= 2 && !!last && now - last.at < PLOT_DOUBLE_CLICK_MS
+        : !!last && now - last.at < AXIS_DOUBLE_PRESS_MS && Math.abs(last.x - event.x) <= 1 && Math.abs(last.y - event.y) <= 1;
+      lastPlotPressRef.current = double ? null : { at: now, x: event.x, y: event.y };
+      if (double) {
+        dragRef.current = null;
+        onToggleMaximized();
+        return;
+      }
     }
     if (!updateCursor(event)) return;
-    dragRef.current = startPanGesture(
-      frame,
-      viewport,
-      plotSize.width,
-      getGlobalMouseX(event, renderer),
-      plotSpanFactor,
-    );
+    const values = manualValueAxes(panel);
+    dragRef.current = {
+      ...startPanGesture(
+        frame,
+        viewport,
+        plotSize.width,
+        getGlobalMouseX(event, renderer),
+        plotSpanFactor,
+      ),
+      // A panel scaled by hand moves up and down with the drag as well.
+      ...(values.length > 0 ? { startCellY: pointerRow(event), values } : {}),
+    };
   }, [
     armedTool,
     drawings,
@@ -650,6 +745,7 @@ export function CompositePanelSurface({
     levels,
     onActivate,
     onPickTime,
+    onPickPrice,
     onPointerPress,
     onSelectDrawing,
     onSelectLevel,
@@ -665,6 +761,7 @@ export function CompositePanelSurface({
     scene,
     updateCursor,
     viewport,
+    onToggleMaximized,
   ]);
   const pressCursor = useCallback((event: ChartMouseEvent) => {
     onActivate?.();
@@ -678,7 +775,11 @@ export function CompositePanelSurface({
     if (drag.kind === "level-move") {
       const ratios = pointerRatios(event);
       const value = ratios && levelDomain ? unprojectCompositeValue(ratios.yRatio, levelDomain) : null;
-      if (value !== null && levelDomain) setLevelDraft({ id: drag.id, value: roundLevelValue(value, levelDomain) });
+      if (value === null || !levelDomain) return;
+      const draft = { id: drag.id, value: roundLevelValue(value, levelDomain) };
+      // The release reads the ref, and a quick drag lets go before the next render.
+      levelDraftRef.current = draft;
+      setLevelDraft(draft);
       return;
     }
     if (drag.kind === "edit") {
@@ -716,11 +817,19 @@ export function CompositePanelSurface({
       (globalX - drag.startGlobalX) * drag.positionsPerCell,
       { frame: drag.frame, from: drag.startViewport },
     );
+    if (drag.values && drag.startCellY !== undefined) {
+      const deltaRatio = (pointerRow(event) - drag.startCellY) / Math.max(plotSize.height, 1);
+      for (const axis of drag.values) {
+        onSetValueScale(panel.id, axis.side, axis.key, panValueRange(axis.start, axis.scale, deltaRatio));
+      }
+    }
   }, [
     frame,
     levelDomain,
     onEditDrawing,
     onPanViewport,
+    onSetValueScale,
+    plotSize.height,
     panel,
     plotSize.width,
     plotSpanFactor,
@@ -849,6 +958,136 @@ export function CompositePanelSurface({
     updateCursor,
   ]);
 
+  // A value axis under the pointer: a drag stretches (up) or squeezes (down)
+  // it around its middle, the wheel around the pointer, and a double click
+  // fits it to the data again. Read through refs, so the handlers stay put.
+  const axisGestureRef = useRef<(ValueAxisStart & { startRow: number; moved: boolean }) | null>(null);
+  const lastAxisPressRef = useRef<{ side: CompositeAxisSide; at: number } | null>(null);
+  const latestAxesRef = useRef({ panel, onSetValueScale, onResetValueScale, onActivate });
+  latestAxesRef.current = { panel, onSetValueScale, onResetValueScale, onActivate };
+  /** The pointer's height down the panel, 0 at the top and 1 at the bottom. */
+  const axisPointerRatio = useCallback((event: ChartMouseEvent): number => {
+    const plot = plotRef.current as unknown as { absoluteY?: number; y?: number; height?: number } | null;
+    const top = plot?.absoluteY ?? plot?.y;
+    const height = plot?.height ?? 0;
+    if (top === undefined || height <= 1) return 0.5;
+    return clamp((pointerRow(event) - top) / (fractionalViewport ? height : height - 1), 0, 1);
+  }, [fractionalViewport]);
+  const pressAxis = useCallback((side: CompositeAxisSide, event: ChartMouseEvent) => {
+    const latest = latestAxesRef.current;
+    const domain = latest.panel.axes[side];
+    if (!domain?.scaleKey) return;
+    latest.onActivate?.();
+    consumeChartMouseEvent(event);
+    // The desktop counts clicks; the terminal has two presses close together.
+    const now = Date.now();
+    const last = lastAxisPressRef.current;
+    const double = typeof event.detail === "number"
+      ? event.detail >= 2
+      : !!last && last.side === side && now - last.at < AXIS_DOUBLE_PRESS_MS;
+    if (double) {
+      lastAxisPressRef.current = null;
+      axisGestureRef.current = null;
+      latest.onResetValueScale(latest.panel.id);
+      return;
+    }
+    lastAxisPressRef.current = { side, at: now };
+    axisGestureRef.current = {
+      side,
+      key: domain.scaleKey,
+      scale: domain.scale,
+      start: { min: domain.min, max: domain.max },
+      startRow: pointerRow(event),
+      moved: false,
+    };
+  }, []);
+  const dragAxis = useCallback((event: ChartMouseEvent) => {
+    const gesture = axisGestureRef.current;
+    if (!gesture) return;
+    consumeChartMouseEvent(event);
+    const deltaPx = (pointerRow(event) - gesture.startRow) * cellHeightPx;
+    if (!gesture.moved && Math.abs(deltaPx) < 1) return;
+    // A drag is not the first half of a double click.
+    gesture.moved = true;
+    lastAxisPressRef.current = null;
+    const latest = latestAxesRef.current;
+    latest.onSetValueScale(
+      latest.panel.id,
+      gesture.side,
+      gesture.key,
+      zoomValueRange(gesture.start, gesture.scale, resolveAxisDragSpanFactor(deltaPx), 0.5),
+    );
+  }, [cellHeightPx]);
+  const releaseAxis = useCallback(() => {
+    axisGestureRef.current = null;
+  }, []);
+  const pendingAxisWheelRef = useRef<PendingAxisWheel | null>(null);
+  const axisWheelFrameRef = useRef<number | null>(null);
+  const flushAxisWheel = useCallback(() => {
+    axisWheelFrameRef.current = null;
+    const pending = pendingAxisWheelRef.current;
+    pendingAxisWheelRef.current = null;
+    const latest = latestAxesRef.current;
+    const domain = pending ? latest.panel.axes[pending.side] : undefined;
+    if (!pending || !domain?.scaleKey || pending.spanLog === 0) return;
+    latest.onSetValueScale(
+      latest.panel.id,
+      pending.side,
+      domain.scaleKey,
+      zoomValueRange({ min: domain.min, max: domain.max }, domain.scale, Math.exp(pending.spanLog), pending.anchorRatio),
+    );
+  }, []);
+  useEffect(() => () => {
+    pendingAxisWheelRef.current = null;
+    if (axisWheelFrameRef.current !== null) {
+      webFrame.cancelAnimationFrame?.(axisWheelFrameRef.current);
+      axisWheelFrameRef.current = null;
+    }
+  }, []);
+  const wheelAxis = useCallback((side: CompositeAxisSide, event: ChartMouseEvent) => {
+    const scroll = event.scroll;
+    if (!scroll || !latestAxesRef.current.panel.axes[side]?.scaleKey) return;
+    latestAxesRef.current.onActivate?.();
+    consumeChartMouseEvent(event);
+    if (!isVerticalWheelDirection(scroll.direction)) return;
+    const pending = pendingAxisWheelRef.current?.side === side
+      ? pendingAxisWheelRef.current
+      : { side, spanLog: 0, anchorRatio: 0.5 };
+    // Up stretches, as Ctrl and the wheel zoom the plot in.
+    pending.spanLog -= Math.log(resolveCompositeWheelZoom(scroll));
+    pending.anchorRatio = axisPointerRatio(event);
+    pendingAxisWheelRef.current = pending;
+    if (!isDesktopWeb || typeof webFrame.requestAnimationFrame !== "function") {
+      flushAxisWheel();
+      return;
+    }
+    if (axisWheelFrameRef.current === null) {
+      axisWheelFrameRef.current = webFrame.requestAnimationFrame(flushAxisWheel);
+    }
+  }, [axisPointerRatio, flushAxisWheel, isDesktopWeb]);
+  const leftAxisGestures = useMemo(() => valueScalable ? {
+    onMouseDown: (event: ChartMouseEvent) => pressAxis("left", event),
+    onMouseDrag: dragAxis,
+    onMouseUp: releaseAxis,
+    onMouseDragEnd: releaseAxis,
+    onMouseScroll: (event: ChartMouseEvent) => wheelAxis("left", event),
+  } : undefined, [dragAxis, pressAxis, releaseAxis, valueScalable, wheelAxis]);
+  const rightAxisGestures = useMemo(() => valueScalable ? {
+    onMouseDown: (event: ChartMouseEvent) => pressAxis("right", event),
+    onMouseDrag: dragAxis,
+    onMouseUp: releaseAxis,
+    onMouseDragEnd: releaseAxis,
+    onMouseScroll: (event: ChartMouseEvent) => wheelAxis("right", event),
+  } : undefined, [dragAxis, pressAxis, releaseAxis, valueScalable, wheelAxis]);
+  // While the panel is scaled by hand, the foot of the axis scaled says so
+  // and is the way back.
+  const manuallyScaled = !!panel.axes.left?.manual || !!panel.axes.right?.manual;
+  const manualSide: CompositeAxisSide | null = !valueScalable || !manuallyScaled ? null
+    : panel.axes.right?.manual && rightAxisWidth > 0 ? "right"
+      : panel.axes.left?.manual && leftAxisWidth > 0 ? "left"
+        : rightAxisWidth > 0 ? "right" : leftAxisWidth > 0 ? "left" : null;
+  const manualLabel = (manualSide === "left" ? leftAxisWidth : rightAxisWidth) >= 4 ? "Auto" : "A";
+
   return (
     <Box
       flexDirection="row"
@@ -860,6 +1099,23 @@ export function CompositePanelSurface({
       // follows it by CSS. At rest, the size the cells give it.
       style={isDesktopWeb ? { width: "100%", flex: `${panel.height} 1 calc(${panel.height} * var(--cell-h))`, height: "auto", minHeight: 0 } : undefined}
     >
+      {dividerAbove && isDesktopWeb ? (
+        // A line too thin to grab, so the handle straddles it, as a pane
+        // sidebar's does; it draws only while the pointer is on it.
+        <Box
+          position="absolute"
+          left={0}
+          top={0}
+          height={1}
+          zIndex={29}
+          style={PANEL_DIVIDER_STYLE}
+          {...dividerAbove.gestures}
+          title="Drag to resize the panels, double-click for the default split"
+          data-gloom-interactive="true"
+          data-gloom-role="composite-chart-panel-divider"
+          data-active={dividerAbove.active ? "true" : undefined}
+        />
+      ) : null}
       {measureReadout ? (
         <Box
           position="absolute"
@@ -900,6 +1156,8 @@ export function CompositePanelSurface({
             extraMarkers={leftAxisMarkers}
             seriesTags={isDesktopWeb ? seriesAxisTags.filter((tag) => tag.side === "left") : undefined}
             measuredPixelHeight={plotSize.height * cellHeightPx}
+            gestures={leftAxisGestures}
+            footButton={manualSide === "left"}
           />
           <Box width={axisGap} />
         </>
@@ -910,7 +1168,7 @@ export function CompositePanelSurface({
         width={plotSize.width}
         height={plotSize.height}
         // Desktop: the width the axes leave, and the row's height.
-        style={isDesktopWeb ? DESKTOP_PLOT_STYLE : undefined}
+        style={isDesktopWeb ? levelGrab ? DESKTOP_PLOT_LEVEL_STYLE : onPickPrice ? DESKTOP_PLOT_PICK_STYLE : DESKTOP_PLOT_STYLE : undefined}
         flexDirection="column"
         bitmaps={bitmapLayers}
         crosshair={crosshair}
@@ -922,11 +1180,12 @@ export function CompositePanelSurface({
         onMouseDragEnd={interactive && navigable ? releasePlot : undefined}
         onMouseScroll={interactive && navigable ? panFromWheel : undefined}
         onMouseOut={interactive ? clearCursor : undefined}
-        cursor={interactive ? toolDrag || !navigable || onPickTime ? "crosshair" : "grab" : undefined}
+        cursor={interactive ? levelGrab ? "ns-resize" : toolDrag || !navigable || onPickTime || onPickPrice ? "crosshair" : "grab" : undefined}
         data-gloom-interactive={interactive ? "true" : undefined}
         data-gloom-role={COMPOSITE_PANEL_ROLE}
         data-gloom-remote-kind={remoteKind}
         data-gloom-label={panel.label ?? panel.id}
+        data-gloom-value-scale={manuallyScaled ? "manual" : undefined}
       >
         {textLines.map((line, index) => <Text key={index} fg={colors.text}>{line}</Text>)}
       </ChartSurface>
@@ -970,9 +1229,44 @@ export function CompositePanelSurface({
             extraMarkers={rightAxisMarkers}
             seriesTags={isDesktopWeb ? seriesAxisTags.filter((tag) => tag.side === "right") : undefined}
             measuredPixelHeight={plotSize.height * cellHeightPx}
+            gestures={rightAxisGestures}
+            footButton={manualSide === "right"}
           />
         </>
       ) : null}
+      {manualSide ? (
+        <Box
+          position="absolute"
+          left={manualSide === "left"
+            ? 0
+            : leftAxisWidth + (leftAxisWidth ? axisGap : 0) + plotWidth + axisGap + Math.max(0, rightAxisWidth - manualLabel.length)}
+          top={Math.max(0, panel.height - 1)}
+          width={manualLabel.length}
+          height={1}
+          zIndex={26}
+          style={isDesktopWeb
+            ? {
+              left: manualSide === "left" ? 0 : "auto",
+              right: manualSide === "right" ? 0 : "auto",
+              top: "auto",
+              bottom: "var(--gloom-space-xs)",
+              width: "auto",
+              height: "auto",
+            }
+            : undefined}
+          data-gloom-role="composite-chart-value-scale"
+        >
+          <Button
+            label="Auto Scale"
+            displayLabel={manualLabel}
+            title="Values scaled by hand. Fit them to the data again (or double-click the axis)."
+            variant="secondary"
+            compact
+            stopPropagation
+            onPress={() => onResetValueScale(panel.id)}
+          />
+        </Box>
+      ) : null}
     </Box>
   );
 }

package/src/components/chart/composite/price-axis-labels.tsx

@@ -4,6 +4,7 @@ import { colors } from "../../../theme/colors";
 import { clamp } from "../../../utils/math";
 import type { SeriesAxisTag } from "./panel-labels";
 import { placeSeriesAxisTags, SeriesAxisTags } from "./series-axis-tags";
+import type { ChartMouseEvent } from "../core/pointer";
 
 function formatAxisCell(label: string | null, width: number): string {
   if (width <= 0) return "";
@@ -39,6 +40,21 @@ interface PriceAxisLabelsProps {
   /** Desktop/web observations, separate from a drawing tool's endpoint. */
   seriesTags?: readonly SeriesAxisTag[];
   measuredPixelHeight?: number;
+  /** A value axis the pointer stretches and squeezes: a drag or the wheel on it, a double click back. */
+  gestures?: PriceAxisGestures;
+  /** A button sits at the foot of the axis (Auto, while scaled by hand): tick labels make room for it. */
+  footButton?: boolean;
+}
+
+/** The button at the foot of an axis sits this far above its bottom edge (`--gloom-space-xs`). */
+const FOOT_BUTTON_INSET_PX = 4;
+
+interface PriceAxisGestures {
+  onMouseDown: (event: ChartMouseEvent) => void;
+  onMouseDrag: (event: ChartMouseEvent) => void;
+  onMouseUp: (event: ChartMouseEvent) => void;
+  onMouseDragEnd: (event: ChartMouseEvent) => void;
+  onMouseScroll: (event: ChartMouseEvent) => void;
 }
 
 interface CursorPriceAxisOverlay {
@@ -141,8 +157,10 @@ export function PriceAxisLabels({
   extraMarkers,
   seriesTags,
   measuredPixelHeight,
+  gestures,
+  footButton = false,
 }: PriceAxisLabelsProps) {
-  const { cellHeightPx = 18, fractionalViewport = false } = useUiCapabilities();
+  const { cellHeightPx = 18, fractionalViewport = false, nativePaneChrome } = useUiCapabilities();
   const overlay = useMemo(() => buildCursorPriceAxisOverlay({
     axisWidth,
     axisSectionWidth,
@@ -168,6 +186,7 @@ export function PriceAxisLabels({
         ...(usePixelOverlay ? [(overlay.topPercent! / 100) * (pixelHeight - 1)] : []),
         ...(visibleMarkers?.map((marker) => marker.pixelY) ?? []),
         ...placedSeriesTags.map((tag) => tag.centerY),
+        ...(footButton ? [pixelHeight - FOOT_BUTTON_INSET_PX - cellHeightPx / 2] : []),
       ],
     })
     : null;
@@ -196,6 +215,7 @@ export function PriceAxisLabels({
     )
   );
 
+  const placedStyle = usePixelOverlay || usePixelTicks ? { position: "relative", height: "auto", alignSelf: "stretch" } : undefined;
   return (
     <Box
       width={axisSectionWidth}
@@ -204,7 +224,11 @@ export function PriceAxisLabels({
       overflow="hidden"
       // Labels placed in percentages follow the row's height as a resize
       // draws the chart at a new size between renders.
-      style={usePixelOverlay || usePixelTicks ? { position: "relative", height: "auto", alignSelf: "stretch" } : undefined}
+      style={gestures && nativePaneChrome ? { ...placedStyle, cursor: "ns-resize" } : placedStyle}
+      {...gestures}
+      data-gloom-interactive={gestures ? "true" : undefined}
+      data-gloom-role={side ? "composite-chart-value-axis" : undefined}
+      data-gloom-side={side}
     >
       {Array.from({ length: height }, (_, row) => {
         const isCursorRow = !usePixelOverlay && cursorLabel !== null && cursorRow === row;
@@ -213,7 +237,7 @@ export function PriceAxisLabels({
           : extraMarkers?.find((entry) => entry.row === row);
         const label = isCursorRow
           ? cursorLabel
-          : marker?.label ?? (usePixelTicks ? null : axisLabels.get(row) ?? null);
+          : marker?.label ?? (usePixelTicks || (footButton && row === height - 1) ? null : axisLabels.get(row) ?? null);
         return (
           <Box key={row} height={1}>
             {renderAxisLabel(

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":