Added time gantt

src/core/utils.js

@@ -71,8 +71,12 @@ export const Utils = {
         }
     },
 
+    isTimeScale: function(scale) {
+        return scale.isTime || scale.type === "time";
+    },
+
     convertSize: function (scale, size) {
-        return (scale.type === "time") ? this._parseInterval(size) : size;
+        return (this.isTimeScale(scale)) ? this._parseInterval(size) : size;
     },
 
     normalize: function (value) {

src/index.js

@@ -4,6 +4,8 @@ import {Chart} from "chart.js"
 
 import {GanttController} from './controllers/gantt';
 import {LinearGanttScale} from './scales/linear-gantt'
+import {TimeGanttScale} from "./scales/time-gantt";
 
 GanttController(Chart);
-LinearGanttScale(Chart);
+LinearGanttScale(Chart);
+TimeGanttScale(Chart);

src/scales/linear-gantt.js

@@ -1,73 +1,22 @@
 'use strict';
 
-import {Utils} from "../core/utils";
+import {ScaleUtils} from "./scale-utils";
 
 export function LinearGanttScale(Chart) {
 
-    const helpers = Chart.helpers;
-
-    const scaleOptions = Chart.scaleService.getScaleDefaults('linear');
-
     const scale = Chart.scaleService.getScaleConstructor('linear').extend({
         getRightValue: function (rawValue) {
-            if (Utils.isRange(rawValue))
-                return Utils.getMiddle(rawValue);
-            return this.__proto__.__proto__.getRightValue.call(this, rawValue);
+            return ScaleUtils.getRightValue(this, rawValue);
         },
 
         determineDataLimits: function () {
-            const self = this;
-            const chart = this.chart;
-            const defaults = Chart.defaults.gantt;
-            const isHorizontal = this.isHorizontal();
-
-            function IDMatches(meta) {
-                return isHorizontal ? meta.xAxisID === self.id : meta.yAxisID === self.id;
-            }
-
-            this.min = null;
-            this.max = null;
-
-            helpers.each(chart.data.datasets, function (dataset, datasetIndex) {
-                const meta = chart.getDatasetMeta(datasetIndex);
-                if (chart.isDatasetVisible(datasetIndex) && IDMatches(meta)) {
-                    const size = (isHorizontal) ?
-                        Utils.convertSize(self, helpers.valueOrDefault(dataset.width, defaults.width)) :
-                        Utils.convertSize(self, helpers.valueOrDefault(dataset.height, defaults.height));
-
-                    helpers.each(dataset.data, function (rawValue, index) {
-                        if (meta.data[index].hidden) {
-                            return;
-                        }
-
-                        const value = Utils.extendValue(Utils.getValue(rawValue, self), size);
-
-                        if (typeof value !== "object" && isNaN(value))
-                            return;
-
-                        Utils.normalize(value);
-
-                        if (self.min === null || self.min > value.from)
-                            self.min = value.from;
-
-                        if (self.max === null || self.max < value.to)
-                            self.max = value.to;
-                    });
-                }
-            });
-
+            ScaleUtils.determineDataLimits(this);
             this.handleTickRangeOptions();
         },
 
         getLabelForIndex: function (index, datasetIndex) {
-            const data = this.chart.data.datasets[datasetIndex].data[index];
-            const val = (this.isHorizontal()) ? data.x : data.y;
-            if (Utils.isRange(val))
-                return val.from + "~" + val.to
-            return val;
+            return ScaleUtils.getLabelForIndex(this, index, datasetIndex);
         }
-
     });
-    Chart.scaleService.registerScaleType('linear-gantt', scale, scaleOptions);
-
+    ScaleUtils.extendScale(Chart, 'linear', 'linear-gantt', scale);
 }

src/scales/scale-utils.js

@@ -0,0 +1,70 @@
+'use strict';
+
+import {Utils} from "../core/utils";
+
+const helpers = Chart.helpers;
+
+export const ScaleUtils = {
+    getRightValue: function (scale, rawValue) {
+        if (Utils.isRange(rawValue))
+            return Utils.getMiddle(rawValue);
+        return scale.__proto__.__proto__.getRightValue.call(scale, rawValue);
+    },
+
+    determineDataLimits: function (scale) {
+        const chart = scale.chart;
+        const defaults = Chart.defaults.gantt;
+        const isHorizontal = scale.isHorizontal();
+
+        function IDMatches(meta) {
+            return isHorizontal ? meta.xAxisID === scale.id : meta.yAxisID === scale.id;
+        }
+
+        scale.min = null;
+        scale.max = null;
+
+        helpers.each(chart.data.datasets, function (dataset, datasetIndex) {
+            const meta = chart.getDatasetMeta(datasetIndex);
+            if (chart.isDatasetVisible(datasetIndex) && IDMatches(meta)) {
+                const size = (isHorizontal) ?
+                    Utils.convertSize(scale, helpers.valueOrDefault(dataset.width, defaults.width)) :
+                    Utils.convertSize(scale, helpers.valueOrDefault(dataset.height, defaults.height));
+
+                helpers.each(dataset.data, function (rawValue, index) {
+                    if (meta.data[index].hidden) {
+                        return;
+                    }
+
+                    const value = Utils.extendValue(Utils.getValue(rawValue, scale), size);
+
+                    if (typeof value !== "object" && isNaN(value))
+                        return;
+
+                    Utils.normalize(value);
+
+                    if (scale.min === null || scale.min > value.from)
+                        scale.min = value.from;
+
+                    if (scale.max === null || scale.max < value.to)
+                        scale.max = value.to;
+                });
+            }
+        });
+    },
+
+    getLabelForIndex: function (scale, index, datasetIndex) {
+        const data = scale.chart.data.datasets[datasetIndex].data[index];
+        const val = (scale.isHorizontal()) ? data.x : data.y;
+        if (Utils.isRange(val))
+            return val.from + "~" + val.to
+        return val;
+    },
+
+    extendScale: function (Chart, base, newName, scaleClass) {
+        const service = Chart.scaleService;
+        const options = service.getScaleDefaults(base);
+        service.registerScaleType(newName, scaleClass, options);
+    }
+};
+
+

src/scales/time-gantt.js

@@ -0,0 +1,24 @@
+'use strict';
+
+import {ScaleUtils} from "./scale-utils";
+
+export function TimeGanttScale(Chart) {
+
+    const scale = Chart.scaleService.getScaleConstructor('time').extend({
+        isTime: true,
+
+        getRightValue: function (rawValue) {
+            return ScaleUtils.getRightValue(this, rawValue);
+        },
+
+        determineDataLimits: function () {
+            this.__proto__.__proto__.determineDataLimits.call(this);
+            ScaleUtils.determineDataLimits(this);
+        },
+
+        getLabelForIndex: function (index, datasetIndex) {
+            return ScaleUtils.getLabelForIndex(this, index, datasetIndex);
+        }
+    });
+    ScaleUtils.extendScale(Chart, 'time', 'time-gantt', scale);
+}

test/testBaseDateChart.html

@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <title>Test Date Chart</title>
+        <style type="text/css">
+            .chart-container {
+                width: 600px;
+                height: 400px;
+                position: relative;
+            }
+        </style>
+    </head>
+    <body>
+        <div class="chart-container">
+            <canvas id="chart"></canvas>
+        </div>
+        <script type="text/javascript" src="../dist/chartjs-plugin-gantt.js"></script>
+        <script type="text/javascript">
+            function incDate(date) {
+                date.setHours(date.getHours() + 1);
+                const res = new Date(date);
+                return res;
+            }
+
+            const curDate = new Date();
+
+            const data = [];
+            for (let i = 0; i < 5; i++)
+                data.push({y: incDate(curDate), x: i});
+
+            const chart = new Chart("chart", {
+                type: "scatter",
+                data: {
+                    datasets: [{
+                        label: "Time series",
+                        height: 1,
+                        data: data
+                    }]
+                },
+                options: {
+                    scales: {
+                        yAxes: [{
+                            id: "time-gantt-axis",
+                            type: "time",
+                            position: "left",
+                            ticks: {
+                                reverse: true
+                            }
+                        }]
+                    }
+                }
+            });
+        </script>
+    </body>
+</html>

test/testDateChart.html

@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <title>Test Date Chart</title>
+        <style type="text/css">
+            .chart-container {
+                width: 600px;
+                height: 400px;
+                position: relative;
+            }
+        </style>
+    </head>
+    <body>
+        <div class="chart-container">
+            <canvas id="chart"></canvas>
+        </div>
+        <script type="text/javascript" src="../dist/chartjs-plugin-gantt.js"></script>
+        <script type="text/javascript">
+            function incDate(date) {
+                date.setHours(date.getHours() + 1);
+                const res = new Date(date);
+                return res;
+            }
+
+            const curDate = new Date();
+
+            const data = [];
+            for (let i = 0; i < 5; i++)
+                data.push({y: {from: new Date(curDate), to: incDate(curDate)}, x: i});
+
+            const chart = new Chart("chart", {
+                type: "gantt",
+                data: {
+                    datasets: [{
+                        label: "Gantt time series",
+                        height: 1,
+                        data: data
+                    }]
+                },
+                options: {
+                    scales: {
+                        yAxes: [{
+                            id: "time-gantt-axis",
+                            type: "time-gantt",
+                            position: "left"
+                        }]
+                    }
+                }
+            });
+        </script>
+    </body>
+</html>