Merge branch 'master' into master-dist

demo/script.js

@@ -16,8 +16,8 @@ const ONE_HOUR = 60 * 60 * 1000,
       SIX_MONTHS = 6 * ONE_MONTH;
 
 var data = [],
-  start = new Date('2016-04-14T04:25:27.663Z'),
-  today = new Date('2016-05-03T04:00:00Z');
+  start = new Date('2016-04-02T20:14:22.691Z'),
+  today = new Date('2016-05-02T17:59:06.134Z');
 
 for (var x in json) { //json lives in external file for testing
   data[x] = {};
@@ -103,7 +103,6 @@ $('#datepicker').datepicker('setDate', today);
 $('#datepicker').on('changeDate', zoomFilter);
 
 $( document.body ).on( 'click', '.dropdown-menu li', function( event ) {
-
   var $target = $( event.currentTarget );
     $target.closest( '.dropdown' )
       .find( '[data-bind="label"]' ).text( $target.text() )
@@ -113,7 +112,6 @@ $( document.body ).on( 'click', '.dropdown-menu li', function( event ) {
     zoomFilter();
 
     return false;
-
   });
 
 function countNames(data) {
@@ -175,5 +173,4 @@ $('#reset-button').click(function() {
     'container': '#pf-timeline',
     'placement': 'top'
   });
-
 });

src/config.js

@@ -3,6 +3,8 @@ import d3 from 'd3';
 const config = {
   start: new Date(0),
   end: new Date(),
+  contextStart: null,
+  contextEnd: null,
   minScale: 0,
   maxScale: Infinity,
   width: null,

src/drawer/axes.js

@@ -2,11 +2,11 @@ import xAxis from '../xAxis';
 
 export default (axesContainer, scales, configuration, dimensions) => data => {
   const axis = (scope, scale) => {
-    const selection = axesContainer.selectAll(`.pf-timeline__x-axis.${scope}`).data([{}]);
+    const selection = axesContainer.selectAll(`.timeline-pf-x-axis.${scope}`).data([{}]);
 
     selection.enter()
       .append('g')
-      .classed('pf-timeline__x-axis', true)
+      .classed('timeline-pf-x-axis', true)
       .classed(scope, true)
       .call(xAxis(scale, configuration))
       .attr('transform', `translate(0,${scope === 'focus' ? dimensions.height : dimensions.height + dimensions.ctxHeight + 40})`);

src/drawer/context.js

@@ -3,10 +3,10 @@ import d3 from 'd3';
 export default (svg, scales, dimensions, configuration, data) => {
 
   const contextContainer = svg.append("g")
-    .classed('pf-timeline__context', true)
+    .classed('timeline-pf-context', true)
     .attr('width', dimensions.width)
     .attr('height', dimensions.ctxHeight)
-    .attr('clip-path', 'url(#pf-timeline__context-brush-clipper)')
+    .attr('clip-path', 'url(#timeline-pf-context-brush-clipper)')
     .attr("transform", `translate(${configuration.padding.left + configuration.labelWidth},${configuration.padding.top + dimensions.height + 40})`);
 
   let counts = [];
@@ -25,17 +25,17 @@ export default (svg, scales, dimensions, configuration, data) => {
   });
   scales.cty.domain([0, d3.max(counts, (d) => {return d.count;})]);
 
-  contextContainer.selectAll(".pf-timeline__bar")
+  contextContainer.selectAll(".timeline-pf-bar")
         .data(counts)
         .enter().append("rect")
-          .attr("class", "pf-timeline__bar")
+          .attr("class", "timeline-pf-bar")
           .attr("x", d => {return scales.ctx(d.date); })
           .attr("y", d => {return scales.cty(d.count); })
           .attr("width", barWidth)
           .attr("height", d => { return dimensions.ctxHeight - scales.cty(d.count); });
 
   contextContainer.append("g")
-    .attr("class", "pf-timeline__brush");
+    .attr("class", "timeline-pf-brush");
 
 };
 

src/drawer/drops.js

@@ -1,22 +1,22 @@
 export default (svg, scales, configuration) => function dropsSelector(data) {
-  const dropLines = svg.selectAll('.pf-timeline__drop-line').data(data);
+  const dropLines = svg.selectAll('.timeline-pf-drop-line').data(data);
 
   dropLines.enter()
     .append('g')
-    .classed('pf-timeline__drop-line', true)
+    .classed('timeline-pf-drop-line', true)
     .attr('transform', (d, idx) => `translate(0, ${scales.y(idx) + (configuration.lineHeight/2)})`)
     .attr('fill', configuration.eventLineColor);
 
   dropLines.each(function dropLineDraw(drop) {
 
-    const drops = d3.select(this).selectAll('.pf-timeline__drop').data(drop.data);
+    const drops = d3.select(this).selectAll('.timeline-pf-drop').data(drop.data);
 
     drops.attr('transform', (d) => `translate(${scales.x(d.date)})`);
 
     const shape = drops.enter()
         .append('text')
-          .classed('pf-timeline__drop', true)
-          .classed('pf-timeline__event-group', (d) => {return d.hasOwnProperty("events") ? true : false})
+          .classed('timeline-pf-drop', true)
+          .classed('timeline-pf-event-group', (d) => {return d.hasOwnProperty("events") ? true : false})
           .attr('transform', (d) => `translate(${scales.x(d.date)})`)
           .attr('fill', configuration.eventColor)
           .attr('text-anchor', 'middle')

src/drawer/index.js

@@ -7,24 +7,24 @@ import markerFactory from './marker';
 export default (svg, dimensions, scales, configuration) => {
   const defs = svg.append('defs');
   defs.append('clipPath')
-    .attr('id', 'pf-timeline__drops-container-clipper')
+    .attr('id', 'timeline-pf-drops-container-clipper')
     .append('rect')
-      .attr('id', 'pf-timeline__drops-container-rect')
+      .attr('id', 'timeline-pf-drops-container-rect')
       .attr('x', 0)
       .attr('y', 0)
       .attr('width', dimensions.width)
       .attr('height', dimensions.height);
 
   if(configuration.context) {
     defs.append('clipPath')
-      .attr('id', 'pf-timeline__context-brush-clipper')
+      .attr('id', 'timeline-pf-context-brush-clipper')
       .append('polygon')
         .attr('points', `0,0 ${dimensions.width},0 ${dimensions.width + configuration.sliderWidth},${dimensions.ctxHeight/2} ${dimensions.width},${dimensions.ctxHeight} 0,${dimensions.ctxHeight} ${-configuration.sliderWidth},${dimensions.ctxHeight/2}`);
   }
 
   const pattern = defs.append('pattern')
-    .attr('class', 'pf-timeline__grid-stripes')
-    .attr('id', 'pf-timeline__grid-stripes')
+    .attr('class', 'timeline-pf-grid-stripes')
+    .attr('id', 'timeline-pf-grid-stripes')
     .attr('width', dimensions.width)
     .attr('height', (configuration.lineHeight) * 2)
     .attr('patternUnits', 'userSpaceOnUse');
@@ -43,26 +43,26 @@ export default (svg, dimensions, scales, configuration) => {
     .attr('y2', '1px');
 
   const gridContainer = svg.append('g')
-    .classed('pf-timeline__grid', true)
-    .attr('fill', 'url(#pf-timeline__grid-stripes)')
+    .classed('timeline-pf-grid', true)
+    .attr('fill', 'url(#timeline-pf-grid-stripes)')
     .attr('transform', `translate(${configuration.padding.left + configuration.labelWidth}, ${configuration.padding.top})`);
 
   const labelsContainer = svg.append('g')
-    .classed('pf-timeline__labels', true)
+    .classed('timeline-pf-labels', true)
     .attr('transform', `translate(${configuration.padding.left}, ${configuration.padding.top})`);
 
   const axesContainer = svg.append('g')
-    .classed('pf-timeline__axes', true)
+    .classed('timeline-pf-axes', true)
     .attr('transform', `translate(${configuration.padding.left + configuration.labelWidth},  ${configuration.padding.top})`);
 
   const dropsContainer = svg.append('g')
-    .classed('pf-timeline__drops-container', true)
-    .attr('clip-path', 'url(#pf-timeline__drops-container-clipper)')
+    .classed('timeline-pf-drops-container', true)
+    .attr('clip-path', 'url(#timeline-pf-drops-container-clipper)')
     .attr('transform', `translate(${configuration.padding.left + configuration.labelWidth},  ${configuration.padding.top})`);
 
   if (configuration.marker) {
     const stampContainer = svg.append('g')
-      .classed('pf-timeline__timestamp', true)
+      .classed('timeline-pf-timestamp', true)
       .attr('height', 30)
       .attr('transform', `translate(${configuration.padding.left + configuration.labelWidth}, ${configuration.padding.top})`);
 

src/drawer/labels.js

@@ -1,5 +1,5 @@
 export default (container, scales, config) => data => {
-  const labels = container.selectAll('.pf-timeline__label').data(data);
+  const labels = container.selectAll('.timeline-pf-label').data(data);
 
   const countEvents = data => {
     let count = 0;
@@ -24,7 +24,7 @@ export default (container, scales, config) => data => {
 
   labels.enter()
     .append('text')
-      .classed('pf-timeline__label', true)
+      .classed('timeline-pf-label', true)
       .attr('transform', (d, idx) => `translate(${config.labelWidth - 20} ${scales.y(idx) + (config.lineHeight/2)})`)
       .attr('dominant-baseline', 'central')
       .attr('text-anchor', 'end')

src/drawer/line.js

@@ -6,7 +6,7 @@ export const line = (svg, xScale, yScale, data, eventColor = '#000') => {
 
   dropElements.enter()
     .append('g')
-      .classed('pf-timeline__line', true)
+      .classed('timeline-pf-line', true)
       .attr('transform', (d) => `translate(0, ${yScale(d.name)})`)
       .call(drops(xScale, eventColor));
 

src/drawer/marker.js

@@ -18,7 +18,7 @@ export default (gridContainer, stampContainer, scales, dimensions, dateFormat) =
 
 
   var marker = gridContainer.append('line')
-    .classed('pf-timeline__marker', true)
+    .classed('timeline-pf-marker', true)
     .attr('y1', 0)
     .attr('y2', dimensions.height);
 

src/timeline.js

@@ -30,9 +30,11 @@ function timeline(config = {}) {
       data = groupEvents(data, finalConfiguration.eventGrouping);
 
       finalConfiguration.lineHeight = (data.length <= 3) ? 80 : 40;
+      finalConfiguration.contextStart = finalConfiguration.contextStart || d3.min(getDates(data));
+      finalConfiguration.contextEnd = finalConfiguration.contextEnd || finalConfiguration.end;
 
-      d3.select(this).select('.pf-timeline__chart').remove();
-      d3.select(this).selectAll('.pf-timeline__zoom').remove();
+      d3.select(this).select('.timeline-pf-chart').remove();
+      d3.select(this).selectAll('.timeline-pf-zoom').remove();
 
       const SCALEHEIGHT = 40;
       let outer_width = finalConfiguration.width || selection.node().clientWidth;
@@ -47,12 +49,12 @@ function timeline(config = {}) {
       const scales = {
         x: xScale(dimensions.width, [finalConfiguration.start, finalConfiguration.end]),
         y: yScale(data),
-        ctx: xScale(dimensions.width, [d3.min(getDates(data)), finalConfiguration.end]),
+        ctx: xScale(dimensions.width, [finalConfiguration.contextStart, finalConfiguration.contextEnd]),
         cty: d3.scale.linear().range([dimensions.ctxHeight, 0])
       };
 
       const svg = d3.select(this).append('svg')
-        .classed('pf-timeline__chart', true)
+        .classed('timeline-pf-chart', true)
         .attr({
           width: outer_width,
           height: dimensions.outer_height,

src/zoom.js

@@ -12,7 +12,7 @@ export default class zoom {
     this.ONE_WEEK = this.ONE_DAY * 7;
     this.ONE_MONTH = this.ONE_DAY * 30;
 
-    this.grid = d3.select('.pf-timeline__grid');
+    this.grid = d3.select('.timeline-pf-grid');
     this.dimensions = dimensions;
     this.scales = scales;
     this.configuration = configuration;
@@ -31,38 +31,39 @@ export default class zoom {
     if (configuration.slider) {
       const zoomIn = container.append('button')
           .attr('type', 'button')
-          .attr('class', 'btn btn-default pf-timeline__zoom pf-timeline__zoom-in')
-          .attr('id', 'pf-timeline__zoom-in')
+          .attr('class', 'btn btn-default timeline-pf-zoom timeline-pf-zoom-in')
+          .attr('id', 'timeline-pf-zoom-in')
           .style('top', `${configuration.padding.top}px`)
           .style('right', `${configuration.padding.right}px`)
           .on('click', () => {this.zoomClick()});
       zoomIn.append('i')
           .attr('class', 'fa fa-plus')
-          .attr('id', 'pf-timeline__zoom-in-icon');
+          .attr('id', 'timeline-pf-zoom-in-icon');
 
       const zoomOut = container.append('button')
           .attr('type', 'button')
-          .attr('class', 'btn btn-default pf-timeline__zoom')
-          .attr('id', 'pf-timeline__zoom-out')
+          .attr('class', 'btn btn-default timeline-pf-zoom')
+          .attr('id', 'timeline-pf-zoom-out')
           .style('top', `${configuration.padding.top + dimensions.height - 26}px`)
           .style('right', `${configuration.padding.right}px`)
           .on('click', () => {this.zoomClick()});
       zoomOut.append('i')
         .attr('class', 'fa fa-minus')
-        .attr('id', 'pf-timeline__zoom-out-icon');
+        .attr('id', 'timeline-pf-zoom-out-icon');
 
       const zoomSlider = container.append('input')
           .attr('type', 'range')
-          .attr('class', 'pf-timeline__zoom pf-timeline__slider')
-          .attr('id', 'pf-timeline__slider')
+          .attr('class', 'timeline-pf-zoom timeline-pf-slider')
+          .attr('id', 'timeline-pf-slider')
           .style('width', `${dimensions.height - (zoomIn.node().offsetHeight * 2)}px`)
-          .style('top', `${configuration.padding.top + ((dimensions.height - (zoomIn.node().offsetHeight) * 2) / 2) + zoomIn.node().offsetHeight - 7}px`)
-          .style('right', `${configuration.padding.right - (dimensions.height - zoomIn.node().offsetHeight) / 2 + zoomIn.node().offsetWidth}px`)
           .attr('value', this.sliderScale(this.zoom.scale()))
           .attr('min', configuration.minScale)
           .attr('max', configuration.maxScale)
           .attr('step', 0.1)
           .on('input', () => {this.zoomClick()});
+      zoomSlider
+        .style('top', `${configuration.padding.top + ((dimensions.height - (zoomIn.node().offsetHeight) * 2) / 2) + zoomIn.node().offsetHeight - (zoomSlider.node().offsetHeight / 2)}px`)
+        .style('left', `${configuration.padding.left + configuration.labelWidth + dimensions.width + (configuration.sliderWidth - (zoomIn.node().offsetWidth / 2)) - (zoomSlider.node().offsetWidth / 2)}px`);
     }
 
     if(configuration.context) {
@@ -71,7 +72,7 @@ export default class zoom {
         .extent(scales.x.domain())
         .on("brush", () => {this.brushed()});
 
-      container.select('.pf-timeline__brush')
+      container.select('.timeline-pf-brush')
         .call(this.brush)
         .selectAll("rect")
           .attr("height", dimensions.ctxHeight);
@@ -85,11 +86,11 @@ export default class zoom {
     this.zoom.on('zoom', () => {
       requestAnimationFrame(() => callback(data));
       if(configuration.slider) {
-        container.select('#pf-timeline__slider').property('value', this.sliderScale(this.zoom.scale()));
+        container.select('#timeline-pf-slider').property('value', this.sliderScale(this.zoom.scale()));
       }
       if(configuration.context) {
         this.brush.extent(this.scales.x.domain());
-        container.select('.pf-timeline__brush').call(this.brush);
+        container.select('.timeline-pf-brush').call(this.brush);
       }
     });
     return this.grid.call(this.zoom)
@@ -116,17 +117,17 @@ export default class zoom {
         k: this.zoom.scale()
       };
     switch (d3.event.target.id) {
-      case 'pf-timeline__zoom-in-icon':
-      case 'pf-timeline__zoom-in':
+      case 'timeline-pf-zoom-in-icon':
+      case 'timeline-pf-zoom-in':
         target_zoom = this.zoom.scale() * (1 + factor);
         duration = 100;
         break;
-      case 'pf-timeline__zoom-out-icon':
-      case 'pf-timeline__zoom-out':
+      case 'timeline-pf-zoom-out-icon':
+      case 'timeline-pf-zoom-out':
         target_zoom = this.zoom.scale() * (1 + factor * -1);
         duration = 100;
         break;
-      case 'pf-timeline__slider':
+      case 'timeline-pf-slider':
         target_zoom = this.sliderScale.invert(d3.event.target.value);
         break;
       default: