Interactive Timeline Layout Controller

Build a small utility that renders and manages an interactive timeline chart with layout and interaction controls.

Capabilities

Initial render

• Renders the timeline into a provided container with title, axis labels, legend, and an annotation highlighting the most recent data point. @test
• The plot resizes responsively with its container while keeping axes and the annotation aligned. @test

Layout and interaction updates

• Applying a visible window {start, end} updates the axis range and overlays a shaded region without rebuilding the plot or losing existing layout details. @test
• Switching between "presentation" (static) and "explore" (interactive with a download control) changes interaction behavior/configuration while preserving the current layout window and annotations. @test

Implementation

@generates

API

/**
 * Renders the timeline.
 */
export function createTimeline(container, points, options);
/**
 * Updates the visible window and alert annotation without recreating the chart.
 */
export function updateTimeline(container, windowRange, alertMessage);
/**
 * Switches interaction profile while keeping current layout state.
 */
export function setInteractionProfile(container, profile);

Dependencies { .dependencies }

plotly.js { .dependency }

Interactive chart rendering and configuration.