Merge pull request #470 from Kitware/linechart-events

Emit event when user clicks on data points

app/examples/dynamic-linechart/index.js

@@ -1,10 +1,9 @@
 import LineChart from '../../../src/candela/components/LineChart';
-import Events from '../../../src/candela/VisComponent/mixin/Events';
 import $ from 'jquery';
 import html from './index.jade';
 import './index.styl';
 
-class DynamicLineChart extends Events(LineChart) {
+class DynamicLineChart extends LineChart {
   constructor (...args) {
     super(...args);
   }
@@ -16,6 +15,14 @@ class DynamicLineChart extends Events(LineChart) {
 
   data (data) {
     this.options.data = data;
+
+    this.chart.then(chart => {
+      let data = chart.data('data');
+      data.remove(() => true);
+      data.insert(this.options.data);
+
+      chart.update();
+    });
   }
 }
 

app/examples/linechart-points/index.js

@@ -2,7 +2,7 @@ import { msft } from '../util/datasets';
 import showComponent from '../util/showComponent';
 
 window.onload = () => {
-  showComponent('LineChart', 'div', {
+  let vis = showComponent('LineChart', 'div', {
     data: msft,
     x: 'date',
     y: ['price'],
@@ -19,4 +19,6 @@ window.onload = () => {
     pointSize: 25,
     renderer: 'svg'
   });
+
+  vis.on('click', (d, item) => console.log(d, item));
 };

app/examples/util/showComponent/index.js

@@ -12,4 +12,6 @@ export default function showComponent (which, elementType, options) {
 
   let vis = new candela.components[which](el, options);
   vis.render();
+
+  return vis;
 }

src/candela/VisComponent/mixin/VegaChart.js

@@ -4,10 +4,11 @@ let VegaChart = (Base, spec) => class extends Base {
   constructor (...args) {
     super(...args);
     this.options = args[1];
+    this.chart = vega.parseChart(spec, this.el, this.options);
   }
 
   render () {
-    this.chart = vega.parseChart(spec, this.el, this.options);
+    this.chart.then(chart => chart.update());
   }
 
   get serializationFormats () {

src/candela/components/LineChart/index.js

@@ -1,8 +1,9 @@
 import VisComponent from '../../VisComponent';
+import Events from '../../VisComponent/mixin/Events';
 import VegaChart from '../../VisComponent/mixin/VegaChart';
 import spec from './spec.json';
 
-export default class LineChart extends VegaChart(VisComponent, spec) {
+export default class LineChart extends Events(VegaChart(VisComponent, spec)) {
   static get options () {
     return [
       {
@@ -43,4 +44,21 @@ export default class LineChart extends VegaChart(VisComponent, spec) {
       }
     ];
   }
+
+  constructor (...args) {
+    super(...args);
+
+    // Attach a listener to the chart.
+    this.chart.then(chart => {
+      chart.on('click', (event, item) => {
+        if (item && item.mark.marktype === 'symbol') {
+          const datum = Object.assign({}, item.datum);
+          delete datum._id;
+          delete datum._prev;
+
+          this.emit('click', datum, item);
+        }
+      });
+    });
+  }
 }

src/candela/components/SurvivalPlot/index.js

@@ -90,5 +90,13 @@ export default class SurvivalPlot extends VegaChart(VisComponent, spec) {
       }
       d.survivors = groups[d[options.group]].survivors;
     });
+
+    this.chart.then(chart => {
+      let data = chart.data('table');
+      data.remove(() => true);
+      data.insert(options.data);
+
+      chart.update();
+    });
   }
 }