<commit_before>import React from 'react'
import { Chart, Histogram } from '../src'
import { histogramData, stackedHistogramData } from './exampleData'
import d3 from 'd3'

// Tooltipdata is an object currently defined in the component
// Properties for Histogram tooltipData are :
//    label : string
//    statckCounts: int[]
//    stackNames : string[]
//    xPos: int
//    yPos: int

const toolTipFunction = (tooltipData) => {
  let d = tooltipData
  let total = tooltipData.stackCounts.reduce((prev, count) => {
    return prev + count
  }, 0)
  let toolTip =
    '<span class="title">' + d.label + '</span>' +
    '</span>Total: ' + d3.format('n')(total) +
    '<br /><small>'
  toolTip += d.stackCounts.reduce((prev, count, index) => {
    return prev + d.stackNames[index] + ' : ' + d3.format('n')(count) + '<br />'
  }, '')
  toolTip += '</small>'
  return toolTip
}

class HistogramExample extends React.Component {
  render () {
    return (
      <div>
        <div></div>
        <div>
          <Chart title='Histogram' width={800} height={200} data={histogramData} tipFunction={toolTipFunction} >
            <Histogram addOverlay />
          </Chart>
        </div>
        <div>
          <Chart title='Stacked Histogram' width={800} height={200} data={stackedHistogramData} tipFunction={toolTipFunction}><commit_msg>Changed tooltip Function to use reduce right<commit_after>import React from 'react'
import { Chart, Histogram } from '../src'
import { histogramData, stackedHistogramData } from './exampleData'
import d3 from 'd3'

// Tooltipdata is an object currently defined in the component
// Properties for Histogram tooltipData are :
//    label : string
//    statckCounts: int[]
//    stackNames : string[]
//    xPos: int
//    yPos: int

const toolTipFunction = (tooltipData) => {
  let d = tooltipData
  let total = tooltipData.stackCounts.reduce((prev, count) => {
    return prev + count
  }, 0)
  let toolTip =
    '<span class="title">' + d.label + '</span>' +
    '</span>Total: ' + d3.format('n')(total) +
    '<br /><small>'
  toolTip += d.stackCounts.reduceRight((prev, count, index) => {
    return prev + d.stackNames[index] + ' : ' + d3.format('n')(count) + '<br />'
  }, '')
  toolTip += '</small>'
  return toolTip
}

class HistogramExample extends React.Component {
  render () {
    return (
      <div>
        <div></div>
        <div>
          <Chart title='Histogram' width={800} height={200} data={histogramData} tipFunction={toolTipFunction} >
            <Histogram addOverlay />
          </Chart>
        </div>
        <div>
          <Chart title='Stacked Histogram' width={800} height={200} data={stackedHistogramData} tipFunction={toolTipFunction}>
{'fraction_non_alphanumeric': 0.15731166912850814, 'fraction_numerical': 0.012555391432791729, 'mean_word_length': 3.025260029717682, 'pattern_counts': {'":': 0, '<': 37, '<?xml version=': 0, '>': 43, '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': '7561045', 'n_tokens_mistral': 863, 'n_tokens_neox': 846, 'n_words': 217}