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/dashboards/datagrid.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/maps/modules/map.js"></script>
<script src="https://code.highcharts.com/modules/solid-gauge.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<script src="https://code.highcharts.com/dashboards/modules/dashboards-plugin.js"></script>

<div id="container">Loading...</div>

<div id="description">
    <h1>Live weather demo</h1>
    <p>The demo shows weather forecasts from the <a
            href="https://api.met.no/weatherapi/locationforecast/2.0/documentation" target="_blank">Norwegian
            Meteorological Institute</a> in four Dashboard components.
    </p>
    <h2>Dashboard components</h2>
    <ul>
        <li><b>Highcharts Maps</b> markers and tooltip show the selected parameter.</li>
        <li><b>Dashboard KPI</b> shows station info, temperature, pressure and humidity of the selected station.</li>
        <li><b>Dashboard Datagrid</b> shows all the parameters of the selected station for the next 24 hours.</li>
        <li><b>Highcharts Spline Chart</b> shows the selected parameter of the selected station for the next 24 hours.</li>
    </ul>
    <h2>Data set</h2>
    <p>The data shown in this demo are weather forecasts containing temperature, humidity and pressure from a selection
        of weather stations around the world.</p>
    <ul>
        <li>The station is selected by clicking on the map</li>
        <li>The weather parameter (e.g. humidity) clicking on an item in the KPI component.</li>
    </ul>
    </p>
    <h2>Customizing the demo</h2>
    <p>The demo offers limited customization possibilities directly in the code:</p>
    <ul>
        <li>New weather stations can be added...

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");

/* *
 *
 *  Colors
 *
 * */

#city-chart {
    --color-axis: #f7f7f7;
    --color-axis-labels: #e7e7ec;
    --color-background: #5352be;
    --color-title: #f0f0f0;
    --color-text: #000;
    --color-tooltip-background: #dadae2;
}

#kpi-layout {
    --color-axis-labels: #a7a4b0;
    --color-background: #fff;
    --color-gauge: #4caffe;
    --color-hover: #5352be;
    --color-hover-text: #fff;
    --color-pane: #eee;
    --color-pane-line: #ccc;
    --color-text: #2f2b38;
}

#container.highcharts-dark #kpi-layout {
    --color-axis-labels: #838394;
    --color-background: #0d0d0d;
    --color-pane: #20202c;
    --color-pane-line: #838394;
    --color-text: #dadae2;
}

#selection-grid {
    --color-background: #fff;
    --color-hover-background: #5352be;
    --color-hover-border: #e7e7ec;
    --color-hover-text: #e7e7ec;
}

#container.highcharts-dark #selection-grid {
    --color-background: #20202c;
}

#container.highcharts-dark {
    --color-axis-labels: #e7e7ec;
    --color-background: #0d0d0d;
    --color-grid: #838394;
    --color-handle: #838394;
    --color-mask: #dddbef66;
    --color-mask-line: #838394;
    --color-scroll: #20202c;
    --color-scroll-line: #646479;
    --color-series: #5352be;
    --color-thumb: #5352be;
    --color-thumb-line: #838394;
}

#world-map {
    --color-background: #5352be;
    --color-map: #dddbef;
    --color-marker-border: #fff;
    --color-marker-text: #fff;
    --color-marker-text-border: #000;
    --color-navigation: #f7f7f7;
    --color-navigation-line: #838393;
    --color-navigation-text: #20202b;
    --color-text: #000;
    --color-text-border: #fff;
    --color-tooltip-background: #dadae2;
}

#container.highcharts-dark #world-map {
    --color-navigation: #20202b;
    --color-navigation-line: #646478;
   ...

JavaScript

/* eslint-disable jsdoc/require-description */

// Index of the data to be displayed in map, KPI and spline chart.
// The number is an offset from the current hour.

const rangeConfig = {
    first: 0, // 0: current observation
    hours: 24 // max: 19 days
};

// Parameter configuration
const paramConfig = {
    temperature: {
        name: 'temperature',
        unit: '˚C',
        min: -20,
        max: 50,
        colorStops: [
            [0.0, '#4CAFFE'],
            [0.3, '#53BB6C'],
            [0.5, '#DDCE16'],
            [0.6, '#DF7642'],
            [0.7, '#DD2323']
        ]
    },
    pressure: {
        name: 'pressure',
        unit: 'hPa',
        min: 800,
        max: 1100,
        colorStops: [
            [0.0, '#C0CCC0'],
            [0.5, '#CCCC99'], // 950 hPa
            [0.7, '#99CC66'], // 1013 hPa
            [0.8, '#336633']  // 1030 hPa
        ]
    },
    humidity: {
        name: 'humidity',
        unit: '%',
        min: 0,
        max: 100,
        colorStops: [
            [0.0, '#000000'],
            [1.0, '#CCCC00']
        ]
    },
    getColumnHeader: function (param) {
        const info = this[param];
        // First letter uppercase
        const name = info.name[0].toUpperCase() + info.name.slice(1);

        return `${name} ${info.unit}`;
    }
};

// Geolocation info: https://www.maps.ie/coordinates.html

// Selection of weather stations to display data from
const worldLocations = {
    mapUrl: 'https://code.highcharts.com/mapdata/custom/world.topo.json',
    default: 'Dublin',
    points: [
        ['city', 'lat', 'lon', 'elevation'],
        ['New York', 40.71, -74.01, 10],
        ['Dublin', 53.35, -6.26, 8],
        ['Sydney', -33.87, 151.21, 35],
        ['Buenos Aires', -34.6, -58.38, 10],
        ['Tokyo', 35.69, 139.69, 17],
        ['Johannesburg', -26.2, 28.03, 1767],
        ['Istanbul', 41.01, 28.98, 39],
        ['Helsinki', 60.17, 24.94, 0],
        ['Bengaluru', 12.98, 77.59, 921],
        ['Dakar',...