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 TypeScript
The package ships its definitions: IntensityGraph is the element type and IntensityGraphProperties the properties, both exported from smart-industrial/source/typescript/smart.industrial. document.querySelector('smart-intensity-graph') is typed as IntensityGraph.
import { IntensityGraph, IntensityGraphProperties } from 'smart-industrial/source/typescript/smart.industrial';
const intensityGraph = document.querySelector('smart-intensity-graph') as IntensityGraph;
intensityGraph.mode = 'chart';
intensityGraph.addEventListener('cursorChange', (event: CustomEvent) => 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 | IntensityGraphMode | 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 | number | 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 | IntensityGraphXFormat | 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 | IntensityGraphColorMap | Sets or retrieves the named colour map. |
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 | Smooths between cells instead of drawing each as a block. |
showRamp | boolean | Shows the colour ramp with its z ticks at the right of the plot. |
showGrid | boolean | Shows grid lines at the ticks of the axes. |
showCursorLegend | boolean | 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 | 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 | 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: number, y: number): 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(): 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