Comparison Chart

angular/app.component.html

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

        <section id="overview">
            <h2>Smart.ComparisonChart puts like values side by side: which is the biggest, and by how much.</h2>
            <p>Energy per line, output per shift, downtime per cause, the share of each product in a day. A trend
               answers how something moved; this answers the other question a production screen is asked. Every
               figure is also in a table a screen reader reads, so the chart is never only a picture.</p>
        </section>

        <section>
            <h2>Energy by line, against a budget</h2>
            <p>Bars run sideways so the names read without tilting a head. The budget is a dashed line and a bar past
               it takes the warning colour; nothing else is coloured, because colour on an operator screen is kept for
               what is wrong. The meters report every two seconds through <code>push()</code>, which is what
               <code>Connect.stream()</code> calls with one record per interval.</p>
            <div class="demo-row">
                <smart-comparison-chart id="energy" label="Energy by line, this shift" unit="kWh" [limit]="400" limit-label="budget 400 kWh"></smart-comparison-chart>
            </div>
            <div class="demo-actions">
                <label>Order
                    <select id="order">
                        <option value="none">as listed</option>
                        <option value="descending">largest first</option>
                        <option value="ascending">smallest first</option>
                    </select>
                </label>
                <label>Bars
                    <select id="orientation">
                        <option value="horizontal">sideways</option>
                        <option value="vertical">upright</option>
                    </select>
                </label>
            </div>
        </section>

        <section>
            <h2>Downtime by cause, as a Pareto chart</h2>
            <p><code>pareto</code> sorts worst first and draws the running share, because "which few causes are most of
               the downtime" is the question a downtime chart exists to answer. Here the first three are four fifths
               of it.</p>
            <div class="demo-row">
                <smart-comparison-chart id="downtime" label="Downtime by cause, last 7 days" unit="min" orientation="vertical" [pareto]="true"></smart-comparison-chart>
            </div>
        </section>

        <section>
            <h2>Shares of one whole</h2>
            <p>A donut, with the total in the hole, for when the share is the point. Past <code>maxSlices</code> the
               smallest items fold into one "other" slice rather than into slivers nobody can compare.</p>
            <div class="demo-row">
                <smart-comparison-chart id="mix" label="Product mix, today" unit="t" kind="donut" [maxSlices]="5"></smart-comparison-chart>
            </div>
        </section>

    </div>
</div>

angular/app.component.ts

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

import { ComparisonChartModule } from 'smart-industrial/angular/comparisonchart';

import { runDemo } from './demo';

/**
 * Smart.UI Industrial - ComparisonChart 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: [ComparisonChartModule],
    templateUrl: './app.component.html',
    styleUrl: './app.component.css'
})
export class AppComponent implements AfterViewInit, OnDestroy {
    private unmounted = false;

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

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

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

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

angular/demo.ts

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

/* The comparison chart: the page plays the meters, as a station would through Connect.stream(). */

export function runDemo(): void {
    const energy = document.getElementById('energy'),
        downtime = document.getElementById('downtime'),
        mix = document.getElementById('mix');

    energy.items = [
        { field: 'line1', label: 'Line 1 · extrusion', value: 312 },
        { field: 'line2', label: 'Line 2 · extrusion', value: 418 },
        { field: 'line3', label: 'Line 3 · cutting', value: 187 },
        { field: 'line4', label: 'Line 4 · packing', value: 96 },
        { field: 'utilities', label: 'Utilities', value: 254 }
    ];

    downtime.items = [
        { label: 'Film break', value: 212 },
        { label: 'Changeover', value: 164 },
        { label: 'Waiting for material', value: 121 },
        { label: 'Sensor fault', value: 48 },
        { label: 'Cleaning', value: 36 },
        { label: 'Other', value: 22 }
    ];

    mix.items = [
        { label: 'PE film 40 µm', value: 18.4 },
        { label: 'PE film 60 µm', value: 12.1 },
        { label: 'Shrink hood', value: 7.6 },
        { label: 'Stretch wrap', value: 4.2 },
        { label: 'Liner', value: 1.9 },
        { label: 'Samples', value: 0.6 },
        { label: 'Rework', value: 0.4 }
    ];

    /* the meters count up through the shift; one record per interval, the way Connect.stream() flushes */
    const rates = { line1: 2.1, line2: 2.6, line3: 1.2, line4: 0.7, utilities: 1.5 };

    setInterval(function () {
        const record = {};

        energy.items.forEach(function (item) {
            record[item.field] = Math.round((item.value + rates[item.field] * (0.6 + Math.random() * 0.8)) * 10) / 10;
        });
        energy.push(record);
    }, 2000);

    document.getElementById('order').addEventListener('change', function (event) {
        energy.sort = event.target.value;
    });

    document.getElementById('orientation').addEventListener('change', function (event) {
        energy.orientation = event.target.value;
    });
}

angular/app.component.css

/* The panel is a real control on a screen, so it is given the room one would have. */
.demo-row {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: flex-start;
}

smart-comparison-chart {
  width: 760px;
  max-width: 100%;
  height: 300px;
}

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


/* The demo logic is the HTML demo's: it feeds the elements the way a plant's data would. */
/* The comparison chart: the page plays the meters, as a station would through Connect.stream(). */

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 energy = document.getElementById('energy'),
                downtime = document.getElementById('downtime'),
                mix = document.getElementById('mix');

            energy.items = [
                { field: 'line1', label: 'Line 1 · extrusion', value: 312 },
                { field: 'line2', label: 'Line 2 · extrusion', value: 418 },
                { field: 'line3', label: 'Line 3 · cutting', value: 187 },
                { field: 'line4', label: 'Line 4 · packing', value: 96 },
                { field: 'utilities', label: 'Utilities', value: 254 }
            ];

            downtime.items = [
                { label: 'Film break', value: 212 },
                { label: 'Changeover', value: 164 },
                { label: 'Waiting for material', value: 121 },
                { label: 'Sensor fault', value: 48 },
                { label: 'Cleaning', value: 36 },
                { label: 'Other', value: 22 }
            ];

            mix.items = [
                { label: 'PE film 40 µm', value: 18.4 },
                { label: 'PE film 60 µm', value: 12.1 },
                { label: 'Shrink hood', value: 7.6 },
                { label: 'Stretch wrap', value: 4.2 },
                { label: 'Liner', value: 1.9 },
                { label: 'Samples', value: 0.6 },
                { label: 'Rework', value: 0.4 }
            ];

            /* the meters count up through the shift; one record per interval, the way Connect.stream() flushes */
            const rates = { line1: 2.1, line2: 2.6, line3: 1.2, line4: 0.7, utilities: 1.5 };

            setInterval(function () {
                const record = {};

                energy.items.forEach(function (item) {
                    record[item.field] = Math.round((item.value + rates[item.field] * (0.6 + Math.random() * 0.8)) * 10) / 10;
                });
                energy.push(record);
            }, 2000);

            document.getElementById('order').addEventListener('change', function (event) {
                energy.sort = event.target.value;
            });

            document.getElementById('orientation').addEventListener('change', function (event) {
                energy.orientation = event.target.value;
            });
        });

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

    return (
        <div className="react-root" ref={root} theme="industrial">
            <div className="smart-demo-container">
                <section id="overview">
                    <h2>Smart.ComparisonChart puts like values side by side: which is the biggest, and by how much.</h2>
                    <p>Energy per line, output per shift, downtime per cause, the share of each product in a day. A trend answers how something moved; this answers the other question a production screen is asked. Every figure is also in a table a screen reader reads, so the chart is never only a picture.</p>
                </section>
                <section>
                    <h2>Energy by line, against a budget</h2>
                    <p>Bars run sideways so the names read without tilting a head. The budget is a dashed line and a bar past it takes the warning colour; nothing else is coloured, because colour on an operator screen is kept for what is wrong. The meters report every two seconds through <code>push()</code>, which is what <code>Connect.stream()</code> calls with one record per interval.</p>
                    <div className="demo-row">
                        <ComparisonChart id="energy" label="Energy by line, this shift" unit="kWh" limit={400} limitLabel="budget 400 kWh"></ComparisonChart>
                    </div>
                    <div className="demo-actions">
                        <label>
                            Order
                            <select id="order"><option value="none">as listed</option> <option value="descending">largest first</option> <option value="ascending">smallest first</option></select>
                        </label>
                        <label>
                            Bars
                            <select id="orientation"><option value="horizontal">sideways</option> <option value="vertical">upright</option></select>
                        </label>
                    </div>
                </section>
                <section>
                    <h2>Downtime by cause, as a Pareto chart</h2>
                    <p><code>pareto</code> sorts worst first and draws the running share, because "which few causes are most of the downtime" is the question a downtime chart exists to answer. Here the first three are four fifths of it.</p>
                    <div className="demo-row">
                        <ComparisonChart id="downtime" label="Downtime by cause, last 7 days" unit="min" orientation="vertical" pareto></ComparisonChart>
                    </div>
                </section>
                <section>
                    <h2>Shares of one whole</h2>
                    <p>A donut, with the total in the hole, for when the share is the point. Past <code>maxSlices</code> the smallest items fold into one "other" slice rather than into slivers nobody can compare.</p>
                    <div className="demo-row">
                        <ComparisonChart id="mix" label="Product mix, today" unit="t" kind="donut" maxSlices={5}></ComparisonChart>
                    </div>
                </section>
            </div>
        </div>
    );
};

