<commit_before>import CalHeatMap from 'cal-heatmap';
import moment from 'moment-timezone';
import React, { FC, SFC, useEffect, useState } from 'react';
import { connect } from 'react-redux';
import { RootState } from '../../../lib/ducks';
import User from '../../../lib/models/User';
import { apiV1LogCalHeatmapPath, logsPath } from '../../../lib/routes';

const Detail: SFC<{ user: User, date: string, items: number }> = ({ user, date, items }) => {
  if (items === -1) { return null; }
  const targetDate = new Date(date);
  const text = `${targetDate.getFullYear()}-${('00' + (targetDate.getMonth() + 1)).substr(-2)}-${('00' + targetDate.getDate()).substr(-2)}`;

  return (
    <div className="center">
      <i className="fa fa-refresh" />
      <a href={logsPath(user.iidxid, text)}>{text}</a>の更新数は{items}個です
    </div>
  );
};

function mapStateToProps(state: RootState) {
  return {
    mobile: state.$$meta.env.mobileView(),
  };
}
type Props = { user: User } & ReturnType<typeof mapStateToProps>;

const HeatMap: FC<Props> = ({ user, mobile }) => {
  const [date, setDate] = useState('');
  const [items, setItems] = useState(-1);

  useEffect(() => {
    if (user.iidxid === undefined) { return; }
    // @ts-ignore
    const cal = new CalHeatMap();
    const startDate = new Date();
    const range = mobile ? 3 : 12;
    startDate.setMonth(startDate.getMonth() - (range - 1));
    cal.init({
      domain: 'month',
      subDomain: 'day',
      data: `${apiV1LogCalHeatmapPath(user.iidxid)}?start={{d:start}}&stop={{d:end}}`,
      start: startDate,
      range,
      tooltip: true,
      cellSize: 9,
      domainLabelFormat: '%Y-%m',
      afterLoadData (timestamps: { [s: string]: number }) {
        const offset = (moment().tz('Asia/Tokyo').utcOffset() - moment().utcOffset())  * 60;
        const results: { [key: number]: number } = {};
        Object.keys(timestamps).forEach(timestamp => {
          const commitCount = timestamps[timestamp];
          results[parseInt(timestamp, 10) + offset] = commitCount;
        });
        return results;
      },
      onClick: (d: Date, nb: number) => {
        setDate(d.toDateString);
        setItems(nb);
      },
    });
  }, []);

  return (
    <div className="uk-panel uk-panel-box">
      <h3 className="uk-panel-title">更新履歴</h3>
      <div id="cal-heatmap" />
      <Detail {...{ user, date, items }} />
    </div>
  );
};

export default connect(mapStateToProps)(HeatMap);<commit_msg>fix date string<commit_after>import CalHeatMap from 'cal-heatmap';
import moment from 'moment-timezone';
import React, { FC, SFC, useEffect, useState } from 'react';
import { connect } from 'react-redux';
import { RootState } from '../../../lib/ducks';
import User from '../../../lib/models/User';
import { apiV1LogCalHeatmapPath, logsPath } from '../../../lib/routes';

const Detail: SFC<{ user: User, date: string, items: number }> = ({ user, date, items }) => {
  if (items === -1) { return null; }
  const targetDate = new Date(date);
  const text = `${targetDate.getFullYear()}-${('00' + (targetDate.getMonth() + 1)).substr(-2)}-${('00' + targetDate.getDate()).substr(-2)}`;

  return (
    <div className="center">
      <i className="fa fa-refresh" />
      <a href={logsPath(user.iidxid, text)}>{text}</a>の更新数は{items}個です
    </div>
  );
};

function mapStateToProps(state: RootState) {
  return {
    mobile: state.$$meta.env.mobileView(),
  };
}
type Props = { user: User } & ReturnType<typeof mapStateToProps>;

const HeatMap: FC<Props> = ({ user, mobile }) => {
  const [date, setDate] = useState('');
  const [items, setItems] = useState(-1);

  useEffect(() => {
    if (user.iidxid === undefined) { return; }
    // @ts-ignore
    const cal = new CalHeatMap();
    const startDate = new Date();
    const range = mobile ? 3 : 12;
    startDate.setMonth(startDate.getMonth() - (range - 1));
    cal.init({
      domain: 'month',
      subDomain: 'day',
      data: `${apiV1LogCalHeatmapPath(user.iidxid)}?start={{d:start}}&stop={{d:end}}`,
      start: startDate,
      range,
      tooltip: true,
      cellSize: 9,
      domainLabelFormat: '%Y-%m',
      afterLoadData (timestamps: { [s: string]: number }) {
        const offset = (moment().tz('Asia/Tokyo').utcOffset() - moment().utcOffset())  * 60;
        const results: { [key: number]: number } = {};
        Object.keys(timestamps).forEach(timestamp => {
          const commitCount = timestamps[timestamp];
          results[parseInt(timestamp, 10) + offset] = commitCount;
        });
        return results;
      },
      onClick: (d: Date, nb: number) => {
        setDate(d.toLocaleDateString());
        setItems(nb);
      },
    });
  }, []);

  return (
    <div className="uk-panel uk-panel-box">
      <h3 className="uk-panel-title">更新履歴</h3>
      <div id="cal-heatmap" />
      <Detail {...{ user, date, items }} />
    </div>
  );
};

export default connect(mapStateToProps)(HeatMap);
{'fraction_non_alphanumeric': 0.19343065693430658, 'fraction_numerical': 0.008921330089213302, 'mean_word_length': 3.013832384052075, 'pattern_counts': {'":': 0, '<': 31, '<?xml version=': 0, '>': 41, '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': '2267655', 'n_tokens_mistral': 1682, 'n_tokens_neox': 1651, 'n_words': 363}