gloomberb 0.9.6 → 0.9.8

package/src/components/chart/bar-chart-renderer.test.ts

@@ -7,6 +7,7 @@ import {
   renderNativeBarChart,
   resolveNativeBarPixelBounds,
   resolveBarChartHover,
+  resolveNativeBarChartHover,
 } from "./bar-chart-renderer";
 
 const series = [
@@ -122,16 +123,14 @@ describe("bar chart renderer", () => {
       colors: { bgColor: "#000000", gridColor: "#333333", axisColor: "#666666", negativeColor: "#ff5555" },
     })!;
 
-    const lastBar = scene.bars.at(-1)!;
-    expect(lastBar.x + lastBar.width).toBe(scene.width);
-    expect(renderBarChart(scene)[scene.zeroRow]).not.toContain("─");
+    const zeroRow = renderBarChart(scene)[scene.zeroRow]!;
+    expect([...zeroRow].filter((char) => char === "█").length).toBeGreaterThan(0);
+    expect([...zeroRow].filter((char) => char === "─").length).toBeGreaterThanOrEqual(scene.categories.length - 1);
 
     const bitmapWidth = 470;
     const pixelBounds = scene.bars.map((bar) => resolveNativeBarPixelBounds(scene, bar, bitmapWidth));
     const pixelWidths = pixelBounds.map((bounds) => bounds.rightExclusive - bounds.left);
     expect(Math.max(...pixelWidths) - Math.min(...pixelWidths)).toBeLessThanOrEqual(1);
-    expect(pixelBounds[0]!.left).toBe(0);
-    expect(pixelBounds.at(-1)!.rightExclusive).toBe(bitmapWidth);
     const pixelGaps: number[] = [];
     for (let index = 1; index < pixelBounds.length; index++) {
       pixelGaps.push(pixelBounds[index]!.left - pixelBounds[index - 1]!.rightExclusive);
@@ -139,13 +138,7 @@ describe("bar chart renderer", () => {
     expect(new Set(pixelGaps)).toEqual(new Set([1]));
 
     const bitmap = renderNativeBarChart(scene, bitmapWidth, 80);
-    const zeroY = Math.round((scene.zeroRow / Math.max(scene.height - 1, 1)) * (bitmap.height - 1));
-    let separatorColumns = 0;
-    for (let x = 0; x < bitmap.width; x++) {
-      const index = (zeroY * bitmap.width + x) * 4;
-      if (bitmap.pixels[index + 1]! <= 120) separatorColumns++;
-    }
-    expect(separatorColumns).toBe(scene.categories.length - 1);
+    expect(bitmap.pixels.some((value) => value > 0)).toBe(true);
 
     const axis = renderBarChartAxis(scene, 1);
     expect(axis).toHaveLength(1);
@@ -155,4 +148,86 @@ describe("bar chart renderer", () => {
     expect(axis.join("\n")).not.toContain("20 20");
     expect(axis[0]!.endsWith("  ")).toBe(true);
   });
+
+  test("drops null-only categories while keeping fixed ticker slots", () => {
+    const sparseSeries = [
+      {
+        id: "AMD",
+        label: "AMD",
+        color: "#00ff66",
+        points: [
+          { category: "2025 Q1", value: 10 },
+          { category: "2025 Q2", value: 11 },
+          { category: "2025 Q3", value: 12 },
+          { category: "2025 Q4", value: null },
+        ],
+      },
+      {
+        id: "NVDA",
+        label: "NVDA",
+        color: "#4dabf7",
+        points: [
+          { category: "2025 Q1", value: 20 },
+          { category: "2025 Q3", value: 30 },
+          { category: "2025 Q4", value: null },
+        ],
+      },
+    ];
+    const scene = buildBarChartScene(sparseSeries, {
+      width: 36,
+      height: 8,
+      colors: { bgColor: "#000000", gridColor: "#333333", axisColor: "#666666", negativeColor: "#ff5555" },
+    })!;
+
+    expect(scene.categories).toEqual(["2025 Q1", "2025 Q2", "2025 Q3"]);
+    const middleCategoryBars = scene.bars.filter((bar) => bar.category === "2025 Q2");
+    expect(middleCategoryBars).toHaveLength(1);
+    expect(middleCategoryBars[0]!.seriesCount).toBe(2);
+
+    const bitmapWidth = 360;
+    const firstAmd = resolveNativeBarPixelBounds(scene, scene.bars.find((bar) => bar.category === "2025 Q1" && bar.seriesId === "AMD")!, bitmapWidth);
+    const middleAmd = resolveNativeBarPixelBounds(scene, middleCategoryBars[0]!, bitmapWidth);
+    expect(middleAmd.rightExclusive - middleAmd.left).toBe(firstAmd.rightExclusive - firstAmd.left);
+  });
+
+  test("spreads saturated text slots and resolves native hover by pixel slot", () => {
+    const denseMultiSeries = Array.from({ length: 3 }, (_unused, seriesIndex) => ({
+      id: `S${seriesIndex}`,
+      label: `S${seriesIndex}`,
+      color: "#00ff66",
+      points: Array.from({ length: 80 }, (_point, categoryIndex) => ({
+        category: `${2020 + Math.floor(categoryIndex / 4)} Q${categoryIndex % 4 + 1}`,
+        value: seriesIndex + categoryIndex + 1,
+      })),
+    }));
+    const scene = buildBarChartScene(denseMultiSeries, {
+      width: 80,
+      height: 8,
+      colors: { bgColor: "#000000", gridColor: "#333333", axisColor: "#666666", negativeColor: "#ff5555" },
+    })!;
+
+    const xPositions = scene.bars.map((bar) => bar.x);
+    expect(Math.min(...xPositions)).toBe(0);
+    expect(Math.max(...xPositions)).toBe(scene.width - 1);
+    expect(new Set(xPositions).size).toBe(scene.width);
+    expect(xPositions.filter((x) => x === scene.width - 1).length).toBeLessThanOrEqual(denseMultiSeries.length);
+
+    const target = scene.bars.find((bar, index) => (
+      scene.bars.findIndex((candidate) => candidate.x === bar.x) < index
+    ))!;
+    const bitmapWidth = 1200;
+    const bounds = resolveNativeBarPixelBounds(scene, target, bitmapWidth);
+    const pixelCenter = Math.floor((bounds.left + bounds.rightExclusive - 1) / 2);
+
+    expect(scene.bars.filter((bar) => bar.x === target.x).length).toBeGreaterThan(1);
+    expect(resolveBarChartHover(scene, target.x)).not.toMatchObject({
+      seriesId: target.seriesId,
+      category: target.category,
+    });
+    expect(resolveNativeBarChartHover(scene, pixelCenter, bitmapWidth)).toMatchObject({
+      seriesId: target.seriesId,
+      category: target.category,
+      value: target.value,
+    });
+  });
 });

package/src/components/chart/bar-chart-renderer.ts

@@ -34,6 +34,9 @@ export interface BarChartBar {
   category: string;
   value: number;
   color: string;
+  categoryIndex: number;
+  seriesIndex: number;
+  seriesCount: number;
   x: number;
   width: number;
   row: number;
@@ -69,17 +72,6 @@ export interface NativeBarChartPixelBounds {
 
 const clamp = (value: number, min: number, max: number) => Math.max(min, Math.min(max, value));
 
-function categorySlotBounds(width: number, categoryCount: number, index: number): { left: number; width: number } {
-  const left = Math.floor((index * width) / categoryCount);
-  const right = index === categoryCount - 1
-    ? width
-    : Math.floor(((index + 1) * width) / categoryCount);
-  return {
-    left,
-    width: Math.max(1, right - left),
-  };
-}
-
 function collectCategories(series: BarChartSeries[]): string[] {
   const categories: string[] = [];
   const seen = new Set<string>();
@@ -90,7 +82,10 @@ function collectCategories(series: BarChartSeries[]): string[] {
       categories.push(point.category);
     }
   }
-  return categories;
+  return categories.filter((category) => series.some((item) => {
+    const value = item.points.find((point) => point.category === category)?.value;
+    return typeof value === "number" && Number.isFinite(value);
+  }));
 }
 
 function normalizeRange(values: number[]): { min: number; max: number } {
@@ -133,32 +128,28 @@ export function buildBarChartScene(series: BarChartSeries[], options: BarChartSc
 
   const { min, max } = normalizeRange(values);
   const zeroRow = valueToRow(0, min, max, height);
-  const seriesCount = Math.max(series.length, 1);
-  const categorySlots = categories.map((_, index) => categorySlotBounds(width, categories.length, index));
-  const minSlotWidth = Math.max(1, Math.min(...categorySlots.map((slot) => slot.width)));
-  const groupedInnerWidth = Math.max(seriesCount, minSlotWidth - (minSlotWidth > seriesCount * 2 ? 1 : 0));
-  const groupedBarWidth = Math.max(1, Math.floor(groupedInnerWidth / seriesCount));
+  const seriesSlotCount = Math.max(series.length, 1);
   const bars: BarChartBar[] = [];
 
   categories.forEach((category, categoryIndex) => {
-    const group = categorySlots[categoryIndex]!;
-    const barWidth = seriesCount === 1 ? group.width : groupedBarWidth;
-    const barGroupWidth = barWidth * seriesCount;
-    const groupOffset = Math.max(0, Math.floor((group.width - barGroupWidth) / 2));
     series.forEach((item, seriesIndex) => {
       const value = item.points.find((point) => point.category === category)?.value;
       if (typeof value !== "number" || !Number.isFinite(value)) return;
       const color = value < 0 && options.colors.negativeColor
         ? options.colors.negativeColor
         : item.color;
+      const barBounds = chartSlotBounds(width, categories.length * seriesSlotCount, categoryIndex * seriesSlotCount + seriesIndex);
       bars.push({
         seriesId: item.id,
         seriesLabel: item.label,
         category,
         value,
         color,
-        x: clamp(group.left + groupOffset + seriesIndex * barWidth, 0, width - 1),
-        width: Math.min(barWidth, Math.max(width - (group.left + groupOffset + seriesIndex * barWidth), 1)),
+        categoryIndex,
+        seriesIndex,
+        seriesCount: seriesSlotCount,
+        x: barBounds.x,
+        width: barBounds.width,
         row: valueToRow(value, min, max, height),
       });
     });
@@ -177,6 +168,47 @@ export function buildBarChartScene(series: BarChartSeries[], options: BarChartSc
   };
 }
 
+function chartSlotBounds(
+  width: number,
+  slotCount: number,
+  slotIndex: number,
+): { x: number; width: number } {
+  const slots = Math.max(1, slotCount);
+  if (slots > width) {
+    const x = clamp(Math.floor(slotIndex * width / slots), 0, width - 1);
+    const right = clamp(Math.floor((slotIndex + 1) * width / slots), x + 1, width);
+    return {
+      x,
+      width: Math.max(1, right - x),
+    };
+  }
+  const gap = slots > 1 && width >= slots * 2 - 1 ? 1 : 0;
+  const usableWidth = Math.max(slots, width - gap * (slots - 1));
+  const slotWidth = Math.max(1, Math.floor(usableWidth / slots));
+  const usedWidth = slotWidth * slots + gap * (slots - 1);
+  const offset = Math.max(0, Math.floor((width - usedWidth) / 2));
+  const x = clamp(offset + slotIndex * (slotWidth + gap), 0, width - 1);
+  return {
+    x,
+    width: Math.max(1, Math.min(slotWidth, width - x)),
+  };
+}
+
+function categoryCellBounds(
+  width: number,
+  categoryCount: number,
+  seriesCount: number,
+  categoryIndex: number,
+): { left: number; width: number } {
+  const first = chartSlotBounds(width, categoryCount * seriesCount, categoryIndex * seriesCount);
+  const last = chartSlotBounds(width, categoryCount * seriesCount, categoryIndex * seriesCount + seriesCount - 1);
+  const right = last.x + last.width;
+  return {
+    left: first.x,
+    width: Math.max(1, right - first.x),
+  };
+}
+
 function labelAtRow(labels: Array<{ row: number; value: number }>, row: number): number | null {
   const match = labels.find((label) => label.row === row);
   return match ? match.value : null;
@@ -227,6 +259,10 @@ export function resolveBarChartHover(scene: BarChartScene, cellX: number): BarCh
     return Math.abs(currentCenter - x) < Math.abs(closestCenter - x) ? current : closest;
   }, scene.bars[0]!);
 
+  return barToHover(bar);
+}
+
+function barToHover(bar: BarChartBar): BarChartHover {
   return {
     seriesId: bar.seriesId,
     seriesLabel: bar.seriesLabel,
@@ -239,6 +275,29 @@ export function resolveBarChartHover(scene: BarChartScene, cellX: number): BarCh
   };
 }
 
+export function resolveNativeBarChartHover(
+  scene: BarChartScene,
+  pixelX: number,
+  pixelWidth: number,
+): BarChartHover | null {
+  if (!Number.isFinite(pixelX) || scene.bars.length === 0) return null;
+  const width = Math.max(1, Math.floor(pixelWidth));
+  const x = clamp(Math.floor(pixelX), 0, width - 1);
+  const direct = scene.bars.find((bar) => {
+    const bounds = resolveNativeBarPixelBounds(scene, bar, width);
+    return x >= bounds.left && x < bounds.rightExclusive;
+  });
+  const bar = direct ?? scene.bars.reduce((closest, current) => {
+    const closestBounds = resolveNativeBarPixelBounds(scene, closest, width);
+    const currentBounds = resolveNativeBarPixelBounds(scene, current, width);
+    const closestCenter = (closestBounds.left + closestBounds.rightExclusive - 1) / 2;
+    const currentCenter = (currentBounds.left + currentBounds.rightExclusive - 1) / 2;
+    return Math.abs(currentCenter - x) < Math.abs(closestCenter - x) ? current : closest;
+  }, scene.bars[0]!);
+
+  return barToHover(bar);
+}
+
 export function renderBarChart(scene: BarChartScene, hover: BarChartHover | null = null): string[] {
   const rows = Array.from({ length: scene.height }, () => Array(scene.width).fill(" "));
   for (let x = 0; x < scene.width; x++) {
@@ -288,7 +347,7 @@ export function renderBarChartAxis(scene: BarChartScene, rowCount = 1): string[]
   scene.categories.forEach((category, index) => {
     const label = compactCategoryLabel(category, scene.categories[index - 1], scene.categories.length);
     if (!label) return;
-    const group = categorySlotBounds(scene.width, scene.categories.length, index);
+    const group = categoryCellBounds(scene.width, scene.categories.length, Math.max(scene.series.length, 1), index);
     const start = centeredLabelStart(group.left + group.width / 2, label, scene.width, rightInset);
     const row = rows.find((candidate) => canPlaceLabel(candidate, start, label, minGap));
     if (!row) return;
@@ -305,42 +364,39 @@ export function resolveNativeBarPixelBounds(
   pixelWidth: number,
 ): NativeBarChartPixelBounds {
   const width = Math.max(1, Math.floor(pixelWidth));
-
-  if (scene.series.length === 1) {
-    const categoryIndex = scene.categories.indexOf(bar.category);
-    if (categoryIndex >= 0) {
-      const separatorWidth = scene.categories.length > 1 && width >= scene.categories.length * 3 ? 1 : 0;
-      const usableWidth = Math.max(
-        scene.categories.length,
-        width - separatorWidth * (scene.categories.length - 1),
-      );
-      const left = Math.floor((categoryIndex * usableWidth) / scene.categories.length)
-        + categoryIndex * separatorWidth;
-      const rightExclusive = categoryIndex === scene.categories.length - 1
-        ? width
-        : Math.floor(((categoryIndex + 1) * usableWidth) / scene.categories.length)
-          + categoryIndex * separatorWidth;
-      return {
-        left,
-        rightExclusive: Math.max(left + 1, rightExclusive),
-      };
-    }
-  }
-
-  const horizontalInset = 1;
-  const left = clamp(
-    Math.floor((bar.x / scene.width) * width + horizontalInset),
-    0,
-    width - 1,
-  );
-  const rightExclusive = clamp(
-    Math.ceil(((bar.x + bar.width) / scene.width) * width - horizontalInset),
-    left + 1,
+  const bounds = nativeSlotBounds(
     width,
+    scene.categories.length * bar.seriesCount,
+    bar.categoryIndex * bar.seriesCount + bar.seriesIndex,
   );
+  const left = clamp(bounds.left, 0, width - 1);
+  const rightExclusive = clamp(bounds.rightExclusive, left + 1, width);
   return { left, rightExclusive };
 }
 
+function nativeSlotBounds(
+  width: number,
+  slotCount: number,
+  slotIndex: number,
+): NativeBarChartPixelBounds {
+  const slots = Math.max(1, slotCount);
+  if (slots > width) {
+    const left = clamp(Math.floor(slotIndex * width / slots), 0, width - 1);
+    const rightExclusive = clamp(Math.floor((slotIndex + 1) * width / slots), left + 1, width);
+    return { left, rightExclusive };
+  }
+  const gap = slots > 1 && width >= slots * 2 - 1 ? 1 : 0;
+  const usableWidth = Math.max(slots, width - gap * (slots - 1));
+  const slotWidth = Math.max(1, Math.floor(usableWidth / slots));
+  const usedWidth = slotWidth * slots + gap * (slots - 1);
+  const offset = Math.max(0, Math.floor((width - usedWidth) / 2));
+  const left = offset + slotIndex * (slotWidth + gap);
+  return {
+    left,
+    rightExclusive: Math.max(left + 1, left + slotWidth),
+  };
+}
+
 export function renderNativeBarChart(
   scene: BarChartScene,
   pixelWidth: number,

package/src/components/chart/static/bar-chart-surface.tsx

@@ -1,7 +1,14 @@
-import { useCallback, useMemo, useRef, useState, type ReactNode } from "react";
-import { Box, ChartSurface, Span, Text, useNativeRenderer, type BoxRenderable } from "../../../ui";
+import { useCallback, useEffect, useMemo, useRef, useState, type ReactNode } from "react";
+import { Box, ChartSurface, Text, TextAttributes, useNativeRenderer, type BoxRenderable } from "../../../ui";
 import { colors } from "../../../theme/colors";
-import { consumeChartMouseEvent, getLocalPlotPointer, type ChartMouseEvent } from "../core/pointer";
+import {
+  consumeChartMouseEvent,
+  getLocalPlotPointer,
+  getRenderablePixelSize,
+  scaleLocalPixelCoordinate,
+  type ChartMouseEvent,
+  type LocalPlotPointer,
+} from "../core/pointer";
 import type { NativeChartBitmap } from "../native/chart-rasterizer";
 import { truncateWithEllipsis } from "../../../utils/text-wrap";
 import { useStaticChartBitmapSize } from "./chart/bitmap";
@@ -12,11 +19,36 @@ import {
   renderBarChartYAxis,
   renderNativeBarChart,
   resolveBarChartHover,
+  resolveNativeBarChartHover,
   type BarChartColors,
   type BarChartHover,
+  type BarChartScene,
   type BarChartSeries,
 } from "../bar-chart-renderer";
 
+export interface BarChartSurfaceHoverGeometry {
+  bitmapPixelWidth: number;
+  renderablePixelWidth?: number | null;
+}
+
+export function resolveBarChartSurfaceHover(
+  scene: BarChartScene,
+  pointer: Pick<LocalPlotPointer, "cellX" | "pixelX">,
+  geometry?: BarChartSurfaceHoverGeometry | null,
+): BarChartHover | null {
+  if (geometry && pointer.pixelX !== null) {
+    const pixelX = scaleLocalPixelCoordinate(
+      pointer.pixelX,
+      geometry.renderablePixelWidth ?? geometry.bitmapPixelWidth,
+      geometry.bitmapPixelWidth,
+    );
+    if (pixelX !== null) {
+      return resolveNativeBarChartHover(scene, pixelX, geometry.bitmapPixelWidth);
+    }
+  }
+  return resolveBarChartHover(scene, pointer.cellX);
+}
+
 export interface StaticBarChartSurfaceProps {
   series: BarChartSeries[];
   width: number;
@@ -25,6 +57,8 @@ export interface StaticBarChartSurfaceProps {
   title?: string;
   header?: ReactNode;
   formatValue?: (value: number) => string;
+  hiddenSeriesIds?: readonly string[] | ReadonlySet<string>;
+  onToggleSeries?: (seriesId: string) => void;
   onHoverChange?: (hover: BarChartHover | null) => void;
   onMouseDown?: (event: ChartMouseEvent) => void;
 }
@@ -36,6 +70,8 @@ export function StaticBarChartSurface({
   title,
   header,
   formatValue,
+  hiddenSeriesIds,
+  onToggleSeries,
   onHoverChange,
   onMouseDown,
   colors: chartColors,
@@ -59,11 +95,18 @@ export function StaticBarChartSurface({
     negativeColor: chartColors?.negativeColor ?? colors.negative,
     hoverColor: chartColors?.hoverColor ?? colors.textBright,
   }), [chartColors]);
-  const scene = useMemo(() => buildBarChartScene(series, {
+  const hiddenSeriesIdSet = useMemo(() => (
+    hiddenSeriesIds instanceof Set ? hiddenSeriesIds : new Set(hiddenSeriesIds ?? [])
+  ), [hiddenSeriesIds]);
+  const visibleSeries = useMemo(
+    () => series.filter((item) => !hiddenSeriesIdSet.has(item.id)),
+    [hiddenSeriesIdSet, series],
+  );
+  const scene = useMemo(() => buildBarChartScene(visibleSeries, {
     width: plotWidth,
     height: plotHeight,
     colors: resolvedChartColors,
-  }), [plotHeight, plotWidth, resolvedChartColors, series]);
+  }), [plotHeight, plotWidth, resolvedChartColors, visibleSeries]);
 
   const bitmapSize = useStaticChartBitmapSize(plotWidth, plotHeight);
 
@@ -78,8 +121,8 @@ export function StaticBarChartSurface({
   const hoverLabel = useMemo(() => {
     if (!hover) return null;
     const value = formatValue ? formatValue(hover.value) : String(hover.value);
-    return series.length > 1 ? `${hover.category} ${hover.seriesLabel}: ${value}` : `${hover.category}: ${value}`;
-  }, [formatValue, hover, series.length]);
+    return visibleSeries.length > 1 ? `${hover.category} ${hover.seriesLabel}: ${value}` : `${hover.category}: ${value}`;
+  }, [formatValue, hover, visibleSeries.length]);
   const readout = useMemo(() => {
     if (!hoverLabel) return title ?? "";
     return title ? `${title}  ${hoverLabel}` : hoverLabel;
@@ -98,6 +141,17 @@ export function StaticBarChartSurface({
     return { labelLeft, labelTop, labelWidth, text };
   }, [hover, hoverLabel, plotHeight, plotWidth]);
 
+  const resolvePointerHover = useCallback((pointer: LocalPlotPointer): BarChartHover | null => {
+    if (!scene) return null;
+    const renderablePixelSize = bitmapSize ? getRenderablePixelSize(plotRef.current, renderer) : null;
+    return resolveBarChartSurfaceHover(scene, pointer, bitmapSize
+      ? {
+        bitmapPixelWidth: bitmapSize.pixelWidth,
+        renderablePixelWidth: renderablePixelSize?.pixelWidth ?? bitmapSize.pixelWidth,
+      }
+      : null);
+  }, [bitmapSize, renderer, scene]);
+
   const handleMouseMove = useCallback((event: ChartMouseEvent) => {
     if (!scene) return;
     const pointer = getLocalPlotPointer(event, plotRef.current, renderer);
@@ -106,11 +160,11 @@ export function StaticBarChartSurface({
       onHoverChange?.(null);
       return;
     }
-    const nextHover = resolveBarChartHover(scene, pointer.cellX);
+    const nextHover = resolvePointerHover(pointer);
     setHover(nextHover);
     onHoverChange?.(nextHover);
     consumeChartMouseEvent(event);
-  }, [onHoverChange, renderer, scene]);
+  }, [onHoverChange, renderer, resolvePointerHover, scene]);
 
   const handleMouseOut = useCallback(() => {
     setHover(null);
@@ -122,16 +176,54 @@ export function StaticBarChartSurface({
     if (!scene) return;
     const pointer = getLocalPlotPointer(event, plotRef.current, renderer);
     if (!pointer) return;
-    const nextHover = resolveBarChartHover(scene, pointer.cellX);
+    const nextHover = resolvePointerHover(pointer);
     setHover(nextHover);
     onHoverChange?.(nextHover);
     consumeChartMouseEvent(event);
-  }, [onHoverChange, onMouseDown, renderer, scene]);
+  }, [onHoverChange, onMouseDown, renderer, resolvePointerHover, scene]);
+
+  useEffect(() => {
+    if (hover && hiddenSeriesIdSet.has(hover.seriesId)) {
+      setHover(null);
+      onHoverChange?.(null);
+    }
+  }, [hiddenSeriesIdSet, hover, onHoverChange]);
+
+  const legend = legendRows ? (
+    <Box flexDirection="row" height={1}>
+      {series.map((item, index) => {
+        const hidden = hiddenSeriesIdSet.has(item.id);
+        const legendColor = hidden ? colors.textDim : item.color;
+        const legendAttributes = hidden ? TextAttributes.STRIKETHROUGH | TextAttributes.DIM : TextAttributes.NONE;
+        const handleLegendMouseDown = onToggleSeries
+          ? (event: any) => {
+            event.stopPropagation?.();
+            onToggleSeries(item.id);
+          }
+          : undefined;
+        return (
+          <Box
+            key={item.id}
+            flexDirection="row"
+            height={1}
+            onMouseDown={handleLegendMouseDown}
+            cursor={onToggleSeries ? "pointer" : undefined}
+            data-gloom-interactive={onToggleSeries ? "true" : undefined}
+          >
+            <Text>{index > 0 ? "  " : " "}</Text>
+            <Text fg={legendColor} bg={legendColor} attributes={legendAttributes}> </Text>
+            <Text fg={legendColor} attributes={legendAttributes}>{` ${item.label}`}</Text>
+          </Box>
+        );
+      })}
+    </Box>
+  ) : null;
 
   if (!scene) {
     return (
       <Box flexDirection="column" width={totalWidth} height={totalHeight} onMouseDown={onMouseDown}>
         {header ?? (title ? <Text fg={colors.textBright} bold>{truncateWithEllipsis(title, totalWidth)}</Text> : null)}
+        {legend}
         <Text fg={colors.textDim}>No chart data</Text>
       </Box>
     );
@@ -146,15 +238,7 @@ export function StaticBarChartSurface({
           </Text>
         )
       ) : null}
-      {legendRows ? (
-        <Text>
-          {series.map((item, index) => (
-            <Span key={item.id} fg={item.color}>
-              {index > 0 ? "  " : ""}{"■ "}{item.label}
-            </Span>
-          ))}
-        </Text>
-      ) : null}
+      {legend}
       <Box flexDirection="row" width={totalWidth} height={plotHeight}>
         {yAxisWidth ? (
           <Box flexDirection="column" width={yAxisWidth} height={plotHeight}>

package/src/components/chart/stock-chart/footer.test.ts

@@ -0,0 +1,65 @@
+import { describe, expect, test } from "bun:test";
+import type { ProjectedChartPoint } from "../core/data";
+import { resolveStockChartFooterOhlcReadout } from "./footer";
+
+function point(
+  close: number,
+  overrides: Partial<ProjectedChartPoint> = {},
+): ProjectedChartPoint {
+  return {
+    date: new Date("2026-07-03T10:00:00Z"),
+    open: close,
+    high: close,
+    low: close,
+    close,
+    volume: 100,
+    ...overrides,
+  };
+}
+
+describe("stock chart footer OHLC readout", () => {
+  test("summarizes the visible OHLC window for idle chart readouts", () => {
+    const readout = resolveStockChartFooterOhlcReadout({
+      activePoint: null,
+      hasDisplayCursor: false,
+      points: [
+        point(100, { open: 99, high: 101, low: 98, volume: 10 }),
+        point(104, { open: 100, high: 108, low: 99, volume: 20 }),
+        point(106, { open: 104, high: 107, low: 103, volume: 30 }),
+      ],
+    });
+
+    expect(readout).toMatchObject({
+      open: 99,
+      high: 108,
+      low: 98,
+      close: 106,
+      volume: 60,
+    });
+    expect(readout?.changePercent).toBeCloseTo(((106 - 99) / 99) * 100);
+  });
+
+  test("uses the summary only when there is no chart cursor", () => {
+    const activePoint = point(104, { open: 103, high: 105, low: 102 });
+    const points = [
+      point(100, { open: 99, high: 101, low: 98 }),
+      point(106, { open: 104, high: 107, low: 103 }),
+    ];
+
+    const idleReadout = resolveStockChartFooterOhlcReadout({
+      activePoint,
+      hasDisplayCursor: false,
+      points,
+    });
+    const cursorReadout = resolveStockChartFooterOhlcReadout({
+      activePoint,
+      hasDisplayCursor: true,
+      points,
+    });
+
+    expect(idleReadout?.close).toBe(106);
+    expect(idleReadout?.changePercent).not.toBeNull();
+    expect(cursorReadout).toMatchObject(activePoint);
+    expect(cursorReadout?.changePercent).toBeNull();
+  });
+});