Factor out axes to common.js

Factor out xAxis and xAxis components from linechart.js, areachart.js, and barchart.js to common.js, preparing the library for whenever the chart axes are switched from d3-generated svg to pure React-generated axis svg.
esbullington · Jan 22, 2015 · 49e3f70 · 49e3f70
1 parent fc48014
commit 49e3f70
Show file tree

Hide file tree

Showing 5 changed files with 215 additions and 330 deletions.
diff --git a/src/areachart.js b/src/areachart.js
@@ -1,114 +1,10 @@
 /** @jsx React.DOM */
 var React = require('react');
 var d3 = require('d3');
-var Chart = require('./common').Chart;
-
-var XAxis = React.createClass({
-
-  componentWillReceiveProps: function(props) {
-    this._renderAxes(props);
-  },
-
-  componentDidMount: function() {
-    this._renderAxes(this.props);
-  },
-
-  _renderAxes: function(props) {
-
-    var unit = props.xAxisTickInterval.unit;
-    var interval = props.xAxisTickInterval.interval;
-
-    var xAxis = d3.svg.axis()
-      .ticks(d3.time[unit], interval)
-      .scale(props.xScale)
-      .orient("bottom");
-
-    var node = this.refs.xaxis.getDOMNode();
-
-    d3.select(node)
-      .attr("class", "x axis")
-      .call(xAxis);
-
-    // Style each of the tick lines
-    d3.select('.x.axis')
-      .selectAll('line')
-      .attr("shape-rendering", "crispEdges")
-      .attr("stroke", "#000");
-
-    // Style the main axis line
-    d3.select('.x.axis')
-      .select('path')
-      .attr("shape-rendering", "crispEdges")
-      .attr("fill", "none")
-      .attr("stroke", "#000")
-
-  },
-
-  render: function() {
-    var t = "translate(0," + this.props.height + ")";
-    return (
-      <g
-        ref='xaxis'
-        className="x axis"
-        transform={t}
-      >
-      </g>
-    );
-  }
-
-});
-
-
-var YAxis = React.createClass({
-
-  componentWillReceiveProps: function(props) {
-    this._renderAxes(props);
-  },
-
-  componentDidMount: function() {
-    this._renderAxes(this.props);
-  },
-
-  _renderAxes: function(props) {
-
-    var yAxis = d3.svg.axis()
-      .ticks(props.yAxisTickCount)
-      .scale(props.yScale)
-      .orient("left");
-
-    var node = this.refs.yaxis.getDOMNode();
-
-    d3.select(node)
-      .attr("class", "y axis")
-      .call(yAxis);
-
-    // Style each of the tick lines
-    d3.selectAll('.y.axis')
-      .selectAll('line')
-      .attr("shape-rendering", "crispEdges")
-      .attr("stroke", "#000");
-
-    // Style the main axis line
-    d3.selectAll('.y.axis')
-      .select('path')
-      .attr("shape-rendering", "crispEdges")
-      .attr("fill", "none")
-      .attr("stroke", "#000")
-
-  },
-
-  render: function() {
-    return (
-      <g
-        ref='yaxis'
-        className="y axis"
-      >
-      </g>
-    );
-  }
-
-});
-
+var common = require('./common');
+var Chart = common.Chart;
+var XAxis = common.XAxis;
+var YAxis = common.YAxis;
 
 var Area = React.createClass({
 
@@ -129,7 +25,7 @@ var Area = React.createClass({
 
     return (
       <path
-        className="area"
+        className="area-path"
         d={this.props.path}
         fill={this.props.fill}
       />
@@ -215,13 +111,15 @@ var AreaChart = React.createClass({
             height={this.props.height}
           />
           <XAxis
+            xAxisClassName="area x axis"
             xScale={xScale}
             xAxisTickInterval={this.props.xAxisTickInterval}
             margin={margin}
             width={this.props.width}
             height={this.props.height}
           />
           <YAxis
+            yAxisClassName="area y axis"
             yScale={yScale}
             margin={margin}
             yAxisTickCount={this.props.yAxisTickCount}

diff --git a/src/barchart.js b/src/barchart.js
@@ -1,7 +1,10 @@
 /** @jsx React.DOM */
 var React = require('react');
 var d3 = require('d3');
-var Chart = require('./common').Chart;
+var common = require('./common');
+var Chart = common.Chart;
+var XAxis = common.XAxis;
+var YAxis = common.YAxis;
 var _ = require('lodash');
 
 
@@ -33,106 +36,6 @@ var Bar = React.createClass({
   }
 });
 
-var XAxis = React.createClass({
-
-  componentDidMount: function() {
-    this._renderAxis(this.props);
-  },
-
-  componentWillReceiveProps: function(props) {
-    this._renderAxis(props);
-  },
-
-  _renderAxis: function(props) {
-    var xAxis = d3.svg.axis()
-      .scale(props.xScale)
-      .orient("bottom");
-
-    var node = this.refs.barxaxis.getDOMNode();
-
-    d3.select(node)
-      .attr("class", "barx axis")
-      .call(xAxis);
-
-    // Style each of the tick lines
-    d3.select('.barx.axis')
-      .selectAll('line')
-      .attr("shape-rendering", "crispEdges")
-      .attr("stroke", "#000");
-
-    // Style the main axis line
-    d3.select('.barx.axis')
-      .select('path')
-      .attr("shape-rendering", "crispEdges")
-      .attr("fill", "none")
-      .attr("stroke", "none")
-
-  },
-
-  render: function() {
-    var t = "translate(0," + this.props.height + ")"
-    return (
-      <g
-        ref='barxaxis'
-        className="barx axis"
-        transform={t}
-      >
-      </g>
-    );
-  }
-
-});
-
-
-var YAxis = React.createClass({
-
-  componentDidMount: function() {
-    this._renderAxis(this.props);
-  },
-
-  componentWillReceiveProps: function(props) {
-    this._renderAxis(props);
-  },
-
-  _renderAxis: function(props) {
-    var yAxis = d3.svg.axis()
-      .ticks(props.yAxisTickCount)
-      .scale(props.yScale)
-      .orient("left");
-
-    var node = this.refs.baryaxis.getDOMNode();
-
-    d3.select(node)
-      .attr("class", "bary axis")
-      .call(yAxis);
-
-    // Style each of the tick lines
-    d3.selectAll('.bary.axis')
-      .selectAll('line')
-      .attr("shape-rendering", "crispEdges")
-      .attr("stroke", "#000");
-
-    // Style the main axis line
-    d3.selectAll('.bary.axis')
-      .select('path')
-      .attr("shape-rendering", "crispEdges")
-      .attr("fill", "none")
-      .attr("stroke", "#000")
-
-  },
-
-  render: function() {
-    return (
-      <g
-        ref='baryaxis'
-        className="bary axis"
-      >
-      </g>
-    );
-  }
-
-});
-
 var DataSeries = React.createClass({
 
   propTypes: {
@@ -229,13 +132,15 @@ var BarChart = React.createClass({
             fill={this.props.fill}
           />
           <YAxis
+            yAxisClassName="bar y axis"
             yScale={yScale}
             margins={margins}
             yAxisTickCount={this.props.yAxisTickCount}
             width={this.props.width - sideMargins}
             height={this.props.height - topBottomMargins}
           />
           <XAxis
+            xAxisClassName="bar x axis"
             xScale={xScale}
             data={this.props.data}
             margins={margins}