<commit_before>import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import styles from './circular-chart-styles.scss';

class CircularChart extends PureComponent {
  // eslint-disable-line react/prefer-stateless-function
  render() {
    const { value } = this.props;
    return (
      <div className={styles.singleChart}>
        <svg viewBox="0 0 36 36" className={styles.circularChart}>
          <path
            className={styles.circleBg}
            d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
          />
          <path
            className={styles.circle}
            strokeDasharray={`${value}, 100`}
            d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
          />
          <text x="18" y="20.35" className={styles.percentage}>
            {value}%
          </text>
        </svg>
      </div>
    );
  }
}

CircularChart.propTypes = {
  value: PropTypes.number.isRequired
};

export default CircularChart;<commit_msg>Change path for circle on circular chart<commit_after>import React from 'react';
import PropTypes from 'prop-types';
import { COUNTRY_COMPARE_COLORS } from 'data/constants';
import styles from './circular-chart-styles.scss';

const radius = index => (100 + index * 20) / (3.14159 * 2); // eslint-disable-line no-mixed-operators
const diameter = index => radius(index) * 2;
const normalizedCircunference = index => 3.14159 * diameter(index);
const arcLength = (value, index) =>
  360 * value / 100 / 360 * normalizedCircunference(index); // eslint-disable-line no-mixed-operators

const CircularChart = ({ value, index }) => (
  <div className={styles.circularChartWrapper}>
    <svg viewBox="0 0 50 50" className={styles.circularChart}>
      <circle
        r={radius(index)}
        cx="25"
        cy="25"
        className={styles.circleEmpty}
      />
      <circle
        r={radius(index)}
        cx="25"
        cy="25"
        className={styles.circleValue}
        strokeDasharray={`${arcLength(value, index)}, ${normalizedCircunference(
          index
        )}`}
        style={{ stroke: COUNTRY_COMPARE_COLORS[index] }}
      />
    </svg>
  </div>
);

CircularChart.propTypes = {
  value: PropTypes.number.isRequired,
  index: PropTypes.number.isRequired
};

export default CircularChart;
{'fraction_non_alphanumeric': 0.13574468085106384, 'fraction_numerical': 0.06595744680851064, 'mean_word_length': 2.679186228482003, 'pattern_counts': {'":': 0, '<': 17, '<?xml version=': 0, '>': 22, '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': '2017210', 'n_tokens_mistral': 848, 'n_tokens_neox': 735, 'n_words': 179}