Polar Plot

angular/app.component.html

<div class="angular-root" theme="industrial">
    <div class="smart-demo-container">

        <section id="overview">
            <h2>Smart.PolarPlot displays data on a circular grid: a radius against an angle, or an x and a y about a centre. It is the orbit a pair of proximity probes draws, the pattern an antenna radiates and the round-out a dial indicator records.</h2>
            <p>
                Angles start where the application says, to the right or at the top, and run counterclockwise or clockwise, because a compass and a mathematician disagree. The radius axis can start below zero, so a pattern in dBi reads its floor at the centre. Markers name a point, such as the keyphasor pulse on an orbit, and a cursor at an angle reads every plot's radius there.
            </p>
        </section>

        <section>
            <h2>A shaft orbit from two proximity probes, live</h2>
            <p>
                Probes at 45 degrees either side of vertical on a turbine bearing. The raw orbit carries the 1x unbalance, a 2x component from misalignment and probe noise; the filtered orbit keeps the 1x. The keyphasor pulse once per revolution is the marker, so the orbit can be read against the shaft's position. Press <em>Rub</em> to see the flattened orbit a light rub produces. Click the plot to read both orbits at an angle.
            </p>
            <div class="row">
                <smart-polar-plot id="orbit" label="Bearing 2, orbit" radius-unit="µm" [radiusMax]="120" angle-origin="top" angle-direction="clockwise"></smart-polar-plot>
                <div class="side">
                    <div class="demo-actions">
                        <button type="button" id="rub">Rub</button>
                        <button type="button" id="balance">Balanced</button>
                        <label><input type="checkbox" id="showRaw" checked /> Raw orbit</label>
                    </div>
                    <p class="hint" id="orbitLog">The peak-to-peak amplitude and the 1x phase are read from the same samples; a change of phase at constant speed is what a crack shows first.</p>
                </div>
            </div>
        </section>

        <section>
            <h2>An antenna pattern and a round-out measurement</h2>
            <p>
                The E-plane pattern of a horn in dBi, with the radius axis starting at -40 dB so the side lobes are readable, and the run-out of a shaft journal from a dial indicator at every 10 degrees, in micrometres about the mean radius.
            </p>
            <div class="row">
                <smart-polar-plot id="pattern" class="half" label="Horn, E-plane, 10 GHz" radius-unit="dBi" [radiusMin]="-40" [radiusMax]="20" angle-origin="top" [cursor]="0"></smart-polar-plot>
                <smart-polar-plot id="runout" class="half" label="Journal round-out" radius-unit="µm" [radiusMin]="-30" [radiusMax]="30" angle-origin="top" angle-direction="clockwise"></smart-polar-plot>
            </div>
            <p class="hint">Keyboard: the plot is a tab stop. The arrow keys move the cursor by one degree, with Shift by ten; Home returns it to zero. The legend is one tab stop where Enter or Space hides and shows a plot. The markers and the cursor readings are text under the plot.</p>
        </section>
    </div>
</div>

angular/app.component.ts

import { Component, AfterViewInit, OnDestroy } from '@angular/core';

import { PolarPlotModule } from 'smart-industrial/angular/polarplot';

import { runDemo } from './demo';

/**
 * Smart.UI Industrial - PolarPlot in Angular.
 *
 * The template is the HTML demo's markup: the elements are the wrappers, so what is
 * written on them is checked against their inputs. demo.ts drives them the way the
 * plant's data would, once every element in the view has rendered.
 */
@Component({
    selector: 'app-root',
    standalone: true,
    imports: [PolarPlotModule],
    templateUrl: './app.component.html',
    styleUrl: './app.component.css'
})
export class AppComponent implements AfterViewInit, OnDestroy {
    private unmounted = false;

    ngAfterViewInit(): void {
        const root = document.querySelector('.angular-root') as HTMLElement,
            pending: Promise<void>[] = [];

        root.querySelectorAll('*').forEach((element: any) => {
            if (typeof element.whenRendered === 'function' && !element.isRendered) {
                pending.push(element.whenRendered());
            }
        });

        Promise.all(pending).then(() => {
            if (!this.unmounted) {
                runDemo();
            }
        });
    }

    ngOnDestroy(): void {
        this.unmounted = true;
    }
}

angular/demo.ts

// @ts-nocheck
/* The HTML demo's script, as it was written: page code that feeds the elements, not a typed
   API. The types are on the wrappers in app.component.ts. */

/* The orbit is generated from a shaft model with known 1x and 2x content, so what the plot
   shows can be checked against what was put in. The seam is the plots property: a monitor
   that reads two probes assigns the same shape and nothing else on the page changes. */

function gaussian() {
    return Math.sqrt(-2 * Math.log(Math.random() || 1e-12)) * Math.cos(2 * Math.PI * Math.random());
}

