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

13 years ago · 5a14913b50
8 changed files with 65 additions and 163 deletions
--- a/pygal/css/graph.css
+++ b/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;
-}
--- a/pygal/graph.py
+++ b/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):
-            idn = 'light%d' % (id + 1)
+        for id in range(len(self.colors)):
+            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', {
--- a/pygal/line.py
+++ b/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,
-                                                         val,
-                                                         field_width,
-                                                         field_height)
+            get_coords = lambda (i, val): self.calc_coords(
+                i, val, 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',
--- a/setup.py
+++ b/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",
--- a/test/moulinrouge/init.py
+++ b/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',
--- a/test/moulinrouge/static/css.css
+++ b/test/moulinrouge/static/css.css
@ -3,7 +3,7 @@ html, body, section, figure {
  padding: 0;
 }

-embed {
+figure {
  float: left;
  border: 1px solid #ccc;
 }
--- a/test/moulinrouge/static/js.js
+++ b/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
+                        })
+                );
+            })
+    );
+});
--- a/test/moulinrouge/templates/_layout.jinja2
+++ b/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>