<commit_before>import React, { PropTypes } from 'react';
import { area } from 'd3-shape';
import { noop } from 'lodash';

import { eventHandleWrapper } from '../../../utils/events';
import { CommonPropTypes } from '../../../utils';

const Area = (props) => {
  const {
    data,
    scales,
    color,
    strokeWidth,
    dataAccessors: { x: xAccessor, y0: y0Accessor, y1: y1Accessor },
    onClick,
    hoverHandler
  } = props;

  const path = area()
    .x((datum) => {
      return scales.x(datum[xAccessor]);
    })
    .y0((datum) => {
      return scales.y(datum[y0Accessor]);
    })
    .y1((datum) => {
      return scales.y(datum[y1Accessor]);
    });

  return (
    <path
      className="area"
      fill={color}
      stroke={color}
      strokeWidth={`${strokeWidth}px`}
      d={path(data)}
      onClick={eventHandleWrapper(onClick, data, this)}
      onMouseOver={eventHandleWrapper(hoverHandler, data, this)}
    />
  );
};

Area.propTypes = {
  /* array of objects
   e.g. [ {}, {}, {} ]
   */
  data: PropTypes.arrayOf(PropTypes.object).isRequired,

  /* scales from d3Scale */
  scales: PropTypes.shape({<commit_msg>extend PureComponent class for `Area`<commit_after>import React, { PropTypes } from 'react';
import { area } from 'd3-shape';
import { noop } from 'lodash';

import { eventHandleWrapper } from '../../../utils/events';
import { CommonPropTypes, PureComponent } from '../../../utils';

class Area extends PureComponent {
  render() {
    const {
      data,
      scales,
      color,
      strokeWidth,
      dataAccessors: { x: xAccessor, y0: y0Accessor, y1: y1Accessor },
      onClick,
      hoverHandler
    } = this.props;

    const path = area()
      .x((datum) => {
        return scales.x(datum[xAccessor]);
      })
      .y0((datum) => {
        return scales.y(datum[y0Accessor]);
      })
      .y1((datum) => {
        return scales.y(datum[y1Accessor]);
      });

    return (
      <path
        className="area"
        fill={color}
        stroke={color}
        strokeWidth={`${strokeWidth}px`}
        d={path(data)}
        onClick={eventHandleWrapper(onClick, data, this)}
        onMouseOver={eventHandleWrapper(hoverHandler, data, this)}
      />
    );
  }
}

Area.propTypes = {
  /* array of objects
   e.g. [ {}, {}, {} ]
   */
  data: PropTypes.arrayOf(PropTypes.object).isRequired,

  /* scales from d3Scale */
  scales: PropTypes.shape({
{'fraction_non_alphanumeric': 0.16701287910261736, 'fraction_numerical': 0.008309098462816784, 'mean_word_length': 2.5153284671532847, 'pattern_counts': {'":': 0, '<': 5, '<?xml version=': 0, '>': 12, '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': '5293127', 'n_tokens_mistral': 784, 'n_tokens_neox': 786, 'n_words': 158}