Feature/brush

addon/components/primer-axis/component.js

@@ -1,29 +1,24 @@
-import Component from 'ember-component';
-import {
-  axisTop,
-  axisRight,
-  axisBottom,
-  axisLeft
-} from 'd3-axis';
-import { select } from 'd3-selection';
-import run from 'ember-runloop';
+import Component from 'ember-component'
+import { axisTop, axisRight, axisBottom, axisLeft } from 'd3-axis'
+import { select } from 'd3-selection'
+import run from 'ember-runloop'
 
 const AXIS_MAP = {
   top: axisTop,
   right: axisRight,
   bottom: axisBottom,
-  left: axisLeft
-};
+  left: axisLeft,
+}
 
 function translateByOrientation(orientation, rect, offsetX, offsetY) {
   let [x, y] = {
-    'bottom': [0, rect.height],
-    'top': [0, 0],
-    'left': [0, 0],
-    'right': [rect.width, 0]
-  }[orientation];
+    bottom: [0, rect.height],
+    top: [0, 0],
+    left: [0, 0],
+    right: [rect.width, 0],
+  }[orientation]
 
-  return `translate(${x + offsetX},${y + offsetY})`;
+  return `translate(${x + offsetX},${y + offsetY})`
 }
 
 const AxisComponent = Component.extend({
@@ -94,44 +89,58 @@ const AxisComponent = Component.extend({
   offsetY: 0,
 
   didReceiveAttrs() {
-    run.scheduleOnce('render', this, this.drawAxis);
+    run.scheduleOnce('render', this, this.drawAxis)
   },
 
   drawAxis() {
     if (!this.element) {
-      return;
+      return
     }
-    let selection = select(this.element);
-
-    let rect = this.get('rect');
-
-    let { offsetX, offsetY } = this.getProperties('offsetX', 'offsetY');
-    let { scale, orientation, tickFormat, ticks, tickSizeInner, tickSizeOuter, tickValues }
-      = this.getProperties('scale', 'orientation', 'tickFormat', 'ticks', 'tickSizeInner', 'tickSizeOuter', 'tickValues');
-
-    let axis = this.createAxis(orientation, scale);
-
-    axis.tickFormat(tickFormat);
-    axis.tickSize(tickSizeInner, tickSizeOuter);
-    axis.tickValues(tickValues);
-    axis.scale(scale);
+    let selection = select(this.element)
+
+    let rect = this.get('rect')
+
+    let { offsetX, offsetY } = this.getProperties('offsetX', 'offsetY')
+    let {
+      scale,
+      orientation,
+      tickFormat,
+      ticks,
+      tickSizeInner,
+      tickSizeOuter,
+      tickValues,
+    } = this.getProperties(
+      'scale',
+      'orientation',
+      'tickFormat',
+      'ticks',
+      'tickSizeInner',
+      'tickSizeOuter',
+      'tickValues',
+    )
+
+    let axis = this.createAxis(orientation, scale)
+
+    axis.tickFormat(tickFormat)
+    axis.tickSize(tickSizeInner, tickSizeOuter)
+    axis.tickValues(tickValues)
+    axis.scale(scale)
 
     if (ticks) {
-      axis.ticks(ticks);
+      axis.ticks(ticks)
     }
 
-    selection.call(axis);
-    selection.attr('transform', translateByOrientation(orientation, rect, offsetX, offsetY));
+    selection.call(axis)
+    selection.attr('transform', translateByOrientation(orientation, rect, offsetX, offsetY))
   },
 
   createAxis(orient, scale) {
-    return AXIS_MAP[orient](scale);
-  }
-
-});
+    return AXIS_MAP[orient](scale)
+  },
+})
 
 AxisComponent.reopenClass({
-  positionalParams: ['orientation', 'scale']
-});
+  positionalParams: ['orientation', 'scale'],
+})
 
-export default AxisComponent;
+export default AxisComponent

addon/components/primer-brush-x/component.js

