gloomberb 0.7.2 → 0.7.3

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";
@@ -135,6 +134,7 @@ const MODE_CHIPS: Record<ChartRenderMode, string> = {
   line: "L",
   candles: "C",
   ohlc: "O",
+  hlc: "H",
 };
 
 const MODE_LABELS: Record<ChartRenderMode, string> = {
@@ -142,6 +142,7 @@ const MODE_LABELS: Record<ChartRenderMode, string> = {
   line: "LINE",
   candles: "CANDLES",
   ohlc: "OHLC",
+  hlc: "HLC",
 };
 
 const AXIS_MEASURE_PALETTE = resolveChartPalette({
@@ -1151,9 +1152,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 +1279,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 +1449,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 +1459,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 +1469,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 +1694,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
@@ -1724,9 +1741,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 +1751,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 +2377,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 +2418,7 @@ export const ResolvedStockChart = memo(function ResolvedStockChart({
     chartHeight,
     compact,
     displayedDateWindow,
+    fractionalViewport,
     history,
     historyOverride,
     minChartWidth,
@@ -2545,18 +2563,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 +2669,7 @@ export const ResolvedStockChart = memo(function ResolvedStockChart({
   };
 
   const setRenderMode = (mode: ChartRenderMode) => {
-    persistDefaultRenderMode(mode);
+    persistRenderMode(mode);
     setViewState((current) => ({ ...current, renderMode: mode }));
   };
 
@@ -2872,7 +2883,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;
@@ -3412,7 +3423,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 +3474,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 +3546,7 @@ export const ResolvedStockChart = memo(function ResolvedStockChart({
     footerHints,
     history,
     navigableDateWindow,
+    persistRenderMode,
     resolutionChips,
     selectedResolution,
     selectionSupportMap,
@@ -3552,26 +3564,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,
   ]);
@@ -4062,7 +4081,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>
             )}