Bar Graph

angular/app.component.html

<div class="angular-root" theme="industrial">
    <div class="smart-demo-container">
        <section id="overview">
            <h2>Smart.BarGraph is a segmented level meter. Like Knob, it extends Tank.</h2>
            <p>
                Clamping, logarithmic scales, alarm ranges, units and precision are inherited from <code>Smart.Tank</code>. The component adds the segmented display and <em>peak hold</em>, which keeps a short transient visible after it has passed. A transient of a few milliseconds would not be visible on a continuous bar.
            </p>
        </section>

        <section>
            <h2>A vibration monitoring rack</h2>
            <p>
                Six bearing channels of three feed pumps, each a meter with the ISO 10816-3 zones as its alarm ranges, so a lit segment inside zone C or D takes the colour of the zone. Peak hold keeps the highest level of the last second in view, which is how a short knock on a bearing stays visible after it has passed. The readings are simulated; P-2101B carries a developing outer race defect.
            </p>
            <div class="rack">
                <div class="rack-title">Vibration · feed pumps · mm/s RMS, 10 to 1000 Hz</div>
                <div class="channels">
                    <div class="channel"><span class="caption">P-2101A DE</span><smart-bar-graph id="ch1" class="rack-meter"></smart-bar-graph></div>
                    <div class="channel"><span class="caption">P-2101A NDE</span><smart-bar-graph id="ch2" class="rack-meter"></smart-bar-graph></div>
                    <div class="channel"><span class="caption">P-2101B DE</span><smart-bar-graph id="ch3" class="rack-meter"></smart-bar-graph></div>
                    <div class="channel"><span class="caption">P-2101B NDE</span><smart-bar-graph id="ch4" class="rack-meter"></smart-bar-graph></div>
                    <div class="channel"><span class="caption">P-2101C DE</span><smart-bar-graph id="ch5" class="rack-meter"></smart-bar-graph></div>
                    <div class="channel"><span class="caption">P-2101C NDE</span><smart-bar-graph id="ch6" class="rack-meter"></smart-bar-graph></div>
                    <div class="zones">
                        <span class="zone zone-d">D &nbsp;unacceptable, above 7.1</span>
                        <span class="zone zone-c">C &nbsp;restricted, 2.8 to 7.1</span>
                        <span class="zone zone-b">B &nbsp;unrestricted, 1.4 to 2.8</span>
                        <span class="zone zone-a">A &nbsp;new machine, below 1.4</span>
                    </div>
                </div>
            </div>
            <div class="demo-actions">
                <button type="button" id="knock">Knock on P-2101A DE</button>
                <button type="button" id="resetAll">Reset the peaks</button>
                <label><input type="checkbox" id="rackPeak" checked /> Peak hold</label>
            </div>
            <p class="hint" id="rackLog">Zone boundaries follow ISO 10816-3 group 1 on a rigid foundation.</p>
        </section>

        <section>
            <h2>Peak hold</h2>
            <p>
                Both meters receive the same signal. The left meter holds its peak and lets it decay; the right meter does not. When a burst passes through, only the left meter still shows the level it reached.
            </p>
            <div class="row">
                <div class="cell"><smart-bar-graph id="withPeak"></smart-bar-graph><span>peak hold</span></div>
                <div class="cell"><smart-bar-graph id="noPeak"></smart-bar-graph><span>no peak hold</span></div>
            </div>
            <div class="demo-actions">
                <button type="button" id="burst">Send a burst</button>
                <button type="button" id="reset">Reset peaks</button>
            </div>
        </section>

        <section>
            <h2>Alarm ranges</h2>
            <p>A lit segment inside an alarm range takes the colour of the range, so the severity is shown by the segment itself.</p>
            <div class="row">
                <div class="cell"><smart-bar-graph id="vibration"></smart-bar-graph><span>Vibration, mm/s</span></div>
                <div class="cell"><smart-bar-graph id="coarse"></smart-bar-graph><span>8 segments</span></div>
                <div class="cell"><smart-bar-graph id="fine"></smart-bar-graph><span>40 segments</span></div>
            </div>
        </section>

        <section>
            <h2>Horizontal and interactive meters</h2>
            <p>
                A meter is read-only by default and does not take keyboard focus. Set the <code>interactive</code> property to make it a control that can be clicked, focused and operated with the arrow keys.
            </p>
            <div class="stack">
                <smart-bar-graph id="h1" orientation="horizontal"></smart-bar-graph>
                <smart-bar-graph id="h2" orientation="horizontal" [interactive]="true"></smart-bar-graph>
                <span id="log" class="hint">The second one is interactive: click or focus it and use the arrow keys.</span>
            </div>
        </section>
    </div>
