diff --git a/build/plugins/tauCharts.legend.js b/build/plugins/tauCharts.legend.js
index 9ea202329..56c83e954 100644
--- 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
index 59f913881..264e36a98 100644
--- 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
index 1403c8457..5f40d6a61 100644
--- a/build/plugins/tauCharts.tooltip.js
+++ b/build/plugins/tauCharts.tooltip.js
@@ -27,7 +27,11 @@
return {
template: [
'',
- 'Exclude
',
+ ''
].join(''),
itemTemplate: [
'',
@@ -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
index 762e8a101..3e0350a39 100644
--- a/build/plugins/tauCharts.tooltip.min.css
+++ b/build/plugins/tauCharts.tooltip.min.css
@@ -1 +1 @@
-.graphical-report__tooltip{position:absolute;top:0;left:0;max-width:300px;z-index:900;font-family:OpenSans,'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:11px;background:rgba(255,255,255,.9);box-shadow:0 1px 4px 0 rgba(0,0,0,.2),0 0 0 1px rgba(0,0,0,.05)}.graphical-report__tooltip.fade{opacity:0;transition:opacity 200ms ease-out}.graphical-report__tooltip.fade.in{opacity:1;transition-duration:100ms}.graphical-report__tooltip__content{overflow:hidden;padding:15px 15px 10px}.graphical-report__tooltip__exclude{padding:0 15px;line-height:26px;border-top:1px solid #dde2e7;color:#65717f;cursor:pointer}.graphical-report__tooltip__exclude:hover{background:linear-gradient(to bottom,rgba(235,238,241,.9) 0,rgba(255,255,255,0) 100%)}.graphical-report__tooltip__exclude .tau-icon-close-gray{display:inline-block;width:12px;height:12px;position:relative;top:3px;margin-right:5px;background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSIzMHB4IiBoZWlnaHQ9IjMwcHgiIHZpZXdCb3g9IjAgMCAzMCAzMCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMzAgMzAiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwYXRoIGlkPSJTaGFwZV8zNV8iIGZpbGw9IiM4NDk2QTciIGQ9Ik0xMCwwLjcxNUw5LjI4NSwwTDUsNC4yODVMMC43MTUsMEwwLDAuNzE1TDQuMjg1LDVMMCw5LjI4NUwwLjcxNSwxMEw1LDUuNzE1TDkuMjg1LDEwTDEwLDkuMjg1TDUuNzE1LDVMMTAsMC43MTV6Ii8+PC9zdmc+)}.graphical-report__tooltip__list{display:table}.graphical-report__tooltip__list__item{display:table-row}.graphical-report__tooltip__list__elem{display:table-cell;padding-bottom:4px;line-height:1.3}.graphical-report__tooltip__list__elem:not(:first-child){padding-left:15px}.graphical-report__tooltip__gray-text,.graphical-report__tooltip__list__elem:first-child{color:#8e8e8e}
\ No newline at end of file
+.graphical-report__tooltip{position:absolute;top:0;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,.9);box-shadow:0 1px 4px 0 rgba(0,0,0,.2),0 0 0 1px rgba(0,0,0,.05)}.graphical-report__tooltip.fade{opacity:0;transition:opacity 200ms ease-out}.graphical-report__tooltip.fade.in{opacity:1;transition-duration:100ms}.graphical-report__tooltip__content{overflow:hidden;padding:15px 15px 10px}.graphical-report__tooltip__exclude{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 right,rgba(235,238,241,.9) 0,rgba(255,255,255,0) 100%)}.graphical-report__tooltip__exclude .tau-icon-close-gray{display:inline-block;width:12px;height:12px;position:relative;top:3px;margin-right:5px;background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSIzMHB4IiBoZWlnaHQ9IjMwcHgiIHZpZXdCb3g9IjAgMCAzMCAzMCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMzAgMzAiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwYXRoIGlkPSJTaGFwZV8zNV8iIGZpbGw9IiM4NDk2QTciIGQ9Ik0xMCwwLjcxNUw5LjI4NSwwTDUsNC4yODVMMC43MTUsMEwwLDAuNzE1TDQuMjg1LDVMMCw5LjI4NUwwLjcxNSwxMEw1LDUuNzE1TDkuMjg1LDEwTDEwLDkuMjg1TDUuNzE1LDVMMTAsMC43MTV6Ii8+PC9zdmc+)}.graphical-report__tooltip__list{display:table}.graphical-report__tooltip__list__item{display:table-row}.graphical-report__tooltip__list__elem{display:table-cell;padding-bottom:4px;line-height:1.3}.graphical-report__tooltip__list__elem:not(:first-child){padding-left:15px}.graphical-report__tooltip__gray-text,.graphical-report__tooltip__list__elem:first-child{color:#8e8e8e}
\ No newline at end of file
diff --git a/css/tooltip.css b/css/tooltip.css
index 59f913881..264e36a98 100644
--- 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
index 9ea202329..56c83e954 100644
--- 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
index 8abc4ae47..d3512bb5f 100644
--- 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
index ce5987373..bd8e17f58 100644
--- 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: {