export function runDemo(): void {
    /* ── The orbit ─────────────────────────────────────────────────────── */
    const orbit = document.getElementById('orbit'),
        orbitLog = document.getElementById('orbitLog'),
        rub = document.getElementById('rub'),
        balance = document.getElementById('balance'),
        showRaw = document.getElementById('showRaw');

    const SAMPLES = 256, REVOLUTIONS = 2;
    let condition = 'normal', phase = 0;

    /* One revolution of shaft centreline motion: 1x unbalance (an ellipse, because the
       bearing is stiffer vertically), a 2x from misalignment, and, under a rub, the orbit
       flattened where the shaft touches. */
    function revolution() {
        const x = [], y = [], fx = [], fy = [],
            amplitude = condition === 'balanced' ? 18 : 55,
            second = condition === 'rub' ? 22 : 12;

        for (let i = 0; i < SAMPLES; i++) {
            const theta = (i / SAMPLES) * 2 * Math.PI * REVOLUTIONS + phase,
                ex = amplitude * Math.cos(theta),
                ey = amplitude * 0.62 * Math.sin(theta),
                mx = second * Math.cos(2 * theta + 0.6),
                my = second * 0.8 * Math.sin(2 * theta + 0.6);

            let px = ex + mx + gaussian() * 2,
                py = ey + my + gaussian() * 2;

            if (condition === 'rub' && py < -34) {
                py = -34 - (py + 34) * 0.15;
            }

            x.push(px);
            y.push(py);
            fx.push(ex);
            fy.push(ey);
        }

        return { x: x, y: y, fx: fx, fy: fy };
    }

    function update() {
        const rev = revolution(),
            keyphasor = { x: rev.x[0], y: rev.y[0] };

        orbit.plots = [
            { id: 'raw', label: 'Raw', x: rev.x, y: rev.y, visible: showRaw.checked },
            { id: 'filtered', label: '1x filtered', x: rev.fx, y: rev.fy, closed: true, lineWidth: 2 }
        ];
        orbit.markers = [{ x: keyphasor.x, y: keyphasor.y, label: 'KΦ' }];

        /* Peak to peak of the filtered orbit along its major axis, and the 1x phase. */
        const pp = 2 * Math.max.apply(null, rev.fx.map((v) => Math.abs(v))),
            phaseDegrees = ((Math.atan2(rev.fy[0], rev.fx[0]) * 180 / Math.PI) + 360) % 360;

        orbitLog.textContent = 'Sp-p ' + pp.toFixed(0) + ' µm, 1x phase ' + phaseDegrees.toFixed(0) + '°' +
            (condition === 'rub' ? '. The flat side is the rub: the shaft cannot go further down.' :
                condition === 'balanced' ? '. After a trim balance the orbit is a third of its size.' : '.');
        phase += 0.05;
    }

    update();
    setInterval(update, 250);

    rub.addEventListener('click', function () {
        condition = condition === 'rub' ? 'normal' : 'rub';
        rub.textContent = condition === 'rub' ? 'Clear the rub' : 'Rub';
    });

    balance.addEventListener('click', function () {
        condition = condition === 'balanced' ? 'normal' : 'balanced';
        balance.textContent = condition === 'balanced' ? 'Unbalance' : 'Balanced';
    });

    showRaw.addEventListener('change', update);

    orbit.addEventListener('cursorChange', function (event) {
        orbitLog.textContent = 'cursorChange: ' + event.detail.angle.toFixed(1) + '°, filtered orbit ' + orbit.valueAt('filtered', event.detail.angle).toFixed(1) + ' µm';
    });

    /* ── The antenna pattern ───────────────────────────────────────────── */
    const pattern = document.getElementById('pattern'),
        angles = [], gain = [], model = [];

    for (let degrees = 0; degrees < 360; degrees += 1) {
        const theta = degrees * Math.PI / 180,
            /* A horn: a broad main lobe with side lobes falling away, back lobe -30 dB. */
            u = 3.2 * Math.sin(theta),
            lobe = Math.abs(u) < 1e-6 ? 1 : Math.abs(Math.sin(Math.PI * u) / (Math.PI * u)),
            front = Math.cos(theta) > 0 ? 1 : 0.03,
            level = 20 * Math.log10(Math.max(1e-4, lobe * front)) + 15;

        angles.push(degrees);
        gain.push(Math.max(-40, level + gaussian() * 0.6));
        model.push(Math.max(-40, level));
    }

    pattern.plots = [
        { id: 'measured', label: 'Measured', angles: angles, radii: gain, closed: true },
        { id: 'sim', label: 'Simulated', angles: angles, radii: model, closed: true }
    ];
    pattern.markers = [{ angle: 0, radius: 15, label: 'boresight' }];

    /* ── The round-out ─────────────────────────────────────────────────── */
    const runout = document.getElementById('runout'),
        stations = [], deviation = [];

    for (let degrees = 0; degrees < 360; degrees += 10) {
        const theta = degrees * Math.PI / 180;

        stations.push(degrees);
        /* An oval journal with a slight three-lobe form: 12 µm of ovality, 4 of lobing. */
        deviation.push(12 * Math.cos(2 * theta + 0.4) + 4 * Math.cos(3 * theta) + gaussian() * 0.8);
    }

    runout.plots = [
        { id: 'indicator', label: 'Dial indicator', angles: stations, radii: deviation, closed: true, style: 'line' },
        { id: 'stations', label: 'Stations', angles: stations, radii: deviation, style: 'points' }
    ];
    runout.cursor = 90;
}

