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>

CSS

.day-label {
    margin:0;
    padding:2px;
    display:block;
    font-weight: bold;
    font-size: 0.6rem;
    color:#000;
    text-transform: uppercase;
    width: 100%;
}

.date {
    text-align:center;
    color:rgba(70, 70, 92, 1);
    margin:0;
    padding:2px 2px 0px 2px;
    display:block;
    min-width: 14px;
    font-size: 0.8rem;
    font-weight: bold;
    background-color:whitesmoke;
    opacity: 0.5;
}

.highcharts-axis-line {
    transform: translateY(-15px)
}

.temp-container {
    display:flex;
    flex-direction:row;
}

.temp-container p:nth-of-type(1) {
    margin:0;
    font-size:1.6rem;
    font-weight:normal;
}

.temp-container p:nth-of-type(2) {
    font-size: 20px;
    margin:0;
    padding-top:2px;
}

JavaScript

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


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 = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
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...