</div>

angular/app.component.ts

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

import { BarGraphModule } from 'smart-industrial/angular/bargraph';

import { runDemo } from './demo';

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

/* ISO 10816 vibration zones, which is what makes the alarm bands on the vibration meter
   mean something rather than being decorative colour. */
const VIBRATION_ZONES = [
    { startValue: 0, endValue: 2.8, className: 'ok' },
    { startValue: 2.8, endValue: 7.1, className: 'warning' },
    { startValue: 7.1, endValue: 20, className: 'critical' }
];

export function runDemo(): void {
    /* ── The rack ─────────────────────────────────────────────────────── */
    const channels = ['ch1', 'ch2', 'ch3', 'ch4', 'ch5', 'ch6'].map((id) => document.getElementById(id)),
        rackLog = document.getElementById('rackLog'),
        rackPeak = document.getElementById('rackPeak');

    channels.forEach(function (meter) {
        meter.min = 0;
        meter.max = 12;
        meter.segments = 30;
        meter.unit = 'mm/s';
        meter.showUnit = true;
        meter.showValue = true;
        meter.precisionDigits = 1;
        meter.showRanges = true;
        meter.ranges = VIBRATION_ZONES;
        meter.peakHold = true;
        meter.peakHoldTime = 1000;
        meter.peakDecay = 20;
    });

    /* Each channel has a resting level; P-2101B (channels 3 and 4) is drifting up, the
       drive end faster than the non-drive end, and a knock is a short spike on one channel. */
    const resting = [1.6, 1.3, 3.4, 2.5, 1.1, 1.0],
        drift = [0, 0, 0.0009, 0.0005, 0, 0];

    let knock = 0, ticks = 0;

    setInterval(function () {
        ticks++;

        channels.forEach(function (meter, i) {
            resting[i] += drift[i];

            let value = resting[i] + (Math.random() - 0.5) * 0.5 + 0.25 * Math.sin(ticks / 9 + i);

            if (i === 0 && knock > 0) {
                value += knock;
            }

            meter.value = Math.max(0, Math.min(12, value));
        });

        knock = Math.max(0, knock - 1.8);
    }, 100);

    document.getElementById('knock').addEventListener('click', function () {
        knock = 7.5;
        rackLog.textContent = 'A knock of about 9 mm/s on P-2101A DE: the peak marker holds it for a second after the bar has dropped back.';
    });

    document.getElementById('resetAll').addEventListener('click', function () {
        channels.forEach((meter) => meter.resetPeak());
        rackLog.textContent = 'Peaks reset.';
    });

    rackPeak.addEventListener('change', function () {
        channels.forEach((meter) => { meter.peakHold = rackPeak.checked; });
    });

    /* ── Peak hold ───────────────────────────────────────────────────── */
    const withPeak = document.getElementById('withPeak'),
        noPeak = document.getElementById('noPeak');

    [withPeak, noPeak].forEach(function (meter) {
        meter.min = 0;
        meter.max = 100;
        meter.segments = 24;
        meter.showValue = true;
        meter.precisionDigits = 0;
    });

    withPeak.peakHold = true;
    withPeak.peakHoldTime = 1200;
    withPeak.peakDecay = 25;

    let base = 30, burst = 0;

    setInterval(function () {
        base += (Math.random() - 0.5) * 8;
        base = Math.max(10, Math.min(55, base));

        const value = Math.max(0, Math.min(100, base + burst + (Math.random() - 0.5) * 6));

        withPeak.value = value;
        noPeak.value = value;
        burst = Math.max(0, burst - 12);
    }, 90);

    document.getElementById('burst').addEventListener('click', function () {
        burst = 55;
    });

    document.getElementById('reset').addEventListener('click', function () {
        withPeak.resetPeak();
    });

    /* ── Alarm bands ─────────────────────────────────────────────────── */
    const vibration = document.getElementById('vibration');

    vibration.min = 0;
    vibration.max = 20;
    vibration.segments = 24;
    vibration.unit = 'mm/s';
    vibration.showUnit = true;
    vibration.showValue = true;
    vibration.precisionDigits = 1;
    vibration.showRanges = true;
    vibration.ranges = VIBRATION_ZONES;
    vibration.peakHold = true;

    [['coarse', 8], ['fine', 40]].forEach(function (pair) {
        const meter = document.getElementById(pair[0]);

        meter.min = 0;
        meter.max = 20;
        meter.segments = pair[1];
        meter.showRanges = true;
        meter.ranges = VIBRATION_ZONES;
    });

    let phase = 0;

    setInterval(function () {
        phase += 0.08;

        const value = 6 + 5.5 * Math.sin(phase) + (Math.random() - 0.5);

        vibration.value = value;
        document.getElementById('coarse').value = value;
        document.getElementById('fine').value = value;
    }, 110);

    /* ── Horizontal, and interactive ─────────────────────────────────── */
    const h1 = document.getElementById('h1'),
        h2 = document.getElementById('h2'),
        log = document.getElementById('log');

    [h1, h2].forEach(function (meter) {
        meter.min = 0;
        meter.max = 100;
        meter.segments = 30;
        meter.showValue = true;
        meter.precisionDigits = 0;
    });

    h1.value = 72;
    h2.value = 45;

    h2.addEventListener('change', function () {
        log.textContent = 'change -> ' + Number(h2.value).toFixed(0);
    });

    setInterval(function () {
        h1.value = 50 + 40 * Math.sin(Date.now() / 1400);
    }, 120);
}

