fanthos · ThomasBrodt · Apr 14, 2021 · Apr 15, 2021 · Apr 15, 2021 · Apr 15, 2021
diff --git a/.gitignore b/.gitignore
@@ -1,2 +1,3 @@
 /node_modules
 .history
+.vscode
diff --git a/LICENSE b/LICENSE
@@ -1,6 +1,6 @@
 BSD 2-Clause License
 
-Copyright (c) 2017, Boyi C
+Copyright (c) 2021, Boyi C
 All rights reserved.
 
 Redistribution and use in source and binary forms, with or without

diff --git a/demo/dataset-colors.html b/demo/dataset-colors.html
@@ -0,0 +1,123 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <meta charset="utf-8">
+    <title>Bar Chart</title>
+    <script src="https://cdn.jsdelivr.net/npm/moment/moment.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/Chart.js"></script>
+    <script src="../dist/chartjs-plugin-timeline.js"></script>
+
+    <style>
+      canvas {
+        user-select: none;
+        -moz-user-select: none;
+        -webkit-user-select: none;
+        -ms-user-select: none;
+      }
+    </style>
+  </head>
+
+  <body>
+    <div id="container" style="width: 75%">
+      <canvas id="canvas"></canvas>
+    </div>
+    <script>
+      var ctx = document.getElementById("canvas").getContext("2d");
+      var chart = new Chart(ctx, {
+        type: "timeline",
+        options: {
+          elements: {
+            showText: true,
+            textPadding: 4,
+          },
+        },
+        "data": {
+          "labels": ["", "Worker 1", "", "Worker 2", "Worker 3", "Worker 4"],
+          "datasets": [
+            {
+                "data": [["2021-04-08T22:00:00Z", "2021-04-09T22:00:00Z", "Team 1"]],
+                "backgroundColor": "rgba(175,195,221,0.3)",
+                "borderColor": "rgba(175,195,221,1)",
+                "borderWidth": 0,
+                "hoverBackgroundColor": "rgba(175,195,221,0.8)",
+                "hoverBorderColor": "rgba(175,195,221,0.8)",
+                "hoverBorderWidth": 0,
+                "categoryPercentage": 1,
+                "barPercentage": 1
+            },
+            {
+                "data": [
+                  ["2021-04-09T01:00:00Z", "2021-04-09T11:00:00Z", "03:00 - 13:00 Bill"],
+                  ["2021-04-09T13:00:00Z", "2021-04-09T15:00:00Z", "15:00 - 17:00 Bill"]
+                ],
+                "backgroundColor": [
+                  "rgba(0,204,102,0.3)",
+                  "rgba(0,128,254,0.3)"
+                ],
+                "borderColor": [
+                  "rgba(254,133,0,0.7)",
+                  "rgba(204,0,153,0.7)"
+                ],
+                "borderWidth": [2, 4],
+                "hoverBackgroundColor": "rgba(254,133,0,0.8)",
+                "hoverBorderColor": "rgba(255,0,0,1)",
+                "hoverBorderWidth": 1,
+                "categoryPercentage": 1,
+                "barPercentage": 0.5
+            },
+            {
+                "data": [["2021-04-08T22:00:00Z", "2021-04-09T22:00:00Z", "Team 2"]],
+                "backgroundColor": "rgba(175,195,221,0.3)",
+                "borderColor": "rgba(175,195,221,1)",
+                "borderWidth": 0,
+                "hoverBackgroundColor": "rgba(175,195,221,0.8)",
+                "hoverBorderColor": "rgba(175,195,221,0.8)",
+                "hoverBorderWidth": 0,
+                "categoryPercentage": 1,
+                "barPercentage": 1
+            }, {
+                "data": [
+                  ["2021-04-09T06:00:00Z", "2021-04-09T14:00:00Z", "08:00 - 16:00 Greg"],
+                  ["2021-04-09T01:00:00Z", "2021-04-09T04:35:00Z", "03:00 - 05:35 Greg"]
+                ],
+                "backgroundColor": "rgba(254,214,0,0.3)",
+                "borderColor": "rgba(254,214,0,1)",
+                "borderWidth": 2,
+                "hoverBackgroundColor": "rgba(254,214,0,0.5)",
+                "hoverBorderColor": "rgba(255,0,0,1)",
+                "hoverBorderWidth": 1,
+                "barThickness": 45
+            }, {
+                "data": [
+                  ["ignored", "ignored", "2021-04-09T00:00:00Z", "2021-04-09T02:00:00Z", "02:00 - 04:00 Michael", "Michael 1"],
+                  ["ignored", "ignored", "2021-04-09T09:00:00Z", "2021-04-09T17:00:00Z", "11:00 - 19:00 Michael", "Michael 2"],
+                  ["ignored", "ignored", "2021-04-09T19:00:00Z", "2021-04-09T21:00:00Z", "21:00 - 23:00 Michael", "Michael 3"],
+                ],
+                "backgroundColor": "rgba(254,171,163,0.5)",
+                "borderColor": "rgba(254,133,0,0.7)",
+                "borderWidth": 2,
+                "hoverBackgroundColor": "rgba(254,133,0,0.7)",
+                "hoverBorderColor": "rgba(171,133,0,1)",
+                "hoverBorderWidth": 1,
+                "categoryPercentage": 0.5,
+                "barPercentage": 0.5,
+                "keyStart": 2,
+                "keyEnd": 3,
+                "keyValue": 5
+            }, {
+                "data": [["2021-04-09T10:00:00Z", "2021-04-09T17:30:00Z", "12:00 - 19:30 Jonathan"]],
+                "backgroundColor": "rgba(254,214,0,0.3)",
+                "borderColor": "rgba(254,214,0,1)",
+                "borderWidth": 2,
+                "hoverBackgroundColor": "rgba(254,214,0,0.5)",
+                "hoverBorderColor": "rgba(254,214,0,0.9)",
+                "hoverBorderWidth": 1,
+                "categoryPercentage": 0.5,
+                "barPercentage": 0.8
+            }
+          ],
+        },
+      });
+    </script>
+  </body>
+</html>
diff --git a/demo/index_28.html b/demo/index_28.html
@@ -3,11 +3,12 @@
   <head>
     <title>Bar Chart</title>
     <script src="https://cdn.jsdelivr.net/npm/moment/moment.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0/dist/Chart.js"></script>
