JSFiddle - React, Tailwind, and code Playground

by stitot

HTML

<script src="https://code.highcharts.com/dashboards/dashboards.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/solid-gauge.js"></script>
<script src="https://code.highcharts.com/dashboards/datagrid.js"></script>
<script src="https://code.highcharts.com/dashboards/modules/dashboards-plugin.js"></script>

<script src="demo.js"></script>

<div class="cloud-monitoring-dashboard-container">
  <div class="cloud-monitoring-data-controls">
    <label for="enablePolling">
      <input type="checkbox" id="enablePolling" name="enablePolling" />
      <span>Enable data polling</span>
    </label>
  </div>
  <div id="container"></div>
</div>
<p class="highcharts-description">
  The demo shows how you can visualize AWS server data on a dashboard.<br/>
  In the Dashboard, you can find a few HTML Components that describe an
  instance, some charts (KPI and Spline charts) that visualize data parts, and
  the list of all instances (DataGrid). Click on an instance in the DataGrid to
  update the Dashboard.

  If you enable polling, the data on charts will be live updated each 2 seconds.
</p>

CSS

@import url("https://code.highcharts.com/css/highcharts.css");
@import url("https://code.highcharts.com/datagrid/css/datagrid.css");
@import url("https://code.highcharts.com/dashboards/css/dashboards.css");

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

.cloud-monitoring-data-controls {
    background-color: var(--dashboard-bck-gray);
    border-bottom: 1px solid #a5abb1;
    padding: 20px 15px;
}

:root,
.highcharts-light {
    /* Colors for data series and points */
    --highcharts-color-0: #33a29d;
    --highcharts-color-2: #fe9d00;

    /* Extra colors */
    --bck-gray: #f1f5f9;
    --dashboard-bck-gray: #e4eaf1;
}

body {
    background-color: var(--bck-gray);
}

.highcharts-dashboards-wrapper {
    background-color: var(--dashboard-bck-gray);
    min-height: 1000px;
}

.highcharts-dashboards-cell > .highcharts-dashboards-component {
    border-radius: 15px;
    padding: 10px;
    text-align: left;
}

.highcharts-dashboards-component-title {
    font-size: 1.2em;
    text-align: left;
}

#instance-details .highcharts-dashboards-component-content p {
    display: inline-block;
    font-size: 1em;
    font-weight: 600;
    margin-top: 20px;
}

#instance-details .highcharts-dashboards-component-content span {
    width: 40px;
    height: 40px;
    background-size: 32px 32px;
    border-radius: 5px;
    margin: 10px 15px 10px 10px;
    float: left;
}

/* https://awsicons.dev/ */

#instance-details #instance .highcharts-dashboards-component-content span {
    background: url("https://www.highcharts.com/samples/graphics/dashboards/cloud-monitoring/instance-ico.svg") 0 50% no-repeat;
}

#instance-details #zone .highcharts-dashboards-component-content span {
    background: url("https://www.highcharts.com/samples/graphics/dashboards/cloud-monitoring/zone-ico.svg") 0 50% no-repeat;
}

#instance-details #ami .highcharts-dashboards-component-content span {
    background: url("https://www.highcharts.com/samples/graphics/dashboards/cloud-monitoring/ami-ico.svg") 0...

JavaScript

let board = void 0;
let instances = void 0;
let currentInstanceId = void 0;
const pollingCheckbox = document.getElementById('enablePolling');
const KPIOptions = {
    chart: {
        height: 165,
        margin: [0, 0, 0, 0],
        spacing: [0, 0, 0, 0],
        type: 'solidgauge'
    },
    yAxis: {
        min: 0,
        max: 100,
        stops: [
            [0.1, '#33A29D'], // green
            [0.5, '#DDDF0D'], // yellow
            [0.9, '#DF5353'] // red
        ]
    },
    pane: {
        background: {
            innerRadius: '80%',
            outerRadius: '100%'
        }
    },
    accessibility: {
        typeDescription: 'The gauge chart with 1 data point.'
    }
};
const chartConnectorOptions = {
    firstRowAsNames: false,
    columnNames: ['timestamp', 'readOpt', 'writeOpt', 'networkIn', 'networkOut', 'cpuUtilization'],
    beforeParse: function (data) {
        const currentInstance = data.find(
            instance => instance.InstanceId === currentInstanceId
        ) || data;

        return currentInstance.Details.map(
            el => el
        );
    }
};

const instancesDetailsConnectorOptions = {
    firstRowAsNames: false,
    orientantion: 'columns',
    columnNames: ['index', 'CPUUtilization', 'MemoryUsage', 'DiskSizeGB', 'DiskUsedGB', 'DiskFreeGB', 'MediaGB', 'RootGB', 'Documents', 'Downloads'],
    beforeParse: function (data) {
        const currentInstance = data.find(
            instance => instance.InstanceId === currentInstanceId
        ) || data;
        const diskSpace = currentInstance.DiskSpace.RootDisk;
        return [
            [
                0, // display one record on chart KPI / disk
                currentInstance.CPUUtilization,
                currentInstance.MemoryUsage,
                diskSpace.SizeGB,
                diskSpace.UsedGB,
                diskSpace.FreeGB,
                diskSpace.MediaGB,
                diskSpace.RootGB,
                diskSpace.Documents,
               ...