<commit_before>import React, { Component } from 'react'
import { Doughnut } from 'react-chartjs'
import { colors } from '../../tools.js'
import DoughnutChartList from './DoughnutChartList/DoughnutChartList'
import Percent from '../../Statistics/Percent/Percent'

class DoughnutChart extends Component {
  formatData(data) {
    return Object.keys(data)
      .sort((a, b) => {
        return data[a] < data[b]
      })
      .map( (val, idx) => {
        const color = this.setColor(idx)

        return {
          'label': val,
          'value': data[val],
          'color':  color.value,
          'colorName': color.name
        }
      })
  }

  setColor(idx) {
    return colors[idx] ? colors[idx] : {name: 'grey', value: '#767676'}
  }

  render() {
    const data = this.formatData(this.props.data)
    const styles = {
      chart: {
        display: 'flex',
        flexWrap: 'wrap',
        justifyContent: 'center',
      },
    }

    if (data.length === 1) {
      return <Percent value={100} total={100} label={data[0].label} icon="database icon" size="small" />
    } else if (data.length === 0) {
      return <h1>No data</h1>
    } else {
      return (
        <div><commit_msg>Fix display of Percent Component instead of Chart when only 2 data send<commit_after>import React, { Component } from 'react'
import { Doughnut } from 'react-chartjs'
import { colors } from '../../tools.js'
import DoughnutChartList from './DoughnutChartList/DoughnutChartList'
import Percent from '../../Statistics/Percent/Percent'

class DoughnutChart extends Component {
  formatData(data) {
    return Object.keys(data)
      .sort((a, b) => {
        return data[a] < data[b]
      })
      .map( (val, idx) => {
        const color = this.setColor(idx)

        return {
          'label': val,
          'value': data[val],
          'color':  color.value,
          'colorName': color.name
        }
      })
  }

  setColor(idx) {
    return colors[idx] ? colors[idx] : {name: 'grey', value: '#767676'}
  }

  render() {
    const data = this.formatData(this.props.data)
    const styles = {
      chart: {
        display: 'flex',
        flexWrap: 'wrap',
        justifyContent: 'center',
      },
    }

    if (data.length === 2) {
      return <Percent value={100} total={100} label={data[0].label} icon="database icon" size="small" />
    } else if (data.length === 0) {
      return <h1>No data</h1>
    } else {
      return (
        <div>
{'fraction_non_alphanumeric': 0.15553745928338764, 'fraction_numerical': 0.014250814332247556, 'mean_word_length': 2.289156626506024, 'pattern_counts': {'":': 0, '<': 13, '<?xml version=': 0, '>': 15, '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': '3094164', 'n_tokens_mistral': 804, 'n_tokens_neox': 775, 'n_words': 191}