<commit_before>import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import cx from 'classnames';
import CircularChart from 'components/circular-chart';
import NoContent from 'components/no-content';
import InfoButton from 'components/button/info-button';
import range from 'lodash/range';

import styles from './vulnerability-graph-styles.scss';

class VulnerabilityGraph extends PureComponent {
  // eslint-disable-line react/prefer-stateless-function

  handleInfoClick = slug => {
    const { setModalMetadata } = this.props;
    setModalMetadata({
      category: 'Country',
      slugs: [slug],
      open: true
    });
  };

  renderCircular() {
    const { sectionData } = this.props;
    const value =
      sectionData.data && Math.floor(sectionData.data.value * 10) / 10;
    return sectionData.data ? (
      <div className={styles.circularChartContainer}>
        <InfoButton
          className={styles.infoBtn}
          infoOpen={false}
          handleInfoClick={() => this.handleInfoClick(sectionData.slug)}
          square
        />
        <CircularChart value={value} />
      </div>
    ) : (
      <NoContent message={'No data'} className={styles.noContent} />
    );
  }

  renderLine() {
    const { sectionData, inverted } = this.props;
    const value =
      sectionData.data && Math.floor(sectionData.data.value * 100) / 100;
    const riskValue =
      sectionData.data && parseInt(sectionData.data.rank.absolute, 10) * 100;
    const maximumCountries = sectionData.maximum;
    const riskAbsoluteValue = riskValue / maximumCountries;
    const position = inverted ? 'right' : 'left';
    return sectionData.data ? (
      <div className={styles.lineChartContainer}>
        <InfoButton
          className={styles.infoBtn}
          infoOpen={false}
          handleInfoClick={() => this.handleInfoClick(sectionData.slug)}
        />
        <div className={styles.riskValue}>{value}</div>
        <div className={styles.riskMeter}>
          <div
            className={styles.riskMarker}
            style={{ [position]: `${riskAbsoluteValue}%` }}
          />
          <div className={styles.riskAbsoluteValue}>
            <span className={styles.countriesNumber}>Rank</span>{' '}
            {sectionData.data.rank.absolute}
            <span className={styles.countriesNumber}>
              {' '}
              of {maximumCountries} countries
            </span>
          </div>
          {range(10).map((_, i) => (
            <div
              key={i} // eslint-disable-line react/no-array-index-key
              className={cx(styles.riskTick, styles[`meter-${i + 1}`])}
            />
          ))}
        </div>
      </div><commit_msg>Add circular and line charts updates<commit_after>import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import cx from 'classnames';
import { COUNTRY_COMPARE_COLORS } from 'data/constants';
import CircularChart from 'components/circular-chart';
import NoContent from 'components/no-content';
import InfoButton from 'components/button/info-button';
import range from 'lodash/range';

import styles from './vulnerability-graph-styles.scss';

class VulnerabilityGraph extends PureComponent {
  // eslint-disable-line react/prefer-stateless-function
  /* eslint-disable react/no-array-index-key */

  handleInfoClick = slug => {
    const { setModalMetadata } = this.props;
    setModalMetadata({
      category: 'Country',
      slugs: [slug],
      open: true
    });
  };

  renderCircular() {
    const { sectionData } = this.props;
    const values = sectionData.data.map(
      country => (country ? Math.floor(country.value * 10) / 10 : 0)
    );
    return values ? (
      <div className={styles.circularChartContainer}>
        <InfoButton
          className={styles.infoBtn}
          infoOpen={false}
          handleInfoClick={() => this.handleInfoClick(sectionData.slug)}
          square
        />
        {values.map((value, index) => (
          <CircularChart key={index} index={index} value={value} />
        ))}
        <div className={styles.circularChartValues}>
          {values.map((value, index) => (
            <div key={index} style={{ color: COUNTRY_COMPARE_COLORS[index] }}>
              {value !== 0 ? `${value}%` : 'No data'}
            </div>
          ))}
        </div>
      </div>
    ) : (
      <NoContent message={'No data'} className={styles.noContent} />
    );
  }

  renderLine() {
    const { sectionData, inverted } = this.props;
    const values = sectionData.data.map(
      country => (country ? Math.floor(country.value * 100) / 100 : 'No data')
    );
    const countriesRiskValue = sectionData.data.map(
      country => (country ? parseInt(country.rank.absolute, 10) * 100 : 0)
    );
    const maximumCountries = sectionData.maximum;
    const riskAbsoluteValues = countriesRiskValue.map(
      riskValue => riskValue / maximumCountries
    );
    const position = inverted ? 'right' : 'left';
    return values ? (
      <div className={styles.lineChartContainer}>
        <InfoButton
          className={styles.infoBtn}
          infoOpen={false}
          handleInfoClick={() => this.handleInfoClick(sectionData.slug)}
        />
        <div className={styles.riskValue}>
          {values.map((value, index) => (
            <div key={index} style={{ color: COUNTRY_COMPARE_COLORS[index] }}>
              {value}
            </div>
          ))}
        </div>
        <div className={styles.riskMeter}>
          {values.map((value, index) => (
            <div
              key={index}
              className={styles.riskMarker}
              style={{
                [position]: `${riskAbsoluteValues[index]}%`,
                backgroundColor: COUNTRY_COMPARE_COLORS[index]
              }}
            />
          ))}
          {sectionData.data.length === 1 && (
            <div className={styles.riskAbsoluteValue}>
              <span className={styles.countriesNumber}>Rank</span>{' '}
              {sectionData.data.map(
                country => (country ? country.rank.absolute : '---')
              )}
              <span className={styles.countriesNumber}>
                {' '}
                of {maximumCountries} countries
              </span>
            </div>
          )}
          {range(10).map((_, i) => (
            <div
              key={i}
              className={cx(styles.riskTick, styles[`meter-${i + 1}`])}
            />
          ))}
        </div>
      </div>
{'fraction_non_alphanumeric': 0.13763440860215054, 'fraction_numerical': 0.006144393241167435, 'mean_word_length': 2.228061477441745, 'pattern_counts': {'":': 0, '<': 49, '<?xml version=': 0, '>': 66, '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': '1377258', 'n_tokens_mistral': 1875, 'n_tokens_neox': 1809, 'n_words': 356}