Test and measurement

Intensity Graph `<smart-intensity-graph>`

IntensityGraph displays a matrix as colour on an x and a y axis, with a colour ramp that says what the colours mean and cursors that read the cell under them: the display a spectrogram, a thermal image, a die map or a sensor array ends in.

JavaScript TypeScript Angular React Vue Blazor

<smart-intensity-graph> · 28 properties, 4 methods, 2 events · source/modules/smart.intensitygraph.js

Usage in Blazor

The Razor component is <IntensityGraph> in Smart.Blazor.Industrial: every property is a parameter in PascalCase, every event an EventCallback<Event> named On<Event> whose ev["Detail"] is the typed detail class, and the methods are called on the @ref. String choices are enums. In a Blazor Web App (.NET 8 and later) the page needs an interactive render mode, for example @rendermode InteractiveServer; a statically rendered component stays empty.

@using Smart.Blazor.Industrial
@* .NET 8 and later: an interactive render mode, on the page or for the whole app *@
@rendermode InteractiveServer

<IntensityGraph @ref="intensityGraph" Mode="chart"
    OnCursorChange="OnCursorChange" />

@code {
    IntensityGraph intensityGraph;

    void OnCursorChange(Event ev)
    {
        IntensityGraphCursorChangeEventDetail detail = ev["Detail"];
    }

    // void Push(object column)
    void Call() => intensityGraph.Push(new { });
}

Properties

Parameter	Type, default	Description
`Data` data	IEnumerable<object>	Sets or retrieves the matrix in graph mode: an array of rows, each an array or typed array of z values. data[row][column]; rows run along y from the bottom, columns along x. A cell that holds no number - null, undefined, an empty string, NaN - is transparent, and the cursors and cellAt read it as missing (z NaN), never as 0.
`Mode` mode	IntensityGraphMode graph	Sets or retrieves the mode: graph shows the matrix as assigned; chart scrolls the columns that arrive through push, keeping the newest historyLength of them.
`HistoryLength` historyLength	int 500	Sets or retrieves the number of columns kept in chart mode.
`XMin` xMin	double	Sets or retrieves the x of the first column in graph mode. Null counts columns from 0.
`XMax` xMax	double	Sets or retrieves the x at the end of the last column in graph mode. Null counts columns from 0.
`YMin` yMin	double	Sets or retrieves the y of the first row. Null counts rows from 0.
`YMax` yMax	double	Sets or retrieves the y at the end of the last row. Null counts rows from 0.
`ZMin` zMin	double	Sets or retrieves the z at the bottom of the colour ramp. Null follows the data. In chart mode the range follows the columns on screen, so it moves when the history scrolls. A value below a fixed zMin takes the bottom colour, or underRangeColor when that is set.
`ZMax` zMax	double	Sets or retrieves the z at the top of the colour ramp. Null follows the data. A value above a fixed zMax takes the top colour, or overRangeColor when that is set.
`XLabel` xLabel	string	Sets or retrieves the name of the x axis.
`XUnit` xUnit	string	Sets or retrieves the unit of the x axis.
`YLabel` yLabel	string	Sets or retrieves the name of the y axis.
`YUnit` yUnit	string	Sets or retrieves the unit of the y axis.
`ZLabel` zLabel	string	Sets or retrieves the name of the z axis, shown above the colour ramp.
`ZUnit` zUnit	string	Sets or retrieves the unit of z, used in the ramp and the readouts.
`XFormat` xFormat	IntensityGraphXFormat si	Sets or retrieves how x values are written: si in engineering notation with the x unit, plain as a number, clock as a time of day for x values in epoch milliseconds.
`ColorMap` colorMap	IntensityGraphColorMap viridis	Sets or retrieves the named colour map.
`ColorStops` colorStops	IEnumerable<object>	Sets or retrieves the application's own colour stops, which override the named map: an array of [position, colour] pairs with positions from 0 to 1. Repeating a colour at two positions makes a band, for a pass/fail map.
`OverRangeColor` overRangeColor	string	Sets or retrieves the colour of a cell above zMax. Empty draws it in the top colour of the ramp, which reads as "at the limit"; a colour of its own says "beyond it", and a cap of that colour is drawn above the ramp as its key.
`UnderRangeColor` underRangeColor	string	Sets or retrieves the colour of a cell below zMin. Empty draws it in the bottom colour of the ramp; a colour of its own says the value is below the range, with a cap of that colour under the ramp as its key.
`Interpolate` interpolate	bool false	Smooths between cells instead of drawing each as a block.
`ShowRamp` showRamp	bool true	Shows the colour ramp with its z ticks at the right of the plot.
`ShowGrid` showGrid	bool false	Shows grid lines at the ticks of the axes.
`ShowCursorLegend` showCursorLegend	bool true	Shows the cursor legend under the plot.
`Cursors` cursors	IEnumerable<object>	Sets or retrieves the cursors. Each is an object with id, label, x, y, color and visible. A cursor reads the cell under it into the legend; it is dragged on the plot and moved a cell at a time with the arrow keys.
`Interactive` interactive	bool true	Enables placing and dragging cursors with the pointer and the keyboard.
`Label` label	string	Sets or retrieves the title shown above the plot and used in the accessible name.
`PrecisionDigits` precisionDigits	int 4	Sets or retrieves the number of significant digits in readouts and axis labels.

Methods

Method	Description
`void Push(object column)`	Appends a column in chart mode: one z per row, newest at the right. The oldest column leaves once historyLength is reached. A missing column (null) is a column of missing cells, and the automatic z range follows the columns held, also once the history is full. `column` any The z values, one per row, as an array or a typed array. `x` number The x of the column; unset, columns count from 0.
`void Clear()`	Empties the chart.
`Task<object> CellAt(int x, int y)`	Returns the cell at a point as { z, row, column }, or null outside the matrix. z is NaN for a cell that holds no number. `x` number The x. `y` number The y.
`Task<string> Describe()`	Returns a sentence describing what the graph shows, as used in its accessible name: the shape, the z range and where the highest value is.

Events

Every event is an EventCallback<Event>; Event is a dictionary and ev["Detail"] converts to the detail class named under the event.

Event	Description and detail
`OnCursorChange` cursorChange IntensityGraphCursorChangeEventDetail	This event is triggered when a cursor is moved by the operator, with the pointer or the keyboard. `Id` string The cursor. `X` double Its x. `Y` double Its y. `Z` double The value of the cell under it.
`OnCellClick` cellClick IntensityGraphCellClickEventDetail	This event is triggered when the plot is clicked without dragging. `X` double The x under the pointer. `Y` double The y under the pointer. `Z` double The value of the cell, or NaN outside the matrix. `Row` int The row, or -1. `Column` int The column, or -1.

Types

`enum IntensityGraphMode`

IntensityGraphMode.Graph "graph" IntensityGraphMode.Chart "chart"

`enum IntensityGraphXFormat`

IntensityGraphXFormat.Si "si" IntensityGraphXFormat.Plain "plain" IntensityGraphXFormat.Clock "clock"

`enum IntensityGraphColorMap`

IntensityGraphColorMap.Viridis "viridis" IntensityGraphColorMap.Inferno "inferno" IntensityGraphColorMap.Thermal "thermal" IntensityGraphColorMap.Grey "grey" IntensityGraphColorMap.Jet "jet" IntensityGraphColorMap.Blues "blues"

CSS variables

The component declares 4 CSS variables; the CSS page shows how to set them.

--smart-intensity-height --smart-intensity-plot-background --smart-intensity-grid-color --smart-intensity-axis-color