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 Vue

Vue uses the custom element directly. A property is bound with :kebab-name; an array or an object needs the .prop modifier so that Vue sets the property rather than an attribute. Events are listened to with @eventName; methods are called on the element through a template ref.

import 'smart-industrial/source/modules/smart.intensitygraph.js';

<smart-intensity-graph ref="intensityGraph" :mode="'chart'"
    @cursorChange="onEvent"></smart-intensity-graph>

// methods are called on the element the ref holds
intensityGraph.value.push({}, 42);

// an array or an object is set as a property, not converted to an attribute: use .prop
<smart-intensity-graph :data.prop="data"></smart-intensity-graph>

Properties

Binding	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.
`:history-length` historyLength	number 500	Sets or retrieves the number of columns kept in chart mode.
`:x-min` xMin	number?	Sets or retrieves the x of the first column in graph mode. Null counts columns from 0.
`:x-max` xMax	number?	Sets or retrieves the x at the end of the last column in graph mode. Null counts columns from 0.
`:y-min` yMin	number?	Sets or retrieves the y of the first row. Null counts rows from 0.
`:y-max` yMax	number?	Sets or retrieves the y at the end of the last row. Null counts rows from 0.
`:z-min` 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.
`:z-max` 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.
`:x-label` xLabel	string	Sets or retrieves the name of the x axis.
`:x-unit` xUnit	string	Sets or retrieves the unit of the x axis.
`:y-label` yLabel	string	Sets or retrieves the name of the y axis.
`:y-unit` yUnit	string	Sets or retrieves the unit of the y axis.
`:z-label` zLabel	string	Sets or retrieves the name of the z axis, shown above the colour ramp.
`:z-unit` zUnit	string	Sets or retrieves the unit of z, used in the ramp and the readouts.
`:x-format` 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.
`:color-map` colorMap	IntensityGraphColorMap viridis	Sets or retrieves the named colour map.
`:color-stops` 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.
`:over-range-color` 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.
`:under-range-color` 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.
`:show-ramp` showRamp	boolean true	Shows the colour ramp with its z ticks at the right of the plot.
`:show-grid` showGrid	boolean false	Shows grid lines at the ticks of the axes.
`:show-cursor-legend` 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.
`:precision-digits` 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: 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`

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