Update other graphs

pygal/graph/bar.py

@@ -36,8 +36,8 @@ class Bar(Graph):
         bars = self.svg.node(serie_node['plot'], class_="bars")
         view_values = map(view, values)
         for i, ((x, y), (X, Y)) in enumerate(view_values):
-            tag = '%d_%d' % (serie.index, i)
             # x and y are left range coords and X, Y right ones
+            val = self.format(values[i][1][1])
             if self._horizontal:
                 x, y, X, Y = Y, X, y, x
             width = X - x
@@ -73,20 +73,18 @@ class Bar(Graph):
                 ry=self.rounded_bars * 1,
                 width=bar_inner_width,
                 height=height,
-                id="active-%s" % tag,
-                class_='rect reactive')
+                class_='rect reactive tooltip-trigger')
+            self.svg.node(bar, 'desc').text = val
             if self._horizontal:
                 x += .3 * self.value_font_size
                 y += height / 2
             else:
                 y += height / 2 + .3 * self.value_font_size
             self.svg.transposable_node(
-                serie_node['overlay'], 'text',
+                serie_node['text_overlay'], 'text',
                 x=x + bar_inner_width / 2,
-                y=y - shift,
-                id="reactive-%s" % tag,
-                class_='reactive-text'
-            ).text = self.format(values[i][1][1])
+                y=y - shift
+            ).text = val
         return stack_vals
 
     def _compute(self):

pygal/graph/line.py

@@ -44,10 +44,9 @@ class Line(Graph):
 
     def line(self, serie_node, serie):
         view_values = map(self.view, serie.points)
-
         if self.show_dots:
-            dots = self.svg.node(serie_node['overlay'], class_="dots")
             for i, (x, y) in enumerate(view_values):
+                dots = self.svg.node(serie_node['overlay'], class_="dots")
                 val = self._get_value(serie.points, i)
                 self.svg.node(dots, 'circle', cx=x, cy=y, r=2.5,
                               class_='dot reactive tooltip-trigger')

pygal/graph/pie.py

@@ -23,8 +23,9 @@ from math import cos, sin, pi
 class Pie(Graph):
     """Pie graph"""
 
-    def slice(self, serie_node, start_angle, angle, perc, tag,
+    def slice(self, serie_node, start_angle, angle, perc,
             small=False):
+        val = '{:.2%}'.format(perc)
         slices = self.svg.node(serie_node['plot'], class_="slices")
         slice_ = self.svg.node(slices, class_="slice")
         center = ((self.width - self.margin.x) / 2.,
@@ -38,8 +39,7 @@ class Pie(Graph):
                           cx=center[0],
                           cy=center[1],
                           r=r,
-                          id="active-%s" % tag,
-                          class_='slice reactive')
+                          class_='slice reactive tooltip-trigger')
         else:
             rxy = '%f %f' % tuple([r] * 2)
             to = '%f %f' % (r * sin(angle), r * (1 - cos(angle)))
@@ -49,18 +49,16 @@ class Pie(Graph):
                               rxy,
                               1 if angle > pi else 0,
                               to),
-                          id="active-%s" % tag,
                           transform='rotate(%f %s)' % (
                               start_angle * 180 / pi, center_str),
-                          class_='slice reactive')
+                          class_='slice reactive tooltip-trigger')
+        self.svg.node(slice_, 'desc').text = val
         text_angle = pi / 2. - (start_angle + angle / 2.)
-        text_r = r * .8
-        self.svg.node(serie_node['overlay'], 'text',
+        text_r = r * .95
+        self.svg.node(serie_node['text_overlay'], 'text',
                       x=center[0] + text_r * cos(text_angle),
-                      y=center[1] - text_r * sin(text_angle),
-                      id="reactive-%s" % tag,
-                      class_='reactive-text'
-              ).text = '{:.2%}'.format(perc)
+                      y=center[1] - text_r * sin(text_angle)
+        ).text = val
 
     def _compute(self):
         for serie in self.series:
@@ -78,8 +76,7 @@ class Pie(Graph):
             self.slice(
                 self._serie(serie.index),
                 current_angle,
-                angle, sum(serie.values) / total,
-                '%d' % serie.index)
+                angle, sum(serie.values) / total)
             if len(serie.values) > 1:
                 small_current_angle = current_angle
                 for i, val in enumerate(serie.values):
@@ -88,7 +85,6 @@ class Pie(Graph):
                         self._serie(serie.index),
                         small_current_angle,
                         small_angle, val / total,
-                        '%d_%d' % (serie.index, i),
                         True)
                     small_current_angle += small_angle
             current_angle += angle

pygal/js/graph.coffee

@@ -32,11 +32,7 @@ deactivate = (elements...) ->
 
 Function.prototype.bind = (scope) ->
     _fun = @
