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: 8px 12px;
}

.highcharts-description {
    padding: 0 8px;
}

.status {
    display: inline-block;
    border-radius: 3px;
    border: 1px solid #a7f3d0;
    padding: 2px 4px;
    text-transform: uppercase;
    font-size: 0.8em;
    color: #033427;
    background: #d1fae5;

    &.offline {
        color: #570d0d;
        background: #fecaca;
        border-color: #fca5a5;
    }
}

.highcharts-light .theme-servers,
.theme-servers {
    --hcg-horizontal-padding: 10px;
    --hcg-vertical-padding: 8px;
    --hcg-header-font-weight: bold;
}

.spark-label {
    color: var(--hcg-color);
}

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

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

    .text {
        display: flex;
        gap: 2px;
        flex-direction: column;

        .region {
            font-size: 0.8em;
            color: #757575;
        }
    }
}

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="19" height="17" fill="none">
<path d="M17.2529 11.7667C17.4142 11.3483 17.5026 10.8936 17.5026 
10.4183C17.5026 8.46532 16.0097 6.86104 14.1028 6.68444C13.7128 
4.31174 11.6524 2.50163 9.16927 2.50163C8.79713 2.50163 8.43449 
2.54228 8.08555 2.61939M5.24215 4.4065C4.73025 5.05512 4.37559 
5.83361 4.23572 6.68444C2.32886 6.86104 0.835938 8.46532 0.835938 
10.4183C0.835938 12.4894 2.51487 14.1683 4.58594 14.1683H13.7526C
14.1327 14.1683 14.4995 14.1118 14.8452 14.0066M1.66927 0.834961L
16.6693 15.835"...