Skip to content
Snippets Groups Projects
Commit 5ad1ed59 authored by Jan Mach's avatar Jan Mach
Browse files

Feature: All charts can now be downloaded sa SVG images. 

(Redmine issue: #4321)
parent 01691138
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
lib/hawat/blueprints/design/templates/_macros_chart.html
+ 44
− 6
View file @ 5ad1ed59
...@@ -37,9 +37,14 @@ ...@@ -37,9 +37,14 @@
<div class="btn-group" role="group"> <div class="btn-group" role="group">
<div class="btn-group" role="group"> <div class="btn-group" role="group">
<button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
{{ get_icon('action-download') }} Download dataset <span class="caret"></span> {{ get_icon('action-download') }} Download <span class="caret"></span>
</button> </button>
<ul class="dropdown-menu"> <ul class="dropdown-menu">
<li>
<a class="export-dataset-svg" id="{{ chart_id }}_export_svg" aria-pressed="false" autocomplete="off">
{{ _('Download chart as SVG') }}
</a>
</li>
<li> <li>
<a class="export-dataset-csv" id="{{ chart_id }}_export_csv" aria-pressed="false" autocomplete="off"> <a class="export-dataset-csv" id="{{ chart_id }}_export_csv" aria-pressed="false" autocomplete="off">
{{ _('Download dataset as CSV') }} {{ _('Download dataset as CSV') }}
...@@ -93,9 +98,14 @@ ...@@ -93,9 +98,14 @@
</button> </button>
<div class="btn-group" role="group"> <div class="btn-group" role="group">
<button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
{{ get_icon('action-download') }} Download dataset <span class="caret"></span> {{ get_icon('action-download') }} Download <span class="caret"></span>
</button> </button>
<ul class="dropdown-menu"> <ul class="dropdown-menu">
<li>
<a class="export-dataset-svg" id="{{ chart_id }}_export_svg" aria-pressed="false" autocomplete="off">
{{ _('Download chart as SVG') }}
</a>
</li>
<li> <li>
<a class="export-dataset-csv" id="{{ chart_id }}_export_csv" aria-pressed="false" autocomplete="off"> <a class="export-dataset-csv" id="{{ chart_id }}_export_csv" aria-pressed="false" autocomplete="off">
{{ _('Download dataset as CSV') }} {{ _('Download dataset as CSV') }}
...@@ -234,14 +244,28 @@ ...@@ -234,14 +244,28 @@
{%- macro _snippet_ecbks_timeline(chart_id) %} {%- macro _snippet_ecbks_timeline(chart_id) %}
// Enable necessary event callbacks to appropriate DOM elements. // Enable necessary event callbacks to appropriate DOM elements.
$(document).ready(function () { $(document).ready(function () {
// Event callback for toggling dataset table. // Event handler for toggling dataset table.
$("#{{ chart_id }}_toggle").click(function () { $("#{{ chart_id }}_toggle").click(function () {
$("#{{ chart_id }}_content").toggleClass("col-md-12 col-md-6"); $("#{{ chart_id }}_content").toggleClass("col-md-12 col-md-6");
$("#{{ chart_id }}_sidebar").toggleClass("collapsed"); $("#{{ chart_id }}_sidebar").toggleClass("collapsed");
$("#{{ chart_id }}_sidebar").trigger("resizeCharts"); $("#{{ chart_id }}_sidebar").trigger("resizeCharts");
return false; return false;
}); });
// Event callback for downloading chart dataset as CSV. // Event handler for downloading chart as SVG.
$("#{{ chart_id }}_export_svg").click(function () {
chart = $("#{{ chart_id }}_chart svg").get(0);
serializer = new XMLSerializer();
data = serializer.serializeToString(chart);
blob = new Blob([data], {type: "image/svg+xml"}),
url = window.URL.createObjectURL(blob);
this.href = url;
this.target = '_blank';
// target filename
this.download = 'export_{{ chart_id }}.svg';
});
// Event handler for downloading chart dataset as CSV.
$("#{{ chart_id }}_export_csv").click(function () { $("#{{ chart_id }}_export_csv").click(function () {
data = lols_to_csv( data = lols_to_csv(
loos_to_lols_tl( loos_to_lols_tl(
...@@ -261,7 +285,7 @@ ...@@ -261,7 +285,7 @@
// target filename // target filename
this.download = 'export_{{ chart_id }}.csv'; this.download = 'export_{{ chart_id }}.csv';
}); });
// Event callback for downloading chart dataset as CSV. // Event handler for downloading chart dataset as CSV.
$("#{{ chart_id }}_export_json").click(function () { $("#{{ chart_id }}_export_json").click(function () {
data = JSON.stringify({{ chart_id }}_dataset); data = JSON.stringify({{ chart_id }}_dataset);
blob = new Blob([data], {type: "application/json"}), blob = new Blob([data], {type: "application/json"}),
...@@ -288,6 +312,20 @@ ...@@ -288,6 +312,20 @@
{%- macro _snippet_ecbks_dict(chart_id) %} {%- macro _snippet_ecbks_dict(chart_id) %}
// Append necessary event handlers for dataset '{{ chart_id }}'. // Append necessary event handlers for dataset '{{ chart_id }}'.
$(document).ready(function () { $(document).ready(function () {
// Event handler for downloading chart as SVG.
$("#{{ chart_id }}_export_svg").click(function () {
chart = $("#{{ chart_id }}_chart svg").get(0);
serializer = new XMLSerializer();
data = serializer.serializeToString(chart);
blob = new Blob([data], {type: "image/svg+xml"}),
url = window.URL.createObjectURL(blob);
this.href = url;
this.target = '_blank';
// target filename
this.download = 'export_{{ chart_id }}.svg';
});
// Event handler for downloading dataset as CSV file. // Event handler for downloading dataset as CSV file.
$("#{{ chart_id }}_export_csv").click(function () { $("#{{ chart_id }}_export_csv").click(function () {
data = lols_to_csv( data = lols_to_csv(
...@@ -305,7 +343,7 @@ ...@@ -305,7 +343,7 @@
this.download = 'export_{{ chart_id }}.csv'; this.download = 'export_{{ chart_id }}.csv';
}); });
// Event callback for downloading chart dataset as CSV. // Event handler for downloading chart dataset as CSV.
$("#{{ chart_id }}_export_json").click(function () { $("#{{ chart_id }}_export_json").click(function () {
data = JSON.stringify({{ chart_id }}_dataset); data = JSON.stringify({{ chart_id }}_dataset);
blob = new Blob([data], {type: "application/json"}), blob = new Blob([data], {type: "application/json"}),
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment