JSFiddle - React, Tailwind, and code Playground

by neonDog

HTML

<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<div class="overall-chart"></div>

<div class="daily-chart"></div>

<div class="hourly-chart"></div>

JavaScript

function generateData(count, yrange) {
    var i = 0;
    var series = [];
    while (i < count) {
      var x = 'w' + (i + 1).toString();
      var y = Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min;
  
      series.push({
        x: x,
        y: y
      });
      i++;
    }
    return series;
  }




class NeonSubRedditAnalyser {
	
  constructor(container=document) {
    
  	this.overallChart = new ApexCharts(container.querySelector(".overall-chart"), {
      chart: {
        height: 350,
        type: 'heatmap',
      },
      series:[],
      dataLabels: {
        enabled: false
      },
      colors: ["#ff4500"], //"#008FFB", 
        title: {
          text: 'Overall'
        }
    });
    
    this.overallChart.render();
    
    //setInterval(() => {
    	this.fetch();
    //}, 1000)
    
    
  }
  
  setSubreddit() {
  
  }

	update(data) {
  	
    this.overallChart.updateSeries(data.overall);
    
  }
  
  async fetch() {
  	this.data = {
    	overall:[{
          name: 'Monday',
          data: generateData(23, {
            min: 0,
            max: 90
          })
        },
        {
          name: 'Tuesday',
          data: generateData(23, {
            min: 0,
            max: 90
          })
        },
        {
          name: 'Wednesday',
          data: generateData(23, {
            min: 0,
            max: 90
          })
        },
        {
          name: 'Thursday',
          data: generateData(23, {
            min: 0,
            max: 90
          })
        },
        {
          name: 'Friday',
          data: generateData(23, {
            min: 0,
            max: 90
          })
        },
        {
          name: 'Saturday',
          data: generateData(23, {
            min: 0,
            max: 90
          })
        },
        {
          name: 'Sunday',
          data: generateData(23, {
            min: 0,
            max: 90
          })
        }
      ],
      daily:[],
      hourly:[]
    };
  ...