Show updated at text in stats page

client/components/Stats/Stats.js

@@ -141,7 +141,7 @@ class Stats extends Component {
         </TitleWrapper>
         <Content>
           <StatsHead total={stats.total} period={period} changePeriod={this.changePeriod} />
-          <StatsCharts stats={stats[period]} period={period} />
+          <StatsCharts stats={stats[period]} updatedAt={stats.updatedAt} period={period} />
         </Content>
         <ButtonWrapper>
           <Button icon="arrow-left" onClick={this.goToHomepage}>

client/components/Stats/StatsCharts/StatsCharts.js

@@ -41,7 +41,7 @@ const Row = styled.div`
   }
 `;
 
-const StatsCharts = ({ stats, period }) => {
+const StatsCharts = ({ stats, period, updatedAt }) => {
   const periodText = period.includes('last')
     ? `the last ${period.replace('last', '').toLocaleLowerCase()}`
     : 'all time';
@@ -49,17 +49,17 @@ const StatsCharts = ({ stats, period }) => {
   return (
     <ChartsWrapper>
       <Row>
-        <Area data={stats.views} period={period} periodText={periodText} />
+        <Area data={stats.views} period={period} updatedAt={updatedAt} periodText={periodText} />
       </Row>
       {hasView.length
         ? [
             <Row key="second-row">
-              <Pie data={stats.stats.referrer} title="Referrals" />
-              <Bar data={stats.stats.browser} title="Browsers" />
+              <Pie data={stats.stats.referrer} updatedAt={updatedAt} title="Referrals" />
+              <Bar data={stats.stats.browser} updatedAt={updatedAt} title="Browsers" />
             </Row>,
             <Row key="third-row">
-              <Pie data={stats.stats.country} title="Country" />
-              <Bar data={stats.stats.os} title="OS" />
+              <Pie data={stats.stats.country} updatedAt={updatedAt} title="Country" />
+              <Bar data={stats.stats.os} updatedAt={updatedAt} title="OS" />
             </Row>,
           ]
         : null}
@@ -68,6 +68,7 @@ const StatsCharts = ({ stats, period }) => {
 };
 
 StatsCharts.propTypes = {
+  updatedAt: PropTypes.string.isRequired,
   period: PropTypes.string.isRequired,
   stats: PropTypes.shape({
     stats: PropTypes.object.isRequired,

client/components/Stats/StatsCharts/withTitle.js

@@ -1,6 +1,7 @@
 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%;
@@ -14,6 +15,7 @@ const Wrapper = styled.div`
 `;
 
 const Title = styled.h3`
+  margin-bottom: 12px;
   font-size: 24px;
   font-weight: 300;
 
@@ -22,6 +24,17 @@ const Title = styled.h3`
   }
 `;
 
+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;
@@ -35,6 +48,10 @@ const withTitle = ChartComponent => {
           {props.periodText && <Count>{props.data.reduce((sum, view) => sum + view, 0)}</Count>}
           {props.periodText ? ` clicks in ${props.periodText}` : props.title}.
         </Title>
+        {props.periodText &&
+          props.updatedAt && (
+            <SubTitle>Last update in {formatDate(props.updatedAt, 'dddd, hh:mm aa')}</SubTitle>
+          )}
         <ChartComponent {...props} />
       </Wrapper>
     );
@@ -43,6 +60,7 @@ const withTitle = ChartComponent => {
     data: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.object])).isRequired,
     periodText: PropTypes.string,
     title: PropTypes.string,
+    updatedAt: PropTypes.string.isRequired,
   };
   WithTitle.defaultProps = {
     title: '',