angular/app.component.css

smart-polar-plot {
    --smart-polar-height: 400px;
}

.row {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    align-items: flex-start;
}

#orbit {
    flex: 0 1 460px;
    width: 460px;
    max-width: 100%;
}

.side {
    flex: 1 1 260px;
    max-width: 420px;
}

smart-polar-plot.half {
    --smart-polar-height: 380px;
    flex: 1 1 380px;
    min-width: 0;
    width: auto;
}

/* ── Demo chrome, shared by the Industrial demos ─────────────────────────
   Headings, prose, buttons and notes are the same on every demo page. This block
   is appended by scripts and comes last, so it wins over the rules above. */
.smart-demo-container {
    padding: 4px 0 32px;
}

.smart-demo-container section {
    margin-bottom: 36px;
}

.smart-demo-container section h2 {
    margin: 0 0 8px;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--smart-text-color);
}

.smart-demo-container #overview h2 {
    margin-bottom: 10px;
    font-size: 20px;
    max-width: 78ch;
}

.smart-demo-container section > p {
    margin: 0 0 14px;
    max-width: 84ch;
    font-size: 14px;
    line-height: 1.55;
    color: var(--smart-text-secondary-color);
}

.smart-demo-container code {
    padding: 1px 5px;
    border-radius: 2px;
    background: var(--smart-ui-state-hover);
    font-family: Consolas, "Courier New", monospace;
    font-size: 12px;
}

.smart-demo-container .demo-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    margin-top: 12px;
}

.smart-demo-container .demo-actions label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--smart-text-color);
}

.smart-demo-container .demo-actions button,
.smart-demo-container .demo-button {
    min-height: 30px;
    padding: 0 12px;
    border: 1px solid var(--smart-border);
    border-radius: 3px;
    background: var(--smart-industrial-panel-background, var(--smart-surface));
    color: var(--smart-text-color);
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    cursor: pointer;
}

.smart-demo-container .demo-actions button:hover,
.smart-demo-container .demo-button:hover {
    border-color: var(--smart-ui-state-border-hover);
    background: var(--smart-ui-state-hover);
    color: var(--smart-ui-state-color-hover);
}

.smart-demo-container .demo-actions button.demo-button-primary,
.smart-demo-container .demo-button-primary {
    border-color: var(--smart-primary);
    background: var(--smart-primary);
    color: var(--smart-primary-color, #fff);
}

.smart-demo-container .demo-actions button[disabled],
.smart-demo-container .demo-button[disabled] {
    opacity: 0.5;
    cursor: default;
}

.smart-demo-container .demo-actions select,
.smart-demo-container .demo-actions input[type="text"],
.smart-demo-container .demo-actions input[type="number"] {
    min-height: 30px;
    padding: 2px 6px;
    border: 1px solid var(--smart-border);
    border-radius: 3px;
    background: var(--smart-background);
    color: var(--smart-text-color);
    font: inherit;
    font-size: 13px;
}

.smart-demo-container .hint,
.smart-demo-container .demo-log,
.smart-demo-container .demo-counts {
    margin: 10px 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--smart-text-secondary-color);
    opacity: 1;
}

.smart-demo-container .demo-log,
.smart-demo-container .demo-counts {
    font-family: Consolas, "Courier New", monospace;
}

.smart-demo-container .log {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    color: var(--smart-text-secondary-color);
    opacity: 1;
}

.smart-demo-container .log li {
    padding: 2px 0;
}

react/App.jsx

import 'smart-industrial/source/styles/smart.default.css';
import 'smart-industrial/source/styles/smart.industrial-elements.css';
import 'smart-industrial/source/styles/smart.industrial.css';
import 'smart-industrial/source/styles/smart.industrial-dark.css';
import './App.css';
import React from 'react';
import { PolarPlot } from 'smart-industrial/react/polarplot';


/* The demo logic is the HTML demo's: it feeds the elements the way a plant's data would. */
/* The orbit is generated from a shaft model with known 1x and 2x content, so what the plot
   shows can be checked against what was put in. The seam is the plots property: a monitor
   that reads two probes assigns the same shape and nothing else on the page changes. */

function gaussian() {
    return Math.sqrt(-2 * Math.log(Math.random() || 1e-12)) * Math.cos(2 * Math.PI * Math.random());
}

