Generate colors in css + add extern css file + add some js to the tests

pygal/css/graph.css

@@ -116,54 +116,6 @@
     fill-opacity: 0.7;
 }
 
-.key1, .fill1, .dot1 {
-    fill: url(#light1);
-}
-
-.key2, .fill2, .dot2 {
-    fill: url(#light2);
-}
-
-.key3, .fill3, .dot3 {
-    fill: url(#light3);
-}
-
-.key4, .fill4, .dot4 {
-    fill: url(#light4);
-}
-
-.key5, .fill5, .dot5 {
-    fill: url(#light5);
-}
-
-.key6, .fill6, .dot6 {
-    fill: url(#light6);
-}
-
-.key7, .fill7, .dot7 {
-    fill: url(#light7);
-}
-
-.key8, .fill8, .dot8 {
-    fill: url(#light8);
-}
-
-.key9, .fill9, .dot9 {
-    fill: url(#light9);
-}
-
-.key10, .fill10, .dot10 {
-    fill: url(#light10);
-}
-
-.key11, .fill11, .dot11 {
-    fill: url(#light11);
-}
-
-.key12, .fill12, .dot12 {
-    fill: url(#light12);
-}
-
 .line {
   fill: none;
   stroke-width: 1.5px;
@@ -173,100 +125,3 @@
 .line:hover {
   stroke-width: 3px;
 }
-
-.key1, .line1 {
-    stroke: url(#light1);
-}
-
-.key2, .line2 {
-    stroke: url(#light2);
-}
-
-.key3, .line3 {
-    stroke: url(#light3);
-}
-
-.key4, .line4 {
-    stroke: url(#light4);
-}
-
-.key5, .line5 {
-    stroke: url(#light5);
-}
-
-.key6, .line6 {
-    stroke: url(#light6);
-}
-
-.key7, .line7 {
-    stroke: url(#light7);
-}
-
-.key8, .line8 {
-    stroke: url(#light8);
-}
-
-.key9, .line9 {
-    stroke: url(#light9);
-}
-
-.key10, .line10 {
-    stroke: url(#light10);
-}
-
-.key11, .line11 {
-    stroke: url(#light11);
-}
-
-.key12, .line12 {
-    stroke: url(#light12);
-}
-
-
-.light1 {
-  stop-color: #2a4269;
-}
-
-.light2 {
-  stop-color: #476fb2;
-}
-
-.light3 {
-  stop-color: #38588e;
-}
-
-.light4 {
-  stop-color: #698bc3;
-}
-
-.light5 {
-  stop-color: #00ccff;
-}
-
-.light6 {
-  stop-color: #ff00ff;
-}
-
-.light7 {
-  stop-color: #00ffff;
-}
-
-.light8 {
-  stop-color: #ffff00;
-}
-
-.light9 {
-  stop-color: #cc6666;
-}
-
-.light10 {
-  stop-color: #663399;
-}
-
-.light11 {
-  stop-color: #339900;
-}
-
-.light12 {
-  stop-color: #9966FF;
-}

pygal/graph.py

@@ -85,12 +85,16 @@ class Graph(object):
     y_title_font_size = 14
     key_font_size = 10
     key_box_size = 10
-
     add_popups = False
 
     top_align = top_font = right_align = right_font = 0
     stylesheet_names = ['graph.css']
     compress = False
+    colors = [
+        "#2a4269", "#476fb2", "#38588e", "#698bc3",
+        "#69c38b", "#588e38", "#47b26f", "#42692a",
+        "#1a3259", "#375fa2", "#28487e", "#597bb3",
+        "#59b37b", "#487e28", "#37a25f", "#32591a"]
 
     def __init__(self, config={}):
         """Initialize the graph object with the graph settings."""
@@ -468,7 +472,7 @@ class Graph(object):
                 'y': y_offset,
                 'width': self.key_box_size,
                 'height': self.key_box_size,
-                'class': 'key key%s' % (key_count + 1),
+                'class': 'key key%s' % key_count,
             })
             text = node(group, 'text', {
                 'x': self.key_box_size + 5,
@@ -487,8 +491,8 @@ class Graph(object):
         """
         Override and place code to add defs here. TODO: what are defs?
         """
-        for id in range(12):
+        for id in range(len(self.colors)):
-            idn = 'light%d' % (id + 1)
+            idn = 'line-color-%d' % id
             light = node(defs, 'linearGradient', {
                 'id': idn,
                 'x1': 0,
@@ -556,6 +560,25 @@ class Graph(object):
                     os.path.join(os.path.dirname(__file__), 'css',
                                  stylesheet)) as f:
                     style.text += f.read() % opts
+            for n, color in enumerate(self.colors):
+                style.text += (
+"""
+.key%d, .fill%d, .dot%d {
+    fill: url(#line-color-%d);
+}
+.key%d, .line%d {
+    stroke: url(#line-color-%d);
+}
+
+.line-color-%d {
+  stop-color: %s;
+}
+
+""" % (n, n, n, n, n, n, n, n, color))
+
+        if hasattr(self, 'stylesheet_file'):
+            with open(self.stylesheet_file) as f:
+                style.text += f.read() % opts
 
         self.root.append(etree.Comment('SVG Background'))
         node(self.root, 'rect', {

pygal/line.py

@@ -20,7 +20,7 @@ class Line(Graph):
 
     scale_divisions = None
 
-    #override some defaults
+    # override some defaults
     top_align = top_font = right_align = right_font = True
 
     stylesheet_names = Graph.stylesheet_names + ['plot.css']
@@ -66,7 +66,6 @@ class Line(Graph):
         range = max_value - min_value
         top_pad = (range / 20.0) or 10
         scale_range = (max_value + top_pad) - min_value
-
         scale_division = self.scale_divisions or (scale_range / 10.0)
 
         if self.scale_integers:
@@ -111,16 +110,12 @@ class Line(Graph):
         coord_format = lambda c: '%(x)s %(y)s' % c
 
         for line_n, data in reversed(list(enumerate(self.data, 1))):
-            apath = ''
-
             if not self.stacked:
                 cum_sum = [-min_value] * len(self.fields)
 
             cum_sum = map(add, cum_sum, data['data'])
-            get_coords = lambda (i, val): self.calc_coords(i,
+            get_coords = lambda (i, val): self.calc_coords(
-                                                         val,
+                i, val, field_width, field_height)
-                                                         field_width,
-                                                         field_height)
             coords = map(get_coords, enumerate(cum_sum))
             paths = map(coord_format, coords)
             line_path = ' '.join(paths)
@@ -147,25 +142,27 @@ class Line(Graph):
                     'Z'
                 ))
                 node(self.graph, 'path', {
-                    'class': 'fill fill%s' % line_n,
+                    'class': 'fill fill%s' % (line_n - 1),
                     'd': d,
                 })
 
             # now draw the line itself
             node(self.graph, 'path', {
                 'd': 'M0 %s L%s' % (self.graph_height, line_path),
-                'class': 'line line%s' % line_n,
+                'class': 'line line%s' % (line_n - 1),
                 })
 
             if self.show_data_points or self.show_data_values:
+                holder = node(self.graph, "g",
+                             {'class': 'lines-holder'})
                 for i, value in enumerate(cum_sum):
-                    group = node(self.graph, "g",
+                    group = node(holder, "g",
                                  {'class': 'lines'})
                     if self.show_data_points:
                         node(
                             group,
                             'circle',
-                            {'class': 'dot dot%s' % line_n},
+                            {'class': 'dot dot%s' % (line_n - 1)},
                             cx=str(field_width * i),
                             cy=str(self.graph_height - value * field_height),
                             r='2.5',

setup.py

@@ -28,6 +28,7 @@ setup_params = dict(
     install_requires=[
         'lxml>=2.0',
     ],
+    package_data={'pygal': ['css/*']},
     license="MIT",
     classifiers=[
         "Development Status :: 5 - Production/Stable",

test/moulinrouge/__init__.py

@@ -69,7 +69,7 @@ def create_app():
 
     @app.route("/all")
     def all():
-        width, height = 800, 600
+        width, height = 600, 400
         svgs = [url_for('all_svg', type=type) for type in
                 ('vbar', 'hbar', 'line', 'pie')]
         return render_template('svgs.jinja2',

test/moulinrouge/static/css.css

@@ -3,7 +3,7 @@ html, body, section, figure {
   padding: 0;
 }
 
-embed {
+figure {
   float: left;
   border: 1px solid #ccc;
 }

test/moulinrouge/static/js.js

@@ -0,0 +1,24 @@
+$(function () {
+    $('figure figcaption').append(
+        $('<button>')
+            .text('⟳')
+            .click(function() {
+                var $fig, $embed, w, h, src;
+                $fig = $(this).closest('figure');
+                $embed = $fig.find('embed');
+                w = $embed.width();
+                h = $embed.height();
+                src = $embed.attr('src');
+                $embed.remove();
+                $fig.prepend(
+                    $('<embed>')
+                        .attr({
+                            src: src,
+                            type: 'image/svg+xml',
+                            width: w,
+                            height: h
+                        })
+                );
+            })
+    );
+});

test/moulinrouge/templates/_layout.jinja2

@@ -2,6 +2,8 @@
 <html>
   <head>
     <title>Moulin rouge - pygal test platform</title>
+    <script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
+    <script type="text/javascript" src="{{ url_for('static', filename='js.js') }}"></script>
     <link rel="stylesheet" href="{{ url_for('static', filename='css.css') }}" type="text/css" />
   </head>
   <body>