Test and measurement

Polar Plot `<smart-polar-plot>`

PolarPlot displays data on a circular grid: a radius against an angle, or an x and a y about a centre.

JavaScript TypeScript Angular React Vue Blazor

<smart-polar-plot> · 15 properties, 4 methods, 2 events · source/modules/smart.polarplot.js

Usage in Blazor

The Razor component is <PolarPlot> 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

<PolarPlot @ref="polarPlot" AngleOrigin="top"
    OnCursorChange="OnCursorChange" />

@code {
    PolarPlot polarPlot;

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

    // Task<int> ValueAt(string id, int angle)
    void Call() => polarPlot.ValueAt("value", 42);
}

Properties

Parameter	Type, default	Description
`Plots` plots	IEnumerable<object>	Sets or retrieves the plots. Each is an object with id, label, color, lineWidth, visible, style (line or points), closed (joins the last point to the first) and either angles and radii or x and y about the centre. A point without a reading - null, NaN or an infinite value on either axis - is a gap in the trace: not drawn, not read by the cursor, not in the radius range, and counted in the readout and the accessible name ("no reading at 2 of 360 points"), with one console warning. An item that is not an object is skipped, with one console warning.
`Markers` markers	IEnumerable<object>	Sets or retrieves the markers: named points, each an object with label, color and either angle and radius or x and y. They are drawn on the plot and listed under it. An item that is not an object is skipped, with one console warning.
`AngleUnit` angleUnit	PolarPlotAngleUnit deg	Sets or retrieves the unit of angles given and shown.
`AngleOrigin` angleOrigin	PolarPlotAngleOrigin right	Sets or retrieves where angle zero points.
`AngleDirection` angleDirection	PolarPlotAngleDirection counterclockwise	Sets or retrieves the direction angles increase in.
`RadiusMin` radiusMin	double	Sets or retrieves the radius at the centre. Null uses zero, or the smallest negative value in the data. A value that is not a finite number is ignored; set above radiusMax, the two are swapped. Each is said once in a console warning.
`RadiusMax` radiusMax	double	Sets or retrieves the radius at the rim. Null follows the data, rounded up to a nice number. A value that is not above the centre (radiusMin equal to radiusMax, for one) leaves no radius axis, so it is ignored and the rim follows the data; this, a value that is not a finite number, and limits set the wrong way round (swapped) are each said once in a console warning.
`RadiusUnit` radiusUnit	string	Sets or retrieves the unit of the radius, used in the ring labels and the readouts.
`ShowGrid` showGrid	bool true	Shows the rings and the spokes.
`ShowLegend` showLegend	bool true	Shows the legend, where a plot is hidden and shown.
`Cursor` cursor	double	Sets or retrieves the angle of the cursor, which reads every plot. Null hides it. The cursor is placed by clicking the plot and moved with the arrow keys; the arrows rotate it on screen, the same in a right-to-left layout. Where a plot has nothing drawn at the cursor's angle - beyond the ends of an open trace, or across a gap - its reading is "--".
`Interactive` interactive	bool true	Enables placing and moving the cursor 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 radii. Held to 1 to 21; a value outside that, or not a number (4 is then used), is said once in a console warning.
`LineWidth` lineWidth	double 1.6	Sets or retrieves the line width of the plots, in pixels. A plot can carry its own.

Methods

Method	Description
`Task<int> ValueAt(string id, int angle)`	Returns a plot's radius at an angle, interpolated between the neighbouring points that span it - from the last point back to the first only when the plot is closed, as drawn. Returns NaN where the plot has nothing drawn at that angle: beyond the ends of an open trace, across a gap, or for an unknown plot. `id` string The plot. `angle` number In the element's angle unit.
`void TogglePlot(string id)`	Shows or hides a plot. `id` string The plot. `visible` boolean Shown when true, hidden when false; toggled when omitted.
`Task<string> Describe()`	Returns a sentence describing what the plot shows, as used in its accessible name: the number of plots, the radius range, where the largest radius is, and how many points of a plot have no reading.
`void Invalidate()`	Redraws the plot on the next animation frame, so that many changes between two frames cost one draw.

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 PolarPlotCursorChangeEventDetail	This event is triggered when the cursor is placed or moved by the operator. `Angle` double The cursor angle, in the element's angle unit.
`OnPlotVisibilityChange` plotVisibilityChange PolarPlotPlotVisibilityChangeEventDetail	This event is triggered when a plot is hidden or shown from the legend. `Id` string The plot. `Visible` bool Whether it is now shown.

Types

`enum PolarPlotAngleUnit`

PolarPlotAngleUnit.Deg "deg" PolarPlotAngleUnit.Rad "rad"

`enum PolarPlotAngleOrigin`

PolarPlotAngleOrigin.Right "right" PolarPlotAngleOrigin.Top "top"

`enum PolarPlotAngleDirection`

PolarPlotAngleDirection.Counterclockwise "counterclockwise" PolarPlotAngleDirection.Clockwise "clockwise"

CSS variables

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

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