[Timeline] Vertical group labels (#3795)

* add global 'groupLabelDirection' option

* update docs

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>

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;

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);
 

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);
+}

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: '',