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 Angular

The Angular wrapper is IntensityGraphComponent from IntensityGraphModule: every property is an input, every event an output named on<Event>, and the methods are called on the component reference from @ViewChild. A method that returns a value returns a Promise of it, resolved once the component has rendered; its ...Sync() twin returns the value at once, or null before the component has rendered. Unknown bindings are rejected at compile time.

import { IntensityGraphModule, IntensityGraphComponent } from 'smart-industrial/angular/intensitygraph';

<smart-intensity-graph #intensityGraph [mode]="'chart'"
    (onCursorChange)="onCursorChange($event)"></smart-intensity-graph>

@ViewChild('intensityGraph', { read: IntensityGraphComponent }) intensityGraph!: IntensityGraphComponent;
// methods are called on the component reference
this.intensityGraph.push({}, 42);

Properties

Input	Type, default	Description
`[data]` data	array	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	number 500	Sets or retrieves the number of columns kept in chart mode.
`[xMin]` xMin	number?	Sets or retrieves the x of the first column in graph mode. Null counts columns from 0.
`[xMax]` xMax	number?	Sets or retrieves the x at the end of the last column in graph mode. Null counts columns from 0.
`[yMin]` yMin	number?	Sets or retrieves the y of the first row. Null counts rows from 0.
`[yMax]` yMax	number?	Sets or retrieves the y at the end of the last row. Null counts rows from 0.
`[zMin]` zMin	number?	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	number?	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	array	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	boolean false	Smooths between cells instead of drawing each as a block.
`[showRamp]` showRamp	boolean true	Shows the colour ramp with its z ticks at the right of the plot.
`[showGrid]` showGrid	boolean false	Shows grid lines at the ticks of the axes.
`[showCursorLegend]` showCursorLegend	boolean true	Shows the cursor legend under the plot.
`[cursors]` cursors	array	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	boolean 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	number 4	Sets or retrieves the number of significant digits in readouts and axis labels.

Methods

Method	Description
`push(column: any, x?: number): void`	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.
`clear(): void`	Empties the chart.
`cellAt(x: any, y: any): Promise<any>` and `cellAtSync(x: any, y: any): any`	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.
`describe(): Promise<any>` and `describeSync(): string`	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

The data of an event is in event.detail. While interactive is true, the intensity graph moves a cursor in cursors and then raises cursorChange. cellClick reports the cell under a click.

Output	Description and detail
`(onCursorChange)` cursorChange	This event is triggered when a cursor is moved by the operator, with the pointer or the keyboard. `id` string The cursor. `x` number Its x. `y` number Its y. `z` number The value of the cell under it.
`(onCellClick)` cellClick	This event is triggered when the plot is clicked without dragging. `x` number The x under the pointer. `y` number The y under the pointer. `z` number The value of the cell, or NaN outside the matrix. `row` number The row, or -1. `column` number The column, or -1.

Types

`type IntensityGraphMode`

'graph' | 'chart'

`type IntensityGraphXFormat`

'si' | 'plain' | 'clock'

`type IntensityGraphColorMap`

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