import React, { Component, PropTypes } from 'react'
import { Motion, spring } from 'react-motion'
import Bars from './Bars'
import Grid from './Grid'
import AxisX from './AxisX'
import AxisY from './AxisY'

class BarChart extends Component {

  // @todo upload to github with MIT license

  static propTypes = {
    width: PropTypes.number,
    height: PropTypes.number,
    topPadding: PropTypes.number,
    bottomPadding: PropTypes.number,
    id: PropTypes.string.isRequired,
    values: PropTypes.arrayOf(PropTypes.object)
  }

  static defaultProps = {
    width: 900, // 650,
    height: 450, // 250,
    topPadding: 30,
    bottomPadding: 50,
    title: 'test',
    xTitle: 'Xtitle',
    yTitle: null,
    xModulus: 52,
    yModulus: 10,
    xUnit: null,
    yUnit: null,
    yAxisRounding: 10,
    values: [
      {xValue: 0, yValue: 1},
      {xValue: 1, yValue: 1},
      {xValue: 2, yValue: 1},
      {xValue: 3, yValue: 1},
      {xValue: 4, yValue: 1},
      {xValue: 5, yValue: 1},
      {xValue: 6, yValue: 1},
      {xValue: 7, yValue: 1}
    ],

  }

  componentWillMount () {

    // set initial chart axes, height, width and unit spacing

    const { values, width, height, topPadding, bottomPadding, yAxisRounding } = this.props

    this.chartHeight = height - topPadding - bottomPadding
    this.chartWidth = width - 100

    let max = 0
    let min = 0

    values.map((v, i) => {
      if (max < v.yValue) max = v.yValue
      if (min > v.yValue) min = v.yValue
    })

    let yMin = Math.floor(min/yAxisRounding)*yAxisRounding
    let yMax = Math.ceil(max/yAxisRounding)*yAxisRounding

    let i = yMax
    let yAxis = []

    while (i >= yMin) {
      yAxis.push(i)
      i -= 1
    }

    this.yAxis = yAxis

    this.xSpacing = this.chartWidth/values.length
    this.ySpacing = this.chartHeight/this.yAxis.length

  }

  render () {

    const { width, height, id, topPadding, bottomPadding, values, xUnit, yUnit, title, xTitle, yTitle, xModulus, yModulus } = this.props

    if (!values) return null

    return (
      <div>
        <h3>{title}</h3>
        <svg
          id={id}
          width={width}
          height={height}
        >
          <Grid
            yAxis={this.yAxis}
            xSpacing={this.xSpacing}
            ySpacing={this.ySpacing}
            chartHeight={this.chartHeight}
            chartWidth={this.chartWidth}
            topPadding={topPadding}
            bottomPadding={bottomPadding}
            values={values}
            yModulus={yModulus}
          />
          <AxisX
            yAxis={this.yAxis}
            xSpacing={this.xSpacing}
            ySpacing={this.ySpacing}
            chartWidth={this.chartWidth}
            chartHeight={this.chartHeight}
            topPadding={topPadding}
            bottomPadding={bottomPadding}
            values={values}
            xTitle={xTitle}
            xModulus={xModulus}
          />
          <AxisY
            yAxis={this.yAxis}
            xSpacing={this.xSpacing}
            ySpacing={this.ySpacing}
            chartHeight={this.chartHeight}
            topPadding={topPadding}
            bottomPadding={bottomPadding}
            values={values}
            yUnit={yUnit}
            yTitle={yTitle}
            yModulus={yModulus}
          />
          <Bars
            yAxis={this.yAxis}
            xSpacing={this.xSpacing}
            ySpacing={this.ySpacing}
            chartHeight={this.chartHeight}
            topPadding={topPadding}
            bottomPadding={bottomPadding}
            values={values}
          />
        </svg>
      </div>
    )
  }
}

export default BarChart

@@ -8,17 +8,16 @@
 React, %7B
- 
 Componen
@@ -28,17 +28,16 @@
 ropTypes
- 
 %7D from '
@@ -51,17 +51,16 @@
 import %7B
- 
 Motion, 
@@ -65,17 +65,16 @@
 , spring
- 
 %7D from '
@@ -235,55 +235,8 @@
 t %7B%0A
-%0A  // @todo upload to github with MIT license%0A%0A
   st
@@ -468,16 +468,17 @@
 .object)
+,
 %0A  %7D%0A%0A  
@@ -520,16 +520,8 @@
 900,
- // 650,
 %0A   
@@ -537,16 +537,8 @@
 450,
- // 250,
 %0A   
@@ -985,16 +985,17 @@
 : 1%7D
+,
 %0A    %5D,%0A
 %0A  %7D
@@ -990,17 +990,16 @@
 %0A    %5D,%0A
-%0A
   %7D%0A%0A  c
@@ -1015,23 +1015,21 @@
 illMount
- 
 () %7B%0A
-%0A
     // s
@@ -1078,25 +1078,24 @@
 nit spacing%0A
-%0A
     const %7B 
@@ -1093,17 +1093,16 @@
  const %7B
- 
 values, 
@@ -1156,17 +1156,16 @@
 Rounding
- 
 %7D = this
@@ -1445,17 +1445,19 @@
 loor(min
-/
+ / 
 yAxisRou
@@ -1454,33 +1454,35 @@
 / yAxisRounding)
-*
+ * 
 yAxisRounding%0A  
@@ -1507,17 +1507,19 @@
 ceil(max
-/
+ / 
 yAxisRou
@@ -1524,17 +1524,19 @@
 ounding)
-*
+ * 
 yAxisRou
@@ -1702,17 +1702,19 @@
 artWidth
-/
+ / 
 values.l
@@ -1755,17 +1755,19 @@
 rtHeight
-/
+ / 
 this.yAx
@@ -1776,17 +1776,16 @@
 .length%0A
-%0A
   %7D%0A%0A  r
@@ -1793,15 +1793,13 @@
 nder
- 
 () %7B%0A
-%0A
     
@@ -1805,16 +1805,22 @@
  const %7B
+%0A     
  width, 
@@ -1872,16 +1872,23 @@
 , xUnit,
+%0A      
  yUnit, 
@@ -1928,16 +1928,22 @@
 yModulus
+,%0A    
  %7D = thi

Update BarChart.js