About to start ajaxifying

panoramix/models.py

@@ -96,8 +96,8 @@ class Dashboard(Model, AuditMixin):
     def js_files(self):
         l = []
         for o in self.slices:
-            l += o.js_files
-        return list(set(l))
+            l += [f for f in o.js_files if f not in l]
+        return l
 
     @property
     def css_files(self):

panoramix/templates/panoramix/dashboard.html

@@ -2,12 +2,14 @@
 
 {% block head_css %}
     {{ super() }}
+    {% for css in dashboard.css_files %}
+        <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename=css) }}">
+    {% endfor %}
     <link rel="stylesheet" href="{{ url_for('static', filename="jquery.gridster.min.css") }}">
 <style>
     .gridster li {
         list-style-type: none;
         border: 1px solid gray;    
-        background: #EEEEEE;
         overflow: auto;
         box-shadow: 2px 2px 2px #AAA;
         border-radius: 5px;
@@ -25,6 +27,10 @@
     div.gridster {
         visibility: hidden
     }
+    div.slice_content {
+        width: 100%;
+        height: 100%;
+    }
 </style>
 {% endblock %}
 
@@ -42,6 +48,7 @@
             <div class="slice_title">
                 <h5>{{ slice.slice_name }}</h5>
             </div>
+            <div id="slice_content_{{ slice.id }}"><img src="/static/loading.gif" class="loading"></div>
         </li>
         {% endfor %}
     </ul>
@@ -50,18 +57,40 @@
 
 {% block tail %}
     {{ super() }}
+    {% for js in dashboard.js_files %}
+        <script src="{{ url_for('static', filename=js) }}"></script>
+    {% endfor %}
     <script src="{{ url_for("static", filename="jquery.gridster.with-extras.min.js") }}"></script>
+    <script src="{{ url_for("static", filename="d3.min.js") }}"></script>
     <script>
-    //$(".gridster li").html('<img src="/static/loading.gif" class="loading">');
+        f = d3.format(".4s");
+    </script>
+    <script>
+
+$( document ).ready(function() {
     $(".gridster ul").gridster({
         widget_margins: [5, 5],
         widget_base_dimensions: [150, 150],
         resize: {enabled: true}
     });
-    $("#loadme1").load("/panoramix/table/2/?flt_col_0=gender&datasource_id=2&flt_op_0=in&viz_type=table&row_limit=50&since=50%20years%20ago&until=now&metrics=total&granularity=all&datasource_name=baby_names&slice_name=Top%2050%20table&where=&groupby=name&flt_eq_0=&datasource_type=table&standalone=true");
-    //$("#loadme2").load("/panoramix/table/2/?flt_col_0=gender&datasource_id=2&flt_op_0=in&viz_type=pie&since=50%20years%20ago&until=now&metrics=total&limit=10&granularity=one%20day&datasource_name=baby_names&slice_name=Pie&where=&groupby=name&flt_eq_0=&datasource_type=table&standalone=true");
-    //$("loadme3").html('<iframe src="http://localhost:8088/panoramix/table/2/?flt_col_0=gender&datasource_id=2&flt_op_0=in&viz_type=pie&since=50%20years%20ago&until=now&metrics=total&limit=10&granularity=one%20day&datasource_name=baby_names&slice_name=Pie&where=&groupby=name&flt_eq_0=&datasource_type=table&standalone=true"></iframe>');
+    var url = "/panoramix/table/2/?flt_col_0=gender&datasource_id=2&flt_op_0=in&viz_type=pie&since=50%20years%20ago&until=now&metrics=total&limit=10&granularity=one%20day&datasource_name=baby_names&slice_name=Pie&where=&groupby=name&flt_eq_0=&datasource_type=table&standalone=true&skip_libs=true";
+    $.ajax({
+        url: url,
+        success: function(result){
+            $("#slice_content_2").html(result);
+        },
+        async: true,
+    });
+    var url = "/panoramix/table/2/?flt_col_0=gender&rolling_periods=&datasource_id=2&flt_op_0=in&slice_name=Super%20Slice&viz_type=line&since=50%20years%20ago&groupby=name&metrics=total&limit=25&flt_eq_0=&granularity=one%20day&datasource_name=baby_names&where=&until=now&rolling_type=mean&datasource_type=table&standalone=true&skip_libs=true";
+    $.ajax({
+        url: url,
+        success: function(result){
+            $("#slice_content_3").html(result);
+        },
+        async: true,
+    });
     $("div.gridster").css('visibility', 'visible');
+});
     </script>
 
 {% endblock %}

panoramix/templates/panoramix/datasource.html

@@ -112,6 +112,7 @@ form input.form-control {
     {% endif %}
     </h3>
     <hr/>
+    <div class="viz" style="height: 600px;">
     {% block viz %}
         {% if viz.error_msg %}
             <div class="alert alert-danger">{{ viz.error_msg }}</div>
@@ -120,6 +121,7 @@ form input.form-control {
             <div class="alert alert-warning">{{ viz.warning_msg }}</div>
         {% endif %}
     {% endblock %}
+    </div>
 
     {% if debug %}
     <h3>Results</h3>
@@ -154,10 +156,8 @@ form input.form-control {
 
 {% block tail_js %}
 {{ super() }}
-<script src="{{ url_for("static", filename="d3.min.js") }}"></script>
 <script>
 $( document ).ready(function() {
-  f = d3.format(".4s");
   function getParam(name) {
       name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
       var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),

panoramix/templates/panoramix/viz.html

@@ -6,15 +6,23 @@
 
 {% block head %}
     {{super()}}
-    {% for css in viz.css_files %}
-        <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename=css) }}">
-    {% endfor %}
+    {% if not skip_libs %}
+        {% for css in viz.css_files %}
+            <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename=css) }}">
+        {% endfor %}
+    {% endif %}
 {% endblock %}
 
 
 {% block tail %}
     {{super()}}
