View source for Implementation:ArroyoSystems Arroyo Time Series Graph

{{PageInfo|type=Implementation|title=ArroyoSystems_Arroyo_Time_Series_Graph}}
{{PageInfo|type=Implementation|title=ArroyoSystems_Arroyo_Time_Series_Graph}}
{| class="wikitable" style="float:right; margin-left:1em; width:300px;"
|-
! Knowledge Sources
|
* [https://github.com/ArroyoSystems/arroyo ArroyoSystems_Arroyo]
|-
! Domains
| [[domain::WebUI]], [[domain::React]], [[domain::DataVisualization]]
|-
! Last Updated
| [[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 <code>{x: Date, y: number}</code> 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 <code>now - timeWindowMs</code> to <code>now</code>.
* Generates tooltips showing timestamp and rounded value.
* Updates on both mount and prop changes via <code>componentDidMount</code> and <code>componentDidUpdate</code>.
* 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:''' [https://github.com/ArroyoSystems/arroyo ArroyoSystems_Arroyo]
* '''File:''' [https://github.com/ArroyoSystems/arroyo/blob/main/webui/src/components/TimeSeriesGraph.tsx webui/src/components/TimeSeriesGraph.tsx]

=== Signature ===
<syntaxhighlight lang="typescript">
interface TimeSeries {
  data?: Array<Array<{ x: Date; y: number }>>;
  timeWindowMs: number;
}

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

=== Import ===
<syntaxhighlight lang="typescript">
import { TimeSeriesGraph } from './TimeSeriesGraph';
</syntaxhighlight>

== I/O Contract ==

=== Inputs ===
{| class="wikitable"
|-
! 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 ===
{| class="wikitable"
|-
! Name !! Type !! Description
|-
| Chart || React element || A div containing an SVG line chart rendered by MetricsGraphics.js
|}

== Usage Examples ==

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

== Related Pages ==

* [[requires_env::Environment:ArroyoSystems_Arroyo_Webui_Runtime]]
* [[ArroyoSystems_Arroyo_Operator_Detail]]

[[Category:Implementations]]

[[Category:Implementations]]