Waveform Graph

angular/app.component.html

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

        <section id="overview">
            <h2>Smart.WaveformGraph displays complete records against engineering axes: waveforms with a start time and a sample interval, or XY pairs, with cursors, annotations and zoom.</h2>
            <p>
                It is the plot an acquisition ends in. The strip chart takes samples one at a time, the scope takes triggered captures and the trend takes historian time; the waveform graph takes a record and draws it whole. Plots share the x axis and each is read on a y scale. Scales are overlaid on one plot area or stacked in bands. A cursor is free or locked to a plot, and the cursor legend reads every cursor and the difference between the first two. Records are reduced to one column per pixel with the minimum and maximum kept, so a one-sample spike still reaches its height.
            </p>
        </section>

        <section>
            <h2>A four-channel acquisition with cursors</h2>
            <p>
                One capture of 20,000 samples per channel at 100 kS/s from a test rig: the drive voltage, the motor current and two accelerometers. Drag a cursor, or click the plot to move the active one; press N to switch cursors, the arrow keys to step, + and - to zoom and 0 to fit. Drag the plot to pan, use the wheel to zoom about the pointer, hold Shift and drag to zoom into a box, and double-click to fit again.
            </p>
            <smart-waveform-graph id="capture" label="Rig 4, capture 1182" x-label="Time" x-unit="s"></smart-waveform-graph>
            <div class="demo-actions">
                <button type="button" id="recapture">New capture</button>
                <button type="button" id="stack">Stack the scales</button>
                <label><input type="checkbox" id="lockCursors" checked /> Cursors locked to the current</label>
                <span id="captureLog" class="demo-log">The export button under the plot raises exportRequest with the CSV; this page downloads it.</span>
            </div>
        </section>

        <section>
            <h2>XY plots: a hysteresis loop and a scatter</h2>
            <p>
                A plot with an <code>x</code> array is drawn as given, in the order given, so a closed curve stays closed. Points draw a scatter. The scale is fixed by its limits here rather than following the data.
            </p>
            <div class="row">
                <smart-waveform-graph id="loop" class="half" label="B-H loop" x-label="H" x-unit="A/m" x-format="plain" [showPalette]="false"></smart-waveform-graph>
                <smart-waveform-graph id="scatter" class="half" label="Yield vs temperature" x-label="Temperature" x-unit="°C" x-format="plain"></smart-waveform-graph>
            </div>
        </section>

        <section>
            <h2>Styles, a log axis and annotations</h2>
            <p>
                Bars, a step plot and a line on one graph, and a frequency response on a logarithmic x axis with the corner frequency annotated. Annotations are placed in data coordinates and, with a plot named, take their y from it.
            </p>
            <div class="row">
                <smart-waveform-graph id="styles" class="half" label="Histogram, step and mean" x-label="Bin" x-format="plain" [showCursorLegend]="false"></smart-waveform-graph>
                <smart-waveform-graph id="response" class="half" label="Filter response" x-label="Frequency" x-unit="Hz" [xLogarithmic]="true"></smart-waveform-graph>
            </div>
            <p class="hint">Keyboard: the legend and the tool palette are each one tab stop; the arrow keys move inside them and Enter or Space activates. The plot itself is a tab stop for the cursor and zoom keys listed above, and its label is a summary of what it shows.</p>
        </section>
    </div>
</div>

angular/app.component.ts

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

import { WaveformGraphModule } from 'smart-industrial/angular/waveformgraph';

import { runDemo } from './demo';

/**
 * Smart.UI Industrial - WaveformGraph 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: [WaveformGraphModule],
    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. */

