JSFiddle - React, Tailwind, and code Playground

by maritavindedal

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/heatmap.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

<figure class="highcharts-figure">
    <div id="container"></div>
    <!-- <p class="highcharts-description">

    </p> -->
</figure>

JavaScript

/**
 * TODO:
 *
 * - Fix tooltip
 * - Add check for adding null values at the start
 *
 */

const dateFormat = Highcharts.dateFormat;

const data = [
    { date: '2017-05-01', temperature: 9.9 },
    { date: '2017-05-02', temperature: 11.5 },
    { date: '2017-05-03', temperature: 11.8 },
    { date: '2017-05-04', temperature: 13.1 },
    { date: '2017-05-05', temperature: 12.9 },
    { date: '2017-05-06', temperature: 15.5 },
    { date: '2017-05-07', temperature: 16.7 },
    { date: '2017-05-08', temperature: 10.0 },
    { date: '2017-05-09', temperature: 8.0 },
    { date: '2017-05-10', temperature: 6.8 },
    { date: '2017-05-11', temperature: 8.4 },
    { date: '2017-05-12', temperature: 9.9 },
    { date: '2017-05-13', temperature: 12.7 },
    { date: '2017-05-14', temperature: 12.2 },
    { date: '2017-05-15', temperature: 12.1 },
    { date: '2017-05-16', temperature: 11.8 },
    { date: '2017-05-17', temperature: 13.4 },
    { date: '2017-05-18', temperature: 10.6 },
    { date: '2017-05-19', temperature: 14.4 },
    { date: '2017-05-20', temperature: 20.0 },
    { date: '2017-05-21', temperature: 14.3 },
    { date: '2017-05-22', temperature: 11.2 },
    { date: '2017-05-23', temperature: 13.5 },
    { date: '2017-05-24', temperature: 11.0 },
    { date: '2017-05-25', temperature: 10.1 },
    { date: '2017-05-26', temperature: 11.7 },
    { date: '2017-05-27', temperature: 15.9 },
    { date: '2017-05-28', temperature: 16.8 },
    { date: '2017-05-29', temperature: 13.1 },
    { date: '2017-05-30', temperature: 12.8 },
    { date: '2017-05-31', temperature: 11.7 }
];

const weekdays = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
const monthLength = data.length;
const numWeeks = Math.ceil(monthLength / 7) - 1;
const daysOfWeek = 6;
const firstWeekday =  new Date(data[0].date).getDay();
const lastWeekday = new Date(data[monthLength - 1].date).getDay();

// Calculate null values to add at beginning and end
const...