gloomberb 0.10.0 → 0.10.2

package/src/components/chart/composite/interactions.ts

@@ -1,4 +1,9 @@
 import type { ResolvedSeries } from "../../../time-series/types";
+import {
+  buildCompositeTimeScale,
+  projectCompositeTimestamp,
+  unprojectCompositeTimestamp,
+} from "./time-scale";
 
 export interface CompositeViewportRange {
   start: Date;
@@ -44,10 +49,18 @@ function normalizeViewport(
   };
 }
 
+function hasRenderableValue(point: ResolvedSeries["points"][number]): boolean {
+  return (
+    (typeof point.value === "number" && Number.isFinite(point.value))
+    || (typeof point.close === "number" && Number.isFinite(point.close))
+  );
+}
+
 function pointTimestamps(series: ResolvedSeries[]): number[] {
   const timestamps = new Set<number>();
   for (const entry of series) {
     for (const point of entry.points) {
+      if (!hasRenderableValue(point)) continue;
       const timestamp = point.date instanceof Date
         ? point.date.getTime()
         : new Date(point.date).getTime();
@@ -57,6 +70,33 @@ function pointTimestamps(series: ResolvedSeries[]): number[] {
   return [...timestamps].sort((left, right) => left - right);
 }
 
+function viewportHasTimestamps(
+  timestamps: readonly number[],
+  viewport: CompositeViewportRange,
+  minimumCount: number,
+): boolean {
+  const start = finiteTime(viewport.start);
+  const end = finiteTime(viewport.end);
+  if (start === null || end === null || start > end) return false;
+  const required = Math.max(1, Math.floor(minimumCount));
+  let count = 0;
+  for (const timestamp of timestamps) {
+    if (timestamp < start) continue;
+    if (timestamp > end) break;
+    count += 1;
+    if (count >= required) return true;
+  }
+  return false;
+}
+
+export function compositeViewportHasObservations(
+  series: ResolvedSeries[],
+  viewport: CompositeViewportRange,
+  minimumCount = 2,
+): boolean {
+  return viewportHasTimestamps(pointTimestamps(series), viewport, minimumCount);
+}
+
 export function resolveCompositeNavigationBounds(
   series: ResolvedSeries[],
   requestedViewport?: CompositeViewportRange | null,
@@ -70,10 +110,12 @@ export function resolveCompositeNavigationBounds(
   });
   if (!requested) return data;
   if (!data) return requested;
-  return normalizeViewport({
-    start: new Date(Math.min(requested.start.getTime(), data.start.getTime())),
-    end: new Date(Math.max(requested.end.getTime(), data.end.getTime())),
-  });
+  const overlapsData = requested.end.getTime() >= data.start.getTime()
+    && requested.start.getTime() <= data.end.getTime();
+  // Loaded series can include a buffer outside the authored viewport. Use the
+  // complete real-data extent when the two ranges overlap, but do not clamp a
+  // newly authored, disjoint request to stale observations.
+  return overlapsData ? data : requested;
 }
 
 export function resolveCompositeMinimumSpanMs(
@@ -83,14 +125,18 @@ export function resolveCompositeMinimumSpanMs(
   const start = bounds.start.getTime();
   const end = bounds.end.getTime();
   const timestamps = pointTimestamps(series).filter((timestamp) => timestamp >= start && timestamp <= end);
-  let minimumStep = Number.POSITIVE_INFINITY;
+  const steps: number[] = [];
   for (let index = 1; index < timestamps.length; index += 1) {
     const step = timestamps[index]! - timestamps[index - 1]!;
-    if (step > 0) minimumStep = Math.min(minimumStep, step);
+    if (step > 0) steps.push(step);
   }
   const boundsSpan = Math.max(end - start, 1);
-  return Number.isFinite(minimumStep)
-    ? Math.min(Math.max(minimumStep, 1), boundsSpan)
+  steps.sort((left, right) => left - right);
+  // Use an observed upper median rather than the absolute minimum. This keeps
+  // one near-duplicate live observation from lowering a daily chart's floor.
+  const representativeStep = steps[Math.floor(steps.length / 2)];
+  return representativeStep !== undefined
+    ? Math.min(Math.max(representativeStep, 1), boundsSpan)
     : Math.max(Math.min(boundsSpan, FALLBACK_SINGLE_POINT_SPAN_MS), 1);
 }
 
@@ -98,6 +144,47 @@ function clamp(value: number, minimum: number, maximum: number): number {
   return Math.max(minimum, Math.min(maximum, value));
 }
 
+function marketViewportProjection(
+  viewport: CompositeViewportRange,
+  bounds: CompositeViewportRange,
+  series: ResolvedSeries[] | undefined,
+): {
+  scale: Extract<ReturnType<typeof buildCompositeTimeScale>, { kind: "market" }>;
+  startRatio: number;
+  endRatio: number;
+} | null {
+  if (!series?.some((entry) => entry.timeBasis?.kind === "market")) return null;
+  const scale = buildCompositeTimeScale(
+    series,
+    bounds.start.getTime(),
+    bounds.end.getTime(),
+  );
+  if (scale.kind !== "market") return null;
+  const startRatio = projectCompositeTimestamp(scale, viewport.start.getTime())?.ratio;
+  const endRatio = projectCompositeTimestamp(scale, viewport.end.getTime())?.ratio;
+  if (
+    typeof startRatio !== "number"
+    || !Number.isFinite(startRatio)
+    || typeof endRatio !== "number"
+    || !Number.isFinite(endRatio)
+    || startRatio >= endRatio
+  ) {
+    return null;
+  }
+  return { scale, startRatio, endRatio };
+}
+
+function viewportFromMarketRatios(
+  scale: Extract<ReturnType<typeof buildCompositeTimeScale>, { kind: "market" }>,
+  startRatio: number,
+  endRatio: number,
+): CompositeViewportRange {
+  return {
+    start: new Date(unprojectCompositeTimestamp(scale, startRatio)),
+    end: new Date(unprojectCompositeTimestamp(scale, endRatio)),
+  };
+}
+
 export function clampCompositeViewport(
   viewport: CompositeViewportRange,
   bounds: CompositeViewportRange,
@@ -136,6 +223,7 @@ export function zoomCompositeViewport(
   zoomFactor: number,
   anchorRatio: number,
   minimumSpanMs: number,
+  series?: ResolvedSeries[],
 ): CompositeViewportRange {
   const current = clampCompositeViewport(viewport, bounds);
   if (!Number.isFinite(zoomFactor) || zoomFactor <= 0) return current;
@@ -144,17 +232,68 @@ export function zoomCompositeViewport(
   const end = current.end.getTime();
   const boundsSpan = Math.max(bounds.end.getTime() - bounds.start.getTime(), 1);
   const currentSpan = Math.max(end - start, 1);
-  const nextSpan = clamp(
-    currentSpan / zoomFactor,
-    Math.min(Math.max(minimumSpanMs, 1), boundsSpan),
-    boundsSpan,
-  );
   const ratio = clamp(anchorRatio, 0, 1);
-  const anchor = start + currentSpan * ratio;
-  return clampCompositeViewport({
-    start: new Date(anchor - nextSpan * ratio),
-    end: new Date(anchor + nextSpan * (1 - ratio)),
-  }, bounds);
+  const marketProjection = marketViewportProjection(current, bounds, series);
+  const candidate = marketProjection
+    ? (() => {
+        const {
+          scale,
+          startRatio,
+          endRatio,
+        } = marketProjection;
+        const currentMarketSpan = endRatio - startRatio;
+        const totalMarketPositions = Math.max(
+          scale.endPosition - scale.startPosition,
+          Number.EPSILON,
+        );
+        const minimumMarketSpan = clamp(
+          Math.max(minimumSpanMs, 1) / scale.cadenceMs / totalMarketPositions,
+          Number.EPSILON,
+          1,
+        );
+        const nextMarketSpan = clamp(
+          currentMarketSpan / zoomFactor,
+          minimumMarketSpan,
+          1,
+        );
+        const anchor = startRatio + currentMarketSpan * ratio;
+        const candidateStart = clamp(
+          anchor - nextMarketSpan * ratio,
+          0,
+          1 - nextMarketSpan,
+        );
+        return viewportFromMarketRatios(
+          scale,
+          candidateStart,
+          candidateStart + nextMarketSpan,
+        );
+      })()
+    : (() => {
+        const nextSpan = clamp(
+          currentSpan / zoomFactor,
+          Math.min(Math.max(minimumSpanMs, 1), boundsSpan),
+          boundsSpan,
+        );
+        const anchor = start + currentSpan * ratio;
+        return clampCompositeViewport({
+          start: new Date(anchor - nextSpan * ratio),
+          end: new Date(anchor + nextSpan * (1 - ratio)),
+        }, bounds);
+      })();
+  if (!series) return candidate;
+
+  const timestamps = pointTimestamps(series)
+    .filter((timestamp) => timestamp >= bounds.start.getTime() && timestamp <= bounds.end.getTime());
+  if (timestamps.length < 2 || viewportHasTimestamps(timestamps, candidate, 2)) {
+    return candidate;
+  }
+
+  const currentHasObservations = viewportHasTimestamps(timestamps, current, 2);
+  const candidateSpan = candidate.end.getTime() - candidate.start.getTime();
+  // An adaptive response can invalidate an existing viewport. Let zoom-out
+  // keep expanding from that state until observations re-enter the window.
+  if (!currentHasObservations && candidateSpan > currentSpan) return candidate;
+  return current;
 }
 
 /**
@@ -165,15 +304,41 @@ export function panCompositeViewport(
   viewport: CompositeViewportRange,
   bounds: CompositeViewportRange,
   shiftRatio: number,
+  series?: ResolvedSeries[],
 ): CompositeViewportRange {
   const current = clampCompositeViewport(viewport, bounds);
   if (!Number.isFinite(shiftRatio) || shiftRatio === 0) return current;
-  const span = Math.max(current.end.getTime() - current.start.getTime(), 1);
-  const shift = span * shiftRatio;
-  return clampCompositeViewport({
-    start: new Date(current.start.getTime() - shift),
-    end: new Date(current.end.getTime() - shift),
-  }, bounds);
+  const marketProjection = marketViewportProjection(current, bounds, series);
+  const candidate = marketProjection
+    ? (() => {
+        const {
+          scale,
+          startRatio,
+          endRatio,
+        } = marketProjection;
+        const span = endRatio - startRatio;
+        const nextStart = clamp(
+          startRatio - span * shiftRatio,
+          0,
+          1 - span,
+        );
+        return viewportFromMarketRatios(scale, nextStart, nextStart + span);
+      })()
+    : (() => {
+        const span = Math.max(current.end.getTime() - current.start.getTime(), 1);
+        const shift = span * shiftRatio;
+        return clampCompositeViewport({
+          start: new Date(current.start.getTime() - shift),
+          end: new Date(current.end.getTime() - shift),
+        }, bounds);
+      })();
+  if (!series) return candidate;
+
+  const timestamps = pointTimestamps(series)
+    .filter((timestamp) => timestamp >= bounds.start.getTime() && timestamp <= bounds.end.getTime());
+  return timestamps.length < 2 || viewportHasTimestamps(timestamps, candidate, 2)
+    ? candidate
+    : current;
 }
 
 export function resolveCompositeWheelPanRatio(

package/src/components/chart/composite/price-series.ts

@@ -74,5 +74,3 @@ export function pricePointsToResolvedSeries(
     warning: options.warning,
   };
 }
-
-export const resolvedPriceSeries = pricePointsToResolvedSeries;

package/src/components/chart/composite/rasterizer.ts

@@ -97,10 +97,6 @@ function median(values: number[]): number | null {
     : sorted[middle]!;
 }
 
-function observationGaps(points: CompositeProjectedPoint[], pixelWidth: number): number[] {
-  return ratioGaps(points.map((point) => point.xRatio), pixelWidth);
-}
-
 function ratioGaps(ratios: readonly number[], pixelWidth: number): number[] {
   const xs = ratios.map((ratio) => ratio * Math.max(pixelWidth - 1, 0)).sort((left, right) => left - right);
   const positiveGaps: number[] = [];
@@ -111,9 +107,14 @@ function ratioGaps(ratios: readonly number[], pixelWidth: number): number[] {
   return positiveGaps;
 }
 
-function observationWidth(points: CompositeProjectedPoint[], pixelWidth: number, maximum: number): number {
-  const minimumGap = Math.min(...observationGaps(points, pixelWidth));
-  return clamp(Number.isFinite(minimumGap) ? minimumGap * 0.58 : maximum, 2, maximum);
+export function resolveCompositeObservationWidth(
+  points: CompositeProjectedPoint[],
+  extent: number,
+  minimum: number,
+  maximum: number,
+): number {
+  const typicalGap = median(ratioGaps(points.map((point) => point.xRatio), extent));
+  return clamp(typicalGap === null ? maximum : typicalGap * 0.58, minimum, maximum);
 }
 
 function columnObservationWidth(
@@ -171,7 +172,8 @@ export function resolveCompositeOhlcWidth(
   points: CompositeProjectedPoint[],
   pixelWidth: number,
 ): number {
-  return observationWidth(points, pixelWidth, 9);
+  const maximum = clamp(pixelWidth * 0.03, 12, 36);
+  return resolveCompositeObservationWidth(points, pixelWidth, 2, maximum);
 }
 
 function columnPixelGeometry(
@@ -270,7 +272,6 @@ function drawOhlc(
         x + candleWidth / 2,
         Math.max(openY, closeY) + 1,
         candleColor,
-        0.88,
       );
       continue;
     }

package/src/components/chart/composite/renderers.test.ts

@@ -1,5 +1,6 @@
 import { describe, expect, test } from "bun:test";
 import type { ResolvedSeries, TimeSeriesPoint } from "../../../time-series/types";
+import type { CompositePanelScene } from "./types";
 import {
   renderCompositePanelBitmap,
   resolveCompositeColumnWidth,
@@ -7,7 +8,10 @@ import {
 } from "./rasterizer";
 import { buildCompositeColumnLayout } from "./column-layout";
 import { buildCompositeChartScene } from "./scene";
-import { renderCompositePanelText } from "./text-renderer";
+import {
+  renderCompositePanelText,
+  resolveCompositeTextOhlcWidth,
+} from "./text-renderer";
 
 function point(date: string, value: number): TimeSeriesPoint {
   const observedAt = new Date(`${date}T00:00:00.000Z`);
@@ -501,6 +505,64 @@ describe("composite chart renderers", () => {
     expect(new Set(bitmap.pixels)).not.toEqual(new Set([16, 255]));
   });
 
+  test("keeps grid lines from showing through candle bodies", () => {
+    const source = series("price", "candles", [], "left", "#00ff00");
+    const observedAt = new Date("2025-01-01T00:00:00.000Z");
+    const candle = {
+      date: observedAt,
+      observedAt,
+      value: 75,
+      open: 25,
+      high: 90,
+      low: 10,
+      close: 75,
+    };
+    source.points = [candle];
+    const panel: CompositePanelScene = {
+      id: "main",
+      height: 9,
+      scale: "linear",
+      axes: {
+        left: {
+          side: "left",
+          min: 0,
+          max: 100,
+          scale: "linear",
+          unit: "USD",
+          unitGroup: "currency",
+          seriesIds: [source.id],
+        },
+      },
+      series: [{
+        source,
+        points: [{
+          point: candle,
+          timestamp: observedAt.getTime(),
+          value: candle.close,
+          xRatio: 0.5,
+          yRatio: 0.25,
+          breakBefore: true,
+        }],
+      }],
+    };
+    const bitmap = renderCompositePanelBitmap(panel, {
+      pixelWidth: 101,
+      pixelHeight: 101,
+      colors: {
+        background: "#000000",
+        grid: "#ff00ff",
+        crosshair: "#ffffff",
+        text: "#eeeeee",
+        textDim: "#999999",
+        negative: "#ff0000",
+      },
+    });
+    const bodyPixelOffset = (50 * bitmap.width + 47) * 4;
+
+    expect([...bitmap.pixels.slice(bodyPixelOffset, bodyPixelOffset + 4)])
+      .toEqual([0, 255, 0, 255]);
+  });
+
   test("measures column spacing once per series instead of once per observation", () => {
     const denseColumns = {
       ...series("volume", "columns", [], "left"),
@@ -569,7 +631,51 @@ describe("composite chart renderers", () => {
     expect(resolveCompositeOhlcWidth(
       scene.panels[0]!.series[0]!.points,
       2_000,
-    )).toBeLessThan(4);
+    )).toBe(36);
+  });
+
+  test("widens candle bodies as the visible observation spacing grows", () => {
+    const candles = series("price", "candles", [], "left");
+    candles.points = Array.from({ length: 100 }, (_, index) => {
+      const observedAt = new Date(Date.UTC(2025, 0, index + 1));
+      return {
+        date: observedAt,
+        observedAt,
+        value: 10,
+        open: 8,
+        high: 11,
+        low: 7,
+        close: 10,
+      };
+    });
+    const fullScene = buildCompositeChartScene(
+      [candles],
+      [{ id: "main" }],
+      { width: 81, height: 9 },
+    )!;
+    const zoomedScene = buildCompositeChartScene(
+      [candles],
+      [{ id: "main" }],
+      {
+        width: 81,
+        height: 9,
+        viewport: {
+          start: new Date(Date.UTC(2025, 0, 98)),
+          end: new Date(Date.UTC(2025, 0, 100)),
+        },
+      },
+    )!;
+    const fullPoints = fullScene.panels[0]!.series[0]!.points;
+    const zoomedPoints = zoomedScene.panels[0]!.series[0]!.points;
+
+    expect(resolveCompositeOhlcWidth(fullPoints, 800)).toBeLessThan(
+      resolveCompositeOhlcWidth(zoomedPoints, 800),
+    );
+    expect(resolveCompositeTextOhlcWidth(fullPoints, 81)).toBe(1);
+    expect(resolveCompositeTextOhlcWidth(zoomedPoints, 81)).toBe(5);
+
+    const zoomedText = renderCompositePanelText(zoomedScene.panels[0]!, 81, null, null).join("\n");
+    expect(zoomedText).toContain("█████");
   });
 
   test("marks a standalone line observation without extending it through time", () => {

package/src/components/chart/composite/scene.test.ts

@@ -397,6 +397,42 @@ describe("composite chart scene", () => {
     expect(layout.groupByPoint.get(second)).toMatchObject({ index: 1, count: 2 });
   });
 
+  test("uses plotted market data when the legend timeline is empty", () => {
+    const timestamps = [
+      "2025-01-03T15:00:00.000Z",
+      "2025-01-03T16:00:00.000Z",
+      "2025-01-06T14:00:00.000Z",
+    ];
+    const price = series({
+      id: "price",
+      timeBasis: {
+        kind: "market",
+        timeZone: "America/New_York",
+        cadenceMs: 60 * 60 * 1_000,
+      },
+      points: timestamps.map((timestamp, index) => {
+        const date = new Date(timestamp);
+        return { date, observedAt: date, value: 100 + index };
+      }),
+    });
+    const scene = buildCompositeChartScene(
+      [price],
+      [{ id: "main" }],
+      {
+        width: 80,
+        height: 10,
+        viewport: {
+          start: new Date(timestamps[0]!),
+          end: new Date(timestamps.at(-1)!),
+        },
+        timelineSeries: [],
+      },
+    );
+
+    expect(scene?.timeScale).toMatchObject({ kind: "market", anchorSeriesId: "price" });
+    expect(scene?.panels[0]?.series[0]?.points.map(({ xRatio }) => xRatio)).toEqual([0, 0.5, 1]);
+  });
+
   test("retains the authored primary market scale when its plotted series is hidden", () => {
     const anchor = series({
       id: "primary-price",

package/src/components/chart/composite/scene.ts

@@ -27,7 +27,7 @@ function finiteNumber(value: unknown): value is number {
   return typeof value === "number" && Number.isFinite(value);
 }
 
-export function resolveTimeSeriesPointValue(point: TimeSeriesPoint): number | null {
+function resolveTimeSeriesPointValue(point: TimeSeriesPoint): number | null {
   if (finiteNumber(point.value)) return point.value;
   if (finiteNumber(point.close)) return point.close;
   return null;
@@ -423,8 +423,11 @@ export function buildCompositeChartScene(
   const viewport = explicitViewport(options);
   const startTime = viewport?.startTime ?? (firstTime === lastTime ? firstTime - DAY_MS / 2 : firstTime);
   const endTime = viewport?.endTime ?? (firstTime === lastTime ? lastTime + DAY_MS / 2 : lastTime);
+  const timelineSeries = options.timelineSeries?.some((entry) => (
+    entry.timeBasis?.kind === "market" && entry.points.length > 0
+  )) ? options.timelineSeries : dataSeries;
   const timeScale = buildCompositeTimeScale(
-    options.timelineSeries ?? dataSeries,
+    timelineSeries,
     startTime,
     endTime,
   );

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

@@ -1,7 +1,12 @@
-import { compositeAxisTicks, formatCompositeTimeAxisDate } from "./format";
-import { resolveCompositeTimeAxisDate } from "./scene";
+import { compositeAxisTicks } from "./format";
+import type { CompositeViewportRange } from "./interactions";
+import { resolveCompositeObservationWidth } from "./rasterizer";
 import { buildCompositeColumnLayout, type CompositeColumnLayout } from "./column-layout";
 import { projectCompositeValue } from "./scene";
+import {
+  buildCompositeTimeAxisLayout,
+  buildCompositeViewportTimeAxisLayout,
+} from "./time-axis";
 import type {
   CompositeAxisDomain,
   CompositeChartScene,
@@ -159,6 +164,8 @@ function renderOhlc(
   width: number,
   height: number,
 ): void {
+  const candleWidth = resolveCompositeTextOhlcWidth(series.points, width);
+  const halfCandleWidth = Math.floor(candleWidth / 2);
   for (const projected of series.points) {
     const source = projected.point;
     const x = cellPoint(projected, width, height).x;
@@ -173,14 +180,33 @@ function renderOhlc(
     if (closeRow === null || highRow === null || lowRow === null) continue;
     drawLine(rows, x, highRow, x, lowRow, "│");
     if (series.source.style === "candles" && openRow !== null) {
-      drawLine(rows, x, openRow, x, closeRow, "█");
+      for (let row = Math.min(openRow, closeRow); row <= Math.max(openRow, closeRow); row += 1) {
+        for (let offset = -halfCandleWidth; offset <= halfCandleWidth; offset += 1) {
+          setCell(rows, x + offset, row, "█");
+        }
+      }
       continue;
     }
-    if (series.source.style === "ohlc" && openRow !== null) setCell(rows, Math.max(0, x - 1), openRow, "─");
-    setCell(rows, Math.min(width - 1, x + 1), closeRow, "─");
+    const tickWidth = Math.max(1, halfCandleWidth);
+    if (series.source.style === "ohlc" && openRow !== null) {
+      drawLine(rows, Math.max(0, x - tickWidth), openRow, x, openRow, "─");
+    }
+    drawLine(rows, x, closeRow, Math.min(width - 1, x + tickWidth), closeRow, "─");
   }
 }
 
+export function resolveCompositeTextOhlcWidth(
+  points: CompositeProjectedPoint[],
+  width: number,
+): number {
+  const maximum = clamp(Math.floor(width / 16), 3, 7);
+  const resolved = Math.max(
+    1,
+    Math.floor(resolveCompositeObservationWidth(points, width, 1, maximum)),
+  );
+  return resolved % 2 === 0 ? Math.max(1, resolved - 1) : resolved;
+}
+
 export function renderCompositePanelText(
   panel: CompositePanelScene,
   width: number,
@@ -259,27 +285,13 @@ export function renderCompositeAxisText(
   return rows;
 }
 
-function placeLabel(chars: string[], label: string, center: number): void {
-  const start = clamp(Math.round(center - label.length / 2), 0, Math.max(chars.length - label.length, 0));
-  for (let index = 0; index < label.length && start + index < chars.length; index += 1) {
-    chars[start + index] = label[index]!;
-  }
+export function renderCompositeViewportTimeAxis(
+  viewport: CompositeViewportRange,
+  width: number,
+): string {
+  return buildCompositeViewportTimeAxisLayout(viewport, width).text;
 }
 
 export function renderCompositeTimeAxis(scene: CompositeChartScene, width: number): string {
-  const chars = Array(Math.max(1, width)).fill(" ");
-  const formatDate = (ratio: number) => formatCompositeTimeAxisDate(
-    resolveCompositeTimeAxisDate(scene, ratio),
-    scene.startTime,
-    scene.endTime,
-  );
-  const startLabel = formatDate(0);
-  const midpointLabel = formatDate(0.5);
-  const endLabel = formatDate(1);
-  placeLabel(chars, startLabel, 0);
-  if (chars.length >= startLabel.length + midpointLabel.length + endLabel.length + 4) {
-    placeLabel(chars, midpointLabel, (chars.length - 1) / 2);
-  }
-  placeLabel(chars, endLabel, chars.length - 1);
-  return chars.join("");
+  return buildCompositeTimeAxisLayout(scene, width).text;
 }