const App = () => {
    const root = React.useRef(null);

    React.useEffect(() => {
        /* The elements render after React has mounted them, and the demo's logic - written
           for a page's load event - reads their parts, so it waits for every element in the
           tree to have rendered first. */
        const pending = Array.from(root.current.querySelectorAll('*'))
            .filter((element) => typeof element.whenRendered === 'function' && !element.isRendered)
            .map((element) => element.whenRendered());
        let unmounted = false;

        Promise.all(pending).then(() => {
            if (unmounted) {
                return;
            }

            /* ── The orbit ─────────────────────────────────────────────────────── */
            const orbit = document.getElementById('orbit'),
                orbitLog = document.getElementById('orbitLog'),
                rub = document.getElementById('rub'),
                balance = document.getElementById('balance'),
                showRaw = document.getElementById('showRaw');

            const SAMPLES = 256, REVOLUTIONS = 2;
            let condition = 'normal', phase = 0;

            /* One revolution of shaft centreline motion: 1x unbalance (an ellipse, because the
               bearing is stiffer vertically), a 2x from misalignment, and, under a rub, the orbit
               flattened where the shaft touches. */
            function revolution() {
                const x = [], y = [], fx = [], fy = [],
                    amplitude = condition === 'balanced' ? 18 : 55,
                    second = condition === 'rub' ? 22 : 12;

                for (let i = 0; i < SAMPLES; i++) {
                    const theta = (i / SAMPLES) * 2 * Math.PI * REVOLUTIONS + phase,
                        ex = amplitude * Math.cos(theta),
                        ey = amplitude * 0.62 * Math.sin(theta),
                        mx = second * Math.cos(2 * theta + 0.6),
                        my = second * 0.8 * Math.sin(2 * theta + 0.6);

                    let px = ex + mx + gaussian() * 2,
                        py = ey + my + gaussian() * 2;

                    if (condition === 'rub' && py < -34) {
                        py = -34 - (py + 34) * 0.15;
                    }

                    x.push(px);
                    y.push(py);
                    fx.push(ex);
                    fy.push(ey);
                }

                return { x: x, y: y, fx: fx, fy: fy };
            }

            function update() {
                const rev = revolution(),
                    keyphasor = { x: rev.x[0], y: rev.y[0] };

                orbit.plots = [
                    { id: 'raw', label: 'Raw', x: rev.x, y: rev.y, visible: showRaw.checked },
                    { id: 'filtered', label: '1x filtered', x: rev.fx, y: rev.fy, closed: true, lineWidth: 2 }
                ];
                orbit.markers = [{ x: keyphasor.x, y: keyphasor.y, label: 'KΦ' }];

                /* Peak to peak of the filtered orbit along its major axis, and the 1x phase. */
                const pp = 2 * Math.max.apply(null, rev.fx.map((v) => Math.abs(v))),
                    phaseDegrees = ((Math.atan2(rev.fy[0], rev.fx[0]) * 180 / Math.PI) + 360) % 360;

                orbitLog.textContent = 'Sp-p ' + pp.toFixed(0) + ' µm, 1x phase ' + phaseDegrees.toFixed(0) + '°' +
                    (condition === 'rub' ? '. The flat side is the rub: the shaft cannot go further down.' :
                        condition === 'balanced' ? '. After a trim balance the orbit is a third of its size.' : '.');
                phase += 0.05;
            }

            update();
            setInterval(update, 250);

            rub.addEventListener('click', function () {
                condition = condition === 'rub' ? 'normal' : 'rub';
                rub.textContent = condition === 'rub' ? 'Clear the rub' : 'Rub';
            });

            balance.addEventListener('click', function () {
                condition = condition === 'balanced' ? 'normal' : 'balanced';
                balance.textContent = condition === 'balanced' ? 'Unbalance' : 'Balanced';
            });

            showRaw.addEventListener('change', update);

            orbit.addEventListener('cursorChange', function (event) {
                orbitLog.textContent = 'cursorChange: ' + event.detail.angle.toFixed(1) + '°, filtered orbit ' + orbit.valueAt('filtered', event.detail.angle).toFixed(1) + ' µm';
            });

            /* ── The antenna pattern ───────────────────────────────────────────── */
            const pattern = document.getElementById('pattern'),
                angles = [], gain = [], model = [];

            for (let degrees = 0; degrees < 360; degrees += 1) {
                const theta = degrees * Math.PI / 180,
                    /* A horn: a broad main lobe with side lobes falling away, back lobe -30 dB. */
                    u = 3.2 * Math.sin(theta),
                    lobe = Math.abs(u) < 1e-6 ? 1 : Math.abs(Math.sin(Math.PI * u) / (Math.PI * u)),
                    front = Math.cos(theta) > 0 ? 1 : 0.03,
                    level = 20 * Math.log10(Math.max(1e-4, lobe * front)) + 15;

                angles.push(degrees);
                gain.push(Math.max(-40, level + gaussian() * 0.6));
                model.push(Math.max(-40, level));
            }

            pattern.plots = [
                { id: 'measured', label: 'Measured', angles: angles, radii: gain, closed: true },
                { id: 'sim', label: 'Simulated', angles: angles, radii: model, closed: true }
            ];
            pattern.markers = [{ angle: 0, radius: 15, label: 'boresight' }];

            /* ── The round-out ─────────────────────────────────────────────────── */
            const runout = document.getElementById('runout'),
                stations = [], deviation = [];

            for (let degrees = 0; degrees < 360; degrees += 10) {
                const theta = degrees * Math.PI / 180;

                stations.push(degrees);
                /* An oval journal with a slight three-lobe form: 12 µm of ovality, 4 of lobing. */
                deviation.push(12 * Math.cos(2 * theta + 0.4) + 4 * Math.cos(3 * theta) + gaussian() * 0.8);
            }

            runout.plots = [
                { id: 'indicator', label: 'Dial indicator', angles: stations, radii: deviation, closed: true, style: 'line' },
                { id: 'stations', label: 'Stations', angles: stations, radii: deviation, style: 'points' }
            ];
            runout.cursor = 90;
        });

        return () => {
            unmounted = true;
        };
    }, []);

    return (
        <div className="react-root" ref={root} theme="industrial">
            <div className="smart-demo-container">
                <section id="overview">
                    <h2>Smart.PolarPlot displays data on a circular grid: a radius against an angle, or an x and a y about a centre. It is the orbit a pair of proximity probes draws, the pattern an antenna radiates and the round-out a dial indicator records.</h2>
                    <p>Angles start where the application says, to the right or at the top, and run counterclockwise or clockwise, because a compass and a mathematician disagree. The radius axis can start below zero, so a pattern in dBi reads its floor at the centre. Markers name a point, such as the keyphasor pulse on an orbit, and a cursor at an angle reads every plot's radius there.</p>
                </section>
                <section>
                    <h2>A shaft orbit from two proximity probes, live</h2>
                    <p>Probes at 45 degrees either side of vertical on a turbine bearing. The raw orbit carries the 1x unbalance, a 2x component from misalignment and probe noise; the filtered orbit keeps the 1x. The keyphasor pulse once per revolution is the marker, so the orbit can be read against the shaft's position. Press <em>Rub</em> to see the flattened orbit a light rub produces. Click the plot to read both orbits at an angle.</p>
                    <div className="row">
                        <PolarPlot id="orbit" label="Bearing 2, orbit" radiusUnit="µm" radiusMax={120} angleOrigin="top" angleDirection="clockwise"></PolarPlot>
                        <div className="side">
                            <div className="demo-actions">
                                <button type="button" id="rub">Rub</button>
                                <button type="button" id="balance">Balanced</button>
                                <label><input type="checkbox" id="showRaw" defaultChecked /> Raw orbit</label>
                            </div>
                            <p className="hint" id="orbitLog">The peak-to-peak amplitude and the 1x phase are read from the same samples; a change of phase at constant speed is what a crack shows first.</p>
                        </div>
                    </div>
                </section>
                <section>
                    <h2>An antenna pattern and a round-out measurement</h2>
                    <p>The E-plane pattern of a horn in dBi, with the radius axis starting at -40 dB so the side lobes are readable, and the run-out of a shaft journal from a dial indicator at every 10 degrees, in micrometres about the mean radius.</p>
                    <div className="row">
                        <PolarPlot id="pattern" className="half" label="Horn, E-plane, 10 GHz" radiusUnit="dBi" radiusMin={-40} radiusMax={20} angleOrigin="top" cursor={0}></PolarPlot>
                        <PolarPlot id="runout" className="half" label="Journal round-out" radiusUnit="µm" radiusMin={-30} radiusMax={30} angleOrigin="top" angleDirection="clockwise"></PolarPlot>
                    </div>
                    <p className="hint">Keyboard: the plot is a tab stop. The arrow keys move the cursor by one degree, with Shift by ten; Home returns it to zero. The legend is one tab stop where Enter or Space hides and shows a plot. The markers and the cursor readings are text under the plot.</p>
                </section>
            </div>
        </div>
    );
};