angular/app.component.css

.row { display: flex; flex-wrap: wrap; gap: 32px; align-items: flex-start; }
.cell { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12px; color: var(--smart-text-secondary-color); }
.stack { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }

/* The rack: a surface with a title strip, a meter per channel and the zone key. */
.rack {
    display: inline-block;
    max-width: 100%;
    border: 1px solid var(--smart-border);
    border-radius: var(--smart-border-radius);
    background: var(--smart-industrial-panel-background, var(--smart-surface));
}

.rack-title {
    padding: 8px 16px;
    border-bottom: 1px solid var(--smart-border);
    background: var(--smart-industrial-panel-header-background, var(--smart-base-200));
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--smart-text-secondary-color);
}

.channels {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px 26px;
    padding: 16px 22px 14px;
}

.channel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.channel .caption {
    font-family: Consolas, "Courier New", monospace;
    font-size: 11px;
    letter-spacing: .04em;
    color: var(--smart-text-secondary-color);
    white-space: nowrap;
}

smart-bar-graph.rack-meter {
    --smart-bar-graph-width: 30px;
    --smart-bar-graph-height: 190px;
}

.zones {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-self: center;
    margin-left: 10px;
    font-size: 11px;
    color: var(--smart-text-secondary-color);
}

.zone::before {
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 8px;
    vertical-align: -1px;
    border-radius: 1px;
}

.zone-d::before { background: var(--smart-industrial-alarm-critical); }
.zone-c::before { background: var(--smart-industrial-alarm-warning); }
.zone-b::before,
.zone-a::before { background: var(--smart-industrial-ok); }
.zone-a::before { opacity: .45; }

/* ── 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 { BarGraph } from 'smart-industrial/react/bargraph';


/* The demo logic is the HTML demo's: it feeds the elements the way a plant's data would. */
/* ISO 10816 vibration zones, which is what makes the alarm bands on the vibration meter
   mean something rather than being decorative colour. */