/* Every record on this page is generated with known content, so what the cursors read can
   be checked against what was put in. The seam is the plots property: a digitizer's
   callback 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 acquisition ───────────────────────────────────────────────── */
    const capture = document.getElementById('capture'),
        captureLog = document.getElementById('captureLog'),
        lockCursors = document.getElementById('lockCursors'),
        stack = document.getElementById('stack');

    const RATE = 100000, N = 20000, DT = 1 / RATE;

    /* A drive step at 40 ms, the current that follows it with an L/R rise and a switching
       ripple, and two accelerometers: one with the 1x shaft component, one with a knock. */
    function acquire() {
        const drive = new Float64Array(N), current = new Float64Array(N),
            accelA = new Float64Array(N), accelB = new Float64Array(N),
            knockAt = 0.12 + Math.random() * 0.03;

        for (let i = 0; i < N; i++) {
            const t = i * DT,
                on = t >= 0.04 ? 1 : 0,
                rise = on ? 1 - Math.exp(-(t - 0.04) / 0.012) : 0;

            drive[i] = 24 * on + 0.4 * Math.sin(2 * Math.PI * 20000 * t) * on + 0.05 * gaussian();
            current[i] = 8.5 * rise + 0.35 * Math.sin(2 * Math.PI * 20000 * t + 1) * rise + 0.03 * gaussian();
            accelA[i] = 0.8 * Math.sin(2 * Math.PI * 47.5 * t) * rise + 0.12 * Math.sin(2 * Math.PI * 95 * t) * rise + 0.05 * gaussian();
            accelB[i] = 0.3 * Math.sin(2 * Math.PI * 47.5 * t + 0.7) * rise + 0.04 * gaussian() +
                (t > knockAt && t < knockAt + 0.004 ? 6 * Math.exp(-(t - knockAt) / 0.001) * Math.sin(2 * Math.PI * 3200 * (t - knockAt)) : 0);
        }

        return { drive: drive, current: current, accelA: accelA, accelB: accelB, knockAt: knockAt };
    }

    let record = acquire();

    capture.scales = [
        { id: 'v', label: 'Drive', unit: 'V' },
        { id: 'a', label: 'Current', unit: 'A', position: 'right' },
        { id: 'g', label: 'Vibration', unit: 'g', position: 'right' }
    ];

    function assign() {
        capture.plots = [
            { id: 'drive', label: 'Drive', unit: 'V', y: record.drive, t0: 0, dt: DT, scale: 'v' },
            { id: 'current', label: 'Motor current', unit: 'A', y: record.current, t0: 0, dt: DT, scale: 'a' },
            { id: 'accelA', label: 'Bearing DE', unit: 'g', y: record.accelA, t0: 0, dt: DT, scale: 'g' },
            { id: 'accelB', label: 'Bearing NDE', unit: 'g', y: record.accelB, t0: 0, dt: DT, scale: 'g' }
        ];
        capture.annotations = [
            { plot: 'drive', x: 0.04, text: 'drive on' },
            { plot: 'accelB', x: record.knockAt + 0.0003, text: 'knock' }
        ];
    }

    assign();

    capture.cursors = [
        { id: 'c1', label: 'C1', x: 0.04, plot: 'current' },
        { id: 'c2', label: 'C2', x: 0.052, plot: 'current' }
    ];

    lockCursors.addEventListener('change', function () {
        capture.cursors = capture.cursors.map(function (cursor, i) {
            return lockCursors.checked ? { id: cursor.id, label: cursor.label, x: cursor.x, plot: 'current' } :
                { id: cursor.id, label: cursor.label, x: cursor.x, y: 4 + i * 2 };
        });
    });

    document.getElementById('recapture').addEventListener('click', function () {
        record = acquire();
        assign();
        captureLog.textContent = 'A new record of ' + N + ' samples per channel. The cursors and the zoom stayed where they were.';
    });

    stack.addEventListener('click', function () {
        capture.layout = capture.layout === 'stacked' ? 'overlaid' : 'stacked';
        stack.textContent = capture.layout === 'stacked' ? 'Overlay the scales' : 'Stack the scales';
    });

    capture.addEventListener('cursorChange', function (event) {
        captureLog.textContent = 'cursorChange: ' + event.detail.id + ' at ' + (event.detail.x * 1000).toFixed(3) + ' ms, ' + event.detail.y.toFixed(3) + ' A';
    });

    capture.addEventListener('zoom', function (event) {
        captureLog.textContent = event.detail.fitted ? 'zoom: fitted to the record' :
            'zoom: ' + (event.detail.xMin * 1000).toFixed(2) + ' ms to ' + (event.detail.xMax * 1000).toFixed(2) + ' ms';
    });

    /* The palette's CSV button hands the page the text; the page decides what to do with it. */
    capture.addEventListener('exportRequest', function (event) {
        const blob = new Blob([event.detail.data], { type: 'text/csv' }),
            link = document.createElement('a');

        link.href = URL.createObjectURL(blob);
        link.download = 'capture-1182.csv';
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
        captureLog.textContent = 'exportRequest: ' + event.detail.data.split('\n').length + ' lines of CSV downloaded.';
    });

    /* ── XY plots ──────────────────────────────────────────────────────── */
    const loop = document.getElementById('loop'),
        scatter = document.getElementById('scatter');

    const h = [], b = [], STEPS = 400;

    for (let i = 0; i <= STEPS; i++) {
        /* One cycle of field: up, down and back, with the flux lagging it. */
        const phase = (i / STEPS) * 2 * Math.PI,
            field = 800 * Math.sin(phase);

        h.push(field);
        b.push(1.2 * Math.tanh((field + 180 * Math.cos(phase)) / 260));
    }

    loop.scales = [{ id: 'b', label: 'B', unit: 'T', min: -1.5, max: 1.5 }];
    loop.plots = [{ id: 'bh', label: 'M-19 steel', unit: 'T', x: h, y: b, scale: 'b' }];
    loop.xMin = -900;
    loop.xMax = 900;
    loop.showCursorLegend = false;

    const temperatures = [], yields = [];

    for (let i = 0; i < 80; i++) {
        const t = 40 + Math.random() * 45;

        temperatures.push(t);
        yields.push(Math.max(80, Math.min(100, 97.5 - 0.0055 * Math.pow(t - 62, 2) + gaussian() * 0.9)));
    }

    scatter.scales = [{ id: 'y', label: 'Yield', unit: '%', min: 80, max: 100 }];
    scatter.plots = [{ id: 'runs', label: 'Batches', unit: '%', x: temperatures, y: yields, style: 'points', scale: 'y' }];
    scatter.cursors = [{ id: 'best', label: 'target', x: 62, y: 97.5 }];
    scatter.annotations = [{ x: 62, y: 97.5, text: 'optimum 62 °C' }];

    /* ── Styles and a log axis ─────────────────────────────────────────── */
    const styles = document.getElementById('styles'),
        response = document.getElementById('response');

    const counts = [], edges = [], cumulative = [];
    let total = 0;

    for (let i = 0; i < 24; i++) {
        const count = Math.round(600 * Math.exp(-Math.pow((i - 11) / 4.5, 2)) + Math.random() * 15);

        edges.push(i);
        counts.push(count);
        total += count;
    }

    let running = 0;

    counts.forEach(function (count) {
        running += count;
        cumulative.push(running / total * 600);
    });

    styles.scales = [{ id: 'n', label: 'Count' }];
    styles.plots = [
        { id: 'hist', label: 'Count', y: counts, x: edges, style: 'bars', scale: 'n' },
        { id: 'cum', label: 'Cumulative (scaled)', y: cumulative, x: edges, style: 'step', scale: 'n' },
        { id: 'mean', label: 'Mean', y: edges.map(() => total / 24), x: edges, style: 'line', scale: 'n' }
    ];
    styles.showPalette = false;

    const frequencies = [], magnitude = [], phase = [], FC = 1000;

    for (let i = 0; i <= 200; i++) {
        const f = Math.pow(10, 1 + i * 0.02),
            ratio = f / FC,
            gain = 1 / Math.sqrt(1 + Math.pow(ratio, 4));

        frequencies.push(f);
        magnitude.push(20 * Math.log10(gain));
        phase.push(-Math.atan2(Math.SQRT2 * ratio, 1 - ratio * ratio) * 180 / Math.PI);
    }

    response.scales = [
        { id: 'db', label: 'Gain', unit: 'dB', min: -80, max: 5 },
        { id: 'deg', label: 'Phase', unit: '°', min: -180, max: 0, position: 'right' }
    ];
    response.plots = [
        { id: 'mag', label: 'Magnitude', unit: 'dB', x: frequencies, y: magnitude, scale: 'db' },
        { id: 'ph', label: 'Phase', unit: '°', x: frequencies, y: phase, scale: 'deg' }
    ];
    response.annotations = [{ plot: 'mag', x: FC, text: '-3 dB at 1 kHz' }];
    response.cursors = [{ id: 'fc', label: 'fc', x: FC, plot: 'mag' }];
    response.showPalette = false;
}

