gloomberb 0.7.2 → 0.7.4

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

@@ -1,7 +1,17 @@
 import { RGBA } from "../../ui";
-import type { ChartAxisMode, ChartColors, ChartIndicatorOverlays, Pixel, PixelBuffer, ChartRenderMode } from "./chart-types";
+import type {
+  ChartAxisMode,
+  ChartColors,
+  ChartIndicatorOverlays,
+  ChartMarketSession,
+  ChartSessionBackgroundSpan,
+  Pixel,
+  PixelBuffer,
+  ChartRenderMode,
+} from "./chart-types";
 import type { ProjectedChartPoint } from "./chart-data";
 import { formatCompactMarketPriceWithCurrency, formatMarketPrice, resolveAssetDisplayKind } from "../../utils/market-format";
+import { resolveExtendedHoursBackgroundSpans } from "./market-session";
 
 // ---------------------------------------------------------------------------
 // Styled output types (unchanged public API)
@@ -26,7 +36,7 @@ export interface StyledContent {
 const LAYER_GRID = 0;
 const LAYER_FILL = 1;
 const LAYER_DATA = 2;
-const LAYER_OVERLAY = 2;
+const LAYER_OVERLAY = 1;
 const LAYER_CROSSHAIR = 3;
 
 function normalizeCount(value: number, min: number): number {
@@ -135,6 +145,8 @@ export function resolveChartPalette(
     axisColor: baseColors.textDim,
     activeRangeColor: baseColors.text,
     inactiveRangeColor: blendHex(baseColors.bg, baseColors.textDim, 0.75),
+    preMarketBgColor: blendHex(baseColors.bg, "#8a641f", 0.28),
+    postMarketBgColor: blendHex(baseColors.bg, "#7a4624", 0.28),
     candleUp: baseColors.positive,
     candleDown: baseColors.negative,
     wickUp: blendHex(baseColors.positive, baseColors.text, 0.35),
@@ -150,10 +162,12 @@ export function createPixelBuffer(width: number, heightPixels: number): PixelBuf
   const bufferWidth = normalizeCount(width, 0);
   const bufferHeight = normalizeCount(heightPixels, 0);
   const pixels: (Pixel | null)[][] = [];
+  const backgrounds: (string | null)[][] = [];
   for (let y = 0; y < bufferHeight; y++) {
     pixels.push(new Array(bufferWidth).fill(null));
+    backgrounds.push(new Array(bufferWidth).fill(null));
   }
-  return { width: bufferWidth, height: bufferHeight, pixels };
+  return { width: bufferWidth, height: bufferHeight, pixels, backgrounds };
 }
 
 function setPixel(buf: PixelBuffer, x: number, y: number, color: string, layer: number) {
@@ -224,6 +238,27 @@ function fillRect(buf: PixelBuffer, x0: number, y0: number, x1: number, y1: numb
   }
 }
 
+function setBackgroundPixel(buf: PixelBuffer, x: number, y: number, color: string) {
+  const px = Math.round(x);
+  const py = Math.round(y);
+  if (px < 0 || px >= buf.width || py < 0 || py >= buf.height) return;
+  const row = buf.backgrounds[py];
+  if (!row) return;
+  row[px] = color;
+}
+
+function fillBackgroundRect(buf: PixelBuffer, x0: number, y0: number, x1: number, y1: number, color: string) {
+  const left = Math.max(Math.min(Math.round(x0), Math.round(x1)), 0);
+  const right = Math.min(Math.max(Math.round(x0), Math.round(x1)), Math.max(buf.width - 1, 0));
+  const top = Math.max(Math.min(Math.round(y0), Math.round(y1)), 0);
+  const bottom = Math.min(Math.max(Math.round(y0), Math.round(y1)), Math.max(buf.height - 1, 0));
+  for (let y = top; y <= bottom; y += 1) {
+    for (let x = left; x <= right; x += 1) {
+      setBackgroundPixel(buf, x, y, color);
+    }
+  }
+}
+
 function drawWickOutsideBody(
   buf: PixelBuffer,
   x: number,
@@ -278,15 +313,41 @@ function getBarHalfWidth(pointCount: number, bufWidth: number): number {
   return Math.floor(barW / 2);
 }
 
+function isOhlcLikeMode(mode: ChartRenderMode): boolean {
+  return mode === "ohlc" || mode === "hlc";
+}
+
+function isHighLowMode(mode: ChartRenderMode): boolean {
+  return mode === "candles" || isOhlcLikeMode(mode);
+}
+
+function getOhlcTickLength(pointCount: number, bufWidth: number): number {
+  if (pointCount <= 1) return 4;
+  const spacing = bufWidth / pointCount;
+  return Math.min(Math.max(Math.round(spacing * 0.45), 3), 5);
+}
+
+function getOhlcStemWidth(pointCount: number, bufWidth: number): number {
+  if (pointCount <= 1) return 3;
+  const spacing = bufWidth / pointCount;
+  return Math.min(Math.max(Math.round(spacing * 0.2), 2), 3);
+}
+
+function getOhlcHorizontalPad(pointCount: number, bufWidth: number): number {
+  const tickLen = getOhlcTickLength(pointCount, bufWidth);
+  const stemWidth = getOhlcStemWidth(pointCount, bufWidth);
+  return Math.max(tickLen - 1, Math.ceil((stemWidth - 1) / 2), 0);
+}
+
 function getDotX(index: number, pointCount: number, width: number, mode: ChartRenderMode): number {
   switch (mode) {
     case "candles": {
       const pad = getCandleHalfWidth(pointCount, width);
       return getSeriesPosition(index, pointCount, width, pad, pad);
     }
-    case "ohlc": {
-      const tickLen = Math.max(getCandleHalfWidth(pointCount, width), 2);
-      const pad = Math.max(tickLen - 1, 0);
+    case "ohlc":
+    case "hlc": {
+      const pad = getOhlcHorizontalPad(pointCount, width);
       return getSeriesPosition(index, pointCount, width, pad, pad);
     }
     default:
@@ -303,6 +364,38 @@ export function getPointTerminalColumn(index: number, pointCount: number, width:
   return Math.min(Math.max(Math.floor(getPointDotX(index, pointCount, width, mode) / 2), 0), width - 1);
 }
 
+function getTimePointBand(index: number, pointCount: number, width: number): { left: number; right: number } {
+  const currentX = getSeriesPosition(index, pointCount, width);
+  const previousX = index > 0 ? getSeriesPosition(index - 1, pointCount, width) : currentX;
+  const nextX = index < pointCount - 1 ? getSeriesPosition(index + 1, pointCount, width) : currentX;
+  return {
+    left: index === 0 ? 0 : Math.floor((previousX + currentX) / 2) + 1,
+    right: index === pointCount - 1 ? Math.max(width - 1, 0) : Math.floor((currentX + nextX) / 2),
+  };
+}
+
+function getSessionBackgroundColor(span: ChartSessionBackgroundSpan, colors: ChartColors): string {
+  return span.kind === "pre" ? colors.preMarketBgColor : colors.postMarketBgColor;
+}
+
+function drawSessionBackgrounds(
+  buf: PixelBuffer,
+  points: ProjectedChartPoint[],
+  spans: readonly ChartSessionBackgroundSpan[],
+  yTop: number,
+  yBottom: number,
+  colors: ChartColors,
+) {
+  if (spans.length === 0 || points.length === 0) return;
+  for (const span of spans) {
+    const startIndex = Math.max(Math.min(span.startIndex, points.length - 1), 0);
+    const endIndex = Math.max(Math.min(span.endIndex, points.length - 1), startIndex);
+    const startBand = getTimePointBand(startIndex, points.length, buf.width);
+    const endBand = getTimePointBand(endIndex, points.length, buf.width);
+    fillBackgroundRect(buf, startBand.left, yTop, endBand.right, yBottom, getSessionBackgroundColor(span, colors));
+  }
+}
+
 // ---------------------------------------------------------------------------
 // Chart mode renderers
 // ---------------------------------------------------------------------------
@@ -415,12 +508,16 @@ function drawOhlcChart(
   palette: ResolvedChartPalette,
   min: number,
   max: number,
+  mode: Extract<ChartRenderMode, "ohlc" | "hlc">,
 ) {
-  const tickLen = Math.max(getCandleHalfWidth(points.length, buf.width), 2);
+  const tickLen = getOhlcTickLength(points.length, buf.width);
+  const stemWidth = getOhlcStemWidth(points.length, buf.width);
+  const stemLeft = Math.floor((stemWidth - 1) / 2);
+  const stemRight = Math.ceil((stemWidth - 1) / 2);
 
   for (let i = 0; i < points.length; i++) {
     const point = points[i]!;
-    const x = getDotX(i, points.length, buf.width, "ohlc");
+    const x = getDotX(i, points.length, buf.width, mode);
     const highY = getScaledY(point.high, min, max, chartTop, chartBottom);
     const lowY = getScaledY(point.low, min, max, chartTop, chartBottom);
     const openY = getScaledY(point.open, min, max, chartTop, chartBottom);
@@ -428,14 +525,15 @@ function drawOhlcChart(
     const isUp = point.close >= point.open;
     const color = isUp ? palette.candleUp : palette.candleDown;
 
-    // Vertical line
-    drawLine(buf, x, highY, x, lowY, color, LAYER_DATA);
+    for (let dx = -stemLeft; dx <= stemRight; dx++) {
+      drawLine(buf, x + dx, highY, x + dx, lowY, color, LAYER_DATA);
+    }
 
-    // Open tick extends left
-    for (let dx = 0; dx < tickLen; dx++) {
-      setPixel(buf, x - dx, openY, color, LAYER_DATA);
+    if (mode === "ohlc") {
+      for (let dx = 0; dx < tickLen; dx++) {
+        setPixel(buf, x - dx, openY, color, LAYER_DATA);
+      }
     }
-    // Close tick extends right
     for (let dx = 0; dx < tickLen; dx++) {
       setPixel(buf, x + dx, closeY, color, LAYER_DATA);
     }
@@ -542,14 +640,19 @@ export function bufferToBrailleLines(buf: PixelBuffer): StyledContent[] {
       let topLayer = -1;
 
       // Track dots per layer so we can render only the top layer's dots
-      const dotsByLayer: Map<number, number> = new Map(); // layer → braille bits
+      const dotsByLayer: Map<number, number> = new Map(); // layer -> braille bits
       const colorByLayer: Map<number, Map<string, number>> = new Map();
+      const backgroundCounts: Map<string, number> = new Map();
 
       for (let dy = 0; dy < 4; dy++) {
         for (let dx = 0; dx < 2; dx++) {
           const px = col * 2 + dx;
           const py = row * 4 + dy;
           if (px >= buf.width || py >= buf.height) continue;
+          const bg = buf.backgrounds[py]?.[px] ?? null;
+          if (bg) {
+            backgroundCounts.set(bg, (backgroundCounts.get(bg) || 0) + 1);
+          }
           const pixel = buf.pixels[py]?.[px] ?? null;
           if (pixel) {
             const bit = BRAILLE_DOT[dy]![dx]!;
@@ -567,14 +670,19 @@ export function bufferToBrailleLines(buf: PixelBuffer): StyledContent[] {
       let char: string;
       let cellFg: string | undefined;
       let cellBg: string | undefined;
+      let bestBackgroundCount = 0;
+      for (const [bg, count] of backgroundCounts) {
+        if (count > bestBackgroundCount) {
+          bestBackgroundCount = count;
+          cellBg = bg;
+        }
+      }
 
       if (topLayer < 0) {
         char = " ";
         cellFg = undefined;
-        cellBg = undefined;
       } else {
-        // Only show dots from the highest layer — keeps lines thin in mixed
-        // cells (e.g. area chart where line and fill overlap).
+        // Only show dots from the highest layer so lines stay thin in mixed cells.
         const pattern = dotsByLayer.get(topLayer) || 0;
         char = String.fromCharCode(BRAILLE_BASE + pattern);
 
@@ -586,7 +694,6 @@ export function bufferToBrailleLines(buf: PixelBuffer): StyledContent[] {
         }
 
         cellFg = topColor;
-        cellBg = undefined;
       }
 
       if (char === runChar && cellFg === runFg && cellBg === runBg) {
@@ -792,6 +899,10 @@ function formatClockTime(date: Date, unit: AxisLabelUnit): string {
   }
 }
 
+function formatFullCalendarDate(date: Date): string {
+  return `${MONTHS[date.getMonth()]} ${date.getDate()} ${date.getFullYear()}`;
+}
+
 function isSameCalendarDay(a: Date, b: Date): boolean {
   return a.getFullYear() === b.getFullYear()
     && a.getMonth() === b.getMonth()
@@ -954,6 +1065,10 @@ function formatCursorTimeAxisValue(
   const minGapMs = getMinPositiveGapMs(validDates);
   const effectiveStepMs = Math.max(spanMs / Math.max(roughLabelCount - 1, 1), minGapMs || 0);
   const unit = resolveAxisLabelUnit(effectiveStepMs);
+  if (unit === "year" || unit === "month") {
+    return formatFullCalendarDate(date);
+  }
+
   const counterpart = isSameCalendarDay(first, last)
     ? first
     : isSameCalendarDay(date, first)
@@ -1121,6 +1236,7 @@ export interface RenderChartOptions {
   colors: ResolvedChartPalette;
   timeAxisDates?: Array<Date | string | number>;
   indicators?: ChartIndicatorOverlays | null;
+  marketSession?: ChartMarketSession | null;
 }
 
 export interface ChartScene {
@@ -1133,6 +1249,7 @@ export interface ChartScene {
   mode: ChartRenderMode;
   colors: ResolvedChartPalette;
   indicators: ChartIndicatorOverlays | null;
+  sessionBackgroundSpans: ChartSessionBackgroundSpan[];
   min: number;
   max: number;
   activeIdx: number;
@@ -1194,27 +1311,6 @@ export function getActivePointIndex(
   return bestIndex;
 }
 
-function getIndicatorOverlayValues(indicators: ChartIndicatorOverlays | null | undefined): number[] {
-  if (!indicators) return [];
-
-  const values: number[] = [];
-  for (const line of indicators.smaLines) {
-    values.push(...line.points.map((point) => point.value));
-  }
-  for (const line of indicators.emaLines) {
-    values.push(...line.points.map((point) => point.value));
-  }
-  if (indicators.bollinger) {
-    values.push(
-      ...indicators.bollinger.upper.map((point) => point.value),
-      ...indicators.bollinger.middle.map((point) => point.value),
-      ...indicators.bollinger.lower.map((point) => point.value),
-    );
-  }
-
-  return values.filter((value) => Number.isFinite(value));
-}
-
 export function buildChartScene(
   points: ProjectedChartPoint[],
   opts: RenderChartOptions,
@@ -1222,15 +1318,14 @@ export function buildChartScene(
   if (points.length === 0) return null;
 
   const dimensions = normalizeRenderDimensions(opts);
-  const dataMin = opts.mode === "candles" || opts.mode === "ohlc"
+  const dataMin = isHighLowMode(opts.mode)
     ? Math.min(...points.map((point) => point.low))
     : Math.min(...points.map((point) => point.close));
-  const dataMax = opts.mode === "candles" || opts.mode === "ohlc"
+  const dataMax = isHighLowMode(opts.mode)
     ? Math.max(...points.map((point) => point.high))
     : Math.max(...points.map((point) => point.close));
-  const indicatorValues = getIndicatorOverlayValues(opts.indicators);
-  const min = indicatorValues.length > 0 ? Math.min(dataMin, ...indicatorValues) : dataMin;
-  const max = indicatorValues.length > 0 ? Math.max(dataMax, ...indicatorValues) : dataMax;
+  const min = dataMin;
+  const max = dataMax;
   const activeIdx = getActivePointIndex(points.length, dimensions.width, opts.cursorX, opts.mode);
   const activePoint = points[activeIdx]!;
   const range = max - min || 1;
@@ -1259,6 +1354,10 @@ export function buildChartScene(
     : max - (cursorY / Math.max(dimensions.chartRows - 1, 1)) * range;
 
   const timeAxisDates = opts.timeAxisDates ?? points.map((point) => point.date);
+  const sessionBackgroundSpans = resolveExtendedHoursBackgroundSpans(
+    points.map((point) => point.date),
+    opts.marketSession,
+  );
 
   return {
     points,
@@ -1270,6 +1369,7 @@ export function buildChartScene(
     mode: opts.mode,
     colors: opts.colors,
     indicators: opts.indicators ?? null,
+    sessionBackgroundSpans,
     min,
     max,
     activeIdx,
@@ -1381,6 +1481,14 @@ export function renderChart(
       getAxisFractionDigitFloor(assetCategory, priceRange),
     )
     : null;
+  drawSessionBackgrounds(
+    buf,
+    points,
+    scene.sessionBackgroundSpans,
+    0,
+    showVolume ? volDotBottom : chartDotBottom,
+    palette,
+  );
   drawGridLines(buf, gridLines.map((line) => line.y), palette.gridColor);
 
   switch (mode) {
@@ -1394,7 +1502,10 @@ export function renderChart(
       drawCandlestickChart(buf, points, 0, chartDotBottom, palette, min, max);
       break;
     case "ohlc":
-      drawOhlcChart(buf, points, 0, chartDotBottom, palette, min, max);
+      drawOhlcChart(buf, points, 0, chartDotBottom, palette, min, max, "ohlc");
+      break;
+    case "hlc":
+      drawOhlcChart(buf, points, 0, chartDotBottom, palette, min, max, "hlc");
       break;
   }
 
@@ -1406,7 +1517,7 @@ export function renderChart(
       volDotBottom,
       palette.volumeUp,
       palette.volumeDown,
-      mode === "candles" || mode === "ohlc" ? "openClose" : "previousClose",
+      isHighLowMode(mode) ? "openClose" : "previousClose",
       mode,
     );
   }

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

@@ -2,14 +2,15 @@ import type { PricePoint } from "../../types/financials";
 
 export type TimeRange = "1D" | "1W" | "1M" | "3M" | "6M" | "1Y" | "5Y" | "ALL";
 export type ChartResolution = "auto" | "1m" | "5m" | "15m" | "30m" | "45m" | "1h" | "1d" | "1wk" | "1mo";
-export type ChartRenderMode = "area" | "line" | "candles" | "ohlc";
+export type ChartRenderMode = "area" | "line" | "candles" | "ohlc" | "hlc";
 export type ChartAxisMode = "price" | "percent";
 export type ChartRendererPreference = "auto" | "kitty" | "braille";
 export type ResolvedChartRenderer = "kitty" | "braille";
 export type ComparisonChartRenderMode = "area" | "line";
+export type ChartSessionBackgroundKind = "pre" | "post";
 
 export const TIME_RANGES: TimeRange[] = ["1D", "1W", "1M", "3M", "6M", "1Y", "5Y", "ALL"];
-export const CHART_RENDER_MODES: ChartRenderMode[] = ["area", "line", "candles", "ohlc"];
+export const CHART_RENDER_MODES: ChartRenderMode[] = ["area", "line", "candles", "ohlc", "hlc"];
 export const CHART_RENDERER_PREFERENCES: ChartRendererPreference[] = ["auto", "kitty", "braille"];
 export const COMPARISON_RENDER_MODES: ComparisonChartRenderMode[] = ["area", "line"];
 
@@ -46,6 +47,7 @@ export interface PixelBuffer {
   width: number;
   height: number; // virtual pixel rows (4x terminal rows for braille rendering)
   pixels: (Pixel | null)[][]; // [y][x] = pixel with color and layer, or null
+  backgrounds: (string | null)[][];
 }
 
 export interface ChartColors {
@@ -59,6 +61,22 @@ export interface ChartColors {
   axisColor: string;
   activeRangeColor: string;
   inactiveRangeColor: string;
+  preMarketBgColor: string;
+  postMarketBgColor: string;
+}
+
+export interface ChartMarketSession {
+  timeZone: string;
+  regularStartMinutes: number;
+  regularEndMinutes: number;
+  preMarketStartMinutes: number;
+  postMarketEndMinutes: number;
+}
+
+export interface ChartSessionBackgroundSpan {
+  kind: ChartSessionBackgroundKind;
+  startIndex: number;
+  endIndex: number;
 }
 
 export interface VisibleWindow {