From af345493773c750d959a7eab5466c33968b9e777 Mon Sep 17 00:00:00 2001 From: Chris Williams Date: Fri, 19 Feb 2016 15:12:25 -0800 Subject: [PATCH] partial refactor of explore page, visualizations not managed with webpack yet. --- panoramix/assets/html/base.html | 57 ++--- panoramix/assets/html/explore.html | 218 ++++++++++++++++++ panoramix/assets/html/index.html | 2 +- panoramix/assets/html/viz.html | 27 +++ panoramix/assets/javascripts/explore.js | 21 ++ .../assets/javascripts/modules/panoramix.js | 45 ++-- .../vendor/bootstrap-toggle.min.js | 9 + .../javascripts/vendor/jquery-ui.min.js | 13 ++ .../javascripts/vendor/select2.sortable.js | 146 ++++++++++++ panoramix/assets/package.json | 1 + panoramix/assets/stylesheets/panoramix.css | 2 +- .../stylesheets/vendor/jquery-ui.min.css | 7 + panoramix/assets/webpack.config.js | 3 +- panoramix/views.py | 4 +- 14 files changed, 505 insertions(+), 50 deletions(-) create mode 100644 panoramix/assets/html/explore.html create mode 100644 panoramix/assets/html/viz.html create mode 100644 panoramix/assets/javascripts/explore.js create mode 100644 panoramix/assets/javascripts/vendor/bootstrap-toggle.min.js create mode 100755 panoramix/assets/javascripts/vendor/jquery-ui.min.js create mode 100644 panoramix/assets/javascripts/vendor/select2.sortable.js create mode 100755 panoramix/assets/stylesheets/vendor/jquery-ui.min.css diff --git a/panoramix/assets/html/base.html b/panoramix/assets/html/base.html index 3333b7871075b..b6b3b9c53fb39 100644 --- a/panoramix/assets/html/base.html +++ b/panoramix/assets/html/base.html @@ -2,43 +2,46 @@ {% import 'appbuilder/baselib.html' as baselib %} {% block head_css %} - {{super()}} - - - - - - + {{super()}} + + + + + + + {% endblock %} {% block body %} - {% include 'appbuilder/general/confirm.html' %} - {% include 'appbuilder/general/alert.html' %} + {% include 'appbuilder/general/confirm.html' %} + {% include 'appbuilder/general/alert.html' %} - {% block navbar %} -
- {% include 'appbuilder/navbar.html' %} -
- {% endblock %} + {% block navbar %} +
+ {% include 'appbuilder/navbar.html' %} +
+ {% endblock %} - {% block uncontained %}{% endblock %} + {% block uncontained %}{% endblock %} -
-
- {% block messages %} - {% include 'appbuilder/flash.html' %} - {% endblock %} - {% block content %}{% endblock %} -
-
-
- {% block content_fluid %}{% endblock %} +
+
+ {% block messages %} + {% include 'appbuilder/flash.html' %} + {% endblock %} + {% block content %}{% endblock %}
+
+
+ {% block content_fluid %}{% endblock %} +
{% endblock %} {% block tail_js %} - - {{ super() }} + {{ super() }} + + + {% endblock %} diff --git a/panoramix/assets/html/explore.html b/panoramix/assets/html/explore.html new file mode 100644 index 0000000000000..f3b8282f655af --- /dev/null +++ b/panoramix/assets/html/explore.html @@ -0,0 +1,218 @@ +{% extends "refactor/base.html" %} + +{% block head_css %} + {{super()}} + + +{% endblock %} + +{% block content_fluid %} + {% set datasource = viz.datasource %} + {% set form = viz.form %} + + {% macro panofield(fieldname)%} +
+ {% set field = form.get_field(fieldname)%} +
+ {{ viz.get_form_override(fieldname, 'label') or field.label }} + {% if field.description %} + + {% endif %} + {{ field(class_=form.field_css_classes(field.name)) }} +
+
+ {% endmacro %} + +
+ +
+{% endblock %} + +{% block tail_js %} + {{ super() }} + +{% endblock %} diff --git a/panoramix/assets/html/index.html b/panoramix/assets/html/index.html index 2a68497389c42..369c41902023b 100644 --- a/panoramix/assets/html/index.html +++ b/panoramix/assets/html/index.html @@ -7,6 +7,6 @@ {% endblock %} {% block tail_js %} - {{ super() }} + {% endblock %} diff --git a/panoramix/assets/html/viz.html b/panoramix/assets/html/viz.html new file mode 100644 index 0000000000000..7a8cb1e7424af --- /dev/null +++ b/panoramix/assets/html/viz.html @@ -0,0 +1,27 @@ +{% if viz.form_data.get("json") == "true" %} + {{ viz.get_json() }} +{% else %} + + {% if viz.request.args.get("standalone") == "true" %} + {% extends 'panoramix/standalone.html' %} + {% else %} + {% extends 'refactor/explore.html' %} + {% endif %} + + + {% block head_css %} + {{super()}} + {% for css in viz.css_files %} + + {% endfor %} + {% endblock %} + + + {% block tail %} + {{super()}} + {% for js in viz.js_files %} + + {% endfor %} + {% endblock %} + +{% endif %} diff --git a/panoramix/assets/javascripts/explore.js b/panoramix/assets/javascripts/explore.js new file mode 100644 index 0000000000000..50096be3c5264 --- /dev/null +++ b/panoramix/assets/javascripts/explore.js @@ -0,0 +1,21 @@ +require('select2'); +require('./vendor/bootstrap-toggle.min.js'); +require('./vendor/select2.sortable.js'); + +$(document).ready(function() { + px.initExploreView(); + + var data = $('.slice').data('slice'); + var slice = px.Slice(data); + + $('.slice').data('slice', slice); + + px.renderSlice(); + + $(':checkbox') + .addClass('pull-right') + .attr("data-onstyle", "default") + .bootstrapToggle({size: 'mini'}); + + $('div.toggle').addClass('pull-right'); +}); diff --git a/panoramix/assets/javascripts/modules/panoramix.js b/panoramix/assets/javascripts/modules/panoramix.js index 0ad9ad84faede..26512be12f91a 100644 --- a/panoramix/assets/javascripts/modules/panoramix.js +++ b/panoramix/assets/javascripts/modules/panoramix.js @@ -50,6 +50,7 @@ var px = (function() { var visualizations = {}; var dashboard = undefined; + var slice = undefined; function getParam(name) { name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]"); @@ -59,7 +60,7 @@ var px = (function() { } function UTC(dttm){ - return v = new Date(dttm.getUTCFullYear(), dttm.getUTCMonth(), dttm.getUTCDate(), dttm.getUTCHours(), dttm.getUTCMinutes(), dttm.getUTCSeconds()); + return new Date(dttm.getUTCFullYear(), dttm.getUTCMonth(), dttm.getUTCDate(), dttm.getUTCHours(), dttm.getUTCMinutes(), dttm.getUTCSeconds()); } var tickMultiFormat = d3.time.format.multi([ [".%L", function(d) { return d.getMilliseconds(); }], // If there are millisections, show only them @@ -95,7 +96,7 @@ var px = (function() { var timer; var stopwatch = function () { dttm += 10; - num = dttm / 1000; + var num = dttm / 1000; $('#timer').text(num.toFixed(2) + " sec"); } var qrystr = ''; @@ -275,24 +276,29 @@ var px = (function() { function initExploreView() { function get_collapsed_fieldsets(){ - collapsed_fieldsets = $("#collapsed_fieldsets").val(); - if (collapsed_fieldsets != undefined && collapsed_fieldsets != "") + var collapsed_fieldsets = $("#collapsed_fieldsets").val(); + + if (collapsed_fieldsets != undefined && collapsed_fieldsets != "") { collapsed_fieldsets = collapsed_fieldsets.split('||'); - else + } + else { collapsed_fieldsets = []; + } return collapsed_fieldsets; } function toggle_fieldset(legend, animation) { var parent = legend.parent(); - fieldset = parent.find(".legend_label").text(); - collapsed_fieldsets = get_collapsed_fieldsets(); + var fieldset = parent.find(".legend_label").text(); + var collapsed_fieldsets = get_collapsed_fieldsets(); if (!parent.hasClass("collapsed")){ - if (animation) + if (animation) { parent.find(".fieldset_content").slideUp(); - else + } + else { parent.find(".fieldset_content").hide(); + } parent.addClass("collapsed"); parent.find("span.collapser").text("[+]"); @@ -301,10 +307,12 @@ var px = (function() { collapsed_fieldsets.push(fieldset); } } else { - if (animation) + if (animation) { parent.find(".fieldset_content").slideDown(); - else + } + else { parent.find(".fieldset_content").show(); + } parent.removeClass("collapsed"); parent.find("span.collapser").text("[-]"); @@ -320,6 +328,7 @@ var px = (function() { $('legend').click(function () { toggle_fieldset($(this), true); }); + $('#shortner').click(function () { $.ajax({ type: "POST", @@ -337,7 +346,7 @@ var px = (function() { }); }); $("#viz_type").change(function() {$("#query").submit();}); - collapsed_fieldsets = get_collapsed_fieldsets(); + var collapsed_fieldsets = get_collapsed_fieldsets(); for(var i=0; i < collapsed_fieldsets.length; i++){ toggle_fieldset($('legend:contains("' + collapsed_fieldsets[i] + '")'), false); } @@ -346,7 +355,8 @@ var px = (function() { $(".select2Sortable").select2({dropdownAutoWidth : true}); $(".select2Sortable").select2Sortable({bindOrder: 'sortableStop'}); $("form").show(); - $('[data-toggle="tooltip"]').tooltip({container: 'body'}); + $('[data-toggle="tooltip"]').tooltip(); + $(".ui-helper-hidden-accessible").remove(); // jQuery-ui 1.11+ creates a div for every tooltip function set_filters(){ for (var i = 1; i < 10; i++){ @@ -359,7 +369,7 @@ var px = (function() { set_filters(); function add_filter(i) { - cp = $("#flt0").clone(); + var cp = $("#flt0").clone(); $(cp).appendTo("#filters"); $(cp).show(); if (i != undefined){ @@ -421,7 +431,7 @@ var px = (function() { return obj; } $(".select2_freeform").each(function(){ - parent = $(this).parent(); + var parent = $(this).parent(); var name = $(this).attr('name'); var l = []; var selected = ''; @@ -431,10 +441,9 @@ var px = (function() { selected = this.options[i].value; } } - obj = parent.append( + var obj = parent.append( ''); - $("input[name='" + name +"']") - .select2({ + $("input[name='" + name +"']").select2({ createSearchChoice: create_choices, initSelection: initSelectionToValue, dropdownAutoWidth : true, diff --git a/panoramix/assets/javascripts/vendor/bootstrap-toggle.min.js b/panoramix/assets/javascripts/vendor/bootstrap-toggle.min.js new file mode 100644 index 0000000000000..37113200bff5c --- /dev/null +++ b/panoramix/assets/javascripts/vendor/bootstrap-toggle.min.js @@ -0,0 +1,9 @@ +/*! ======================================================================== + * Bootstrap Toggle: bootstrap-toggle.js v2.2.0 + * http://www.bootstraptoggle.com + * ======================================================================== + * Copyright 2014 Min Hur, The New York Times Company + * Licensed under MIT + * ======================================================================== */ ++function(a){"use strict";function b(b){return this.each(function(){var d=a(this),e=d.data("bs.toggle"),f="object"==typeof b&&b;e||d.data("bs.toggle",e=new c(this,f)),"string"==typeof b&&e[b]&&e[b]()})}var c=function(b,c){this.$element=a(b),this.options=a.extend({},this.defaults(),c),this.render()};c.VERSION="2.2.0",c.DEFAULTS={on:"On",off:"Off",onstyle:"primary",offstyle:"default",size:"normal",style:"",width:null,height:null},c.prototype.defaults=function(){return{on:this.$element.attr("data-on")||c.DEFAULTS.on,off:this.$element.attr("data-off")||c.DEFAULTS.off,onstyle:this.$element.attr("data-onstyle")||c.DEFAULTS.onstyle,offstyle:this.$element.attr("data-offstyle")||c.DEFAULTS.offstyle,size:this.$element.attr("data-size")||c.DEFAULTS.size,style:this.$element.attr("data-style")||c.DEFAULTS.style,width:this.$element.attr("data-width")||c.DEFAULTS.width,height:this.$element.attr("data-height")||c.DEFAULTS.height}},c.prototype.render=function(){this._onstyle="btn-"+this.options.onstyle,this._offstyle="btn-"+this.options.offstyle;var b="large"===this.options.size?"btn-lg":"small"===this.options.size?"btn-sm":"mini"===this.options.size?"btn-xs":"",c=a('