export default App;

react/App.css

smart-polar-plot {
    --smart-polar-height: 400px;
}

.row {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    align-items: flex-start;
}

#orbit {
    flex: 0 1 460px;
    width: 460px;
    max-width: 100%;
}

.side {
    flex: 1 1 260px;
    max-width: 420px;
}

smart-polar-plot.half {
    --smart-polar-height: 380px;
    flex: 1 1 380px;
    min-width: 0;
    width: auto;
}

/* ── Demo chrome, shared by the Industrial demos ─────────────────────────
   Headings, prose, buttons and notes are the same on every demo page. This block
   is appended by scripts and comes last, so it wins over the rules above. */
.smart-demo-container {
    padding: 4px 0 32px;
}

.smart-demo-container section {
    margin-bottom: 36px;
}

.smart-demo-container section h2 {
    margin: 0 0 8px;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--smart-text-color);
}

.smart-demo-container #overview h2 {
    margin-bottom: 10px;
    font-size: 20px;
    max-width: 78ch;
}

.smart-demo-container section > p {
    margin: 0 0 14px;
    max-width: 84ch;
    font-size: 14px;
    line-height: 1.55;
    color: var(--smart-text-secondary-color);
}

.smart-demo-container code {
    padding: 1px 5px;
    border-radius: 2px;
    background: var(--smart-ui-state-hover);
    font-family: Consolas, "Courier New", monospace;
    font-size: 12px;
}

.smart-demo-container .demo-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    margin-top: 12px;
}

