ukhsa-internal / coronavirus-dashboard

Dashboard for tracking Coronavirus (COVID-19) across the UK

Coronavirus (COVID-19) in the UK

This is the frontend source code for the Coronavirus Dashboard service.

Other services

The API service

The API supplies the latest data for the COVID-19 outbreak in the United Kingdom.

The endpoint for the data provided using this SDK is:

https://api.coronavirus.data.gov.uk/v1/data

Documentations for the API, including the latest metrics, are available on the Developers Guide page.

We have also developed software development kits (dedicated libraries) in several programming languages to facilitate access to the API:

• Python library is available on GitHub® and is published on PyPI.
• JavaScript library is available on GitHub® and is published on GitHub® Packages and NPM.
• R library is available on GitHub® and has been submitted to CRAN for publication.
• .NET library is available of GitHub® and is published on NuGet.
• Elixir library is available on GitHub®.

Other repositories

Different parts of the Coronavirus dashboard service are maintained in their respective repositories, itemised as follows:

• API v.1 - Main API service for the data, lookup tables, CMS, and metadata.
• API v.2.0 - Batch downloads service [DEPRECATED in favour of v2.1]
• API v.2.1 - Batch downloads service
• Generic APIs - APIs that power the map, navigation, hierarchy, and relations
• Summary pages - Summary (home and postcode) pages
• Frontend Server - Home and postcode pages [DEPRECATED in favour of Summary]
• Easy-Read Server - Easy-read pages and PDF generator
• Layout CMS - Definition of contents
• Metadata - Description of metrics and textual contents
• ETL Service - Post-pipeline data processing and deployment
• Terraform - Infrastructure as Code [DEPRECATED in favour of ARM templates]

Development and contribution

We welcome contributions by everyone. Please read the contributions guide for additional information.

How can I help?

We have a public project management board that shows outstanding issues to which everyone can contribute. Pick a ticket, assign it to yourself and move it to the Doing column, and you will be all set to start. There is also the outstanding issues from which you can choose, but let us know that you are working on it so that multiple people don't end. up doing the same task.

No contribution is too small. We welcome help from everyone. Get in touch if you need additional information. We are here to help.

Cloning the code for re-deployment

If your service isn’t on GOV.UK

You are welcome to use the GOV.UK patterns and frontend code even if your service isn’t considered part of GOV.UK. Although you will sometimes need to use different patterns, for example if you are building something like an admin interface.

While you can use the patterns, your site or service must not:

• identify itself as being part of GOV.UK
• use the crown or GOV.UK logotype in the header
• use the GDS Transport typeface
• suggest that it’s an official UK government website if it is not

These things are there to provide a consistent identity and navigation between GOV.UK and the sites and transactional services that hang off it. If your service isn’t on GOV.UK, there’s no need to maintain that identity - in fact, you might confuse or mislead people if you do.

You should also use the brand logo and font of your organisation.

Please consult the GOV.UK Service Manual for additional information.

If you are re-deploying the website as a service

Please only clone our master branch for redeployment. All other contents, data, and branches that are either outside of the master branch or not otherwise used as a part of it - i.e. the associating assets - are copyrighted materials and therefore excluded from the MIT license until they receive the necessary approvals to be merged.

Please note that other branches may contain experimental development contents and prototypes. We routinely create such materials so that they can be discussed, improved, and be put forward for approval purposes.

You are welcome to use the development-v3 branch as described in the Contributors' Guide to help us improve the service and make a contribution.

Credits

This service is developed and maintained by Public Health England.

coronavirus-dashboard's Issues

Implementation of a notification service for updates (e.g. RSS feed)

A notification service would help us notify users that the data has been updated.

The main advantage of this would be the reduction in the current level of traffic. It will also eliminate the need for bots to hit our data storage every second of so to check whether or not the data has been updated.

Page is blank in desktop Safari (throws a WebGL error)

