<commit_before>/** @jsx React.DOM */
var React = require('react');
var d3 = require('d3');
var Chart = require('./common').Chart;
var _ = require('lodash');


var Bar = React.createClass({

  propTypes: {
    fill: React.PropTypes.string,
    width: React.PropTypes.number,
    height: React.PropTypes.number,
    offset: React.PropTypes.number
  },

  getDefaultProps: function() {
    return {
      offset: 0
    }
  },

  render: function() {
    return (
      <rect
        fill={this.props.fill}
        width={this.props.width}
        height={this.props.height}
        x={this.props.offset}
        y={this.props.availableHeight  - this.props.height}
      />
    );
  }
});

var XAxis = React.createClass({


  componentWillReceiveProps: 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({

  componentWillReceiveProps: function(props) {
<commit_msg>Render axes on componentDidMount<commit_after>/** @jsx React.DOM */
var React = require('react');
var d3 = require('d3');
var Chart = require('./common').Chart;
var _ = require('lodash');


var Bar = React.createClass({

  propTypes: {
    fill: React.PropTypes.string,
    width: React.PropTypes.number,
    height: React.PropTypes.number,
    offset: React.PropTypes.number
  },

  getDefaultProps: function() {
    return {
      offset: 0
    }
  },

  render: function() {
    return (
      <rect
        fill={this.props.fill}
        width={this.props.width}
        height={this.props.height}
        x={this.props.offset}
        y={this.props.availableHeight  - this.props.height}
      />
    );
  }
});

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) {
{'fraction_non_alphanumeric': 0.16582633053221288, 'fraction_numerical': 0.0061624649859943975, 'mean_word_length': 2.456921587608906, 'pattern_counts': {'":': 0, '<': 9, '<?xml version=': 0, '>': 9, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5658234', 'n_tokens_mistral': 1228, 'n_tokens_neox': 1180, 'n_words': 219}