const VIBRATION_ZONES = [
    { startValue: 0, endValue: 2.8, className: 'ok' },
    { startValue: 2.8, endValue: 7.1, className: 'warning' },
    { startValue: 7.1, endValue: 20, className: 'critical' }
];

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 rack ─────────────────────────────────────────────────────── */
            const channels = ['ch1', 'ch2', 'ch3', 'ch4', 'ch5', 'ch6'].map((id) => document.getElementById(id)),
                rackLog = document.getElementById('rackLog'),
                rackPeak = document.getElementById('rackPeak');

            channels.forEach(function (meter) {
                meter.min = 0;
                meter.max = 12;
                meter.segments = 30;
                meter.unit = 'mm/s';
                meter.showUnit = true;
                meter.showValue = true;
                meter.precisionDigits = 1;
                meter.showRanges = true;
                meter.ranges = VIBRATION_ZONES;
                meter.peakHold = true;
                meter.peakHoldTime = 1000;
                meter.peakDecay = 20;
            });

            /* Each channel has a resting level; P-2101B (channels 3 and 4) is drifting up, the
               drive end faster than the non-drive end, and a knock is a short spike on one channel. */
            const resting = [1.6, 1.3, 3.4, 2.5, 1.1, 1.0],
                drift = [0, 0, 0.0009, 0.0005, 0, 0];

            let knock = 0, ticks = 0;

            setInterval(function () {
                ticks++;

                channels.forEach(function (meter, i) {
                    resting[i] += drift[i];

                    let value = resting[i] + (Math.random() - 0.5) * 0.5 + 0.25 * Math.sin(ticks / 9 + i);

                    if (i === 0 && knock > 0) {
                        value += knock;
                    }

                    meter.value = Math.max(0, Math.min(12, value));
                });

                knock = Math.max(0, knock - 1.8);
            }, 100);

            document.getElementById('knock').addEventListener('click', function () {
                knock = 7.5;
                rackLog.textContent = 'A knock of about 9 mm/s on P-2101A DE: the peak marker holds it for a second after the bar has dropped back.';
            });

            document.getElementById('resetAll').addEventListener('click', function () {
                channels.forEach((meter) => meter.resetPeak());
                rackLog.textContent = 'Peaks reset.';
            });

            rackPeak.addEventListener('change', function () {
                channels.forEach((meter) => { meter.peakHold = rackPeak.checked; });
            });

            /* ── Peak hold ───────────────────────────────────────────────────── */
            const withPeak = document.getElementById('withPeak'),
                noPeak = document.getElementById('noPeak');

            [withPeak, noPeak].forEach(function (meter) {
                meter.min = 0;
                meter.max = 100;
                meter.segments = 24;
                meter.showValue = true;
                meter.precisionDigits = 0;
            });

            withPeak.peakHold = true;
            withPeak.peakHoldTime = 1200;
            withPeak.peakDecay = 25;

            let base = 30, burst = 0;

            setInterval(function () {
                base += (Math.random() - 0.5) * 8;
                base = Math.max(10, Math.min(55, base));

                const value = Math.max(0, Math.min(100, base + burst + (Math.random() - 0.5) * 6));

                withPeak.value = value;
                noPeak.value = value;
                burst = Math.max(0, burst - 12);
            }, 90);

            document.getElementById('burst').addEventListener('click', function () {
                burst = 55;
            });

            document.getElementById('reset').addEventListener('click', function () {
                withPeak.resetPeak();
            });

            /* ── Alarm bands ─────────────────────────────────────────────────── */
            const vibration = document.getElementById('vibration');

            vibration.min = 0;
            vibration.max = 20;
            vibration.segments = 24;
            vibration.unit = 'mm/s';
            vibration.showUnit = true;
            vibration.showValue = true;
            vibration.precisionDigits = 1;
            vibration.showRanges = true;
            vibration.ranges = VIBRATION_ZONES;
            vibration.peakHold = true;

            [['coarse', 8], ['fine', 40]].forEach(function (pair) {
                const meter = document.getElementById(pair[0]);

                meter.min = 0;
                meter.max = 20;
                meter.segments = pair[1];
                meter.showRanges = true;
                meter.ranges = VIBRATION_ZONES;
            });

            let phase = 0;

            setInterval(function () {
                phase += 0.08;

                const value = 6 + 5.5 * Math.sin(phase) + (Math.random() - 0.5);

                vibration.value = value;
                document.getElementById('coarse').value = value;
                document.getElementById('fine').value = value;
            }, 110);

            /* ── Horizontal, and interactive ─────────────────────────────────── */
            const h1 = document.getElementById('h1'),
                h2 = document.getElementById('h2'),
                log = document.getElementById('log');

            [h1, h2].forEach(function (meter) {
                meter.min = 0;
                meter.max = 100;
                meter.segments = 30;
                meter.showValue = true;
                meter.precisionDigits = 0;
            });

            h1.value = 72;
            h2.value = 45;

            h2.addEventListener('change', function () {
                log.textContent = 'change -> ' + Number(h2.value).toFixed(0);
            });

            setInterval(function () {
                h1.value = 50 + 40 * Math.sin(Date.now() / 1400);
            }, 120);
        });

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

    return (
        <div className="react-root" ref={root} theme="industrial">
            <div className="smart-demo-container">
                <section id="overview">
                    <h2>Smart.BarGraph is a segmented level meter. Like Knob, it extends Tank.</h2>
                    <p>Clamping, logarithmic scales, alarm ranges, units and precision are inherited from <code>Smart.Tank</code>. The component adds the segmented display and <em>peak hold</em>, which keeps a short transient visible after it has passed. A transient of a few milliseconds would not be visible on a continuous bar.</p>
                </section>
                <section>
                    <h2>A vibration monitoring rack</h2>
                    <p>Six bearing channels of three feed pumps, each a meter with the ISO 10816-3 zones as its alarm ranges, so a lit segment inside zone C or D takes the colour of the zone. Peak hold keeps the highest level of the last second in view, which is how a short knock on a bearing stays visible after it has passed. The readings are simulated; P-2101B carries a developing outer race defect.</p>
                    <div className="rack">
                        <div className="rack-title">Vibration · feed pumps · mm/s RMS, 10 to 1000 Hz</div>
                        <div className="channels">
                            <div className="channel">
                                <span className="caption">P-2101A DE</span>
                                <BarGraph id="ch1" className="rack-meter"></BarGraph>
                            </div>
                            <div className="channel">
                                <span className="caption">P-2101A NDE</span>
                                <BarGraph id="ch2" className="rack-meter"></BarGraph>
                            </div>
                            <div className="channel">
                                <span className="caption">P-2101B DE</span>
                                <BarGraph id="ch3" className="rack-meter"></BarGraph>
                            </div>
                            <div className="channel">
                                <span className="caption">P-2101B NDE</span>
                                <BarGraph id="ch4" className="rack-meter"></BarGraph>
                            </div>
                            <div className="channel">
                                <span className="caption">P-2101C DE</span>
                                <BarGraph id="ch5" className="rack-meter"></BarGraph>
                            </div>
                            <div className="channel">
                                <span className="caption">P-2101C NDE</span>
                                <BarGraph id="ch6" className="rack-meter"></BarGraph>
                            </div>
                            <div className="zones"><span className="zone zone-d">D unacceptable, above 7.1</span> <span className="zone zone-c">C restricted, 2.8 to 7.1</span> <span className="zone zone-b">B unrestricted, 1.4 to 2.8</span> <span className="zone zone-a">A new machine, below 1.4</span></div>
                        </div>
                    </div>
                    <div className="demo-actions">
                        <button type="button" id="knock">Knock on P-2101A DE</button>
                        <button type="button" id="resetAll">Reset the peaks</button>
                        <label><input type="checkbox" id="rackPeak" defaultChecked /> Peak hold</label>
                    </div>
                    <p className="hint" id="rackLog">Zone boundaries follow ISO 10816-3 group 1 on a rigid foundation.</p>
                </section>
                <section>
                    <h2>Peak hold</h2>
                    <p>Both meters receive the same signal. The left meter holds its peak and lets it decay; the right meter does not. When a burst passes through, only the left meter still shows the level it reached.</p>
                    <div className="row">
                        <div className="cell">
                            <BarGraph id="withPeak"></BarGraph>
                            <span>peak hold</span>
                        </div>
                        <div className="cell">
                            <BarGraph id="noPeak"></BarGraph>
                            <span>no peak hold</span>
                        </div>
                    </div>
                    <div className="demo-actions">
                        <button type="button" id="burst">Send a burst</button>
                        <button type="button" id="reset">Reset peaks</button>
                    </div>
                </section>
                <section>
                    <h2>Alarm ranges</h2>
                    <p>A lit segment inside an alarm range takes the colour of the range, so the severity is shown by the segment itself.</p>
                    <div className="row">
                        <div className="cell">
                            <BarGraph id="vibration"></BarGraph>
                            <span>Vibration, mm/s</span>
                        </div>
                        <div className="cell">
                            <BarGraph id="coarse"></BarGraph>
                            <span>8 segments</span>
                        </div>
                        <div className="cell">
                            <BarGraph id="fine"></BarGraph>
                            <span>40 segments</span>
                        </div>
                    </div>
                </section>
                <section>
                    <h2>Horizontal and interactive meters</h2>
                    <p>A meter is read-only by default and does not take keyboard focus. Set the <code>interactive</code> property to make it a control that can be clicked, focused and operated with the arrow keys.</p>
                    <div className="stack">
                        <BarGraph id="h1" orientation="horizontal"></BarGraph>
                        <BarGraph id="h2" orientation="horizontal" interactive></BarGraph>
                        <span id="log" className="hint">The second one is interactive: click or focus it and use the arrow keys.</span>
                    </div>
                </section>
            </div>
        </div>
    );
};

