Trend

angular/app.component.html

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

        <section id="overview">
            <h2>Smart.Trend is a historian trend chart: pens drawn against their own engineering ranges, a time axis that can be panned through the history, a cursor that reads every pen at one point in time, and a live mode that follows the newest sample.</h2>
            <p>
                Trend is one of three time-series components. <code>smart-strip-chart</code> is for data acquisition at high sample rates, <code>smart-scope</code> is for triggered captures, and Trend is for process data at around one sample per second over hours. History is supplied by the application: the trend keeps the data it has been given and raises the <code>historyRequest</code> event when it is panned to a time range it has no samples for. <code>Smart.Industrial.Connect.trend</code> answers the request from a data session and pushes live samples as they arrive.
            </p>
        </section>

        <section>
            <h2>Four pens with live data and history</h2>
            <p>
                Drag the plot to the left to request the earlier hours from the session; the simulator returns the same signals evaluated in the past. Use the mouse wheel to zoom around the pointer, click to place a cursor, and double-click or press <em>L</em> to return to live mode. Each pen is drawn as a percentage of its own range, so a pressure in bar and a speed in RPM share one plot, and the readout shows the engineering values.
            </p>
            <smart-trend id="trend" label="Area 2 · historian" [timeSpan]="900000" [gapAfter]="10000"></smart-trend>
            <div class="demo-actions">
                <label>Window
                    <select id="span">
                        <option value="300000">5 minutes</option>
                        <option value="900000" selected>15 minutes</option>
                        <option value="3600000">1 hour</option>
                        <option value="14400000">4 hours</option>
                        <option value="28800000">8 hours</option>
                    </select>
                </label>
                <label>Scale
                    <select id="scale">
                        <option value="percent" selected>percent of range</option>
                        <option value="value">shared value axis</option>
                    </select>
                </label>
                <button type="button" id="back">← 15 min</button>
                <button type="button" id="forward">15 min →</button>
                <button type="button" id="live">Live</button>
                <button type="button" id="csv">Copy CSV</button>
                <span id="status" class="stats"></span>
            </div>
            <p class="hint">
                Keyboard: the pens panel is a single tab stop. Use the arrow keys to move between pens and Enter or Space to show or hide one. The plot can also be focused: the left and right arrow keys move the cursor, plus and minus zoom, L returns to live mode and Escape clears the cursor.
            </p>
        </section>

        <section>
            <h2>Model outputs on the same axes</h2>
            <p>
                The band is a model's expected value with its 95% confidence interval for the temperature pen, scaled against the pen's own range. The markers are the anomalies flagged by the model: an instant on the flow pen, an interval on the temperature pen, and one that is not attached to a pen. The model in this demo is a running mean and its spread computed in the page; in an application the values come from the model in use, and the trend draws what it is given.
            </p>
            <smart-trend id="model" label="TIC-201 · forecast and anomalies" [timeSpan]="3600000"></smart-trend>
            <div class="controls">
                <button type="button" id="nextMarker">Next marker (N)</button>
                <button type="button" id="prevMarker">Previous marker (P)</button>
                <button type="button" id="toggleBands">Hide the band</button>
                <span id="verdict" class="stats">Click a marker, or press Enter on it, to give the model a verdict.</span>
            </div>
            <p class="hint">
                The <code>markerClick</code> event is where the operator's feedback starts. This page records a true or false positive next to the marker, which can be used to train the next model.
            </p>
        </section>

    </div>
</div>

angular/app.component.ts

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

import { TrendModule } from 'smart-industrial/angular/trend';

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

import { runDemo } from './demo';

/**
 * Smart.UI Industrial - Trend 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: [TrendModule],
    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. */
declare const Smart: any;

/* The trend is wired to a session and nothing else. The simulator adapter carries
   history - the same signals evaluated in the past - so the screen runs with no server;
   swap the adapter for 'poll' with a historyUrl, or 'manual' with your own history(), and
   nothing on this page changes. */

