JSFiddle - React, Tailwind, and code Playground

by Malin Jayakody

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment-with-locales.min.js"></script>
<script src="https://d3js.org/d3.v3.js"></script>
<script src="https://rawgit.com/masayuki0812/c3/master/c3.js"></script>
<link rel="stylesheet" href="https://rawgit.com/masayuki0812/c3/master/c3.css">
<div id="chart"></div>

CSS

body {
    background-color: #fff;
}

#chart {
    margin-top: 150px;
}

.c3-axis path,
.c3-axis line {
    stroke: none;
}

.c3-ygrid {
    stroke: #e9e9e9!important;
    stroke-dasharray: none;
}

.c3-axis text {
    font-size: 12px;
    font-weight: bold;
    fill: #707070;
}

.c3-line {
    stroke-width: 5!important;
}

.c3-circles circle,
.c3-circles circle._expanded_ {
    stroke-width: 3.33;
    fill: white!important;
}

.c3-line-data-1,
.c3-circles-data-1 circle,
.c3-circles-data-1 circle._expanded_ {
    stroke: #d04437!important;
}

.c3-line-data-2,
.c3-circles-data-2 circle,
.c3-circles-data-2 circle._expanded_ {
    stroke: #8eb021!important;
}

.c3-tooltip-container {
    background-color: #333;
    color: #fff;
    opacity: 0.9;
    border: 1px solid #ccc;
    border-radius: 3px;
    padding: 10px;
}

.c3-tooltip,
.c3-tooltip tr,
.c3-tooltip th,
.c3-tooltip td {
    border-style: none;
    background-color: transparent;
    box-shadow: none;
    -webkit-box-shadow: none;
}

.c3-tooltip th {
    padding-bottom: 5px;
}

.c3-tooltip th,
.c3-tooltip td,
.c3-tooltip td > span {
    font-family: Arial, sans-serif;
    font-size: 14px;
}

JavaScript

(function($, moment) {
    'use strict';

    var DATE_FORMAT = 'DD MMM YYYY';

    var PERIOD_VALUES = {
        DAILY: 'daily',
        WEEKLY: 'weekly',
        MONTHLY: 'monthly',
        QUARTERLY: 'quarterly',
        YEARLY: 'yearly'
    };

    var PERIODS = {
        'daily': {
            unit: 'day',
            units: 'days'
        },
        'weekly': {
            unit: 'week',
            units: 'weeks'
        },
        'monthly': {
            unit: 'month',
            units: 'months'
        },
        'quarterly': {
            unit: 'quarter',
            units: 'quarters'
        },
        'yearly': {
            unit: 'year',
            units: 'years'
        }
    };

    var LINE_TYPES = {
        WITHIN: 'withinDueDate',
        AFTER: 'afterDueDate',
        OVERDUE: 'overdue',
        REOPENED: 'reopened'
    };

    var LINE_COLORS = {
        'withinDueDate': '#8eb021',
        'afterDueDate': '#3572b0',
        'overdue': '#d04437',
        'reopened': '#f6c342'
    };

    var LINE_LABELS = {
        'withinDueDate': 'Within due date',
        'afterDueDate': 'After due date',
        'overdue': 'Overdue',
        'reopened': 'Reopened'
    };

    function TimelinessChart(options) {
        this.CLASS_NAME = 'TimelinessChart';
        this.options = $.extend({}, options);
        this.parseOptions();
    }

    var chart = TimelinessChart.prototype;

    chart.parseOptions = function() {
        var that = this,
            options = that.options;

        if (!options.id) {
            throw new Error(this.CLASS_NAME + ": Should have supplied an ID");
        }

        if (!options.data) {
            throw new Error(this.CLASS_NAME + ": No data passed into options");
        }

        if (!options.el) {
            throw new Error(this.CLASS_NAME + ": Should have supplied a container element");
        }

        this.id = options.id;
        this.container = $(options.el);
        this.days = Number(options.days || 30);
 ...