Work on cabaret

ralphbean · Sep 18, 2012 · 9986362 · 9986362
1 parent d0bf2c0
commit 9986362
Show file tree

Hide file tree

Showing 8 changed files with 232 additions and 141 deletions.
diff --git a/demo/cabaret/__init__.py b/demo/cabaret/__init__.py
@@ -19,7 +19,7 @@
 from flask import Flask, render_template, request
 from pygal import CHARTS_BY_NAME
 from pygal.graph import CHARTS_NAMES
-from pygal.config import Config
+from pygal.config import CONFIG_ITEMS
 from pygal.style import styles
 from json import loads
 
@@ -31,17 +31,22 @@ def create_app():
 
     @app.route("/")
     def index():
-        configs = Config()._items
         return render_template(
-            'index.jinja2', charts_names=CHARTS_NAMES, configs=dict(configs),
+            'index.jinja2', charts_names=CHARTS_NAMES, configs=CONFIG_ITEMS,
             styles_names=styles.keys())
 
     @app.route("/svg", methods=('POST',))
     def svg():
         values = request.values
-        chart = CHARTS_BY_NAME[values['type']](
-            disable_xml_declaration=True,
-            style=styles[values['style']], **loads(values['opts']))
+        config = loads(values['opts'])
+        config['disable_xml_declaration'] = True
+        config['style'] = styles[values['style']]
+        config['js'] = []
+        for item in CONFIG_ITEMS:
+            value = config.get(item.name, None)
+            if value:
+                config[item.name] = item.coerce(value)
+        chart = CHARTS_BY_NAME[values['type']](**config)
         for title, vals in loads(values['vals']).items():
             chart.add(title, vals)
         return chart.render_response()

diff --git a/demo/cabaret/static/css.css b/demo/cabaret/static/css.css
@@ -7,12 +7,16 @@ body {
   padding: 9px 0;
 }
 
+figure {
+  margin: 0;
+}
+
 figure svg {
   width: 100%;
   background: none;
 }
 
-* {
+textarea {
   -webkit-transition: all 500ms ease-out;
   -moz-transition: all 500ms ease-out;
   transition: all 500ms ease-out;

diff --git a/demo/cabaret/static/js.js b/demo/cabaret/static/js.js
@@ -8,6 +8,9 @@ function resend() {
     $('.c-opts').each(function() {
         var $this = $(this),
             val = $this.val();
+        if($this.attr('type') == 'checkbox') {
+            val = $this.is(":checked");
+        }
         if(val) {
             opts[$this.attr('id').replace('c-', '')] = val;
         }
@@ -23,49 +26,22 @@ function resend() {
         },
         dataType: 'html'
     }).done(function (data) {
-        $fig.find('svg').remove();
-        $fig.prepend(data);
+        // $fig.find('div').get(0).innerHTML = data;
+        $fig.find('div').html(data);
+        init_svg($fig.find('svg').get(0));
         $('textarea').css({'-webkit-box-shadow': ''});
     }).fail(function () {
         $('textarea').css({'-webkit-box-shadow': 'inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(255, 0, 0, 0.6)'});
     });
-
-    // $embed.remove();
-    // $fig.prepend(
-    //     $('<embed>')
-    //         .attr({
-    //             src: src,
-    //             type: 'image/svg+xml'
-    //         })
-    // );
 }
 
 $(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
-                        })
-                );
-            })
-    );
     $('#type').on('change', resend);
     $('#data').on('input', resend);
     $('#style').on('change', resend);
-    $('.c-opts').on('input', resend);
+    $('.c-opts:not([type=checkbox])').on('input', resend);
+    $('.c-opts[type=checkbox]').on('change', resend);
+    $('label.tt').tooltip({ placement: 'right' });
+    $('input.tt').tooltip({ placement: 'top' });
     resend();
 });
diff --git a/demo/cabaret/templates/_layout.jinja2 b/demo/cabaret/templates/_layout.jinja2
@@ -2,8 +2,10 @@
 <html>
   <head>
     <title>Cabaret - Online pygal graph generator</title>