-    ->
-        _fun.apply(scope, arguments)
-
-reactive = (element) -> document.getElementById('re' + element.id)
-active = (element) -> document.getElementById(element.id.replace(/re/, ''))
+    -> _fun.apply(scope, arguments)
 
 hover = (elts, over, out) ->
     for elt in elts
@@ -70,17 +66,18 @@ untooltip = ->
 @svg_load = ->
     for text in _('.text-overlay .series')
         text.setAttribute('display', 'none')
-    hover _('.reactive-text'), (-> activate(@, active(@))), (-> deactivate(@, active(@)))
-    hover _('.reactive'), (-> activate(@, reactive(@))), (-> deactivate(@, reactive(@)))
+    hover _('.reactive'), (-> activate(@)), (-> deactivate(@))
     hover _('.activate-serie'), (
         ->
             num = this.id.replace('activate-serie-', '')
-            _('.text-overlay .serie-' + num)[0].setAttribute('display', 'inline')
+            for element in _('.text-overlay .serie-' + num)
+                element.setAttribute('display', 'inline')
             for element in _('.serie-' + num + ' .reactive')
                 activate(element, reactive(element))), (
         ->
             num = this.id.replace('activate-serie-', '')
-            _('.text-overlay .serie-' + num)[0].setAttribute('display', 'none')
+            for element in _('.text-overlay .serie-' + num)
+                element.setAttribute('display', 'none')
             for element in _('.serie-' + num + ' .reactive')
                 deactivate(element, reactive(element)))
     hover _('.tooltip-trigger'), (-> tooltip(@)), (-> untooltip())

pygal/js/graph.js

@@ -1,6 +1,6 @@
 // Generated by CoffeeScript 1.2.1-pre
 (function() {
-  var activate, active, add_class, deactivate, hover, padding, reactive, rm_class, svg, tooltip, tooltip_font_size, tooltip_timeout, untooltip, _, __,
+  var activate, add_class, deactivate, hover, padding, rm_class, svg, tooltip, tooltip_font_size, tooltip_timeout, untooltip, _, __,
     __indexOf = [].indexOf || function(item) { for (var i = 0, l = this.length; i < l; i++) { if (i in this && this[i] === item) return i; } return -1; },
     __slice = [].slice;
 
@@ -71,14 +71,6 @@
     };
   };
 
-  reactive = function(element) {
-    return document.getElementById('re' + element.id);
-  };
-
-  active = function(element) {
-    return document.getElementById(element.id.replace(/re/, ''));
-  };
-
   hover = function(elts, over, out) {
     var elt, _i, _len, _results;
     _results = [];
@@ -123,35 +115,38 @@
       text = _ref[_i];
       text.setAttribute('display', 'none');
     }
-    hover(_('.reactive-text'), (function() {
-      return activate(this, active(this));
-    }), (function() {
-      return deactivate(this, active(this));
-    }));
     hover(_('.reactive'), (function() {
-      return activate(this, reactive(this));
+      return activate(this);
     }), (function() {
-      return deactivate(this, reactive(this));
+      return deactivate(this);
     }));
     hover(_('.activate-serie'), (function() {
-      var element, num, _j, _len2, _ref2, _results;
+      var element, num, _j, _k, _len2, _len3, _ref2, _ref3, _results;
       num = this.id.replace('activate-serie-', '');
-      _('.text-overlay .serie-' + num)[0].setAttribute('display', 'inline');
-      _ref2 = _('.serie-' + num + ' .reactive');
-      _results = [];
+      _ref2 = _('.text-overlay .serie-' + num);
       for (_j = 0, _len2 = _ref2.length; _j < _len2; _j++) {
         element = _ref2[_j];
+        element.setAttribute('display', 'inline');
+      }
+      _ref3 = _('.serie-' + num + ' .reactive');
+      _results = [];
+      for (_k = 0, _len3 = _ref3.length; _k < _len3; _k++) {
+        element = _ref3[_k];
         _results.push(activate(element, reactive(element)));
       }
       return _results;
     }), (function() {
-      var element, num, _j, _len2, _ref2, _results;
+      var element, num, _j, _k, _len2, _len3, _ref2, _ref3, _results;
       num = this.id.replace('activate-serie-', '');
-      _('.text-overlay .serie-' + num)[0].setAttribute('display', 'none');
-      _ref2 = _('.serie-' + num + ' .reactive');
-      _results = [];
+      _ref2 = _('.text-overlay .serie-' + num);
       for (_j = 0, _len2 = _ref2.length; _j < _len2; _j++) {
         element = _ref2[_j];
+        element.setAttribute('display', 'none');
+      }
+      _ref3 = _('.serie-' + num + ' .reactive');
+      _results = [];
+      for (_k = 0, _len3 = _ref3.length; _k < _len3; _k++) {
+        element = _ref3[_k];
         _results.push(deactivate(element, reactive(element)));
       }
       return _results;