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.

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

Usage in JavaScript

The component is a custom element: its properties are set on the element, its events are DOM CustomEvents with the data in event.detail, and its methods are called on the element. The properties can also be written as attributes in kebab case (precision-digits="1").

const intensityGraph = document.querySelector('smart-intensity-graph');

intensityGraph.mode = 'chart';
intensityGraph.addEventListener('cursorChange', (event) => console.log(event.detail));
intensityGraph.push({}, 42);

Properties

Property	Type, default	Description
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	'graph' | 'chart' 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. graph chart
historyLength	number 500	Sets or retrieves the number of columns kept in chart mode.
xMin	number?	Sets or retrieves the x of the first column in graph mode. Null counts columns from 0.
xMax	number?	Sets or retrieves the x at the end of the last column in graph mode. Null counts columns from 0.
yMin	number?	Sets or retrieves the y of the first row. Null counts rows from 0.
yMax	number?	Sets or retrieves the y at the end of the last row. Null counts rows from 0.
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	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	string	Sets or retrieves the name of the x axis.
xUnit	string	Sets or retrieves the unit of the x axis.
yLabel	string	Sets or retrieves the name of the y axis.
yUnit	string	Sets or retrieves the unit of the y axis.
zLabel	string	Sets or retrieves the name of the z axis, shown above the colour ramp.
zUnit	string	Sets or retrieves the unit of z, used in the ramp and the readouts.
xFormat	'si' | 'plain' | 'clock' 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. si plain clock
colorMap	'viridis' | 'inferno' | 'thermal' | 'grey' | 'jet' | 'blues' viridis	Sets or retrieves the named colour map. viridis inferno thermal grey jet blues
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	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	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	boolean false	Smooths between cells instead of drawing each as a block.
showRamp	boolean true	Shows the colour ramp with its z ticks at the right of the plot.
showGrid	boolean false	Shows grid lines at the ticks of the axes.
showCursorLegend	boolean true	Shows the cursor legend under the plot.
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	boolean true	Enables placing and dragging cursors with the pointer and the keyboard.
label	string	Sets or retrieves the title shown above the plot and used in the accessible name.
precisionDigits	number 4	Sets or retrieves the number of significant digits in readouts and axis labels.

Methods

Method	Description
push(column, x?)	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()	Empties the chart.
cellAt(x, y) returns object	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() returns 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.

Event	Description and detail
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.
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

'viridis' | 'inferno' | 'thermal' | 'grey' | 'jet' | '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