72 lines
1.6 KiB
JavaScript
72 lines
1.6 KiB
JavaScript
import React from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import styled from 'styled-components';
|
|
import formatDate from 'date-fns/format';
|
|
|
|
const Wrapper = styled.div`
|
|
flex: 1 1 50%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
|
|
@media only screen and (max-width: 768px) {
|
|
flex-basis: 100%;
|
|
}
|
|
`;
|
|
|
|
const Title = styled.h3`
|
|
margin-bottom: 12px;
|
|
font-size: 24px;
|
|
font-weight: 300;
|
|
|
|
@media only screen and (max-width: 768px) {
|
|
font-size: 18px;
|
|
}
|
|
`;
|
|
|
|
const SubTitle = styled.span`
|
|
margin-bottom: 32px;
|
|
font-size: 13px;
|
|
font-weight: 300;
|
|
color: #aaa;
|
|
|
|
@media only screen and (max-width: 768px) {
|
|
font-size: 11px;
|
|
}
|
|
`;
|
|
|
|
const Count = styled.span`
|
|
font-weight: bold;
|
|
border-bottom: 1px dotted #999;
|
|
`;
|
|
|
|
const withTitle = ChartComponent => {
|
|
function WithTitle(props) {
|
|
return (
|
|
<Wrapper>
|
|
<Title>
|
|
{props.periodText && <Count>{props.data.reduce((sum, view) => sum + view, 0)}</Count>}
|
|
{props.periodText ? ` tracked clicks in ${props.periodText}` : props.title}.
|
|
</Title>
|
|
{props.periodText && props.updatedAt && (
|
|
<SubTitle>Last update in {formatDate(new Date(props.updatedAt), 'dddd, hh:mm aa')}.</SubTitle>
|
|
)}
|
|
<ChartComponent {...props} />
|
|
</Wrapper>
|
|
);
|
|
}
|
|
WithTitle.propTypes = {
|
|
data: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.object])).isRequired,
|
|
periodText: PropTypes.string,
|
|
title: PropTypes.string,
|
|
updatedAt: PropTypes.string.isRequired,
|
|
};
|
|
WithTitle.defaultProps = {
|
|
title: '',
|
|
periodText: '',
|
|
};
|
|
return WithTitle;
|
|
};
|
|
|
|
export default withTitle;
|