export default App;

react/App.css

.row { display: flex; flex-wrap: wrap; gap: 32px; align-items: flex-start; }
.cell { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12px; color: var(--smart-text-secondary-color); }
.stack { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }

/* The rack: a surface with a title strip, a meter per channel and the zone key. */
.rack {
    display: inline-block;
    max-width: 100%;
    border: 1px solid var(--smart-border);
    border-radius: var(--smart-border-radius);
    background: var(--smart-industrial-panel-background, var(--smart-surface));
}

.rack-title {
    padding: 8px 16px;
    border-bottom: 1px solid var(--smart-border);
    background: var(--smart-industrial-panel-header-background, var(--smart-base-200));
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--smart-text-secondary-color);
}

.channels {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px 26px;
    padding: 16px 22px 14px;
}

.channel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.channel .caption {
    font-family: Consolas, "Courier New", monospace;
    font-size: 11px;
    letter-spacing: .04em;
    color: var(--smart-text-secondary-color);
    white-space: nowrap;
}

smart-bar-graph.rack-meter {
    --smart-bar-graph-width: 30px;
    --smart-bar-graph-height: 190px;
}

.zones {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-self: center;
    margin-left: 10px;
    font-size: 11px;
    color: var(--smart-text-secondary-color);
}

.zone::before {
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 8px;
    vertical-align: -1px;
    border-radius: 1px;
}

