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