gloomberb 0.15.2 → 0.15.4

package/src/plugins/builtin/executives/pane.tsx

@@ -1,22 +1,19 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useCallback, useMemo } from "react";
 import type {
   CloudExecutiveRowPayload,
   CloudProxyStatementPayload,
 } from "../../../api-client";
 import {
+  BulletList,
   DataTableView,
-  EmptyState, PaneStatusBody, Prose, QueryBar, SectionHeading,
-  Tabs,
+  EmptyState, FigureList, PaneStatusBody, Prose, QueryBar, READING_WIDTH, SectionHeading,
   usePaneFooter,
-  usePaneHeaderTabs,
   usePaneNoticeFooter,
   type DataTableCell,
   type DataTableColumn,
   type PaneFooterSegment,
   type PaneHint,
-  type QueryBarFilter,
 } from "../../../components";
-import { useShortcut } from "../../../react/input";
 import { useAsyncResource } from "../../../react/async-resource";
 import { usePaneStateValue } from "../../../state/app/context";
 import { colors, getChartIndicatorColor } from "../../../theme/colors";
@@ -27,12 +24,12 @@ import {
   TextAttributes,
   useRendererHost,
   useUiCapabilities,
-  useUiHost,
-  type ScrollBoxRenderable,
 } from "../../../ui";
-import { isPlainKey } from "../../../utils/keyboard";
+import { isPermanentClientError } from "../../../api-client/errors";
+import { useFilingYearReader } from "../shared/filing-year-reader";
 import { useBoundTicker } from "../shared/ticker-request";