.zone-d::before { background: var(--smart-industrial-alarm-critical); }
.zone-c::before { background: var(--smart-industrial-alarm-warning); }
.zone-b::before,
.zone-a::before { background: var(--smart-industrial-ok); }
.zone-a::before { opacity: .45; }

/* ── 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.BarGraph is a segmented level meter. Like Knob, it extends Tank.</h2>
            <p>
                Clamping, logarithmic scales, alarm ranges, units and precision are inherited from <code>Smart.Tank</code>. The component adds the segmented display and <em>peak hold</em>, which keeps a short transient visible after it has passed. A transient of a few milliseconds would not be visible on a continuous bar.
            </p>
        </section>

        <section>
            <h2>A vibration monitoring rack</h2>
            <p>
                Six bearing channels of three feed pumps, each a meter with the ISO 10816-3 zones as its alarm ranges, so a lit segment inside zone C or D takes the colour of the zone. Peak hold keeps the highest level of the last second in view, which is how a short knock on a bearing stays visible after it has passed. The readings are simulated; P-2101B carries a developing outer race defect.
            </p>
            <div class="rack">
                <div class="rack-title">Vibration · feed pumps · mm/s RMS, 10 to 1000 Hz</div>
                <div class="channels">
                    <div class="channel"><span class="caption">P-2101A DE</span><smart-bar-graph id="ch1" class="rack-meter"></smart-bar-graph></div>
                    <div class="channel"><span class="caption">P-2101A NDE</span><smart-bar-graph id="ch2" class="rack-meter"></smart-bar-graph></div>
                    <div class="channel"><span class="caption">P-2101B DE</span><smart-bar-graph id="ch3" class="rack-meter"></smart-bar-graph></div>
                    <div class="channel"><span class="caption">P-2101B NDE</span><smart-bar-graph id="ch4" class="rack-meter"></smart-bar-graph></div>
                    <div class="channel"><span class="caption">P-2101C DE</span><smart-bar-graph id="ch5" class="rack-meter"></smart-bar-graph></div>
                    <div class="channel"><span class="caption">P-2101C NDE</span><smart-bar-graph id="ch6" class="rack-meter"></smart-bar-graph></div>
                    <div class="zones">
                        <span class="zone zone-d">D &nbsp;unacceptable, above 7.1</span>
                        <span class="zone zone-c">C &nbsp;restricted, 2.8 to 7.1</span>
                        <span class="zone zone-b">B &nbsp;unrestricted, 1.4 to 2.8</span>
                        <span class="zone zone-a">A &nbsp;new machine, below 1.4</span>
                    </div>
                </div>
            </div>
            <div class="demo-actions">
                <button type="button" id="knock">Knock on P-2101A DE</button>
                <button type="button" id="resetAll">Reset the peaks</button>
                <label><input type="checkbox" id="rackPeak" checked /> Peak hold</label>
            </div>
            <p class="hint" id="rackLog">Zone boundaries follow ISO 10816-3 group 1 on a rigid foundation.</p>
        </section>

        <section>
            <h2>Peak hold</h2>
            <p>
                Both meters receive the same signal. The left meter holds its peak and lets it decay; the right meter does not. When a burst passes through, only the left meter still shows the level it reached.
            </p>
            <div class="row">
                <div class="cell"><smart-bar-graph id="withPeak"></smart-bar-graph><span>peak hold</span></div>
                <div class="cell"><smart-bar-graph id="noPeak"></smart-bar-graph><span>no peak hold</span></div>
            </div>
            <div class="demo-actions">
                <button type="button" id="burst">Send a burst</button>
                <button type="button" id="reset">Reset peaks</button>
            </div>
        </section>

        <section>
            <h2>Alarm ranges</h2>
            <p>A lit segment inside an alarm range takes the colour of the range, so the severity is shown by the segment itself.</p>
            <div class="row">
                <div class="cell"><smart-bar-graph id="vibration"></smart-bar-graph><span>Vibration, mm/s</span></div>
                <div class="cell"><smart-bar-graph id="coarse"></smart-bar-graph><span>8 segments</span></div>
                <div class="cell"><smart-bar-graph id="fine"></smart-bar-graph><span>40 segments</span></div>
            </div>
        </section>

        <section>
            <h2>Horizontal and interactive meters</h2>
            <p>
                A meter is read-only by default and does not take keyboard focus. Set the <code>interactive</code> property to make it a control that can be clicked, focused and operated with the arrow keys.
            </p>
            <div class="stack">
                <smart-bar-graph id="h1" orientation="horizontal"></smart-bar-graph>
                <smart-bar-graph id="h2" orientation="horizontal" interactive></smart-bar-graph>
                <span id="log" class="hint">The second one is interactive: click or focus it and use the arrow keys.</span>
            </div>
        </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.bargraph.js";


/* ISO 10816 vibration zones, which is what makes the alarm bands on the vibration meter
   mean something rather than being decorative colour. */