export default App;

react/App.css

/* The panel is a real control on a screen, so it is given the room one would have. */
.demo-row {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: flex-start;
}

smart-comparison-chart {
  width: 760px;
  max-width: 100%;
  height: 300px;
}

/* ── 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.ComparisonChart puts like values side by side: which is the biggest, and by how much.</h2>
            <p>Energy per line, output per shift, downtime per cause, the share of each product in a day. A trend
               answers how something moved; this answers the other question a production screen is asked. Every
               figure is also in a table a screen reader reads, so the chart is never only a picture.</p>
        </section>

        <section>
            <h2>Energy by line, against a budget</h2>
            <p>Bars run sideways so the names read without tilting a head. The budget is a dashed line and a bar past
               it takes the warning colour; nothing else is coloured, because colour on an operator screen is kept for
               what is wrong. The meters report every two seconds through <code>push()</code>, which is what
               <code>Connect.stream()</code> calls with one record per interval.</p>
            <div class="demo-row">
                <smart-comparison-chart id="energy" label="Energy by line, this shift" unit="kWh" limit="400" limit-label="budget 400 kWh"></smart-comparison-chart>
            </div>
            <div class="demo-actions">
                <label>Order
                    <select id="order">
                        <option value="none">as listed</option>
                        <option value="descending">largest first</option>
                        <option value="ascending">smallest first</option>
                    </select>
                </label>
                <label>Bars
                    <select id="orientation">
                        <option value="horizontal">sideways</option>
                        <option value="vertical">upright</option>
                    </select>
                </label>
            </div>
        </section>

        <section>
            <h2>Downtime by cause, as a Pareto chart</h2>
            <p><code>pareto</code> sorts worst first and draws the running share, because "which few causes are most of
               the downtime" is the question a downtime chart exists to answer. Here the first three are four fifths
               of it.</p>
            <div class="demo-row">
                <smart-comparison-chart id="downtime" label="Downtime by cause, last 7 days" unit="min" orientation="vertical" pareto></smart-comparison-chart>
            </div>
        </section>

        <section>
            <h2>Shares of one whole</h2>
            <p>A donut, with the total in the hole, for when the share is the point. Past <code>maxSlices</code> the
               smallest items fold into one "other" slice rather than into slivers nobody can compare.</p>
            <div class="demo-row">
                <smart-comparison-chart id="mix" label="Product mix, today" unit="t" kind="donut" max-slices="5"></smart-comparison-chart>
            </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.comparisonchart.js";


/* The comparison chart: the page plays the meters, as a station would through Connect.stream(). */

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 energy = document.getElementById('energy'),
            downtime = document.getElementById('downtime'),
            mix = document.getElementById('mix');

        energy.items = [
            { field: 'line1', label: 'Line 1 · extrusion', value: 312 },
            { field: 'line2', label: 'Line 2 · extrusion', value: 418 },
            { field: 'line3', label: 'Line 3 · cutting', value: 187 },
            { field: 'line4', label: 'Line 4 · packing', value: 96 },
            { field: 'utilities', label: 'Utilities', value: 254 }
        ];

        downtime.items = [
            { label: 'Film break', value: 212 },
            { label: 'Changeover', value: 164 },
            { label: 'Waiting for material', value: 121 },
            { label: 'Sensor fault', value: 48 },
            { label: 'Cleaning', value: 36 },
            { label: 'Other', value: 22 }
        ];

        mix.items = [
            { label: 'PE film 40 µm', value: 18.4 },
            { label: 'PE film 60 µm', value: 12.1 },
            { label: 'Shrink hood', value: 7.6 },
            { label: 'Stretch wrap', value: 4.2 },
            { label: 'Liner', value: 1.9 },
            { label: 'Samples', value: 0.6 },
            { label: 'Rework', value: 0.4 }
        ];

        /* the meters count up through the shift; one record per interval, the way Connect.stream() flushes */
        const rates = { line1: 2.1, line2: 2.6, line3: 1.2, line4: 0.7, utilities: 1.5 };

        setInterval(function () {
            const record = {};

            energy.items.forEach(function (item) {
                record[item.field] = Math.round((item.value + rates[item.field] * (0.6 + Math.random() * 0.8)) * 10) / 10;
            });
            energy.push(record);
        }, 2000);

        document.getElementById('order').addEventListener('change', function (event) {
            energy.sort = event.target.value;
        });

        document.getElementById('orientation').addEventListener('change', function (event) {
            energy.orientation = event.target.value;
        });
      });
    });
  }
};
</script>

<style>
/* The panel is a real control on a screen, so it is given the room one would have. */
.demo-row {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: flex-start;
}

smart-comparison-chart {
  width: 760px;
  max-width: 100%;
  height: 300px;
}

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