<commit_before>import React from 'react';
import PropTypes from 'prop-types';
import { Line } from 'react-chartjs-2';

export default function LineChart({ data, xUnit, yLabel, yUnit }) {
  const series = {
    datasets: [
      {
        label: 'Average',
        data: data,
        borderColor: '#198CFF',
        fill: false,
        showLine: false,
        pointBackgroundColor: '#198CFF',
      },
    ],
  };

  const options = {
    defaultFontFamily:
      "'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif",
    legend: {
      display: false,
    },
    tooltips: {
      intersect: false,
    },
    scales: {
      yAxes: [
        {
          ticks: {
            beginAtZero: true,
            maxTicksLimit: 5,
            callback: function (value, index, values) {
              return index === values.length - 1 && yUnit
                ? `(${yUnit}) ${value}`
                : value;
            },
            fontSize: 14,
          },
          gridLines: {
            drawOnChartArea: false,
          },
          scaleLabel: {
            display: !!yLabel,
            labelString: yLabel,
            fontSize: 14,
          },
        },
      ],

      xAxes: [
        {
          type: 'time',
          time: {
            tooltipFormat: 'MMM D, YYYY',
            unit: xUnit || 'day',
            displayFormats: {<commit_msg>Add hourly to tool tip<commit_after>import React from 'react';
import PropTypes from 'prop-types';
import { Line } from 'react-chartjs-2';

export default function LineChart({ data, xUnit, yLabel, yUnit }) {
  const series = {
    datasets: [
      {
        label: 'Average',
        data: data,
        borderColor: '#198CFF',
        fill: false,
        showLine: false,
        pointBackgroundColor: '#198CFF',
      },
    ],
  };

  const options = {
    defaultFontFamily:
      "'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif",
    legend: {
      display: false,
    },
    tooltips: {
      intersect: false,
    },
    scales: {
      yAxes: [
        {
          ticks: {
            beginAtZero: true,
            maxTicksLimit: 5,
            callback: function (value, index, values) {
              return index === values.length - 1 && yUnit
                ? `(${yUnit}) ${value}`
                : value;
            },
            fontSize: 14,
          },
          gridLines: {
            drawOnChartArea: false,
          },
          scaleLabel: {
            display: !!yLabel,
            labelString: yLabel,
            fontSize: 14,
          },
        },
      ],

      xAxes: [
        {
          type: 'time',
          time: {
            tooltipFormat: `MMM D, YYYY ${xUnit === 'hour' ? 'hA' : ''}`,
            unit: xUnit || 'day',
            displayFormats: {
{'fraction_non_alphanumeric': 0.12710951526032316, 'fraction_numerical': 0.00933572710951526, 'mean_word_length': 1.4184027777777777, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, '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': '3509424', 'n_tokens_mistral': 853, 'n_tokens_neox': 817, 'n_words': 195}