JSFiddle - React, Tailwind, and code Playground

by mustapha mekhatria

HTML

<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/stock/modules/stock.js"></script>
<script src="https://code.highcharts.com/modules/solid-gauge.js"></script>
<script src="https://code.highcharts.com/modules/timeline.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<script src="https://code.highcharts.com/dashboards/dashboards.js"></script>
<script src="https://code.highcharts.com/dashboards/modules/layout.js"></script>
<script src="https://code.highcharts.com/dashboards/modules/math-modifier.js"></script>

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

<p class="highcharts-description">
    You see agroclimatic data based on the NorESM1-M model provided by the Norwegian Climate Centre on behalf of the Copernicus Climate Change Service.
    The data covers the time span from 1951 to 2010 as 10-day average with a temporal resolution of 10 years.
    The Copernicus Observation Programme uses historical data from ground and satellites.
    More information can be found at the
    <a href="https://cds.climate.copernicus.eu/cdsapp#!/dataset/sis-agroclimatic-indicators" rel="noreferrer" target="_blank">Climate Data Store</a>
    of the European Union.
    Click on a map marker to refresh all charts and components to
    visualize related data. You can also select a range on the top navigator
    and limit the period of time on the board.
</p>

CSS

@import url("https://code.highcharts.com/css/highcharts.css");
@import url("https://code.highcharts.com/dashboards/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;
}

#time-range-selector {
    --color-axis-labels: #646479;
    --color-background: #fafafa;
    --color-grid: #9a92ce;
    --color-handle: #5352be;
    --color-mask: #41378233;
    --color-mask-line: #9a92ce;
    --color-scroll: #f7f7f7;
    --color-scroll-line: #9a92ce;
    --color-series: #5352be;
    --color-thumb: #5352be;
    --color-thumb-line: #f7f7f7;
}

#container.highcharts-dark #time-range-selector {
    --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;
   ...

JavaScript

/* eslint-disable jsdoc/require-description */
const MathModifier = Dashboards.DataModifier.types.Math;

const colorStopsDays = [
    [0.0, '#C2CAEB'],
    [1.0, '#162870']
];
const colorStopsTemperature = [
    [0.0, '#4CAFFE'],
    [0.3, '#53BB6C'],
    [0.5, '#DDCE16'],
    [0.6, '#DF7642'],
    [0.7, '#DD2323']
];

const tempRange = {
    minC: -10,
    maxC: 50,
    minF: 14,
    maxF: 122
};

setupBoard();

const KPIChartOptions = {
    chart: {
        height: 166,
        margin: [8, 8, 16, 8],
        spacing: [8, 8, 8, 8],
        styledMode: true,
        type: 'solidgauge'
    },
    pane: {
        background: {
            innerRadius: '90%',
            outerRadius: '120%',
            shape: 'arc'
        },
        center: ['50%', '70%'],
        endAngle: 90,
        startAngle: -90
    },
    series: [{
        data: [0],
        dataLabels: {
            format: '{y:.0f}',
            y: -34
        },
        animation: false,
        animationLimit: 0,
        enableMouseTracking: false,
        innerRadius: '90%',
        radius: '120%'
    }],
    yAxis: {
        labels: {
            distance: 4,
            y: 12
        },
        max: 10,
        min: 0,
        stops: colorStopsDays,
        tickAmount: 2,
        visible: true
    },
    accessibility: {
        typeDescription: 'The gauge chart with 1 data point.'
    }
};

async function setupBoard() {
    let activeCity = 'New York',
        activeColumn = 'TX',
        activeScale = 'C',
        activeTimeRange = [ // default to a year
            Date.UTC(2009, 11, 25, 0, 0, 1),
            Date.UTC(2010, 11, 25)
        ];

    // Initialize board with most basic data
    const board = await Dashboards.board('container', {
        dataPool: {
            connectors: [{
                id: 'Range Selection',
                type: 'CSV',
                options: {
                    dataModifier: {
                        type: 'Range'
                    }
                }
  ...