const VIBRATION_ZONES = [
    { startValue: 0, endValue: 2.8, className: 'ok' },
    { startValue: 2.8, endValue: 7.1, className: 'warning' },
    { startValue: 7.1, endValue: 20, className: 'critical' }
];

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 rack ─────────────────────────────────────────────────────── */
        const channels = ['ch1', 'ch2', 'ch3', 'ch4', 'ch5', 'ch6'].map((id) => document.getElementById(id)),
            rackLog = document.getElementById('rackLog'),
            rackPeak = document.getElementById('rackPeak');

        channels.forEach(function (meter) {
            meter.min = 0;
            meter.max = 12;
            meter.segments = 30;
            meter.unit = 'mm/s';
            meter.showUnit = true;
            meter.showValue = true;
            meter.precisionDigits = 1;
            meter.showRanges = true;
            meter.ranges = VIBRATION_ZONES;
            meter.peakHold = true;
            meter.peakHoldTime = 1000;
            meter.peakDecay = 20;
        });

        /* Each channel has a resting level; P-2101B (channels 3 and 4) is drifting up, the
           drive end faster than the non-drive end, and a knock is a short spike on one channel. */
        const resting = [1.6, 1.3, 3.4, 2.5, 1.1, 1.0],
            drift = [0, 0, 0.0009, 0.0005, 0, 0];

        let knock = 0, ticks = 0;

        setInterval(function () {
            ticks++;

            channels.forEach(function (meter, i) {
                resting[i] += drift[i];

                let value = resting[i] + (Math.random() - 0.5) * 0.5 + 0.25 * Math.sin(ticks / 9 + i);

                if (i === 0 && knock > 0) {
                    value += knock;
                }

                meter.value = Math.max(0, Math.min(12, value));
            });

            knock = Math.max(0, knock - 1.8);
        }, 100);

        document.getElementById('knock').addEventListener('click', function () {
            knock = 7.5;
            rackLog.textContent = 'A knock of about 9 mm/s on P-2101A DE: the peak marker holds it for a second after the bar has dropped back.';
        });

        document.getElementById('resetAll').addEventListener('click', function () {
            channels.forEach((meter) => meter.resetPeak());
            rackLog.textContent = 'Peaks reset.';
        });

        rackPeak.addEventListener('change', function () {
            channels.forEach((meter) => { meter.peakHold = rackPeak.checked; });
        });

        /* ── Peak hold ───────────────────────────────────────────────────── */
        const withPeak = document.getElementById('withPeak'),
            noPeak = document.getElementById('noPeak');

        [withPeak, noPeak].forEach(function (meter) {
            meter.min = 0;
            meter.max = 100;
            meter.segments = 24;
            meter.showValue = true;
            meter.precisionDigits = 0;
        });

        withPeak.peakHold = true;
        withPeak.peakHoldTime = 1200;
        withPeak.peakDecay = 25;

        let base = 30, burst = 0;

        setInterval(function () {
            base += (Math.random() - 0.5) * 8;
            base = Math.max(10, Math.min(55, base));

            const value = Math.max(0, Math.min(100, base + burst + (Math.random() - 0.5) * 6));

            withPeak.value = value;
            noPeak.value = value;
            burst = Math.max(0, burst - 12);
        }, 90);

        document.getElementById('burst').addEventListener('click', function () {
            burst = 55;
        });

        document.getElementById('reset').addEventListener('click', function () {
            withPeak.resetPeak();
        });

        /* ── Alarm bands ─────────────────────────────────────────────────── */
        const vibration = document.getElementById('vibration');

        vibration.min = 0;
        vibration.max = 20;
        vibration.segments = 24;
        vibration.unit = 'mm/s';
        vibration.showUnit = true;
        vibration.showValue = true;
        vibration.precisionDigits = 1;
        vibration.showRanges = true;
        vibration.ranges = VIBRATION_ZONES;
        vibration.peakHold = true;

        [['coarse', 8], ['fine', 40]].forEach(function (pair) {
            const meter = document.getElementById(pair[0]);

            meter.min = 0;
            meter.max = 20;
            meter.segments = pair[1];
            meter.showRanges = true;
            meter.ranges = VIBRATION_ZONES;
        });

        let phase = 0;

        setInterval(function () {
            phase += 0.08;

            const value = 6 + 5.5 * Math.sin(phase) + (Math.random() - 0.5);

            vibration.value = value;
            document.getElementById('coarse').value = value;
            document.getElementById('fine').value = value;
        }, 110);

        /* ── Horizontal, and interactive ─────────────────────────────────── */
        const h1 = document.getElementById('h1'),
            h2 = document.getElementById('h2'),
            log = document.getElementById('log');

        [h1, h2].forEach(function (meter) {
            meter.min = 0;
            meter.max = 100;
            meter.segments = 30;
            meter.showValue = true;
            meter.precisionDigits = 0;
        });

        h1.value = 72;
        h2.value = 45;

        h2.addEventListener('change', function () {
            log.textContent = 'change -> ' + Number(h2.value).toFixed(0);
        });

        setInterval(function () {
            h1.value = 50 + 40 * Math.sin(Date.now() / 1400);
        }, 120);
      });
    });
  }
};
</script>

