static download

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) => {

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();
+    },
+
+});

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');

client/app/components/widget-adapter/template.hbs

@@ -1,5 +1,6 @@
 <div class='widget'>
     <div class='widgetButtons'>
+        <button class='configureButton' onclick={{action 'download'}}>{{fa-icon 'download'}}</button>
         <h4>{{item.name}}</h4>
     </div>
     <div class='configmenu'>
@@ -50,7 +51,7 @@
         </div>
     </div>
 
-    {{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}}
 </div>

client/app/templates/components/place-holder.hbs

@@ -0,0 +1,48 @@
+<div class='widgetButtons'>
+    <button class='configureButton' onclick={{action 'removeWidget'}}>{{fa-icon "close"}}</button>
+    <button class='configureButton' onclick={{action 'showConfig'}}>{{fa-icon "cogs"}}</button>
+    <button class='configureButton' onclick={{action 'download'}}>{{fa-icon 'download'}}</button>
+</div>
+<div class='configmenu'>
+    <form {{action 'configChanged' on='submit'}}>
+        <div class="col-xs-4">JS Engine:</div>
+        <div class="col-xs-8">
+          <select onchange={{action 'changeEngine' value="target.value"}}>
+            <option value="c3">C3</option>
+            <option value="dimple">Dimple</option>
+          </select>
+        </div>
+        <hr>
+        <div class="col-xs-4">Chart</div>
+        <div class="col-xs-8">
+          <select onchange={{action 'changeChart' value="target.value"}}>
+            <option value="donut">Donut</option>
+            <option value="timeseries">Time-Series</option>
+            <option value="bar">Bar</option>
+          </select>
+        </div>
+        <hr>
+        <div class="col-xs-4">Width:</div>
+        <div class="col-xs-8">
+          {{input type='text' size="10" value=widthSetting}}
+        </div>
+        <hr>
+        <div class="col-xs-4">Height:</div>
+        <div class="col-xs-8">
+          {{input type='text' size="10" value=heightSetting}}
+        </div>
+        <hr>
+        <div class="col-xs-4">Query:</div>
+        <div class="col-xs-12">
+          {{textarea value=query cols="36" rows="5"}}
+        </div>
+        <hr>
+        <div class="col-xs-12">
+          <button class="btn btn-primary" style="margin-right:10px" type='submit'>OK</button>
+        </div>
+    </form>
+</div>
+
+{{component widgetType chartType=chartType aggregations=aggregations width=widthSetting height=heightSetting interval=tsInterval resizedSignal=resizedSignal downloadHook=downloadHook}}
+
+{{yield}}