.smart-demo-container .demo-actions label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--smart-text-color);
}

.smart-demo-container .demo-actions button,
.smart-demo-container .demo-button {
    min-height: 30px;
    padding: 0 12px;
    border: 1px solid var(--smart-border);
    border-radius: 3px;
    background: var(--smart-industrial-panel-background, var(--smart-surface));
    color: var(--smart-text-color);
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    cursor: pointer;
}

.smart-demo-container .demo-actions button:hover,
.smart-demo-container .demo-button:hover {
    border-color: var(--smart-ui-state-border-hover);
    background: var(--smart-ui-state-hover);
    color: var(--smart-ui-state-color-hover);
}

.smart-demo-container .demo-actions button.demo-button-primary,
.smart-demo-container .demo-button-primary {
    border-color: var(--smart-primary);
    background: var(--smart-primary);
    color: var(--smart-primary-color, #fff);
}

.smart-demo-container .demo-actions button[disabled],
.smart-demo-container .demo-button[disabled] {
    opacity: 0.5;
    cursor: default;
}

.smart-demo-container .demo-actions select,
.smart-demo-container .demo-actions input[type="text"],
.smart-demo-container .demo-actions input[type="number"] {
    min-height: 30px;
    padding: 2px 6px;
    border: 1px solid var(--smart-border);
    border-radius: 3px;
    background: var(--smart-background);
    color: var(--smart-text-color);
    font: inherit;
    font-size: 13px;
}

.smart-demo-container .hint,
.smart-demo-container .demo-log,
.smart-demo-container .demo-counts {
    margin: 10px 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--smart-text-secondary-color);
    opacity: 1;
}

.smart-demo-container .demo-log,
.smart-demo-container .demo-counts {
    font-family: Consolas, "Courier New", monospace;
}

.smart-demo-container .log {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    color: var(--smart-text-secondary-color);
    opacity: 1;
}

.smart-demo-container .log li {
    padding: 2px 0;
}

vue/App.vue

<template>
  <div class="vue-root" theme="industrial" v-pre>
    <div class="smart-demo-container">

        <section id="overview">
            <h2>Smart.PolarPlot displays data on a circular grid: a radius against an angle, or an x and a y about a centre. It is the orbit a pair of proximity probes draws, the pattern an antenna radiates and the round-out a dial indicator records.</h2>
            <p>
                Angles start where the application says, to the right or at the top, and run counterclockwise or clockwise, because a compass and a mathematician disagree. The radius axis can start below zero, so a pattern in dBi reads its floor at the centre. Markers name a point, such as the keyphasor pulse on an orbit, and a cursor at an angle reads every plot's radius there.
            </p>
        </section>

        <section>
            <h2>A shaft orbit from two proximity probes, live</h2>
            <p>
                Probes at 45 degrees either side of vertical on a turbine bearing. The raw orbit carries the 1x unbalance, a 2x component from misalignment and probe noise; the filtered orbit keeps the 1x. The keyphasor pulse once per revolution is the marker, so the orbit can be read against the shaft's position. Press <em>Rub</em> to see the flattened orbit a light rub produces. Click the plot to read both orbits at an angle.
            </p>
            <div class="row">
                <smart-polar-plot id="orbit" label="Bearing 2, orbit" radius-unit="µm" radius-max="120" angle-origin="top" angle-direction="clockwise"></smart-polar-plot>
                <div class="side">
                    <div class="demo-actions">
                        <button type="button" id="rub">Rub</button>
                        <button type="button" id="balance">Balanced</button>
                        <label><input type="checkbox" id="showRaw" checked /> Raw orbit</label>
                    </div>
                    <p class="hint" id="orbitLog">The peak-to-peak amplitude and the 1x phase are read from the same samples; a change of phase at constant speed is what a crack shows first.</p>
                </div>
            </div>
        </section>

        <section>
            <h2>An antenna pattern and a round-out measurement</h2>
            <p>
                The E-plane pattern of a horn in dBi, with the radius axis starting at -40 dB so the side lobes are readable, and the run-out of a shaft journal from a dial indicator at every 10 degrees, in micrometres about the mean radius.
            </p>
            <div class="row">
                <smart-polar-plot id="pattern" class="half" label="Horn, E-plane, 10 GHz" radius-unit="dBi" radius-min="-40" radius-max="20" angle-origin="top" cursor="0"></smart-polar-plot>
                <smart-polar-plot id="runout" class="half" label="Journal round-out" radius-unit="µm" radius-min="-30" radius-max="30" angle-origin="top" angle-direction="clockwise"></smart-polar-plot>
            </div>
            <p class="hint">Keyboard: the plot is a tab stop. The arrow keys move the cursor by one degree, with Shift by ten; Home returns it to zero. The legend is one tab stop where Enter or Space hides and shows a plot. The markers and the cursor readings are text under the plot.</p>
        </section>
    </div>
  </div>
</template>

