event-drops - npm Package Compare versions

Comparing version 0.2.0 to 0.3.0-alpha1

dist/eventDrops.js

@@ -1,2 +0,2 @@
-!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e(require("d3")):"function"==typeof define&&define.amd?define(["d3"],e):"object"==typeof exports?exports.eventDrops=e(require("d3")):t.eventDrops=e(t.d3)}(this,function(t){return function(t){function e(n){if(r[n])return r[n].exports;var a=r[n]={exports:{},id:n,loaded:!1};return t[n].call(a.exports,a,a.exports,e),a.loaded=!0,a.exports}var r={};return e.m=t,e.c=r,e.p="",e(0)}([function(t,e,r){r(12),t.exports=r(16)},function(e,r){e.exports=t},function(t,e){"use strict";function r(){var t=arguments.length<=0||void 0===arguments[0]?[]:arguments[0],e=arguments[1],r=e.domain(),a=n(r,2),o=a[0],i=a[1];return t.filter(function(t){return t>=o&&i>=t})}Object.defineProperty(e,"__esModule",{value:!0});var n=function(){function t(t,e){var r=[],n=!0,a=!1,o=void 0;try{for(var i,u=t[Symbol.iterator]();!(n=(i=u.next()).done)&&(r.push(i.value),!e||r.length!==e);n=!0);}catch(l){a=!0,o=l}finally{try{!n&&u["return"]&&u["return"]()}finally{if(a)throw o}}return r}return function(e,r){if(Array.isArray(e))return e;if(Symbol.iterator in Object(e))return t(e,r);throw new TypeError("Invalid attempt to destructure non-iterable instance")}}();e["default"]=r},function(t,e,r){"use strict";function n(t){return t&&t.__esModule?t:{"default":t}}Object.defineProperty(e,"__esModule",{value:!0}),e["default"]=function(t,e,r){var n=e.tickFormat.map(function(t){return t.slice(0)}),a=e.locale?e.locale.timeFormat.multi(n):o["default"].time.format.multi(n),i=o["default"].svg.axis().scale(t).orient(r).tickFormat(a);return"function"==typeof e.axisFormat&&e.axisFormat(i),i};var a=r(1),o=n(a)},function(t,e,r){"use strict";function n(t){return t&&t.__esModule?t:{"default":t}}var a=r(1),o=n(a),i={lineHeight:45,start:new Date(0),end:new Date,minScale:0,maxScale:1/0,width:1e3,margin:{top:60,left:200,bottom:40,right:50},locale:null,axisFormat:null,tickFormat:[[".%L",function(t){return t.getMilliseconds()}],[":%S",function(t){return t.getSeconds()}],["%I:%M",function(t){return t.getMinutes()}],["%I %p",function(t){return t.getHours()}],["%a %d",function(t){return t.getDay()&&1!==t.getDate()}],["%b %d",function(t){return 1!==t.getDate()}],["%B",function(t){return t.getMonth()}],["%Y",function(){return!0}]],eventHover:null,eventZoom:null,eventClick:null,hasDelimiter:!0,hasTopAxis:!0,hasBottomAxis:function(t){return t.length>=10},eventLineColor:"black",eventColor:null,metaballs:!0,zoomable:!0};i.dateFormat=i.locale?i.locale.timeFormat("%d %B %Y"):o["default"].time.format("%d %B %Y"),t.exports=i},function(t,e,r){"use strict";function n(t){return t&&t.__esModule?t:{"default":t}}Object.defineProperty(e,"__esModule",{value:!0});var a=r(3),o=n(a),i=(r(11),function(t,e){return"function"==typeof t?t(e):t});e["default"]=function(t,e,r,n){return function(a){var u=function(a){var i=t.selectAll(".x-axis."+a).data([{}]);i.enter().append("g").classed("x-axis",!0).classed(a,!0).call(o["default"](e.x,r,a)).attr("transform","translate(0,"+("bottom"===a?n.height+5:0)+")"),i.call(o["default"](e.x,r,a)),i.exit().remove()};i(r.hasTopAxis,a)&&u("top"),i(r.hasBottomAxis,a)&&u("bottom")}}},function(t,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0});e.delimiters=function(t,e,r){var n=t.select(".extremum");n.selectAll(".minimum").remove(),n.selectAll(".maximum").remove();var a=e.x.domain();n.append("text").text(r(a[0])).classed("minimum",!0),n.append("text").text(r(a[1])).classed("maximum",!0).attr("transform","translate("+(e.x.range()[1]-200)+")").attr("text-anchor","end")}},function(t,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e["default"]=function(t,e,r){return function(n){var a=t.selectAll(".drop-line").data(n);a.enter().append("g").classed("drop-line",!0).attr("transform",function(t,n){return"translate(10, "+(40+r.lineHeight+e.y(n))+")"}).attr("fill",r.eventLineColor),a.each(function(t){var n=d3.select(this).selectAll(".drop").data(t.dates);n.attr("cx",function(t){return e.x(t)+200});var a=n.enter().append("circle").classed("drop",!0).attr("r",5).attr("cx",function(t){return e.x(t)+200}).attr("cy",-5).attr("fill",r.eventColor);r.eventClick&&a.on("click",r.eventClick),r.eventHover&&a.on("mouseover",r.eventHover),n.exit().on("click",null).on("mouseover",null),n.exit().remove()}),a.exit().remove()}}},function(t,e,r){"use strict";function n(t){return t&&t.__esModule?t:{"default":t}}Object.defineProperty(e,"__esModule",{value:!0});var a=r(1),o=(n(a),r(6)),i=r(2),u=(n(i),r(13)),l=r(5),s=n(l),c=r(7),d=n(c),f=r(9),m=n(f),p=r(10),v=n(p);e["default"]=function(t,e,r,n){var a=t.append("defs");a.append("clipPath").attr("id","drops-container-clipper").append("rect").attr("id","drops-container-rect").attr("x",n.margin.left+10).attr("y",0).attr("width",e.width).attr("height",e.outer_height);var i=t.append("g").classed("labels",!0).attr("transform","translate(0, 45)"),l=t.append("g").classed("axes",!0).attr("transform","translate(210, 55)"),c=t.append("g").classed("drops-container",!0).attr("clip-path","url(#drops-container-clipper)").style("filter","url(#metaballs)");t.append("g").classed("extremum",!0).attr("width",e.width).attr("height",30).attr("transform","translate("+n.margin.left+", "+(n.margin.top-45)+")");n.metaballs&&u.metaballs(a);var f=v["default"](l,r,n,e),p=s["default"](l,r,n,e),h=m["default"](i,r,n),x=d["default"](c,r,n);return function(e){f(e),o.delimiters(t,r,n.dateFormat),x(e),h(e),p(e)}}},function(t,e,r){"use strict";function n(t){return t&&t.__esModule?t:{"default":t}}Object.defineProperty(e,"__esModule",{value:!0});var a=r(2),o=n(a);e["default"]=function(t,e,r){return function(r){var n=t.selectAll(".label").data(r),a=function(t){var r=o["default"](t.dates,e.x).length;return t.name+(r>0?" ("+r+")":"")};n.text(a),n.enter().append("text").classed("label",!0).attr("x",180).attr("transform",function(t,r){return"translate(0, "+(40+e.y(r))+")"}).attr("text-anchor","end").text(a),n.exit().remove()}}},function(t,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e["default"]=function(t,e,r,n){return function(a){var o=t.selectAll(".line-separator").data(a);o.enter().append("g").classed("line-separator",!0).attr("transform",function(t,n){return"translate(0, "+(e.y(n)+r.lineHeight)+")"}).append("line").attr("x1",0).attr("x2",n.width),o.exit().remove()}}},function(t,e,r){"use strict";function n(t){return t&&t.__esModule?t:{"default":t}}Object.defineProperty(e,"__esModule",{value:!0}),e.drawBottomAxis=e.drawTopAxis=void 0;var a=r(3),o=n(a),i=function(t,e,r,n,a){t.append("g").classed("x-axis",!0).classed(n,!0).attr("transform","translate("+r.margin.left+", "+a+")").call(o["default"](e,r,n))};e.drawTopAxis=function(t,e,r,n){return i(t,e,r,"top",r.margin.top-40)},e.drawBottomAxis=function(t,e,r,n){return i(t,e,r,"bottom",+n.height-21)}},function(t,e,r){"use strict";function n(t){return t&&t.__esModule?t:{"default":t}}function a(){function t(t){t.each(function(e){u["default"].select(this).select(".event-drops-chart").remove();var o=40*e.length,i={width:r.width-r.margin.right-r.margin.left,height:o,outer_height:o+r.margin.top+r.margin.bottom},l={x:a(i.width,[r.start,r.end]),y:n(e)},s=u["default"].select(this).append("svg").classed("event-drops-chart",!0).attr({width:i.width,height:i.outer_height}),c=m["default"](s,i,l,r).bind(t);c(e),r.zoomable&&v["default"](u["default"].select(this),i,l,r,e,c)})}var e=arguments.length<=0||void 0===arguments[0]?{}:arguments[0],r=o({},d["default"],e),n=function(t){var e=u["default"].scale.ordinal();return e.domain(t.map(function(t){return t.name})).range(t.map(function(t,e){return 40*e}))},a=function(t,e){return u["default"].time.scale().range([0,t]).domain(e)};return s["default"](t,r),t}var o=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var r=arguments[e];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(t[n]=r[n])}return t},i=r(1),u=n(i),l=r(15),s=n(l),c=r(4),d=n(c),f=r(8),m=n(f),p=r(14),v=n(p);u["default"].chart=u["default"].chart||{},u["default"].chart.eventDrops=a,t.exports=a},function(t,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0});e.metaballs=function(t){var e=t.append("filter");return e.attr("id","metaballs"),e.append("feGaussianBlur").attr("in","SourceGraphic").attr("stdDeviation",10).attr("result","blur"),e.append("feColorMatrix").attr("in","blur").attr("mode","matrix").attr("values","1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 50 -10").attr("result","contrast"),e.append("feBlend").attr("in","SourceGraphic").attr("in2","contrast"),e}},function(t,e,r){"use strict";function n(t){return t&&t.__esModule?t:{"default":t}}Object.defineProperty(e,"__esModule",{value:!0});var a=r(1),o=n(a);e["default"]=function(t,e,r,n,a,i){var u=o["default"].behavior.zoom().size([e.width,e.height]).scaleExtent([n.minScale,n.maxScale]).x(r.x).on("zoom",function(){requestAnimationFrame(function(){return i(a)})});return n.eventZoom&&u.on("zoomend",n.eventZoom),t.call(u)}},function(t,e,r){"use strict";function n(t,e){function r(r){return function(n){return arguments.length?(e[r]=n,t):e[r]}}for(var n in e)t[n]=r(n)}t.exports=n},function(t,e){}])});
+!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e(require("d3")):"function"==typeof define&&define.amd?define(["d3"],e):"object"==typeof exports?exports.eventDrops=e(require("d3")):t.eventDrops=e(t.d3)}(this,function(t){return function(t){function e(r){if(n[r])return n[r].exports;var a=n[r]={exports:{},id:r,loaded:!1};return t[r].call(a.exports,a,a.exports,e),a.loaded=!0,a.exports}var n={};return e.m=t,e.c=n,e.p="",e(0)}([function(t,e,n){n(9),t.exports=n(15)},function(e,n){e.exports=t},function(t,e,n){"use strict";function r(t){return t&&t.__esModule?t:{"default":t}}var a=n(1),o=r(a),i={lineHeight:40,start:new Date(0),end:new Date,minScale:0,maxScale:1/0,margin:{top:60,left:200,bottom:40,right:50},labelsWidth:210,labelsRightMargin:10,locale:null,axisFormat:null,tickFormat:[[".%L",function(t){return t.getMilliseconds()}],[":%S",function(t){return t.getSeconds()}],["%I:%M",function(t){return t.getMinutes()}],["%I %p",function(t){return t.getHours()}],["%a %d",function(t){return t.getDay()&&1!==t.getDate()}],["%b %d",function(t){return 1!==t.getDate()}],["%B",function(t){return t.getMonth()}],["%Y",function(){return!0}]],mouseout:function(){},mouseover:function(){},zoomend:function(){},click:function(){},hasDelimiter:!0,date:function(t){return t},hasTopAxis:!0,hasBottomAxis:function(t){return t.length>=10},eventLineColor:"black",eventColor:null,metaballs:!0,zoomable:!0};i.dateFormat=i.locale?i.locale.timeFormat("%d %B %Y"):o["default"].time.format("%d %B %Y"),t.exports=i},function(t,e,n){"use strict";function r(t){return t&&t.__esModule?t:{"default":t}}Object.defineProperty(e,"__esModule",{value:!0});var a=n(12),o=r(a),i=function(t,e){return"function"==typeof t?t(e):t};e["default"]=function(t,e,n,r){return function(a){var u=function(a){var i=t.selectAll(".x-axis."+a).data([{}]);i.enter().append("g").classed("x-axis",!0).classed(a,!0).call(o["default"](e.x,n,a)).attr("transform","translate(0,"+("bottom"===a?r.height:0)+")"),i.call(o["default"](e.x,n,a)),i.exit().remove()};i(n.hasTopAxis,a)&&u("top"),i(n.hasBottomAxis,a)&&u("bottom")}}},function(t,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0});e.delimiters=function(t,e,n,r){var a=t.select(".extremum");a.selectAll(".minimum").remove(),a.selectAll(".maximum").remove();var o=e.x.domain();a.append("text").text(r(o[0])).classed("minimum",!0),a.append("text").text(r(o[1])).classed("maximum",!0).attr("transform","translate("+(e.x.range()[1]-n)+")").attr("text-anchor","end")}},function(t,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e["default"]=function(t,e,n){return function(r){var a=t.selectAll(".drop-line").data(r);a.enter().append("g").classed("drop-line",!0).attr("transform",function(t,n){return"translate(10, "+e.y(n)+")"}).attr("fill",n.eventLineColor),a.each(function(t){var r=d3.select(this).selectAll(".drop").data(t.data);r.attr("cx",function(t){return e.x(n.date(t))});var a=r.enter().append("circle").classed("drop",!0).attr("r",5).attr("cx",function(t){return e.x(n.date(t))}).attr("cy",n.lineHeight/2).attr("fill",n.eventColor);a.on("click",n.click),a.on("mouseover",n.mouseover),a.on("mouseout",n.mouseout),r.exit().on("click",null).on("mouseout",null).on("mouseover",null).remove()}),a.exit().remove()}}},function(t,e,n){"use strict";function r(t){return t&&t.__esModule?t:{"default":t}}Object.defineProperty(e,"__esModule",{value:!0});var a=n(4),o=n(11),i=n(3),u=r(i),l=n(5),s=r(l),c=n(7),d=r(c),f=n(8),m=r(f);e["default"]=function(t,e,n,r){var i=t.append("defs");i.append("clipPath").attr("id","drops-container-clipper").append("rect").attr("id","drops-container-rect").attr("width",e.width).attr("height",e.height+r.margin.top+r.margin.bottom);var l=t.append("g").classed("labels",!0).attr("transform","translate(0, "+r.lineHeight+")"),c=t.append("g").attr({"class":"chart-wrapper",transform:"translate("+(r.labelsWidth+r.labelsRightMargin)+", 55)"}),f=c.append("g").classed("axes",!0),p=c.append("g").classed("drops-container",!0).attr("clip-path","url(#drops-container-clipper)").style("filter","url(#metaballs)");c.append("g").classed("extremum",!0).attr("width",e.width).attr("height",30).attr("transform","translate(0, -35)"),r.metaballs&&o.metaballs(i);var h=m["default"](f,n,r,e),v=u["default"](f,n,r,e),g=d["default"](l,n,r),x=s["default"](p,n,r);return function(e){h(e),a.delimiters(t,n,r.labelsWidth+r.labelsRightMargin,r.dateFormat),x(e),g(e,r),v(e)}}},function(t,e,n){"use strict";function r(t){return t&&t.__esModule?t:{"default":t}}Object.defineProperty(e,"__esModule",{value:!0});var a=n(10),o=r(a);e["default"]=function(t,e,n){return function(r){var a=t.selectAll(".label").data(r),i=function(t){var n=o["default"](t.data,e.x).length;return t.name+(n>0?" ("+n+")":"")};a.text(i),a.enter().append("text").classed("label",!0).attr("x",n.labelsWidth).attr("transform",function(t,n){return"translate(0, "+(40+e.y(n))+")"}).attr("text-anchor","end").text(i),a.exit().remove()}}},function(t,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e["default"]=function(t,e,n,r){return function(a){var o=t.selectAll(".line-separator").data(a);o.enter().append("g").classed("line-separator",!0).attr("transform",function(t,r){return"translate(0, "+(e.y(r)+n.lineHeight)+")"}).append("line").attr("x1",0).attr("x2",r.width),o.exit().remove()}}},function(t,e,n){"use strict";function r(t){return t&&t.__esModule?t:{"default":t}}function a(){function t(t){t.each(function(e){u["default"].select(this).select(".event-drops-chart").remove();var o={width:this.clientWidth,height:e.length*n.lineHeight},i={x:a(o.width,[n.start,n.end]),y:r(e)},l=u["default"].select(this).append("svg").classed("event-drops-chart",!0).attr({width:o.width,height:o.height+n.margin.top+n.margin.bottom}),s=m["default"](l,o,i,n).bind(t);s(e),n.zoomable&&h["default"](u["default"].select(this),o,i,n,e,s)})}var e=arguments.length<=0||void 0===arguments[0]?{}:arguments[0],n=o({},d["default"],e),r=function(t){var e=u["default"].scale.ordinal();return e.domain(t.map(function(t){return t.name})).range(t.map(function(t,e){return e*n.lineHeight}))},a=function(t,e){return u["default"].time.scale().range([0,t]).domain(e)};return s["default"](t,n),t}var o=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(t[r]=n[r])}return t},i=n(1),u=r(i),l=n(14),s=r(l),c=n(2),d=r(c),f=n(6),m=r(f),p=n(13),h=r(p);u["default"].chart=u["default"].chart||{},u["default"].chart.eventDrops=a,t.exports=a},function(t,e){"use strict";function n(){var t=arguments.length<=0||void 0===arguments[0]?[]:arguments[0],e=arguments[1],n=e.domain(),a=r(n,2),o=a[0],i=a[1];return t.filter(function(t){return t>=o&&i>=t})}Object.defineProperty(e,"__esModule",{value:!0});var r=function(){function t(t,e){var n=[],r=!0,a=!1,o=void 0;try{for(var i,u=t[Symbol.iterator]();!(r=(i=u.next()).done)&&(n.push(i.value),!e||n.length!==e);r=!0);}catch(l){a=!0,o=l}finally{try{!r&&u["return"]&&u["return"]()}finally{if(a)throw o}}return n}return function(e,n){if(Array.isArray(e))return e;if(Symbol.iterator in Object(e))return t(e,n);throw new TypeError("Invalid attempt to destructure non-iterable instance")}}();e["default"]=n},function(t,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0});e.metaballs=function(t){var e=t.append("filter");return e.attr("id","metaballs"),e.append("feGaussianBlur").attr("in","SourceGraphic").attr("stdDeviation",10).attr("result","blur"),e.append("feColorMatrix").attr("in","blur").attr("mode","matrix").attr("values","1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 50 -10").attr("result","contrast"),e.append("feBlend").attr("in","SourceGraphic").attr("in2","contrast"),e}},function(t,e,n){"use strict";function r(t){return t&&t.__esModule?t:{"default":t}}Object.defineProperty(e,"__esModule",{value:!0}),e["default"]=function(t,e,n){var r=e.tickFormat.map(function(t){return t.slice(0)}),a=e.locale?e.locale.timeFormat.multi(r):o["default"].time.format.multi(r),i=o["default"].svg.axis().scale(t).orient(n).tickFormat(a);return"function"==typeof e.axisFormat&&e.axisFormat(i),i};var a=n(1),o=r(a)},function(t,e,n){"use strict";function r(t){return t&&t.__esModule?t:{"default":t}}Object.defineProperty(e,"__esModule",{value:!0});var a=n(1),o=r(a);e["default"]=function(t,e,n,r,a,i){var u=o["default"].behavior.zoom().size([e.width,e.height]).scaleExtent([r.minScale,r.maxScale]).x(n.x).on("zoom",function(){requestAnimationFrame(function(){return i(a)})});return u.on("zoomend",r.zoomend),t.call(u)}},function(t,e,n){"use strict";function r(t,e){function n(n){return function(r){return arguments.length?(e[n]=r,t):e[n]}}for(var r in e)t[r]=n(r)}t.exports=r},function(t,e){}])});
 //# sourceMappingURL=eventDrops.js.map

