Updates

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "tauCharts",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "homepage": "https://github.com/TargetProcess/tauCharts",
   "description": "Simple charts library based on d3",
   "keywords": [

build/development/plugins/tauCharts.legend.js

@@ -58,6 +58,7 @@
                 }
             },
             _highlightToggle: function (target, chart, toggle) {
+                var colorScale = this._unit.options.color;
                 var svg = chart.getSVG();
                 var d3Chart = d3.select(svg);
                 if (target.classList.contains('disabled')) {
@@ -67,18 +68,27 @@
                     var value = target.getAttribute('data-value');
                     var originValue = this._storageValues[value];
                     var color = originValue.color;
-                    d3Chart.selectAll('.i-role-element').classed({'graphical-report__highlighted': false});
-                    d3Chart.selectAll('.i-role-element.' + color)
+
+                    d3Chart
+                        .selectAll('.i-role-element')
+                        .classed({'graphical-report__highlighted': false});
+
+                    d3Chart
+                        .selectAll('.i-role-element.' + color)
                         .filter(function (item) {
-                            return (item[originValue.dimension] || _.chain(item.values).pluck(originValue.dimension).unique().first().value())  === originValue.value;
-                        }).
-                        classed({'graphical-report__highlighted': true});
+                            var propObject = item.hasOwnProperty(originValue.dimension) ?
+                                item[originValue.dimension] :
+                                _.chain(item.values).pluck(originValue.dimension).unique().first().value();
+
+                            return colorScale.legend(propObject).value === originValue.value;
+                        })
+                        .classed({'graphical-report__highlighted': true});
+
                     d3Chart.classed({'graphical-report__highlighted_chart': true});
                 } else {
                     d3Chart.selectAll('.i-role-element').classed({'graphical-report__highlighted': false});
                     d3Chart.classed({'graphical-report__highlighted_chart': false});
                 }
-
             },
             _toggleLegendItem: function (target, chart) {
                 var colorScale = this._unit.options.color;

build/development/plugins/tauCharts.tooltip.css

@@ -10,6 +10,7 @@
   font-size: 11px;
   background: rgba(255, 255, 255, 0.9);
   box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.05);
+  overflow: hidden;
   /* Fade */
 }
 .graphical-report__tooltip.fade {

build/development/plugins/tauCharts.tooltip.js

@@ -42,9 +42,9 @@
             template: [
                 '<div class="i-role-content graphical-report__tooltip__content"></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 class="graphical-report__tooltip__exclude__wrap">',
+                '<span class="tau-icon-close-gray"></span>Exclude',
+                '</div>',
                 '</div>'
             ].join(''),
             itemTemplate: [
@@ -80,6 +80,7 @@
                 this._chart = chart;
                 this._dataFields = settings.fields;
                 this._getDataFields = settings.getFields;
+
                 _.extend(this, _.omit(settings, 'fields', 'getFields'));
                 this._timeoutHideId = null;
                 this._dataWithCoords = {};
@@ -92,7 +93,7 @@
 
                 var dimensionGuides = this._findDimensionGuides(spec);
 
-                var lastGuides = _.reduce(dimensionGuides, function(memo, guides, key){
+                var lastGuides = _.reduce(dimensionGuides, function (memo, guides, key) {
                     memo[key] = _.last(guides);
                     return memo;
                 }, {});
@@ -122,8 +123,14 @@
                     }
                 }.bind(this), false);
                 elementTooltip.insertAdjacentHTML('afterbegin', this.template);
+                this.afterInit(this._elementTooltip);
+            },
+
+            afterInit: function (elementTooltip) {
 
             },
+
+
             onUnitReady: function (chart, unitMeta) {
                 if (unitMeta.type && unitMeta.type.indexOf('ELEMENT') === 0) {
                     var key = this._generateKey(unitMeta.$where);
@@ -140,7 +147,7 @@
                 }
             },
 
-            renderItem: function(label, formattedValue, field, rawValue){
+            renderItem: function (label, formattedValue, field, rawValue) {
                 return this._templateItem({
                     label: label,
                     value: formattedValue
@@ -157,6 +164,10 @@
                     return this.renderItem(label, formattedValue, field, rawValue);
                 }, this).join('');
             },
+            afterRender: function (toolteipElement) {
+
+            },
+
             onRender: function (chart) {
                 if (_.isFunction(this._getDataFields)) {
                     this._dataFields = this._getDataFields(chart);
@@ -167,7 +178,7 @@
             _getFormatter: function (field) {
                 return this.formatters[field] || _.identity;
             },
-            _getLabel: function(field){
+            _getLabel: function (field) {
                 return this.labels[field] || field;
             },
 
@@ -206,10 +217,10 @@
                 }, {});
             },
 
-            _findDimensionGuides: function(spec){
+            _findDimensionGuides: function (spec) {
                 var dimensionGuideMap = {};
 
-                var collect = function(field, unit){
+                var collect = function (field, unit) {
                     var property = unit[field];
                     if (property) {
                         var guide = (unit.guide || {})[field];
@@ -224,7 +235,7 @@
                     }
                 };
 
-                dfs(spec.unit, function(unit){
+                dfs(spec.unit, function (unit) {
                     collect('x', unit);
                     collect('y', unit);
                     collect('color', unit);

build/development/tauCharts.js

@@ -1,4 +1,4 @@
-/*! taucharts - v0.3.3 - 2015-01-14
+/*! taucharts - v0.3.4 - 2015-01-15
 * https://github.com/TargetProcess/tauCharts
 * Copyright (c) 2015 Taucraft Limited; Licensed Apache License 2.0 */
 (function (root, factory) {
@@ -540,6 +540,9 @@ define('utils/utils-dom',["exports"], function (exports) {
       size.width = rect.right - rect.left;
       size.height = rect.bottom - rect.top;
 
+      var avgLetterSize = (text.length !== 0) ? (size.width / text.length) : 0;
+      size.width = size.width + (1.5 * avgLetterSize);
+
       document.body.removeChild(div);
 
       return size;
@@ -3187,7 +3190,7 @@ define('unit-domain-mixin',["exports", "./unit-domain-period-generator", "./util
           return varMeta.extract(item[splitByProperty]);
         }).map(function (values) {
           return ({
-            key: varMeta.extract(values[0][splitByProperty]),
+            key: values[0][splitByProperty],
             values: values
           });
         }).value();

component.json

@@ -1,6 +1,6 @@
 {
   "name": "tauCharts",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "ignore": [
     "/*",
     "!build/**",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "taucharts",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "homepage": "https://github.com/TargetProcess/tauCharts",
   "description": "Simple charts library based on d3",
   "author": {