Merge pull request #156 from PublicHealthEngland/development

Essentials updates and improvements - fixes #79, #80, #125, #128, #134, #135, and #139. With thanks to @MikeCoats, @richardTowers, and @dracos for their contributions.
UKHSA-Internal · May 5, 2020 · 840722d · 840722d
2 parents 0a17f53 + 9906e55
commit 840722d
Show file tree

Hide file tree

Showing 30 changed files with 400 additions and 169 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "covid-public",
-  "version": "1.5.4",
+  "version": "1.5.5",
   "private": true,
   "homepage": "https://coronavirus.data.gov.uk/",
   "dependencies": {
@@ -24,7 +24,6 @@
     "react-scripts": "3.4.0",
     "styled-components": "^5.0.1",
     "moment": "^2.24.0",
-    "pythonic": "^2.0.3",
     "remark": "^12.0.0",
     "remark-toc": "^7.0.0",
     "remark-slug": "^6.0.0",

diff --git a/public/index.html b/public/index.html
@@ -23,6 +23,6 @@
   </head>
   <body class="govuk-template__body js-enabled">
     <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
+    <div class="app-root" id="top"></div>
   </body>
 </html>
diff --git a/src/App.js b/src/App.js
@@ -1,5 +1,5 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-import React from 'react';
+import React,  { Fragment } from 'react';
 import { Switch, Route, Redirect } from 'react-router';
 import { Header, Footer } from 'govuk-react-jsx';
 
@@ -11,24 +11,43 @@ import Accessibility from 'pages/Accessibility';
 import Cookies from 'pages/Cookies';
 import Navigation from 'components/Navigation';
 import CookieBanner from 'components/CookieBanner';
+import BackToTop from 'components/BackToTop';
+
+
+const FooterContents = () => {
+
+    return <Fragment>
+        <p className={ "govuk-footer__meta-custom" }>
+            For feedback email&nbsp;
+            <a className="govuk-footer__link"
+               href="mailto:[email protected]?Subject=Coronavirus%20dashboard%20feedback"
+               rel="noopener noreferrer"
+               target="_blank"
+            >[email protected]</a>
+        </p>
+        <p className={ "govuk-footer__meta-custom" }>
+            Developed by&nbsp;
+            <a className="govuk-footer__link"
+               href="https://www.gov.uk/government/organisations/public-health-england"
+               target="_blank"
+               rel="noopener noreferrer"
+            >PHE</a>
+            &nbsp;and&nbsp;
+            <a className="govuk-footer__link"
+               href="https://www.nhsx.nhs.uk/"
+               target="_blank"
+               rel="noopener noreferrer"
+            >NHSX</a>
+        </p>
+    </Fragment>
+
+}; // FooterContents
+
 
 const F = props => <Footer
     { ...props }
     meta={ {
-        children: [
-            'For feedback email ',
-            <a className="govuk-footer__link"
-               href="mailto:[email protected]?Subject=Coronavirus%20dashboard%20feedback"
-               rel="noopener noreferrer" target="_blank">[email protected]</a>,
-            <br/>,
-            <br/>,
-            'Developed by ',
-            <a className="govuk-footer__link" href="https://www.gov.uk/government/organisations/public-health-england"
-               target="_blank" rel="noopener noreferrer">PHE</a>,
-            ' and ',
-            <a className="govuk-footer__link" href="https://www.nhsx.nhs.uk/" target="_blank"
-               rel="noopener noreferrer">NHSX</a>,
-        ],
+        children: <FooterContents/>,
         items: [
             { children: ['Archive'], href: '/archive' },
             { children: ['Accessibility'], href: '/accessibility' },
@@ -38,6 +57,7 @@ const F = props => <Footer
     } }
 />;
 
+
 const App = () => {
 
     return (
@@ -51,6 +71,15 @@ const App = () => {
                 homepageUrlHref="https://gov.uk"
             />
             <Navigation/>
+
+            {/* We only want back-to-top links on the main & about pages. */}
+            <Switch>
+                {/* These back-to-top links are the 'overlay' style that stays
+                    on screen as we scroll. */}
+                <Route path="/about" exact render={()=>(<BackToTop mode="overlay"/>)} />
+                <Route path="/" exact render={()=>(<BackToTop mode="overlay"/>)} />
+            </Switch>
+
             <Switch>
                 <Route path="/region" component={ MobileRegionTable }/>
                 <Route path="/about" component={ About }/>
@@ -60,6 +89,15 @@ const App = () => {
                 <Route path="/" component={ Regional }/>
                 <Redirect to="/"/>
             </Switch>
+
+            {/* We only want back-to-top links on the main & about pages. */}
+            <Switch>
+                {/* These back-to-top links are the 'inline' style that sits
+                    statically between the end of the content and the footer. */}
+                <Route path="/about" exact render={()=>(<BackToTop mode="inline"/>)} />
+                <Route path="/" exact render={()=>(<BackToTop mode="inline"/>)} />
+            </Switch>
+
             <Switch>
                 <Route path="/" exact component={ F }/>
                 <Route path="/about" exact component={ F }/>
@@ -71,4 +109,5 @@ const App = () => {
     );
 }
 
+
 export default App;
diff --git a/src/components/BackToTop/BackToTop.js b/src/components/BackToTop/BackToTop.js
@@ -0,0 +1,50 @@
+// @flow
+
+import React from 'react';
+import type { ComponentType } from 'react';
+
+import type { Props } from './BackToTop.types';
+import * as Styles from './BackToTop.styles';
+
+import useBackToTopOverlayVisible from 'hooks/useBackToTopOverlayVisible';
+
+const BackToTopLink: ComponentType<Props> = () => {
+  return (
+    <div class="govuk-width-container">
+      <a class="govuk-link govuk-link--no-visited-state" href="#top">
+        <svg role="presentation" focusable="false" class="back-to-top" xmlns="http://www.w3.org/2000/svg" width="13" height="17" viewBox="0 0 13 17">
+          <path fill="currentColor" d="M6.5 0L0 6.5 1.4 8l4-4v12.7h2V4l4.3 4L13 6.4z"></path>
+        </svg>Back to top
+      </a>
+    </div>
+  );
+};
+
+/**
+ * A govuk style back-to-top link component.
+ *
+ * This component can either appear as an 'overlay' stuck to the bottom of the
+ * screen hovering over the content, or as an 'inline' link that sits between
+ * other components in the vertical page flow.
+ *
+ * @param {string} mode Either 'overlay' or 'inline' to choose which style to
+ * display this component.
+ */
+const BackToTop: ComponentType<Props> = ({ mode }: Props) => {
+  const visible = useBackToTopOverlayVisible('footer');
+  if (mode === 'overlay'){
+      return (
+        <Styles.OverlayContainer  style={{opacity: visible ? 1 : 0}}>
+          <BackToTopLink />
+        </Styles.OverlayContainer>
+      );
+  } else {
+      return (
+        <Styles.InlineContainer style={{opacity: visible ? 0 : 1}}>
+          <BackToTopLink />
+        </Styles.InlineContainer>
+      );  
+    }
+};
+
+export default BackToTop;
diff --git a/src/components/BackToTop/BackToTop.styles.js b/src/components/BackToTop/BackToTop.styles.js
@@ -0,0 +1,25 @@
+// @flow
+
+import styled from 'styled-components';
+import type { ComponentType } from 'react';
+
+
+export const OverlayContainer: ComponentType<*> = (() => {
+  return styled.div`
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+  padding-top: 20px;
+  padding-bottom: 20px;
+  background: transparent;
+  z-index: 1234567;
+   `;
+})();
+
+export const InlineContainer: ComponentType<*> = (() => {
+  return styled.div`
+  width: 100%;
+  margin-top: 20px;
+  margin-bottom: 40px;
+  `;
+})();
diff --git a/src/components/BackToTop/BackToTop.types.js b/src/components/BackToTop/BackToTop.types.js
@@ -0,0 +1,6 @@
+// @flow
+
+export type Props = {|
+  hover: boolean,
+|};
+
diff --git a/src/components/BackToTop/index.js b/src/components/BackToTop/index.js
@@ -0,0 +1 @@
+export { default } from './BackToTop';
diff --git a/src/components/BarChart/BarChart.js b/src/components/BarChart/BarChart.js
@@ -25,7 +25,8 @@ const BarChart: ComponentType<Props> = ({ header, tooltipText, data }: Props) =>
 
   const
       dataSorted = data.sort(sortFunc),
-      mobileView = useResponsiveLayout(500)  === "mobile";
+      mobileView = useResponsiveLayout(500)  === "mobile",
+      labelFontSize = mobileView ? 11 : 14;
 
   return (
     <Styles.Container>
@@ -56,10 +57,9 @@ const BarChart: ComponentType<Props> = ({ header, tooltipText, data }: Props) =>
                 },
                 ticks: {
                   minRotation: 45,
-                  fontSize: mobileView ? 11 : 14,
+                  fontSize: labelFontSize,
                   fontColor: '#1A2B2B',
                   autoSkip: false,
-                  minTicksLimit: 8,
                   maxTicksLimit: 15
                 },
               }],
@@ -68,7 +68,7 @@ const BarChart: ComponentType<Props> = ({ header, tooltipText, data }: Props) =>
                   drawBorder: false,
                 },
                 ticks: {
-                  fontSize: 14,
+                  fontSize: labelFontSize,
                   fontColor: '#1A2B2B',
                   beginAtZero: true,
                   userCallback: function (value, index, values) {

diff --git a/src/components/CategoricalBarChart/CategoricalBarChart.js b/src/components/CategoricalBarChart/CategoricalBarChart.js
@@ -9,7 +9,7 @@ import * as Styles from './CategoricalBarChart.styles';
 import useResponsiveLayout from 'hooks/useResponsiveLayout';
 
 import numeral from 'numeral';
-import { zip } from 'pythonic';
+import { transpose } from "d3-array";
 
 
 const sortFunc = (a, b) => {
@@ -37,7 +37,7 @@ const getBarChartData = ({ data, categoryLabels, colors, columnLabelGetter }: Ca
 
         return {
             labels: data[0].map(d => columnLabelGetter(d)),
-            datasets: zip(data, categoryLabels, colors).map(item => ({
+            datasets: transpose([data, categoryLabels, colors]).map(item => ({
                 data: item[0].map(d => d.value),
                 label: item[1],
                 backgroundColor: item[2],
@@ -52,6 +52,8 @@ const getBarChartData = ({ data, categoryLabels, colors, columnLabelGetter }: Ca
 
 
 const getBarChartOptions = (tooltipText, mobileView: boolean) => {
+
+    const labelFontSize = mobileView ? 11 : 14;
 
     return {
         barValueSpacing: 20,
@@ -69,10 +71,9 @@ const getBarChartOptions = (tooltipText, mobileView: boolean) => {
                 stacked: false,
                 ticks: {
                     minRotation: 45,
-                    fontSize: mobileView ? 11 : 14,
+                    fontSize: labelFontSize,
                     fontColor: '#1A2B2B',
                     autoSkip: false,
-                    minTicksLimit: 8,
                     maxTicksLimit: 15,
                 }
             }],
@@ -82,7 +83,7 @@ const getBarChartOptions = (tooltipText, mobileView: boolean) => {
                 },
                 stacked: false,
                 ticks: {
-                    fontSize: 14,
+                    fontSize: labelFontSize,
                     fontColor: '#1A2B2B',
                     beginAtZero: true,
                     userCallback: function (value, index, values) {

diff --git a/src/components/ChartTable/ChartTable.types.js b/src/components/ChartTable/ChartTable.types.js
@@ -1,6 +1,7 @@
 import moment from "moment";
 import numeral from "numeral";
-import type { Data, EnglandData } from "types/Data";
+
+import type { CountryData, Data } from "types/Data";
 
 
 declare export type TableStructure = {
@@ -9,16 +10,16 @@ declare export type TableStructure = {
         key: string,
         headings: {
             value: string,
-            type: string
+            type:  string
         },
-        valueGetter: (string) => string | number,
-        type: string,
-        formatter?: moment | numeral,
-        format?: string
+        valueGetter: (string) => string | number | Date | moment,
+        type:        string,
+        formatter?:  moment | numeral | (d: any) => number | string,
+        format?:     string
     }>,
     sortFunc: () => any,
     extra?: {
-        intro?: string,
+        intro?:       string,
         description?: string,
     }
 
@@ -27,7 +28,7 @@ declare export type TableStructure = {
 
 declare export type EnglandTableProps = {
 
-    data: EnglandData,
+    data:      CountryData.E92000001,
     structure: TableStructure
 
 } // EnglandTableProps
@@ -49,18 +50,18 @@ export interface CharTableState {
 
 declare export type TitleOrDescriptionValues = {
 
-    totalCases: string,
-    dailyCases: string,
+    totalCases:  string,
+    dailyCases:  string,
     totalDeaths: string,
     dailyDeaths: string
-    ageSex: string
+    ageSex:      string
 
 } // TitleOrDescriptionValues
 
 
 declare export type TitleOrDescription = {
 
-    titles: TitleOrDescriptionValues,
+    titles:       TitleOrDescriptionValues,
     descriptions: TitleOrDescriptionValues
 
 } // TitleOrDescription