gloomberb 0.18.3 → 0.18.5

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

@@ -1,16 +1,28 @@
-import { useCallback, useEffect, useId, useMemo, useRef, useState, useSyncExternalStore } from "react";
+import { useCallback, useEffect, useId, useMemo, useRef, useState, useSyncExternalStore, type ReactNode } from "react";
 import { useCompositeChartKeyboard } from "./use-composite-chart-keyboard";
 import { useCompositeViewport } from "./use-composite-viewport";
 import { CompositePanelSurface } from "./panel-surface";
 import { MINIMUM_AXIS_LABEL_WIDTH, compositeAxisLabelWidth } from "./panel-labels";
-import { isVerticalWheelDirection } from "./panel-gestures";
+import { AXIS_DOUBLE_PRESS_MS, isVerticalWheelDirection } from "./panel-gestures";
 import { type ChartToolSpan, CHART_DRAWING_COLORS, isDrawingTool, type ChartDrawing } from "./tools";
 import { ChartDrawingStore, NO_DRAWINGS } from "./drawing-store";
 import { CompositeLegend } from "./legend";
+import { compositeRangeStatisticsLevels } from "./range-statistics";
 import { ChartToolbar, CHART_TOOLBAR_WIDTH } from "./toolbar";
 import { AsciiText, Box, ChartSurface, Text, useUiCapabilities, type BoxRenderable } from "../../../ui";
+import { Button } from "../../ui/button";
 import { useLiveStretch } from "../../../ui/live-stretch";
-import { useOptionalPaneInstanceId } from "../../../state/app/context";
+import { useOptionalPaneInstanceId, usePaneSettingValue } from "../../../state/app/context";
+import {
+  CHART_LAYOUT_SETTING_KEY,
+  NO_CHART_LAYOUT,
+  draggedPanelWeights,
+  minimumPanelRows,
+  parseChartLayoutPrefs,
+  patchChartLayout,
+  stepTopPanel,
+  type ChartLayoutPrefs,
+} from "./chart-layout";
 import { usePaneFocused } from "../../../state/app/activity";
 import { useTabCursorLink } from "../../../state/app/tab-cursor";
 import { useThemeColors, useThemeId } from "../../../theme/theme-context";
@@ -27,7 +39,14 @@ import { useChartViewResetListener } from "../core/view-reset";
 import { useShowChartTextFallback } from "../native/use-chart-text-fallback";
 import { StaticXAxisLabels, StaticXMarkerLabels, StaticXMarkerOverlay } from "./axis-overlays";
 import { formatCompositeCursorAxisDate } from "./format";
