Enable extra information in passed data

CHANGELOG

@@ -1,5 +1,10 @@
 # CHANGELOG
 
+## 0.3.0
+
+* API Change: The data for each event line object must now be in the `data` property (was `date`).
+* Pass any data object to each drop and specify the date property with a callback.
+
 ## 0.2.0
 
 * Display metaballs by default instead of simple dots

README.md

@@ -43,16 +43,41 @@ d3.select('#chart_placeholder')
   .call(eventDropsChart);
 ```
 
-The data must be an array of named time series. For instance:
+The data can be an array of named time series. For instance:
 
 ```js
 var data = [
-  { name: "http requests", dates: [new Date('2014/09/15 13:24:54'), new Date('2014/09/15 13:25:03'), new Date('2014/09/15 13:25:05'), ...] },
-  { name: "SQL queries", dates: [new Date('2014/09/15 13:24:57'), new Date('2014/09/15 13:25:04'), new Date('2014/09/15 13:25:04'), ...] },
-  { name: "cache invalidations", dates: [new Date('2014/09/15 13:25:12'), ...] }
+  { name: "http requests", data: [new Date('2014/09/15 13:24:54'), new Date('2014/09/15 13:25:03'), new Date('2014/09/15 13:25:05'), ...] },
+  { name: "SQL queries", data: [new Date('2014/09/15 13:24:57'), new Date('2014/09/15 13:25:04'), new Date('2014/09/15 13:25:04'), ...] },
+  { name: "cache invalidations", data: [new Date('2014/09/15 13:25:12'), ...] }
 ];
 ```
 
+You can also generate a chart from any type of data array but this requires us
+to supply a function that will return a date from each data point. The complete
+data object will be available during the eventColor and eventClick callbacks
+for example. An example data set:
+
+```js
+var data = [
+  { name: "http requests", data: [{date: new Date('2014/09/15 13:24:54'), foo: 'bar1'}, {date: new Date('2014/09/15 13:25:03'), foo: 'bar2'}, {date: new Date('2014/09/15 13:25:05'), foo: 'bar1'}, ...] },
+  { name: "SQL queries", data: [{date: new Date('2014/09/15 13:24:57'), foo: 'bar4'}, {date: new Date('2014/09/15 13:25:04'), foo: 'bar6'}, {date: new Date('2014/09/15 13:25:04'), foo: 'bar2'}, ...] }
+];
+```
+
+And the corresponding "date" function that returns a date for
+each data point.
+
+```js
+var eventDropsChart = d3.chart.eventDrops();
+d3.select('#chart_placeholder')
+  .datum(data)
+  .date(function(d){
+      return d.date;
+  }),
+  .call(eventDropsChart);
+```
+
 ## Configuration
 
 EventDrops follows the [d3.js reusable charts pattern](http://bost.ocks.org/mike/chart/) to let you customize the chart at will:
@@ -83,6 +108,7 @@ Configurable values:
   - `minScale`: The minimum scaling (zoom out), default to 0.
   - `maxScale`: The maximum scaling (zoom in), default to Infinity.
   - `zoomable`: *true* by default. Enable zoom-in/zoom-out and dragging handlers.
+  - `date`: function that returns the date from each data point when passing objects. Defaults to `d=>d`.
 
 ## Styling
 

demo/demo.js

@@ -11,13 +11,13 @@ function createEvent (name, maxNbEvents) {
     maxNbEvents = maxNbEvents | 200;
     var event = {
         name: name,
-        dates: []
+        data: []
     };
     // add up to 200 events
     var max =  Math.floor(Math.random() * maxNbEvents);
     for (var j = 0; j < max; j++) {
         var time = (Math.random() * (endTime - startTime)) + startTime;
-        event.dates.push(new Date(time));
+        event.data.push(new Date(time));
     }
 
     return event;

lib/config.js

@@ -29,6 +29,7 @@ const config = {
     eventZoom: null,
     eventClick: null,
     hasDelimiter: true,
+    date: d => d,
     hasTopAxis: true,
     hasBottomAxis: (d) => d.length >= 10,
     eventLineColor: 'black',

lib/drawer/delimiters.js

@@ -1,5 +1,5 @@
 export const delimiters = (svg, scales, dateFormat) => {
-    const extremum = svg.select('.extremum')
+    const extremum = svg.select('.extremum');
 
     extremum.selectAll('.minimum').remove();
     extremum.selectAll('.maximum').remove();

lib/drawer/drops.js

@@ -1,3 +1,4 @@
+
 export default (svg, scales, configuration) => function dropsSelector(data) {
     const dropLines = svg.selectAll('.drop-line').data(data);
 
@@ -8,15 +9,15 @@ export default (svg, scales, configuration) => function dropsSelector(data) {
         .attr('fill', configuration.eventLineColor);
 
     dropLines.each(function dropLineDraw(drop) {
-        const drops = d3.select(this).selectAll('.drop').data(drop.dates);
+        const drops = d3.select(this).selectAll('.drop').data(drop.data);
 
-        drops.attr('cx', d => scales.x(d));
+        drops.attr('cx', d => scales.x(configuration.date(d)));
 
         const circle = drops.enter()
             .append('circle')
             .classed('drop', true)
             .attr('r', 5)
-            .attr('cx', d => scales.x(d))
+            .attr('cx', d => scales.x(configuration.date(d)))
             .attr('cy', -5)
             .attr('fill', configuration.eventColor);
 

lib/drawer/labels.js

@@ -4,7 +4,7 @@ export default (container, scales, config) => data => {
     const labels = container.selectAll('.label').data(data);
 
     const text = d => {
-        const count = filterData(d.dates, scales.x).length;
+        const count = filterData(d.data, scales.x).length;
         return d.name + (count > 0 ? ` (${count})` : '');
     };
 

test/karma/drawer/drops.js

@@ -6,7 +6,7 @@ describe('Drops drawer', () => {
     });
 
     it('should add click handler if specified in configuration', () => {
-        const data = [{ name: 'foo', dates: [new Date('2014-04-03')] }];
+        const data = [{ name: 'foo', data: [new Date('2014-04-03')] }];
 
         const clickSpy = jasmine.createSpy();
         const chart = d3.chart.eventDrops().eventClick(clickSpy);
@@ -22,7 +22,7 @@ describe('Drops drawer', () => {
     });
 
     it('should add hover handler if specified in configuration', () => {
-        const data = [{ name: 'foo', dates: [new Date('2014-04-03')] }];
+        const data = [{ name: 'foo', data: [new Date('2014-04-03')] }];
 
         const hoverSpy = jasmine.createSpy();
         const chart = d3.chart.eventDrops().eventHover(hoverSpy);
@@ -38,7 +38,7 @@ describe('Drops drawer', () => {
     });
 
     it('should set `cx` attribute to given scale `x`', () => {
-        const data = [{ name: 'foo', dates: [new Date('2014-04-03')] }];
+        const data = [{ name: 'foo', data: [new Date('2014-04-03')] }];
 
         const chart = d3.chart.eventDrops()
             .start(new Date('2014-04-02'))

test/karma/eventDrops.js

@@ -3,7 +3,7 @@ require('../../lib/eventDrops');
 describe('d3.chart.eventDrops', () => {
     it('should append a SVG element to given selection', () => {
         const div = document.createElement('div');
-        const data = [{ name: 'foo', dates: [] }];
+        const data = [{ name: 'foo', data: [] }];
 
         const chart = d3.chart.eventDrops();
         d3.select(div).datum(data).call(chart);
@@ -13,7 +13,7 @@ describe('d3.chart.eventDrops', () => {
 
     it('should remove all previously created charts in current selection to prevent duplicates', () => {
         const div = document.createElement('div');
-        const data = [{ name: 'foo', dates: [] }];
+        const data = [{ name: 'foo', data: [] }];
 
         const chart = d3.chart.eventDrops();
         d3.select(div).datum(data).call(chart);
@@ -25,7 +25,7 @@ describe('d3.chart.eventDrops', () => {
     describe('start period', () => {
         it('should be configurable', () => {
             const div = document.createElement('div');
-            const data = [{ name: 'foo', dates: [] }];
+            const data = [{ name: 'foo', data: [] }];
 
             const chart = d3.chart.eventDrops().start(new Date('2010-01-25'));
             d3.select(div).datum(data).call(chart);
@@ -37,9 +37,9 @@ describe('d3.chart.eventDrops', () => {
     it('should have as many lines as events', () => {
         const div = document.createElement('div');
         const data = [
-            { name: 'foo', dates: [] },
-            { name: 'bar', dates: [] },
-            { name: 'quz', dates: [] },
+            { name: 'foo', data: [] },
+            { name: 'bar', data: [] },
+            { name: 'quz', data: [] },
         ];
 
         const chart = d3.chart.eventDrops().start(new Date('2010-01-25'));
@@ -51,9 +51,9 @@ describe('d3.chart.eventDrops', () => {
     it('should have as many drops as given dates', () => {
         const div = document.createElement('div');
         const data = [
-            { name: 'foo', dates: [new Date('2010-01-01')] },
-            { name: 'bar', dates: [] },
-            { name: 'quz', dates: [new Date('2011-01-04'), new Date('2012-08-09')] },
+            { name: 'foo', data: [new Date('2010-01-01')] },
+            { name: 'bar', data: [] },
+            { name: 'quz', data: [new Date('2011-01-04'), new Date('2012-08-09')] },
         ];
 
         const chart = d3.chart.eventDrops().start(new Date('2010-01-25'));
@@ -64,7 +64,7 @@ describe('d3.chart.eventDrops', () => {
 
     it('should enable zoom only if `zoomable` configuration property is true', () => {
         const zoom = require('../../lib/zoom');
-        const data = [ { name: 'foo', dates: [new Date()] }];
+        const data = [ { name: 'foo', data: [new Date()] }];
 
         const test = (zoomable, expectedZoomableBehavior) => {
             zoom.default = jasmine.createSpy();
@@ -80,4 +80,18 @@ describe('d3.chart.eventDrops', () => {
         test(false, false);
         test(true, true);
     });
+
+    it('should be possible to supply objects as data', () => {
+        const div = document.createElement('div');
+        const data = [
+            { name: 'foo', data: [{date: new Date('2010-01-01'), foo: 'bar1'}]},
+            { name: 'bar', data: [] },
+            { name: 'quz', data: [{date: new Date('2011-01-04'), foo: 'bar2'},
+                                {date: new Date('2012-08-09'), foo: 'bar3'}]}];
+
+        const chart = d3.chart.eventDrops().date(d => d.date).start(new Date('2010-01-25'));
+        d3.select(div).datum(data).call(chart);
+
+        expect(div.querySelectorAll('.drop').length).toBe(3);
+    });
 });