mirror of https://github.com/apache/superset.git
Adding standalone mode
This commit is contained in:
parent
fffb0a7a80
commit
6a28ad3f4e
2
TODO.md
2
TODO.md
|
@ -1,6 +1,8 @@
|
||||||
# TODO
|
# TODO
|
||||||
List of TODO items for Panoramix
|
List of TODO items for Panoramix
|
||||||
|
|
||||||
|
* fix directed
|
||||||
|
|
||||||
## Improvments
|
## Improvments
|
||||||
* dashboard controller + filters
|
* dashboard controller + filters
|
||||||
* Color hash in JS
|
* Color hash in JS
|
||||||
|
|
|
@ -136,7 +136,7 @@ legend {
|
||||||
.datasource .tooltip-inner {
|
.datasource .tooltip-inner {
|
||||||
max-width: 350px;
|
max-width: 350px;
|
||||||
}
|
}
|
||||||
.datasource img.loading {
|
img.loading {
|
||||||
width: 30px;
|
width: 30px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -1,6 +1,7 @@
|
||||||
var px = (function() {
|
var px = (function() {
|
||||||
|
|
||||||
var visualizations = [];
|
var visualizations = [];
|
||||||
|
var dashboard = undefined;
|
||||||
|
|
||||||
var Slice = function(data, dashboard){
|
var Slice = function(data, dashboard){
|
||||||
var timer;
|
var timer;
|
||||||
|
@ -73,10 +74,14 @@ var px = (function() {
|
||||||
container.hide();
|
container.hide();
|
||||||
container.html('');
|
container.html('');
|
||||||
timer = setInterval(stopwatch, 10);
|
timer = setInterval(stopwatch, 10);
|
||||||
viz.render(this);
|
viz.render();
|
||||||
},
|
},
|
||||||
resize: function() {
|
resize: function() {
|
||||||
viz.resize(this);
|
token.find("img.loading").show();
|
||||||
|
container.hide();
|
||||||
|
container.html('');
|
||||||
|
viz.render();
|
||||||
|
viz.resize();
|
||||||
},
|
},
|
||||||
addFilter: function(col, vals) {
|
addFilter: function(col, vals) {
|
||||||
if(dashboard !== undefined)
|
if(dashboard !== undefined)
|
||||||
|
@ -92,10 +97,11 @@ var px = (function() {
|
||||||
return slice;
|
return slice;
|
||||||
}
|
}
|
||||||
|
|
||||||
var Dashboard = function(){
|
var Dashboard = function(id){
|
||||||
var dash = {
|
var dash = {
|
||||||
slices: [],
|
slices: [],
|
||||||
filters: {},
|
filters: {},
|
||||||
|
id: id,
|
||||||
addFilter: function(slice_id, field, values) {
|
addFilter: function(slice_id, field, values) {
|
||||||
this.filters[slice_id] = [field, values];
|
this.filters[slice_id] = [field, values];
|
||||||
this.refreshExcept(slice_id);
|
this.refreshExcept(slice_id);
|
||||||
|
@ -111,6 +117,13 @@ var px = (function() {
|
||||||
delete this.filters[slice_id];
|
delete this.filters[slice_id];
|
||||||
this.refreshExcept(slice_id);
|
this.refreshExcept(slice_id);
|
||||||
},
|
},
|
||||||
|
getSlice: function(slice_id) {
|
||||||
|
for(var i=0; i<this.slices.length; i++){
|
||||||
|
console.log([this.slices[i].data.slice_id, slice_id]);
|
||||||
|
if (this.slices[i].data.slice_id == slice_id)
|
||||||
|
return this.slices[i];
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
$('.dashboard li.widget').each(function() {
|
$('.dashboard li.widget').each(function() {
|
||||||
var data = $(this).data('slice');
|
var data = $(this).data('slice');
|
||||||
|
@ -121,6 +134,7 @@ var px = (function() {
|
||||||
dash.slices.push(slice);
|
dash.slices.push(slice);
|
||||||
slice.render();
|
slice.render();
|
||||||
});
|
});
|
||||||
|
dashboard = dash;
|
||||||
return dash;
|
return dash;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -247,7 +261,7 @@ var px = (function() {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function initDashboardView(dashboard_id) {
|
function initDashboardView() {
|
||||||
var gridster = $(".gridster ul").gridster({
|
var gridster = $(".gridster ul").gridster({
|
||||||
widget_margins: [5, 5],
|
widget_margins: [5, 5],
|
||||||
widget_base_dimensions: [100, 100],
|
widget_base_dimensions: [100, 100],
|
||||||
|
@ -257,8 +271,8 @@ function initDashboardView(dashboard_id) {
|
||||||
resize: {
|
resize: {
|
||||||
enabled: true,
|
enabled: true,
|
||||||
stop: function(e, ui, element) {
|
stop: function(e, ui, element) {
|
||||||
var slice = $(element).data('slice');
|
var slice_data = $(element).data('slice');
|
||||||
slice.resize();
|
dashboard.getSlice(slice_data.slice_id).resize();
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
serialize_params: function(_w, wgd) {
|
serialize_params: function(_w, wgd) {
|
||||||
|
@ -271,6 +285,7 @@ function initDashboardView(dashboard_id) {
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
}).data('gridster');
|
}).data('gridster');
|
||||||
|
console.log(gridster);
|
||||||
$("div.gridster").css('visibility', 'visible');
|
$("div.gridster").css('visibility', 'visible');
|
||||||
$("#savedash").click(function() {
|
$("#savedash").click(function() {
|
||||||
var data = {
|
var data = {
|
||||||
|
@ -279,7 +294,7 @@ function initDashboardView(dashboard_id) {
|
||||||
};
|
};
|
||||||
$.ajax({
|
$.ajax({
|
||||||
type: "POST",
|
type: "POST",
|
||||||
url: '/panoramix/save_dash/' + dashboard_id + '/',
|
url: '/panoramix/save_dash/' + dashboard.id + '/',
|
||||||
data: {'data': JSON.stringify(data)},
|
data: {'data': JSON.stringify(data)},
|
||||||
success: function() {alert("Saved!")},
|
success: function() {alert("Saved!")},
|
||||||
error: function() {alert("Error :(")},
|
error: function() {alert("Error :(")},
|
||||||
|
@ -310,8 +325,6 @@ function initDashboardView(dashboard_id) {
|
||||||
$("div.chart").each(function() {
|
$("div.chart").each(function() {
|
||||||
$(this).css('height', '95%');
|
$(this).css('height', '95%');
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Export public functions
|
// Export public functions
|
||||||
|
@ -323,4 +336,3 @@ function initDashboardView(dashboard_id) {
|
||||||
initDashboardView: initDashboardView,
|
initDashboardView: initDashboardView,
|
||||||
}
|
}
|
||||||
})();
|
})();
|
||||||
|
|
||||||
|
|
|
@ -3,9 +3,6 @@
|
||||||
stroke: #000;
|
stroke: #000;
|
||||||
stroke-width: 1.5px;
|
stroke-width: 1.5px;
|
||||||
}
|
}
|
||||||
.directed_force #chart {
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.directed_force circle {
|
.directed_force circle {
|
||||||
fill: #ccc;
|
fill: #ccc;
|
||||||
|
|
|
@ -3,11 +3,10 @@ Modified from http://bl.ocks.org/d3noob/5141278
|
||||||
*/
|
*/
|
||||||
|
|
||||||
function viz_directed_force(slice) {
|
function viz_directed_force(slice) {
|
||||||
var div = d3.select(slice.selector);
|
|
||||||
var width = slice.container.width();
|
var width = slice.container.width();
|
||||||
var height = slice.container.height() - 25;
|
var height = slice.container.height() - 25;
|
||||||
var radius = Math.min(width, height) / 2;
|
|
||||||
var link_length = slice.data.form_data['link_length'];
|
var link_length = slice.data.form_data['link_length'];
|
||||||
|
var div = d3.select(slice.selector);
|
||||||
if (link_length === undefined){
|
if (link_length === undefined){
|
||||||
link_length = 200;
|
link_length = 200;
|
||||||
}
|
}
|
||||||
|
|
|
@ -122,8 +122,8 @@ body {
|
||||||
<script src="/static/lib/gridster/jquery.gridster.with-extras.min.js"></script>
|
<script src="/static/lib/gridster/jquery.gridster.with-extras.min.js"></script>
|
||||||
<script>
|
<script>
|
||||||
$(document).ready(function() {
|
$(document).ready(function() {
|
||||||
px.initDashboardView({{ dashboard.id }})
|
px.initDashboardView();
|
||||||
var dashboard = px.Dashboard();
|
var dashboard = px.Dashboard({{ dashboard.id }});
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
|
@ -36,13 +36,16 @@
|
||||||
<span class="btn btn-info pull-right disabled query"
|
<span class="btn btn-info pull-right disabled query"
|
||||||
data-toggle="modal" data-target="#query_modal">query</span>
|
data-toggle="modal" data-target="#query_modal">query</span>
|
||||||
<span class="btn btn-warning pull-right notbtn" id="timer">0 sec</span>
|
<span class="btn btn-warning pull-right notbtn" id="timer">0 sec</span>
|
||||||
<div class="btn-group pull-right" role="group">
|
<span class="btn btn-default pull-right" id="csv" title="Export to .csv format" data-toggle="tooltip">
|
||||||
<span class="btn btn-default disabled">
|
<i class="fa fa-file-text-o"></i>.csv
|
||||||
<i class="fa fa-file-text"></i>
|
</span>
|
||||||
|
<span class="btn btn-default pull-right" id="json" title="Export to .json" data-toggle="tooltip">
|
||||||
|
<i class="fa fa-file-code-o"></i>
|
||||||
|
.json
|
||||||
|
</span>
|
||||||
|
<span class="btn btn-default pull-right" id="standalone" title="Standalone version, use to embed anywhere" data-toggle="tooltip">
|
||||||
|
<i class="fa fa-code"></i>
|
||||||
</span>
|
</span>
|
||||||
<span class="btn btn-default" id="csv">.csv</span>
|
|
||||||
<span class="btn btn-default" id="json">.json</span>
|
|
||||||
</div>
|
|
||||||
<hr/>
|
<hr/>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
|
@ -133,8 +136,7 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="col-md-9">
|
<div class="col-md-9">
|
||||||
{% block messages %}
|
{% block messages %}{% endblock %}
|
||||||
{% endblock %}
|
|
||||||
{% include 'appbuilder/flash.html' %}
|
{% include 'appbuilder/flash.html' %}
|
||||||
<div
|
<div
|
||||||
id="{{ viz.token }}"
|
id="{{ viz.token }}"
|
||||||
|
@ -142,14 +144,6 @@
|
||||||
data-slice="{{ viz.json_data }}"
|
data-slice="{{ viz.json_data }}"
|
||||||
style="height: 700px;">
|
style="height: 700px;">
|
||||||
<img src="{{ url_for("static", filename="img/loading.gif") }}" class="loading" alt="loading">
|
<img src="{{ url_for("static", filename="img/loading.gif") }}" class="loading" alt="loading">
|
||||||
{% block viz_html %}
|
|
||||||
{% if viz.error_msg %}
|
|
||||||
<div class="alert alert-danger">{{ viz.error_msg }}</div>
|
|
||||||
{% endif %}
|
|
||||||
{% if viz.warning_msg %}
|
|
||||||
<div class="alert alert-warning">{{ viz.warning_msg }}</div>
|
|
||||||
{% endif %}
|
|
||||||
{% endblock %}
|
|
||||||
<div id="{{ viz.token }}_con" class="slice_container" style="height: 100%; width: 100%"></div>
|
<div id="{{ viz.token }}_con" class="slice_container" style="height: 100%; width: 100%"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -243,6 +237,9 @@
|
||||||
$('#csv').click(function () {
|
$('#csv').click(function () {
|
||||||
window.location = '{{ viz.csv_endpoint | safe }}';
|
window.location = '{{ viz.csv_endpoint | safe }}';
|
||||||
});
|
});
|
||||||
|
$('#standalone').click(function () {
|
||||||
|
window.location = '{{ viz.standalone_endpoint | safe }}';
|
||||||
|
});
|
||||||
$("#viz_type").change(function() {$("#query").submit();});
|
$("#viz_type").change(function() {$("#query").submit();});
|
||||||
collapsed_fieldsets = get_collapsed_fieldsets();
|
collapsed_fieldsets = get_collapsed_fieldsets();
|
||||||
for(var i=0; i < collapsed_fieldsets.length; i++){
|
for(var i=0; i < collapsed_fieldsets.length; i++){
|
||||||
|
|
|
@ -0,0 +1,29 @@
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<script src="/static/panoramix.js"></script>
|
||||||
|
|
||||||
|
{% block head_css %}
|
||||||
|
<script src="{{url_for('appbuilder.static',filename='js/jquery-latest.js')}}"></script>
|
||||||
|
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='panoramix.css') }}">
|
||||||
|
{% endblock %}
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div
|
||||||
|
id="{{ viz.token }}"
|
||||||
|
class="viz slice {{ viz.viz_type }}"
|
||||||
|
data-slice="{{ viz.json_data }}"
|
||||||
|
style="height: 700px;">
|
||||||
|
<img src="{{ url_for("static", filename="img/loading.gif") }}" class="loading" alt="loading">
|
||||||
|
<div id="{{ viz.token }}_con" class="slice_container" style="height: 100%; width: 100%"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
$(document).ready(function() {
|
||||||
|
var data = $('.slice').data('slice');
|
||||||
|
var slice = px.Slice(data);
|
||||||
|
slice.render();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
{% block tail %}{% endblock %}
|
||||||
|
</body>
|
||||||
|
</html>
|
|
@ -2,7 +2,7 @@
|
||||||
{{ viz.get_json() }}
|
{{ viz.get_json() }}
|
||||||
{% else %}
|
{% else %}
|
||||||
{% if viz.request.args.get("standalone") == "true" %}
|
{% if viz.request.args.get("standalone") == "true" %}
|
||||||
{% extends 'panoramix/viz_standalone.html' %}
|
{% extends 'panoramix/standalone.html' %}
|
||||||
{% else %}
|
{% else %}
|
||||||
{% extends 'panoramix/explore.html' %}
|
{% extends 'panoramix/explore.html' %}
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
@ -10,20 +10,16 @@
|
||||||
|
|
||||||
{% block head_css %}
|
{% block head_css %}
|
||||||
{{super()}}
|
{{super()}}
|
||||||
{% if viz.request.args.get("skip_libs") != "true" %}
|
|
||||||
{% for css in viz.css_files %}
|
{% for css in viz.css_files %}
|
||||||
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename=css) }}">
|
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename=css) }}">
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
{% endif %}
|
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
|
|
||||||
{% block tail %}
|
{% block tail %}
|
||||||
{{super()}}
|
{{super()}}
|
||||||
{% if viz.request.args.get("skip_libs") != "true" %}
|
|
||||||
{% for js in viz.js_files %}
|
{% for js in viz.js_files %}
|
||||||
<script src="{{ url_for('static', filename=js) }}"></script>
|
<script src="{{ url_for('static', filename=js) }}"></script>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
{% endif %}
|
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
|
@ -1,13 +0,0 @@
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
{% if viz.request.args.get("skip_libs") != "true" %}
|
|
||||||
{% block head %}
|
|
||||||
<script src="{{url_for('appbuilder.static',filename='js/jquery-latest.js')}}"></script>
|
|
||||||
{% endblock %}
|
|
||||||
{% endif %}
|
|
||||||
{% block tail %}{% endblock %}
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
{% block viz_html %}{% endblock %}
|
|
||||||
</body>
|
|
||||||
</html>
|
|
|
@ -222,6 +222,10 @@ class BaseViz(object):
|
||||||
def csv_endpoint(self):
|
def csv_endpoint(self):
|
||||||
return self.get_url(csv="true")
|
return self.get_url(csv="true")
|
||||||
|
|
||||||
|
@property
|
||||||
|
def standalone_endpoint(self):
|
||||||
|
return self.get_url(standalone="true")
|
||||||
|
|
||||||
@property
|
@property
|
||||||
def data(self):
|
def data(self):
|
||||||
content = {
|
content = {
|
||||||
|
|
Loading…
Reference in New Issue