-import { discardProxyData, loadProxyStatement, loadProxyStatements } from "./data";
+import { SplitBar } from "../../../components/ui/split-bar";
+import { loadProxyStatement, loadProxyStatements } from "./data";
 import {
   equityShare,
   formatChange,
@@ -43,8 +40,6 @@ import {
 
 export const EXECUTIVES_PANE_ID = "executives";
 
-const MAX_PROSE_WIDTH = 100;
-
 function retainedDataNotice(subject: string, error: string, fetchedAt: number | null): string {
   const retrieved = new Date(fetchedAt ?? Number.NaN);
   const age = Number.isFinite(retrieved.getTime())
@@ -52,32 +47,6 @@ function retainedDataNotice(subject: string, error: string, fetchedAt: number |
   return `${subject} refresh failed: ${error}. Retained data ${age}.`;
 }
 
-/** A figure and what it is, value first so the column of numbers is what the eye reads. */
-function FigureLine({
-  value,
-  label,
-  note,
-  width,
-  valueWidth,
-}: {
-  value: string;
-  label: string;
-  note?: string;
-  width: number;
-  valueWidth: number;
-}) {
-  const text = [label, note].filter(Boolean).join(", ");
-  return (
-    <Prose
-      text={text}
-      width={width}
-      color={colors.textDim}
-      prefix={`${value.padEnd(valueWidth)}  `}
-      prefixColor={colors.textBright}
-    />
-  );
-}
-
 const PAY_PARTS: Array<{ key: keyof CloudExecutiveRowPayload; label: string }> =
   [
     { key: "salary", label: "Salary" },
@@ -91,9 +60,7 @@ const PAY_PARTS: Array<{ key: keyof CloudExecutiveRowPayload; label: string }> =
 
 /**
  * How the chief executive's pay was made up, as one bar. Salary is usually
- * a sliver and equity most of it; seeing that beats the table. The terminal
- * draws block runs with at least one cell per piece so a small one still
- * shows; the desktop draws real elements so a piece can be thinner than a cell.
+ * a sliver and equity most of it; seeing that beats the table.
  */
 function PayMixBar({
   row,
@@ -102,7 +69,7 @@ function PayMixBar({
   row: CloudExecutiveRowPayload;
   width: number;
 }) {
-  const isDesktopWeb = useUiHost().kind === "desktop-web";
+  const isDesktopWeb = useUiCapabilities().nativePaneChrome === true;
   // Colours follow the pieces that are drawn, so the common salary and stock
   // pair never lands on two neighbouring shades of the palette.
   const parts = PAY_PARTS.map((part) => ({
@@ -112,42 +79,9 @@ function PayMixBar({
   const sum = parts.reduce((total, part) => total + part.value, 0);
   if (sum <= 0) return null;
   const barWidth = Math.max(10, Math.min(width, 60));
-  let cells = parts.map((part) =>
-    Math.max(1, Math.round((part.value / sum) * barWidth)),
-  );
-  // Rounding and the one-cell floor can overshoot; trim the largest piece.
-  while (cells.reduce((a, b) => a + b, 0) > barWidth) {
-    const largest = cells.indexOf(Math.max(...cells));
-    cells[largest] = cells[largest]! - 1;
-  }
-  cells = cells.map((count) => Math.max(1, count));
   return (
     <Box flexDirection="column">
-      {isDesktopWeb ? (
-        <Box
-          height={1}
-          flexDirection="row"
-          alignItems="center"
-          width={barWidth}
-          style={{ height: "9px", borderRadius: "2px", overflow: "hidden" }}
-        >
-          {parts.map((part) => (
-            <Box
-              key={part.key}
-              backgroundColor={part.color}
-              style={{ width: `${((part.value / sum) * 100).toFixed(2)}%`, height: "100%", minWidth: "2px" }}
-            />
-          ))}
-        </Box>
-      ) : (
-        <Box height={1} flexDirection="row">
-          {parts.map((part, index) => (
-            <Text key={part.key} fg={part.color}>
-              {"█".repeat(cells[index]!)}
-            </Text>
-          ))}
-        </Box>
-      )}
+      <SplitBar parts={parts.map((part) => ({ id: part.key, value: part.value, color: part.color }))} width={barWidth} />
       <Box flexDirection="row" flexWrap="wrap">
         {parts.map((part) => (
           <Box key={part.key} flexDirection="row" alignItems="center" marginRight={2}>
@@ -318,15 +252,14 @@ export function ExecutivesResearchTab(props: { focused: boolean; width: number;
 function ExecutiveResearch({ ticker, focused, width, nested }: { ticker: string; focused: boolean; width: number; nested: boolean }) {
   const nativePaneChrome = useUiCapabilities().nativePaneChrome === true;
   const rendererHost = useRendererHost();
-  const scrollRef = useRef<ScrollBoxRenderable | null>(null);
   const [selectedYear, setYear] = usePaneStateValue<number | null>("proxyYear", null);
   const loadYears = useCallback((force: boolean) => loadProxyStatements(ticker, { force }), [ticker]);
-  const list = useAsyncResource(loadYears, { clearOnError: discardProxyData });
-  const years = useMemo(() => list.data?.data?.proxies ?? [], [list.data]);
-  const year = years.some(entry => entry.proxyYear === selectedYear)
-    ? selectedYear : years[0]?.proxyYear ?? null;
+  const list = useAsyncResource(loadYears, { clearOnError: isPermanentClientError });
+  const years = useMemo(() => (list.data?.data?.proxies ?? []).map((entry) => entry.proxyYear), [list.data]);
+  const year = selectedYear !== null && years.includes(selectedYear)
+    ? selectedYear : years[0] ?? null;
   const loadStatement = useCallback((force: boolean) => loadProxyStatement(ticker, year!, { force }), [ticker, year]);
-  const detail = useAsyncResource(year === null ? null : loadStatement, { clearOnError: discardProxyData });
+  const detail = useAsyncResource(year === null ? null : loadStatement, { clearOnError: isPermanentClientError });
   const statement = detail.data?.data ?? null;
   const loading = list.loading || detail.loading;
   const listError = list.error ?? list.data?.refreshError;
@@ -346,50 +279,21 @@ function ExecutiveResearch({ ticker, focused, width, nested }: { ticker: string;
     if (year !== null) void detail.reload();
   }, [list.reload, detail.reload, year]);
 
-  useEffect(() => {
-    const scrollBox = scrollRef.current;
-    if (scrollBox) scrollBox.scrollTop = 0;
-  }, [year]);
-
   const openFiling = useCallback(() => {
     if (statement?.docUrl) void rendererHost.openExternal(statement.docUrl);
   }, [rendererHost, statement]);
-
-  const nextYear = useCallback(() => {
-    if (years.length < 2) return;
-    const index = years.findIndex((entry) => entry.proxyYear === year);
-    setYear(years[(index + 1) % years.length]!.proxyYear);
-  }, [setYear, year, years]);
-
-  const scrollBy = useCallback((delta: number) => {
-    const scrollBox = scrollRef.current;
-    if (!scrollBox?.viewport) return;
-    const max = Math.max(0, scrollBox.scrollHeight - scrollBox.viewport.height);
-    scrollBox.scrollTop = Math.max(
-      0,
-      Math.min(max, scrollBox.scrollTop + delta),
-    );
-  }, []);
-
-  useShortcut(
-    (event) => {
-      if (isPlainKey(event, "o")) {
-        event.preventDefault();
-        openFiling();
-      } else if (isPlainKey(event, "r")) {
-        refresh();
-      } else if (isPlainKey(event, "j", "down")) {
-        // One line per press; marked handled so the pane scroll keys, which
-        // page this statement, do not scroll it again.
-        event.preventDefault();
-        scrollBy(1);
-      } else if (isPlainKey(event, "k", "up")) {
-        event.preventDefault();
-        scrollBy(-1);
-      }
-    },
-    { enabled: focused, scope: "executives" },
-  );
+  const { scrollRef, yearStrip, yearFilters, yearHint } = useFilingYearReader({
+    years,
+    year,
+    onSelectYear: setYear,
+    tabForm: "proxy",
+    filterLabel: "Proxy",
+    focused,
+    nested,
+    scope: "executives",
+    documentKey: String(year),
+    refresh,
+  });
 
   usePaneFooter(EXECUTIVES_PANE_ID, () => {
     const info: PaneFooterSegment[] = [];
@@ -405,38 +309,14 @@ function ExecutiveResearch({ ticker, focused, width, nested }: { ticker: string;
     }
     // `r` refreshes every pane, so it gets no hint here.
     const hints: PaneHint[] = statement ? [{ id: "open", key: "o", label: "pen filing", onPress: openFiling }] : [];
-    // The year strip answers h/l only where it is the pane's own strip; `y`
-    // steps it everywhere, including under Ticker Research's strip.
-    if (years.length > 1) hints.push({ id: "year", key: "y", label: "ear", onPress: nextYear });
+    if (yearHint) hints.push(yearHint);
     return { info, hints };
-  }, [loading, statement, openFiling, years.length, nextYear]);
+  }, [loading, statement, openFiling, yearHint]);
 
   const figures = useMemo(
     () => (statement ? figuresOf(statement) : []),
     [statement],
   );
-  const yearTabs = useMemo(() => years.map((entry) => ({
-    label: `${entry.proxyYear} proxy`,
-    value: String(entry.proxyYear),
-  })), [years]);
-  const selectYear = useCallback((value: string) => setYear(Number(value)), [setYear]);
-  const tabsInHeader = usePaneHeaderTabs(years.length > 1 ? {
-    tabs: yearTabs,
-    activeValue: year === null ? "" : String(year),
-    onSelect: selectYear,
-    focused,
-  } : null);
-  // Nested in Ticker Research the years stay in the body: the terminal keeps
-  // its tab row, the desktop picks the year from the query bar.
-  const yearStrip = years.length > 1 && !tabsInHeader;
-  const yearFilters = useMemo<QueryBarFilter[]>(() => yearStrip && nativePaneChrome ? [{
-    id: "year",
-    label: "Proxy",
-    inline: years.length <= 4,
-    value: year === null ? "" : String(year),
-    options: years.map((entry) => ({ label: String(entry.proxyYear), value: String(entry.proxyYear) })),
-    onChange: selectYear,
-  }] : [], [nativePaneChrome, selectYear, year, yearStrip, years]);
   // The year is named by the tabs or the filter when there is a choice; a
   // single proxy says which one it is here.
   const meta = statement ? [
@@ -445,11 +325,7 @@ function ExecutiveResearch({ ticker, focused, width, nested }: { ticker: string;
     statement.meetingDate ? `meeting ${formatFiled(statement.meetingDate)}` : null,
   ].filter(Boolean).join(" · ") : "";
   const bodyWidth = Math.max(12, width - 2);
-  const proseWidth = Math.min(bodyWidth, MAX_PROSE_WIDTH);
-  const valueWidth = Math.min(
-    14,
-    Math.max(4, ...figures.map((figure) => figure.value.length)),
-  );
+  const proseWidth = Math.min(bodyWidth, READING_WIDTH);
 
   if (list.loading && !list.data?.data) {
     return <PaneStatusBody loading align="center" loadingLabel="Loading proxy statement..." />;
@@ -470,19 +346,7 @@ function ExecutiveResearch({ ticker, focused, width, nested }: { ticker: string;
       minHeight={0}
       overflow="hidden"
     >
-      {yearStrip && !nativePaneChrome && (
-        <Box height={1} flexShrink={0} paddingX={1} overflow="hidden">
-          <Tabs
-            tabs={yearTabs}
-            activeValue={year === null ? "" : String(year)}
-            onSelect={selectYear}
-            compact
-            variant="bare"
-            focused={focused}
-            keyboardNavigation={!nested}
-          />
-        </Box>
-      )}
+      {yearStrip}
       {(yearFilters.length > 0 || meta) && <QueryBar width={width} filters={yearFilters} meta={meta || undefined} />}
       <ScrollBox
         ref={scrollRef}
@@ -501,16 +365,7 @@ function ExecutiveResearch({ ticker, focused, width, nested }: { ticker: string;
             {figures.length > 0 && (
               <Box flexDirection="column">
                 <SectionHeading title="KEY FIGURES" />
-                {figures.map((figure) => (
-                  <FigureLine
-                    key={`${figure.label}-${figure.value}`}
-                    value={figure.value}
-                    label={figure.label}
-                    note={figure.note}
-                    width={proseWidth}
-                    valueWidth={valueWidth}
-                  />
-                ))}
+                <FigureList figures={figures} width={proseWidth} minValueWidth={4} maxValueWidth={14} />
               </Box>
             )}
             {statement.ceo && (
@@ -533,15 +388,7 @@ function ExecutiveResearch({ ticker, focused, width, nested }: { ticker: string;
             {statement.highlights && (
               <Box flexDirection="column">
                 <SectionHeading marginTop={1} title="WHAT CHANGED" />
-                {statement.highlights.split("\n").map((point) => (
-                  <Prose
-                    key={point}
-                    text={point}
-                    width={proseWidth}
-                    color={colors.text}
-                    prefix="• "
-                  />
-                ))}
+                <BulletList items={statement.highlights.split("\n")} width={proseWidth} color={colors.text} />
               </Box>
             )}
           </Box>

package/src/plugins/builtin/fear-greed/cache.ts

@@ -0,0 +1,100 @@
+import { createPluginCache } from "../../../data/plugin-cache";
+import {
+  fetchFearGreedData,
+  type FearGreedData,
+} from "./data";
+
+const CACHE_KIND = "cnn-fear-greed";
+const CACHE_KEY = "graphdata";
+const CACHE_SOURCE = "cnn";
+const CACHE_SCHEMA_VERSION = 1;
+const CACHE_POLICY = {
+  staleMs: 5 * 60 * 1000,
+  expireMs: 7 * 24 * 60 * 60 * 1000,
+} as const;
+
+type PersistedChartPoint = Omit<FearGreedData["overall"]["history"][number], "date"> & {
+  date: string;
+};
+type PersistedFearGreedData = {
+  overall: Omit<FearGreedData["overall"], "updatedAt" | "history"> & {
+    updatedAt: string | null;
+    history: PersistedChartPoint[];
+  };
+  indicators: Array<Omit<FearGreedData["indicators"][number], "updatedAt" | "points"> & {
+    updatedAt: string | null;
+    points: PersistedChartPoint[];
+  }>;
+};
+export type FearGreedCacheEntry = {
+  data: FearGreedData;
+  fetchedAt: number;
+  stale: boolean;
+};
+
+export interface FearGreedLoadResult extends FearGreedCacheEntry {
+  /** Set when the network failed and cached data was served instead. */
+  refreshError?: string;
+}
+
+const cache = createPluginCache<FearGreedData, PersistedFearGreedData>({
+  kind: CACHE_KIND, source: CACHE_SOURCE, schemaVersion: CACHE_SCHEMA_VERSION, policy: CACHE_POLICY,
+  encode: serializeData, decode: deserializeData,
+});
+export const attachFearGreedPersistence = cache.attach;
+export const resetFearGreedPersistence = cache.reset;
+
+function serializePoint(point: FearGreedData["overall"]["history"][number]): PersistedChartPoint {
+  return {
+    ...point,
+    date: point.date.toISOString(),
+  };
+}
+
+function deserializePoint(point: PersistedChartPoint): FearGreedData["overall"]["history"][number] {
+  return {
+    ...point,
+    date: new Date(point.date),
+  };
+}
+
+function serializeData(data: FearGreedData): PersistedFearGreedData {
+  return {
+    overall: {
+      ...data.overall,
+      updatedAt: data.overall.updatedAt?.toISOString() ?? null,
+      history: data.overall.history.map(serializePoint),
+    },
+    indicators: data.indicators.map((indicator) => ({
+      ...indicator,
+      updatedAt: indicator.updatedAt?.toISOString() ?? null,
+      points: indicator.points.map(serializePoint),
+    })),
+  };
+}
+
+function deserializeData(data: PersistedFearGreedData): FearGreedData {
+  return {
+    overall: {
+      ...data.overall,
+      updatedAt: data.overall.updatedAt ? new Date(data.overall.updatedAt) : null,
+      history: data.overall.history.map(deserializePoint),
+    },
+    indicators: data.indicators.map((indicator) => ({
+      ...indicator,
+      updatedAt: indicator.updatedAt ? new Date(indicator.updatedAt) : null,
+      points: indicator.points.map(deserializePoint),
+    })),
+  };
+}
+
+export function getCachedFearGreedData(options?: { allowExpired?: boolean }): FearGreedCacheEntry | null {
+  return cache.get(CACHE_KEY, options);
+}
+
+export function loadFearGreed(
+  force = false,
+  loader: () => Promise<FearGreedData> = fetchFearGreedData,
+): Promise<FearGreedLoadResult> {
+  return cache.load(CACHE_KEY, loader, { force });
+}

package/src/plugins/builtin/fear-greed/charts.tsx

@@ -0,0 +1,258 @@
+import { useMemo } from "react";
+import { Badge, resolveChartPalette, StaticChartSurface, type StaticChartOverlay } from "../../../components";
+import { blendHex, colors } from "../../../theme/colors";
+import { Box, Text, TextAttributes, useUiHost } from "../../../ui";
+import type {
+  FearGreedData,
+  FearGreedIndicator,
+  FearGreedRating,
+  FearGreedValueFormat,
+} from "./data";
+import {
+  formatAxisValue,
+  formatIndicatorValue,
+  formatScore,
+  formatUpdatedAt,
+  ratingColor,
+  ratingLabel,
+  ratingTrend,
+} from "./format";
+
+const CHART_META_STACK_WIDTH = 84;
+
+function chartOverlay(indicator: FearGreedIndicator): StaticChartOverlay[] | undefined {
+  if (indicator.secondaryPoints.length === 0) return undefined;
+  return [{ id: "secondary", color: colors.warning, points: indicator.secondaryPoints }];
+}
+
+function SentimentChart({
+  title,
+  rating,
+  score,
+  points,
+  width,
+  valueFormat,
+  updatedAt,
+  primaryLabel,
+  secondaryLabel,
+  secondaryValue,
+  overlays,
+}: {
+  title: string;
+  rating: FearGreedRating;
+  score: number | null;
+  points: FearGreedIndicator["points"];
+  width: number;
+  valueFormat: FearGreedValueFormat;
+  updatedAt: Date | null;
+  primaryLabel: string;
+  secondaryLabel?: string;
+  secondaryValue?: number | null;
+  overlays?: StaticChartOverlay[];
+}) {
+  const isDesktopWeb = useUiHost().kind === "desktop-web";
+  const stackMeta = width < CHART_META_STACK_WIDTH;
+  const color = ratingColor(rating);
+  const latest = points.length > 0 ? points[points.length - 1]!.close : null;
+
+  return (
+    <Box flexDirection="column" marginTop={isDesktopWeb ? 1 : 2} paddingX={1}>
+      <Box flexDirection="row" height={1}>
+        <Text fg={colors.textBright} attributes={TextAttributes.BOLD}>{title.toUpperCase()}</Text>
+        <Box flexGrow={1} />
+        <Badge label={ratingLabel(rating)} color={ratingColor(rating)} />
+      </Box>
+      {stackMeta ? (
+        <>
+          <Box flexDirection="row" height={1} overflow="hidden">
+            <SeriesLegend color={color} primaryLabel={primaryLabel} secondaryLabel={secondaryLabel} />
+          </Box>
+          <Box flexDirection="row" height={1} overflow="hidden">
+            <ChartStats
+              color={color}
+              latest={latest}
+              score={score}
+              secondaryLabel={secondaryLabel}
+              secondaryValue={secondaryValue}
+              valueFormat={valueFormat}
+            />
+          </Box>
+        </>
+      ) : (
+        <Box flexDirection="row" height={1} overflow="hidden">
+          <SeriesLegend color={color} primaryLabel={primaryLabel} secondaryLabel={secondaryLabel} />
+          <Box flexGrow={1} />
+          <ChartStats
+            color={color}
+            latest={latest}
+            score={score}
+            secondaryLabel={secondaryLabel}
+            secondaryValue={secondaryValue}
+            valueFormat={valueFormat}
+          />
+        </Box>
+      )}
+      <SentimentPlot
+        rating={rating}
+        points={points}
+        width={width}
+        valueFormat={valueFormat}
+        updatedAt={updatedAt}
+        overlays={overlays}
+      />
+    </Box>
+  );
+}
+
+function SentimentPlot({
+  rating,
+  points,
+  width,
+  valueFormat,
+  updatedAt,
+  overlays,
+}: {
+  rating: FearGreedRating;
+  points: FearGreedIndicator["points"];
+  width: number;
+  valueFormat: FearGreedValueFormat;
+  updatedAt: Date | null;
+  overlays?: StaticChartOverlay[];
+}) {
+  const chartWidth = Math.max(24, width - 2);
+  const chartHeight = width >= 96 ? 12 : 10;
+  const color = ratingColor(rating);
+  const palette = useMemo(() => {
+    const basePalette = resolveChartPalette(colors, ratingTrend(rating));
+    return {
+      ...basePalette,
+      lineColor: color,
+      fillColor: blendHex(colors.bg, color, 0.18),
+      gridColor: blendHex(colors.bg, colors.border, 0.55),
+    };
+  }, [color, rating]);
+
+  return (
+    <>
+      {points.length >= 2 ? (
+        <Box marginTop={1}>
+          <StaticChartSurface
+            points={points}
+            width={chartWidth}
+            height={chartHeight}
+            mode="line"
+            colors={palette}
+            overlays={overlays}
+            showTimeAxis
+            timeAxisColor={colors.textDim}
+            yAxisColor={colors.textDim}
+            formatYAxisValue={formatAxisValue(valueFormat)}
+          />
+        </Box>
+      ) : (
+        <Box height={chartHeight} marginTop={1} justifyContent="center" alignItems="center">
+          <Text fg={colors.textMuted}>Not enough chart data</Text>
+        </Box>
+      )}
+      <Box height={1} marginTop={1}>
+        <Text fg={colors.textDim}>{formatUpdatedAt(updatedAt)}</Text>
+      </Box>
+    </>
+  );
+}
+
+function SeriesLegend({
+  color,
+  primaryLabel,
+  secondaryLabel,
+}: {
+  color: string;
+  primaryLabel: string;
+  secondaryLabel?: string;
+}) {
+  return (
+    <>
+      <Text fg={color}>● </Text>
+      <Text fg={colors.textDim}>{primaryLabel}</Text>
+      {secondaryLabel ? (
+        <>
+          <Text fg={colors.warning}>  ● </Text>
+          <Text fg={colors.textDim}>{secondaryLabel}</Text>
+        </>
+      ) : null}
+    </>
+  );
+}
+
+function ChartStats({
+  color,
+  latest,
+  score,
+  secondaryLabel,
+  secondaryValue,
+  valueFormat,
+}: {
+  color: string;
+  latest: number | null;
+  score: number | null;
+  secondaryLabel?: string;
+  secondaryValue?: number | null;
+  valueFormat: FearGreedValueFormat;
+}) {
+  // Hide a latest value that reads the same as the score.
+  const latestText = formatIndicatorValue(latest, valueFormat);
+  const showLatest = latestText !== formatScore(score);
+  return (
+    <>
+      <Text fg={colors.textDim}>score </Text>
+      <Text fg={color} attributes={TextAttributes.BOLD}>{formatScore(score)}</Text>
+      {showLatest ? (
+        <>
+          <Text fg={colors.textDim}>  latest </Text>
+          <Text fg={colors.text}>{latestText}</Text>
+        </>
+      ) : null}
+      {secondaryLabel && secondaryValue != null ? (
+        <>
+          <Text fg={colors.textDim}>  avg </Text>
+          <Text fg={colors.text}>{formatIndicatorValue(secondaryValue, valueFormat)}</Text>
+        </>
+      ) : null}
+    </>
+  );
+}
+
+// The gauge above already shows the score, its rating and what the series is,
+// so the history is the plot alone.
+export function IndexHistoryChart({ data, width }: { data: FearGreedData; width: number }) {
+  return (
+    <Box flexDirection="column" paddingX={1}>
+      <SentimentPlot
+        rating={data.overall.rating}
+        points={data.overall.history}
+        width={width}
+        valueFormat="score"
+        updatedAt={data.overall.updatedAt}
+      />
+    </Box>
+  );
+}
+
+export function IndicatorChart({ indicator, width }: { indicator: FearGreedIndicator; width: number }) {
+  const overlays = useMemo(() => chartOverlay(indicator), [indicator.secondaryPoints]);
+  return (
+    <SentimentChart
+      title={indicator.definition.title}
+      rating={indicator.rating}
+      score={indicator.score}
+      points={indicator.points}
+      width={width}
+      valueFormat={indicator.definition.valueFormat}
+      updatedAt={indicator.updatedAt}
+      primaryLabel={indicator.definition.primaryLabel}
+      secondaryLabel={indicator.definition.secondaryLabel}
+      secondaryValue={indicator.latestSecondaryValue}
+      overlays={overlays}
+    />
+  );
+}