<commit_before>import React from 'react';
import 'whatwg-fetch'

import MpHeader from '../../widgets/mp-header'
import Friends from '../../widgets/friends'
import Piechart from '../../widgets/piechart'

import './styles.css'

function fetchJson(url) {
  return fetch(url).then(response => response.json())
}

export default class Mps extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      mp: {},
      voteSummary: {
        voteSummary: {},
        votePercentages: {},
      },
      subjectSummary: {
        standsTaken: [],
        idle: [],
        away: [],
      },
      nouns: [],
      similar: [],
    }
  }

  componentDidMount() {
    const { mpId } = this.props.params

    const mpUrl = `http://api-dot-thingmenn.appspot.com/api/mps/${mpId}`
    fetchJson(mpUrl)
      .then(mp => this.setState({ mp }))
      .catch(error => console.log(error))

    const mpVoteUrl = `http://api-dot-thingmenn.appspot.com/api/summary/votes/mp/${mpId}`
    fetchJson(mpVoteUrl)
      .then(voteSummary => this.setState({ voteSummary }))
      .catch(error => console.log(error))

    const mpSubjectUrl = `http://api-dot-thingmenn.appspot.com/api/summary/subjects/mp/${mpId}`
    fetchJson(mpSubjectUrl)
      .then(subjectSummary => this.setState({ subjectSummary }))
      .catch(error => console.log(error))

    const mpNounUrl = `http://api-dot-thingmenn.appspot.com/api/summary/nouns/mp/${mpId}`
    fetchJson(mpNounUrl)
      .then(nouns => this.setState({ nouns }))
      .catch(error => console.log(error))

    const mpSimilarUrl = `http://api-dot-thingmenn.appspot.com/api/mps/${mpId}/similar`
    fetchJson(mpSimilarUrl)
      .then(similar => this.setState({ similar }))
      .catch(error => console.log(error))
  }

  render() {
    const { mp, voteSummary, subjectSummary, nouns, similar } = this.state

    return (
      <div>
        <MpHeader voteSummary={voteSummary} {...mp} />

        <div className='MpDetails'>
          <div className="MpDetails-item">
            <Piechart voteSummary={voteSummary} />
          </div>

          <div className="MpDetails-item">
            <h3 className='heading'>Mest talað um</h3>
            <ul>
              {nouns.slice(0, 10).map(noun => (
                <div className='text' key={noun.noun}>
                  <strong>{noun.noun}</strong>: {noun.occurance}<commit_msg>more charts :cake:<commit_after>import React from 'react';
import 'whatwg-fetch'

import MpHeader from '../../widgets/mp-header'
import Friends from '../../widgets/friends'
import Piechart from '../../widgets/piechart'
import Barchart from '../../widgets/barchart'

import './styles.css'

function fetchJson(url) {
  return fetch(url).then(response => response.json())
}

export default class Mps extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      mp: {},
      voteSummary: {
        voteSummary: {},
        votePercentages: {},
      },
      subjectSummary: {
        standsTaken: [],
        idle: [],
        away: [],
      },
      nouns: [],
      similar: [],
    }
  }

  componentDidMount() {
    const { mpId } = this.props.params

    const mpUrl = `http://api-dot-thingmenn.appspot.com/api/mps/${mpId}`
    fetchJson(mpUrl)
      .then(mp => this.setState({ mp }))
      .catch(error => console.log(error))

    const mpVoteUrl = `http://api-dot-thingmenn.appspot.com/api/summary/votes/mp/${mpId}`
    fetchJson(mpVoteUrl)
      .then(voteSummary => this.setState({ voteSummary }))
      .catch(error => console.log(error))

    const mpSubjectUrl = `http://api-dot-thingmenn.appspot.com/api/summary/subjects/mp/${mpId}`
    fetchJson(mpSubjectUrl)
      .then(subjectSummary => this.setState({ subjectSummary }))
      .catch(error => console.log(error))

    const mpNounUrl = `http://api-dot-thingmenn.appspot.com/api/summary/nouns/mp/${mpId}`
    fetchJson(mpNounUrl)
      .then(nouns => this.setState({ nouns }))
      .catch(error => console.log(error))

    const mpSimilarUrl = `http://api-dot-thingmenn.appspot.com/api/mps/${mpId}/similar`
    fetchJson(mpSimilarUrl)
      .then(similar => this.setState({ similar }))
      .catch(error => console.log(error))
  }

  render() {
    const { mp, voteSummary, subjectSummary, nouns, similar } = this.state

    return (
      <div>
        <MpHeader voteSummary={voteSummary} {...mp} />

        <div className='MpDetails'>
          <div className="MpDetails-item">
            <Piechart voteSummary={voteSummary} />
          </div>

          <div className="MpDetails-item">
            <h3 className='heading'>Mest talað um</h3>
            <Piechart nouns={nouns} />

            <ul>
              {nouns.slice(0, 10).map(noun => (
                <div className='text' key={noun.noun}>
                  <strong>{noun.noun}</strong>: {noun.occurance}
{'fraction_non_alphanumeric': 0.1667010096847311, 'fraction_numerical': 0.0020605810838656502, 'mean_word_length': 2.5404814004376366, 'pattern_counts': {'":': 0, '<': 30, '<?xml version=': 0, '>': 54, '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': '251461', 'n_tokens_mistral': 1608, 'n_tokens_neox': 1585, 'n_words': 261}