Currently in desktop Safari, for me at least, the page renders but then very quickly (less than a second) switches to a white blank screen.

Developer console shows that a WebGL exception is being thrown:

Bug: Hover over data points in chart glitch

Summary of issue
When hovering over data points in charts for both "Total number of lab-confirmed cases in England by specimen date" and "Total number of COVID-19 associated UK deaths in hospital by date reported" glitches back to other dats

Steps to reproduce
Open dashboad
Hover over chart data point in either "Total number of lab-confirmed cases in England by specimen date" and "Total number of COVID-19 associated UK deaths in hospital by date reported" and move cursor to follow the line

Expected result
Should show total number of deaths or cases for each day

Actual result
Glitches back and forth

System
Global error - tested on Chrome, Firefox and Safari

[HWERO][NZC EDS] Ffadenj uhceokw guhq el uzrica fibhcozw bubrozvnefj tepi eqp OIN eb fynt gijoi

Taiq pnymo apbiiff hor ac ylhewy xecs lytt prir pew u padvbyfm soxa efz UIN ik razf rohie.

‘About the data’ and ‘Accessibility’ pages should be in a column two-thirds.

The 'About the data' and 'accessibility' pages are slightly narrower than the main page - they should be consistent with the main page.

manifest.json is missing on website

The HTML pages link to a Web app manifest manifest.json: https://github.com/PublicHealthEngland/coronavirus-dashboard/blob/development/public/index.html#L13 but this manifest does not seem to be present on the website as https://coronavirus.data.gov.uk/manifest.json gives a 404 Not Found error response.

Add organisation logo and details

The current organisation logo doesn't use any branding.

It would make the project look more official and trustworthy if it included a logo, email address, and link to the organisation site.

Here's how NHSX does it:

Outdated Total number of lab-confirmed UK cases in the dashboard

Total number of lab-confirmed UK cases in the coronavirus.data.gov.uk dashboard is outdated as of Last updated 27 Apr 2020, 7:48pm and indicates 152,840 same as yesterday while it should be 157,149 as per coronavirus-covid-19-information-for-the-public.

[A11y] 1.1.1 Non-Text Content – Map Name Not Meaningful

When navigating the site with screen readers, the map is announced as 'Map'. As this item is required to be part of the focus order, due to having controls for interaction, the accessible name should be clear on the map's functionality - even if the user cannot see it.

It is our recommendation that the accessible name is update to be meaningful, such as 'Map showing a heat map of corona virus cases in the uk'

This does not comply with WCAG Level A 2.1:
1.1.1 Non-Text Content - https://www.w3.org/WAI/WCAG21/Understanding/non-text-content.html

Steps to Recreate:

1. Navigate to URL with screen reader enabled
2. Listen to page overview announced by screen reader
3. Observe issue

This has been observed on the following pages:
Coronavirus (COVID-19) cases in the UK

Environment:
Windows 10 – Internet Explorer 11, JAWS 2020
Windows 10 - Firefox, NVDA
macOS 10.14 - VoiceOver

This issue is known to occur on:
Believed to be global

Reproduction rate:
100% - Consistently reproducible. Occurs every time that it is attempted.

Supporting material:
Screenshot/Video

Version:
https://coronavirus.data.gov.uk/

3.Minor Impact on Functionality

[A11y] 1.4.13 Content on Hover or Focus - Hover Content is not Hoverable and Dismissable

Tester has observed that when viewing the graphs, content that appears on hover or focus cannot be dismissed. It is expected that the user is able to dismiss content without moving pointer hover or keyboard focus, such as pressing escape on a keyboard.

Additionally to this the hover content is not persistent. It is expected that content presented through hover is persistent and is not removed until the focus trigger is removed, the user dismisses it or its information is no longer valid. User should be able to mouse over the hover content to follow the content without their mouse obscuring it.

This does not comply with WCAG Level AA 2.1:
1.4.13 Content on Hover or Focus - https://www.w3.org/WAI/WCAG21/Understanding/content-on-hover-or-focus.html

