Better js integration in maps. Use the normal tooltip

demo/moulinrouge/tests.py

@@ -472,25 +472,30 @@ def get_test_routes(app):
 
     @app.route('/test/worldmap')
     def test_worldmap():
-        wmap = world.World(style=choice(list(styles.values())))
-
-        wmap.add('1st', [('fr', 100), ('us', 10)])
+        wmap = world.World(print_values=True, style=choice(list(styles.values())))
+        wmap.add('1st', [('fr', 100), {
+            'value': ('us', 10),
+            'node': {'style': 'fill: red'}
+        }
+        ])
         wmap.add('2nd', [('jp', 1), ('ru', 7), ('uk', 0)])
         wmap.add('3rd', ['ch', 'cz', 'ca', 'cn'])
         wmap.add('4th', {'br': 12, 'bo': 1, 'bu': 23, 'fr': 34})
         wmap.add('5th', [{
             'value': ('tw', 10),
             'label': 'First label',
-            'xlink': 'http://google.com?q=tw'
+            'xlink': 'http://google.com?q=tw',
         }, {
             'value': ('bw', 20),
             'label': 'Second one',
-            'xlink': 'http://google.com?q=bw'
+            'xlink': 'http://google.com?q=bw',
+            'node': {'style': 'fill: blue'}
         }, {
             'value': ('mw', 40),
             'label': 'Last'
         }])
         wmap.title = 'World Map !!'
+        wmap.value_formatter = lambda x: '%d%%' % x
         return wmap.render_response()
 
     @app.route('/test/supranational')

docs/changelog.rst

@@ -38,6 +38,8 @@ Changelog
 * Add auto ``print_value`` color + a configurable ``value_colors`` list in style
 * Add ``guide_stroke_dasharray`` and ``guide_stroke_dasharray`` in style to customize guides (#242) (thanks cbergmiller)
 * Refactor label processing in a ``_compute_x_labels`` and ``_compute_y_labels`` method. Handle both string and numbers for all charts. Create a ``Dual`` base chart for dual axis charts.  (#236)
+* Better js integration in maps. Use the normal tooltip.
+
 
 1.7.0
 =====

pygal/graph/dot.py

@@ -23,11 +23,13 @@ the bigger the dot
 """
 
 from __future__ import division
-from pygal.util import decorate, cut, safe_enumerate, cached_property, alter
-from pygal.graph.graph import Graph
-from pygal.view import View, ReverseView
+
 from math import log10
 
+from pygal.graph.graph import Graph
+from pygal.util import alter, cached_property, decorate, safe_enumerate
+from pygal.view import ReverseView, View
+
 
 class Dot(Graph):
 

pygal/graph/line.py

@@ -23,8 +23,9 @@ connected by straight segments
 """
 
 from __future__ import division
+
 from pygal.graph.graph import Graph
-from pygal.util import cached_property, compute_scale, decorate, alter, cut
+from pygal.util import alter, cached_property, decorate
 
 
 class Line(Graph):

pygal/graph/map.py

@@ -24,9 +24,10 @@ https://github.com/Kozea/pygal_maps_world
 """
 
 from __future__ import division
-from pygal.graph.graph import Graph
-from pygal.util import cut, cached_property, decorate
+
 from pygal.etree import etree
+from pygal.graph.graph import Graph
+from pygal.util import alter, cached_property, cut, decorate
 
 
 class BaseMap(Graph):
@@ -51,6 +52,10 @@ class BaseMap(Graph):
         """Hook to change the area code"""
         return area_code
 
+    def _get_value(self, value):
+        """Get the value formatted for tooltip"""
+        return '%s: %s' % (self.area_names[value[0]], self._format(value[1]))
+
     def _plot(self):
         """Insert a map in the chart and apply data on it"""
         map = etree.fromstring(self.svg_map)
@@ -88,10 +93,13 @@ class BaseMap(Graph):
                 for area in areae:
                     cls = area.get('class', '').split(' ')
                     cls.append('color-%d' % i)
+                    cls.append('serie-%d' % i)
+                    cls.append('series')
                     area.set('class', ' '.join(cls))
                     area.set('style', 'fill-opacity: %f' % (ratio))
 
                     metadata = serie.metadata.get(j)
+
                     if metadata:
                         node = decorate(self.svg, area, metadata)
                         if node != area:
@@ -104,17 +112,16 @@ class BaseMap(Graph):
                                 node.append(area)
                                 g.insert(index, node)
 
-                    last_node = len(area) > 0 and area[-1]
-                    if last_node is not None and last_node.tag == 'title':
-                        title_node = last_node
-                        text = title_node.text + '\n'
-                    else:
-                        title_node = self.svg.node(area, 'title')
-                        text = ''
+                    for node in area:
+                        cls = node.get('class', '').split(' ')
+                        cls.append('reactive')
+                        cls.append('tooltip-trigger')
+                        cls.append('map-area')
+                        node.set('class', ' '.join(cls))
+                        alter(node, metadata)
 
-                    title_node.text = text + '[%s] %s: %s' % (
-                        serie.title,
-                        self.area_names[area_code], self._format(value))
+                    value = self._get_value((area_code, value))
+                    self._tooltip_data(area, value, 0, 0, classes='auto')
 
         self.nodes['plot'].append(map)
 

pygal/graph/xy.py

@@ -23,10 +23,12 @@ straight segments.
 """
 
 from __future__ import division
+
 from functools import reduce
-from pygal.util import compute_scale, cached_property, compose, ident, cut
-from pygal.graph.line import Line
+
 from pygal.graph.dual import Dual
+from pygal.graph.line import Line
+from pygal.util import cached_property, compose, ident
 
 
 class XY(Line, Dual):

pygal/style.py

@@ -140,7 +140,8 @@ class Style(object):
             if i < len(self.value_colors) and self.value_colors[i] is not None:
                 value_colors.append(self.value_colors[i])
             else:
-                value_colors.append('white' if is_foreground_light(self.colors[i]) else 'black')
+                value_colors.append('white' if is_foreground_light(
+                    colors[i]) else 'black')
 
         return '\n'.join(chain(
             map(color, enumerate(colors)),