<style>
.row { display: flex; flex-wrap: wrap; gap: 32px; align-items: flex-start; }
.cell { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12px; color: var(--smart-text-secondary-color); }
.stack { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }

/* The rack: a surface with a title strip, a meter per channel and the zone key. */
.rack {
    display: inline-block;
    max-width: 100%;
    border: 1px solid var(--smart-border);
    border-radius: var(--smart-border-radius);
    background: var(--smart-industrial-panel-background, var(--smart-surface));
}

.rack-title {
    padding: 8px 16px;
    border-bottom: 1px solid var(--smart-border);
    background: var(--smart-industrial-panel-header-background, var(--smart-base-200));
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--smart-text-secondary-color);
}

.channels {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px 26px;
    padding: 16px 22px 14px;
}

.channel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.channel .caption {
    font-family: Consolas, "Courier New", monospace;
    font-size: 11px;
    letter-spacing: .04em;
    color: var(--smart-text-secondary-color);
    white-space: nowrap;
}

smart-bar-graph.rack-meter {
    --smart-bar-graph-width: 30px;
    --smart-bar-graph-height: 190px;
}

.zones {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-self: center;
    margin-left: 10px;
    font-size: 11px;
    color: var(--smart-text-secondary-color);
}

.zone::before {
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 8px;
    vertical-align: -1px;
    border-radius: 1px;
}

.zone-d::before { background: var(--smart-industrial-alarm-critical); }
.zone-c::before { background: var(--smart-industrial-alarm-warning); }
.zone-b::before,
.zone-a::before { background: var(--smart-industrial-ok); }
.zone-a::before { opacity: .45; }

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