Steps to Recreate:

1. Navigate to graphs
2. Hover and attempt to dismiss content or mouse over hover content
3. Observe issue

This has been observed on the following pages:
Coronavirus (COVID-19) cases in the UK

Environment:
Windows 10 – Chrome 80

This issue is known to occur on:
Believed to be global

Reproduction rate:
100% - Consistently reproducible. Occurs every time that it is attempted.

Supporting material:
Screenshot/Video

test title

this is a test description

utlas.geojson is requested twice

On pageload, both Map.js and utlaLayer.js load utlas.geojson, so it's requested twice from the server (should be cached after first fetch hopefully, unless they both request at the same time I guess, which they might well do on first load I imagine). I wasn't sure of the best way of changing this, and I realise you may be changing this anyway, hence opening an issue rather than a PR. Hope that's helpful.

[A11y] 1.3.1 Info and Relationships – Page Regions Not Identified with ARIA Landmarks

Tester has observed that when viewing the code behind the page, regions of the page are not identified with ARIA landmarks. It is expected that page regions are identified with landmarks. A list of valid landmark roles can be seen on the following link: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles

It is recommended this is done even if HTML5 is in use, as users of older screen readers may not be able to navigate HTML5 landamarks.

This issue is specifically observed with the body of the pages under test, which should also have role="main".

This does not comply with WCAG Level A 2.1:
1.3.1 Info and Relationships - https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships.html

Steps to Recreate:

1. Navigate to URL
2. Review HTML for usage of 'Role="main"
3. Observe issue

This has been observed on the following pages:

Coronavirus (COVID-19) cases in the UK
Coronavirus (COVID-19) cases in the UK About
Coronavirus (COVID-19) cases in the UK Accessibility Statement

Environment:
Windows 10 – Chrome 80

This issue is known to occur on:
Believed to be global

Reproduction rate:
100% - Consistently reproducible. Occurs every time that it is attempted.

Supporting material:
Screenshot/Video

Version:
https://coronavirus.data.gov.uk/

Links and button controls in map should visually retain the focus state

Map overlaps potentially misleading

Big improvement on the page. Great work. And thank you for making the page's code available on GitHub.

Possible issue; If you tab from countries to regions to councils, the overlapping colours could imply there are more case from one to the next, which isn't true.

Maps are hard, but just thought I would say.

Keep up the great work!

[A11y] Recommendation - Ensure That Region Page Has Footer Content

On reviewing the site using VoiceOver iOS, it was noted that the Regional page does not have footer content. This means pages such as Accessibility cannot be reached from that page. We would recommend that the footer content is present on all pages.

Steps to Recreate:

1. Navigate to URL

This has been observed on the following pages:
https://coronavirus.data.gov.uk/region

Environment:
iOS 13, Safari

This issue is known to occur on:
Believed to be global

Reproduction rate:
100% - Consistently reproducible. Occurs every time that it is attempted.

Supporting material:
Screenshot/Video

Version:
https://coronavirus.data.gov.uk/region

Add software licence

Please can you add an appropriate Open Source Licence file to the code.

Most NHSX and GOV.UK projects use https://opensource.org/licenses/MIT

Set $govuk-page-width: 1045px before importing govuk-frontend

Set $govuk-page-width: 1045px before importing govuk-frontend, allows removal of max-width: 1045px; on govuk-header__container in index.scss, and will make footer and the ‘About the data’ and ‘Accessibility’ pages the right width.

Use govuk-template class for html element

element needs the govuk-template class, which will fix the overscroll colour being white.

Bug: Chart data spillage when resizing

Summary of issue
When resizing browser in Firefox chart data spillage

Steps to reproduce
Open Dashboard in firefox
Resize browser

Expected result
Should not spill onto other chart

Actual result
See screenshot

