Polish cabaret

demo/cabaret/__init__.py

@@ -20,6 +20,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_ITEMS
+from pygal.interpolate import KINDS
 from pygal.style import styles
 from json import loads
 
@@ -33,7 +34,7 @@ def create_app():
     def index():
         return render_template(
             'index.jinja2', charts_names=CHARTS_NAMES, configs=CONFIG_ITEMS,
-            styles_names=styles.keys())
+            interpolations=KINDS, styles_names=styles.keys())
 
     @app.route("/svg", methods=('POST',))
     def svg():
@@ -47,8 +48,8 @@ def create_app():
             if value:
                 config[item.name] = item.coerce(value)
         chart = CHARTS_BY_NAME[values['type']](**config)
-        for title, vals in loads(values['vals']).items():
+        for serie in loads(values['vals'])['vals']:
-            chart.add(title, vals)
+            chart.add(serie[0], serie[1])
         return chart.render_response()
 
     return app

demo/cabaret/static/css.css

@@ -13,6 +13,7 @@ figure {
 
 figure svg {
   width: 100%;
+  height: 0%;
   background: none;
 }
 
@@ -23,7 +24,7 @@ figure svg {
 }
 
 .side {
-  min-width: 400px;
+  width: 375px !important;
 }
 
 label {

demo/cabaret/static/js.js

@@ -1,10 +1,10 @@
 function resend() {
     var $fig = $('figure'),
-        // $embed = $fig.find('embed'),
         type = $('#type').val(),
-        data = $('#data').val(),
         style = $('#style').val(),
-        opts = {};
+        interpolation = $('#interpolation').val(),
+        opts = {},
+        vals = [];
     $('.c-opts').each(function() {
         var $this = $(this),
             val = $this.val();
@@ -14,16 +14,25 @@ function resend() {
             opts[$this.attr('id').replace('c-', '')] = val;
         }
     });
+    if(interpolation) {
+        opts['interpolate'] = interpolation;
+    }
+    $('.data .controls').each(function () {
+        var label = $(this).find('.serie-label').val(),
+            values = $(this).find('.serie-value').val();
+        vals.push([label, values.split(',').map(function (v) { return parseFloat(v); })]);
+    });
     $.ajax({
         url: '/svg',
         type: 'POST',
         data: {
             type: type,
             style: style,
-            vals: '{' + data + '}',
+            vals: JSON.stringify({vals: vals}),
             opts: JSON.stringify(opts)
         },
-        dataType: 'html'
+        dataType: 'html',
+        traditional: true
     }).done(function (data) {
         // $fig.find('div').get(0).innerHTML = data;
         $fig.find('div').html(data);
@@ -35,11 +44,19 @@ function resend() {
 }
 
 $(function () {
-    $('#type').on('change', resend);
+    $('#type').add('#style').add('#interpolation').on('change', resend);
     $('#data').on('input', resend);
-    $('#style').on('change', resend);
     $('.c-opts:not([type=checkbox])').on('input', resend);
     $('.c-opts[type=checkbox]').on('change', resend);
-    $('div.tt').tooltip();
+    $('div.tt').tooltip({ placement: 'top' });
+    $('.control-group.data').on('click keypress', '.btn.rem', function () {
+        if($('.data .controls').length > 1) {
+            $(this).closest('.controls').remove();
+        }
+    });
+    $('.control-group.data').on('click keypress', '.btn.add', function () {
+        $(this).siblings('.controls').last().clone().insertBefore($(this)).find('input').val('');
+    });
+    $('.control-group.data').on('input', 'input', resend);
     resend();
 });

demo/cabaret/templates/index.jinja2

@@ -23,14 +23,14 @@
             </div>
           </div>
           
-          <div class="control-group tt" title="Enter the chart data">
+          <div class="control-group data tt" title="Enter the chart data">
             <label class="control-label" for="data">Data</label>
-            <div class="controls">
+            <div class="controls form-inline">
-              <textarea id="data" rows="3">
+              <input type="text" class="input-small serie-label" value="Serie" placeholder="Serie Name"/>
-"Serie 1": [4, 5, 2, 8, 2, 0],
+              <input type="text" class="input-small serie-value" value="1, 1, 3, 7, 21" placeholder="Values" />
-"Serie 2": [0, 5, 2, 6, 2]
+              <button type="button" class="btn btn-small rem">-</button>
-              </textarea>
             </div>
+            <button type="button" class="btn btn-small add">+</button>
           </div>
 
           <div class="control-group tt" title="Chose the chart style">
@@ -43,12 +43,24 @@
               </select>
             </div>
           </div>
+
+          <div class="control-group tt" title="Add interpolation">
+            <label class="control-label" for="interpolation">Interpolation</label>
+            <div class="controls">
+              <select id="interpolation">
+                <option value=""></option>
+                {% for interpolation in interpolations %}
+                  <option value="{{ interpolation }}">{{ interpolation | title }}</option>
+                {% endfor %}
+              </select>
+            </div>
+          </div>
         </div>
 
         {% for group, keys in configs | groupby('category') %}
           <div class="tab-pane" id="{{ group }}">
             <legend>{{ group }}</legend>
-            {% for key in keys  if key.name not in ['js', 'css', 'style'] %}
+            {% for key in keys  if key.name not in ['js', 'css', 'style', 'interpolate'] %}
               {% set doc = 'title="' + key.doc + ' <br /><small>' +  key.subdoc + '</small>"' %}
               <div class="control-group tt" {{ doc }}>
                 {% if key.is_boolean %}

pygal/config.py

@@ -99,9 +99,7 @@ class Config(object):
         "It can be an absolute file path or an external link",
         str)
 
-
     ############ Look ############
-
     title = Key(
         None, str, "Look",
         "Graph title.", "Leave it to None to disable title.")

pygal/interpolate.py

@@ -28,10 +28,13 @@ try:
 except ImportError:
     pass
 
+KINDS = ['cubic', 'univariate', 'quadratic', 'slinear', 'nearest', 'zero']
+
 
 def interpolation(x, y, kind):
     """Make the interpolation function"""
-    assert scipy != None, 'You must have scipy installed to use interpolation'
+    assert scipy is not None, (
+        'You must have scipy installed to use interpolation')
     order = None
     if len(y) < len(x):
         x = x[:len(y)]
@@ -42,7 +45,7 @@ def interpolation(x, y, kind):
         return ident
     if isinstance(kind, int):
         order = kind
-    elif kind in ['zero', 'slinear', 'quadratic', 'cubic', 'univariate']:
+    elif kind in KINDS:
         order = {'nearest': 0, 'zero': 0, 'slinear': 1,
                  'quadratic': 2, 'cubic': 3, 'univariate': 3}[kind]
     if order and len(x) <= order: