All files / hourly-chart/components/Tooltip index.jsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
 
 
 
 
 
 
 
1x
 
 
 
 
1x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1x
 
 
 
 
1x
 
 
 
 
 
 
 
1x
 
 
 
 
 
 
 
 
 
 
 
1x
 
 
 
 
 
 
 
 
 
 
 
 
1x
 
 
 
 
 
 
 
 
 
 
 
 
import React from 'react';
import PropTypes from 'prop-types';
import moment from 'moment';
import numeral from 'numeral';
 
import ColorIcon from '../ColorIcon';
 
const header = {
  fontSize: '8pt',
  color: '#cfcfcf',
};
 
const Header = ({ hour, totalUpdates }) => {
  const formattedHour = moment(hour).format('h A');
  const formattedNextHour = moment(hour).add(1, 'hour').format('h A');
  const formattedTotalUpdates = numeral(totalUpdates).format('0,0');
  let headerCopy;
  switch (totalUpdates) {
    case 0:
      headerCopy = (<span>There were no updates</span>);
      break;
    case 1:
      headerCopy = (<span>There was <b>1</b> update</span>);
      break;
    default:
      headerCopy = (<span>There were a total of <b>{formattedTotalUpdates}</b> updates</span>);
      break;
  }
  return (
    <div>
      <span style={header}>{formattedHour} - {formattedNextHour}</span>
      <br />
      <br />
      { /* eslint-disable */ }
      {headerCopy} published between <b>{formattedHour}</b> and <b>{formattedNextHour}</b> and you earned: 
      { /* eslint-enable */ }
      <br />
      <br />
    </div>
  );
};
 
Header.propTypes = {
  hour: PropTypes.number.isRequired,
  totalUpdates: PropTypes.number.isRequired,
};
 
const Summary = ({ item, circle }) => (
  <span>
    <ColorIcon circle={circle} metric={item.series.name} />
    <b>{numeral(item.y).format('0,0')} {item.series.name}</b>
    <br />
  </span>
);
 
Summary.propTypes = {
  item: PropTypes.shape({
    point: PropTypes.shape({
      color: PropTypes.string,
    }),
    series: PropTypes.shape({
      name: PropTypes.string,
    }),
  }).isRequired,
  circle: PropTypes.bool.isRequired,
};
 
const Tooltip = ({ points }) => (
  <div>
    <Header hour={points[0].key} totalUpdates={points[0].point.totalUpdates} />
    {points.reverse().map((point, index) =>
      <Summary
        key={point.series.name}
        item={point}
        circle={points.length === 2 && index === 0}
      />)
    }
  </div>
);
 
Tooltip.propTypes = {
  points: PropTypes.arrayOf(PropTypes.shape({
    point: PropTypes.shape({
      color: PropTypes.string,
    }),
    series: PropTypes.shape({
      name: PropTypes.string,
    }),
  })).isRequired,
};
 
export default Tooltip;