From 991331d35bcf8f7d729761f7cf9e3719923e8953 Mon Sep 17 00:00:00 2001
From: Francesco Stefanini <francesco.stefanini@outlook.com>
Date: Tue, 6 Feb 2018 20:40:23 +0100
Subject: [PATCH] [Timeline] Vertical group labels (#3795)

* add global 'groupLabelDirection' option

* update docs
---
 docs/timeline/index.html                |  7 +++++++
 lib/timeline/component/Group.js         |  8 ++++++--
 lib/timeline/component/ItemSet.js       |  3 ++-
 lib/timeline/component/css/labelset.css | 17 +++++++++++++++++
 lib/timeline/optionsTimeline.js         |  2 ++
 5 files changed, 34 insertions(+), 3 deletions(-)

diff --git a/docs/timeline/index.html b/docs/timeline/index.html
index e3841190..121fa60e 100644
--- a/docs/timeline/index.html
+++ b/docs/timeline/index.html
@@ -686,6 +686,13 @@ function (option, path) {
       <td>Specifies how the height of a group is calculated. Choose from 'auto' and 'fixed'. If it is set to 'auto' the height will be calculated based on the visible items. While if it is set to 'fixed' the group will keep the same height even if there are no visible items in the window.</td>
     </tr>
 
+    <tr>
+      <td>groupLabelDirection</td>
+      <td>String</td>
+      <td>'horizontal'</td>
+      <td>Set the text direction of group labels. The possible values are 'horizontal' and 'vertical'.</td>
+    </tr>
+
     <tr>
       <td>groupOrder</td>
       <td>String or Function</td>
diff --git a/lib/timeline/component/Group.js b/lib/timeline/component/Group.js
index f9bee805..f5f440ad 100644
--- a/lib/timeline/component/Group.js
+++ b/lib/timeline/component/Group.js
@@ -90,6 +90,9 @@ Group.prototype._create = function() {
   } else {
     label.className = 'vis-label';
   }
+  if (this.itemSet.options.groupLabelDirection === 'vertical') {
+    label.className += ' vertical';
+  }
   this.dom.label = label;
 
   var inner = document.createElement('div');
@@ -397,8 +400,9 @@ Group.prototype._redrawItems = function(forceRestack, lastIsVisible, margin, ran
 Group.prototype._didResize = function(resized, height) {
   resized = util.updateProperty(this, 'height', height) || resized;
   // recalculate size of label
-  var labelWidth = this.dom.inner.clientWidth;
-  var labelHeight = this.dom.inner.clientHeight;
+  var boundingRect = this.dom.inner.getBoundingClientRect();
+  var labelWidth = boundingRect.width;
+  var labelHeight = boundingRect.height;
   resized = util.updateProperty(this.props.label, 'width', labelWidth) || resized;
   resized = util.updateProperty(this.props.label, 'height', labelHeight) || resized;
   return resized;
diff --git a/lib/timeline/component/ItemSet.js b/lib/timeline/component/ItemSet.js
index 2df52931..fcb88615 100644
--- a/lib/timeline/component/ItemSet.js
+++ b/lib/timeline/component/ItemSet.js
@@ -371,7 +371,8 @@ ItemSet.prototype.setOptions = function(options) {
     var fields = [
       'type', 'rtl', 'align', 'order', 'stack', 'stackSubgroups', 'selectable', 'multiselect',
       'multiselectPerGroup', 'groupOrder', 'dataAttributes', 'template', 'groupTemplate', 'visibleFrameTemplate',
-      'hide', 'snap', 'groupOrderSwap', 'showTooltips', 'tooltip', 'tooltipOnItemUpdateTime', 'groupHeightMode', 'onTimeout'
+      'hide', 'snap', 'groupOrderSwap', 'showTooltips', 'tooltip', 'tooltipOnItemUpdateTime', 'groupHeightMode',
+      'onTimeout', 'groupLabelDirection'
     ];
     util.selectiveExtend(fields, this.options, options);
 
diff --git a/lib/timeline/component/css/labelset.css b/lib/timeline/component/css/labelset.css
index 3aeabd10..f39b3f96 100644
--- a/lib/timeline/component/css/labelset.css
+++ b/lib/timeline/component/css/labelset.css
@@ -25,6 +25,12 @@
   cursor: pointer;
 }
 
+.vis-labelset .vis-label.vertical {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
 .vis-labelset .vis-label:last-child {
   border-bottom: none;
 }
@@ -37,3 +43,14 @@
 .vis-labelset .vis-label .vis-inner.vis-hidden {
   padding: 0;
 }
+
+.vis-labelset .vis-label.vertical .vis-inner {
+  padding-top: 0;
+  padding-bottom: 0;
+  white-space: nowrap;
+  -webkit-transform: rotate(-90deg);
+  -moz-transform: rotate(-90deg);
+  -ms-transform: rotate(-90deg);
+  -o-transform: rotate(-90deg);
+  transform: rotate(-90deg);
+}
diff --git a/lib/timeline/optionsTimeline.js b/lib/timeline/optionsTimeline.js
index 1d861896..3065d4f8 100644
--- a/lib/timeline/optionsTimeline.js
+++ b/lib/timeline/optionsTimeline.js
@@ -83,6 +83,7 @@ let allOptions = {
   },
   moment: {'function': 'function'},
   groupHeightMode: {string},  
+  groupLabelDirection: {string},
   groupOrder: {string, 'function': 'function'},
   groupEditable: {
     add: { 'boolean': bool, 'undefined': 'undefined'},
@@ -221,6 +222,7 @@ let configureOptions = {
       }
     },
     groupHeightMode: ['auto', 'fixed'],
+    groupLabelDirection: ['horizontal', 'vertical'],
     //groupOrder: {string, 'function': 'function'},
     groupsDraggable: false,
     height: '',