JSFiddle - React, Tailwind, and code Playground

by oysteinmoseng

HTML

<script>console.clear()</script>
<script src="https://code.highcharts.com/gantt/highcharts-gantt.js"></script>
<script src="https://code.highcharts.com/gantt/modules/draggable-points.js"></script>

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

JavaScript

/**
 * An advanced example of how to use a gantt chart to plan and visualize
 * resources in logistics, in this case shipping.
 * The chart displays a set of vessels and its scheduled journeys.
 * The journeys can consist of one or more laps, which in itself contains
 * loading, voyage, and unloading, these can be moved or resized.
 * The chart also includes custom indicators like the Heat Indicator which
 * displays when the vessels idle time goes above a threshold, and the
 * Earliest Possible Return Indicator which displays when the vessel can return
 * if it travels by maximum speed.
 */

/**
 * --- 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...