<commit_before>'use strict';
import React, { PropTypes as T } from 'react';
import { Line as LineChart } from 'react-chartjs-2';
import _ from 'lodash';

import { percent, round } from '../../utils/utils';

var SectionDistribuicao = React.createClass({
  propTypes: {
    adminLevel: T.string,
    adminName: T.string,
    adminList: T.array,
    licencas2016: T.number
  },

  renderTrendLineChart: function (data) {
    let chartData = {
      labels: data.map(o => o.year),
      datasets: [{
        data: data.map(o => o.value),
        lineTension: 0,
        pointRadius: 0,
        // backgroundColor: 'transparent',
        borderColor: '#2EB199',
        borderWidth: 1
      }]
    };

    let chartOptions = {
      events: [],
      legend: {
        display: false
      },
      scales: {
        xAxes: [{
          display: false
        }],
        yAxes: [{
          display: false,
          ticks: {
            min: 0
          }
        }]
      },
      tooltips: {
        enabled: false
      }
    };

    return (
      <LineChart data={chartData} options={chartOptions} height={40} />
    );
  },

  renderTableRow: function (adminArea) {
    let totNat2016 = this.props.licencas2016;

    let licencas2016 = adminArea.data.licencas2016;
    let availableLicencas = adminArea.data.max2016 - licencas2016;
    let percentNational = percent(adminArea.data.licencas2016, totNat2016);
    let pop = _.last(adminArea.data['pop-residente']).value;
    let licencas1000Hab = licencas2016 / (pop / 1000);

    return (
      <li key={adminArea.id}>
        <span className='table-region'>{adminArea.name}</span>
        <div className='table-graph'>{this.renderTrendLineChart(adminArea.data['lic-geral'])}</div>
        <span className='table-available'>{availableLicencas}</span>
        <span className='table-national'>{percentNational}%</span>
        <span className='table-residents'>{round(licencas1000Hab, 1)}</span>
      </li>
    );
  },

  renderTable: function () {
    let adminList = this.props.adminList;

    let colLabel = this.props.adminLevel === 'national' ? 'Região' : 'Concelho';

    return (
      <ul className='table-distribution'>
        <li className='table-header'>
          <span className='table-region'>{colLabel}</span>
          <span className='table-graph'>Total de Licenças</span>
          <span className='table-available'>Vagas Disponíveis</span>
          <span className='table-national'>% do Total de Licenças</span>
          <span className='table-residents'>% do Total de População</span>
        </li>
        {adminList.map(this.renderTableRow)}
      </ul>
    );
  },<commit_msg>Add tooltip to section distribuicao<commit_after>'use strict';
import React, { PropTypes as T } from 'react';
import { Line as LineChart } from 'react-chartjs-2';
import _ from 'lodash';

import makeTooltip from '../../utils/tooltip';
import { percent, round } from '../../utils/utils';

var SectionDistribuicao = React.createClass({
  propTypes: {
    adminLevel: T.string,
    adminName: T.string,
    adminList: T.array,
    licencas2016: T.number
  },

  renderTrendLineChart: function (data) {
    let l = data.length - 1;

    let tooltipFn = makeTooltip(entryIndex => {
      let year = data[entryIndex];
      return (
        <div>
          <p>total {year.value}</p>
        </div>
      );
    });

    let pointRadius = data.map((o, i) => i === 0 || i === l ? 2 : 0);

    let chartData = {
      labels: data.map(o => o.year),
      datasets: [{
        data: data.map(o => o.value),
        lineTension: 0,
        pointRadius: pointRadius,
        pointBorderWidth: 0,
        pointBackgroundColor: '#2EB199',
        borderColor: '#2EB199',
        borderWidth: 1
      }]
    };

    let chartOptions = {
      layout: {
        padding: {
          left: 5,
          top: 2,
          right: 5
        }
      },
      legend: {
        display: false
      },
      scales: {
        xAxes: [{
          display: false
        }],
        yAxes: [{
          display: false,
          ticks: {
            min: 0
          }
        }]
      },
      tooltips: {
        enabled: false,
        mode: 'index',
        position: 'nearest',
        custom: tooltipFn
      }
    };

    return (
      <LineChart data={chartData} options={chartOptions} height={40} />
    );
  },

  renderTableRow: function (adminArea) {
    let totNat2016 = this.props.licencas2016;

    let licencas2016 = adminArea.data.licencas2016;
    let availableLicencas = adminArea.data.max2016 - licencas2016;
    let percentNational = percent(adminArea.data.licencas2016, totNat2016);
    let pop = _.last(adminArea.data['pop-residente']).value;
    let licencas1000Hab = licencas2016 / (pop / 1000);

    return (
      <li key={adminArea.id}>
        <span className='table-region'>{adminArea.name}</span>
        <div className='table-graph'>{this.renderTrendLineChart(adminArea.data['lic-geral'])}</div>
        <span className='table-available'>{availableLicencas}</span>
        <span className='table-national'>{percentNational}%</span>
        <span className='table-residents'>{round(licencas1000Hab, 1)}</span>
      </li>
    );
  },

  renderTable: function () {
    let adminList = this.props.adminList;

    return (
      <ul className='table-distribution'>
        <li className='table-header'>
          <span className='table-region'>Região</span>
          <span className='table-graph'>Total de Licenças</span>
          <span className='table-available'>Vagas Disponíveis</span>
          <span className='table-national'>% do Total de Licenças</span>
          <span className='table-residents'>% do Total de População</span>
        </li>
        {adminList.map(this.renderTableRow)}
      </ul>
    );
  },
{'fraction_non_alphanumeric': 0.1428818543504584, 'fraction_numerical': 0.02404428299602145, 'mean_word_length': 2.3421965317919073, 'pattern_counts': {'":': 0, '<': 61, '<?xml version=': 0, '>': 67, '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': '4668745', 'n_tokens_mistral': 1937, 'n_tokens_neox': 1790, 'n_words': 364}