JSFiddle - React, Tailwind, and code Playground

by levchenko_d

HTML

<script src="https://beat.today/app/js/app.min.js"></script>
<div id="chart" class="chart">

</div>

SCSS

$chartInactiveBG: #e2e2e2;
$chartActiveBG: red;
$chartHeight: 200px;
$minBarHeight: 1px;

.chart{
  height: $chartHeight;
  
  
  .chart-bar{
    display: block;
    position: relative;
    float: left;
    height: 100%;
    
    
    .chart-bar-content{
        position: absolute;
        background: $chartInactiveBG;
        width: 60%;
        min-height: $minBarHeight;
        left: 0;
        right: 0;
        margin: auto;
        border-radius: 3px;
    }
    
    
  }
  
  .chart-bar:hover {
      .chart-bar-content{
          background: $chartActiveBG;
      }
  }
  
  .chart-subscript {
    display: block;
    float: left;
    text-align: center;
  }
  
  .chart-subscript:first-of-type{
    text-align: left;
  }
  
  .chart-subscript:last-of-type{
    text-align: right;
  }
  
}

.chart:after{
  content: '';
  display: table;
  clear: both;
}

JavaScript

(function(){

  'use strict';

  /* Example:
	
  <div id="chart" class="chart"></div>
  
  var demoChart = new Chart({
    selector: '#chart',
    dataSet: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 3, 0, 0, 12, 0, 0, 24, 6, 3, 0, 0, 11, 2, 0, 0, 0, 0],
    minBarHeight: 1
  });

  */



  /* Chart(options)
  * - chart bars designed for dashboard

  * @options.selector{String}(Required) - css selector of chart DOM
  * @options.dataSet{Array<Int>}(Required) - array of activity ints
  * @options.minBarHeight{Int}(Optional)[1] - minimum height of chart bar in px
  */
  var Chart = function(options){
    var t = this;

    //Key:DOM storage
    t.doms = {};

    t.o = options;

    if(t.handleOptions()){
      t.init();
    }
  };



  /* Chart.handleOptions()
  * - Checks and validates @t.o options and returns true if ok or false if error
  */
  Chart.prototype.handleOptions = function(){
    var t = this;

    t.doms.wrapper = App.q(t.o.selector || '');

    if(!t.o.selector || !t.doms.wrapper){
      console.error('Chart.handleOptions() - @t.o.selector is invalid css selector');
      return false;
    }

    if(!t.o.dataSet){
      console.error('Chart.handleOptions() - @t.o.dataSet is invalid. Array<Int> required');
      return false;
    }

    t.o.minBarHeight = t.o.minBarHeight || 1;


    return true;
  }//Chart.handleOptions()




  /* Chart.drawBar(height)
  * - Draws chart bar
  * @height {Int}(Required)[0] - bar height in percents
  * @width {Int}(Required)[0] - bar width in percents
  */
  Chart.prototype.drawBar = function(height, width){
    var t = this,
        h = (height || 0) + '%',
        w = (width || 0) + '%',
        top = height === 0 ? 'calc(100% - '+ t.o.minBarHeight +'px)' : 100 - (height || 0) + '%',
        bar = '<div class="chart-bar" style="width:'+w+';"><div class="chart-bar-content" style="height:'+h+';top:'+top+'"></div></div>';

    return bar;
  };//Chart.drawBar()




  /* Chart.drawChart()
  * - Draw bars chart
  */
 ...