JSFiddle - React, Tailwind, and code Playground

by floyd_may

HTML

<script src="https://github.com/k33l0r/date.js/raw/master/build/date.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min.js"></script>
<div id='container'>
</div>

CSS

#container
{
    margin-top: 2em;
}

#container > span
{
    display: inline-block;
    line-height: 40px;
}

.dataVal
{
    display: inline-block;
    width: 3px;
    position: relative;
    overflow: visible;
    vertical-align: bottom;
}

.month
{
    position: absolute;
    top: 100%;
    width: 90px;
    text-align: center;
    line-height: 1;
}

.odd
{
    background-color: #eee;
}

JavaScript

var dailyData = [];

    var start = Date.today().addDays(-365);
    
    for(var i = 0; i < 365; i++) {
        dailyData.push({ value: Math.random(), date: start });
        
        start = start.addDays(1);
    }

    var container = $('#container');
    var weeklyData = _.reduce(dailyData, function(memo, obj) {
        var year = obj.date.getYear();
        var yearData = (memo[year] = memo[year] || {});
        
        var week = parseInt(obj.date.getISOWeek());
        
        var val = yearData[week];
        
        if(val) {
            yearData[week] = val + obj.value;
        }
        else {
            yearData[week] = obj.value;
        }
        
        return memo;
    }, {});

    $.each(dailyData, function(k, val) {
        var outerObj = $('<span></span>');
        if(val.date.getMonth() % 2 === 1) {
            outerObj.addClass('odd');                
        }
        var obj = $('<span></span>');
        obj.addClass('dataVal');
        outerObj.append(obj);
        
        if(val.date.getDate() == 1) {
            var month = $('<span class="month">' + months[val.date.getMonth()] + '</span>');
            obj.append(month);
            if(val.date.getMonth() % 2 === 1) {
                month.addClass('odd');
            }
        }
        
        var color = val.value > 0.9 ? 'red' : val.value > 0.75 ? 'orange' : 'green';
        
        obj.css({ height: 36 * val.value, backgroundColor: color });
        
        container.append(outerObj);
    });