angular/app.component.css

smart-waveform-graph {
    --smart-waveform-height: 420px;
}

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

smart-waveform-graph.half {
    --smart-waveform-height: 320px;
    flex: 1 1 420px;
    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 { WaveformGraph } from 'smart-industrial/react/waveformgraph';


/* The demo logic is the HTML demo's: it feeds the elements the way a plant's data would. */
/* Every record on this page is generated with known content, so what the cursors read can
   be checked against what was put in. The seam is the plots property: a digitizer's
   callback 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 acquisition ───────────────────────────────────────────────── */
            const capture = document.getElementById('capture'),
                captureLog = document.getElementById('captureLog'),
                lockCursors = document.getElementById('lockCursors'),
                stack = document.getElementById('stack');

            const RATE = 100000, N = 20000, DT = 1 / RATE;

            /* A drive step at 40 ms, the current that follows it with an L/R rise and a switching
               ripple, and two accelerometers: one with the 1x shaft component, one with a knock. */
            function acquire() {
                const drive = new Float64Array(N), current = new Float64Array(N),
                    accelA = new Float64Array(N), accelB = new Float64Array(N),
                    knockAt = 0.12 + Math.random() * 0.03;

                for (let i = 0; i < N; i++) {
                    const t = i * DT,
                        on = t >= 0.04 ? 1 : 0,
                        rise = on ? 1 - Math.exp(-(t - 0.04) / 0.012) : 0;

                    drive[i] = 24 * on + 0.4 * Math.sin(2 * Math.PI * 20000 * t) * on + 0.05 * gaussian();
                    current[i] = 8.5 * rise + 0.35 * Math.sin(2 * Math.PI * 20000 * t + 1) * rise + 0.03 * gaussian();
                    accelA[i] = 0.8 * Math.sin(2 * Math.PI * 47.5 * t) * rise + 0.12 * Math.sin(2 * Math.PI * 95 * t) * rise + 0.05 * gaussian();
                    accelB[i] = 0.3 * Math.sin(2 * Math.PI * 47.5 * t + 0.7) * rise + 0.04 * gaussian() +
                        (t > knockAt && t < knockAt + 0.004 ? 6 * Math.exp(-(t - knockAt) / 0.001) * Math.sin(2 * Math.PI * 3200 * (t - knockAt)) : 0);
                }

                return { drive: drive, current: current, accelA: accelA, accelB: accelB, knockAt: knockAt };
            }

            let record = acquire();

            capture.scales = [
                { id: 'v', label: 'Drive', unit: 'V' },
                { id: 'a', label: 'Current', unit: 'A', position: 'right' },
                { id: 'g', label: 'Vibration', unit: 'g', position: 'right' }
            ];

            function assign() {
                capture.plots = [
                    { id: 'drive', label: 'Drive', unit: 'V', y: record.drive, t0: 0, dt: DT, scale: 'v' },
                    { id: 'current', label: 'Motor current', unit: 'A', y: record.current, t0: 0, dt: DT, scale: 'a' },
                    { id: 'accelA', label: 'Bearing DE', unit: 'g', y: record.accelA, t0: 0, dt: DT, scale: 'g' },
                    { id: 'accelB', label: 'Bearing NDE', unit: 'g', y: record.accelB, t0: 0, dt: DT, scale: 'g' }
                ];
                capture.annotations = [
                    { plot: 'drive', x: 0.04, text: 'drive on' },
                    { plot: 'accelB', x: record.knockAt + 0.0003, text: 'knock' }
                ];
            }

            assign();

            capture.cursors = [
                { id: 'c1', label: 'C1', x: 0.04, plot: 'current' },
                { id: 'c2', label: 'C2', x: 0.052, plot: 'current' }
            ];

            lockCursors.addEventListener('change', function () {
                capture.cursors = capture.cursors.map(function (cursor, i) {
                    return lockCursors.checked ? { id: cursor.id, label: cursor.label, x: cursor.x, plot: 'current' } :
                        { id: cursor.id, label: cursor.label, x: cursor.x, y: 4 + i * 2 };
                });
            });

            document.getElementById('recapture').addEventListener('click', function () {
                record = acquire();
                assign();
                captureLog.textContent = 'A new record of ' + N + ' samples per channel. The cursors and the zoom stayed where they were.';
            });

            stack.addEventListener('click', function () {
                capture.layout = capture.layout === 'stacked' ? 'overlaid' : 'stacked';
                stack.textContent = capture.layout === 'stacked' ? 'Overlay the scales' : 'Stack the scales';
            });

            capture.addEventListener('cursorChange', function (event) {
                captureLog.textContent = 'cursorChange: ' + event.detail.id + ' at ' + (event.detail.x * 1000).toFixed(3) + ' ms, ' + event.detail.y.toFixed(3) + ' A';
            });

            capture.addEventListener('zoom', function (event) {
                captureLog.textContent = event.detail.fitted ? 'zoom: fitted to the record' :
                    'zoom: ' + (event.detail.xMin * 1000).toFixed(2) + ' ms to ' + (event.detail.xMax * 1000).toFixed(2) + ' ms';
            });

            /* The palette's CSV button hands the page the text; the page decides what to do with it. */
            capture.addEventListener('exportRequest', function (event) {
                const blob = new Blob([event.detail.data], { type: 'text/csv' }),
                    link = document.createElement('a');

                link.href = URL.createObjectURL(blob);
                link.download = 'capture-1182.csv';
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
                captureLog.textContent = 'exportRequest: ' + event.detail.data.split('\n').length + ' lines of CSV downloaded.';
            });

            /* ── XY plots ──────────────────────────────────────────────────────── */
            const loop = document.getElementById('loop'),
                scatter = document.getElementById('scatter');

            const h = [], b = [], STEPS = 400;

            for (let i = 0; i <= STEPS; i++) {
                /* One cycle of field: up, down and back, with the flux lagging it. */
                const phase = (i / STEPS) * 2 * Math.PI,
                    field = 800 * Math.sin(phase);

                h.push(field);
                b.push(1.2 * Math.tanh((field + 180 * Math.cos(phase)) / 260));
            }

            loop.scales = [{ id: 'b', label: 'B', unit: 'T', min: -1.5, max: 1.5 }];
            loop.plots = [{ id: 'bh', label: 'M-19 steel', unit: 'T', x: h, y: b, scale: 'b' }];
            loop.xMin = -900;
            loop.xMax = 900;
            loop.showCursorLegend = false;

            const temperatures = [], yields = [];

            for (let i = 0; i < 80; i++) {
                const t = 40 + Math.random() * 45;

                temperatures.push(t);
                yields.push(Math.max(80, Math.min(100, 97.5 - 0.0055 * Math.pow(t - 62, 2) + gaussian() * 0.9)));
            }

            scatter.scales = [{ id: 'y', label: 'Yield', unit: '%', min: 80, max: 100 }];
            scatter.plots = [{ id: 'runs', label: 'Batches', unit: '%', x: temperatures, y: yields, style: 'points', scale: 'y' }];
            scatter.cursors = [{ id: 'best', label: 'target', x: 62, y: 97.5 }];
            scatter.annotations = [{ x: 62, y: 97.5, text: 'optimum 62 °C' }];

            /* ── Styles and a log axis ─────────────────────────────────────────── */
            const styles = document.getElementById('styles'),
                response = document.getElementById('response');

            const counts = [], edges = [], cumulative = [];
            let total = 0;

            for (let i = 0; i < 24; i++) {
                const count = Math.round(600 * Math.exp(-Math.pow((i - 11) / 4.5, 2)) + Math.random() * 15);

                edges.push(i);
                counts.push(count);
                total += count;
            }

            let running = 0;

            counts.forEach(function (count) {
                running += count;
                cumulative.push(running / total * 600);
            });

            styles.scales = [{ id: 'n', label: 'Count' }];
            styles.plots = [
                { id: 'hist', label: 'Count', y: counts, x: edges, style: 'bars', scale: 'n' },
                { id: 'cum', label: 'Cumulative (scaled)', y: cumulative, x: edges, style: 'step', scale: 'n' },
                { id: 'mean', label: 'Mean', y: edges.map(() => total / 24), x: edges, style: 'line', scale: 'n' }
            ];
            styles.showPalette = false;

            const frequencies = [], magnitude = [], phase = [], FC = 1000;

            for (let i = 0; i <= 200; i++) {
                const f = Math.pow(10, 1 + i * 0.02),
                    ratio = f / FC,
                    gain = 1 / Math.sqrt(1 + Math.pow(ratio, 4));

                frequencies.push(f);
                magnitude.push(20 * Math.log10(gain));
                phase.push(-Math.atan2(Math.SQRT2 * ratio, 1 - ratio * ratio) * 180 / Math.PI);
            }

            response.scales = [
                { id: 'db', label: 'Gain', unit: 'dB', min: -80, max: 5 },
                { id: 'deg', label: 'Phase', unit: '°', min: -180, max: 0, position: 'right' }
            ];
            response.plots = [
                { id: 'mag', label: 'Magnitude', unit: 'dB', x: frequencies, y: magnitude, scale: 'db' },
                { id: 'ph', label: 'Phase', unit: '°', x: frequencies, y: phase, scale: 'deg' }
            ];
            response.annotations = [{ plot: 'mag', x: FC, text: '-3 dB at 1 kHz' }];
            response.cursors = [{ id: 'fc', label: 'fc', x: FC, plot: 'mag' }];
            response.showPalette = false;
        });

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

    return (
        <div className="react-root" ref={root} theme="industrial">
            <div className="smart-demo-container">
                <section id="overview">
                    <h2>Smart.WaveformGraph displays complete records against engineering axes: waveforms with a start time and a sample interval, or XY pairs, with cursors, annotations and zoom.</h2>
                    <p>It is the plot an acquisition ends in. The strip chart takes samples one at a time, the scope takes triggered captures and the trend takes historian time; the waveform graph takes a record and draws it whole. Plots share the x axis and each is read on a y scale. Scales are overlaid on one plot area or stacked in bands. A cursor is free or locked to a plot, and the cursor legend reads every cursor and the difference between the first two. Records are reduced to one column per pixel with the minimum and maximum kept, so a one-sample spike still reaches its height.</p>
                </section>
                <section>
                    <h2>A four-channel acquisition with cursors</h2>
                    <p>One capture of 20,000 samples per channel at 100 kS/s from a test rig: the drive voltage, the motor current and two accelerometers. Drag a cursor, or click the plot to move the active one; press N to switch cursors, the arrow keys to step, + and - to zoom and 0 to fit. Drag the plot to pan, use the wheel to zoom about the pointer, hold Shift and drag to zoom into a box, and double-click to fit again.</p>
                    <WaveformGraph id="capture" label="Rig 4, capture 1182" xLabel="Time" xUnit="s"></WaveformGraph>
                    <div className="demo-actions">
                        <button type="button" id="recapture">New capture</button>
                        <button type="button" id="stack">Stack the scales</button>
                        <label><input type="checkbox" id="lockCursors" defaultChecked /> Cursors locked to the current</label>
                        <span id="captureLog" className="demo-log">The export button under the plot raises exportRequest with the CSV; this page downloads it.</span>
                    </div>
                </section>
                <section>
                    <h2>XY plots: a hysteresis loop and a scatter</h2>
                    <p>A plot with an <code>x</code> array is drawn as given, in the order given, so a closed curve stays closed. Points draw a scatter. The scale is fixed by its limits here rather than following the data.</p>
                    <div className="row">
                        <WaveformGraph id="loop" className="half" label="B-H loop" xLabel="H" xUnit="A/m" xFormat="plain" showPalette={false}></WaveformGraph>
                        <WaveformGraph id="scatter" className="half" label="Yield vs temperature" xLabel="Temperature" xUnit="°C" xFormat="plain"></WaveformGraph>
                    </div>
                </section>
                <section>
                    <h2>Styles, a log axis and annotations</h2>
                    <p>Bars, a step plot and a line on one graph, and a frequency response on a logarithmic x axis with the corner frequency annotated. Annotations are placed in data coordinates and, with a plot named, take their y from it.</p>
                    <div className="row">
                        <WaveformGraph id="styles" className="half" label="Histogram, step and mean" xLabel="Bin" xFormat="plain" showCursorLegend={false}></WaveformGraph>
                        <WaveformGraph id="response" className="half" label="Filter response" xLabel="Frequency" xUnit="Hz" xLogarithmic></WaveformGraph>
                    </div>
                    <p className="hint">Keyboard: the legend and the tool palette are each one tab stop; the arrow keys move inside them and Enter or Space activates. The plot itself is a tab stop for the cursor and zoom keys listed above, and its label is a summary of what it shows.</p>
                </section>
            </div>
        </div>
    );
};

