<commit_before>import _ from 'lodash'
import React, {Component} from 'react'
import ResourceTable from 'components/molecules/ResourceTable'
import moment from 'moment'
import format from 'utilities/format'
import {AgGridReact, reactCellRendererFactory} from 'ag-grid-react'
import IntegerCell from 'components/table/IntegerCell'
import DateCell from 'components/table/DateCell'
import BoolCell from 'components/table/BoolCell'
import PercentCell from 'components/table/PercentCell'
import DateTimePicker from 'react-widgets/lib/DateTimePicker'
import RhizomeAPI from 'utilities/api'


class DataEntryTable extends Component {
  constructor (props) {
    super(props)
    this.state = {
      new_date: new Date(),
      new_value: null
    }
  }

  _addDatapoint = () => {
    const new_value = this.refs.new_value.value
    const datapoint = {
      indicator_id: this.props.selected_indicators[0].id,
      location_id: this.props.selected_locations[0].id,
      data_date: moment(this.state.new_date).format('YYYY-MM-DD'),
      value: new_value
    }
    RhizomeAPI.post('/date_datapoint/', datapoint).then(result => {
      console.log('result', result)
      if (result.status === 201) {
        this.props.addDatapoint(result.data)
      }
    })
    this.refs.new_value.value = null
  }

  render = () => {
    const props = this.props
    const datapoints = props.datapoints.flattened
    const indicator = props.selected_indicators[0]
    const cell_style = {
      width: '25rem',
      textAlign: 'center'
    }
    const rows = datapoints.map(datapoint => {
      const cellParams = {
        datapoint: datapoint,
        updateDatapoint: props.updateDatapoint,
        removeDatapoint: props.removeDatapoint
      }
      let value_cell = <IntegerCell cellParams={cellParams} input_style={{textAlign: 'center'}}/>
      if (indicator.data_format === 'bool') {
        value_cell = <BoolCell cellParams={cellParams}/>
      } else if (indicator.data_format === 'pct') {
        value_cell = <PercentCell cellParams={cellParams}/>
      }
      return (
        <tr>
          <td style={cell_style}>{moment(datapoint.data_date).format('YYYY-MM-DD')}</td>
          <td style={cell_style}>{value_cell}</td>
        </tr>
      )
    })

    const new_datapoint_row = (
      <tr>
        <td>
          <DateTimePicker
            style={{left: '.9rem'}}
            value={this.state.new_date}
            time={false}
            format={'YYYY-MM-DD'}<commit_msg>Sort datapoints by date in date data_entry<commit_after>import _ from 'lodash'
import React, {Component} from 'react'
import ResourceTable from 'components/molecules/ResourceTable'
import moment from 'moment'
import format from 'utilities/format'
import {AgGridReact, reactCellRendererFactory} from 'ag-grid-react'
import IntegerCell from 'components/table/IntegerCell'
import DateCell from 'components/table/DateCell'
import BoolCell from 'components/table/BoolCell'
import PercentCell from 'components/table/PercentCell'
import DateTimePicker from 'react-widgets/lib/DateTimePicker'
import RhizomeAPI from 'utilities/api'


class DataEntryTable extends Component {
  constructor (props) {
    super(props)
    this.state = {
      new_date: new Date(),
      new_value: null
    }
  }

  _addDatapoint = () => {
    const new_value = this.refs.new_value.value
    const datapoint = {
      indicator_id: this.props.selected_indicators[0].id,
      location_id: this.props.selected_locations[0].id,
      data_date: moment(this.state.new_date).format('YYYY-MM-DD'),
      value: new_value
    }
    RhizomeAPI.post('/date_datapoint/', datapoint).then(result => {
      console.log('result', result)
      if (result.status === 201) {
        this.props.addDatapoint(result.data)
      }
    })
    this.refs.new_value.value = null
  }

  render = () => {
    const props = this.props
    const datapoints = props.datapoints.flattened
    const sorted_datapoints = _.sortBy(props.datapoints.flattened, 'data_date')
    const indicator = props.selected_indicators[0]
    const cell_style = {
      width: '25rem',
      textAlign: 'center'
    }
    const rows = sorted_datapoints.map(datapoint => {
      const cellParams = {
        datapoint: datapoint,
        updateDatapoint: props.updateDatapoint,
        removeDatapoint: props.removeDatapoint
      }
      let value_cell = <IntegerCell cellParams={cellParams} input_style={{textAlign: 'center'}}/>
      if (indicator.data_format === 'bool') {
        value_cell = <BoolCell cellParams={cellParams}/>
      } else if (indicator.data_format === 'pct') {
        value_cell = <PercentCell cellParams={cellParams}/>
      }
      return (
        <tr>
          <td style={cell_style}>{moment(datapoint.data_date).format('YYYY-MM-DD')}</td>
          <td style={cell_style}>{value_cell}</td>
        </tr>
      )
    })

    const new_datapoint_row = (
      <tr>
        <td>
          <DateTimePicker
            style={{left: '.9rem'}}
            value={this.state.new_date}
            time={false}
            format={'YYYY-MM-DD'}
{'fraction_non_alphanumeric': 0.12243690851735016, 'fraction_numerical': 0.003548895899053628, 'mean_word_length': 3.016627078384798, 'pattern_counts': {'":': 0, '<': 27, '<?xml version=': 0, '>': 33, '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': '258900', 'n_tokens_mistral': 1618, 'n_tokens_neox': 1595, 'n_words': 307}