content: import React from 'react';
  import d3 from 'd3';
  import classNames from 'classnames';
  import Series from 'components/series';
  import DifferenceBar from 'components/difference-bar';
  import getBarHeight from 'decorators/get-bar-height';
  import getBarWidth from 'decorators/get-bar-width';
  import getBarY from 'decorators/get-bar-y';
  import getHigherOrLower from 'decorators/get-higher-or-lower';
  import isActive from 'decorators/is-active';
  
  @getBarHeight
  @getBarWidth
  @getBarY
  @getHigherOrLower
  @isActive
  export default class DifferenceBarSeries extends Series {
  
    static propTypes = {
      barSpacing: React.PropTypes.number.isRequired,
      className: React.PropTypes.string,
      data: React.PropTypes.arrayOf(React.PropTypes.array).isRequired,
      dispatcher: React.PropTypes.object.isRequired,
      height: React.PropTypes.number.isRequired,
      id: React.PropTypes.string.isRequired,
      interactive: React.PropTypes.bool.isRequired,
      scaleY: React.PropTypes.func.isRequired,
      style: React.PropTypes.object,
      tickWidth: React.PropTypes.number.isRequired,
      width: React.PropTypes.number.isRequired,
      zeroY: React.PropTypes.number.isRequired,
    }
  
    static defaultProps = {
      barSpacing: 2,
      className: '',
      data: [[], []],
      dispatcher: d3.dispatch(),
      height: 0,
      id: '',
      interactive: true,
      scaleY: Function,
      style: {},
      tickWidth: 0,
      width: 0,
      zeroY: 0,
    }
  
    state = {
      activeDatum: {},
      activeIndex: -1,
    }
  
    getBarFillHeight(differenceDatum, scale, y) {
      if (differenceDatum && differenceDatum.hasOwnProperty('value')) {
        return Math.round(scale(differenceDatum.value) - y);
      }
      return 0;
    }
  
    getBarProps(props, state, datum, index) {
      const differenceData = props.data[1];
      const differenceDatum = differenceData[index];
      const differenceValue = differenceDatum ? differenceDatum.value : 0;
  
      const active = this.isActive(
        state.activeIndex, index);
      const className = this.getHigherOrLower(
        datum.value, differenceValue);
      const height = this.getBarHeight(
        props.zeroY,
        props.scaleY,
        datum.value);
      const width = this.getBarWidth(
        props.tickWidth,
        props.barSpacing);
      const x = this.getBarX(
        props.tickWidth,
        index);
      const y = this.getBarY(
        datum.value,
        props.zeroY,
        height);
      const fillHeight = this.getBarFillHeight(
        differenceDatum, props.scaleY, y);
      return {
        active: active,
        className: className,
        fillHeight: fillHeight,
        height: height,
        width: width,
        x: x,
        y: y,
      };
    }
  
    getBarX(tickWidth, index) {
      return Math.floor(tickWidth * index);
    }
  
    render() {
      return (
        <g
          className={classNames(
            'difference-bar-series',
            this.props.className
          )}
          style={this.props.style}>
  
          {this.props.data.map((datum, index) => {
            const barProps = this.getBarProps(
              this.props,
              this.state,
              datum,
              index);
  
            return (
              <DifferenceBar
                active={barProps.active}
                className={barProps.className}
                fillHeight={barProps.fillHeight}
                height={barProps.height}
                index={index}
                key={index}
                style={this.props.style}
                width={barProps.width}
                x={barProps.x}
                y={barProps.y} />
            );
          })}
        </g>
      );
    }
  
  }
  