release 0.2.25

TargetProcess · Dec 20, 2014 · b6900cc · b6900cc
1 parent da180db
commit b6900cc
Show file tree

Hide file tree

Showing 8 changed files with 65 additions and 26 deletions.
diff --git a/build/plugins/tauCharts.legend.js b/build/plugins/tauCharts.legend.js
@@ -31,7 +31,7 @@
                 element.addEventListener(eventName, function (e) {
                     var target = e.target;
                     while (target !== e.currentTarget && target !== null) {
-                        if (target.classList.contains('graphical-report__legend__item')) {
+                        if (target.classList.contains(selector)) {
                             callback(e, target);
                         }
                         target = target.parentNode;
@@ -48,7 +48,7 @@
                     this._delegateEvent(this._container, 'mouseover', 'graphical-report__legend__item', function (e, currentTarget) {
                         this._highlightToggle(currentTarget, chart, true);
                     }.bind(this));
-                    this._delegateEvent(this._container, 'mouseout', 'graphical-report__legend__item:not(.disabled)', function (e, currentTarget) {
+                    this._delegateEvent(this._container, 'mouseout', 'graphical-report__legend__item', function (e, currentTarget) {
                         this._highlightToggle(currentTarget, chart, false);
                     }.bind(this));
                 }

diff --git a/build/plugins/tauCharts.tooltip.css b/build/plugins/tauCharts.tooltip.css
@@ -4,6 +4,8 @@
   left: 0;
   max-width: 300px;
   z-index: 900;
+  display: flex;
+  align-items: stretch;
   font-family: OpenSans, 'Helvetica Neue', Helvetica, Arial, sans-serif;
   font-size: 11px;
   background: rgba(255, 255, 255, 0.9);
@@ -23,14 +25,27 @@
   padding: 15px 15px 10px 15px;
 }
 .graphical-report__tooltip__exclude {
-  padding: 0 15px;
-  line-height: 26px;
-  border-top: 1px solid #dde2e7;
+  border-right: 1px solid #dde2e7;
   color: #65717f;
   cursor: pointer;
+  min-height: 86px;
+  width: 26px;
+  position: relative;
+}
+.graphical-report__tooltip__exclude__wrap {
+  line-height: 26px;
+  padding: 0 15px;
+  transform: rotate(-90deg) translate(-50%, 0);
+  transform-origin: 0 0 ;
+  height: 100%;
+  white-space: nowrap;
+  position: absolute;
+  top: 50%;
+  left: 0;
+  box-sizing: border-box;
 }
 .graphical-report__tooltip__exclude:hover {
-  background: linear-gradient(to bottom, rgba(235, 238, 241, 0.9) 0%, rgba(255, 255, 255, 0) 100%);
+  background: linear-gradient(to right, rgba(235, 238, 241, 0.9) 0%, rgba(255, 255, 255, 0) 100%);
 }
 .graphical-report__tooltip__exclude .tau-icon-close-gray {
   display: inline-block;

diff --git a/build/plugins/tauCharts.tooltip.js b/build/plugins/tauCharts.tooltip.js
@@ -27,7 +27,11 @@
         return {
             template: [
                 '<div class="i-role-content graphical-report__tooltip__content"></div>',
-                '<div class="i-role-exclude graphical-report__tooltip__exclude"><span class="tau-icon-close-gray"></span>Exclude</div>',
+                '<div class="i-role-exclude graphical-report__tooltip__exclude">',
+                    '<div class="graphical-report__tooltip__exclude__wrap">',
+                        '<span class="tau-icon-close-gray"></span>Exclude',
+                    '</div>',
+                '</div>'
             ].join(''),
             itemTemplate: [
                 '<div class="graphical-report__tooltip__list__item">',
@@ -55,8 +59,8 @@
                     this._hide();
                 }.bind(this), false);
             },
-            formatters:{},
-            _getFormatter:function(field){
+            formatters: {},
+            _getFormatter: function (field) {
                 return this.formatters[field] || _.identity;
             },
             init: function (chart) {
@@ -78,9 +82,12 @@
                 }.bind(this), false);
                 elementTooltip.addEventListener('click', function (e) {
                     var target = e.target;
-                    if (target.classList.contains('i-role-exclude')) {
-                        this._exclude();
-                        this._hide();
+                    while (target !== e.currentTarget && target !== null) {
+                        if (target.classList.contains('i-role-exclude')) {
+                            this._exclude();
+                            this._hide();
+                        }
+                        target = target.parentNode;
                     }
                 }.bind(this), false);
                 elementTooltip.insertAdjacentHTML('afterbegin', this.template);

diff --git a/build/plugins/tauCharts.tooltip.min.css b/build/plugins/tauCharts.tooltip.min.css
diff --git a/css/tooltip.css b/css/tooltip.css
@@ -4,6 +4,8 @@
   left: 0;
   max-width: 300px;
   z-index: 900;
+  display: flex;
+  align-items: stretch;
   font-family: OpenSans, 'Helvetica Neue', Helvetica, Arial, sans-serif;
   font-size: 11px;
   background: rgba(255, 255, 255, 0.9);
@@ -23,14 +25,27 @@
   padding: 15px 15px 10px 15px;
 }
 .graphical-report__tooltip__exclude {
-  padding: 0 15px;
-  line-height: 26px;
-  border-top: 1px solid #dde2e7;
+  border-right: 1px solid #dde2e7;
   color: #65717f;
   cursor: pointer;
+  min-height: 86px;
+  width: 26px;
+  position: relative;
+}
+.graphical-report__tooltip__exclude__wrap {
+  line-height: 26px;
+  padding: 0 15px;
+  transform: rotate(-90deg) translate(-50%, 0);
+  transform-origin: 0 0 ;
+  height: 100%;
+  white-space: nowrap;
+  position: absolute;
+  top: 50%;
+  left: 0;
+  box-sizing: border-box;
 }
 .graphical-report__tooltip__exclude:hover {
-  background: linear-gradient(to bottom, rgba(235, 238, 241, 0.9) 0%, rgba(255, 255, 255, 0) 100%);
+  background: linear-gradient(to right, rgba(235, 238, 241, 0.9) 0%, rgba(255, 255, 255, 0) 100%);
 }
 .graphical-report__tooltip__exclude .tau-icon-close-gray {
   display: inline-block;

diff --git a/plugins/legend.js b/plugins/legend.js
@@ -31,7 +31,7 @@
                 element.addEventListener(eventName, function (e) {
                     var target = e.target;
                     while (target !== e.currentTarget && target !== null) {
-                        if (target.classList.contains('graphical-report__legend__item')) {
+                        if (target.classList.contains(selector)) {
                             callback(e, target);
                         }
                         target = target.parentNode;
@@ -48,7 +48,7 @@
                     this._delegateEvent(this._container, 'mouseover', 'graphical-report__legend__item', function (e, currentTarget) {
                         this._highlightToggle(currentTarget, chart, true);
                     }.bind(this));
-                    this._delegateEvent(this._container, 'mouseout', 'graphical-report__legend__item:not(.disabled)', function (e, currentTarget) {
+                    this._delegateEvent(this._container, 'mouseout', 'graphical-report__legend__item', function (e, currentTarget) {
                         this._highlightToggle(currentTarget, chart, false);
                     }.bind(this));
                 }

diff --git a/plugins/tooltip.js b/plugins/tooltip.js
@@ -59,8 +59,8 @@
                     this._hide();
                 }.bind(this), false);
             },
-            formatters:{},
-            _getFormatter:function(field){
+            formatters: {},
+            _getFormatter: function (field) {
                 return this.formatters[field] || _.identity;
             },
             init: function (chart) {
@@ -82,9 +82,12 @@
                 }.bind(this), false);
                 elementTooltip.addEventListener('click', function (e) {
                     var target = e.target;
-                    if (target.classList.contains('i-role-exclude')) {
-                        this._exclude();
-                        this._hide();
+                    while (target !== e.currentTarget && target !== null) {
+                        if (target.classList.contains('i-role-exclude')) {
+                            this._exclude();
+                            this._hide();
+                        }
+                        target = target.parentNode;
                     }
                 }.bind(this), false);
                 elementTooltip.insertAdjacentHTML('afterbegin', this.template);

diff --git a/prototype/scatter.html b/prototype/scatter.html
@@ -209,7 +209,6 @@
                 data: data,
                 type: getFieldData($type),
                 plugins: [tauCharts.api.plugins.get('tooltip')({
-                    fields:['type'],
                     formatters:{
                         entityType:function(e) {
                             return e;
@@ -220,7 +219,7 @@
                     }
                 }), tauCharts.api.plugins.get('legend')()],
                 y: ['y'],
-                x: ['x'],
+                x: ['t','x'],
                 color: 'type',
                 guide:[{
                     y: {