export function runDemo(): void {
    const Connect = window.Smart.Industrial.Connect,
        trend = document.getElementById('trend'),
        span = document.getElementById('span'),
        scale = document.getElementById('scale'),
        back = document.getElementById('back'),
        forward = document.getElementById('forward'),
        live = document.getElementById('live'),
        csv = document.getElementById('csv'),
        status = document.getElementById('status');

    /* Slow, plausible signals: a reactor temperature on a 40-minute cycle, a pressure on
       a 23-minute one, a flow with more noise, a speed that steps. */
    const session = Connect.open('simulator', {
        interval: 1000,
        tags: {
            'TT-2108': { min: 62, max: 118, period: 2400000, noise: 0.01 },
            'PT-2101': { min: 4.2, max: 8.4, period: 1380000, noise: 0.02 },
            'FT-2104': { min: 220, max: 410, period: 700000, noise: 0.06 },
            'ST-2112': { min: 3900, max: 5200, period: 3600000, kind: 'step', noise: 0.004 }
        }
    });

    trend.pens = [
        { field: 'temperature', label: 'TT-2108 Reactor outlet', unit: '°C', min: -20, max: 150, precision: 1 },
        { field: 'pressure', label: 'PT-2101 Header pressure', unit: 'bar', min: 0, max: 10, precision: 2 },
        { field: 'flow', label: 'FT-2104 Feed flow', unit: 'L/min', min: 0, max: 500, precision: 0 },
        { field: 'speed', label: 'ST-2112 Agitator speed', unit: 'RPM', min: 0, max: 6000, precision: 0 }
    ];

    /* Live samples every second, and the answer to every historyRequest, both from the
       one session. */
    Connect.trend(trend, {
        temperature: 'TT-2108',
        pressure: 'PT-2101',
        flow: 'FT-2104',
        speed: 'ST-2112'
    }, { session: session, interval: 1000, historyOptions: { resolution: 2000 } });

    /* ── Controls ────────────────────────────────────────────────────────── */

    span.addEventListener('change', function () {
        trend.timeSpan = Number(span.value);
    });

    scale.addEventListener('change', function () {
        trend.scaleMode = scale.value;
    });

    back.addEventListener('click', function () {
        trend.pan(-900000);
    });

    forward.addEventListener('click', function () {
        trend.pan(900000);
    });

    live.addEventListener('click', function () {
        trend.goLive();
    });

    csv.addEventListener('click', function () {
        const text = trend.toCSV();

        if (navigator.clipboard && navigator.clipboard.writeText) {
            navigator.clipboard.writeText(text);
        }

        status.textContent = text.split('\n').length - 1 + ' rows copied';
    });

    /* ── What the trend reports ──────────────────────────────────────────── */

    trend.addEventListener('windowChange', function (event) {
        const from = new Date(event.detail.from).toLocaleTimeString('en-GB', { hour12: false }),
            to = new Date(event.detail.to).toLocaleTimeString('en-GB', { hour12: false });

        status.textContent = (event.detail.live ? 'live · ' : 'paused · ') + from + ' – ' + to;
        span.value = String(trend.timeSpan);
    });

    trend.addEventListener('historyRequest', function (event) {
        status.textContent = 'fetching ' + Math.round((event.detail.to - event.detail.from) / 60000) + ' min of history…';
    });

    trend.addEventListener('cursorChange', function (event) {
        if (event.detail.time === null) {
            return;
        }

        status.textContent = 'cursor at ' + new Date(event.detail.time).toLocaleTimeString('en-GB', { hour12: false });
    });

    /* ---------------------------------------------------------------- model outputs */

    /* A stand-in for a forecasting model: an hour of two pens, a running mean and spread as
       the band, and three anomalies the stand-in 'found'. A plant's model produces the same
       shapes - band records and markers - from wherever it runs. */
    const model = document.getElementById('model'),
        verdict = document.getElementById('verdict'),
        start = Date.now() - 3600000,
        records = [],
        band = [];
    let mean = 78, spread = 1.6;

    for (let i = 0; i <= 720; i++) {
        const at = start + i * 5000,
            temperature = 78 + 3 * Math.sin(i / 90) + (i > 480 && i < 560 ? 7 : 0) + (Math.random() - 0.5) * 0.8,
            flow = 42 + 2 * Math.cos(i / 70) + (i === 260 ? -9 : 0) + (Math.random() - 0.5) * 0.4;

        records.push({ timestamp: at, temperature: temperature, flow: flow });

        /* The forecast: exponentially weighted mean and deviation of what came before. */
        mean += 0.02 * (temperature - mean);
        spread += 0.02 * (Math.abs(temperature - mean) - spread);

        if (i % 12 === 0) {
            band.push({ timestamp: at, expected: mean, lower: mean - 1.96 * spread, upper: mean + 1.96 * spread });
        }
    }

    model.live = false;
    model.pens = [
        { field: 'temperature', label: 'TIC-201 Reactor temperature', unit: '°C', min: 60, max: 100 },
        { field: 'flow', label: 'FIC-203 Feed flow', unit: 'm³/h', min: 0, max: 60 }
    ];
    model.bands = [{ field: 'temperature', label: 'Forecast', confidence: 0.95, records: band }];
    model.markers = [
        { id: 'a-1', field: 'flow', timestamp: start + 260 * 5000, severity: 'advisory', score: 0.44, label: 'Flow dip', description: 'One sample 9 m³/h below the forecast.' },
        { id: 'a-2', field: 'temperature', timestamp: start + 485 * 5000, timestampEnd: start + 558 * 5000, severity: 'warning', score: 0.83, label: 'Above forecast', description: 'Outside the 95 % band for 6 min.' },
        { id: 'a-3', timestamp: start + 650 * 5000, severity: 'critical', score: 0.96, label: 'Sensor flatline', description: 'TIC-201 reported the same value for 40 s.' }
    ];
    model.data = records;

    const verdicts = {};

    model.addEventListener('markerClick', function (event) {
        const marker = event.detail.marker,
            answer = verdicts[marker.id] === 'true positive' ? 'false positive' : 'true positive';

        verdicts[marker.id] = answer;
        verdict.textContent = marker.label + ' (' + marker.severity + ', score ' + marker.score.toFixed(2) + '): recorded as ' + answer + '. Click again to change it.';
    });

    document.getElementById('nextMarker').addEventListener('click', function () {
        model.nextMarker();
    });

    document.getElementById('prevMarker').addEventListener('click', function () {
        model.previousMarker();
    });

    document.getElementById('toggleBands').addEventListener('click', function () {
        model.showBands = !model.showBands;
        this.textContent = model.showBands ? 'Hide the band' : 'Show the band';
    });
}

