From da33b7be08ee3d1e1d79bbcfe49233d3ae702076 Mon Sep 17 00:00:00 2001 From: Florian Mounier Date: Tue, 20 Mar 2012 17:53:13 +0100 Subject: [PATCH] Add styles --- pages/chart_types.rst | 34 +++---- pages/documentation.rst | 1 + pages/styles.rst | 192 ++++++++++++++++++++++++++++++++++++++++ static/css/style.css | 3 + 4 files changed, 213 insertions(+), 17 deletions(-) create mode 100644 pages/styles.rst diff --git a/pages/chart_types.rst b/pages/chart_types.rst index c01cec7..7c6fb8a 100644 --- a/pages/chart_types.rst +++ b/pages/chart_types.rst @@ -6,7 +6,7 @@ Chart types =========== -pygal provides X kind of charts: +pygal provides 5 kind of charts: .. contents:: @@ -23,10 +23,10 @@ Basic simple line graph: line_chart = pygal.Line() line_chart.title = 'Browser usage evolution (in %)' line_chart.x_labels = map(str, range(2002, 2013)) - line_chart.add('Firefox', [ 0, 0, 0, 16.6, 25, 31, 36.4, 45.5, 46.3, 42.8, 37.1]) - line_chart.add('Chrome', [ 0, 0, 0, 0, 0, 0, 0, 3.9, 10.8, 23.8, 35.3]) - line_chart.add('IE', [85.8, 84.6, 84.7, 74.5, 66, 58.6, 54.7, 44.8, 36.2, 26.6, 20.1]) - line_chart.add('Others', [14.2, 15.4, 15.3, 8.9, 9, 10.4, 8.9, 5.8, 6.7, 6.8, 7.5]) + line_chart.add('Firefox', [None, None, 0, 16.6, 25, 31, 36.4, 45.5, 46.3, 42.8, 37.1]) + line_chart.add('Chrome', [None, None, None, None, None, None, 0, 3.9, 10.8, 23.8, 35.3]) + line_chart.add('IE', [85.8, 84.6, 84.7, 74.5, 66, 58.6, 54.7, 44.8, 36.2, 26.6, 20.1]) + line_chart.add('Others', [14.2, 15.4, 15.3, 8.9, 9, 10.4, 8.9, 5.8, 6.7, 6.8, 7.5]) Stacked ^^^^^^^ @@ -38,10 +38,10 @@ Same graph but with stacked values and filled rendering: line_chart = pygal.StackedLine(fill=True) line_chart.title = 'Browser usage evolution (in %)' line_chart.x_labels = map(str, range(2002, 2013)) - line_chart.add('Firefox', [ 0, 0, 0, 16.6, 25, 31, 36.4, 45.5, 46.3, 42.8, 37.1]) - line_chart.add('Chrome', [ 0, 0, 0, 0, 0, 0, 0, 3.9, 10.8, 23.8, 35.3]) - line_chart.add('IE', [85.8, 84.6, 84.7, 74.5, 66, 58.6, 54.7, 44.8, 36.2, 26.6, 20.1]) - line_chart.add('Others', [14.2, 15.4, 15.3, 8.9, 9, 10.4, 8.9, 5.8, 6.7, 6.8, 7.5]) + line_chart.add('Firefox', [None, None, 0, 16.6, 25, 31, 36.4, 45.5, 46.3, 42.8, 37.1]) + line_chart.add('Chrome', [None, None, None, None, None, None, 0, 3.9, 10.8, 23.8, 35.3]) + line_chart.add('IE', [85.8, 84.6, 84.7, 74.5, 66, 58.6, 54.7, 44.8, 36.2, 26.6, 20.1]) + line_chart.add('Others', [14.2, 15.4, 15.3, 8.9, 9, 10.4, 8.9, 5.8, 6.7, 6.8, 7.5]) Bar charts / Histograms @@ -57,10 +57,10 @@ Basic simple bar graph: line_chart = pygal.Bar() line_chart.title = 'Browser usage evolution (in %)' line_chart.x_labels = map(str, range(2002, 2013)) - line_chart.add('Firefox', [ 0, 0, 0, 16.6, 25, 31, 36.4, 45.5, 46.3, 42.8, 37.1]) - line_chart.add('Chrome', [ 0, 0, 0, 0, 0, 0, 0, 3.9, 10.8, 23.8, 35.3]) - line_chart.add('IE', [85.8, 84.6, 84.7, 74.5, 66, 58.6, 54.7, 44.8, 36.2, 26.6, 20.1]) - line_chart.add('Others', [14.2, 15.4, 15.3, 8.9, 9, 10.4, 8.9, 5.8, 6.7, 6.8, 7.5]) + line_chart.add('Firefox', [None, None, 0, 16.6, 25, 31, 36.4, 45.5, 46.3, 42.8, 37.1]) + line_chart.add('Chrome', [None, None, None, None, None, None, 0, 3.9, 10.8, 23.8, 35.3]) + line_chart.add('IE', [85.8, 84.6, 84.7, 74.5, 66, 58.6, 54.7, 44.8, 36.2, 26.6, 20.1]) + line_chart.add('Others', [14.2, 15.4, 15.3, 8.9, 9, 10.4, 8.9, 5.8, 6.7, 6.8, 7.5]) Stacked @@ -73,10 +73,10 @@ Same graph but with stacked values: line_chart = pygal.StackedBar() line_chart.title = 'Browser usage evolution (in %)' line_chart.x_labels = map(str, range(2002, 2013)) - line_chart.add('Firefox', [ 0, 0, 0, 16.6, 25, 31, 36.4, 45.5, 46.3, 42.8, 37.1]) - line_chart.add('Chrome', [ 0, 0, 0, 0, 0, 0, 0, 3.9, 10.8, 23.8, 35.3]) - line_chart.add('IE', [85.8, 84.6, 84.7, 74.5, 66, 58.6, 54.7, 44.8, 36.2, 26.6, 20.1]) - line_chart.add('Others', [14.2, 15.4, 15.3, 8.9, 9, 10.4, 8.9, 5.8, 6.7, 6.8, 7.5]) + line_chart.add('Firefox', [None, None, 0, 16.6, 25, 31, 36.4, 45.5, 46.3, 42.8, 37.1]) + line_chart.add('Chrome', [None, None, None, None, None, None, 0, 3.9, 10.8, 23.8, 35.3]) + line_chart.add('IE', [85.8, 84.6, 84.7, 74.5, 66, 58.6, 54.7, 44.8, 36.2, 26.6, 20.1]) + line_chart.add('Others', [14.2, 15.4, 15.3, 8.9, 9, 10.4, 8.9, 5.8, 6.7, 6.8, 7.5]) Horizontal diff --git a/pages/documentation.rst b/pages/documentation.rst index ae979b1..4d5270b 100644 --- a/pages/documentation.rst +++ b/pages/documentation.rst @@ -8,6 +8,7 @@ User documentation - `First steps `_ - `Charts types `_ +- `Styles `_ Developper documentation diff --git a/pages/styles.rst b/pages/styles.rst new file mode 100644 index 0000000..e615b48 --- /dev/null +++ b/pages/styles.rst @@ -0,0 +1,192 @@ +=============== + Documentation +=============== + + +Styles +====== + +pygal provides 6 different styles and 2 ways to add your own: + +.. contents:: + + +Default +------- + +.. pygal-code:: + + chart = pygal.StackedLine(fill=True, interpolate='cubic') + chart.add('A', [1, 3, 5, 16, 13, 3, 7]) + chart.add('B', [5, 2, 3, 2, 5, 7, 17]) + chart.add('C', [6, 10, 9, 7, 3, 1, 0]) + chart.add('D', [2, 3, 5, 9, 12, 9, 5]) + chart.add('E', [7, 4, 2, 1, 2, 10, 0]) + + +Neon +---- + +.. pygal-code:: + + from pygal.style import NeonStyle + chart = pygal.StackedLine(fill=True, interpolate='cubic', style=NeonStyle) + chart.add('A', [1, 3, 5, 16, 13, 3, 7]) + chart.add('B', [5, 2, 3, 2, 5, 7, 17]) + chart.add('C', [6, 10, 9, 7, 3, 1, 0]) + chart.add('D', [2, 3, 5, 9, 12, 9, 5]) + chart.add('E', [7, 4, 2, 1, 2, 10, 0]) + + +Dark Solarized +-------------- + +.. pygal-code:: + + from pygal.style import DarkSolarizedStyle + chart = pygal.StackedLine(fill=True, interpolate='cubic', style=DarkSolarizedStyle) + chart.add('A', [1, 3, 5, 16, 13, 3, 7]) + chart.add('B', [5, 2, 3, 2, 5, 7, 17]) + chart.add('C', [6, 10, 9, 7, 3, 1, 0]) + chart.add('D', [2, 3, 5, 9, 12, 9, 5]) + chart.add('E', [7, 4, 2, 1, 2, 10, 0]) + + +Light Solarized +--------------- + +.. pygal-code:: + + from pygal.style import LightSolarizedStyle + chart = pygal.StackedLine(fill=True, interpolate='cubic', style=LightSolarizedStyle) + chart.add('A', [1, 3, 5, 16, 13, 3, 7]) + chart.add('B', [5, 2, 3, 2, 5, 7, 17]) + chart.add('C', [6, 10, 9, 7, 3, 1, 0]) + chart.add('D', [2, 3, 5, 9, 12, 9, 5]) + chart.add('E', [7, 4, 2, 1, 2, 10, 0]) + + +Light +----- + +.. pygal-code:: + + from pygal.style import LightStyle + chart = pygal.StackedLine(fill=True, interpolate='cubic', style=LightStyle) + chart.add('A', [1, 3, 5, 16, 13, 3, 7]) + chart.add('B', [5, 2, 3, 2, 5, 7, 17]) + chart.add('C', [6, 10, 9, 7, 3, 1, 0]) + chart.add('D', [2, 3, 5, 9, 12, 9, 5]) + chart.add('E', [7, 4, 2, 1, 2, 10, 0]) + + +Clean +----- + +.. pygal-code:: + + from pygal.style import CleanStyle + chart = pygal.StackedLine(fill=True, interpolate='cubic', style=CleanStyle) + chart.add('A', [1, 3, 5, 16, 13, 3, 7]) + chart.add('B', [5, 2, 3, 2, 5, 7, 17]) + chart.add('C', [6, 10, 9, 7, 3, 1, 0]) + chart.add('D', [2, 3, 5, 9, 12, 9, 5]) + chart.add('E', [7, 4, 2, 1, 2, 10, 0]) + + +Custom +------ + +You can customize styles in two ways: + +Using Style class +^^^^^^^^^^^^^^^^^ + +You can instantiate the Style class with some customizations for quick styling: + +.. pygal-code:: + + from pygal.style import Style + custom_style = Style( + background='transparent', + plot_background='transparent', + foreground='#53E89B', + foreground_light='#53A0E8', + foreground_dark='#630C0D', + opacity='.6', + opacity_hover='.9', + transition='400ms ease-in', + colors=('#E853A0', '#E8537A', '#E95355', '#E87653', '#E89B53')) + + chart = pygal.StackedLine(fill=True, interpolate='cubic', style=custom_style) + chart.add('A', [1, 3, 5, 16, 13, 3, 7]) + chart.add('B', [5, 2, 3, 2, 5, 7, 17]) + chart.add('C', [6, 10, 9, 7, 3, 1, 0]) + chart.add('D', [2, 3, 5, 9, 12, 9, 5]) + chart.add('E', [7, 4, 2, 1, 2, 10, 0]) + + +Using a custom css +^^^^^^^^^^^^^^^^^^ + +You can also specify a file containing a custom css for more customization. +(See the `default css `_) + +.. pygal-code:: + + from tempfile import NamedTemporaryFile + custom_css = ''' + text { + fill: green; + font-family: monospace; + } + .legends .legend text { + font-size: {{ font_sizes.legend }}; + } + .axis { + stroke: #666; + } + .axis text { + font-size: {{ font_sizes.label }}; + font-family: sans; + stroke: none; + } + .axis.y text { + text-anchor: end; + } + #tooltip text { + font-size: {{ font_sizes.tooltip }}; + } + .dot { + fill: yellow; + } + .color-0 { + stroke: #ff1100; + fill: #ff1100; + } + .color-1 { + stroke: #ffee00; + fill: #ffee00; + } + .color-2 { + stroke: #66bb44; + fill: #66bb44; + } + .color-3 { + stroke: #88bbdd; + fill: #88bbdd; + } + .color-4 { + stroke: #0000ff; + fill: #0000ff; + } + ''' + custom_css_file = '/tmp/pygal_custom_style.css' + with open(custom_css_file, 'w') as f: + f.write(custom_css) + chart = pygal.StackedLine(fill=True, interpolate='cubic', base_css=custom_css_file) + chart.add('A', [1, 3, 5, 16, 13, 3, 7]) + chart.add('B', [5, 2, 3, 2, 5, 7, 17]) + chart.add('C', [6, 10, 9, 7, 3, 1, 0]) + chart.add('D', [2, 3, 5, 9, 12, 9, 5]) + chart.add('E', [7, 4, 2, 1, 2, 10, 0]) diff --git a/static/css/style.css b/static/css/style.css index 6f52236..4823f6a 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -228,6 +228,9 @@ section figure { text-align: center; } +section figure figcaption { + text-align: left; +} /*