OdinGraph

A Data Graphing component based off the Plotly graphing library. This component will allow you to produce interactive graphs to display the data from an Endpoint.

Currently, this component can produce both line graphs, and heatmaps, as required. Data can be provided as a 1D or 2D array of values, or as the full Plotly data structure that specifies axis, styling, and other features. Please refer to the Plotly documentation for more details.

Because this component uses the Plotly library, it allows a user to manipulate the graph if required. The graphs produced can be zoomed and panned, and if multiple datasets are present, individual datasets can be shown or hidden if required. Graphs can also be exported as PNG images.

Should more complicated options for rendering the data be required, the OdinGraph component can be treated the same as the original Plotly graph, passing the data, layout, style and such to the OdinGraph component, which will then pass these down to its internal Plotly Graph component. This allows for very specific styling, additional graph and data types, and more. Please see the Plotly documentation for details on how to use these options.

Note

The default behaviour of the graph is to treat data as 1 dimensional line graphs. If a 2D set of data is passed to the component without specifying what type of graph is desired, it will default to displaying each array within the array as a separate series of 1D data.

Note

Data can also be passed as an array of data arrays that are paired with a value, specifying which axis they are mapped against. This allows various series of 1D data to be mapped against an axis on either side of the graph.

Important

The Plotly libraries are not installed by default by Odin-React. If this component is required, ensure the plotly and react-plotly packages are installed via npm.

Properties

import { OdinGraph } from 'odin-react';
import type { GraphData, Axis } from 'odin-react';

Interface: GraphData

Name	Type	Description
data	number[]	Required A one dimensional array of values for this data series
axis	number	The axis this data needs to be mapped against. the number relates to the position of the Axis within the array of Axis. By default, data is assigned to the first axis.

Interface: Axis

Name	Type	Description
side	"left" | "right"	Which side of the graph the Axis will be shown.
range	[number, number]	The minimum and maximum value of the Axis. If data mapped to it exceeds these limits, it will go off the graph.
invert	boolean	If true, the Axis values will be inverted, so it's lowest value is at the top.
title	string	The title to display on the Axis.
visible	boolean	If false, the axis will not be displayed.

Component Properties

Important

The properties listed below are specifically for the OdinGraph component. It can also accept any of the properties you would pass to a normal Plotly graph. Any not listed below will be passed straight to the underlying Graph component, allowing additional configuration if required.

Name	Type	Default	Description
data	Plotly.Data[] | number[] | number[][] | GraphData[]		Required The Data to display on the graph. One Dimensional data will always be displayed as a single line graph. Two Dimensional data will default to multiple series on a line graph, but can also be used to represent Heatmaps
type	"scatter" | "line" | "heatmap" | "contour"	"scattter"	Defines the type of graph. "scatter" and "line" produce a line series graph, "heatmap" and "contour" are two dimensional data displays
axis	Axis[]	[]	The axis to display on the graph. See the above interface for details. Only used if the type of data is GraphData[]. If data is GraphData[] and axis is not specified, the graph will default to having one axis on the left, and one on the right, and will autorange to the minimum and maximum of the data.
title	string		The title of the graph, if provided.
series_names	string[]		If provided, will label each series within a multi-series line graph with the provided names, assuming the data is ordered the same way this array is ordered.
colorscale	Plotly.ColorScale	"Portland"	The colours to use for the two dimensional graph types.
layout	Plotly.Layout	{}	The layout information for the Graph, which defines things like axis positions. Defaults exist for the line series and the two dimensional graph types, but can then be overwritten by this property if desired.
style	React.CSSProperties	{height: '100%', width: '100%'}	used to style the Div into which the Plotly graph is rendered

Examples

const data_1d_multiple = [Array.from(Array(5), () => Math.round(Math.random()*10)),
                              Array.from(Array(5), () => Math.round(Math.random()*10)),
                              Array.from(Array(5), () => Math.round(Math.random()*10)),
                              Array.from(Array(5), () => Math.round(Math.random()*10)),
                              Array.from(Array(5), () => Math.round(Math.random()*10))];
...
<OdinGraph title="Multiple Datasets" prop_data={data_1d_multiple}
                       series_names={["Test 1", "Test 2", "Test Again", "Low", "High"]}/>

---

const data_1d_multiple = [Array.from(Array(5), () => Math.round(Math.random()*10)),
                              Array.from(Array(5), () => Math.round(Math.random()*10)),
                              Array.from(Array(5), () => Math.round(Math.random()*10)),
                              Array.from(Array(5), () => Math.round(Math.random()*10)),
                              Array.from(Array(5), () => Math.round(Math.random()*10))];
...
<OdinGraph title="Heatmap" prop_data={data_1d_multiple} type="heatmap" />

var mid_data: GraphData[] = [
    {data: Array.from(Array(10), () => Math.round(Math.random()*10)), axis: 1},
    {data: Array.from(Array(10), () => Math.round(Math.random()*10)), axis: 2}
]

const axis_def: Axis[] = [
    {side: "left", title: "Voltage", invert: true},
    {side: "right", title: "Current", range: [0, 15]}
]
...
<OdinGraph data={mid_data} axis={axis_def} series_names={["Voltage, "Current"]}/>