<commit_before>import _ from 'lodash'
import React from 'react'

import HighChart from 'components/molecules/highcharts/HighChart'
import format from 'utilities/format'

class LineChart extends HighChart {

  setConfig () {
    const first_indicator = this.props.selected_indicators[0]
    this.config = {
      chart: { type: 'line' },
      xAxis: {
        type: 'datetime',
        labels: {
          format: '{value:%b %d, %Y}'
        }
      },
      yAxis: {
        title: { text: '' },
        labels: {
          formatter: function () {
            return format.autoFormat(this.value, first_indicator.data_format)
          }
        }
      },
      tooltip: {
        pointFormatter: function (point) {
          const value = format.autoFormat(this.y, first_indicator.data_format)
          return `${this.series.name}: <b>${value}</b><br/>`
        }
      },
      series: this.setSeries()
    }
  }

  setSeries () { console.info('------ LineChart.setSeries')
    const data = this.props.datapoints.melted
    const groupByIndicator = this.props.groupBy === 'indicator'
    const grouped_data = groupByIndicator ? _.groupBy(data, 'indicator.id') : _.groupBy(data, 'location.id')
    const series = []
    _.forEach(grouped_data, group_collection => {
      group_collection = _.sortBy(group_collection, function (group) { return group.campaign.start_date.getTime() })
      series.push({
        name: groupByIndicator ? group_collection[0].indicator.name : group_collection[0].location.name,
        data: group_collection.map(datapoint => datapoint.value) // Needs to be sorted by date
      })
    })
    return series
  }
}

export default LineChart
<commit_msg>x axis and tooltip fix for line chart<commit_after>import _ from 'lodash'
import React from 'react'

import HighChart from 'components/molecules/highcharts/HighChart'
import format from 'utilities/format'

class LineChart extends HighChart {

  setConfig () {
    const first_indicator = this.props.selected_indicators[0]
    this.config = {
      chart: { type: 'line' },
      xAxis: {
        type: 'datetime',
        labels: {
          format: '{value:%b %d, %Y}'
        }
      },
      yAxis: {
        title: { text: '' },
        labels: {
          formatter: function () {
            return format.autoFormat(this.value, first_indicator.data_format)
          }
        }
      },
      tooltip: {
        pointFormatter: function (point) {
          const value = format.autoFormat(this.y, first_indicator.data_format)
          return `${this.series.name}: <b>${value}</b><br/>`
        }
      },
      series: this.setSeries()
    }
  }

  setSeries () { console.info('------ LineChart.setSeries')
    const data = this.props.datapoints.melted
    const groupByIndicator = this.props.groupBy === 'indicator'
    const grouped_data = groupByIndicator ? _.groupBy(data, 'indicator.id') : _.groupBy(data, 'location.id')
    const series = []
    _.forEach(grouped_data, group_collection => {
      group_collection = _.sortBy(group_collection, group => { return group.campaign.start_date.getTime() })
      series.push({
        name: groupByIndicator ? group_collection[0].indicator.name : group_collection[0].location.name,
        data: group_collection.map(datapoint => { return [datapoint.campaign.start_date.getTime(), datapoint.value] })
      })
      // dateTimes: group_collection.map(datapoint => datapoint.campaign.start_date.getTime())
    })
    return series
  }
}

export default LineChart

{'fraction_non_alphanumeric': 0.13031080695751354, 'fraction_numerical': 0.001710863986313088, 'mean_word_length': 2.6732984293193716, 'pattern_counts': {'":': 0, '<': 9, '<?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': '5041349', 'n_tokens_mistral': 1071, 'n_tokens_neox': 1056, 'n_words': 211}