Test and measurement

Bode Plot `<smart-bode-plot>`

BodePlot displays magnitude and phase against a logarithmic frequency axis, one band above the other.

JavaScript TypeScript Angular React Vue Blazor

<smart-bode-plot> · 18 properties, 5 methods, 2 events · source/modules/smart.bodeplot.js

Usage in Blazor

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

<BodePlot @ref="bodePlot" ShowMargins="true"
    OnCursorChange="OnCursorChange" />

@code {
    BodePlot bodePlot;

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

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

Properties

Parameter	Type, default	Description
`Plots` plots	IEnumerable<object>	Sets or retrieves the responses. Each is an object with id, label, color, lineWidth, visible and either frequencies, magnitude and phase (measured points, magnitude in dB or linear per magnitudeUnit, phase in degrees) or transferFunction ({ numerator, denominator } as polynomial coefficients in s, highest power first).
`FrequencyMin` frequencyMin	double	Sets or retrieves the start of the frequency axis. With frequencyMax, fixes the axis and the range a transfer function is evaluated over; null follows the measured points.
`FrequencyMax` frequencyMax	double	Sets or retrieves the end of the frequency axis.
`FrequencyUnit` frequencyUnit	BodePlotFrequencyUnit Hz	Sets or retrieves the unit of the frequency axis. A transfer function is evaluated at s = jω with ω in rad/s either way.
`MagnitudeUnit` magnitudeUnit	BodePlotMagnitudeUnit dB	Sets or retrieves how measured magnitude is given. Linear values are converted to dB; the plot always shows dB.
`MagnitudeMin` magnitudeMin	double	Sets or retrieves the bottom of the magnitude band in dB. Null follows the data.
`MagnitudeMax` magnitudeMax	double	Sets or retrieves the top of the magnitude band in dB. Null follows the data.
`PhaseMin` phaseMin	double	Sets or retrieves the bottom of the phase band in degrees. Null follows the data.
`PhaseMax` phaseMax	double	Sets or retrieves the top of the phase band in degrees. Null follows the data.
`ShowMargins` showMargins	bool false	Marks the gain and phase margins of the first visible response on both bands and writes them out under the plot. A margin at or below zero is marked as failing. The phase margin is measured to the nearest -180° + k·360° line, so it lies between -180° and 180° and is negative for an unstable loop. With several crossings the smallest phase margin and the gain margin closest to 0 dB are shown; margins() lists every crossing.
`ShowPhase` showPhase	bool true	Shows the phase band under the magnitude band.
`ShowGrid` showGrid	bool true	Shows the grid lines at the decades and the ticks.
`ShowLegend` showLegend	bool true	Shows the legend, where a response is hidden and shown.
`Cursor` cursor	double	Sets or retrieves the frequency of the cursor, which reads every response. Null hides it. The cursor is placed by clicking the plot, moved with the arrow keys (Shift for larger steps, Home and End for the ends) and cleared with Escape.
`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 frequencies.
`LineWidth` lineWidth	double 1.6	Sets or retrieves the line width of the responses, in pixels. A response can carry its own.

Methods

Method	Description
`Task<object> ValueAt(string id, int frequency)`	Returns a response at a frequency as { magnitude, phase } in dB and degrees, interpolated on the log axis, or NaN outside the record. `id` string The response. `frequency` number The frequency.
`Task<object> Margins()`	Returns the stability margins of a response as { gainMargin, gainMarginFrequency, phaseMargin, phaseMarginFrequency, gainMargins, phaseMargins }, NaN where there is no crossing. The phase margin at a gain crossover is measured to the nearest -180° + k·360° line (between -180° and 180°, negative when the loop is unstable there); the gain margin is read at every frequency where the phase crosses -180° + k·360°. With several crossings, phaseMargin is the smallest phase margin and gainMargin the one closest to 0 dB; gainMargins and phaseMargins list every crossing as { margin, frequency } in ascending frequency. `id` string The response; the first visible one when omitted.
`Task<object> Evaluate(object transferFunction, int frequency)`	Evaluates a transfer function at a frequency and returns { magnitude, phase } in dB and degrees. The phase is the continuous phase of the response, anchored at its low-frequency asymptote (-90° for each integrator, +90° for each differentiator, -180° more for a negative gain), not an angle folded into -180°..180°. `transferFunction` object { numerator, denominator } as coefficients in s, highest power first. `frequency` number In the element's frequency unit.
`void TogglePlot(string id)`	Shows or hides a response. `id` string The response. `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, with the margins when they are shown.

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 BodePlotCursorChangeEventDetail	This event is triggered when the cursor is placed or moved by the operator. `Frequency` double The cursor frequency.
`OnPlotVisibilityChange` plotVisibilityChange BodePlotPlotVisibilityChangeEventDetail	This event is triggered when a response is hidden or shown from the legend. `Id` string The response. `Visible` bool Whether it is now shown.

Types

`enum BodePlotFrequencyUnit`

BodePlotFrequencyUnit.Hz "Hz" BodePlotFrequencyUnit.RadPers "rad/s"

`enum BodePlotMagnitudeUnit`

BodePlotMagnitudeUnit.DB "dB" BodePlotMagnitudeUnit.Linear "linear"

CSS variables

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

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