-    <script src="../timeline.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.js"></script>
+    <script src="../dist/chartjs-plugin-timeline.js"></script>
 
     <style>
       canvas {
+        user-select: none;
         -moz-user-select: none;
         -webkit-user-select: none;
         -ms-user-select: none;
@@ -43,13 +44,19 @@
                   "Unknown",
                 ],
               ],
+              backgroundColor: '#606080',
+              borderColor: 'black',
+              borderWidth: 5,
             },
             {
               data: [
-                ["2018-01-22T16:00:00.000Z", "2018-01-23T04:57:43.736Z", "On"],
-                ["2018-01-23T04:57:43.736Z", "2018-01-23T04:57:55.437Z", "Off"],
+                ["2018-01-22T16:00:00.000Z", "2018-01-23T03:57:43.736Z", "On"],
+                ["2018-01-23T03:57:43.736Z", "2018-01-23T04:57:55.437Z", "Off"],
                 ["2018-01-23T04:57:55.437Z", "2018-01-23T05:40:44.626Z", "On"],
               ],
+              backgroundColor: ['darkGreen', 'darkRed', 'darkGreen'],
+              borderColor: 'black',
+              borderWidth: 2,
             },
           ],
         },

diff --git a/demo/index_29.html b/demo/index_29.html
@@ -3,11 +3,12 @@
   <head>
     <title>Bar Chart</title>
     <script src="https://cdn.jsdelivr.net/npm/moment/moment.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/[email protected].3/dist/Chart.js"></script>
-    <script src="../timeline.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected].4/dist/Chart.js"></script>
+    <script src="../dist/chartjs-plugin-timeline.js"></script>
 
     <style>
       canvas {
+        user-select: none;
         -moz-user-select: none;
         -webkit-user-select: none;
         -ms-user-select: none;
@@ -43,13 +44,20 @@
                   "Unknown",
                 ],
               ],
+              backgroundColor: '#606080',
+              borderColor: 'black',
+              borderWidth: 5,
+              textPadding: 20,
             },
             {
               data: [
-                ["2018-01-22T16:00:00.000Z", "2018-01-23T04:57:43.736Z", "On"],
-                ["2018-01-23T04:57:43.736Z", "2018-01-23T04:57:55.437Z", "Off"],
+                ["2018-01-22T16:00:00.000Z", "2018-01-23T03:57:43.736Z", "On"],
+                ["2018-01-23T03:57:43.736Z", "2018-01-23T04:57:55.437Z", "Off"],
                 ["2018-01-23T04:57:55.437Z", "2018-01-23T05:40:44.626Z", "On"],
               ],
+              backgroundColor: ['darkGreen', 'darkRed', 'darkGreen'],
+              borderColor: 'black',
+              borderWidth: 2,
             },
           ],
         },