Sparklines

by stitot

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@highcharts/grid-pro/grid-pro.js"></script>

<div class="demo">
    <div id="container"></div>
    <p class="highcharts-description">
        Demonstrates embedding small, lightweight charts to display trends in
        time series or sequential datasets without consuming extra space.
    </p>
</div>

CSS

@import url("https://cdn.jsdelivr.net/npm/@highcharts/grid-pro/css/grid-pro.css");

body {
    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        "Apple Color Emoji",
        "Segoe UI Emoji",
        "Segoe UI Symbol",
        sans-serif;
    background: var(--highcharts-background-color);
    color: var(--highcharts-neutral-color-100);
}

.demo {
    padding: 50px 100px;
}

.status {
    display: inline-block;
    border-radius: 3px;
    border-width: 1px;
    border-style: solid;
    padding: 1px 5px;
    text-transform: uppercase;
    font-size: 0.8em;
    color: light-dark(#033427, #fff);
    background: light-dark(#d1fae5, #047857);
    border-color: light-dark(#a7f3d0, #059669);

    &.offline {
        color: light-dark(#570d0d, #fff);
        background: light-dark(#fecaca, #991b1b);
        border-color: light-dark(#fca5a5, #b91c1c);
    }
}

.server {
    display: flex;
    align-items: center;
    gap: 10px;

    .icon {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .text {
        display: flex;
        flex-direction: column;

        .region {
            font-size: 0.8em;
            color: light-dark(#767676, #8a8a8a);
        }
    }
}

.highcharts-dark .theme-servers,
.highcharts-light .theme-servers,
.theme-servers {
    --hcg-horizontal-padding: 10px;
    --hcg-vertical-padding: 6px;
    --hcg-header-vertical-padding: 6px;
    --hcg-header-font-weight: bold;
    --hcg-column-border-width: 0;
    --hcg-row-even-background: light-dark(#f6f6f6, #272727);
    --hcg-border-color: light-dark(#e8e8e8, #3b3b3b);
}

JavaScript

// Defined zones here to use in various sparkline options.
const sharedPlotOptions = {
    series: {
        zones: [{
            value: 0.5,
            color: '#9998'
        }, {
            value: 60,
            color: '#4caf50'
        }, {
            value: 85,
            color: '#ebcb3b'
        }, {
            color: '#f44336'
        }]
    }
};

const liveIcon = `
<svg width="19" height="18" fill="none">
    <path d="M17.5026 7.50163L17.1073 4.33882C16.9522 3.09831 16.8747 
    2.47804 16.5827 2.01062C16.3255 1.59881 15.954 1.2708 15.5134 
    1.06666C15.0134 0.834961 14.3883 0.834961 13.1381 0.834961H5.2004C
    3.95022 0.834961 3.32514 0.834961 2.82512 1.06666C2.38458 1.2708 
    2.01302 1.59881 1.75582 2.01062C1.46389 2.47804 1.38635 3.0983 
    1.23129 4.33882L0.835938 7.50163M3.7526 10.835H14.5859M3.7526 
    10.835C2.14177 10.835 0.835938 9.52912 0.835938 7.91829C0.835938 
    6.30746 2.14177 5.00163 3.7526 5.00163H14.5859C16.1968 5.00163 
    17.5026 6.30746 17.5026 7.91829C17.5026 9.52912 16.1968 10.835 
    14.5859 10.835M3.7526 10.835C2.14177 10.835 0.835938 12.1408 
    0.835938 13.7516C0.835938 15.3625 2.14177 16.6683 3.7526 16.6683H
    14.5859C16.1968 16.6683 17.5026 15.3625 17.5026 13.7516C17.5026 
    12.1408 16.1968 10.835 14.5859 10.835M4.16927 7.91829H4.1776M
    4.16927 13.7516H4.1776M9.16927 7.91829H14.1693M9.16927 13.7516H
    14.1693" stroke="#00A96B" stroke-width="1.67" stroke-linecap="round" />
</svg>
`;

const offlineIcon = `
<svg width="17" height="19" fill="none">
    <path d="M5.0026 5.83508L1.74715 9.74163C1.45648 10.0904 1.31114 10.2648
    1.30892 10.4121C1.30699 10.5402 1.36405 10.662 1.46365 10.7425C1.57823
    10.8351 1.80525 10.8351 2.2593 10.8351H8.33594L7.5026 17.5017L11.6693
    12.5017M11.3776 7.50175H14.4126C14.8666 7.50175 15.0936 7.50175 15.2082
    7.59434C15.3078 7.67483 15.3649 7.79665 15.363 7.9247C15.3607 8.07199
    15.2154 8.2464 14.9247 8.59521L13.7945...