gloomberb 0.7.2 → 0.7.4

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

@@ -6,7 +6,6 @@ import { useShortcut } from "../../react/input";
 import { useAppDispatch, useAppSelector, usePaneInstance, usePaneInstanceId, usePaneSettingValue, usePaneTicker } from "../../state/app-context";
 import { usePaneFooter, type PaneFooterSegment, type PaneHint } from "../layout/pane-footer";
 import { ShortcutHint } from "../ui";
-import { saveConfig } from "../../data/config-store";
 import { getSharedMarketData } from "../../plugins/registry";
 import { colors } from "../../theme/colors";
 import { useThemeColors } from "../../theme/theme-context";
@@ -129,12 +128,14 @@ import type { PricePoint, TickerFinancials } from "../../types/financials";
 import type { TickerRecord } from "../../types/ticker";
 import { TimeAxisLabel } from "./time-axis-label";
 import { PriceAxisLabels } from "./price-axis-labels";
+import { getChartMarketSessionKey, resolveChartMarketSession } from "./market-session";
 
 const MODE_CHIPS: Record<ChartRenderMode, string> = {
   area: "A",
   line: "L",
   candles: "C",
   ohlc: "O",
+  hlc: "H",
 };
 
 const MODE_LABELS: Record<ChartRenderMode, string> = {
@@ -142,6 +143,7 @@ const MODE_LABELS: Record<ChartRenderMode, string> = {
   line: "LINE",
   candles: "CANDLES",
   ohlc: "OHLC",
+  hlc: "HLC",
 };
 
 const AXIS_MEASURE_PALETTE = resolveChartPalette({
@@ -1085,6 +1087,7 @@ function buildNativeBitmapKey(
   showVolume: boolean,
   paletteId: string,
   indicatorKey: string,
+  marketSessionKey: string,
 ): string {
   const fingerprint = points
     .map((point) => {
@@ -1092,7 +1095,7 @@ function buildNativeBitmapKey(
       return `${date}:${point.open}:${point.high}:${point.low}:${point.close}:${point.volume ?? 0}`;
     })
     .join("|");
-  return [pointCount, pixelWidth, pixelHeight, mode, showVolume ? "1" : "0", paletteId, indicatorKey, fingerprint].join("::");
+  return [pointCount, pixelWidth, pixelHeight, mode, showVolume ? "1" : "0", paletteId, indicatorKey, marketSessionKey, fingerprint].join("::");
 }
 
 function buildNativeCrosshairBitmapKey(
@@ -1151,9 +1154,18 @@ function resolveSelectionCursor(
   };
 }
 
-const INDICATOR_COLORS = [
-  "#FF6B6B", "#4ECDC4", "#45B7D1", "#96CEB4", "#FFEAA7", "#DDA0DD", "#98D8C8",
-];
+function getIndicatorColor(index: number): string {
+  const indicatorColors = [
+    colors.negative,
+    colors.positive,
+    colors.borderFocused,
+    colors.warning,
+    colors.textBright,
+    colors.neutral,
+    colors.textMuted,
+  ];
+  return indicatorColors[((index % indicatorColors.length) + indicatorColors.length) % indicatorColors.length]!;
+}
 
 function getIndicatorWarmupPeriod(config: IndicatorConfig): number {
   const periods = [
@@ -1269,7 +1281,7 @@ function computeIndicatorOverlays(
   config: IndicatorConfig,
 ): ChartIndicatorOverlays {
   let colorIdx = 0;
-  const nextColor = () => INDICATOR_COLORS[colorIdx++ % INDICATOR_COLORS.length]!;
+  const nextColor = () => getIndicatorColor(colorIdx++);
 
   const smaLines = (config.sma ?? []).map((period) => ({
     period,
@@ -1439,7 +1451,7 @@ export const ResolvedStockChart = memo(function ResolvedStockChart({
 }: ResolvedStockChartProps) {
   const themeColors = useThemeColors();
   const renderer = useNativeRenderer();
-  const { canvasCharts, cellWidthPx = 8, cellHeightPx = 18, pixelRatio = 1 } = useUiCapabilities();
+  const { canvasCharts, cellWidthPx = 8, cellHeightPx = 18, pixelRatio = 1, fractionalViewport = false } = useUiCapabilities();
   const dispatch = useAppDispatch();
   const config = useAppSelector((state) => state.config);
   const paneId = usePaneInstanceId();
@@ -1449,6 +1461,7 @@ export const ResolvedStockChart = memo(function ResolvedStockChart({
   const preferredRenderer = config.chartPreferences.renderer;
   const [storedRangePreset] = usePaneSettingValue("chartRangePreset", DEFAULT_TICKER_CHART_RANGE_PRESET);
   const [storedResolution] = usePaneSettingValue<ChartResolution>("chartResolution", DEFAULT_TICKER_CHART_RESOLUTION);
+  const [storedRenderMode, setStoredRenderMode] = usePaneSettingValue<ChartRenderMode>("chartRenderMode", defaultRenderMode);
   const persistChartControls = usePersistChartControlSelection("chartRangePreset");
   const [viewState, setViewState] = useState<StockChartViewportState>({
     presetRange: compact ? "1Y" : storedRangePreset,
@@ -1458,7 +1471,7 @@ export const ResolvedStockChart = memo(function ResolvedStockChart({
     zoomLevel: 1,
     cursorX: null,
     cursorY: null,
-    renderMode: defaultRenderMode,
+    renderMode: storedRenderMode,
   });
   // Read indicator config from the chart caller, falling back to legacy pane settings.
   const indicatorConfig: IndicatorConfig = indicatorConfigOverride ?? ((pane?.settings?.indicators as IndicatorConfig) ?? EMPTY_INDICATOR_CONFIG);
@@ -1683,6 +1696,12 @@ export const ResolvedStockChart = memo(function ResolvedStockChart({
     });
     updateDisplayCursorTarget(EMPTY_DISPLAY_CURSOR, "discrete");
   }, [compact, selectionSupportMap, storedRangePreset, storedResolution]);
+  useEffect(() => {
+    if (compact) return;
+    setViewState((current) => (
+      current.renderMode === storedRenderMode ? current : { ...current, renderMode: storedRenderMode }
+    ));
+  }, [compact, storedRenderMode]);
   const effectiveResolution: ChartResolution = !compact
     && requestedResolution !== "auto"
     && resolutionSupport !== null
@@ -1698,7 +1717,7 @@ export const ResolvedStockChart = memo(function ResolvedStockChart({
     !compact && instrumentRef
       ? {
         instrument: instrumentRef,
-        bufferRange: indicatorBufferRange,
+        bufferRange: viewState.bufferRange,
         granularity: "range",
       }
       : null,
@@ -1724,9 +1743,9 @@ export const ResolvedStockChart = memo(function ResolvedStockChart({
   const axisSectionWidthBudget = compact
     ? axisMode === "percent" ? 11 : 8
     : axisMode === "percent" ? 11 : 10;
-  const axisRightPadding = 1;
+  const axisRightPadding = compact || fractionalViewport ? 0 : 1;
   const minimumAxisWidth = axisMode === "percent" ? 5 : 4;
-  const axisGap = axisSectionWidthBudget > 0 ? 1 : 0;
+  const axisGap = axisSectionWidthBudget > 0 ? fractionalViewport ? 0.5 : 1 : 0;
   const minChartWidth = compact ? 12 : 20;
   const measurementChartWidth = Math.max(width - axisSectionWidthBudget - axisGap, minChartWidth);
   const headerRows = compact ? 0 : 2;
@@ -1734,7 +1753,7 @@ export const ResolvedStockChart = memo(function ResolvedStockChart({
   const timeAxisRow = 1;
   // Native/canvas surfaces can cover the last physical row after pixel rounding;
   // keep the text x-axis one row clear of the pane footer.
-  const nativeSurfaceGuardRow = !compact && (useCanvasChart || effectiveRenderer === "kitty") ? 1 : 0;
+  const nativeSurfaceGuardRow = !compact && fractionalViewport && (useCanvasChart || effectiveRenderer === "kitty") ? 1 : 0;
   const volumeHeight = showVolume && !compact ? 3 : 0;
   const chartHeight = Math.max(height - headerRows - helpRow - timeAxisRow - nativeSurfaceGuardRow, 4);
   const chartCurrency = currencyOverride ?? financials?.quote?.currency ?? ticker?.metadata.currency ?? "USD";
@@ -2360,7 +2379,7 @@ export const ResolvedStockChart = memo(function ResolvedStockChart({
         colors: AXIS_MEASURE_PALETTE,
         timeAxisDates: measuredTimeAxisDates,
       });
-      const cursorSamples = measuredScene
+      const cursorSamples = !compact && measuredScene
         ? [
           formatCursorAxisValue(
             measuredScene.min,
@@ -2401,6 +2420,7 @@ export const ResolvedStockChart = memo(function ResolvedStockChart({
     chartHeight,
     compact,
     displayedDateWindow,
+    fractionalViewport,
     history,
     historyOverride,
     minChartWidth,
@@ -2545,18 +2565,11 @@ export const ResolvedStockChart = memo(function ResolvedStockChart({
     };
   }, [preferredRenderer, renderer]);
 
-  const persistDefaultRenderMode = (nextMode: ChartRenderMode) => {
-    if (nextMode === defaultRenderMode) return;
-    const nextConfig = {
-      ...config,
-      chartPreferences: {
-        ...config.chartPreferences,
-        defaultRenderMode: nextMode,
-      },
-    };
-    dispatch({ type: "SET_CONFIG", config: nextConfig });
-    saveConfig(nextConfig).catch(() => {});
-  };
+  const persistRenderMode = useCallback((nextMode: ChartRenderMode) => {
+    if (!compact && nextMode !== storedRenderMode) {
+      setStoredRenderMode(nextMode);
+    }
+  }, [compact, setStoredRenderMode, storedRenderMode]);
 
   const expandBufferRange = (action: PendingExpansionAction): boolean => {
     if (compact) return false;
@@ -2658,7 +2671,7 @@ export const ResolvedStockChart = memo(function ResolvedStockChart({
   };
 
   const setRenderMode = (mode: ChartRenderMode) => {
-    persistDefaultRenderMode(mode);
+    persistRenderMode(mode);
     setViewState((current) => ({ ...current, renderMode: mode }));
   };
 
@@ -2872,7 +2885,7 @@ export const ResolvedStockChart = memo(function ResolvedStockChart({
           const activeMode = current.renderMode ?? "area";
           const index = CHART_RENDER_MODES.indexOf(activeMode);
           const nextMode = CHART_RENDER_MODES[(index + 1) % CHART_RENDER_MODES.length]!;
-          persistDefaultRenderMode(nextMode);
+          persistRenderMode(nextMode);
           return { ...current, renderMode: nextMode };
         });
         return;
@@ -3033,6 +3046,14 @@ export const ResolvedStockChart = memo(function ResolvedStockChart({
     themeColors.text,
     themeColors.textDim,
   ]);
+  const marketSession = useMemo(() => resolveChartMarketSession(ticker
+    ? [{
+      exchange: ticker.metadata.exchange,
+      currency: ticker.metadata.currency,
+      assetCategory: ticker.metadata.assetCategory,
+    }]
+    : []), [ticker]);
+  const marketSessionKey = useMemo(() => getChartMarketSessionKey(marketSession), [marketSession]);
 
   const cursorX = viewState.cursorX !== null ? clamp(viewState.cursorX, 0, chartWidth - 1) : null;
   const cursorY = viewState.cursorY !== null ? clamp(viewState.cursorY, 0, chartHeight - 1) : null;
@@ -3060,7 +3081,8 @@ export const ResolvedStockChart = memo(function ResolvedStockChart({
     axisMode,
     colors: chartColors,
     timeAxisDates,
-  }), [axisMode, chartColors, chartHeight, chartWidth, compact, projection.effectiveMode, projection.points, selectionCursorX, selectionCursorY, showVolume, timeAxisDates, volumeHeight]);
+    marketSession,
+  }), [axisMode, chartColors, chartHeight, chartWidth, compact, marketSession, projection.effectiveMode, projection.points, selectionCursorX, selectionCursorY, showVolume, timeAxisDates, volumeHeight]);
   const displayScene = useMemo(() => buildChartScene(projection.points, {
     width: chartWidth,
     height: chartHeight,
@@ -3073,7 +3095,8 @@ export const ResolvedStockChart = memo(function ResolvedStockChart({
     colors: chartColors,
     timeAxisDates,
     indicators,
-  }), [axisMode, chartColors, chartHeight, chartWidth, compact, displayCursorX, displayCursorY, indicators, projection.effectiveMode, projection.points, showVolume, timeAxisDates, volumeHeight]);
+    marketSession,
+  }), [axisMode, chartColors, chartHeight, chartWidth, compact, displayCursorX, displayCursorY, indicators, marketSession, projection.effectiveMode, projection.points, showVolume, timeAxisDates, volumeHeight]);
   const snappedSelectionCursorX = selectionScene
     ? getPointTerminalColumn(selectionScene.activeIdx, projection.points.length, chartWidth, projection.effectiveMode)
     : null;
@@ -3119,7 +3142,8 @@ export const ResolvedStockChart = memo(function ResolvedStockChart({
     colors: chartColors,
     timeAxisDates,
     indicators,
-  }), [axisMode, chartColors, chartHeight, chartWidth, compact, indicators, projection.effectiveMode, projection.points, showVolume, timeAxisDates, volumeHeight]);
+    marketSession,
+  }), [axisMode, chartColors, chartHeight, chartWidth, compact, indicators, marketSession, projection.effectiveMode, projection.points, showVolume, timeAxisDates, volumeHeight]);
 
   const staticResult = useMemo(() => renderChart(projection.points, {
     width: chartWidth,
@@ -3135,7 +3159,8 @@ export const ResolvedStockChart = memo(function ResolvedStockChart({
     colors: chartColors,
     timeAxisDates,
     indicators,
-  }), [axisMode, chartAssetCategory, chartColors, chartCurrency, chartHeight, chartWidth, compact, indicators, projection.effectiveMode, projection.points, showVolume, timeAxisDates, volumeHeight]);
+    marketSession,
+  }), [axisMode, chartAssetCategory, chartColors, chartCurrency, chartHeight, chartWidth, compact, indicators, marketSession, projection.effectiveMode, projection.points, showVolume, timeAxisDates, volumeHeight]);
 
   const interactiveResult = useMemo(() => (
     effectiveRenderer === "kitty" || useCanvasChart
@@ -3154,8 +3179,9 @@ export const ResolvedStockChart = memo(function ResolvedStockChart({
         colors: chartColors,
         timeAxisDates,
         indicators,
+        marketSession,
       })
-  ), [axisMode, chartAssetCategory, chartColors, chartCurrency, chartHeight, chartWidth, compact, displayCursorX, displayCursorY, effectiveRenderer, indicators, projection.effectiveMode, projection.points, showVolume, timeAxisDates, useCanvasChart, volumeHeight]);
+  ), [axisMode, chartAssetCategory, chartColors, chartCurrency, chartHeight, chartWidth, compact, displayCursorX, displayCursorY, effectiveRenderer, indicators, marketSession, projection.effectiveMode, projection.points, showVolume, timeAxisDates, useCanvasChart, volumeHeight]);
 
   const result = effectiveRenderer === "kitty" || useCanvasChart ? staticResult : interactiveResult!;
 
@@ -3289,8 +3315,11 @@ export const ResolvedStockChart = memo(function ResolvedStockChart({
         chartColors.volumeDown,
         chartColors.candleUp,
         chartColors.candleDown,
+        chartColors.preMarketBgColor,
+        chartColors.postMarketBgColor,
       ].join(","),
       indicatorRenderKey,
+      marketSessionKey,
     );
     const cachedBitmap = lastNativeBaseBitmapRef.current?.key === bitmapKey
       ? lastNativeBaseBitmapRef.current.bitmap
@@ -3320,11 +3349,14 @@ export const ResolvedStockChart = memo(function ResolvedStockChart({
     chartColors.fillColor,
     chartColors.gridColor,
     chartColors.lineColor,
+    chartColors.postMarketBgColor,
+    chartColors.preMarketBgColor,
     chartColors.volumeDown,
     chartColors.volumeUp,
     compact,
     effectiveRenderer,
     indicatorRenderKey,
+    marketSessionKey,
     nativeBaseScene,
     nativeBaseSurfaceId,
     nativeSurfaceManager,
@@ -3412,7 +3444,7 @@ export const ResolvedStockChart = memo(function ResolvedStockChart({
 
   const hasHistory = chartWindow.points.length > 0;
   const requestedMode = projection.requestedMode;
-  const showOhlcSummary = projection.effectiveMode === "candles" || projection.effectiveMode === "ohlc";
+  const showOhlcSummary = projection.effectiveMode === "candles" || projection.effectiveMode === "ohlc" || projection.effectiveMode === "hlc";
   const hasDisplayCursor = displayCursorX !== null && displayCursorY !== null;
   const activePoint = showOhlcSummary ? (selectionScene?.activePoint ?? null) : null;
   const visiblePriceRange = selectionScene
@@ -3463,7 +3495,7 @@ export const ResolvedStockChart = memo(function ResolvedStockChart({
         const activeMode = current.renderMode ?? "area";
         const index = CHART_RENDER_MODES.indexOf(activeMode);
         const nextMode = CHART_RENDER_MODES[(index + 1) % CHART_RENDER_MODES.length]!;
-        persistDefaultRenderMode(nextMode);
+        persistRenderMode(nextMode);
         return { ...current, renderMode: nextMode };
       });
     };
@@ -3535,6 +3567,7 @@ export const ResolvedStockChart = memo(function ResolvedStockChart({
     footerHints,
     history,
     navigableDateWindow,
+    persistRenderMode,
     resolutionChips,
     selectedResolution,
     selectionSupportMap,
@@ -3552,26 +3585,33 @@ export const ResolvedStockChart = memo(function ResolvedStockChart({
       priceRange: visiblePriceRange,
     });
 
+    const parts: PaneFooterSegment["parts"] = [
+      ...(projection.effectiveMode === "hlc"
+        ? []
+        : [
+            { text: "O", tone: "label" as const },
+            { text: formatPrice(activePoint.open), tone: "value" as const },
+          ]),
+      { text: "H", tone: "label" },
+      { text: formatPrice(activePoint.high), tone: "value" },
+      { text: "L", tone: "label" },
+      { text: formatPrice(activePoint.low), tone: "value" },
+      { text: "C", tone: "label" },
+      { text: formatPrice(activePoint.close), tone: "value" },
+      { text: "V", tone: "label" },
+      { text: formatCompact(activePoint.volume), tone: "value" },
+    ];
+
     return [{
-      id: "ohlc",
-      parts: [
-        { text: "O", tone: "label" },
-        { text: formatPrice(activePoint.open), tone: "value" },
-        { text: "H", tone: "label" },
-        { text: formatPrice(activePoint.high), tone: "value" },
-        { text: "L", tone: "label" },
-        { text: formatPrice(activePoint.low), tone: "value" },
-        { text: "C", tone: "label" },
-        { text: formatPrice(activePoint.close), tone: "value" },
-        { text: "V", tone: "label" },
-        { text: formatCompact(activePoint.volume), tone: "value" },
-      ],
+      id: projection.effectiveMode === "hlc" ? "hlc" : "ohlc",
+      parts,
     }];
   }, [
     activePoint,
     chartAssetCategory,
     chartCurrency,
     compact,
+    projection.effectiveMode,
     showOhlcSummary,
     visiblePriceRange,
   ]);
@@ -3810,9 +3850,10 @@ export const ResolvedStockChart = memo(function ResolvedStockChart({
         colors: chartColors,
         timeAxisDates,
         indicators: canvasIndicators,
+        marketSession,
       })
       : null
-  ), [axisMode, canvasIndicators, canvasProjection, chartColors, chartHeight, compact, showVolume, timeAxisDates, volumeHeight]);
+  ), [axisMode, canvasIndicators, canvasProjection, chartColors, chartHeight, compact, marketSession, showVolume, timeAxisDates, volumeHeight]);
 
   const canvasBaseBitmapKey = useMemo(() => {
     if (!canvasBitmapSize || !canvasProjection || !hasHistory || isBlockingBody || bodyMessage) return null;
@@ -3831,8 +3872,11 @@ export const ResolvedStockChart = memo(function ResolvedStockChart({
         chartColors.volumeDown,
         chartColors.candleUp,
         chartColors.candleDown,
+        chartColors.preMarketBgColor,
+        chartColors.postMarketBgColor,
       ].join(","),
       canvasIndicatorRenderKey,
+      marketSessionKey,
     );
   }, [
     bodyMessage,
@@ -3844,11 +3888,14 @@ export const ResolvedStockChart = memo(function ResolvedStockChart({
     chartColors.fillColor,
     chartColors.gridColor,
     chartColors.lineColor,
+    chartColors.postMarketBgColor,
+    chartColors.preMarketBgColor,
     chartColors.volumeDown,
     chartColors.volumeUp,
     compact,
     hasHistory,
     isBlockingBody,
+    marketSessionKey,
     showVolume,
   ]);
 
@@ -4062,7 +4109,6 @@ export const ResolvedStockChart = memo(function ResolvedStockChart({
           </Box>
         ) : (
           <Box flexDirection="row" gap={1}>
-            <Text fg={colors.textDim}>mode:{MODE_LABELS[requestedMode]}</Text>
             {projection.fallbackMode && (
               <Text fg={colors.textDim}>auto:{MODE_LABELS[projection.fallbackMode]}</Text>
             )}

package/src/components/chart/time-axis-label.tsx

@@ -23,6 +23,51 @@ function clamp(value: number, min: number, max: number): number {
   return Math.max(min, Math.min(max, value));
 }
 
+function normalizeDate(value: Date | string | number): Date | null {
+  const date = value instanceof Date ? value : new Date(value);
+  return Number.isFinite(date.getTime()) ? date : null;
+}
+
+export function resolveCursorDateFromAxis({
+  dates,
+  width,
+  cursorColumn,
+  cursorPixelX,
+  cellWidthPx,
+}: {
+  dates: Array<Date | string | number>;
+  width: number;
+  cursorColumn: number | null;
+  cursorPixelX?: number | null;
+  cellWidthPx?: number | null;
+}): Date | null {
+  const normalizedDates = dates
+    .map(normalizeDate)
+    .filter((date): date is Date => date !== null);
+  if (normalizedDates.length === 0) return null;
+  if (normalizedDates.length === 1) return normalizedDates[0]!;
+
+  let ratio: number | null = null;
+  if (
+    cursorPixelX !== null
+    && cursorPixelX !== undefined
+    && Number.isFinite(cursorPixelX)
+    && cellWidthPx !== null
+    && cellWidthPx !== undefined
+    && Number.isFinite(cellWidthPx)
+    && cellWidthPx > 0
+  ) {
+    const pixelWidth = Math.max(width * cellWidthPx, 1);
+    ratio = clamp(cursorPixelX / Math.max(pixelWidth - 1, 1), 0, 1);
+  } else if (cursorColumn !== null && Number.isFinite(cursorColumn) && width > 1) {
+    ratio = clamp(cursorColumn / Math.max(width - 1, 1), 0, 1);
+  }
+
+  if (ratio === null) return null;
+  const index = Math.round(ratio * (normalizedDates.length - 1));
+  return normalizedDates[clamp(index, 0, normalizedDates.length - 1)] ?? null;
+}
+
 export function buildCursorTimeAxisOverlay({
   segments,
   width,
@@ -61,13 +106,22 @@ export function TimeAxisLabel({
   cursorColor,
 }: TimeAxisLabelProps) {
   const { cellWidthPx = 8, fractionalViewport = false } = useUiCapabilities();
+  const resolvedCursorDate = useMemo(() => {
+    return resolveCursorDateFromAxis({
+      dates,
+      width,
+      cursorColumn,
+      cursorPixelX: fractionalViewport ? cursorPixelX : null,
+      cellWidthPx,
+    }) ?? cursorDate;
+  }, [cellWidthPx, cursorColumn, cursorDate, cursorPixelX, dates, fractionalViewport, width]);
   const segments = useMemo(() => buildCursorTimeAxisSegments({
     timeLabels,
     width,
     cursorColumn,
-    cursorDate,
+    cursorDate: resolvedCursorDate,
     dates,
-  }), [cursorColumn, cursorDate, dates, timeLabels, width]);
+  }), [cursorColumn, dates, resolvedCursorDate, timeLabels, width]);
   const overlay = useMemo(() => buildCursorTimeAxisOverlay({
     segments,
     width,