@@ -0,0 +1,55 @@
+import Component from '@ember/component'
+import computed from 'ember-computed'
+import run from 'ember-runloop'
+import layout from './template'
+
+import { brushX, brushSelection } from 'd3-brush'
+import { axisBottom } from 'd3-axis'
+import { select, event } from 'd3-selection'
+
+export default Component.extend({
+  layout,
+  tagName: 'g',
+  classNames: ['Primer-Brush-X'],
+
+  height: 10,
+
+  didReceiveAttrs() {
+    run.scheduleOnce('render', this, this.drawBrush)
+  },
+
+  tickFormat: null,
+
+  ticks: computed('rect.width', function() {
+    return this.get('ticks') || Math.floor(this.get('rect.width') / 100)
+  }),
+
+  drawBrush() {
+    let { xScale, rect, handleSize, selection } = this.getProperties(
+      'xScale',
+      'rect',
+      'handleSize',
+      'selection',
+    )
+
+    let brushElement = select(this.element)
+    let mappedSelection = selection ? selection.map(xScale) : null
+
+    let brush = brushX()
+      .extent([[0, 0], [rect.width, handleSize]])
+      .handleSize(handleSize)
+
+    brushElement
+      .call(brush)
+      .call(brush.move, mappedSelection)
+      .attr('class', 'brush')
+
+    brush.on('end', () => {
+      let { selection: eventSelection } = event
+      let extent = eventSelection ? eventSelection.map(xScale.invert, xScale) : xScale.domain()
+      run.next(this, () => {
+        this.sendAction('_change', extent, !eventSelection)
+      })
+    })
+  },
+})

addon/components/primer-brush-x/template.hbs

@@ -0,0 +1,25 @@
+  {{!-- <defs>
+    <pattern id="handle-pattern-{{elementId}}" class="pattern-handle" width="1" height="1">
+      <rect class="border" width="11" height="22"></rect>
+      <rect class="background" x="1" y="1" width="9" height="20" rx="2" ry="2"></rect>
+      <rect class="line" x="3" y="3" width="1" height="16"></rect>
+      <rect class="line" x="5" y="3" width="1" height="16"></rect>
+      <rect class="line" x="7" y="3" width="1" height="16"></rect>
+    </pattern>
+  </defs>
+
+  <g class="selection" transform="translate({{chartArea.left}},{{chartArea.top}})">
+    <rect class="extent" height="{{chartArea.height}}"></rect>
+  </g>
+ --}}
+
+
+{{primer-axis 
+  scale=xScale
+  orientation='bottom'
+  rect=(hash height=(or height rect.height) width=(or width rect.width))
+  ticks=ticks
+  tickFormat=tickFormat
+}}
+
+{{!-- <g class="brush" transform="translate({{chartArea.left}},{{chartArea.top}})"></g> --}}

addon/components/primer-container/component.js

@@ -1,9 +1,9 @@
-import Component from 'ember-component';
-import layout from './template';
-import computed from 'ember-computed';
-import box from 'ember-primer/utils/box-expression';
-const { keys } = Object;
-const Container =  Component.extend({
+import Component from 'ember-component'
+import layout from './template'
+import computed from 'ember-computed'
+import box from 'ember-primer/utils/box-expression'
+const { keys } = Object
+const Container = Component.extend({
   tagName: '',
 
   layout,
@@ -26,23 +26,23 @@ const Container =  Component.extend({
 
   localizedXScale: computed('xScale', 'rect', {
     get() {
-      let { xScale, rect } = this.getProperties('xScale', 'rect');
-      return xScale.copy().range([0, rect.width]);
-    }
+      let { xScale, rect } = this.getProperties('xScale', 'rect')
+      return xScale.copy().range([0, rect.width])
+    },
   }),
 
   localizedYScale: computed('yScale', 'rect', {
     get() {
-      let { yScale, rect } = this.getProperties('yScale', 'rect');
-      return yScale.copy().range([rect.height, 0]);
-    }
+      let { yScale, rect } = this.getProperties('yScale', 'rect')
+      return yScale.copy().range([rect.height, 0])
+    },
   }),
 
   rect: computed('width', 'height', 'margin', {
     get() {
-      let outerHeight = this.get('height') || 10;
-      let outerWidth = this.get('width') || 10;
-      let margin = box(this.get('margin'));
+      let outerHeight = this.get('height') || 10
+      let outerWidth = this.get('width') || 10
+      let margin = box(this.get('margin'))
       // let padding = box(this.get('padding'));
 
       // let innerWidth = outerWidth - margin.left - margin.right;
@@ -66,8 +66,8 @@ const Container =  Component.extend({
       // // let margin = box(this.get('margin'));
       // // let padding = box(this.get('padding'));
 
-      let innerWidth = outerWidth - margin.left - margin.right;
-      let innerHeight = outerHeight - margin.top - margin.bottom;
+      let innerWidth = outerWidth - margin.left - margin.right
+      let innerHeight = outerHeight - margin.top - margin.bottom
 
       let rect = {
         margin,
@@ -82,31 +82,35 @@ const Container =  Component.extend({
 
         // Dupes
         height: innerHeight,
-        width: innerWidth
-      };
+        width: innerWidth,
+      }
 
-      keys(rect).forEach((key) => {
+      keys(rect).forEach(key => {
         if (rect[key] < 0) {
-          rect[key] = 0;
+          rect[key] = 0
         }
-      });
+      })
 
-      return rect;
-    }
+      return rect
+    },
   }),
 
   actions: {
     updateCursorPosition([xValue, yValue], [xCursor, yCursor]) {
-      this.sendAction('update-cursor-position', [xValue, yValue], [xCursor, yCursor]);
+      this.sendAction('update-cursor-position', [xValue, yValue], [xCursor, yCursor])
 
       // this.setProperties({ cursorPosition: [xCursor, yCursor] });
       // this.sendAction('_cursorChangedPosition', [xValue, yValue], [xCursor, yCursor]);
-    }
-  }
-});
+    },
+
+    updateBrushExtent() {
+      this.sendAction('update-brush-extent', ...arguments)
+    },
+  },
+})
 
 Container.reopenClass({
-  positionalParams: ['xScale', 'yScale']
-});
+  positionalParams: ['xScale', 'yScale'],
+})
 
