Start working on animation

pygal/css/graph.css

@@ -162,7 +162,7 @@ text.no_data {
 
 #tooltip rect {
   fill-opacity: 0.8;
-  fill: {{ style.background }};
+  fill: {{ style.plot_background }};
   stroke: {{ style.foreground_light }};
 }
 

pygal/graph/bar.py

@@ -75,12 +75,14 @@ class Bar(Graph):
                 height=height,
                 class_='rect reactive tooltip-trigger')
             self.svg.node(bar, 'desc', class_="values").text = val
+            tooltip_positions = map(
+                str, (x + bar_inner_width / 2., y + height / 2.))
             self.svg.node(bar, 'desc',
                           class_="x centered"
-            ).text = str(x + bar_inner_width / 2.)
+            ).text = tooltip_positions[int(self._horizontal)]
             self.svg.node(bar, 'desc',
                           class_="y centered"
-            ).text = str(y + height / 2.)
+            ).text = tooltip_positions[int(not self._horizontal)]
             if self._horizontal:
                 x += .3 * self.value_font_size
                 y += height / 2

pygal/graph/graph.py

@@ -46,10 +46,23 @@ class Graph(BaseGraph):
             transform="translate(%d, %d)" % (
                 self.margin.left, self.margin.top))
         tooltip_overlay = self.svg.node(
-            self.graph_node, class_="tooltip-overlay",
+            self.graph_node, class_="plot tooltip-overlay",
             transform="translate(%d, %d)" % (
                 self.margin.left, self.margin.top))
         self.tooltip_node = self.svg.node(tooltip_overlay, id="tooltip")
+        self.svg.node(
+            self.tooltip_node, 'animateTransform',
+            attributeName='transform',
+            attributeType='XML',
+            type='translate',
+            dur='1.5s',
+            end='indefinite',
+            begin='indefinite',
+            from_="0 0",
+            to="100 100",
+            additive="sum",
+            repeatCount='indefinite')
+
         self.svg.node(self.tooltip_node, 'rect',
                       id="tooltip-box",
                       rx=5, ry=5,

pygal/graph/pie.py

@@ -18,6 +18,11 @@
 # along with pygal. If not, see <http://www.gnu.org/licenses/>.
 from pygal.graph.graph import Graph
 from math import cos, sin, pi
+project = lambda rho, alpha: (
+    rho * sin(-alpha), rho * cos(-alpha))
+diff = lambda x, y: (x[0] - y[0], x[1] - y[1])
+fmt = lambda x: '%f %f' % x
+get_radius = lambda r: fmt(tuple([r] * 2))
 
 
 class Pie(Graph):
@@ -43,11 +48,6 @@ class Pie(Graph):
                           r=r,
                           class_='slice reactive tooltip-trigger')
         else:
-            project = lambda rho, alpha: (
-                rho * sin(-alpha), rho * cos(-alpha))
-            diff = lambda x, y: (x[0] - y[0], x[1] - y[1])
-            fmt = lambda x: '%f %f' % x
-            get_radius = lambda r: fmt(tuple([r] * 2))
             absolute_project = lambda rho, theta: fmt(
                 diff(center, project(rho, theta)))
             to1 = absolute_project(r, start_angle)

pygal/js/graph.coffee

@@ -49,6 +49,7 @@ hover = (elts, over, out) ->
 tooltip = (elt) ->
     clearTimeout(tooltip_timeout)
     _tooltip = __('tooltip')
+    # _tooltip.setAttribute('display', 'inline')
     _text = _tooltip.getElementsByTagName('text')[0]
     _rect = _tooltip.getElementsByTagName('rect')[0]
     value = elt.nextElementSibling
@@ -70,9 +71,9 @@ tooltip = (elt) ->
         y -= h / 2
     _tooltip.setAttribute('transform', "translate(#{x} #{y})")
 
-untooltip = ->
+untooltip = -> 0
     tooltip_timeout = setTimeout (->
-        __('tooltip').setAttribute('transform', 'translate(-100000, -100000)')), 1000
+        __('tooltip').setfAttribute('display', 'none')), 1000
 
 @svg_load = ->
     for text in _('.text-overlay .series')

pygal/js/graph.js

@@ -116,9 +116,7 @@
   };
 
   untooltip = function() {
-    return tooltip_timeout = setTimeout((function() {
-      return __('tooltip').setAttribute('transform', 'translate(-100000, -100000)');
-    }), 1000);
+    return 0;
   };
 
   this.svg_load = function() {

pygal/style.py

@@ -26,7 +26,7 @@ class Style(object):
         foreground_light='#eee',
         foreground_dark='#555',
         opacity='.8',
-        opacity_hover='.3',
+        opacity_hover='.9',
         transition='250ms',
         colors=(
                 '#ff5995', '#b6e354', '#feed6c', '#8cedff', '#9e6ffe',
@@ -53,7 +53,7 @@ class Style(object):
                     '}}\n'.format(*tupl))
         return '\n'.join(map(color, enumerate(self._colors)))
 
-DefaultStyle = Style()
+DefaultStyle = Style(opacity_hover='.4', opacity='.8')
 LightStyle = Style(
     background='white',
     plot_background='rgba(0, 0, 255, 0.1)',

pygal/svg.py

@@ -73,9 +73,9 @@ class Svg(object):
                 del attrib[key]
             elif not isinstance(value, basestring):
                 attrib[key] = str(value)
-            elif key == 'class_':
-                attrib['class'] = attrib['class_']
-                del attrib['class_']
+            elif key.endswith('_'):
+                attrib[key.rstrip('_')] = attrib[key]
+                del attrib[key]
         return etree.SubElement(parent, tag, attrib)
 
     def transposable_node(self, parent=None, tag='g', attrib=None, **extras):