Skip to content

Commit

Permalink
middle build
Browse files Browse the repository at this point in the history
  • Loading branch information
@vladminsky
vladminsky committed Dec 4, 2014
1 parent d95b427 commit 934fe51
Show file tree
Hide file tree
Showing 9 changed files with 694 additions and 668 deletions.
1 change: 1 addition & 0 deletions build/css/tauCharts.graphic-elements.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -146,6 +146,7 @@
.graphical-report__svg .label .label-token {
font-size: 11px;
font-weight: bold;
letter-spacing: 1px;
}
.graphical-report__svg .label .label-token-1,
.graphical-report__svg .label .label-token-2 {
Expand Down
2 changes: 1 addition & 1 deletion build/css/tauCharts.graphic-elements.min.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

75 changes: 46 additions & 29 deletions build/plugins/tauCharts.tooltip.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
(function(factory) {
(function (factory) {
if (typeof define === "function" && define.amd) {
define(['tauCharts'], function(tauPlugins) {
define(['tauCharts'], function (tauPlugins) {
return factory(tauPlugins);
});
} else if (typeof module === "object" && module.exports) {
Expand All @@ -9,7 +9,7 @@
} else {
factory(this.tauCharts);
}
})(function(tauCharts) {
})(function (tauCharts) {
/** @class Tooltip
* @extends Plugin */
/* Usage
Expand All @@ -18,6 +18,7 @@
*/
var _ = tauCharts.api._;
var d3 = tauCharts.api.d3;

function tooltip(settings) {
settings = settings || {};
return {
Expand All @@ -32,10 +33,10 @@
'<div class="graphical-report__tooltip__list__elem"><%=value%></div>',
'</div>'
].join(''),
onExcludeData: function() {
onExcludeData: function () {

},
_drawPoint: function(container, x, y, color) {
_drawPoint: function (container, x, y, color) {
if (this.circle) {
this.circle.remove();
}
Expand All @@ -44,31 +45,31 @@
.attr("cy", y)
.attr('class', color)
.attr("r", 4);
this.circle.node().addEventListener('mouseover', function() {
this.circle.node().addEventListener('mouseover', function () {
clearTimeout(this._interval);
}.bind(this), false);
this.circle.node().addEventListener('mouseleave', function() {
this.circle.node().addEventListener('mouseleave', function () {
this._hide();
}.bind(this), false);
},
init: function(chart) {
init: function (chart) {
this._chart = chart;
this._dataFields = settings.fields;
_.extend(this,_.omit(settings,'fields'));
_.extend(this, _.omit(settings, 'fields'));
this._interval = null;
this._dataWithCoords = {};
this._unitMeta = {};
this._templateItem = _.template(this.itemTemplate);
this._tooltip = chart.addBalloon({spacing: 5, auto: true});
this._elementTooltip = this._tooltip.getElement();
var elementTooltip = this._elementTooltip;
elementTooltip.addEventListener('mouseover', function() {
elementTooltip.addEventListener('mouseover', function () {
clearTimeout(this._interval);
}.bind(this), false);
elementTooltip.addEventListener('mouseleave', function() {
elementTooltip.addEventListener('mouseleave', function () {
this._hide();
}.bind(this), false);
elementTooltip.addEventListener('click', function(e) {
elementTooltip.addEventListener('click', function (e) {
var target = e.target;
if (target.classList.contains('i-role-exclude')) {
this._exclude();
Expand All @@ -77,12 +78,12 @@
}.bind(this), false);
elementTooltip.insertAdjacentHTML('afterbegin', this.template);
},
onUnitReady: function(chart, unitMeta) {
onUnitReady: function (chart, unitMeta) {
if (unitMeta.type && unitMeta.type.indexOf('ELEMENT') === 0) {
var key = this._generateKey(unitMeta.$where);
this._unitMeta[key] = unitMeta;
var values = unitMeta.partition();
this._dataWithCoords[key] = values.map(function(item) {
this._dataWithCoords[key] = values.map(function (item) {
return {
x: unitMeta.options.xScale(item[unitMeta.x.scaleDim]),
y: unitMeta.options.yScale(item[unitMeta.y.scaleDim]),
Expand All @@ -92,27 +93,42 @@

}
},
render: function(data) {
return this._dataFields.map(function(field) {
render: function (data, fields) {
return fields.map(function (field) {
return this._templateItem({label: field, value: data[field]});
}, this).join('');
},
_exclude: function() {
_exclude: function () {
var dataChart = this._chart.getData();
this._chart.setData(_.without(dataChart, this._currentElement));
this.onExcludeData(this._currentElement);
},
_calculateLength: function(x1, y1, x2, y2) {
_calculateLength: function (x1, y1, x2, y2) {
return (x2 - x1) * (x2 - x1) + (y2 - y1) * (y2 - y1);
},
_generateKey: function(data) {
_generateKey: function (data) {
return JSON.stringify(data);
},
onElementMouseOver: function(chart, data) {
_getFields: function (unit) {
if (this._dataFields) {
return this._dataFields;
}
var fields = [unit.size.scaleDim, unit.color.scaleDim];
var x = [];
var y = [];
while (unit = unit.parentUnit) {
x.push(unit.x.scaleDim);
y.push(unit.y.scaleDim);
}

return _.compact(fields.concat(y, x).reverse());

},
onElementMouseOver: function (chart, data) {
clearInterval(this._interval);
var coord = d3.mouse(data.element);
var key = this._generateKey(data.cellData.$where);
var item = _.min(this._dataWithCoords[key], function(a) {
var item = _.min(this._dataWithCoords[key], function (a) {
return this._calculateLength(a.x, a.y, coord[0], coord[1]);
}, this);
if (this._currentElement === item) {
Expand All @@ -122,39 +138,40 @@
this._drawPoint(d3.select(data.element.parentNode), item.x, item.y, this._unitMeta[key].options.color.get(data.elementData.key));
}
var content = this._elementTooltip.querySelectorAll('.i-role-content');
if(content[0]) {
content[0].innerHTML = this.render(item.item);
if (content[0]) {
var fields = this._getFields(this._unitMeta[key]);
content[0].innerHTML = this.render(item.item, fields);
} else {
console.log('template should contain i-role-content class');
}

this._show();
this._currentElement = item.item;
},
onElementMouseOut: function() {
onElementMouseOut: function () {
this._hide();
},
_show: function() {
_show: function () {
this._tooltip.show();
var el = d3.mouse(this._elementTooltip.parentNode);
this._tooltip.position(el[0], el[1]).updateSize();
},
_hide: function() {
this._interval = setTimeout(function() {
_hide: function () {
this._interval = setTimeout(function () {
this._currentElement = null;
this._tooltip.hide();
if (this.circle) {
this.circle.remove();
}
}.bind(this), 300);
},
_destroyTooltip: function() {
_destroyTooltip: function () {
if (this.circle) {
this.circle.remove();
}
this._tooltip.destroy();
},
destroy: function() {
destroy: function () {
this._destroyTooltip();
}
};
Expand Down
Loading

0 comments on commit 934fe51

Please sign in to comment.