Implementation:ArroyoSystems Arroyo Time Series Graph

Knowledge Sources	ArroyoSystems_Arroyo
Domains	WebUI, React, DataVisualization
Last Updated	2026-02-08 08:00 GMT

Overview

A class-based React component that renders multi-series time-series line charts using MetricsGraphics.js and D3 for operator metric visualization.

Description

TimeSeriesGraph is a React class component that wraps MetricsGraphics.js (MG.LineChart) to render time-series data. It accepts an array of series (each being an array of {x: Date, y: number} points) and a configurable time window. Key features:

• Auto-calculates Y-axis bounds with 25% padding above max and 25% below min.
• Uses D3 schemeSet2 color palette with fallback to white for overflow series.
• Configures X-axis to show the time window from now - timeWindowMs to now.
• Generates tooltips showing timestamp and rounded value.
• Updates on both mount and prop changes via componentDidMount and componentDidUpdate.
• Uses a random ID to support multiple instances on the same page.

Usage

Used within OperatorDetail to display events received and events sent time-series charts.

Code Reference

Source Location

• Repository: ArroyoSystems_Arroyo
• File: webui/src/components/TimeSeriesGraph.tsx

Signature

interface TimeSeries {
  data?: Array<Array<{ x: Date; y: number }>>;
  timeWindowMs: number;
}

export class TimeSeriesGraph extends React.Component<TimeSeries, {}>;

Import

import { TimeSeriesGraph } from './TimeSeriesGraph';

I/O Contract

Inputs

Name	Type	Required	Description
data	Array<Array<{x: Date, y: number}>>	No	Multi-series time-series data points
timeWindowMs	number	Yes	Time window in milliseconds for the X-axis range

Outputs

Name	Type	Description
Chart	React element	A div containing an SVG line chart rendered by MetricsGraphics.js

Usage Examples

<TimeSeriesGraph data={transformMetricGroup(group)} timeWindowMs={5 * 60 * 1000} />

Related Pages

• Environment:ArroyoSystems_Arroyo_Webui_Runtime
• ArroyoSystems_Arroyo_Operator_Detail