angular/app.component.css

smart-trend {
    width: 100%;
    --smart-trend-height: 460px;
}

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

.demo-actions label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
}

.stats {
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    opacity: 0.75;
}

.hint {
    margin-top: 8px;
    font-size: 12px;
    opacity: 0.75;
}

/* ── 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 { Trend } from 'smart-industrial/react/trend';
import 'smart-industrial/source/modules/smart.industrial.connect.js';

const Smart = window.Smart;

/* The demo logic is the HTML demo's: it feeds the elements the way a plant's data would. */
/* The trend is wired to a session and nothing else. The simulator adapter carries
   history - the same signals evaluated in the past - so the screen runs with no server;
   swap the adapter for 'poll' with a historyUrl, or 'manual' with your own history(), and
   nothing on this page changes. */

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;
            }

            const Connect = window.Smart.Industrial.Connect,
                trend = document.getElementById('trend'),
                span = document.getElementById('span'),
                scale = document.getElementById('scale'),
                back = document.getElementById('back'),
                forward = document.getElementById('forward'),
                live = document.getElementById('live'),
                csv = document.getElementById('csv'),
                status = document.getElementById('status');

            /* Slow, plausible signals: a reactor temperature on a 40-minute cycle, a pressure on
               a 23-minute one, a flow with more noise, a speed that steps. */
            const session = Connect.open('simulator', {
                interval: 1000,
                tags: {
                    'TT-2108': { min: 62, max: 118, period: 2400000, noise: 0.01 },
                    'PT-2101': { min: 4.2, max: 8.4, period: 1380000, noise: 0.02 },
                    'FT-2104': { min: 220, max: 410, period: 700000, noise: 0.06 },
                    'ST-2112': { min: 3900, max: 5200, period: 3600000, kind: 'step', noise: 0.004 }
                }
            });

            trend.pens = [
                { field: 'temperature', label: 'TT-2108 Reactor outlet', unit: '°C', min: -20, max: 150, precision: 1 },
                { field: 'pressure', label: 'PT-2101 Header pressure', unit: 'bar', min: 0, max: 10, precision: 2 },
                { field: 'flow', label: 'FT-2104 Feed flow', unit: 'L/min', min: 0, max: 500, precision: 0 },
                { field: 'speed', label: 'ST-2112 Agitator speed', unit: 'RPM', min: 0, max: 6000, precision: 0 }
            ];

            /* Live samples every second, and the answer to every historyRequest, both from the
               one session. */
            Connect.trend(trend, {
                temperature: 'TT-2108',
                pressure: 'PT-2101',
                flow: 'FT-2104',
                speed: 'ST-2112'
            }, { session: session, interval: 1000, historyOptions: { resolution: 2000 } });

            /* ── Controls ────────────────────────────────────────────────────────── */

            span.addEventListener('change', function () {
                trend.timeSpan = Number(span.value);
            });

            scale.addEventListener('change', function () {
                trend.scaleMode = scale.value;
            });

            back.addEventListener('click', function () {
                trend.pan(-900000);
            });

            forward.addEventListener('click', function () {
                trend.pan(900000);
            });

            live.addEventListener('click', function () {
                trend.goLive();
            });

            csv.addEventListener('click', function () {
                const text = trend.toCSV();

                if (navigator.clipboard && navigator.clipboard.writeText) {
                    navigator.clipboard.writeText(text);
                }

                status.textContent = text.split('\n').length - 1 + ' rows copied';
            });

            /* ── What the trend reports ──────────────────────────────────────────── */

            trend.addEventListener('windowChange', function (event) {
                const from = new Date(event.detail.from).toLocaleTimeString('en-GB', { hour12: false }),
                    to = new Date(event.detail.to).toLocaleTimeString('en-GB', { hour12: false });

                status.textContent = (event.detail.live ? 'live · ' : 'paused · ') + from + ' – ' + to;
                span.value = String(trend.timeSpan);
            });

            trend.addEventListener('historyRequest', function (event) {
                status.textContent = 'fetching ' + Math.round((event.detail.to - event.detail.from) / 60000) + ' min of history…';
            });

            trend.addEventListener('cursorChange', function (event) {
                if (event.detail.time === null) {
                    return;
                }

                status.textContent = 'cursor at ' + new Date(event.detail.time).toLocaleTimeString('en-GB', { hour12: false });
            });

            /* ---------------------------------------------------------------- model outputs */

            /* A stand-in for a forecasting model: an hour of two pens, a running mean and spread as
               the band, and three anomalies the stand-in 'found'. A plant's model produces the same
               shapes - band records and markers - from wherever it runs. */
            const model = document.getElementById('model'),
                verdict = document.getElementById('verdict'),
                start = Date.now() - 3600000,
                records = [],
                band = [];
            let mean = 78, spread = 1.6;

            for (let i = 0; i <= 720; i++) {
                const at = start + i * 5000,
                    temperature = 78 + 3 * Math.sin(i / 90) + (i > 480 && i < 560 ? 7 : 0) + (Math.random() - 0.5) * 0.8,
                    flow = 42 + 2 * Math.cos(i / 70) + (i === 260 ? -9 : 0) + (Math.random() - 0.5) * 0.4;

                records.push({ timestamp: at, temperature: temperature, flow: flow });

                /* The forecast: exponentially weighted mean and deviation of what came before. */
                mean += 0.02 * (temperature - mean);
                spread += 0.02 * (Math.abs(temperature - mean) - spread);

                if (i % 12 === 0) {
                    band.push({ timestamp: at, expected: mean, lower: mean - 1.96 * spread, upper: mean + 1.96 * spread });
                }
            }

            model.live = false;
            model.pens = [
                { field: 'temperature', label: 'TIC-201 Reactor temperature', unit: '°C', min: 60, max: 100 },
                { field: 'flow', label: 'FIC-203 Feed flow', unit: 'm³/h', min: 0, max: 60 }
            ];
            model.bands = [{ field: 'temperature', label: 'Forecast', confidence: 0.95, records: band }];
            model.markers = [
                { id: 'a-1', field: 'flow', timestamp: start + 260 * 5000, severity: 'advisory', score: 0.44, label: 'Flow dip', description: 'One sample 9 m³/h below the forecast.' },
                { id: 'a-2', field: 'temperature', timestamp: start + 485 * 5000, timestampEnd: start + 558 * 5000, severity: 'warning', score: 0.83, label: 'Above forecast', description: 'Outside the 95 % band for 6 min.' },
                { id: 'a-3', timestamp: start + 650 * 5000, severity: 'critical', score: 0.96, label: 'Sensor flatline', description: 'TIC-201 reported the same value for 40 s.' }
            ];
            model.data = records;

            const verdicts = {};

            model.addEventListener('markerClick', function (event) {
                const marker = event.detail.marker,
                    answer = verdicts[marker.id] === 'true positive' ? 'false positive' : 'true positive';

                verdicts[marker.id] = answer;
                verdict.textContent = marker.label + ' (' + marker.severity + ', score ' + marker.score.toFixed(2) + '): recorded as ' + answer + '. Click again to change it.';
            });

            document.getElementById('nextMarker').addEventListener('click', function () {
                model.nextMarker();
            });

            document.getElementById('prevMarker').addEventListener('click', function () {
                model.previousMarker();
            });

            document.getElementById('toggleBands').addEventListener('click', function () {
                model.showBands = !model.showBands;
                this.textContent = model.showBands ? 'Hide the band' : 'Show the band';
            });
        });

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

    return (
        <div className="react-root" ref={root} theme="industrial">
            <div className="smart-demo-container">
                <section id="overview">
                    <h2>Smart.Trend is a historian trend chart: pens drawn against their own engineering ranges, a time axis that can be panned through the history, a cursor that reads every pen at one point in time, and a live mode that follows the newest sample.</h2>
                    <p>Trend is one of three time-series components. <code>smart-strip-chart</code> is for data acquisition at high sample rates, <code>smart-scope</code> is for triggered captures, and Trend is for process data at around one sample per second over hours. History is supplied by the application: the trend keeps the data it has been given and raises the <code>historyRequest</code> event when it is panned to a time range it has no samples for. <code>Smart.Industrial.Connect.trend</code> answers the request from a data session and pushes live samples as they arrive.</p>
                </section>
                <section>
                    <h2>Four pens with live data and history</h2>
                    <p>Drag the plot to the left to request the earlier hours from the session; the simulator returns the same signals evaluated in the past. Use the mouse wheel to zoom around the pointer, click to place a cursor, and double-click or press <em>L</em> to return to live mode. Each pen is drawn as a percentage of its own range, so a pressure in bar and a speed in RPM share one plot, and the readout shows the engineering values.</p>
                    <Trend id="trend" label="Area 2 · historian" timeSpan={900000} gapAfter={10000}></Trend>
                    <div className="demo-actions">
                        <label>
                            Window
                            <select id="span" defaultValue="900000"><option value="300000">5 minutes</option> <option value="900000">15 minutes</option> <option value="3600000">1 hour</option> <option value="14400000">4 hours</option> <option value="28800000">8 hours</option></select>
                        </label>
                        <label>
                            Scale
                            <select id="scale" defaultValue="percent"><option value="percent">percent of range</option> <option value="value">shared value axis</option></select>
                        </label>
                        <button type="button" id="back">← 15 min</button>
                        <button type="button" id="forward">15 min →</button>
                        <button type="button" id="live">Live</button>
                        <button type="button" id="csv">Copy CSV</button>
                        <span id="status" className="stats"></span>
                    </div>
                    <p className="hint">Keyboard: the pens panel is a single tab stop. Use the arrow keys to move between pens and Enter or Space to show or hide one. The plot can also be focused: the left and right arrow keys move the cursor, plus and minus zoom, L returns to live mode and Escape clears the cursor.</p>
                </section>
                <section>
                    <h2>Model outputs on the same axes</h2>
                    <p>The band is a model's expected value with its 95% confidence interval for the temperature pen, scaled against the pen's own range. The markers are the anomalies flagged by the model: an instant on the flow pen, an interval on the temperature pen, and one that is not attached to a pen. The model in this demo is a running mean and its spread computed in the page; in an application the values come from the model in use, and the trend draws what it is given.</p>
                    <Trend id="model" label="TIC-201 · forecast and anomalies" timeSpan={3600000}></Trend>
                    <div className="controls">
                        <button type="button" id="nextMarker">Next marker (N)</button>
                        <button type="button" id="prevMarker">Previous marker (P)</button>
                        <button type="button" id="toggleBands">Hide the band</button>
                        <span id="verdict" className="stats">Click a marker, or press Enter on it, to give the model a verdict.</span>
                    </div>
                    <p className="hint">The <code>markerClick</code> event is where the operator's feedback starts. This page records a true or false positive next to the marker, which can be used to train the next model.</p>
                </section>
            </div>
        </div>
    );
};

