mirror of
https://github.com/HaitiData/haitidata.git
synced 2026-10-27 01:45:40 +00:00
Merge pull request #12 from sbsimo/charts_solution_base_ppasq
solve chart issue #9
This commit is contained in:
Paolo Pasquali authored and GitHub committed
commit
4eae5eeded
8 files changed
+49
-65
No files matched your search
@@ -43,7 +43,7 @@ class Chart(models.Model):
|
||||
)
|
||||
|
||||
layer = models.ForeignKey(Layer, validators=[validate_wfs])
|
||||
title = models.CharField(max_length=128, blank=True)
|
||||
title = models.CharField(max_length=128, blank=False)
|
||||
category = models.CharField(max_length=200)
|
||||
quantity = models.CharField(max_length=200)
|
||||
type = models.SmallIntegerField(choices=CHART_TYPES, default=0)
|
||||
@@ -77,4 +77,4 @@ class ChartForm(ModelForm):
|
||||
|
||||
class Meta:
|
||||
model = Chart
|
||||
fields = '__all__'
|
||||
fields = '__all__'
|
||||
@@ -150,6 +150,10 @@ var getCsv = function(csv_link, category, quantity, agg, chartType, id){
|
||||
.datum(dati)
|
||||
.call(line);
|
||||
}
|
||||
loading = false;
|
||||
var cog = document.getElementById("rotella");
|
||||
cog.parentNode.removeChild(cog);
|
||||
document.getElementById("preview_btn").disabled = false;
|
||||
};
|
||||
|
||||
create(chartType);
|
||||
|
||||
@@ -87,7 +87,11 @@ function donutChart(cat, qnt, title, id){
|
||||
.selectAll('polyline')
|
||||
.data(pie)
|
||||
.enter().append('polyline')
|
||||
.attr('points', calculatePoints);
|
||||
.attr('points', calculatePoints)
|
||||
.style('opacity', 0.3)
|
||||
.style('stroke', 'black')
|
||||
.style('width', '2px')
|
||||
.style('fill', 'none');
|
||||
// ===========================================================================================
|
||||
|
||||
// ===========================================================================================
|
||||
@@ -412,4 +416,4 @@ function donutChart(cat, qnt, title, id){
|
||||
};
|
||||
|
||||
return chart;
|
||||
}
|
||||
}
|
||||
@@ -1,6 +1,8 @@
|
||||
var dict_title_tc = {0:"Bar",1:"Pie", 2:"Donut", 3:"Line"};
|
||||
var dict_title_agg = {0:"Sum",1:"Mean",2:"Count", 3:"Max", 4:"Min"};
|
||||
|
||||
var loading = false;
|
||||
|
||||
function get_chart_detail(){
|
||||
var id = "chart_area_plain"
|
||||
//create area for chart
|
||||
@@ -46,11 +48,27 @@ function get_chart_popup(){
|
||||
createChartArea();
|
||||
};
|
||||
};
|
||||
|
||||
var createCog = function(){
|
||||
var cog_div = document.createElement("div");
|
||||
cog_div.innerHTML = '<i class="fa fa-cog fa-spin fa-3x fa-fw"></i><span>Loading data...</span>';
|
||||
cog_div.setAttribute("id", "rotella");
|
||||
cog_div.setAttribute("style", "display:flex;justify-content:center;align-items:center;");
|
||||
var doc_chart = document.getElementById(id);
|
||||
element = doc_chart.parentNode;
|
||||
element.insertBefore(cog_div, doc_chart);
|
||||
|
||||
};
|
||||
|
||||
if (document.getElementById("id_title").value == ""){
|
||||
document.getElementById("chart_title").innerHTML = suggestedTitle;
|
||||
}else document.getElementById("chart_title").innerHTML = document.getElementById("id_title").value;
|
||||
if (loading == false) {
|
||||
loading = true;
|
||||
createCog();
|
||||
createChartArea();
|
||||
replaceChart();
|
||||
attachAbstract();
|
||||
getCsv(csv_url, category, quantity, agg, chart_type, id);
|
||||
}
|
||||
}
|
||||
@@ -86,7 +86,11 @@ function pieChart(cat, qnt, title, id){
|
||||
.selectAll('polyline')
|
||||
.data(pie)
|
||||
.enter().append('polyline')
|
||||
.attr('points', calculatePoints);
|
||||
.attr('points', calculatePoints)
|
||||
.style('opacity', .3)
|
||||
.style('stroke', 'black')
|
||||
.style('width', '2px')
|
||||
.style('fill', 'none');
|
||||
// ===========================================================================================
|
||||
|
||||
// ===========================================================================================
|
||||
@@ -412,4 +416,4 @@ function pieChart(cat, qnt, title, id){
|
||||
};
|
||||
|
||||
return chart;
|
||||
}
|
||||
}
|
||||
@@ -92,60 +92,9 @@
|
||||
</a>
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<h4>{% trans "Modify this Chart" %}</h4>
|
||||
<p>{% trans "Change type of the chart or type of aggregation." %}</p>
|
||||
<a id="updt_chart">
|
||||
<button class="btn btn-primary btn-md btn-block" data-toggle="collapse" data-target="#form" onclick="update_params();" >{% trans "Modify this Chart" %}</button>
|
||||
</a>
|
||||
<div id="form" class="collapse">
|
||||
<form name="f" method="post" class="form-horizontal" onchange="update_params();" action="{% url 'chart_update' chart.id %}" >
|
||||
{% csrf_token %}
|
||||
<div class="form-group">
|
||||
<input id="id_layer" name="layer" value="{{ resource.id }}" type="hidden">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="control-label col-md-2" for="id_type">Type:</label>
|
||||
<div class="col-md-8">
|
||||
<select class="form-control" id="id_type" name="type">
|
||||
<option value="0">Bar chart</option>
|
||||
<option value="1">Pie chart</option>
|
||||
<option value="2">Donut chart</option>
|
||||
<option value="3">Line chart</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="control-label col-md-2" for="id_aggr_type">Aggregation:</label>
|
||||
<div class="col-md-8">
|
||||
<select class="form-control" id="id_aggr_type" name="aggr_type">
|
||||
<option value="0">Sum</option>
|
||||
<option value="1">Mean</option>
|
||||
<option value="2">Category count</option>
|
||||
<option value="3">Max</option>
|
||||
<option value="4">Min</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="control-label col-md-2" for="id_title">Title:</label>
|
||||
<div class="col-md-8">
|
||||
<input class="form-control" id="id_title" maxlength="128" name="title" type="text">
|
||||
<p style="font-size: small; margin:0">Suggested title:</p>
|
||||
<p id="title" style="font-size: small; margin:0">Testo di prova</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="control-label col-md-2" for="id_abstract">Abstract:</label>
|
||||
<div class="col-md-8">
|
||||
<textarea class="form-control" cols="40" id="id_abstract" name="abstract" rows="5"></textarea>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<button type="button" class="btn btn-primary btn-block" data-toggle="modal" data-target="#chart_popup" onclick="get_chart_popup()">Display chart</button>
|
||||
<button type="submit" class="btn btn-primary btn-block" value="Submit">Update chart in db</button>
|
||||
</form>
|
||||
</div>
|
||||
</li>
|
||||
<a href="{% url 'chart_update' object.id %}" id="mod_chart">
|
||||
<button class="btn btn-primary btn-md btn-block">{% trans "Modify this Chart" %}</button>
|
||||
</a>
|
||||
<li class="list-group-item">
|
||||
<a href="{% url 'chart_delete' object.id %}" id="del_chart">
|
||||
<button class="btn btn-primary btn-md btn-block">{% trans "Delete this Chart" %}</button>
|
||||
|
||||
@@ -140,6 +140,10 @@
|
||||
<button class="btn btn-primary btn-md btn-block">{% trans "Delete this Chart" %}</button>
|
||||
</a>
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<button id='saveButton' class="btn btn-primary btn-md btn-block">Export my D3 visualization to PNG</button>
|
||||
</li>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -229,9 +233,6 @@ title_detail();
|
||||
|
||||
|
||||
</script>
|
||||
<div>
|
||||
<button id='saveButton'>Export my D3 visualization to PNG</button>
|
||||
</div>
|
||||
<script src="https://cdn.rawgit.com/eligrey/canvas-toBlob.js/f1a01896135ab378aa5c0118eadd81da55e698d8/canvas-toBlob.js"></script>
|
||||
<script src="https://cdn.rawgit.com/eligrey/FileSaver.js/e9d941381475b5df8b7d7691013401e171014e89/FileSaver.min.js"></script>
|
||||
|
||||
|
||||
@@ -583,7 +583,7 @@
|
||||
<textarea class="form-control" cols="40" id="id_abstract" name="abstract" rows="5"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<button type="button" class="btn btn-primary btn-block" data-toggle="modal" data-target="#chart_popup" onclick="get_chart_popup()">Preview</button>
|
||||
<button id="preview_btn" type="button" class="btn btn-primary btn-block" data-toggle="modal" data-target="#chart_popup" onclick="get_chart_popup()">Preview</button>
|
||||
<button type="submit" class="btn btn-primary btn-block" onclick="title_eval();">Save</button>
|
||||
</form>
|
||||
</div>
|
||||
@@ -656,12 +656,13 @@
|
||||
suggestedTitle = title + " of " + quantity + " for " + category;
|
||||
}
|
||||
document.getElementById("title").innerHTML = suggestedTitle;
|
||||
title_eval();
|
||||
return suggestedTitle;
|
||||
};
|
||||
|
||||
|
||||
function title_eval(){
|
||||
if (document.getElementById("id_title").textLength == 0){
|
||||
if (document.getElementById("id_title").value == ""){
|
||||
document.getElementById("id_title").value = suggestedTitle;
|
||||
}
|
||||
}
|
||||
@@ -670,6 +671,9 @@
|
||||
update_link();
|
||||
chart_title();
|
||||
attachAbstract();
|
||||
if (loading == true) {
|
||||
document.getElementById("preview_btn").disabled = true;
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
Reference in new issue
Block a user