-export default Container;
+export default Container

addon/components/primer-container/template.hbs

@@ -4,13 +4,27 @@
       yScale=localizedYScale
 
       group=(component "primer-group")
-      container=(component "primer-container" width=rect.width height=rect.height cursorPosition=cursorPosition update-cursor-position=(action "updateCursorPosition"))
+      container=(component "primer-container"
+        width=rect.width 
+        height=rect.height
+        cursorPosition=cursorPosition
+        update-cursor-position=(action "updateCursorPosition")
+        update-brush-extent=(action "updateBrushExtent")
+      )
       axis=(component "primer-axis" rect=rect)
-      cursor=(component "primer-cursor" position=cursorPosition xScale=localizedXScale yScale=localizedYScale xOffset=rect.left yOffset=rect.top _change=(action "updateCursorPosition"))
+      brushX=(component "primer-brush-x" rect=rect xScale=localizedXScale _change=(action "updateBrushExtent"))
+      cursor=(component "primer-cursor"
+        position=cursorPosition
+        xScale=localizedXScale
+        yScale=localizedYScale
+        xOffset=rect.left
+        yOffset=rect.top
+        _change=(action "updateCursorPosition")
+      )
       line=(component "primer-line" tagName="g" xScale=localizedXScale yScale=localizedYScale)
       area=(component "primer-area" tagName="g" xScale=localizedXScale yScale=localizedYScale)
-      transition=(component "primer-transition")
       scatter=(component "primer-scatter" xScale=localizedXScale yScale=localizedYScale)
+      transition=(component "primer-transition")
       label=(component "primer-label")
       candle=(component "primer-candle")
     )

addon/components/primer-plot/component.js

@@ -1,8 +1,8 @@
-import Component from 'ember-component';
+import Component from 'ember-component'
 // import ResizeableContainer from 'ember-primer/mixins/resizeable-container';
-import WithContentRect from 'ember-measure/with-content-rect';
-import layout from './template';
-import computed from 'ember-computed';
+import WithContentRect from 'ember-measure/with-content-rect'
+import layout from './template'
+import computed from 'ember-computed'
 
 export default Component.extend(WithContentRect, {
   layout,
@@ -29,19 +29,23 @@ export default Component.extend(WithContentRect, {
 
   viewBox: computed('width', 'height', {
     get() {
-      let { width, height } = this.getProperties('width', 'height');
+      let { width, height } = this.getProperties('width', 'height')
 
       if (!width || !height) {
-        return undefined;
+        return undefined
       }
 
-      return [0, 0, width, height].join(' ');
-    }
+      return [0, 0, width, height].join(' ')
+    },
   }),
 
   actions: {
     updateCursorPosition([xValue, yValue], [xCursor, yCursor]) {
-      this.sendAction('cursor-moved', [xValue, yValue], [xCursor, yCursor]);
-    }
-  }
-});
+      this.sendAction('cursor-moved', [xValue, yValue], [xCursor, yCursor])
+    },
+
+    updateBrushExtent(extent, isEmpty) {
+      this.sendAction('update-brush-extent', extent, isEmpty)
+    },
+  },
+})