<commit_before>import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import { format } from 'd3-format';

import './widget-chart-tooltip-styles.scss';

class WidgetChartTooltip extends PureComponent {
  render() {
    const { payload, settings, colors, hideZeros } = this.props;
    const values = payload.length > 0 && payload[0].payload;

    return (
      <div className="c-widget-chart-tooltip">
        {settings.map(
          d =>
            (hideZeros && !values[d.key] ? null : (
              <div key={d.key} className="data-line">
                {d.label && (
                  <div className="data-label">
                    {colors &&
                      colors[d.key] && (
                        <div
                          className="data-color"
                          style={{ backgroundColor: colors[d.key] }}
                        />
                      )}
                    {<span>{values[d.label]}</span>}
                  </div>
                )}
                {d.unit
                  ? format(
                    d.unit === '%'
                      ? d.unitFormat ? d.unitFormat : '.1f'
                      : '.3s'
                  )(values[d.key])
                  : values[d.key]}
                {d.unit}
              </div>
            ))
        )}
      </div>
    );
  }
}

WidgetChartTooltip.propTypes = {
  payload: PropTypes.array,
  settings: PropTypes.array,
  colors: PropTypes.object,
  hideZeros: PropTypes.bool
};

export default WidgetChartTooltip;
<commit_msg>improve char tooltip<commit_after>import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import { format } from 'd3-format';

import './widget-chart-tooltip-styles.scss';

class WidgetChartTooltip extends PureComponent {
  render() {
    const { payload, settings, colors, hideZeros } = this.props;
    const values = payload.length > 0 && payload[0].payload;

    return (
      <div className="c-widget-chart-tooltip">
        {settings.map(
          d =>
            (hideZeros && !values[d.key] ? null : (
              <div key={d.key} className="data-line">
                {d.label && (
                  <div className="data-label">
                    {colors &&
                      colors[d.key] && (
                        <div
                          className="data-color"
                          style={{ backgroundColor: colors[d.key] }}
                        />
                      )}
                    {<span>{values[d.label]}</span>}
                  </div>
                )}
                {d.unit
                  ? format(
                    d.unitFormat 
                      ? d.unitFormat 
                      : d.unit === '%'
                        ? '.1f'
                        : '.3s'
                  )(values[d.key])
                  : values[d.key]}
                {d.unit}
              </div>
            ))
        )}
      </div>
    );
  }
}

WidgetChartTooltip.propTypes = {
  payload: PropTypes.array,
  settings: PropTypes.array,
  colors: PropTypes.object,
  hideZeros: PropTypes.bool
};

export default WidgetChartTooltip;

{'fraction_non_alphanumeric': 0.12960050330292544, 'fraction_numerical': 0.0031456432840515887, 'mean_word_length': 1.2222222222222223, 'pattern_counts': {'":': 0, '<': 21, '<?xml version=': 0, '>': 25, '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': '5716182', 'n_tokens_mistral': 878, 'n_tokens_neox': 841, 'n_words': 158}