-    <script type="text/javascript" src="{{ url_for('static', filename='components/jquery/jquery.js') }}"></script>
+    <script type="text/javascript" src="{{ url_for('static', filename='components/jquery/jquery.js') }}"></script>  
     <script type="text/javascript" src="{{ url_for('static', filename='components/bootstrap/docs/assets/js/bootstrap.min.js') }}"></script>
+    <script type="text/javascript" src="https://raw.github.com/Kozea/pygal.js/master/svg.jquery.js"></script>
+    <script type="text/javascript" src="https://raw.github.com/Kozea/pygal.js/master/pygal-tooltips.js"></script>
     <script type="text/javascript" src="{{ url_for('static', filename='js.js') }}"></script>
     <link rel="stylesheet" href="{{ url_for('static', filename='components/bootstrap/docs/assets/css/bootstrap.css') }}" type="text/css" />
     <link rel="stylesheet" href="{{ url_for('static', filename='components/bootstrap/docs/assets/css/bootstrap-responsive.css') }}" type="text/css" />

diff --git a/demo/cabaret/templates/index.jinja2 b/demo/cabaret/templates/index.jinja2
@@ -27,11 +27,24 @@
       </select>
     </li>
     <li class="divider"></li>
-    {% for key, value in configs.items() %}
+    {% for key in configs if key.name not in ['js', 'css'] %}
+      {% set doc = 'title="' + key.doc + ' ' +  key.subdoc + '"' %}
       <li>
-        <label class="nav-header" for="c-{{ key }}">{{ key }}</label>
         <div class="controls">
-          <input type="text" id="c-{{ key }}" class="c-opts" placeholder="{{ value }}">
+          {% if key.is_boolean %}
+            <label class="nav-header checkbox tt" for="c-{{ key.name }}" {{ doc }}>
+              <input type="checkbox" id="c-{{ key.name }}" class="c-opts tt" {{ 'checked' if key.value }} {{ doc }} />{{ key.name }}
+            </label>
+          {% else %}
+            <label class="nav-header tt" for="c-{{ key.name }}" {{ doc }}> {{ key.name }}</label>
+            {% if key.is_numeric %}
+              <input type="number" id="c-{{ key.name }}" class="c-opts tt" value="{{ key.value or ''}}" {{ doc }} />
+            {% elif key.is_string %}
+              <input type="text" id="c-{{ key.name }}" class="c-opts tt" value="{{ key.value or ''}}" {{ doc }} />
+            {% elif key.is_list %}
+              <input type="text" id="c-{{ key.name }}" class="c-opts tt list-of-{{ key.subtype}}" placeholder="value1, value2, ..." value="{{ key.value or ''}}" {{ doc }} />
+            {% endif %}
+          {% endif %}
         </div>
       </li>
     {% endfor %}
@@ -40,6 +53,7 @@
 
 {% block section %}
   <figure>
+    <div></div>
     <figcaption></figcaption>
   </figure>
 {% endblock section %}
diff --git a/demo/moulinrouge/tests.py b/demo/moulinrouge/tests.py
@@ -1,6 +1,6 @@
 # -*- coding: utf-8 -*-
 # This file is part of pygal
-from pygal import Bar, Gauge, Pyramid, Funnel, Dot, StackedBar, CHARTS_BY_NAME
+from pygal import Bar, Gauge, Pyramid, Funnel, Dot, StackedBar, CHARTS_BY_NAME, Config
 from pygal.style import styles
 
 
@@ -111,4 +111,16 @@ def test_stacked():
         stacked.add('2', [4, 5, 6])
         return stacked.render_response()
 
+    @app.route('/test/config')
+    def test_config():
+
+        class LolConfig(Config):
+            js = ['http://l:2343/svg.jquery.js',
+                  'http://l:2343/pygal-tooltips.js']
+
+        stacked = StackedBar(LolConfig())
+        stacked.add('1', [1, 2, 3])
+        stacked.add('2', [4, 5, 6])
+        return stacked.render_response()
+
     return filter(lambda x: x.startswith('test'), locals())