package.json

 {
   "name": "event-drops",
-  "version": "0.2.0",
+  "version": "0.3.0-alpha1",
   "description": "A time based / event series interactive visualization using d3.js. Use drag and zoom to navigate in time.",
   "main": "dist/eventDrops.js",
+  "files": [
+      "dist/",
+      "style.css",
+      "*.md"
+  ],
   "repository": {
@@ -48,3 +53,10 @@ "type": "git",
   "scripts": {
-    "test": "mocha"
+    "prepublish": "make build",
+    "postpublish": "make deploy-demo",
+    "start": "webpack-dev-server --colors --devtool cheap-module-inline-source-map --host=0.0.0.0",
+    "karma": "karma start test/karma/karma.conf.js",
+    "test": "npm run karma -- --single-run",
+    "test-watch": "npm run karma",
+    "run": "npm start",
+    "build": "webpack -p --optimize-minimize --optimize-occurence-order --optimize-dedupe --progress --devtool source-map"
   },
@@ -51,0 +63,0 @@ "author": "Thiery Michel <[e-mail]>",

README.md

@@ -46,12 +46,37 @@ EventDrops
 
-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
@@ -71,18 +96,21 @@
   - `end`: end date of the scale. Defaults to `new Date()`
-  - `width`: width of the chart in pixels. Default to 1000px.
   - `margin`: margins of the graph in pixels. Defaults to `{ top: 60, left: 200, bottom: 40, right: 50 }`
   - `locale`: locale used for the X axis labels. See [d3.locale](https://github.com/mbostock/d3/wiki/Localization#locale) for the expected format. Defaults to null (i.e. d3 default locale).
+  - `labelsWidth`: width of the labels. Defaults to `210`.
+  - `labelsRightMargin`: margin between labels and drops lines. Defaults to `10`.
   - `axisFormat`: function receiving the d3 axis object, to customize tick number and size.
   - `tickFormat`: tickFormat for the X axis. See [d3.timeFormat.multi()](https://github.com/mbostock/d3/wiki/Time-Formatting#format_multi) for expected format.
-  - `eventHover`: function to be called when hovering an event in the chart. Receives the DOM element hovered (uses event delegation).
-  - `eventZoom`: function to be called when done zooming on the chart. Receives the d3 scale at the end of the zoom.
-  - `eventClick`: function to be called on click event of data-point (circle). Receives the DOM element hovered (uses event delegation).
-  - `hasDelimiter`: whether to draw time boundaries on top of the chart. Defaults to true.
+  - `mouseover`: function to be called when hovering an event in the chart. Receives the DOM element hovered (uses event delegation). Default: `() => {}`.
+  - `zoomend`: function to be called when done zooming on the chart. Receives the d3 scale at the end of the zoom. Default: `() => {}`.
+  - `click`: function to be called on click event of data-point (circle). Receives the DOM element hovered (uses event delegation). Default: `() => {}`.
+  - `hasDelimiter`: whether to draw time boundaries on top of the chart. Defaults to `true`.
   - `hasTopAxis`: whether the chart has a top X axis. Accepts both a boolean or a function receiving the data of the graph that returns a boolean.
   - `hasBottomAxis`: same as topAxis but for the bottom X axis
-  - `eventLineColor`: The color of the event line. Accepts a color (color name or `#ffffff` notation), or a function receiving the eventData and returning a color. Defaults to 'black'.
-  - `eventColor`: The color of the event. Accepts a color (color name or `#ffffff` notation), or a function receiving the eventData and returning a color. Defaults to null. EventLineColor will be ignored if this is used.
-  - `minScale`: The minimum scaling (zoom out), default to 0.
-  - `maxScale`: The maximum scaling (zoom in), default to Infinity.
+  - `eventLineColor`: The color of the event line. Accepts a color (color name or `#ffffff` notation), or a function receiving the eventData and returning a color. Defaults to `'black'`.
+  - `eventColor`: The color of the event. Accepts a color (color name or `#ffffff` notation), or a function receiving the eventData and returning a color. Defaults to `null`. EventLineColor will be ignored if this is used.
+  - `minScale`: The minimum scaling (zoom out), default to `0`.
+  - `maxScale`: The maximum scaling (zoom in), default to `Infinity`.
+  - `mouseout`: event handler to execute when mouse leave a drop. Default: `() => {}`.
   - `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`.
 
@@ -89,0 +117,0 @@ ## Styling

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Number of lines in readme file

154

increased by22.22%

Number of medium supply chain risk alerts

1

decreased by-50%

Worsened metrics

Total package byte prevSize

66422

decreased by-39.81%

Number of package files

9

decreased by-77.5%

Lines of code

65

decreased by-89.43%

No dependency changes