JSFiddle - React, Tailwind, and code Playground

by Gert Vaartjes

HTML

<script src="https://github.highcharts.com/gantt/highcharts.js"></script>
<script src="https://github.highcharts.com/gantt/modules/gantt.js"></script>
<script src="https://github.highcharts.com/gantt/modules/stock.js"></script>
<script src="https://github.highcharts.com/gantt/modules/draggable-gantt.js"></script>

<div id="container"></div>

CSS

.clearfix {
    clear: both;
}

.info-span .utilized {
    font-size: 14px;
}

.info-span.great {
    color: #788c6b;
}

.info-span.good {
    color: #fbe496;
}

.info-span.ok {
    color: #e0b08b;
}

.info-span.bad {
    color: #c79495;
}

JavaScript

// Logistics module start ---------------
// This module adds heat indicators, idle time, and earliest possible return
// indicators.

(function (Highcharts) {
    var draw = (function () {
        var isFn = function (x) {
            return typeof x === 'function';
        };

        /**
         * draw - Handles the drawing of a point.
         * TODO: add type checking.
         *
         * @param  {object} params Parameters.
         * @return {undefined} Returns undefined.
         */
        var draw = function draw(params) {
            var point = this,
                graphic = point.graphic,
                animate = params.animate,
                attr = params.attr,
                onComplete = params.onComplete,
                css = params.css,
                group = params.group,
                renderer = params.renderer,
                shape = params.shapeArgs,
                type = params.shapeType;

            if (point.shouldDraw()) {
                if (!graphic) {
                    point.graphic = graphic = renderer[type](shape).add(group);
                }
                graphic.css(css).attr(attr)
                    .animate(animate, undefined, onComplete);
            } else if (graphic) {
                graphic.animate(animate, undefined, function () {
                    point.graphic = graphic = graphic.destroy();
                    if (isFn(onComplete)) {
                        onComplete();
                    }
                });
            }
            if (graphic) {
                graphic.addClass(point.getClassName(), true);
            }
        };
        return draw;
    }());

    var renderHeatIndicators = (function (Highcharts, draw) {

        var each = Highcharts.each,
            extend = Highcharts.extend,
            isFunction = function (x) {
                return typeof x === 'function';
            },
            isNumber = Highcharts.isNumber,
            merge = Highcharts.merge,
           ...