From 9d030874b381bb93e5628ed0a9aa311c5f61465a Mon Sep 17 00:00:00 2001
From: Rob McGuire-Dale <robmc@zillow.com>
Date: Tue, 12 Apr 2016 14:58:02 -0700
Subject: [PATCH 1/2] Add options to align points for area and line shapes to
 the left (default), center, and right

---
 src/commonProps.jsx     |  3 ++-
 src/components/area.jsx | 15 ++++++++++++++-
 src/components/line.jsx | 15 ++++++++++++++-
 src/utils/alignment.jsx | 17 +++++++++++++++++
 4 files changed, 47 insertions(+), 3 deletions(-)
 create mode 100644 src/utils/alignment.jsx

diff --git a/src/commonProps.jsx b/src/commonProps.jsx
index 2e5aef1..1a22173 100644
--- a/src/commonProps.jsx
+++ b/src/commonProps.jsx
@@ -14,7 +14,8 @@ export default {
   xScale: 'linear',
   yScale: 'linear',
   showXGrid: true,
-  showYGrid: true
+  showYGrid: true,
+  pointAlign: 'left'
 }
 
 export const pieProps = {
diff --git a/src/components/area.jsx b/src/components/area.jsx
index f05f7fb..73ad633 100644
--- a/src/components/area.jsx
+++ b/src/components/area.jsx
@@ -9,12 +9,17 @@ import {
 import D3Shape from 'd3-shape'
 import CommonProps from '../commonProps';
 import {series} from '../utils/series';
+import {getTranslateXAmount} from '../utils/alignment';
 
 export default class Area extends Component {
   constructor (props) {
     super(props);
   }
 
+  static propTypes = {
+    pointAlign: PropTypes.oneOf('left', 'center', 'right')
+  };
+
   static defaultProps = {
     areaClassName: 'react-d3-basic__area',
     ...CommonProps
@@ -76,8 +81,16 @@ export default class Area extends Component {
   render() {
     var area = this._mkArea();
 
+    const translateXAmount = getTranslateXAmount(
+      this.props.pointAlign,
+      this.props.xScaleSet.bandwidth()
+    );
+    const style = {
+      transform: `translateX(${translateXAmount}px)`
+    };
+
     return (
-      <g>
+      <g style={style}>
         {area}
       </g>
     )
diff --git a/src/components/line.jsx b/src/components/line.jsx
index a3d4343..602e35e 100644
--- a/src/components/line.jsx
+++ b/src/components/line.jsx
@@ -9,12 +9,17 @@ import {
 import D3Shape from 'd3-shape'
 import CommonProps from '../commonProps';
 import {series} from '../utils/series';
+import {getTranslateXAmount} from '../utils/alignment';
 
 export default class Line extends Component {
   constructor (props) {
     super(props);
   }
 
+  static propTypes = {
+    pointAlign: PropTypes.oneOf('left', 'center', 'right')
+  };
+
   static defaultProps = {
     interpolate: null,
     lineClassName: 'react-d3-basic__line',
@@ -64,8 +69,16 @@ export default class Line extends Component {
   render() {
     var line = this._mkLine();
 
+    const translateXAmount = getTranslateXAmount(
+      this.props.pointAlign,
+      this.props.xScaleSet.bandwidth()
+    );
+    const style = {
+      transform: `translateX(${translateXAmount}px)`
+    };
+
     return (
-      <g>
+      <g style={style}>
         {line}
       </g>
     );
diff --git a/src/utils/alignment.jsx b/src/utils/alignment.jsx
new file mode 100644
index 0000000..2c48744
--- /dev/null
+++ b/src/utils/alignment.jsx
@@ -0,0 +1,17 @@
+"use strict";
+
+/**
+ * Get the horizontal translation amount based on point alignment.
+ * @param [pointAlign='left'] - How the points should be aligned, left, center,
+ *   or right
+ * @param bandwidth - The width of a single band of the X scale
+ * @returns {number} - How many horizontal pixels to translate
+ */
+export function getTranslateXAmount (pointAlign, bandwidth) {
+  if ( pointAlign === 'center' ) {
+    return bandwidth / 2;
+  } else if ( pointAlign === 'right') {
+    return bandwidth;
+  }
+  return 0;
+}

From ad18887ae0cbe0ef099419f6dcbf8e99b91730f4 Mon Sep 17 00:00:00 2001
From: Rob McGuire-Dale <robmc@zillow.com>
Date: Fri, 29 Apr 2016 16:12:34 -0700
Subject: [PATCH 2/2] Fix typo in prop validation

---
 src/components/area.jsx | 2 +-
 src/components/line.jsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/area.jsx b/src/components/area.jsx
index 73ad633..6aacf12 100644
--- a/src/components/area.jsx
+++ b/src/components/area.jsx
@@ -17,7 +17,7 @@ export default class Area extends Component {
   }
 
   static propTypes = {
-    pointAlign: PropTypes.oneOf('left', 'center', 'right')
+    pointAlign: PropTypes.oneOf(['left', 'center', 'right'])
   };
 
   static defaultProps = {
diff --git a/src/components/line.jsx b/src/components/line.jsx
index 602e35e..cf9f792 100644
--- a/src/components/line.jsx
+++ b/src/components/line.jsx
@@ -17,7 +17,7 @@ export default class Line extends Component {
   }
 
   static propTypes = {
-    pointAlign: PropTypes.oneOf('left', 'center', 'right')
+    pointAlign: PropTypes.oneOf(['left', 'center', 'right'])
   };
 
   static defaultProps = {