System
75.0 (64-bit

Set $govuk-font-family to a different font stack before importing govuk-frontend to override the font stack

Set $govuk-font-family to a different font stack before importing govuk-frontend to override the font stack

Explain the charts

Thanks for the dashboard, but I think the charts need a little explanation.

I've seen many people take the drop in numbers for the last few days in the "Daily number of lab-confirmed cases in England by specimen date" chart as proof that the pandemic is over:

That's not the case. Instead, the reason is presumably that there is a reporting lag. Perhaps the last few days could be marked as having incomplete data?

There's also a weekly variation in the charts, presumably due to increased lag on weekends. Perhaps weekends could be highlighted on the charts?

I feel the Financial Times Coronavirus tracker does a great job on explaining the charts, for example using a 7-day rolling average to address reporting lag.

[A11y] 1.4.10 Reflow – Two Dimensional Scrolling is Present

Tester has observed that when viewing the page at 1280px width and 400% zoom, two dimensional scrolling is required to view content. It is expected that at zoom up to 400%, no parts of the content should require two dimensional scrolling except for parts of content where two dimensional scrolling is required for usage or meaning.

On the 'Coronavirus (COVID-19) cases in the UK' main page the 'In Development' text causes horizontal scrolling

This does not comply with WCAG Level AA 2.1:
1.4.10 Reflow - https://www.w3.org/WAI/WCAG21/Understanding/reflow.html

Steps to Recreate:

1. Navigate to URL at 400% zoom 1280px wide viewport
2. Review content on site
3. Observe issue

This has been observed on the following pages:
Coronavirus (COVID-19) cases in the UK

Environment:
Windows 10 – Chrome 80

This issue is known to occur on:
Believed to be global

Reproduction rate:
100% - Consistently reproducible. Occurs every time that it is attempted.

Supporting material:
Screenshot/Video

Version:
https://coronavirus.data.gov.uk/

3.Minor Impact on Functionality

Selecting Chart / Table radio buttons changes daily deaths to 14

To reproduce, do as follows:

1. Click Table radio button
2. Click Chart radio button
3. Daily deaths value changes to 14

Make data available through API

Please can you make the data available through an API or machine readable link. Thanks

Add descriptive aria-label to map so that it’s announced sensibly when focused

Add descriptive aria-label to map so that it's announced sensibly when focused. At the moment, for example, if you focus the map, VoiceOver will read all of the text within it, which is ““zoom in, zoom out, leaflet, link, vertical line copyright sign, openstreetmap, link, contributors, copyright sign, carto, link, group”.

Add descriptive aria-label to map so that announcements are more concise whilst being descriptive enough for user.

Bug: Tabs overlap each other if viewed in a smaller viewport

[A11y] 1.4.4 Resize Text – Rendering Issues Observed Zooming Text Only/Increasing Font Size

Tester has observed that when viewing the page, with the font size increased to 200% using the browsers in-built zoom or font size adjustments, rendering issues are observed. It is expected that except for captions and images of text, text can be resized without assistive technology up to 200 percent without loss of content or functionality. Contrast and font size should reasonable by default and coded in such a way that users can adjust with their user agent, as required.

When increasing text only zoom in Firefox the 'Total number of COVID-19 associated UK deaths in hospital' and 'Latest daily number of COVID-19 associated UK deaths in hospital' text renders over numbers. The + and - buttons within the map control render outside of their button boundaries and the Y-axis labels of each graph render over each other.

While in Chrome, where the font size is doubled to 20 minimum and 32 font, the graph font does not update at all.

This does not comply with WCAG Level AA 2.1:
1.4.4 Resize Text - https://www.w3.org/WAI/WCAG21/Understanding/resize-text.html

Steps to Recreate:

1. Navigate to URL in Firefox

2. Zoom text only to 200%

3. Observe issue

4. Navigate to URL in Chrome

5. Open settings and adjust custom font size to 20 minimum and 32 font

6. Observe issue

This has been observed on the following pages:

Coronavirus (COVID-19) cases in the UK

Environment:
Windows 10 - Chrome 80
Windows 10 – Firefox 75

This issue is known to occur on:
Believed to be global

Reproduction rate:
100% - Consistently reproducible. Occurs every time that it is attempted.

Supporting material:
Screenshot/Video

Version:
https://coronavirus.data.gov.uk/

3.Minor Impact on Functionality

Bug: Cookies expiring after session on Safari browser (mobile & desktop)

Summary of issue
Safari Version 13.0.4 (15608.4.9.1.3) - Failed, cookies are still expiring at the end of session, seems like a Safari only issue (Screenshot attached)

Steps to reproduce
Open dashboard in Safari
accept cookies
quit Safari
Open dashboard in Safari and will ask you to accept cookies again

Expected result
Should remember cookie settings

Actual result
Cookies expire when browser is quit

System
Safari Version 13.0.4 (15608.4.9.1.3)

Latest daily number of lab-confirmed UK cases - inconsistencies

Using 17th April dashboard data:

Latest daily number of lab-confirmed UK cases was 5,526

However for England Daily number of lab-confirmed cases in England by specimen date is 148. I've checked Public Health Wales the Welsh figure is 292. Scotland figure may be 182.

This is a big difference in numbers. Suspect this may be caused by reporting on the specimen date for England whereas other home countries and UK figures are using the pathology report date.
However this is confusing for users of the site and lay person may believe the risk of COVID-19 is less than it is.

Change countries to nations in page and data

change

"Includes tests carried out by commercial partners which are not included in the country totals"

to

"Includes tests carried out by commercial partners which are not included in the 4 National totals"

in BigNumber description for Total number of lab-confirmed UK cases.

[A11y] 1.1.1 Non-text Content/2.4.3 Focus Order – Map is Included Twice in Tab Order

Tester has observed that when tabbing the page, the tab order is not logical. It is expected that the navigation order of the page is logical and consistent

When navigating the Coronavirus (COVID-19) cases in the UK page, it is observed that the user tabs to the map twice before tabbing to the map zoom controls.

On the first tab focus the user can move the map using the arrow keys on the keyboard; however, with a screen reader all content within the map region is announced:
(NVDA)
"clickable, clickable, Map, graphic
Zoom in, button Zoom in
Zoom out, button Zoom out
clickable, Leaflet, link A JS library for interactive maps
| © OpenStreetMap contributors"

On pressing tab again, for the subsequent focus on the map nothing is announced and not actions can be taken using the keyboard. A third tab entry then focuses the user on the Zoom In controls as expected.

It is our recommendation that, the tab order is reviewed to ensure only interactive components are focused and that the accessible name for a component is clear and meaningful.

This does not comply with WCAG Level A 2.1:
1.1.1 Non-Text Content- https://www.w3.org/WAI/WCAG21/Understanding/non-text-content.html
2.4.3 Focus Order - https://www.w3.org/WAI/WCAG21/Understanding/focus-order.html

Steps to Recreate:

1. Navigate to URL
2. Tab the page content
3. Observe issue

This has been observed on the following pages:
https://coronavirus.data.gov.uk/

Environment:
Windows 10 – Chrome 80

This issue is known to occur on:
Windows 10, Internet Explorer 11, JAWS 2020
Windows 10, Firefox, NVDA
macOS 10.14, VoiceOver

Reproduction rate:
100% - Consistently reproducible. Occurs every time that it is attempted.

Supporting material:
Screenshot/Video

Version:
https://coronavirus.data.gov.uk/

3.Minor Impact on Functionality

Incorrect date on CSV filename

Incorrect date on CSV filename.

Add row headers to tables

make the first cell in each row a table header with scope="row", so for example the table in the countries tab, England would look like:

<th scope="row" class="govuk-table__cell">
<button [..]>England</button>
</th>

These might be helpful:

https://design-system.service.gov.uk/components/table/

https://webaim.org/techniques/tables/data

Add gzip (or similar) to data_latest.json

The server serving data_latest.json is not sending out a compressed file, which would reduce the current data file request (as I write) from 575K to something more like 54K.

CSV extension not present on certain browsers

.csv extension is not present when downloading on Safari and Firefox browsers.

Remove govuk-header overrides from index.scss

Remove govuk-header overrides from index.scss to fix the header alignment, and make the blue border the width of the page.

Replace big number title divs with h2 headings

Replace these divs with <h2> headings:

‘Total number of lab-confirmed UK cases’
‘Daily number of lab-confirmed cases’
‘Total number of COVID-19 associated UK deaths in hospital’
‘Daily number of COVID-19 associated UK deaths in hospital’

ACL completed when divs are replaced with equivalent h2 headings

Blank values in cumulative counts csv

Please can you fix the blank values in the cumulative counts csv. If there are no new cases the number should be the same as the previous day. The blank values have to be corrected before we can analyse the data

test title 2

this is a test description

Add a "back to top" link

Add a "Back to top" link, which will take the user to the top of the page rather than having to scroll back.

Make the dashboard work (possibly without map or graphs?) without javascript

Great (fast!) work on this!

It'd be great it if could work without javascript somehow - eg at least showing the figures and the tables.

Currently it displays this:

Add clear focus state to map

Add clear focus state to the map as suggested in the image attached.

Increase text on graphs to 14px

Increase minimum text size on graph axis labels and hover over to 14px as per GOV.UK accessible communication format guideline here https://www.gov.uk/government/publications/inclusive-communication/accessible-communication-formats

Add additional features to identify links in tables

Links in tables should be identified by more than just colour, e.g. by underlining them as this poses an accessibility issue.

Incorrect time on Safari browser

Safari shows incorrect last updated time.
Shows correct time on Chrome, Firefox etc.

[A11y] 2.4.7 Focus Visible – Visible Tab Focus Indicator Missing On Map

Tester has observed that when tabbing the page, a visible tab focus indicator is not present the second time the user tabs to the map. It is expected that a visible indicator is present to highlight the element in focus for any keyboard operable user interface components. This can be the default browser indicator but it must not prevent users from applying their own custom focus styles.

This does not comply with WCAG Level A 2.1:
2.4.7 Focus Visible - https://www.w3.org/WAI/WCAG21/Understanding/focus-visible.html

Steps to Recreate:

1. Navigate to URL
2. Tab the page content until map is reached
3. Observe issue

This has been observed on the following pages:
Coronavirus (COVID-19) cases in the UK

Environment:
Windows 10 – Chrome 80

This issue is known to occur on:
Believed to be global

Reproduction rate:
100% - Consistently reproducible. Occurs every time that it is attempted.

Supporting material:
Screenshot/Video

Version:
https://coronavirus.data.gov.uk/

3.Minor Impact on Functionality

Make test data available in CSV/JSON

Data for number of tests performed and number of people tested is only available in HTML format from https://www.gov.uk/guidance/coronavirus-covid-19-information-for-the-public#number-of-cases-and-deaths

There is also nowhere (that I know of) to download the historical data. Also, the data is subject to revisions, and there is no way of knowing which days the revisions apply to. For example, on 25 April the notes on that page said:

The difference between the cumulative numbers from today and yesterday for people tested is 50,499 higher than the daily increase figure. Cumulative testing figures include 50,499 retrospective reports of people who tested negative between 31 January and 24 April.

But there is no way of knowing the testing dates of those 50,499 reports.

Please consider adding the full dataset as CSV and JSON files on the dashboard.

Remove tabindex=0 on buttons in the tables

Remove tabindex=0 on buttons in the tables as buttons naturally appear in the tab index anyway.

Open Data

Could the daily confirmed cases and deaths be added as open data to the dashboard? Many analysts and developers are using these data.