-import { resolveCompositeWheelPan, resolveCompositeWheelZoom } from "./interactions";
+import {
+  resolveCompositeWheelPan,
+  resolveCompositeWheelZoom,
+  type CompositeNavigationFrame,
+  type CompositeViewportRange,
+} from "./interactions";
+import { NO_VALUE_SCALES, resolveAxisDragSpanFactor } from "./value-scale";
+import { useCompositeValueScales } from "./use-composite-value-scales";
 import { COMPOSITE_RIGHT_OFFSET_RATIO } from "./time-scale";
 import {
   allocateCompositePanelHeights,
@@ -81,6 +100,10 @@ const holdsNothing = () => false;
  */
 const DESKTOP_FULL_ROW = { width: "100%" } as const;
 const DESKTOP_PLOT_COLUMN = { flex: "1 1 0px", width: "auto", minWidth: 0 } as const;
+/** The button on a panel that has the whole plot. */
+const RESTORE_PANELS_LABEL = "All panels";
+/** The time axis row where a drag on it zooms time. */
+const TIME_AXIS_ROW = { ...DESKTOP_FULL_ROW, cursor: "ew-resize" } as const;
 
 /** Default-palette series in the theme's own palette, where it has one; the same list otherwise. */
 function useThemedSeriesList(list: ResolvedSeries[], themeId: string): ResolvedSeries[];
@@ -106,11 +129,42 @@ function centeredLines(text: string, width: number): string[] {
   return lines;
 }
 
+type ChartLayoutUpdate = (update: (layout: ChartLayoutPrefs) => ChartLayoutPrefs) => void;
+type ChartLayoutChild = (layout: ChartLayoutPrefs, update: ChartLayoutUpdate) => ReactNode;
+
+/** A chart in a pane keeps its layout in the pane's settings, read as it renders so it never paints twice. */
+function PaneChartLayout({ paneInstanceId, children }: { paneInstanceId: string; children: ChartLayoutChild }) {
+  const [stored, setStored] = usePaneSettingValue<unknown>(CHART_LAYOUT_SETTING_KEY, undefined, paneInstanceId);
+  const layout = useMemo(() => parseChartLayoutPrefs(stored), [stored]);
+  const update = useCallback<ChartLayoutUpdate>((change) => {
+    setStored((current: unknown) => {
+      const previous = parseChartLayoutPrefs(current);
+      const next = change(previous);
+      if (next === previous) return current;
+      return next === NO_CHART_LAYOUT ? undefined : next;
+    });
+  }, [setStored]);
+  return <>{children(layout, update)}</>;
+}
+
+/** A chart outside a pane (a share page) keeps its layout while it is mounted. */
+function LocalChartLayout({ children }: { children: ChartLayoutChild }) {
+  const [layout, setLayout] = useState<ChartLayoutPrefs>(NO_CHART_LAYOUT);
+  const update = useCallback<ChartLayoutUpdate>((change) => setLayout(change), []);
+  return <>{children(layout, update)}</>;
+}
+
 export function CompositeChart(props: CompositeChartProps) {
   const themeId = useThemeId();
   const series = useThemedSeriesList(props.series, themeId);
   const legendSeries = useThemedSeriesList(props.legendSeries, themeId);
-  return <ThemedCompositeChart {...props} series={series} legendSeries={legendSeries} />;
+  const paneInstanceId = useOptionalPaneInstanceId();
+  const chart: ChartLayoutChild = (layout, update) => (
+    <ThemedCompositeChart {...props} series={series} legendSeries={legendSeries} chartLayout={layout} onChartLayoutChange={update} />
+  );
+  return paneInstanceId
+    ? <PaneChartLayout paneInstanceId={paneInstanceId}>{chart}</PaneChartLayout>
+    : <LocalChartLayout>{chart}</LocalChartLayout>;
 }
 
 function ThemedCompositeChart({
@@ -149,8 +203,12 @@ function ThemedCompositeChart({
   onToggleSeries,
   isSeriesToggleable,
   timePick,
+  pricePick,
   levels,
-}: CompositeChartProps) {
+  rangeStatisticsSeriesId,
+  chartLayout,
+  onChartLayoutChange,
+}: CompositeChartProps & { chartLayout: ChartLayoutPrefs; onChartLayoutChange: ChartLayoutUpdate }) {
   const activeThemeColors = useThemeColors();
   const { cellWidthPx = 8, cellHeightPx = 18, pixelRatio = 1, fractionalViewport = false } = useUiCapabilities();
   const isDesktopWeb = useUiCapabilities().nativePaneChrome === true;
@@ -235,14 +293,24 @@ function ThemedCompositeChart({
     return assignSeriesLineCues(cueSourceRef.current);
   }, [cueKey]);
   const {
-    navigationFrame, activeUserViewport, effectiveViewport,
+    navigationFrame, activeUserViewport, effectiveViewport, authoredViewportChanged, authoredGeneration,
     panViewport, panViewportByRatio, zoomViewport, setViewportRange, resetViewport,
   } = useCompositeViewport({
     viewport, viewportResetKey, visibleSeries, marketTimelineSeries,
     allowHistoricalBackfill, onViewportChange,
   });
+  // Values scaled by hand belong to the view they were scaled in: a new
+  // authored view (another range, another listing) fits them again.
+  const { valueScales: heldValueScales, setValueScale, resetPanelValueScale, resetValueScales } = useCompositeValueScales(authoredGeneration);
+  const valueScales = authoredViewportChanged ? NO_VALUE_SCALES : heldValueScales;
+  const scaledByHand = valueScales !== NO_VALUE_SCALES && Object.keys(valueScales).length > 0;
+  // `0`, Reset Zoom and choosing the range again put both axes back.
+  const resetView = useCallback(() => {
+    resetViewport();
+    resetValueScales();
+  }, [resetValueScales, resetViewport]);
   // The pane's range control asks for this when its selected range is chosen again.
-  useChartViewResetListener(resetViewport, interactive && navigable);
+  useChartViewResetListener(resetView, interactive);
   const timeAxisRows = showTimeAxis ? 1 : 0;
   const xMarkers = xAxis?.markers ?? NO_X_MARKERS;
   const xMarkerRows = xMarkers.some((marker) => marker.label) ? 1 : 0;
@@ -271,6 +339,20 @@ function ThemedCompositeChart({
     textDim: colors?.textDim ?? activeThemeColors.textDim,
     negative: colors?.negative ?? activeThemeColors.negative,
   }), [activeThemeColors, colors, paneSurface]);
+  const rangeStatisticsLevels = useMemo(() => {
+    void lastTickKey;
+    return compositeRangeStatisticsLevels(
+      panelSeries.find((entry) => entry.id === rangeStatisticsSeriesId),
+      effectiveViewport,
+      resolvedColors.textDim,
+      formatValue,
+    );
+  }, [effectiveViewport, formatValue, lastTickKey, panelSeries, rangeStatisticsSeriesId, resolvedColors.textDim]);
+  const displayedLevels = useMemo(() => (
+    levels && rangeStatisticsLevels && levels.seriesId === rangeStatisticsLevels.seriesId
+      ? { ...levels, items: [...levels.items, ...rangeStatisticsLevels.items] }
+      : levels ?? rangeStatisticsLevels
+  ), [levels, rangeStatisticsLevels]);
   // A custom x axis means x is not time: a tenor, a fraction, a return. Its
   // last observation belongs at the right edge, under its own label.
   const rightOffsetRatio = xAxis ? 0 : COMPOSITE_RIGHT_OFFSET_RATIO;
@@ -284,6 +366,8 @@ function ThemedCompositeChart({
       clipToViewport,
       timelineSeries: marketTimelineSeries,
       rightOffsetRatio,
+      valueScales,
+      referenceLevels: rangeStatisticsLevels,
     });
   }, [
     clipToViewport,
@@ -294,6 +378,8 @@ function ThemedCompositeChart({
     panelSeries,
     panels,
     rightOffsetRatio,
+    rangeStatisticsLevels,
+    valueScales,
   ]);
   // Gutters follow the axes the scene actually built. Reading the series list
   // instead drops a gutter the moment its series has no observation in view,
@@ -314,22 +400,43 @@ function ThemedCompositeChart({
   const availableAxisWidth = axisCount > 0
     ? Math.max(0, Math.floor((totalWidth - minimumPlotWidth) / axisCount) - 1)
     : 0;
+  // Heights a drag is setting, shown before they are kept.
+  const [draftPanelWeights, setDraftPanelWeights] = useState<Readonly<Record<string, number>> | null>(null);
+  const panelWeights = draftPanelWeights ?? chartLayout.panelWeights;
+  useEffect(() => setDraftPanelWeights(null), [chartLayout.panelWeights]);
+  // A panel given the whole plot, while the chart still has it and another.
+  const maximizedPanelId = projectedScene && projectedScene.panels.length > 1
+    && projectedScene.panels.some((panel) => panel.id === chartLayout.maximizedPanelId)
+    ? chartLayout.maximizedPanelId ?? null
+    : null;
   const layoutPanels = useMemo<CompositePanelScene[] | null>(() => {
     if (!projectedScene) return null;
     const panelSpecById = new Map(panels.map((panel) => [panel.id, panel] as const));
+    const shown = maximizedPanelId
+      ? projectedScene.panels.filter((panel) => panel.id === maximizedPanelId)
+      : projectedScene.panels;
     const panelHeights = allocateCompositePanelHeights(
-      projectedScene.panels.map((panel) => ({
+      shown.map((panel) => ({
         id: panel.id,
-        height: panelSpecById.get(panel.id)?.height,
+        height: panelWeights?.[panel.id] ?? panelSpecById.get(panel.id)?.height,
       })),
       plotHeight,
     );
     // Terminal labels snap to rows; a fractional viewport places them exactly.
-    return projectedScene.panels.map((panel) => {
+    return shown.map((panel) => {
       const resized = resizeCompositePanel(panel, panelHeights.get(panel.id) ?? 1, !fractionalViewport);
       return lineCues.size > 0 ? { ...resized, lineCues } : resized;
     });
-  }, [fractionalViewport, lineCues, panels, plotHeight, projectedScene]);
+  }, [fractionalViewport, lineCues, maximizedPanelId, panelWeights, panels, plotHeight, projectedScene]);
+  // What a resize starts from: each shown panel's rows, and the weights they share.
+  const panelLayoutRef = useRef<{ rows: { id: string; rows: number; weight: number }[]; weightTotal: number }>({ rows: [], weightTotal: 0 });
+  {
+    const rows = (layoutPanels ?? []).map((panel) => {
+      const weight = panelWeights?.[panel.id] ?? panels.find((spec) => spec.id === panel.id)?.height;
+      return { id: panel.id, rows: panel.height, weight: typeof weight === "number" && Number.isFinite(weight) && weight > 0 ? weight : 1 };
+    });
+    panelLayoutRef.current = { rows, weightTotal: rows.reduce((sum, entry) => sum + entry.weight, 0) };
+  }
   // Static overview charts also pin the latest price with cursor precision.
   const includeCursorLabels = interactive || cursorDate !== undefined || !!scenePanels?.some((panel) => panel.lastPrice);
   const includeSeriesTags = isDesktopWeb && (interactive || cursorDate !== undefined);
@@ -337,7 +444,7 @@ function ThemedCompositeChart({
     availableAxisWidth,
     Math.max(
       Math.min(MINIMUM_AXIS_LABEL_WIDTH, maximumAxisWidth),
-      ...(levels?.items ?? []).map((level) => level.axisLabel?.length ?? 0),
+      ...(displayedLevels?.items ?? []).map((level) => level.axisLabel?.length ?? 0),
       ...(layoutPanels ?? []).flatMap((panel) => (["left", "right"] as const).map((side) => {
         const width = compositeAxisLabelWidth(panel.axes[side], formatAxisValue, includeCursorLabels);
         if (!includeSeriesTags || !width) return includeCursorLabels ? width : Math.min(width, maximumAxisWidth);
@@ -348,7 +455,7 @@ function ThemedCompositeChart({
         return (width + 1) * lanes;
       })),
     ),
-  ), [availableAxisWidth, formatAxisValue, includeCursorLabels, includeSeriesTags, layoutPanels, maximumAxisWidth, levels?.items]);
+  ), [availableAxisWidth, displayedLevels?.items, formatAxisValue, includeCursorLabels, includeSeriesTags, layoutPanels, maximumAxisWidth]);
   const leftAxisWidth = hasLeftAxis ? resolvedAxisWidth : 0;
   const rightAxisWidth = hasRightAxis ? resolvedAxisWidth : 0;
   const axisGap = resolvedAxisWidth > 0 ? 1 : 0;
@@ -369,9 +476,11 @@ function ThemedCompositeChart({
       width: plotWidth,
       height: layoutPanels.reduce((sum, panel) => sum + panel.height, 0),
       panels: layoutPanels,
+      // A panel with the whole plot still leaves the legend every series' value.
+      ...(maximizedPanelId ? { cursorPanels: projectedScene.panels } : {}),
     };
     return downsampleCompositeChartScene(laidOut, downsampleWidth);
-  }, [downsampleWidth, layoutPanels, plotWidth, projectedScene]);
+  }, [downsampleWidth, layoutPanels, maximizedPanelId, plotWidth, projectedScene]);
   const resolvedCursorTimestamp = resolvedCursorDate?.getTime() ?? null;
   const normalizedCursorTimestamp = resolvedCursorTimestamp !== null && Number.isFinite(resolvedCursorTimestamp)
     ? resolvedCursorTimestamp
@@ -487,6 +596,94 @@ function ThemedCompositeChart({
     if (date) link.pin(compositeCursorAsOf(baseScene, date));
   }, [baseScene, link]);
 
+  // The layout the user leaves the chart in: kept with the pane, through the
+  // latest values, so a handler bound once still acts on what is on screen.
+  const layoutStateRef = useRef({ chartLayout, maximizedPanelId, onChartLayoutChange });
+  layoutStateRef.current = { chartLayout, maximizedPanelId, onChartLayoutChange };
+  const patchLayout = useCallback((patch: ChartLayoutPrefs | ((layout: ChartLayoutPrefs) => ChartLayoutPrefs)) => {
+    layoutStateRef.current.onChartLayoutChange((layout) => patchChartLayout(layout, typeof patch === "function" ? patch(layout) : patch));
+  }, []);
+  // The tool in hand, read when the bar is toggled (the keyboard hook below holds it).
+  const toolInHandRef = useRef<{ armed: boolean; putDown: () => void }>({ armed: false, putDown: () => {} });
+  // Shift+T and the chevrons act on the bar as it shows: a bar open only for
+  // the tool in hand folds again, the tool put down, and stays hidden.
+  const toggleToolbar = useCallback(() => {
+    const tool = toolInHandRef.current;
+    const hidden = layoutStateRef.current.chartLayout.toolbarHidden === true && !tool.armed;
+    if (!hidden && tool.armed) tool.putDown();
+    patchLayout({ toolbarHidden: !hidden });
+  }, [patchLayout]);
+  const toggleLegendCollapsed = useCallback(() => patchLayout((layout) => ({ legendCollapsed: !layout.legendCollapsed })), [patchLayout]);
+  const resetPanelHeights = useCallback(() => {
+    setDraftPanelWeights(null);
+    patchLayout({ panelWeights: undefined });
+  }, [patchLayout]);
+  const resetPanelMaximized = useCallback(() => patchLayout({ maximizedPanelId: undefined }), [patchLayout]);
+  const togglePanelMaximized = useCallback((panelId: string) => {
+    const maximized = layoutStateRef.current.maximizedPanelId;
+    patchLayout({ maximizedPanelId: maximized === panelId ? undefined : panelId });
+  }, [patchLayout]);
+  // A panel given the whole plot is let go once the chart no longer has it, so
+  // it never comes back maximized, and when a panel is added beside it, so the
+  // new one shows. The chart's panels are the ones it is given and the ones
+  // its series bring; a panel whose data is loading is still given.
+  const chartPanelIds = useMemo(() => {
+    const ids = new Set(panels.map((panel) => panel.id));
+    for (const panel of projectedScene?.panels ?? []) ids.add(panel.id);
+    return [...ids].join("\u0000");
+  }, [panels, projectedScene]);
+  const seenPanelIdsRef = useRef<readonly string[] | null>(null);
+  const savedMaximizedPanelId = chartLayout.maximizedPanelId;
+  const chartDrawn = projectedScene !== null;
+  useEffect(() => {
+    const ids = chartPanelIds ? chartPanelIds.split("\u0000") : [];
+    const previous = seenPanelIdsRef.current;
+    seenPanelIdsRef.current = ids;
+    if (!savedMaximizedPanelId) return;
+    const gone = chartDrawn && !ids.includes(savedMaximizedPanelId);
+    const added = !!previous && previous.length > 1 && previous.includes(savedMaximizedPanelId)
+      && ids.some((id) => !previous.includes(id));
+    if (gone || added) patchLayout({ maximizedPanelId: undefined });
+  }, [chartDrawn, chartPanelIds, patchLayout, savedMaximizedPanelId]);
+  // Shift+Up and Shift+Down: the top panel a row taller or shorter.
+  const stepTopPanelRows = useCallback((direction: 1 | -1) => {
+    const { rows } = panelLayoutRef.current;
+    const plotRows = rows.reduce((sum, entry) => sum + entry.rows, 0);
+    const weight = stepTopPanel(rows, direction, minimumPanelRows(plotRows, rows.length));
+    const top = rows[0];
+    if (weight === null || !top) return;
+    patchLayout((layout) => ({ panelWeights: { ...layout.panelWeights, [top.id]: weight } }));
+  }, [patchLayout]);
+  const legendCollapsible = showLegend && visibleLegendSeries.length > 1;
+  const legendCollapsed = legendCollapsible && chartLayout.legendCollapsed === true;
+  const projectedPanelCount = projectedScene?.panels.length ?? 0;
+  const layoutControls = useMemo(() => ({
+    toolbarHidden: chartLayout.toolbarHidden === true,
+    toggleToolbar,
+    legendCollapsible,
+    legendCollapsed,
+    toggleLegend: toggleLegendCollapsed,
+    panelsResizable: (layoutPanels?.length ?? 0) > 1,
+    stepTopPanel: stepTopPanelRows,
+    panelHeightsSet: projectedPanelCount > 1 && !!chartLayout.panelWeights,
+    resetPanelHeights,
+    panelMaximized: !!maximizedPanelId,
+    restorePanels: resetPanelMaximized,
+  }), [
+    chartLayout.panelWeights,
+    chartLayout.toolbarHidden,
+    layoutPanels?.length,
+    legendCollapsed,
+    legendCollapsible,
+    maximizedPanelId,
+    projectedPanelCount,
+    resetPanelHeights,
+    resetPanelMaximized,
+    stepTopPanelRows,
+    toggleLegendCollapsed,
+    toggleToolbar,
+  ]);
+
   const {
     armedTool,
     armTool,
@@ -509,17 +706,19 @@ function ThemedCompositeChart({
     pin: pinnable ? { pinned: pinnedCursor, toggle: togglePin } : null,
     onActivate,
     timePick,
-    levels,
+    pricePick,
+    levels: displayedLevels,
     visibleLegendSeries,
     visibleSeriesIds,
     onToggleSeries,
     isSeriesToggleable,
     navigationFrame,
     activeUserViewport,
+    scaledByHand,
     panViewportByRatio,
     zoomViewport,
     setViewportRange,
-    resetViewport,
+    resetViewport: resetView,
     drawings,
     selectedDrawingId,
     setSelectedDrawingId,
@@ -527,7 +726,9 @@ function ThemedCompositeChart({
     addDrawing,
     removeDrawing,
     pickDrawColor,
+    layout: layoutControls,
   });
+  toolInHandRef.current = { armed: armedTool !== null, putDown: () => armTool(null) };
   const pressFromPointer = useCallback(() => {
     onPress?.();
     activateFromPointer();
@@ -562,6 +763,116 @@ function ThemedCompositeChart({
     zoomViewport,
   ]);
 
+  // The time axis under the pointer: a drag zooms time from the newest bar
+  // in view, in (left) or out (right), as +/- do; a double click resets it.
+  const timeScalable = interactive && navigable && !!navigationFrame && !xAxis;
+  const timeAxisGestureRef = useRef<{
+    startColumn: number;
+    frame: CompositeNavigationFrame;
+    from: CompositeViewportRange;
+    moved: boolean;
+  } | null>(null);
+  const lastTimeAxisPressRef = useRef<number | null>(null);
+  const latestTimeAxisRef = useRef({ navigationFrame, effectiveViewport, resetViewport, zoomViewport, activateFromPointer, cellWidthPx });
+  latestTimeAxisRef.current = { navigationFrame, effectiveViewport, resetViewport, zoomViewport, activateFromPointer, cellWidthPx };
+  const timeAxisGestures = useMemo(() => {
+    if (!timeScalable) return undefined;
+    const column = (event: ChartMouseEvent) => typeof event.preciseX === "number" ? event.preciseX : event.x;
+    const release = () => {
+      timeAxisGestureRef.current = null;
+    };
+    return {
+      onMouseDown: (event: ChartMouseEvent) => {
+        const latest = latestTimeAxisRef.current;
+        latest.activateFromPointer();
+        consumeChartMouseEvent(event);
+        const now = Date.now();
+        const last = lastTimeAxisPressRef.current;
+        const double = typeof event.detail === "number"
+          ? event.detail >= 2
+          : last !== null && now - last < AXIS_DOUBLE_PRESS_MS;
+        if (double) {
+          lastTimeAxisPressRef.current = null;
+          timeAxisGestureRef.current = null;
+          latest.resetViewport();
+          return;
+        }
+        lastTimeAxisPressRef.current = now;
+        timeAxisGestureRef.current = latest.navigationFrame && latest.effectiveViewport
+          ? { startColumn: column(event), frame: latest.navigationFrame, from: latest.effectiveViewport, moved: false }
+          : null;
+      },
+      onMouseDrag: (event: ChartMouseEvent) => {
+        const gesture = timeAxisGestureRef.current;
+        if (!gesture) return;
+        consumeChartMouseEvent(event);
+        const latest = latestTimeAxisRef.current;
+        const deltaPx = (column(event) - gesture.startColumn) * latest.cellWidthPx;
+        if (!gesture.moved && Math.abs(deltaPx) < 1) return;
+        gesture.moved = true;
+        lastTimeAxisPressRef.current = null;
+        latest.zoomViewport(1 / resolveAxisDragSpanFactor(deltaPx), 1, { frame: gesture.frame, from: gesture.from });
+      },
+      onMouseUp: release,
+      onMouseDragEnd: release,
+    };
+  }, [timeScalable]);
+
+  // The line between two panels on the desktop and the web: a drag moves it a
+  // row at a time, the panel above taking what the one below gives, and a
+  // double click puts back the split the chart was made with.
+  const [resizingPanelIndex, setResizingPanelIndex] = useState<number | null>(null);
+  const panelResizeRef = useRef<{
+    index: number;
+    startPixelY: number;
+    rows: { id: string; rows: number }[];
+    weightTotal: number;
+    weights: Readonly<Record<string, number>> | null;
+  } | null>(null);
+  const latestPanelResizeRef = useRef({ activateFromPointer, cellHeightPx });
+  latestPanelResizeRef.current = { activateFromPointer, cellHeightPx };
+  const panelsResizableByPointer = interactive && isDesktopWeb && !maximizedPanelId && (layoutPanels?.length ?? 0) > 1;
+  const panelDividerGestures = useMemo(() => {
+    if (!panelsResizableByPointer) return null;
+    const release = () => {
+      const gesture = panelResizeRef.current;
+      panelResizeRef.current = null;
+      setResizingPanelIndex(null);
+      const weights = gesture?.weights;
+      if (weights) patchLayout((layout) => ({ panelWeights: { ...layout.panelWeights, ...weights } }));
+    };
+    return (index: number) => ({
+      onMouseDown: (event: ChartMouseEvent) => {
+        latestPanelResizeRef.current.activateFromPointer();
+        consumeChartMouseEvent(event);
+        if ((event.detail ?? 0) >= 2) {
+          panelResizeRef.current = null;
+          setResizingPanelIndex(null);
+          resetPanelHeights();
+          return;
+        }
+        const { rows, weightTotal } = panelLayoutRef.current;
+        panelResizeRef.current = { index, startPixelY: event.pixelY ?? 0, rows, weightTotal, weights: null };
+        setResizingPanelIndex(index);
+      },
+      onMouseDrag: (event: ChartMouseEvent) => {
+        const gesture = panelResizeRef.current;
+        if (!gesture) return;
+        consumeChartMouseEvent(event);
+        const deltaRows = ((event.pixelY ?? gesture.startPixelY) - gesture.startPixelY) / Math.max(1, latestPanelResizeRef.current.cellHeightPx);
+        const plotRows = gesture.rows.reduce((sum, entry) => sum + entry.rows, 0);
+        // Back where it started, or never a row away, the line saves nothing.
+        const weights = draggedPanelWeights(gesture, gesture.index, deltaRows, minimumPanelRows(plotRows, gesture.rows.length));
+        gesture.weights = weights;
+        setDraftPanelWeights(weights
+          ? (current) => ({ ...(current ?? layoutStateRef.current.chartLayout.panelWeights), ...weights })
+          : null);
+      },
+      onMouseUp: release,
+      onMouseDragEnd: release,
+    });
+  }, [panelsResizableByPointer, patchLayout, resetPanelHeights]);
+
   const leftPadding = leftAxisWidth + (leftAxisWidth ? axisGap : 0);
   const rightPadding = rightAxisWidth + (rightAxisWidth ? axisGap : 0);
   // The axis's ticks do not move with the cursor, so they are laid out once per chart, not per move.
@@ -668,6 +979,9 @@ function ThemedCompositeChart({
   // drawing. A chart outside a pane (a share page) keeps them.
   const toolbarWanted = paneFocused !== false || armedTool !== null || pointerDragging || toolSpan !== null;
   const showToolbar = interactive && navigable && toolbarWanted && plotWidth > CHART_TOOLBAR_WIDTH + 4;
+  // Hidden, the bar folds to the button that brings it back, and opens again
+  // while a tool picked from the keys is in hand, so the plot says which one.
+  const toolbarFolded = showToolbar && chartLayout.toolbarHidden === true && armedTool === null;
   // Bars shorter than a day carry a time of day the cursor reads out.
   const intradayBars = scene.timeZone !== undefined || visibleSeries.some((entry) => (
     !!entry.historyResolution && isIntradayResolution(entry.historyResolution)
@@ -731,6 +1045,11 @@ function ThemedCompositeChart({
           keyboardIndex={legendKeyboardIndex}
           rows={legendRows}
           onWantedRowsChange={setLegendWantedRows}
+          collapsed={legendCollapsed}
+          onToggleCollapsed={legendCollapsible && interactive ? () => {
+            pressFromPointer();
+            toggleLegendCollapsed();
+          } : undefined}
         />
       ) : null}
       {showToolbar ? (
@@ -742,6 +1061,11 @@ function ThemedCompositeChart({
           drawColor={drawColor}
           showColors={isDrawingTool(armedTool) || !!selectedDrawingId}
           levelTool={levelsEditable}
+          folded={toolbarFolded}
+          onToggleFolded={() => {
+            pressFromPointer();
+            toggleToolbar();
+          }}
           onArmTool={(tool) => {
             pressFromPointer();
             armTool(tool);
@@ -752,6 +1076,41 @@ function ThemedCompositeChart({
           }}
         />
       ) : null}
+      {maximizedPanelId && interactive ? (
+        // A panel with the whole plot says so at its corner, as a value axis
+        // scaled by hand does at its foot, and that is the way back.
+        <Box
+          position="absolute"
+          left={leftPadding + Math.max(0, plotWidth - RESTORE_PANELS_LABEL.length - 1)}
+          top={legendRows}
+          width={RESTORE_PANELS_LABEL.length}
+          height={1}
+          zIndex={30}
+          style={isDesktopWeb
+            ? {
+              left: "auto",
+              right: `calc(${rightPadding} * var(--cell-w) + var(--gloom-space-xs))`,
+              top: `calc(${legendRows} * var(--cell-h) + var(--gloom-space-xs))`,
+              width: "auto",
+              height: "auto",
+            }
+            : undefined}
+          data-gloom-role="composite-chart-panels-restore"
+        >
+          <Button
+            label="Show All Panels"
+            displayLabel={RESTORE_PANELS_LABEL}
+            title="One panel has the chart. Show every panel again (or double-click the plot)."
+            variant="secondary"
+            compact
+            stopPropagation
+            onPress={() => {
+              pressFromPointer();
+              resetPanelMaximized();
+            }}
+          />
+        </Box>
+      ) : null}
       {paneInstanceId ? (
         <ChartDrawingStore
           paneInstanceId={paneInstanceId}
@@ -759,7 +1118,7 @@ function ThemedCompositeChart({
           onRestore={setDrawings}
         />
       ) : null}
-      {scene.panels.map((panel) => (
+      {scene.panels.map((panel, index) => (
         <CompositePanelSurface
           key={panel.id}
           panel={panel}
@@ -794,9 +1153,17 @@ function ThemedCompositeChart({
           onPointerPress={pressPlot}
           showTextFallback={showTextFallback}
           onPickTime={timePick?.onPick}
-          levels={levelHost?.panel.id === panel.id ? levels ?? null : null}
+          onPickPrice={pricePick?.onPick}
+          levels={levelHost?.panel.id === panel.id ? displayedLevels ?? null : null}
           selectedLevelId={selectedLevelId}
           onSelectLevel={setSelectedLevelId}
+          valueScalable={interactive}
+          onSetValueScale={setValueScale}
+          onResetValueScale={resetPanelValueScale}
+          dividerAbove={index > 0 && panelDividerGestures
+            ? { active: resizingPanelIndex === index, gestures: panelDividerGestures(index) }
+            : null}
+          onToggleMaximized={interactive && navigable && projectedPanelCount > 1 ? () => togglePanelMaximized(panel.id) : undefined}
         />
       ))}
       {watermarkScale ? (
@@ -836,7 +1203,15 @@ function ThemedCompositeChart({
         </Box>
       ) : null}
       {timeAxisLayout ? (
-        <Box flexDirection="row" width={totalWidth} height={1} style={isDesktopWeb ? DESKTOP_FULL_ROW : undefined}>
+        <Box
+          flexDirection="row"
+          width={totalWidth}
+          height={1}
+          style={isDesktopWeb ? timeAxisGestures ? TIME_AXIS_ROW : DESKTOP_FULL_ROW : undefined}
+          {...timeAxisGestures}
+          data-gloom-interactive={timeAxisGestures ? "true" : undefined}
+          data-gloom-role="composite-chart-time-scale"
+        >
           {leftPadding > 0 ? <Box width={leftPadding} /> : null}
           <StaticXAxisLabels
             labels={xAxis?.ticks ? [] : xAxis?.labels ? [...xAxis.labels] : [timeAxisLayout.text]}

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

@@ -2,6 +2,7 @@ import { formatMarketPrice, formatMarketPriceWithCurrency, stablePriceFractionDi
 import { INDEX_POINTS_UNIT } from "../../../market-data/market/index-level";
 import type { ResolvedSeries, TimeSeriesPoint } from "../../../time-series/types";
 import type { CompositeAxisDomain, CompositePanelScene } from "./types";
+import { formatNumber, formatPercentRaw } from "../../../utils/format";
 import { timeZoneLabel, zonedWallClockMs } from "../../../utils/zoned-date-time";
 
 const CURRENCY_SYMBOLS: Record<string, string> = {
@@ -237,6 +238,28 @@ function compactResolution(value: number): number {
   return absolute > 0 ? 10 ** (Math.floor(Math.log10(absolute)) - 2) : 0;
 }
 
+/** A series of changes over a baseline: returns since the range began, year-on-year or quarter-on-quarter growth. */
+function isChangeSeries(series: ResolvedSeries): boolean {
+  return series.unit.trim() === "%" && (series.transform === "percent" || series.transform === "yoy" || series.transform === "qoq");
+}
+
+/**
+ * A value worked out from prices (a formula, a spread, a price over an FX
+ * rate) at its legs' decimals: bare beside a stated unit (92.6164 USD /
+ * barrel), with its derived unit, or with its currency's sign ($12.34).
+ */
+function formatDerivedValue(value: number, series: ResolvedSeries, decimals: number): string {
+  const number = formatNumber(Math.abs(value), decimals);
+  const sign = value < 0 && /[1-9]/.test(number) ? "-" : "";
+  if (series.statedUnit) return `${sign}${number}`;
+  const unit = series.unit.trim();
+  if (series.unitGroup.toLowerCase().startsWith("derived-unit:")) return `${sign}${number} ${unit}`;
+  const currency = unitCurrencyCode(unit);
+  if (!currency) return `${sign}${number}`;
+  const symbol = CURRENCY_SYMBOLS[currency];
+  return symbol ? `${sign}${symbol}${number}` : `${sign}${number} ${currency}`;
+}
+
 /** `referencePrice` defaults to the series' own; a study on a price axis
  * passes the axis's reference so it shares the price's decimals. */
 export function formatCompositeSeriesValue(
@@ -244,6 +267,10 @@ export function formatCompositeSeriesValue(
   series: ResolvedSeries,
   referencePrice = seriesPriceReference(series),
 ): string {
+  // A return reads as every other return in the app, signed with two decimals, so a legend of them lines up
+  // (+34.02%, +0.76%, +15.80%) instead of one precision per magnitude.
+  if (isChangeSeries(series)) return formatPercentRaw(value);
+  if (series.valueDecimals !== undefined) return formatDerivedValue(value, series, series.valueDecimals);
   if (series.statedUnit) {
     // The number alone: the legend prints the unit beside it, as FUT prints
     // a price beside its unit (4.6242 USD / gallon, not $4.6242).