Skip to content

Commit

Permalink
Getting in a working state
Browse files Browse the repository at this point in the history
  • Loading branch information
mistercrunch committed Dec 20, 2015
1 parent 973f1a6 commit 4b481e9
Show file tree
Hide file tree
Showing 25 changed files with 231 additions and 202 deletions.
11 changes: 11 additions & 0 deletions panoramix/models.py
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
from flask.ext.appbuilder import Model
from flask.ext.appbuilder.models.mixins import AuditMixin
from pandas import read_sql_query
from pandas.io.json import dumps
from pydruid import client
from pydruid.utils.filters import Dimension, Filter
import sqlalchemy as sqla
Expand Down Expand Up @@ -85,6 +86,16 @@ def viz(self):
def datasource_id(self):
return self.table_id or self.druid_datasource_id

@property
def data(self):
d = self.viz.data
d['slice_id'] = self.id
return d

@property
def json_data(self):
return json.dumps(self.data)

@property
def slice_url(self):
try:
Expand Down
8 changes: 6 additions & 2 deletions panoramix/static/panoramix.css
Original file line number Diff line number Diff line change
@@ -1,6 +1,10 @@
html>body{
margin: 0px; !important
}

.slice_container {
height: 100%;
}
.container-fluid {
text-align: left;
}
Expand Down Expand Up @@ -181,7 +185,7 @@ legend {
width: 100%;
height: 100%;
}
.dashboard table.widget_header {
.dashboard table.slice_header {
width: 100%;
height: 20px;
}
Expand All @@ -192,7 +196,7 @@ legend {
.dashboard li.widget.pie,
.dashboard li.widget.dist_bar,
.dashboard li.widget.sunburst {
overflow: visible; /* This allows elements within these slice typesin a dashboard to overflow */
overflow: visible; /* This allows elements within these widget typesin a dashboard to overflow */
}
.dashboard div.nvtooltip {
z-index: 888; /* this lets tool tips go on top of other slices */
Expand Down
112 changes: 74 additions & 38 deletions panoramix/static/panoramix.js
Original file line number Diff line number Diff line change
@@ -1,34 +1,25 @@
var timer;
var px = (function() {

var visualizations = [];

function registerWidget(name, initializer) {
visualizations[name] = initializer;
}

function makeNullWidget() {
return {
render: function() {},
resize: function() {},
};
}

function initializeWidget(data) {
var Slice = function(data, dashboard){
var timer;
var token = $('#' + data.token);
var selector = '#' + data.token + ' .slice_container';
var container = $(selector);
var slice_id = data.form_data;
var name = data['viz_name'];
var initializer = visualizations[name];
var user_defined_widget = initializer ? initializer(data) : makeNullWidget();
var dttm = 0;
var timer;
var stopwatch = function () {
dttm += 10;
$('#timer').text(Math.round(dttm/10)/100 + " sec");
}
var controler = {
slice = {
done: function (data) {
clearInterval(timer);
token.find("img.loading").hide();
token.find("img.loading").hide()
container.show();
if(data !== undefined)
$("#query_container").html(data.query);
$('#timer').removeClass('btn-warning');
Expand All @@ -39,25 +30,64 @@ var px = (function() {
clearInterval(timer);
token.find("img.loading").hide();
var err = '<div class="alert alert-danger">' + msg + '</div>';
token.html(err);
container.html(err);
$('#timer').removeClass('btn-warning');
$('span.query').removeClass('disabled');
$('#timer').addClass('btn-danger');
}
};
widget = {
},
data: data,
container: container,
selector: selector,
render: function() {
token.find("img.loading").show();
container.hide();
timer = setInterval(stopwatch, 10);
user_defined_widget.render(controler);
viz.render(this);
},
resize: function() {
user_defined_widget.resize();
viz.resize(this);
},
addFilter: function(col, vals) {
if(dashboard !== undefined)
dashboard.addFilter(slice_id, col, vals);
},
};
return widget;
var viz = visualizations[name](slice);
slice['viz'] = viz;
return slice;
}

var Dashboard = function(){
var dash = {
slices: [],
filters: {},
addFilter: function(slice_id, field, values) {
this.filters[slice_id] = [field, values];
this.slices.forEach(function(slice){
if(slice.data.slice_id != slice_id){
//slice.render();
}
});
console.log(this.filters);
},
}
$('.dashboard li.widget').each(function() {
var data = $(this).data('slice');
var slice = Slice(data, dash);
$(this).find('a.refresh').click(function(){
slice.render();
});
dash.slices.push(slice);
slice.render();
});
return dash;
}

function registerViz(name, initViz) {
visualizations[name] = initViz;
}

function initializeDatasourceView() {
function initExploreView() {
function getParam(name) {
name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
Expand Down Expand Up @@ -176,7 +206,7 @@ var px = (function() {
});
}

function initializeDashboardView(dashboard_id) {
function initDashboardView(dashboard_id) {
var gridster = $(".gridster ul").gridster({
widget_margins: [5, 5],
widget_base_dimensions: [100, 100],
Expand All @@ -186,8 +216,8 @@ function initializeDashboardView(dashboard_id) {
resize: {
enabled: true,
stop: function(e, ui, element) {
var widget = $(element).data('widget');
widget.resize();
var slice = $(element).data('slice');
slice.resize();
}
},
serialize_params: function(_w, wgd) {
Expand All @@ -214,36 +244,42 @@ function initializeDashboardView(dashboard_id) {
error: function() {alert("Error :(")},
});
});
$("a.closewidget").click(function() {
$("a.closeslice").click(function() {
var li = $(this).parents("li");
gridster.remove_widget(li);
});
$("table.widget_header").mouseover(function() {
$("table.slice_header").mouseover(function() {
$(this).find("td.icons nobr").show();
});
$("table.widget_header").mouseout(function() {
$("table.slice_header").mouseout(function() {
$(this).find("td.icons nobr").hide();
});
$("#dash_css").on("keyup", function(){
css = $(this).val();
$("#user_style").html(css);
});
$('li.widget').each(function() { /* this sets the z-index for left side boxes higher. */

// this sets the z-index for left side boxes higher
$('li.slice').each(function() {
current_row = $(this).attr('data-col');
$( this ).css('z-index', 100 - current_row);
});
$("div.chart").each(function() { /* this makes the whole chart fit within the dashboard div */

// this makes the whole chart fit within the dashboard div
$("div.chart").each(function() {
$(this).css('height', '95%');
});


}

// Export public functions
return {
registerWidget: registerWidget,
initializeWidget: initializeWidget,
initializeDatasourceView: initializeDatasourceView,
initializeDashboardView: initializeDashboardView,
registerViz: registerViz,
Slice: Slice,
Dashboard: Dashboard,
initExploreView: initExploreView,
initDashboardView: initDashboardView,
}

})();

22 changes: 9 additions & 13 deletions panoramix/static/widgets/viz_bignumber.js
Original file line number Diff line number Diff line change
@@ -1,15 +1,12 @@
px.registerWidget('big_number', function(data_attribute) {
px.registerViz('big_number', function(slice) {
var data_attribute = slice.data;
var div = d3.select(slice.selector);

var token_name = data_attribute['token'];
var json_callback = data_attribute['json_endpoint'];
var div = d3.select('#' + token_name);

function render(ctrl) {
d3.json(json_callback, function(error, payload){
function render() {
d3.json(slice.data.json_endpoint, function(error, payload){
//Define the percentage bounds that define color from red to green
div.html("");
if (error != null){
ctrl.error(error.responseText);
slice.error(error.responseText);
return '';
}
json = payload.data;
Expand All @@ -19,9 +16,8 @@ px.registerWidget('big_number', function(data_attribute) {

var f = d3.format('.3s');
var fp = d3.format('+.1%');
var xy = div.node().getBoundingClientRect();
var width = xy.width;
var height = xy.height - 30;
var width = slice.container.width();
var height = slice.container.height() - 30;
var svg = div.append('svg');
svg.attr("width", width);
svg.attr("height", height);
Expand Down Expand Up @@ -135,7 +131,7 @@ px.registerWidget('big_number', function(data_attribute) {
div.select('g.digits').transition().duration(500).attr('opacity', 1);
div.select('g.axis').transition().duration(500).attr('opacity', 0);
});
ctrl.done(payload);
slice.done(payload);
});
};

Expand Down
18 changes: 9 additions & 9 deletions panoramix/static/widgets/viz_directed_force.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,25 +2,25 @@
Modified from http://bl.ocks.org/d3noob/5141278
*/

function viz_directed_force(data_attribute) {
var token = d3.select('#' + data_attribute.token);
function viz_directed_force(slice) {
var token = d3.select('#' + slice.data.token);
var xy = token.select('#chart').node().getBoundingClientRect();
var width = xy.width;
var height = xy.height - 25;
var radius = Math.min(width, height) / 2;
var link_length = data_attribute.form_data['link_length'];
var link_length = slice.data.form_data['link_length'];
if (link_length === undefined){
link_length = 200;
}
var charge = data_attribute.form_data['charge'];
var charge = slice.data.form_data['charge'];
if (charge === undefined){
charge = -500;
}
var render = function(ctrl) {
d3.json(data_attribute.json_endpoint, function(error, json) {
var render = function() {
d3.json(slice.data.json_endpoint, function(error, json) {

if (error != null){
ctrl.error(error.responseText);
slice.error(error.responseText);
return '';
}
links = json.data;
Expand Down Expand Up @@ -150,12 +150,12 @@ function viz_directed_force(data_attribute) {
.attr("transform", function(d) {
return "translate(" + d.x + "," + d.y + ")"; });
}
ctrl.done(json);
slice.done(json);
});
}
return {
render: render,
resize: render,
};
}
px.registerWidget('directed_force', viz_directed_force);
px.registerViz('directed_force', viz_directed_force);
6 changes: 3 additions & 3 deletions panoramix/static/widgets/viz_markup.js
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
px.registerWidget('markup', function(data_attribute) {
px.registerViz('markup', function(slice) {

function refresh(ctrl) {
function refresh() {
$('#code').attr('rows', '15')
ctrl.done();
slice.done();
}
return {
render: refresh,
Expand Down
Loading

0 comments on commit 4b481e9

Please sign in to comment.