export default App;

react/App.css

smart-waveform-graph {
    --smart-waveform-height: 420px;
}

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

smart-waveform-graph.half {
    --smart-waveform-height: 320px;
    flex: 1 1 420px;
    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.WaveformGraph displays complete records against engineering axes: waveforms with a start time and a sample interval, or XY pairs, with cursors, annotations and zoom.</h2>
            <p>
                It is the plot an acquisition ends in. The strip chart takes samples one at a time, the scope takes triggered captures and the trend takes historian time; the waveform graph takes a record and draws it whole. Plots share the x axis and each is read on a y scale. Scales are overlaid on one plot area or stacked in bands. A cursor is free or locked to a plot, and the cursor legend reads every cursor and the difference between the first two. Records are reduced to one column per pixel with the minimum and maximum kept, so a one-sample spike still reaches its height.
            </p>
        </section>

        <section>
            <h2>A four-channel acquisition with cursors</h2>
            <p>
                One capture of 20,000 samples per channel at 100 kS/s from a test rig: the drive voltage, the motor current and two accelerometers. Drag a cursor, or click the plot to move the active one; press N to switch cursors, the arrow keys to step, + and - to zoom and 0 to fit. Drag the plot to pan, use the wheel to zoom about the pointer, hold Shift and drag to zoom into a box, and double-click to fit again.
            </p>
            <smart-waveform-graph id="capture" label="Rig 4, capture 1182" x-label="Time" x-unit="s"></smart-waveform-graph>
            <div class="demo-actions">
                <button type="button" id="recapture">New capture</button>
                <button type="button" id="stack">Stack the scales</button>
                <label><input type="checkbox" id="lockCursors" checked /> Cursors locked to the current</label>
                <span id="captureLog" class="demo-log">The export button under the plot raises exportRequest with the CSV; this page downloads it.</span>
            </div>
        </section>

        <section>
            <h2>XY plots: a hysteresis loop and a scatter</h2>
            <p>
                A plot with an <code>x</code> array is drawn as given, in the order given, so a closed curve stays closed. Points draw a scatter. The scale is fixed by its limits here rather than following the data.
            </p>
            <div class="row">
                <smart-waveform-graph id="loop" class="half" label="B-H loop" x-label="H" x-unit="A/m" x-format="plain" show-palette="false"></smart-waveform-graph>
                <smart-waveform-graph id="scatter" class="half" label="Yield vs temperature" x-label="Temperature" x-unit="°C" x-format="plain"></smart-waveform-graph>
            </div>
        </section>

        <section>
            <h2>Styles, a log axis and annotations</h2>
            <p>
                Bars, a step plot and a line on one graph, and a frequency response on a logarithmic x axis with the corner frequency annotated. Annotations are placed in data coordinates and, with a plot named, take their y from it.
            </p>
            <div class="row">
                <smart-waveform-graph id="styles" class="half" label="Histogram, step and mean" x-label="Bin" x-format="plain" show-cursor-legend="false"></smart-waveform-graph>
                <smart-waveform-graph id="response" class="half" label="Filter response" x-label="Frequency" x-unit="Hz" x-logarithmic></smart-waveform-graph>
            </div>
            <p class="hint">Keyboard: the legend and the tool palette are each one tab stop; the arrow keys move inside them and Enter or Space activates. The plot itself is a tab stop for the cursor and zoom keys listed above, and its label is a summary of what it shows.</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.waveformgraph.js";


/* Every record on this page is generated with known content, so what the cursors read can
   be checked against what was put in. The seam is the plots property: a digitizer's
   callback 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 acquisition ───────────────────────────────────────────────── */
        const capture = document.getElementById('capture'),
            captureLog = document.getElementById('captureLog'),
            lockCursors = document.getElementById('lockCursors'),
            stack = document.getElementById('stack');

        const RATE = 100000, N = 20000, DT = 1 / RATE;

        /* A drive step at 40 ms, the current that follows it with an L/R rise and a switching
           ripple, and two accelerometers: one with the 1x shaft component, one with a knock. */
        function acquire() {
            const drive = new Float64Array(N), current = new Float64Array(N),
                accelA = new Float64Array(N), accelB = new Float64Array(N),
                knockAt = 0.12 + Math.random() * 0.03;

            for (let i = 0; i < N; i++) {
                const t = i * DT,
                    on = t >= 0.04 ? 1 : 0,
                    rise = on ? 1 - Math.exp(-(t - 0.04) / 0.012) : 0;

                drive[i] = 24 * on + 0.4 * Math.sin(2 * Math.PI * 20000 * t) * on + 0.05 * gaussian();
                current[i] = 8.5 * rise + 0.35 * Math.sin(2 * Math.PI * 20000 * t + 1) * rise + 0.03 * gaussian();
                accelA[i] = 0.8 * Math.sin(2 * Math.PI * 47.5 * t) * rise + 0.12 * Math.sin(2 * Math.PI * 95 * t) * rise + 0.05 * gaussian();
                accelB[i] = 0.3 * Math.sin(2 * Math.PI * 47.5 * t + 0.7) * rise + 0.04 * gaussian() +
                    (t > knockAt && t < knockAt + 0.004 ? 6 * Math.exp(-(t - knockAt) / 0.001) * Math.sin(2 * Math.PI * 3200 * (t - knockAt)) : 0);
            }

            return { drive: drive, current: current, accelA: accelA, accelB: accelB, knockAt: knockAt };
        }

        let record = acquire();

        capture.scales = [
            { id: 'v', label: 'Drive', unit: 'V' },
            { id: 'a', label: 'Current', unit: 'A', position: 'right' },
            { id: 'g', label: 'Vibration', unit: 'g', position: 'right' }
        ];

        function assign() {
            capture.plots = [
                { id: 'drive', label: 'Drive', unit: 'V', y: record.drive, t0: 0, dt: DT, scale: 'v' },
                { id: 'current', label: 'Motor current', unit: 'A', y: record.current, t0: 0, dt: DT, scale: 'a' },
                { id: 'accelA', label: 'Bearing DE', unit: 'g', y: record.accelA, t0: 0, dt: DT, scale: 'g' },
                { id: 'accelB', label: 'Bearing NDE', unit: 'g', y: record.accelB, t0: 0, dt: DT, scale: 'g' }
            ];
            capture.annotations = [
                { plot: 'drive', x: 0.04, text: 'drive on' },
                { plot: 'accelB', x: record.knockAt + 0.0003, text: 'knock' }
            ];
        }

        assign();

        capture.cursors = [
            { id: 'c1', label: 'C1', x: 0.04, plot: 'current' },
            { id: 'c2', label: 'C2', x: 0.052, plot: 'current' }
        ];

        lockCursors.addEventListener('change', function () {
            capture.cursors = capture.cursors.map(function (cursor, i) {
                return lockCursors.checked ? { id: cursor.id, label: cursor.label, x: cursor.x, plot: 'current' } :
                    { id: cursor.id, label: cursor.label, x: cursor.x, y: 4 + i * 2 };
            });
        });

        document.getElementById('recapture').addEventListener('click', function () {
            record = acquire();
            assign();
            captureLog.textContent = 'A new record of ' + N + ' samples per channel. The cursors and the zoom stayed where they were.';
        });

        stack.addEventListener('click', function () {
            capture.layout = capture.layout === 'stacked' ? 'overlaid' : 'stacked';
            stack.textContent = capture.layout === 'stacked' ? 'Overlay the scales' : 'Stack the scales';
        });

        capture.addEventListener('cursorChange', function (event) {
            captureLog.textContent = 'cursorChange: ' + event.detail.id + ' at ' + (event.detail.x * 1000).toFixed(3) + ' ms, ' + event.detail.y.toFixed(3) + ' A';
        });

        capture.addEventListener('zoom', function (event) {
            captureLog.textContent = event.detail.fitted ? 'zoom: fitted to the record' :
                'zoom: ' + (event.detail.xMin * 1000).toFixed(2) + ' ms to ' + (event.detail.xMax * 1000).toFixed(2) + ' ms';
        });

        /* The palette's CSV button hands the page the text; the page decides what to do with it. */
        capture.addEventListener('exportRequest', function (event) {
            const blob = new Blob([event.detail.data], { type: 'text/csv' }),
                link = document.createElement('a');

            link.href = URL.createObjectURL(blob);
            link.download = 'capture-1182.csv';
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
            captureLog.textContent = 'exportRequest: ' + event.detail.data.split('\n').length + ' lines of CSV downloaded.';
        });

        /* ── XY plots ──────────────────────────────────────────────────────── */
        const loop = document.getElementById('loop'),
            scatter = document.getElementById('scatter');

        const h = [], b = [], STEPS = 400;

        for (let i = 0; i <= STEPS; i++) {
            /* One cycle of field: up, down and back, with the flux lagging it. */
            const phase = (i / STEPS) * 2 * Math.PI,
                field = 800 * Math.sin(phase);

            h.push(field);
            b.push(1.2 * Math.tanh((field + 180 * Math.cos(phase)) / 260));
        }

        loop.scales = [{ id: 'b', label: 'B', unit: 'T', min: -1.5, max: 1.5 }];
        loop.plots = [{ id: 'bh', label: 'M-19 steel', unit: 'T', x: h, y: b, scale: 'b' }];
        loop.xMin = -900;
        loop.xMax = 900;
        loop.showCursorLegend = false;

        const temperatures = [], yields = [];

        for (let i = 0; i < 80; i++) {
            const t = 40 + Math.random() * 45;

            temperatures.push(t);
            yields.push(Math.max(80, Math.min(100, 97.5 - 0.0055 * Math.pow(t - 62, 2) + gaussian() * 0.9)));
        }

        scatter.scales = [{ id: 'y', label: 'Yield', unit: '%', min: 80, max: 100 }];
        scatter.plots = [{ id: 'runs', label: 'Batches', unit: '%', x: temperatures, y: yields, style: 'points', scale: 'y' }];
        scatter.cursors = [{ id: 'best', label: 'target', x: 62, y: 97.5 }];
        scatter.annotations = [{ x: 62, y: 97.5, text: 'optimum 62 °C' }];

        /* ── Styles and a log axis ─────────────────────────────────────────── */
        const styles = document.getElementById('styles'),
            response = document.getElementById('response');

        const counts = [], edges = [], cumulative = [];
        let total = 0;

        for (let i = 0; i < 24; i++) {
            const count = Math.round(600 * Math.exp(-Math.pow((i - 11) / 4.5, 2)) + Math.random() * 15);

            edges.push(i);
            counts.push(count);
            total += count;
        }

        let running = 0;

        counts.forEach(function (count) {
            running += count;
            cumulative.push(running / total * 600);
        });

        styles.scales = [{ id: 'n', label: 'Count' }];
        styles.plots = [
            { id: 'hist', label: 'Count', y: counts, x: edges, style: 'bars', scale: 'n' },
            { id: 'cum', label: 'Cumulative (scaled)', y: cumulative, x: edges, style: 'step', scale: 'n' },
            { id: 'mean', label: 'Mean', y: edges.map(() => total / 24), x: edges, style: 'line', scale: 'n' }
        ];
        styles.showPalette = false;

        const frequencies = [], magnitude = [], phase = [], FC = 1000;

        for (let i = 0; i <= 200; i++) {
            const f = Math.pow(10, 1 + i * 0.02),
                ratio = f / FC,
                gain = 1 / Math.sqrt(1 + Math.pow(ratio, 4));

            frequencies.push(f);
            magnitude.push(20 * Math.log10(gain));
            phase.push(-Math.atan2(Math.SQRT2 * ratio, 1 - ratio * ratio) * 180 / Math.PI);
        }

        response.scales = [
            { id: 'db', label: 'Gain', unit: 'dB', min: -80, max: 5 },
            { id: 'deg', label: 'Phase', unit: '°', min: -180, max: 0, position: 'right' }
        ];
        response.plots = [
            { id: 'mag', label: 'Magnitude', unit: 'dB', x: frequencies, y: magnitude, scale: 'db' },
            { id: 'ph', label: 'Phase', unit: '°', x: frequencies, y: phase, scale: 'deg' }
        ];
        response.annotations = [{ plot: 'mag', x: FC, text: '-3 dB at 1 kHz' }];
        response.cursors = [{ id: 'fc', label: 'fc', x: FC, plot: 'mag' }];
        response.showPalette = false;
      });
    });
  }
};
</script>

<style>
smart-waveform-graph {
    --smart-waveform-height: 420px;
}

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

smart-waveform-graph.half {
    --smart-waveform-height: 320px;
    flex: 1 1 420px;
    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>