All files / hourly-chart/components/HourlyChart 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
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1x
 
 
 
 
1x
 
 
 
 
 
 
 
 
1x
 
 
 
1x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1x
 
 
 
 
 
 
 
1x
 
 
 
 
 
 
 
 
 
 
 
 
import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
 
import {
  ChartStateLoading as Loading,
  ChartCard,
  ChartHeader,
} from '@bufferapp/analyze-shared-components';
 
import AddReport from '@bufferapp/add-report';
import PostCountByHour from '../PostCountByHour';
import HourlyEngagementChart from '../HourlyEngagementChart';
import Legend from '../Legend';
import Title from '../Title';
import Header from '../ChartHeader';
 
const ChartContainer = styled.div`
  padding: 0.5rem 0.75rem 0rem;
  margin: 0 auto;
  position: relative;
`;
 
export class ChartContent extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      ref: null,
    };
  }
  render() {
    return (
      <div>
        <HourlyEngagementChart
          posts={this.props.postsCount}
          metric={this.props.selectedMetricData}
          timezone={this.props.timezone}
          chartRef={(node) => {
            this._chart = node;
            if (!this.state.ref) {
              this.setState({
                ref: true,
              });
            }
          }}
        />
        <PostCountByHour
          posts={this.props.postsCount}
          hourlyChart={this._chart}
          timezone={this.props.timezone}
        />
        <Legend metric={this.props.selectedMetricData} />
      </div>
    );
  }
}
 
ChartContent.defaultProps = {
  postsCount: [],
  timezone: 'America/Los_Angeles',
};
 
ChartContent.propTypes = {
  selectedMetricData: PropTypes.shape({
    label: PropTypes.string,
    hourlyMetrics: PropTypes.arrayOf(PropTypes.number),
  }).isRequired,
  postsCount: PropTypes.arrayOf(PropTypes.number),
  timezone: PropTypes.string,
};
 
const getStateForReport = props => ({
  selectedMetric: props.loading ? null : props.selectedMetricData.label
});
 
const HourlyChart = (props) => {
  if (props.profileService !== 'twitter') {
    return null;
  }
  return (
    <ChartCard>
      <ChartHeader>
        <Title />
        <AddReport
          chart="hourly-engagements"
          state={getStateForReport(props)}
        />
      </ChartHeader>
      <ChartContainer id="js-dom-to-png-hourly-engagements">
        {props.loading && <Loading active noBorder large />}
        {!props.loading &&
          <div>
            <Header {...props} />
            <ChartContent
              postsCount={props.postsCount}
              timezone={props.timezone}
              selectedMetricData={props.selectedMetricData}
            />
          </div>
        }
      </ChartContainer>
    </ChartCard>
  );
};
 
HourlyChart.defaultProps = {
  loading: false,
  selectedMetricData: null,
  postsCount: [],
  timezone: 'America/Los_Angeles',
  profileService: '',
};
 
HourlyChart.propTypes = {
  loading: PropTypes.bool,
  profileService: PropTypes.string,
  selectedMetricData: PropTypes.shape({
    label: PropTypes.string,
    hourlyMetrics: PropTypes.arrayOf(PropTypes.number),
  }),
  postsCount: PropTypes.arrayOf(PropTypes.number),
  timezone: PropTypes.string,
};
 
export default HourlyChart;