diff --git a/client/app/components/c3-chart/component.js b/client/app/components/c3-chart/component.js
index 42783ea8a..a138f0f77 100644
--- a/client/app/components/c3-chart/component.js
+++ b/client/app/components/c3-chart/component.js
@@ -18,6 +18,19 @@ export default Ember.Component.extend({
this.set('resizedSignal', false);
}),
+ download: Ember.observer( 'downloadHook', function() {
+ let element = this.element;
+ var a = document.createElement('a'), xml, ev;
+ a.download = 'chart.svg'; // file name
+ xml = (new XMLSerializer()).serializeToString(element);
+ a.href = 'data:application/octet-stream;base64,' + btoa(xml);
+ ev = document.createEvent("MouseEvents");
+ ev.initMouseEvent("click", true, false, self, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
+ a.dispatchEvent(ev);
+ console.log('josh') ;
+ this.get('downloadHook') ;
+ }),
+
charTypeChange: Ember.observer('chartType', function(){
this.updateChart();
}),
@@ -147,7 +160,7 @@ export default Ember.Component.extend({
} else if (chart_type == 'timeseries') {
-
+
let x_axis = this.get('data.aggregations.all_over_time.buckets').map((datum) => { return datum.key_as_string })
var columns = this.get('data.aggregations.sorted_by_type.buckets').map((bucket) => {
return [bucket.key].concat(bucket['type_over_time'].buckets.reduce((ret, bucket) => {
diff --git a/client/app/components/generic-chart.js b/client/app/components/generic-chart.js
new file mode 100644
index 000000000..0f3f51997
--- /dev/null
+++ b/client/app/components/generic-chart.js
@@ -0,0 +1,144 @@
+/* global c3 */
+import Ember from 'ember';
+
+export default Ember.Component.extend({
+
+ classNames: ['chart'],
+
+ dataChanged: Ember.observer('aggregations', function() {
+ this.updateChart();
+ }),
+
+ data: [],
+
+ sizeChanged: Ember.observer('resizedSignal', function() {
+ this.updateChart();
+ }),
+
+ download: Ember.observer( 'downloadHook', function() {
+ let element = this.$(`.chart`).get(0);
+ var a = document.createElement('a'), xml, ev;
+ a.download = 'chart.svg'; // file name
+ xml = (new XMLSerializer()).serializeToString(element);
+ a.href = 'data:application/octet-stream;base64,' + btoa(xml);
+ ev = document.createEvent("MouseEvents");
+ ev.initMouseEvent("click", true, false, self, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
+ a.dispatchEvent(ev);
+ console.log('josh') ;
+ this.get('downloadHook') ;
+ }),
+
+ charTypeChange: Ember.observer('chartType', function(){
+ this.updateChart();
+ }),
+
+ updateChart() {
+
+ let chart_type = this.get('chartType');
+
+ let chart_options= {
+ bindto: this.$(`.chart`).get(0),
+ data: {
+ columns: null, //to be filled later
+ type: chart_type,
+ },
+ legend: { show: false },
+ [chart_type]:{
+ title: null, //to be filled later
+ label: {
+ show: false
+ }
+ },
+ size:{
+ height: this.get('height')*150 - 20,
+ width: this.get('width')*150},
+ };
+
+ if (chart_type == 'donut'){
+
+ this.set('data', this.get('aggregations.sources.buckets'));
+ var columns = this.get('data').map(({ key, doc_count }) => [key, doc_count]);
+ var title = 'Published in...';
+ }
+ else if (chart_type == 'bar'){
+
+ this.set('data', this.get('aggregations.contributors.buckets'));
+ var columns = this.get('data').map(({ key, doc_count }) => [key, doc_count]).slice(0, 10);
+ var title = 'Top 10 Contributors: ';
+
+ let axis = {
+ x: {
+ tick: {
+ format: function() {
+ return 'Top 10 Contributors';
+ }
+ }
+ },
+ y: {
+ label: 'Number of Publications'
+ },
+ };
+ let tooltip = {
+ grouped: false, // Default true
+ };
+ chart_options['axis'] = axis;
+ chart_options['tooltip'] = tooltip;
+ }
+ else if (chart_type == 'timeseries'){
+
+ this.set('data', this.get('aggregations.articles_over_time.buckets'));
+ var columns = [
+ ['x'].concat(this.get('data').map((datum) => {return datum.key_as_string})),
+ ['Articles'].concat(this.get('data').map((datum) => {return datum.doc_count})),
+ ];
+ var title = '';
+ let data_x = 'x';
+ let axis = {
+ x: {
+ type: 'timeseries',
+ tick: {
+ culling: {
+ max: 10
+ },
+ rotate: 90,
+ format: '%d-%m-%Y' // Format the tick labels on our chart
+ }
+ }
+ };
+ let data_types = {
+ x: 'area-spline',
+ Articles: 'area'
+ };
+ let tooltip = { // Format the tooltips on our chart
+ format: { // We want to return a nice-looking tooltip whose content is determined by (or at least consistent with) sour TS intervals
+ title: function (d) {
+ return d.toString().substring(4,15); // This isn't perfect, but it's at least more verbose than before
+ }
+ }
+ };
+ let zoom = {
+ enabled: true
+ };
+ let point = {
+ show: false,
+ };
+
+ chart_options['axis'] = axis;
+ chart_options['data']['types'] = data_types;
+ chart_options['data']['x'] = data_x;
+ chart_options['tooltip'] = tooltip;
+ chart_options['zoom'] = zoom;
+ chart_options['point'] = point;
+ }
+
+ chart_options['data']['columns'] = columns;
+ chart_options[chart_type]['title'] = title;
+ c3.generate(chart_options);
+
+ },
+
+ didRender() {
+ this.updateChart();
+ },
+
+});
diff --git a/client/app/components/widget-adapter/component.js b/client/app/components/widget-adapter/component.js
index 005e3976c..92110c1e2 100644
--- a/client/app/components/widget-adapter/component.js
+++ b/client/app/components/widget-adapter/component.js
@@ -404,6 +404,7 @@ export default Ember.Component.extend({
configuring: false,
picking: false,
+ downloadHook: false ,
init() {
this._super(...arguments);
@@ -544,6 +545,11 @@ export default Ember.Component.extend({
//window.open(url, '_blank');
},
+ download : function() {
+ this.set( 'downloadHook', true );
+ console.log() ;
+ },
+
saveWidget: function(){
console.log('saveWidget');
let widgetType = this.get('chartType');
diff --git a/client/app/components/widget-adapter/template.hbs b/client/app/components/widget-adapter/template.hbs
index 5e6bfd60f..a1db60d4f 100644
--- a/client/app/components/widget-adapter/template.hbs
+++ b/client/app/components/widget-adapter/template.hbs
@@ -1,5 +1,6 @@
- {{component widgetType data=data widgetSettings=item.widgetSettings chartType=chartType aggregations=aggregations name=item.name item=item width=widthSetting height=heightSetting interval=tsInterval resizedSignal=resizedSignal total=total transitionToFacet=(action 'transitionToFacet')}}
+ {{component widgetType data=data widgetSettings=item.widgetSettings chartType=chartType aggregations=aggregations name=item.name item=item width=widthSetting height=heightSetting interval=tsInterval downloadHook=downloadHook resizedSignal=resizedSignal total=total transitionToFacet=(action 'transitionToFacet')}}
{{yield}}
diff --git a/client/app/templates/components/place-holder.hbs b/client/app/templates/components/place-holder.hbs
new file mode 100644
index 000000000..605b5001c
--- /dev/null
+++ b/client/app/templates/components/place-holder.hbs
@@ -0,0 +1,48 @@
+
+
+
+
+
+
+
+{{component widgetType chartType=chartType aggregations=aggregations width=widthSetting height=heightSetting interval=tsInterval resizedSignal=resizedSignal downloadHook=downloadHook}}
+
+{{yield}}