<script>
import { onMounted } from "vue";
import "smart-industrial/source/styles/smart.default.css";
import "smart-industrial/source/styles/smart.industrial-elements.css";
import "smart-industrial/source/styles/smart.industrial.css";
import "smart-industrial/source/styles/smart.industrial-dark.css";
import "smart-industrial/source/modules/smart.polarplot.js";


/* The orbit is generated from a shaft model with known 1x and 2x content, so what the plot
   shows can be checked against what was put in. The seam is the plots property: a monitor
   that reads two probes assigns the same shape and nothing else on the page changes. */

function gaussian() {
    return Math.sqrt(-2 * Math.log(Math.random() || 1e-12)) * Math.cos(2 * Math.PI * Math.random());
}

export default {
  name: "app",
  setup() {
    onMounted(() => {
      /* The elements render after Vue has mounted them, and the demo's logic - written for
         a page's load event - reads their parts, so it waits for every element in the tree
         to have rendered first. */
      const pending = Array.from(document.querySelector(".vue-root").querySelectorAll("*"))
        .filter((element) => typeof element.whenRendered === "function" && !element.isRendered)
        .map((element) => element.whenRendered());

      Promise.all(pending).then(() => {
        /* ── The orbit ─────────────────────────────────────────────────────── */
        const orbit = document.getElementById('orbit'),
            orbitLog = document.getElementById('orbitLog'),
            rub = document.getElementById('rub'),
            balance = document.getElementById('balance'),
            showRaw = document.getElementById('showRaw');

        const SAMPLES = 256, REVOLUTIONS = 2;
        let condition = 'normal', phase = 0;

        /* One revolution of shaft centreline motion: 1x unbalance (an ellipse, because the
           bearing is stiffer vertically), a 2x from misalignment, and, under a rub, the orbit
           flattened where the shaft touches. */
        function revolution() {
            const x = [], y = [], fx = [], fy = [],
                amplitude = condition === 'balanced' ? 18 : 55,
                second = condition === 'rub' ? 22 : 12;

            for (let i = 0; i < SAMPLES; i++) {
                const theta = (i / SAMPLES) * 2 * Math.PI * REVOLUTIONS + phase,
                    ex = amplitude * Math.cos(theta),
                    ey = amplitude * 0.62 * Math.sin(theta),
                    mx = second * Math.cos(2 * theta + 0.6),
                    my = second * 0.8 * Math.sin(2 * theta + 0.6);

                let px = ex + mx + gaussian() * 2,
                    py = ey + my + gaussian() * 2;

                if (condition === 'rub' && py < -34) {
                    py = -34 - (py + 34) * 0.15;
                }

                x.push(px);
                y.push(py);
                fx.push(ex);
                fy.push(ey);
            }

            return { x: x, y: y, fx: fx, fy: fy };
        }

        function update() {
            const rev = revolution(),
                keyphasor = { x: rev.x[0], y: rev.y[0] };

            orbit.plots = [
                { id: 'raw', label: 'Raw', x: rev.x, y: rev.y, visible: showRaw.checked },
                { id: 'filtered', label: '1x filtered', x: rev.fx, y: rev.fy, closed: true, lineWidth: 2 }
            ];
            orbit.markers = [{ x: keyphasor.x, y: keyphasor.y, label: 'KΦ' }];

            /* Peak to peak of the filtered orbit along its major axis, and the 1x phase. */
            const pp = 2 * Math.max.apply(null, rev.fx.map((v) => Math.abs(v))),
                phaseDegrees = ((Math.atan2(rev.fy[0], rev.fx[0]) * 180 / Math.PI) + 360) % 360;

            orbitLog.textContent = 'Sp-p ' + pp.toFixed(0) + ' µm, 1x phase ' + phaseDegrees.toFixed(0) + '°' +
                (condition === 'rub' ? '. The flat side is the rub: the shaft cannot go further down.' :
                    condition === 'balanced' ? '. After a trim balance the orbit is a third of its size.' : '.');
            phase += 0.05;
        }

        update();
        setInterval(update, 250);

        rub.addEventListener('click', function () {
            condition = condition === 'rub' ? 'normal' : 'rub';
            rub.textContent = condition === 'rub' ? 'Clear the rub' : 'Rub';
        });

        balance.addEventListener('click', function () {
            condition = condition === 'balanced' ? 'normal' : 'balanced';
            balance.textContent = condition === 'balanced' ? 'Unbalance' : 'Balanced';
        });

        showRaw.addEventListener('change', update);

        orbit.addEventListener('cursorChange', function (event) {
            orbitLog.textContent = 'cursorChange: ' + event.detail.angle.toFixed(1) + '°, filtered orbit ' + orbit.valueAt('filtered', event.detail.angle).toFixed(1) + ' µm';
        });

        /* ── The antenna pattern ───────────────────────────────────────────── */
        const pattern = document.getElementById('pattern'),
            angles = [], gain = [], model = [];

        for (let degrees = 0; degrees < 360; degrees += 1) {
            const theta = degrees * Math.PI / 180,
                /* A horn: a broad main lobe with side lobes falling away, back lobe -30 dB. */
                u = 3.2 * Math.sin(theta),
                lobe = Math.abs(u) < 1e-6 ? 1 : Math.abs(Math.sin(Math.PI * u) / (Math.PI * u)),
                front = Math.cos(theta) > 0 ? 1 : 0.03,
                level = 20 * Math.log10(Math.max(1e-4, lobe * front)) + 15;

            angles.push(degrees);
            gain.push(Math.max(-40, level + gaussian() * 0.6));
            model.push(Math.max(-40, level));
        }

        pattern.plots = [
            { id: 'measured', label: 'Measured', angles: angles, radii: gain, closed: true },
            { id: 'sim', label: 'Simulated', angles: angles, radii: model, closed: true }
        ];
        pattern.markers = [{ angle: 0, radius: 15, label: 'boresight' }];

        /* ── The round-out ─────────────────────────────────────────────────── */
        const runout = document.getElementById('runout'),
            stations = [], deviation = [];

        for (let degrees = 0; degrees < 360; degrees += 10) {
            const theta = degrees * Math.PI / 180;

            stations.push(degrees);
            /* An oval journal with a slight three-lobe form: 12 µm of ovality, 4 of lobing. */
            deviation.push(12 * Math.cos(2 * theta + 0.4) + 4 * Math.cos(3 * theta) + gaussian() * 0.8);
        }

        runout.plots = [
            { id: 'indicator', label: 'Dial indicator', angles: stations, radii: deviation, closed: true, style: 'line' },
            { id: 'stations', label: 'Stations', angles: stations, radii: deviation, style: 'points' }
        ];
        runout.cursor = 90;
      });
    });
  }
};
</script>

<style>
smart-polar-plot {
    --smart-polar-height: 400px;
}

.row {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    align-items: flex-start;
}

#orbit {
    flex: 0 1 460px;
    width: 460px;
    max-width: 100%;
}

.side {
    flex: 1 1 260px;
    max-width: 420px;
}

smart-polar-plot.half {
    --smart-polar-height: 380px;
    flex: 1 1 380px;
    min-width: 0;
    width: auto;
}

/* ── Demo chrome, shared by the Industrial demos ─────────────────────────
   Headings, prose, buttons and notes are the same on every demo page. This block
   is appended by scripts and comes last, so it wins over the rules above. */
.smart-demo-container {
    padding: 4px 0 32px;
}

.smart-demo-container section {
    margin-bottom: 36px;
}

.smart-demo-container section h2 {
    margin: 0 0 8px;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--smart-text-color);
}

.smart-demo-container #overview h2 {
    margin-bottom: 10px;
    font-size: 20px;
    max-width: 78ch;
}

.smart-demo-container section > p {
    margin: 0 0 14px;
    max-width: 84ch;
    font-size: 14px;
    line-height: 1.55;
    color: var(--smart-text-secondary-color);
}

.smart-demo-container code {
    padding: 1px 5px;
    border-radius: 2px;
    background: var(--smart-ui-state-hover);
    font-family: Consolas, "Courier New", monospace;
    font-size: 12px;
}

.smart-demo-container .demo-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    margin-top: 12px;
}

.smart-demo-container .demo-actions label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--smart-text-color);
}

.smart-demo-container .demo-actions button,
.smart-demo-container .demo-button {
    min-height: 30px;
    padding: 0 12px;
    border: 1px solid var(--smart-border);
    border-radius: 3px;
    background: var(--smart-industrial-panel-background, var(--smart-surface));
    color: var(--smart-text-color);
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    cursor: pointer;
}

.smart-demo-container .demo-actions button:hover,
.smart-demo-container .demo-button:hover {
    border-color: var(--smart-ui-state-border-hover);
    background: var(--smart-ui-state-hover);
    color: var(--smart-ui-state-color-hover);
}

.smart-demo-container .demo-actions button.demo-button-primary,
.smart-demo-container .demo-button-primary {
    border-color: var(--smart-primary);
    background: var(--smart-primary);
    color: var(--smart-primary-color, #fff);
}

.smart-demo-container .demo-actions button[disabled],
.smart-demo-container .demo-button[disabled] {
    opacity: 0.5;
    cursor: default;
}

.smart-demo-container .demo-actions select,
.smart-demo-container .demo-actions input[type="text"],
.smart-demo-container .demo-actions input[type="number"] {
    min-height: 30px;
    padding: 2px 6px;
    border: 1px solid var(--smart-border);
    border-radius: 3px;
    background: var(--smart-background);
    color: var(--smart-text-color);
    font: inherit;
    font-size: 13px;
}

.smart-demo-container .hint,
.smart-demo-container .demo-log,
.smart-demo-container .demo-counts {
    margin: 10px 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--smart-text-secondary-color);
    opacity: 1;
}

.smart-demo-container .demo-log,
.smart-demo-container .demo-counts {
    font-family: Consolas, "Courier New", monospace;
}

.smart-demo-container .log {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    color: var(--smart-text-secondary-color);
    opacity: 1;
}

.smart-demo-container .log li {
    padding: 2px 0;
}
</style>