mirror of https://github.com/apache/superset.git
Extract word cloud javascript to separate file.
This commit is contained in:
parent
7172be9705
commit
b75c89b81f
|
@ -0,0 +1,66 @@
|
|||
function viz_wordcloud(token, json_callback) {
|
||||
var token = d3.select('#' + token);
|
||||
function refresh() {
|
||||
d3.json(json_callback, function(error, json) {
|
||||
var data = json.data;
|
||||
var range = [
|
||||
json.form_data.size_from,
|
||||
json.form_data.size_to,
|
||||
];
|
||||
var rotation = json.form_data.rotation;
|
||||
if (rotation == "square") {
|
||||
var f_rotation = function() { return ~~(Math.random() * 2) * 90; };
|
||||
}
|
||||
else if (rotation == "flat") {
|
||||
var f_rotation = function() { return 0 };
|
||||
}
|
||||
else {
|
||||
var f_rotation = function() { return (~~(Math.random() * 6) - 3) * 30; };
|
||||
}
|
||||
var box = token.node().getBoundingClientRect();
|
||||
var size = [box.width, box.height - 25];
|
||||
|
||||
if (error != null){
|
||||
var err = '<div class="alert alert-danger">' + error.responseText + '</div>';
|
||||
token.html(err);
|
||||
return '';
|
||||
}
|
||||
scale = d3.scale.linear()
|
||||
.range(range)
|
||||
.domain(d3.extent(data, function(d) { return d.size; }));
|
||||
var fill = d3.scale.category20();
|
||||
var layout = d3.layout.cloud()
|
||||
.size(size)
|
||||
.words(data)
|
||||
.padding(5)
|
||||
.rotate(f_rotation)
|
||||
.font("serif")
|
||||
.fontSize(function(d) { return scale(d.size); })
|
||||
.on("end", draw);
|
||||
layout.start();
|
||||
function draw(words) {
|
||||
token.selectAll("*").remove();
|
||||
|
||||
token.append("svg")
|
||||
.attr("width", layout.size()[0])
|
||||
.attr("height", layout.size()[1])
|
||||
.append("g")
|
||||
.attr("transform", "translate(" + layout.size()[0] / 2 + "," + layout.size()[1] / 2 + ")")
|
||||
.selectAll("text")
|
||||
.data(words)
|
||||
.enter().append("text")
|
||||
.style("font-size", function(d) { return d.size + "px"; })
|
||||
.style("font-family", "Impact")
|
||||
.style("fill", function(d, i) { return fill(i); })
|
||||
.attr("text-anchor", "middle")
|
||||
.attr("transform", function(d) {
|
||||
return "translate(" + [d.x, d.y] + ") rotate(" + d.rotate + ")";
|
||||
})
|
||||
.text(function(d) { return d.text; });
|
||||
}
|
||||
});
|
||||
}
|
||||
refresh();
|
||||
jtoken = $(token);
|
||||
jtoken.parent().find("a.refresh").click(refresh);
|
||||
}
|
|
@ -13,7 +13,8 @@ var div = d3.select("#{{ viz.token }}");
|
|||
var render = function(){
|
||||
url = "/";
|
||||
var url = "{{ viz.get_url(json="true")|safe }}";
|
||||
d3.json(url, function(error, json){
|
||||
d3.json(url, function(error, payload){
|
||||
json = payload.data;
|
||||
div.html("");
|
||||
//Define the percentage bounds that define color from red to green
|
||||
if(error != null){
|
||||
|
@ -161,7 +162,7 @@ example_data = function(){
|
|||
var data = [];
|
||||
for(i=0; i<24; i++){
|
||||
data.push([
|
||||
new Date(2015, 1, i, 1, 0, 0, 0),
|
||||
new Date(2015, 1, i, 1, 0, 0, 0),
|
||||
rnd() + (i*(rnd()/40))
|
||||
]);
|
||||
}
|
||||
|
|
|
@ -33,7 +33,8 @@
|
|||
chart.hide();
|
||||
loading.show();
|
||||
var url = "{{ viz.get_url(json="true")|safe }}";
|
||||
$.getJSON(url, function(data){
|
||||
$.getJSON(url, function(payload){
|
||||
data = payload.data;
|
||||
$("#query_container").html(data.query);
|
||||
nv.addGraph(function() {
|
||||
// chart_type is {{ viz.chart_type }}
|
||||
|
|
|
@ -4,7 +4,7 @@
|
|||
<table class="dataframe table table-striped table-bordered table-condensed">
|
||||
<thead>
|
||||
<tr>
|
||||
{% for col in df.columns if not col.endswith('__perc') %}
|
||||
{% for col in df.columns if not col.endswith('__perc') %}
|
||||
<th>{{ col }}</th>
|
||||
{% endfor %}
|
||||
</tr>
|
||||
|
@ -12,7 +12,7 @@
|
|||
<tbody>
|
||||
{% for row in df.to_dict(orient="records") %}
|
||||
<tr>
|
||||
{% for col in df.columns if not col.endswith('__perc') %}
|
||||
{% for col in df.columns if not col.endswith('__perc') %}
|
||||
{% if col + '__perc' in df.columns %}
|
||||
<td style="background-image: linear-gradient(to right, lightgrey, lightgrey {{ row[col+'__perc'] }}%, rgba(0,0,0,0) {{ row[col+'__perc'] }}%">
|
||||
{{ row[col] }}
|
||||
|
|
|
@ -6,69 +6,12 @@
|
|||
|
||||
{% macro viz_js(viz) %}
|
||||
<script>
|
||||
$( document ).ready(function() {
|
||||
var token = d3.select("#{{ viz.token }}");
|
||||
function refresh() {
|
||||
var range = [
|
||||
{{ viz.form_data.get('size_from') or 20 }},
|
||||
{{ viz.form_data.get('size_to') or 100 }}
|
||||
];
|
||||
var rotation = "{{ viz.form_data.get("rotation", "random") }}";
|
||||
if (rotation == "square")
|
||||
var f_rotation = function() { return ~~(Math.random() * 2) * 90; };
|
||||
else if (rotation == "flat")
|
||||
var f_rotation = function() { return 0};
|
||||
else
|
||||
var f_rotation = function() { return (~~(Math.random() * 6) - 3) * 30;};
|
||||
|
||||
var url = "{{ viz.get_url(json="true")|safe }}";
|
||||
var box = token.node().getBoundingClientRect();
|
||||
var size = [box.width, box.height-25];
|
||||
d3.json(url, function(error, data){
|
||||
if(error != null){
|
||||
var err = '<div class="alert alert-danger">' + error.responseText + '</div>';
|
||||
token.html(err);
|
||||
return '';
|
||||
}
|
||||
scale = d3.scale.linear()
|
||||
.range(range)
|
||||
.domain(d3.extent(data, function(d) { return d.size; }));
|
||||
var fill = d3.scale.category20();
|
||||
var layout = d3.layout.cloud()
|
||||
.size(size)
|
||||
.words(data)
|
||||
.padding(5)
|
||||
.rotate(f_rotation)
|
||||
.font("serif")
|
||||
.fontSize(function(d) { return scale(d.size); })
|
||||
.on("end", draw);
|
||||
layout.start();
|
||||
function draw(words) {
|
||||
token.selectAll("*").remove();
|
||||
|
||||
token.append("svg")
|
||||
.attr("width", layout.size()[0])
|
||||
.attr("height", layout.size()[1])
|
||||
.append("g")
|
||||
.attr("transform", "translate(" + layout.size()[0] / 2 + "," + layout.size()[1] / 2 + ")")
|
||||
.selectAll("text")
|
||||
.data(words)
|
||||
.enter().append("text")
|
||||
.style("font-size", function(d) { return d.size + "px"; })
|
||||
.style("font-family", "Impact")
|
||||
.style("fill", function(d, i) { return fill(i); })
|
||||
.attr("text-anchor", "middle")
|
||||
.attr("transform", function(d) {
|
||||
return "translate(" + [d.x, d.y] + ") rotate(" + d.rotate + ")";
|
||||
})
|
||||
.text(function(d) { return d.text; });
|
||||
}
|
||||
});
|
||||
}
|
||||
refresh();
|
||||
jtoken = $(token);
|
||||
jtoken.parent().find("a.refresh").click(refresh);
|
||||
});
|
||||
$(document).ready(function() {
|
||||
viz_wordcloud(
|
||||
"{{ viz.token }}",
|
||||
"{{ viz.get_url(json="true")|safe }}"
|
||||
);
|
||||
});
|
||||
</script>
|
||||
{% endmacro %}
|
||||
|
||||
|
|
|
@ -159,6 +159,12 @@ class BaseViz(object):
|
|||
}
|
||||
return d
|
||||
|
||||
def get_json(self):
|
||||
payload = {
|
||||
'data': json.loads(self.get_json_data()),
|
||||
'form_data': self.form_data,
|
||||
}
|
||||
return json.dumps(payload)
|
||||
|
||||
class TableViz(BaseViz):
|
||||
verbose_name = "Table View"
|
||||
|
@ -212,7 +218,11 @@ class WordCloudViz(BaseViz):
|
|||
('size_from', 'size_to'),
|
||||
'rotation',
|
||||
]
|
||||
js_files = ['d3.layout.cloud.js']
|
||||
js_files = [
|
||||
'd3.min.js',
|
||||
'd3.layout.cloud.js',
|
||||
'widgets/viz_wordcloud.js',
|
||||
]
|
||||
|
||||
def query_obj(self):
|
||||
d = super(WordCloudViz, self).query_obj()
|
||||
|
@ -224,7 +234,7 @@ class WordCloudViz(BaseViz):
|
|||
d['groupby'] = [d['groupby'][0]]
|
||||
return d
|
||||
|
||||
def get_json(self):
|
||||
def get_json_data(self):
|
||||
df = self.get_df()
|
||||
df.columns = ['text', 'size']
|
||||
return df.to_json(orient="records")
|
||||
|
@ -283,7 +293,7 @@ class BubbleViz(NVD3Viz):
|
|||
df['group'] = df[[self.series]]
|
||||
return df
|
||||
|
||||
def get_json(self):
|
||||
def get_json_data(self):
|
||||
df = self.get_df()
|
||||
series = defaultdict(list)
|
||||
for row in df.to_dict(orient='records'):
|
||||
|
@ -325,7 +335,7 @@ class BigNumberViz(BaseViz):
|
|||
self.form_data['metric'] = metric
|
||||
return d
|
||||
|
||||
def get_json(self):
|
||||
def get_json_data(self):
|
||||
form_data = self.form_data
|
||||
df = self.get_df()
|
||||
df = df.sort(columns=df.columns[0])
|
||||
|
@ -394,7 +404,7 @@ class NVD3TimeSeriesViz(NVD3Viz):
|
|||
df = pd.rolling_sum(df, int(rolling_periods))
|
||||
return df
|
||||
|
||||
def get_json(self):
|
||||
def get_json_data(self):
|
||||
df = self.get_df()
|
||||
series = df.to_dict('series')
|
||||
chart_data = []
|
||||
|
@ -491,7 +501,7 @@ class DistributionPieViz(NVD3Viz):
|
|||
df = df.sort(self.metrics[0], ascending=False)
|
||||
return df
|
||||
|
||||
def get_json(self):
|
||||
def get_json_data(self):
|
||||
df = self.get_df()
|
||||
df = df.reset_index()
|
||||
df.columns = ['x', 'y']
|
||||
|
@ -515,7 +525,7 @@ class DistributionBarViz(DistributionPieViz):
|
|||
df = df.sort(self.metrics[0], ascending=False)
|
||||
return df
|
||||
|
||||
def get_json(self):
|
||||
def get_json_data(self):
|
||||
df = self.get_df()
|
||||
series = df.to_dict('series')
|
||||
chart_data = []
|
||||
|
|
Loading…
Reference in New Issue