From 5a14913b50476389e005d595c26cce570bbb04a2 Mon Sep 17 00:00:00 2001 From: Florian Mounier Date: Wed, 1 Feb 2012 11:13:55 +0100 Subject: [PATCH] Generate colors in css + add extern css file + add some js to the tests --- pygal/css/graph.css | 145 ---------------------- pygal/graph.py | 31 ++++- pygal/line.py | 21 ++-- setup.py | 1 + test/moulinrouge/__init__.py | 2 +- test/moulinrouge/static/css.css | 2 +- test/moulinrouge/static/js.js | 24 ++++ test/moulinrouge/templates/_layout.jinja2 | 2 + 8 files changed, 65 insertions(+), 163 deletions(-) create mode 100644 test/moulinrouge/static/js.js diff --git a/pygal/css/graph.css b/pygal/css/graph.css index 0034264..47f87fe 100644 --- 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; -} diff --git a/pygal/graph.py b/pygal/graph.py index a15b924..bdcfea3 100644 --- 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', { diff --git a/pygal/line.py b/pygal/line.py index 512e295..0f79c0b 100644 --- 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', diff --git a/setup.py b/setup.py index 6fa651a..fc48caa 100644 --- 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", diff --git a/test/moulinrouge/__init__.py b/test/moulinrouge/__init__.py index df44dad..72fdb37 100644 --- 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', diff --git a/test/moulinrouge/static/css.css b/test/moulinrouge/static/css.css index b51c170..3b10063 100644 --- 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; } diff --git a/test/moulinrouge/static/js.js b/test/moulinrouge/static/js.js new file mode 100644 index 0000000..04a3d4f --- /dev/null +++ b/test/moulinrouge/static/js.js @@ -0,0 +1,24 @@ +$(function () { + $('figure figcaption').append( + $('