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">
        Heatmap with over 31 data points, visualizing the temperature at 12AM every day in May 2017. The
        blue colors indicate colder days, and the orange colors indicate warmer
        days.
    </p>
</figure>

CSS

.temp-container p:hover,
  .temp-container p.hover {
    color: rgba(0, 0, 0, 1) !important;
  }


.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: 1rem;
    font-weight: normal;
    color: rgba(0, 0, 0, 0.6);
  }
  
  .temp-container p:nth-of-type(2) {
    font-size: 0.8rem;
    margin: 0;
    padding-top: 2px;
  }
  
  .highcharts-tooltip-box {
    fill: whitesmoke;
  }
  
  @media screen and (min-width: 768px) {
    .temp-container p:nth-of-type(1) {
      margin: 0;
      font-size: 1.6rem;
      font-weight: normal;
      color: rgba(0, 0, 0, 0.6);
    }
  
    .temp-container p:nth-of-type(2) {
      font-size: 1.2rem;
      margin: 0;
      padding-top: 2px;
      color: rgba(0, 0, 0, 0.6);
    }
  }

JavaScript

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'];

// The function takes in a dataset and calculates how many empty tiles needed before and after the dataset is plotted.
function generateChartData(data) {

    // Calculate the starting weekday index (0-6 of the first date in the given array)
    const firstWeekday = new Date(data[0].date).getDay(),
        monthLength = data.length,
...