-    {% for js in viz.js_files %}
-        <script src="{{ url_for('static', filename=js) }}"></script>
-    {% endfor %}
+    <script src="{{ url_for("static", filename="d3.min.js") }}"></script>
+    <script>
+        f = d3.format(".4s");
+    </script>
+    {% if not skip_libs %}
+        {% for js in viz.js_files %}
+            <script src="{{ url_for('static', filename=js) }}"></script>
+        {% endfor %}
+    {% endif %}
 {% endblock %}

panoramix/templates/panoramix/viz_highcharts.html

@@ -1,7 +1,7 @@
 {% extends "panoramix/viz.html" %}
 {% block viz %}
     {{ super() }}
-    <div id="chart"></div>
+    <div id="chart" style="height:100%; width:100%;"></div>
 {% endblock %}
 
 {% block tail %}

panoramix/templates/panoramix/viz_standalone.html

@@ -1,9 +1,14 @@
-{% extends "appbuilder/baselayout.html" %}
-{% block body %}
+<html>
+    <head>
+    {% if not skip_libs %}
+        {% block head %}
+            <script src="{{url_for('appbuilder.static',filename='js/jquery-latest.js')}}"></script>
+        {% endblock %}
+    {% endif %}
+        {% block tail %}{% endblock %}
+    </head>
+    <body>
     {% block viz %}
     {% endblock %}
-{% endblock %}
-{% block tail %}
-    {{ super() }}
-{% endblock %}
-
+    </body>
+</html>

panoramix/viz.py

@@ -11,7 +11,7 @@ from panoramix.highchart import Highchart, HighchartBubble
 from panoramix.forms import form_factory
 
 CHART_ARGS = {
-    'height': 700,
+    #'height': 700,
     'title': None,
     'target_div': 'chart',
 }
@@ -132,6 +132,7 @@ class BaseViz(object):
             self.template, form=form, viz=self, datasource=self.datasource,
             results=self.results,
             standalone=request.args.get('standalone') == 'true',
+            skip_libs=request.args.get('skip_libs') == 'true',
             *args, **kwargs)
 
 
@@ -169,7 +170,7 @@ class HighchartsViz(BaseViz):
     stacked = False
     chart_type = 'not_stock'
     compare = False
-    js_files = ['highcharts.js']
+    js_files = ['highstock.js']
 
 
 class BubbleViz(HighchartsViz):
@@ -179,7 +180,7 @@ class BubbleViz(HighchartsViz):
     form_fields = [
         'viz_type', 'since', 'until',
         'series', 'entity', 'x', 'y', 'size', 'limit']
-    js_files = ['highcharts.js', 'highcharts-more.js']
+    js_files = ['highstock.js', 'highcharts-more.js']
 
     def query_obj(self):
         d = super(BubbleViz, self).query_obj()