JSFiddle - React, Tailwind, and code Playground

by Jimmy Sawczuk

HTML

<script src="http://dashboard.louddoor.com/js/highcharts.js"></script>
<div class="bar-container">
    <div class="third-bar third-bar-first">
        <div id="current_fan_count" class="fan_snapshot">
            <h3></h3>
            <p>Fans</p>
        </div>        
    </div>
    <div class="third-bar">
        <div id="week_fan_delta" class="fan_snapshot">
            <h3></h3>
            <p>Fans This Week</p>
        </div>
    </div>
    <div class="third-bar third-bar-last">
        <div id="month_fan_delta" class="fan_snapshot">
            <h3></h3>
            <p>Fans This Month</p>
        </div>
    </div>
</div>

<div class="bar-container">
    <div class="half-bar half-bar-left">
        <h2>Fans</h2>
        <div id="fans_chart"></div>
    </div>
    <div class="half-bar half-bar-right">
        <h2>Profile</h2>
        <div id="profile_chart"></div>
    </div>
</div>

<div class="bar-container">
    <div class="half-bar half-bar-left">
        <h2>Impressions</h2>
        <div id="impressions_chart"></div>
    </div>
    <div class="half-bar half-bar-right">
        <h2>Reach</h2>
        <div id="reach_chart"></div>
    </div>
</div>

CSS

.fan_snapshot { 
    text-align: center;
    
    h3 { font-size: 400%; text-align: center; margin: 0px; visibility: hidden; }
}

JavaScript

function DashboardCharts(opts)
{
    var defaultOpts = {
        'old': false
    };

    if (typeof opts == 'undefined')
    {
        opts = {};
    }

    for (var i in defaultOpts)
    {
        opts[i] = (typeof opts[i] != 'undefined')? opts[i] : defaultOpts[i];
    }
    
    
    function getFansChart()
    {
        return {
            chart: {
                defaultSeriesType: 'line',
                renderTo: 'fans_chart',
                height: 300
            },
            credits: {
                enabled: false
            },
            xAxis: {
                type: 'datetime',
                showFirstLabel: true,
                showLastLabel: true,
                tickPosition: "inside"
            },
            yAxis: [{
                    title: { text: 'Fans' },
                    labels: {
                        formatter: function()
                        {
                            return pretty_number(this.value, {lowerCase: true});
                        }
                    }
                },{
                    title: { text: 'Fans Added' },
                    labels: {
                        formatter: function()
                        {
                            return pretty_number(this.value, {lowerCase: true});
                        }
                    },
                    opposite: true
                }
            ],
            legend: {
                enabled: true
            },
            plotOptions: {
                series: {
                    marker: {
                        enabled: false
                    }
                }
            },
            title: {
                text: ''
            },            
            tooltip: {
                crosshairs: true,
                formatter: function() {
                    var month;
                    var s = '';
                
                    date = new Date(this.points[0].x);
                
                    s =...