export default App;

react/App.css

smart-trend {
    width: 100%;
    --smart-trend-height: 460px;
}

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

.demo-actions label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
}

.stats {
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    opacity: 0.75;
}

.hint {
    margin-top: 8px;
    font-size: 12px;
    opacity: 0.75;
}

/* ── 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.Trend is a historian trend chart: pens drawn against their own engineering ranges, a time axis that can be panned through the history, a cursor that reads every pen at one point in time, and a live mode that follows the newest sample.</h2>
            <p>
                Trend is one of three time-series components. <code>smart-strip-chart</code> is for data acquisition at high sample rates, <code>smart-scope</code> is for triggered captures, and Trend is for process data at around one sample per second over hours. History is supplied by the application: the trend keeps the data it has been given and raises the <code>historyRequest</code> event when it is panned to a time range it has no samples for. <code>Smart.Industrial.Connect.trend</code> answers the request from a data session and pushes live samples as they arrive.
            </p>
        </section>

        <section>
            <h2>Four pens with live data and history</h2>
            <p>
                Drag the plot to the left to request the earlier hours from the session; the simulator returns the same signals evaluated in the past. Use the mouse wheel to zoom around the pointer, click to place a cursor, and double-click or press <em>L</em> to return to live mode. Each pen is drawn as a percentage of its own range, so a pressure in bar and a speed in RPM share one plot, and the readout shows the engineering values.
            </p>
            <smart-trend id="trend" label="Area 2 · historian" time-span="900000" gap-after="10000"></smart-trend>
            <div class="demo-actions">
                <label>Window
                    <select id="span">
                        <option value="300000">5 minutes</option>
                        <option value="900000" selected>15 minutes</option>
                        <option value="3600000">1 hour</option>
                        <option value="14400000">4 hours</option>
                        <option value="28800000">8 hours</option>
                    </select>
                </label>
                <label>Scale
                    <select id="scale">
                        <option value="percent" selected>percent of range</option>
                        <option value="value">shared value axis</option>
                    </select>
                </label>
                <button type="button" id="back">← 15 min</button>
                <button type="button" id="forward">15 min →</button>
                <button type="button" id="live">Live</button>
                <button type="button" id="csv">Copy CSV</button>
                <span id="status" class="stats"></span>
            </div>
            <p class="hint">
                Keyboard: the pens panel is a single tab stop. Use the arrow keys to move between pens and Enter or Space to show or hide one. The plot can also be focused: the left and right arrow keys move the cursor, plus and minus zoom, L returns to live mode and Escape clears the cursor.
            </p>
        </section>

        <section>
            <h2>Model outputs on the same axes</h2>
            <p>
                The band is a model's expected value with its 95% confidence interval for the temperature pen, scaled against the pen's own range. The markers are the anomalies flagged by the model: an instant on the flow pen, an interval on the temperature pen, and one that is not attached to a pen. The model in this demo is a running mean and its spread computed in the page; in an application the values come from the model in use, and the trend draws what it is given.
            </p>
            <smart-trend id="model" label="TIC-201 · forecast and anomalies" time-span="3600000"></smart-trend>
            <div class="controls">
                <button type="button" id="nextMarker">Next marker (N)</button>
                <button type="button" id="prevMarker">Previous marker (P)</button>
                <button type="button" id="toggleBands">Hide the band</button>
                <span id="verdict" class="stats">Click a marker, or press Enter on it, to give the model a verdict.</span>
            </div>
            <p class="hint">
                The <code>markerClick</code> event is where the operator's feedback starts. This page records a true or false positive next to the marker, which can be used to train the next model.
            </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.industrial.connect.js";
import "smart-industrial/source/modules/smart.trend.js";

const Smart = window.Smart;

/* The trend is wired to a session and nothing else. The simulator adapter carries
   history - the same signals evaluated in the past - so the screen runs with no server;
   swap the adapter for 'poll' with a historyUrl, or 'manual' with your own history(), and
   nothing on this page changes. */

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(() => {
        const Connect = window.Smart.Industrial.Connect,
            trend = document.getElementById('trend'),
            span = document.getElementById('span'),
            scale = document.getElementById('scale'),
            back = document.getElementById('back'),
            forward = document.getElementById('forward'),
            live = document.getElementById('live'),
            csv = document.getElementById('csv'),
            status = document.getElementById('status');

        /* Slow, plausible signals: a reactor temperature on a 40-minute cycle, a pressure on
           a 23-minute one, a flow with more noise, a speed that steps. */
        const session = Connect.open('simulator', {
            interval: 1000,
            tags: {
                'TT-2108': { min: 62, max: 118, period: 2400000, noise: 0.01 },
                'PT-2101': { min: 4.2, max: 8.4, period: 1380000, noise: 0.02 },
                'FT-2104': { min: 220, max: 410, period: 700000, noise: 0.06 },
                'ST-2112': { min: 3900, max: 5200, period: 3600000, kind: 'step', noise: 0.004 }
            }
        });

        trend.pens = [
            { field: 'temperature', label: 'TT-2108 Reactor outlet', unit: '°C', min: -20, max: 150, precision: 1 },
            { field: 'pressure', label: 'PT-2101 Header pressure', unit: 'bar', min: 0, max: 10, precision: 2 },
            { field: 'flow', label: 'FT-2104 Feed flow', unit: 'L/min', min: 0, max: 500, precision: 0 },
            { field: 'speed', label: 'ST-2112 Agitator speed', unit: 'RPM', min: 0, max: 6000, precision: 0 }
        ];

        /* Live samples every second, and the answer to every historyRequest, both from the
           one session. */
        Connect.trend(trend, {
            temperature: 'TT-2108',
            pressure: 'PT-2101',
            flow: 'FT-2104',
            speed: 'ST-2112'
        }, { session: session, interval: 1000, historyOptions: { resolution: 2000 } });

        /* ── Controls ────────────────────────────────────────────────────────── */

        span.addEventListener('change', function () {
            trend.timeSpan = Number(span.value);
        });

        scale.addEventListener('change', function () {
            trend.scaleMode = scale.value;
        });

        back.addEventListener('click', function () {
            trend.pan(-900000);
        });

        forward.addEventListener('click', function () {
            trend.pan(900000);
        });

        live.addEventListener('click', function () {
            trend.goLive();
        });

        csv.addEventListener('click', function () {
            const text = trend.toCSV();

            if (navigator.clipboard && navigator.clipboard.writeText) {
                navigator.clipboard.writeText(text);
            }

            status.textContent = text.split('\n').length - 1 + ' rows copied';
        });

        /* ── What the trend reports ──────────────────────────────────────────── */

        trend.addEventListener('windowChange', function (event) {
            const from = new Date(event.detail.from).toLocaleTimeString('en-GB', { hour12: false }),
                to = new Date(event.detail.to).toLocaleTimeString('en-GB', { hour12: false });

            status.textContent = (event.detail.live ? 'live · ' : 'paused · ') + from + ' – ' + to;
            span.value = String(trend.timeSpan);
        });

        trend.addEventListener('historyRequest', function (event) {
            status.textContent = 'fetching ' + Math.round((event.detail.to - event.detail.from) / 60000) + ' min of history…';
        });

        trend.addEventListener('cursorChange', function (event) {
            if (event.detail.time === null) {
                return;
            }

            status.textContent = 'cursor at ' + new Date(event.detail.time).toLocaleTimeString('en-GB', { hour12: false });
        });

        /* ---------------------------------------------------------------- model outputs */

        /* A stand-in for a forecasting model: an hour of two pens, a running mean and spread as
           the band, and three anomalies the stand-in 'found'. A plant's model produces the same
           shapes - band records and markers - from wherever it runs. */
        const model = document.getElementById('model'),
            verdict = document.getElementById('verdict'),
            start = Date.now() - 3600000,
            records = [],
            band = [];
        let mean = 78, spread = 1.6;

        for (let i = 0; i <= 720; i++) {
            const at = start + i * 5000,
                temperature = 78 + 3 * Math.sin(i / 90) + (i > 480 && i < 560 ? 7 : 0) + (Math.random() - 0.5) * 0.8,
                flow = 42 + 2 * Math.cos(i / 70) + (i === 260 ? -9 : 0) + (Math.random() - 0.5) * 0.4;

            records.push({ timestamp: at, temperature: temperature, flow: flow });

            /* The forecast: exponentially weighted mean and deviation of what came before. */
            mean += 0.02 * (temperature - mean);
            spread += 0.02 * (Math.abs(temperature - mean) - spread);

            if (i % 12 === 0) {
                band.push({ timestamp: at, expected: mean, lower: mean - 1.96 * spread, upper: mean + 1.96 * spread });
            }
        }

        model.live = false;
        model.pens = [
            { field: 'temperature', label: 'TIC-201 Reactor temperature', unit: '°C', min: 60, max: 100 },
            { field: 'flow', label: 'FIC-203 Feed flow', unit: 'm³/h', min: 0, max: 60 }
        ];
        model.bands = [{ field: 'temperature', label: 'Forecast', confidence: 0.95, records: band }];
        model.markers = [
            { id: 'a-1', field: 'flow', timestamp: start + 260 * 5000, severity: 'advisory', score: 0.44, label: 'Flow dip', description: 'One sample 9 m³/h below the forecast.' },
            { id: 'a-2', field: 'temperature', timestamp: start + 485 * 5000, timestampEnd: start + 558 * 5000, severity: 'warning', score: 0.83, label: 'Above forecast', description: 'Outside the 95 % band for 6 min.' },
            { id: 'a-3', timestamp: start + 650 * 5000, severity: 'critical', score: 0.96, label: 'Sensor flatline', description: 'TIC-201 reported the same value for 40 s.' }
        ];
        model.data = records;

        const verdicts = {};

        model.addEventListener('markerClick', function (event) {
            const marker = event.detail.marker,
                answer = verdicts[marker.id] === 'true positive' ? 'false positive' : 'true positive';

            verdicts[marker.id] = answer;
            verdict.textContent = marker.label + ' (' + marker.severity + ', score ' + marker.score.toFixed(2) + '): recorded as ' + answer + '. Click again to change it.';
        });

        document.getElementById('nextMarker').addEventListener('click', function () {
            model.nextMarker();
        });

        document.getElementById('prevMarker').addEventListener('click', function () {
            model.previousMarker();
        });

        document.getElementById('toggleBands').addEventListener('click', function () {
            model.showBands = !model.showBands;
            this.textContent = model.showBands ? 'Hide the band' : 'Show the band';
        });
      });
    });
  }
};
</script>

<style>
smart-trend {
    width: 100%;
    --smart-trend-height: 460px;
}

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

.demo-actions label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
}

.stats {
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    opacity: 0.75;
}

.hint {
    margin-top: 8px;
    font-size: 12px;
    opacity: 0.75;
}

/* ── 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>