JSFiddle - React, Tailwind, and code Playground

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 {
    border-radius: 10px;
    padding: 4px 8px;
    width: min-content;
    text-transform: uppercase;
    font-size: 0.8em;
    color: #fff;
}

.running {
    background-color: #4caf5080;
}

.stopped {
    background-color: #f4433680;
}

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

JavaScript

// Data preparation
const data = new Grid.DataTable({
    columns: {
        instanceId: [
            'i-18cd0d5', 'i-2b3f4e6', 'i-3c5d6e3', 'i-4d7e8f6', 'i-5e9f0a7',
            'i-6f1a2b2', 'i-7a2b3c4', 'i-8b3c4d8', 'i-9c4d5e3', 'i-0d5e6f2',
            'i-1f2g3h4', 'i-2g3h4i5', 'i-3h4i5j6', 'i-4i5j6k7', 'i-5j6k7l8',
            'i-6k7l8m9', 'i-7l8m9n0', 'i-8m9n0o1', 'i-9n0o1p2', 'i-0o1p2q3',
            'i-1p2q3r4', 'i-2q3r4s5', 'i-3r4s5t6', 'i-4s5t6u7', 'i-5t6u7v8',
            'i-6u7v8w9', 'i-7v8w9x0', 'i-8w9x0y1', 'i-9x0y1z2', 'i-0y1z2a3'
        ],
        running: [
            true, true, true, true, true, false, true, true, false, true,
            true, false, true, true, true, true, false, true, true, false,
            true, true, false, true, true, true, true, false, true, true
        ],
        cpuUtilization: [
            '15, 18, 29, 48, 56, 54, 34, 28, 23, 13, 8, 5, 9, 15, 25',
            '99, 96, 82, 53, 33, 22, 29, 38, 52, 73, 84, 91, 97, 89, 70',
            '1, 4, 24, 65, 79, 77, 52, 38, 29, 22, 16, 10, 6, 9, 15',
            '50, 54, 64, 78, 89, 96, 99, 95, 89, 86, 83, 80, 76, 73, 70',
            '20, 21, 22, 25, 28, 31, 35, 43, 51, 58, 58, 55, 59, 58, 54',
            '0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0',
            '97, 92, 89, 85, 82, 81, 85, 88, 91, 97, 97, 94, 93, 92, 91',
            '5, 2, 1, 2, 4, 7, 9, 6, 4, 3, 3, 2, 1, 1, 0',
            '0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0',
            '86, 73, 57, 38, 35, 44, 70, 56, 33, 23, 18, 15, 11, 8, 5',
            '45, 48, 52, 58, 64, 70, 75, 78, 74, 68, 62, 55, 48, 42, 38',
            '0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0',
            '30, 35, 42, 51, 58, 64, 68, 65, 59, 52, 46, 39, 33, 28, 24',
            '88, 85, 80, 75, 71, 68, 66, 64, 62, 61, 60, 59, 58, 57, 56',
            '12, 15, 19, 25, 32, 40, 48, 55, 61, 65, 67, 66, 63, 58, 52',
            '95, 93, 90, 87, 84, 82, 80, 78, 76, 75, 74, 73, 72, 71, 70',
        ...