From c4008ce00b416c291e6f03570406c627e83c8db1 Mon Sep 17 00:00:00 2001 From: Rhys Date: Wed, 2 Feb 2022 15:05:08 +0000 Subject: [PATCH 01/16] Rename and restructure package Renamed the package to be gov_uk_dashboards and moved colours into a folder called colours. --- README.md | 2 +- {GOV_UK_Colours => gov_uk_dashboards}/__init__.py | 0 gov_uk_dashboards/colours/__init__.py | 0 .../colours}/colours.py | 3 ++- setup.py | 10 +++++----- 5 files changed, 8 insertions(+), 7 deletions(-) rename {GOV_UK_Colours => gov_uk_dashboards}/__init__.py (100%) create mode 100644 gov_uk_dashboards/colours/__init__.py rename {GOV_UK_Colours => gov_uk_dashboards/colours}/colours.py (99%) diff --git a/README.md b/README.md index 5f99a0d..db87f59 100644 --- a/README.md +++ b/README.md @@ -34,7 +34,7 @@ For installation using conda, paste the following code into the environment conf In order to access the colours in the package, use the command: ```python -from GOV_UK_Colours.colours import GovUKColors +from gov_uk_dashboards.colours.colours import GovUKColors GovUKColors.DLUHC_BLUE.value ``` diff --git a/GOV_UK_Colours/__init__.py b/gov_uk_dashboards/__init__.py similarity index 100% rename from GOV_UK_Colours/__init__.py rename to gov_uk_dashboards/__init__.py diff --git a/gov_uk_dashboards/colours/__init__.py b/gov_uk_dashboards/colours/__init__.py new file mode 100644 index 0000000..e69de29 diff --git a/GOV_UK_Colours/colours.py b/gov_uk_dashboards/colours/colours.py similarity index 99% rename from GOV_UK_Colours/colours.py rename to gov_uk_dashboards/colours/colours.py index f310d2d..9de0e41 100644 --- a/GOV_UK_Colours/colours.py +++ b/gov_uk_dashboards/colours/colours.py @@ -1,6 +1,7 @@ """govuk_colors""" from enum import Enum + class GovUKColors(Enum): """ From the GOV.UK colour scheme: https://design-system.service.gov.uk/styles/colour/ @@ -35,4 +36,4 @@ class GovUKColors(Enum): "#77a9d4", "#11436e", "#092237", - ] \ No newline at end of file + ] diff --git a/setup.py b/setup.py index b28cf97..b27c02b 100644 --- a/setup.py +++ b/setup.py @@ -4,8 +4,8 @@ # Call setup function setup( author="Department for Levelling Up, Housing and Communities", - description="Provides Gov.UK colours in a class for convenient use, see: https://design-system.service.gov.uk/styles/colour/", - name="GOV_UK_Colours", - packages=['GOV_UK_Colours'], - version="0.0.1", -) \ No newline at end of file + description="Provides access to functionality common to creating a data dashboard.", + name="gov_uk_dashboards", + version="1.1.0", + packages=find_packages() +) From 1b671f68fc6d6c8a087f77b686bb4e718dfdf9df Mon Sep 17 00:00:00 2001 From: Matthew Sutton Date: Wed, 2 Feb 2022 15:37:14 +0000 Subject: [PATCH 02/16] Added in banners component --- .../__pycache__/__init__.cpython-37.pyc | Bin 226 -> 0 bytes .../__pycache__/colours.cpython-37.pyc | Bin 1155 -> 0 bytes .../__pycache__/__init__.cpython-37.pyc | Bin 0 -> 182 bytes .../__pycache__/__init__.cpython-37.pyc | Bin 0 -> 190 bytes gov_uk_dashboards/components/__init__.py | 0 .../__pycache__/__init__.cpython-37.pyc | Bin 0 -> 193 bytes .../components/plotly/__init__.py | 0 .../__pycache__/__init__.cpython-37.pyc | Bin 0 -> 200 bytes .../plotly/__pycache__/banners.cpython-37.pyc | Bin 0 -> 985 bytes .../components/plotly/banners.py | 33 ++++++++++++++++++ requirements.txt | 2 ++ setup.py | 6 +++- 12 files changed, 40 insertions(+), 1 deletion(-) delete mode 100644 GOV_UK_Colours/__pycache__/__init__.cpython-37.pyc delete mode 100644 GOV_UK_Colours/__pycache__/colours.cpython-37.pyc create mode 100644 gov_uk_dashboards/__pycache__/__init__.cpython-37.pyc create mode 100644 gov_uk_dashboards/colours/__pycache__/__init__.cpython-37.pyc create mode 100644 gov_uk_dashboards/components/__init__.py create mode 100644 gov_uk_dashboards/components/__pycache__/__init__.cpython-37.pyc create mode 100644 gov_uk_dashboards/components/plotly/__init__.py create mode 100644 gov_uk_dashboards/components/plotly/__pycache__/__init__.cpython-37.pyc create mode 100644 gov_uk_dashboards/components/plotly/__pycache__/banners.cpython-37.pyc create mode 100644 gov_uk_dashboards/components/plotly/banners.py create mode 100644 requirements.txt diff --git a/GOV_UK_Colours/__pycache__/__init__.cpython-37.pyc b/GOV_UK_Colours/__pycache__/__init__.cpython-37.pyc deleted file mode 100644 index 003de63599cfe84a7cdf9926518235897fa4090d..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 226 zcmZ?b<>g`kf=hotC&~ip#~=<2Faa43KwQiNBvKes7;_k+7*iO788n$*0!0}7G?}8r z-2KDiL%rjj^K(wHV$|o@hUeXl5(!v!`DZPd&rO`mg3>c_G77fT@7V?;b0_LHJ1=zwOlyD2mSb}XV z!#&)F`*;s_@ILI~4m`kJc!&?+5k7=Hd<2hi51!y-e1aN2#b*}=JjLf|;Ai+b?veHk zzo4?eTyOQF+v(sqsrv1#SRwgt87(UDC9m|xKUSxMioDWlSrNe{U+{yk2_0W=#2thlv>z?#+ zt-9~XgxG30jyyDMx~|U?u?j%;cPnjVLI-=>O!$IoSqz~h3(KySn78+X0mwLmDT@y@4d3j(}PHszkcc*%%;>( zVz%&NYQ$fvVim{H^{m6iRUF;S(2G5Wp1AZQZ;4_?jmoA2CcAh=QU6iXCKT11yCpqz zMLurf(2~#Sny&uOp>1oLnvNvPXkTCEC<*ACp7>HDO!oh|MoI-Ttn=Td|NDhXnvezP HYDxPWB7`5W diff --git a/gov_uk_dashboards/__pycache__/__init__.cpython-37.pyc b/gov_uk_dashboards/__pycache__/__init__.cpython-37.pyc new file mode 100644 index 0000000000000000000000000000000000000000..afe16711d935d45750998fcf209e0f4cdff7f928 GIT binary patch literal 182 zcmZ?b<>g`kg4zYY5<&E15CH>>K!yVl7qb9~6oz01O-8?!3`HPe1o120#VRJWIJKxa zCO5I9BqOz4ueh|NBtI|4CAB!aB)=dgC9xziJ|(d@BPlg`kg4zYY5<&E15CH>>K!yVl7qb9~6oz01O-8?!3`HPe1o11~#VRJWIJKxa zCO5I9BqOz4ueh|NBtI|4CAB!aB)=dgC9xziJ|(d@BPlg`kg4zYY5<&E15CH>>K!yVl7qb9~6oz01O-8?!3`HPe1o11&#VRJWIJKxa zCO5I9BqOz4ueh|NBtI|4CAB!aB)=dgC9xziJ|(d@BPl meqL%`NpVbkd}dx|NqoFsLFFwDo80`A(wtN~kQ<7Dm;nId%{VUr literal 0 HcmV?d00001 diff --git a/gov_uk_dashboards/components/plotly/__init__.py b/gov_uk_dashboards/components/plotly/__init__.py new file mode 100644 index 0000000..e69de29 diff --git a/gov_uk_dashboards/components/plotly/__pycache__/__init__.cpython-37.pyc b/gov_uk_dashboards/components/plotly/__pycache__/__init__.cpython-37.pyc new file mode 100644 index 0000000000000000000000000000000000000000..6eb2072fec77e4958dace9e92258e986fa9554e4 GIT binary patch literal 200 zcmZ?b<>g`kg4zYY5<&E15CH>>K!yVl7qb9~6oz01O-8?!3`HPe1o5lT#VRJWIJKxa zCO5I9BqOz4ueh|NBtI|4CAB!aB)=dgC9xziJ|(d@BPl teqL%`NpVa;PJT&FWlVg0W?p7Ve7s&kXB>T zfEVBiIPxBQ<;0OICnib%#DTG95|78@@AHgb@9stp$dC8GN#i@t&wg?%2!39HnkQhW zlRDI;NVqjhk?T;8`d^&XqrsUIPrA47K7BaBg{m7RnY0F9D2*vMjUa0-OI$N!NXZPg z3fqd|)-a8^#02L=O8AHPn%G}(k`ucdzp}L`dH}uj-)+!0pymjSbw0bG2-E}huLfv6 zBpT4kSD%L0-j!P-I;C6Jh(?3m?k#}b>Apu8 z!$n18$%HCzaRUB)fKPiWK)7xtFNkFinGN|@6_W$kyPSAM3>L&#+%^=p&{;G@o-u|i zYa4U8xAy?d3}VQvRF|`MImC5aFlm>GC1o0{DsEX9KHH}U^Za=i&GEiwHJ;;n8gj`k zCnEOKC@00T)T)&<4GJZcPA4_dC70c{;F2X3<7H)IwAm^EnK>mjOM`)X_hLLPS9F~i zJWie_7fRY>HS9`qCFtG4m==82sydm+uJ)i*-Q)2J6S%`&CwIs@TWOGT%1G4 znFaJ1wBKrGT0kim$IL7t^`gJ&?5<8`0c5jw`G3!Svo9K6S0fx?J9A5CEBDMX#d{wB;as){U2{T|Z5c~~3BJTM`|Z>C4JqOD*r O-Tn-C!;bIncz*#6jU$)< literal 0 HcmV?d00001 diff --git a/gov_uk_dashboards/components/plotly/banners.py b/gov_uk_dashboards/components/plotly/banners.py new file mode 100644 index 0000000..3e1a0db --- /dev/null +++ b/gov_uk_dashboards/components/plotly/banners.py @@ -0,0 +1,33 @@ +"""HTML components for displaying messages to the user in a banner format""" +from dash import html + + +def message_banner(category, message): + """ + Return a coronavirus dashboard-style changelog banner to be used to communicate to the user + when the dashboard was last updated. + + See https://coronavirus.data.gov.uk + """ + return html.Ul( + html.Li( + html.Div( + [ + html.Strong( + category, + className="govuk-tag", + style={ + "background": "white", + "color": "#1d70b8", + "margin": "0 1rem 0 0", + "line-height": "initial", + }, + ), + message, + ], + className="govuk-body-s govuk-!-font-weight-bold govuk-!-margin-bottom-0", + ), + className="change-log-banner", + ), + className="change-logs govuk-!-padding-left-0 govuk-!-margin-top-1", + ) diff --git a/requirements.txt b/requirements.txt new file mode 100644 index 0000000..6ff814a --- /dev/null +++ b/requirements.txt @@ -0,0 +1,2 @@ +setuptools~=59.8.0 +dash~=2.0.0 \ No newline at end of file diff --git a/setup.py b/setup.py index b27c02b..53f0b59 100644 --- a/setup.py +++ b/setup.py @@ -7,5 +7,9 @@ description="Provides access to functionality common to creating a data dashboard.", name="gov_uk_dashboards", version="1.1.0", - packages=find_packages() + packages=find_packages(), + install_requires=[ + 'setuptools~=59.8.0', + 'dash~=2.0.0' + ], ) From 8756986aa38e628a65b1abc28db46fcd8ab8c16f Mon Sep 17 00:00:00 2001 From: Matthew Sutton Date: Wed, 2 Feb 2022 16:47:59 +0000 Subject: [PATCH 03/16] Added gitignore --- .gitignore | 132 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 132 insertions(+) create mode 100644 .gitignore diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..22e9226 --- /dev/null +++ b/.gitignore @@ -0,0 +1,132 @@ +# Byte-compiled / optimized / DLL files +__pycache__/ +*.py[cod] +*$py.class + +# C extensions +*.so + +# Distribution / packaging +.Python +build/ +develop-eggs/ +dist/ +downloads/ +eggs/ +.eggs/ +lib64/ +parts/ +sdist/ +var/ +wheels/ +pip-wheel-metadata/ +share/python-wheels/ +*.egg-info/ +.installed.cfg +*.egg +MANIFEST + +# PyInstaller +# Usually these files are written by a python script from a template +# before PyInstaller builds the exe, so as to inject date/other infos into it. +*.manifest +*.spec + +# Installer logs +pip-log.txt +pip-delete-this-directory.txt + +# Unit test / coverage reports +htmlcov/ +.tox/ +.nox/ +.coverage +.coverage.* +.cache +nosetests.xml +coverage.xml +*.cover +*.py,cover +.hypothesis/ +.pytest_cache/ + +# Translations +*.mo +*.pot + +# Django stuff: +*.log +local_settings.py +db.sqlite3 +db.sqlite3-journal + +# Flask stuff: +instance/ +.webassets-cache + +# Scrapy stuff: +.scrapy + +# Sphinx documentation +docs/_build/ + +# PyBuilder +target/ + +# Jupyter Notebook +.ipynb_checkpoints + +# IPython +profile_default/ +ipython_config.py + +# pipenv +# According to pypa/pipenv#598, it is recommended to include Pipfile.lock in version control. +# However, in case of collaboration, if having platform-specific dependencies or dependencies +# having no cross-platform support, pipenv may install dependencies that don't work, or not +# install all needed dependencies. +#Pipfile.lock + +# PEP 582; used by e.g. github.com/David-OConnor/pyflow +__pypackages__/ + +# Celery stuff +celerybeat-schedule +celerybeat.pid + +# SageMath parsed files +*.sage.py + +# Environments +.env +.venv +env/ +venv/ +ENV/ +env.bak/ +venv.bak/ + +# Spyder project settings +.spyderproject +.spyproject + +# Rope project settings +.ropeproject + +# mkdocs documentation +/site + +# mypy +.mypy_cache/ +.dmypy.json +dmypy.json + +# Pyre type checker +.pyre/ + +# Editors +.idea/ +.vscode/ + +# macOS +.DS_Store \ No newline at end of file From e4b65deb12c5e628a97f41623776ae533d6a155e Mon Sep 17 00:00:00 2001 From: Matthew Sutton Date: Wed, 2 Feb 2022 16:48:21 +0000 Subject: [PATCH 04/16] Added remaining components from housing dashboard --- gov_uk_dashboards/components/plotly/card.py | 8 +++ .../components/plotly/card_full_width.py | 12 ++++ .../components/plotly/collapsible_panel.py | 35 +++++++++++ .../components/plotly/dashboard_container.py | 16 +++++ .../components/plotly/dropdowns.py | 54 +++++++++++++++++ .../components/plotly/filter_panel.py | 43 +++++++++++++ gov_uk_dashboards/components/plotly/header.py | 60 +++++++++++++++++++ .../components/plotly/key_value_pair.py | 22 +++++++ .../components/plotly/main_content.py | 16 +++++ gov_uk_dashboards/components/plotly/navbar.py | 37 ++++++++++++ .../components/plotly/row_component.py | 16 +++++ .../plotly/visualisation_commentary.py | 21 +++++++ .../components/plotly/visualisation_title.py | 21 +++++++ requirements.txt | 3 +- setup.py | 3 +- 15 files changed, 365 insertions(+), 2 deletions(-) create mode 100644 gov_uk_dashboards/components/plotly/card.py create mode 100644 gov_uk_dashboards/components/plotly/card_full_width.py create mode 100644 gov_uk_dashboards/components/plotly/collapsible_panel.py create mode 100644 gov_uk_dashboards/components/plotly/dashboard_container.py create mode 100644 gov_uk_dashboards/components/plotly/dropdowns.py create mode 100644 gov_uk_dashboards/components/plotly/filter_panel.py create mode 100644 gov_uk_dashboards/components/plotly/header.py create mode 100644 gov_uk_dashboards/components/plotly/key_value_pair.py create mode 100644 gov_uk_dashboards/components/plotly/main_content.py create mode 100644 gov_uk_dashboards/components/plotly/navbar.py create mode 100644 gov_uk_dashboards/components/plotly/row_component.py create mode 100644 gov_uk_dashboards/components/plotly/visualisation_commentary.py create mode 100644 gov_uk_dashboards/components/plotly/visualisation_title.py diff --git a/gov_uk_dashboards/components/plotly/card.py b/gov_uk_dashboards/components/plotly/card.py new file mode 100644 index 0000000..de9f9b6 --- /dev/null +++ b/gov_uk_dashboards/components/plotly/card.py @@ -0,0 +1,8 @@ +"""card""" +from dash import html + + +def card(children): + """A rectangle with a grey background. + Mostly used to wrap individual visualisations, e.g. a gauge.""" + return html.Li(children, className="mini-card") diff --git a/gov_uk_dashboards/components/plotly/card_full_width.py b/gov_uk_dashboards/components/plotly/card_full_width.py new file mode 100644 index 0000000..76e4fee --- /dev/null +++ b/gov_uk_dashboards/components/plotly/card_full_width.py @@ -0,0 +1,12 @@ +"""card_full_width""" +from dash import html + + +def card_full_width(children): + """ + Apply CSS classes and styles to create a card with a grey background + that fits the full width of its parent container using CSS flexbox. + + See https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout for more information. + """ + return html.Li(children, className="mini-card", style={"flex": "1 1 100%"}) diff --git a/gov_uk_dashboards/components/plotly/collapsible_panel.py b/gov_uk_dashboards/components/plotly/collapsible_panel.py new file mode 100644 index 0000000..5d2af95 --- /dev/null +++ b/gov_uk_dashboards/components/plotly/collapsible_panel.py @@ -0,0 +1,35 @@ +"""collapsible_panel""" +from dash import html + + +def collapsible_panel(title, children, default_open=False): + """Returns a Dash HTML component that allows the user to open and close a + collapsible panel containing children""" + return html.Details( + [ + html.Summary( + html.Span( + title, + className="govuk-!-margin-0 govuk-details__summary-text", + ), + className="govuk-details__summary govuk-!-margin-0", + **{"data-module": "govuk-details"} + ), + html.Div( + children, + className="govuk-!-padding-0 govuk-!-margin-top-1", + style={ + "display": "flex", + "alignContent": "stretch", + "alignItems": "flex-end", + "flexFlow": "row wrap", + "justifyContent": "space-between", + "gap": "1rem", + "margin": "0", + "padding": "0", + }, + ), + ], + className="govuk-details govuk-!-margin-0", + **{"open": default_open} + ) diff --git a/gov_uk_dashboards/components/plotly/dashboard_container.py b/gov_uk_dashboards/components/plotly/dashboard_container.py new file mode 100644 index 0000000..4f330da --- /dev/null +++ b/gov_uk_dashboards/components/plotly/dashboard_container.py @@ -0,0 +1,16 @@ +"""dashboard_container""" + +from dash import html + + +def dashboard_container(children): + """ + A HTML wrapper for a whole dashboard. + + Applies styles that make sure the application uses the full width of the browser. + + Unfortunately, due to the way Dash adds further HTML wrappers when it serves content, + this wrapper cannot be applied once in template.html, + and must be added within the application for each new dashboard. + """ + return html.Div(children, className="dashboard-container") diff --git a/gov_uk_dashboards/components/plotly/dropdowns.py b/gov_uk_dashboards/components/plotly/dropdowns.py new file mode 100644 index 0000000..882bbb8 --- /dev/null +++ b/gov_uk_dashboards/components/plotly/dropdowns.py @@ -0,0 +1,54 @@ +"""Dash HTML components that allow the user to select options from a pre-determined list""" +from dash import html, dcc + + +def dropdown(label, options, selected, element_id, **dropdown_properties): + """A simple Dash Dropdown list. Must have a value selected.""" + return html.Div( + [ + html.Label( + label, + className="govuk-label", + htmlFor=element_id, + ), + dcc.Dropdown( + id=element_id, + options=options, + value=selected, + clearable=False, + **dropdown_properties + ), + ], + className="govuk-form-group govuk-!-padding-0 govuk-!-margin-0 govuk-!-padding-right-3", + style={ + "minWidth": "35%", + "flexGrow": "1", + }, + ) + + +def clearable_dropdown(element_id, label, options, selected): + """A simple Dash Dropdown list. Does not have to have a value selected""" + return ( + html.Div( + [ + html.Label( + label, + className="govuk-label", + htmlFor=element_id, + ), + dcc.Dropdown( + id=element_id, + options=options, + value=selected, + clearable=True, + ), + ], + className="govuk-form-group govuk-!-padding-0 govuk-!-margin-0 govuk-!-padding-right-3", + style={ + "minWidth": "25%", + "flexGrow": "1", + "borderRight": "1px solid #b1b4b6", + }, + ), + ) diff --git a/gov_uk_dashboards/components/plotly/filter_panel.py b/gov_uk_dashboards/components/plotly/filter_panel.py new file mode 100644 index 0000000..5240a11 --- /dev/null +++ b/gov_uk_dashboards/components/plotly/filter_panel.py @@ -0,0 +1,43 @@ +"""filter_panel""" +from dash import html + +from collapsible_panel import collapsible_panel +from row_component import row_component + + +def filter_panel(children): + """ + A container with a grey background and a title that allows the user to select and filter metrics + on the dashboard. + + Args: + children: Dash HTML elements representing the individual selection + and filtering widgets. + E.g.dropdown menus, sliders, text input boxes etc. + """ + return row_component( + html.Div( + collapsible_panel( + title="Select and filter metrics", + default_open=True, + children=[ + *children, + html.A( + "Reset", className="govuk-button govuk-!-margin-0", href="?" + ), + ], + ), + className="govuk-!-margin-0", + style={"flex": "1 1 100%"}, + ) + ) + + +def hidden_filter(html_id): + """ + An empty, invisible HTML element that stands in for a filter component. + + Used to keep the state of the filter panel current across dashboards, + even those that don't allow the user to filter for a particular metric. + """ + return html.Div(id=html_id, style={"display": "none"}) diff --git a/gov_uk_dashboards/components/plotly/header.py b/gov_uk_dashboards/components/plotly/header.py new file mode 100644 index 0000000..5b8715e --- /dev/null +++ b/gov_uk_dashboards/components/plotly/header.py @@ -0,0 +1,60 @@ +"""header""" +from dash import html + + +def header(title): + """ + The header component, shared across all dashboard views. + + Based on the header component provided by the GOV.UK Design System. + https://design-system.service.gov.uk/components/header/ + """ + return html.Header( + html.Div( + html.Div( + [ + html.Img( + src="assets\\images\\hm-government-logo.png", + style={"width": "62px"}, + ), + html.Span( + [ + "Department for Levelling Up,", + html.Br(), + "Housing & Communities", + ], + className=" ".join( + [ + "govuk-header__link", + "govuk-header__link--service-name", + "govuk-!-padding-left-3", + "govuk-!-font-size-14", + ] + ), + ), + html.A( + title, + href="/", + className=" ".join( + [ + "govuk-header__link", + "govuk-header__link--service-name dashboard-title", + "govuk-!-padding-top-3", + ], + ), + ), + html.Strong( + "OFFICIAL", + className="govuk-tag protective-marking", + id="protective-marking", + ), + ], + className="govuk-header__content", + ), + className="govuk-header__container govuk-width-container", + ), + style={"align-items": "center", "justify-content": "center"}, + className="govuk-header", + role="banner", + **{"data-module": "govuk-header"}, + ) diff --git a/gov_uk_dashboards/components/plotly/key_value_pair.py b/gov_uk_dashboards/components/plotly/key_value_pair.py new file mode 100644 index 0000000..31a6628 --- /dev/null +++ b/gov_uk_dashboards/components/plotly/key_value_pair.py @@ -0,0 +1,22 @@ +"""key_value_pair""" +import numpy as np +from dash import html + + +def key_value_pair(key, value): + """ + Create an HTML element that displays a value (such as a metric) labelled by a key (such as the + name of the metric). + """ + value_can_be_displayed = value is not None and not np.isnan(value) + + return [ + html.Dt( + key, + className="govuk-body-s govuk-!-margin-bottom-0", + ), + html.Dd( + value if value_can_be_displayed else "-", + className="govuk-heading-m govuk-!-margin-0 govuk-!-padding-0", + ), + ] diff --git a/gov_uk_dashboards/components/plotly/main_content.py b/gov_uk_dashboards/components/plotly/main_content.py new file mode 100644 index 0000000..5f4eeca --- /dev/null +++ b/gov_uk_dashboards/components/plotly/main_content.py @@ -0,0 +1,16 @@ +"""main_content""" +from dash import html + + +def main_content(children): + """ + Wrapper for the main content of the dashboard, containing visualisations. + + https://developer.mozilla.org/en-US/docs/Web/HTML/Element/main + + Using semantic HTML elements makes it easier for users with accessibility issues to + interpret webpages using assistive devices. + + See https://developer.mozilla.org/en-US/docs/Learn/Accessibility/HTML for more guidance. + """ + return html.Main(children, className="main", id="main-content", role="main") diff --git a/gov_uk_dashboards/components/plotly/navbar.py b/gov_uk_dashboards/components/plotly/navbar.py new file mode 100644 index 0000000..207ef64 --- /dev/null +++ b/gov_uk_dashboards/components/plotly/navbar.py @@ -0,0 +1,37 @@ +"""navbar""" + +from dash import html, dcc + + +def navbar(links): + """A navigation bar for switching between dashboards.""" + return html.Nav( + html.Div( + html.Ul( + links, + className="moj-side-navigation__list", + ), + className="moj-side-navigation govuk-!-padding-right-2", + role="navigation", + ), + className="dashboard-menu", + ) + + +def navbar_link(text, href): + """A link to another dashboard""" + return html.Li( + dcc.Link(text, href=href, className="govuk-link govuk-link--no-visited-state"), + className="moj-side-navigation__item", + ) + + +def navbar_link_active(text, href): + """ + A link to another dashboard that appears highlighted, suggesting to the user that they are + already viewing the linked dashboard. + """ + return html.Li( + dcc.Link(text, href=href, className="govuk-link govuk-link--no-visited-state"), + className="moj-side-navigation__item moj-side-navigation__item--active", + ) diff --git a/gov_uk_dashboards/components/plotly/row_component.py b/gov_uk_dashboards/components/plotly/row_component.py new file mode 100644 index 0000000..a613878 --- /dev/null +++ b/gov_uk_dashboards/components/plotly/row_component.py @@ -0,0 +1,16 @@ +"""row_component""" +from dash import html + + +def row_component(cards): + """ + Creates a horizontal row used to contain cards. + The card and row_component work together to create a + layout that stretches and shrinks when the user changes the size of the window, + or accesses the dashboard from a mobile device. + + See https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout for more information. + """ + return html.Ul( + cards, className="govuk-list card-container", style={"alignItems": "stretch"} + ) diff --git a/gov_uk_dashboards/components/plotly/visualisation_commentary.py b/gov_uk_dashboards/components/plotly/visualisation_commentary.py new file mode 100644 index 0000000..bab3d98 --- /dev/null +++ b/gov_uk_dashboards/components/plotly/visualisation_commentary.py @@ -0,0 +1,21 @@ +"""format_visualisation_commentary""" +from dash import html + + +def format_visualisation_commentary(commentary): + """Apply Gov.UK Design System styles to format title and accompanying commentary""" + return html.Div( + [ + html.Div( + [ + html.P( + commentary, + className="govuk-heading-m govuk-!-margin-bottom-1", + style={"font-size": "14px", "font-weight": "normal"}, + ), + ], + className="govuk-grid-column-full", + ) + ], + className="govuk-grid-row", + ) diff --git a/gov_uk_dashboards/components/plotly/visualisation_title.py b/gov_uk_dashboards/components/plotly/visualisation_title.py new file mode 100644 index 0000000..f868d9d --- /dev/null +++ b/gov_uk_dashboards/components/plotly/visualisation_title.py @@ -0,0 +1,21 @@ +"""format_visualisation_title""" +from dash import html + + +def format_visualisation_title(title): + """Apply Gov.UK Design System styles to format title""" + return html.Div( + [ + html.Div( + [ + html.H1( + title, + id="title", + className="govuk-heading-m govuk-!-margin-bottom-1", + ), + ], + className="govuk-grid-column-full", + ) + ], + className="govuk-grid-row", + ) diff --git a/requirements.txt b/requirements.txt index 6ff814a..afb994c 100644 --- a/requirements.txt +++ b/requirements.txt @@ -1,2 +1,3 @@ setuptools~=59.8.0 -dash~=2.0.0 \ No newline at end of file +dash~=2.0.0 +numpy>=1.22.0 \ No newline at end of file diff --git a/setup.py b/setup.py index 53f0b59..39abc38 100644 --- a/setup.py +++ b/setup.py @@ -10,6 +10,7 @@ packages=find_packages(), install_requires=[ 'setuptools~=59.8.0', - 'dash~=2.0.0' + 'dash~=2.0.0', + 'numpy>=1.22.0', ], ) From 6b5ff8527232d2382f36a6190ddc383efc610d41 Mon Sep 17 00:00:00 2001 From: Matthew Sutton Date: Thu, 3 Feb 2022 08:50:45 +0000 Subject: [PATCH 05/16] Updated to make UK spelling consistent --- gov_uk_dashboards/colours/colours.py | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/gov_uk_dashboards/colours/colours.py b/gov_uk_dashboards/colours/colours.py index 9de0e41..278c530 100644 --- a/gov_uk_dashboards/colours/colours.py +++ b/gov_uk_dashboards/colours/colours.py @@ -2,7 +2,7 @@ from enum import Enum -class GovUKColors(Enum): +class GovUKColours(Enum): """ From the GOV.UK colour scheme: https://design-system.service.gov.uk/styles/colour/ """ From 94350bab4b8da57c8c31aff85f92ccfc096ab4f0 Mon Sep 17 00:00:00 2001 From: Matthew Sutton Date: Thu, 3 Feb 2022 08:51:07 +0000 Subject: [PATCH 06/16] Applied black --- setup.py | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/setup.py b/setup.py index 39abc38..e50cecc 100644 --- a/setup.py +++ b/setup.py @@ -9,8 +9,8 @@ version="1.1.0", packages=find_packages(), install_requires=[ - 'setuptools~=59.8.0', - 'dash~=2.0.0', - 'numpy>=1.22.0', + "setuptools~=59.8.0", + "dash~=2.0.0", + "numpy>=1.22.0", ], ) From aacbd5a5567b9c550d39bad41f8ec533d7538e10 Mon Sep 17 00:00:00 2001 From: Matthew Sutton Date: Thu, 3 Feb 2022 10:40:29 +0000 Subject: [PATCH 07/16] Fixed relative references --- gov_uk_dashboards/components/plotly/filter_panel.py | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/gov_uk_dashboards/components/plotly/filter_panel.py b/gov_uk_dashboards/components/plotly/filter_panel.py index 5240a11..ba35952 100644 --- a/gov_uk_dashboards/components/plotly/filter_panel.py +++ b/gov_uk_dashboards/components/plotly/filter_panel.py @@ -1,8 +1,8 @@ """filter_panel""" from dash import html -from collapsible_panel import collapsible_panel -from row_component import row_component +from .collapsible_panel import collapsible_panel +from .row_component import row_component def filter_panel(children): From 092ae2ac1f45861a7e06d7974b8be277885789a0 Mon Sep 17 00:00:00 2001 From: WeiranDLUHC Date: Thu, 3 Feb 2022 10:49:45 +0000 Subject: [PATCH 08/16] Removed requirements .txt --- requirements.txt | 3 --- 1 file changed, 3 deletions(-) delete mode 100644 requirements.txt diff --git a/requirements.txt b/requirements.txt deleted file mode 100644 index afb994c..0000000 --- a/requirements.txt +++ /dev/null @@ -1,3 +0,0 @@ -setuptools~=59.8.0 -dash~=2.0.0 -numpy>=1.22.0 \ No newline at end of file From 4d778706d552bc3dbfd3e26b886c0f5e8f62af38 Mon Sep 17 00:00:00 2001 From: WeiranDLUHC Date: Thu, 3 Feb 2022 11:13:17 +0000 Subject: [PATCH 09/16] Add usage for components --- README.md | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index db87f59..4d4e650 100644 --- a/README.md +++ b/README.md @@ -34,11 +34,19 @@ For installation using conda, paste the following code into the environment conf In order to access the colours in the package, use the command: ```python -from gov_uk_dashboards.colours.colours import GovUKColors +from gov_uk_dashboards.colours.colours import GovUKColours -GovUKColors.DLUHC_BLUE.value +GovUKColours.DLUHC_BLUE.value ``` +For components: +```python +from gov_uk_dashboards.components.plotly import banners + +banners.message_banner('category','message') +``` + + ## License [MIT](LICENSE) Copyright (c) 2022 Crown Copyright (Department for Levelling Up, Housing and Communities) \ No newline at end of file From dce36a9086161c7ad6ae815c97befb363e9a1829 Mon Sep 17 00:00:00 2001 From: WeiranDLUHC Date: Thu, 3 Feb 2022 11:14:57 +0000 Subject: [PATCH 10/16] updated version number --- setup.py | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/setup.py b/setup.py index e50cecc..4541178 100644 --- a/setup.py +++ b/setup.py @@ -6,7 +6,7 @@ author="Department for Levelling Up, Housing and Communities", description="Provides access to functionality common to creating a data dashboard.", name="gov_uk_dashboards", - version="1.1.0", + version="2.0.0", packages=find_packages(), install_requires=[ "setuptools~=59.8.0", From 6997ada1e78a5a56f72a98e2eb1c05595b9062e9 Mon Sep 17 00:00:00 2001 From: Matthew Sutton Date: Thu, 3 Feb 2022 11:46:11 +0000 Subject: [PATCH 11/16] Removing unnecessary files --- .../__pycache__/__init__.cpython-37.pyc | Bin 182 -> 0 bytes .../colours/__pycache__/__init__.cpython-37.pyc | Bin 190 -> 0 bytes .../__pycache__/__init__.cpython-37.pyc | Bin 193 -> 0 bytes 3 files changed, 0 insertions(+), 0 deletions(-) delete mode 100644 gov_uk_dashboards/__pycache__/__init__.cpython-37.pyc delete mode 100644 gov_uk_dashboards/colours/__pycache__/__init__.cpython-37.pyc delete mode 100644 gov_uk_dashboards/components/__pycache__/__init__.cpython-37.pyc diff --git a/gov_uk_dashboards/__pycache__/__init__.cpython-37.pyc b/gov_uk_dashboards/__pycache__/__init__.cpython-37.pyc deleted file mode 100644 index afe16711d935d45750998fcf209e0f4cdff7f928..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 182 zcmZ?b<>g`kg4zYY5<&E15CH>>K!yVl7qb9~6oz01O-8?!3`HPe1o120#VRJWIJKxa zCO5I9BqOz4ueh|NBtI|4CAB!aB)=dgC9xziJ|(d@BPlg`kg4zYY5<&E15CH>>K!yVl7qb9~6oz01O-8?!3`HPe1o11~#VRJWIJKxa zCO5I9BqOz4ueh|NBtI|4CAB!aB)=dgC9xziJ|(d@BPlg`kg4zYY5<&E15CH>>K!yVl7qb9~6oz01O-8?!3`HPe1o11&#VRJWIJKxa zCO5I9BqOz4ueh|NBtI|4CAB!aB)=dgC9xziJ|(d@BPl meqL%`NpVbkd}dx|NqoFsLFFwDo80`A(wtN~kQ<7Dm;nId%{VUr From 3e97476aebd0a0a27973dcabafbee50d61692a6f Mon Sep 17 00:00:00 2001 From: Matthew Sutton Date: Thu, 3 Feb 2022 12:01:21 +0000 Subject: [PATCH 12/16] Moved colours to shorten import path --- README.md | 2 +- gov_uk_dashboards/{colours => }/colours.py | 0 gov_uk_dashboards/colours/__init__.py | 0 requirements.txt | 3 +++ 4 files changed, 4 insertions(+), 1 deletion(-) rename gov_uk_dashboards/{colours => }/colours.py (100%) delete mode 100644 gov_uk_dashboards/colours/__init__.py create mode 100644 requirements.txt diff --git a/README.md b/README.md index 4d4e650..c83310a 100644 --- a/README.md +++ b/README.md @@ -34,7 +34,7 @@ For installation using conda, paste the following code into the environment conf In order to access the colours in the package, use the command: ```python -from gov_uk_dashboards.colours.colours import GovUKColours +from gov_uk_dashboards.colours import GovUKColours GovUKColours.DLUHC_BLUE.value ``` diff --git a/gov_uk_dashboards/colours/colours.py b/gov_uk_dashboards/colours.py similarity index 100% rename from gov_uk_dashboards/colours/colours.py rename to gov_uk_dashboards/colours.py diff --git a/gov_uk_dashboards/colours/__init__.py b/gov_uk_dashboards/colours/__init__.py deleted file mode 100644 index e69de29..0000000 diff --git a/requirements.txt b/requirements.txt new file mode 100644 index 0000000..afb994c --- /dev/null +++ b/requirements.txt @@ -0,0 +1,3 @@ +setuptools~=59.8.0 +dash~=2.0.0 +numpy>=1.22.0 \ No newline at end of file From a950f05b1194fa96081a1ce3ec5c1e2cdd4c2a3b Mon Sep 17 00:00:00 2001 From: WeiranDLUHC Date: Thu, 3 Feb 2022 15:19:35 +0000 Subject: [PATCH 13/16] Adding template.html file --- MANIFEST.in | 3 ++- gov_uk_dashboards/template.html | 26 ++++++++++++++++++++++++++ gov_uk_dashboards/template.py | 12 ++++++++++++ setup.py | 4 +++- 4 files changed, 43 insertions(+), 2 deletions(-) create mode 100644 gov_uk_dashboards/template.html create mode 100644 gov_uk_dashboards/template.py diff --git a/MANIFEST.in b/MANIFEST.in index 689e50f..810aa35 100644 --- a/MANIFEST.in +++ b/MANIFEST.in @@ -1,2 +1,3 @@ include LICENSE -include README.md \ No newline at end of file +include README.md +include gov_uk_dashboards/template.html \ No newline at end of file diff --git a/gov_uk_dashboards/template.html b/gov_uk_dashboards/template.html new file mode 100644 index 0000000..36be4c3 --- /dev/null +++ b/gov_uk_dashboards/template.html @@ -0,0 +1,26 @@ + + + + {%metas%} + {%title%} - DLUHC Data Dashboards + {%favicon%} {%css%} + + + + {%app_entry%} +
{%config%} {%scripts%} {%renderer%}
+ + + + + + diff --git a/gov_uk_dashboards/template.py b/gov_uk_dashboards/template.py new file mode 100644 index 0000000..912e0c3 --- /dev/null +++ b/gov_uk_dashboards/template.py @@ -0,0 +1,12 @@ +import os +import inspect +from . import colours + + + + +def read_template(): + with open(inspect.getfile(colours).replace('colours.py','template.html'), encoding="utf-8") as f: + template = f.read() + return template + \ No newline at end of file diff --git a/setup.py b/setup.py index 96573af..aa102b4 100644 --- a/setup.py +++ b/setup.py @@ -6,12 +6,14 @@ author="Department for Levelling Up, Housing and Communities", description="Provides access to functionality common to creating a data dashboard.", name="gov_uk_dashboards", - version="2.0.0", + version="2.0.1", packages=find_packages(), install_requires=[ "setuptools~=59.8.0", "dash~=2.0.0", "numpy>=1.22.0", ], + package_data={'':['gov_uk_dashboards/template.html']}, + include_package_data=True ) From 651109d4b4b9decd5309a18d0755e9bc9b1008c2 Mon Sep 17 00:00:00 2001 From: Rhys Date: Thu, 3 Feb 2022 15:38:18 +0000 Subject: [PATCH 14/16] Add function to read in template --- gov_uk_dashboards/template.py | 18 +++++++++++------- 1 file changed, 11 insertions(+), 7 deletions(-) diff --git a/gov_uk_dashboards/template.py b/gov_uk_dashboards/template.py index 912e0c3..3734916 100644 --- a/gov_uk_dashboards/template.py +++ b/gov_uk_dashboards/template.py @@ -1,12 +1,16 @@ +""" +Read government dashboard template +""" import os -import inspect -from . import colours - - -def read_template(): - with open(inspect.getfile(colours).replace('colours.py','template.html'), encoding="utf-8") as f: +def read_template() -> str: + """ + Read the government html template. + :return: String version of the template. + """ + path = os.path.dirname(__file__) + path = os.path.join(path, "template.html") + with open(path, encoding="utf-8") as f: template = f.read() return template - \ No newline at end of file From 6ffb27e6a2a6b344ed955c9664dc4f1cbdfd4134 Mon Sep 17 00:00:00 2001 From: Rhys Date: Thu, 3 Feb 2022 15:41:48 +0000 Subject: [PATCH 15/16] Add template instructions to readme --- README.md | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index c83310a..f0daa11 100644 --- a/README.md +++ b/README.md @@ -31,8 +31,16 @@ For installation using conda, paste the following code into the environment conf ## Usage -In order to access the colours in the package, use the command: +Using Government dashboard template with dash: +```python +import dash +from gov_uk_dashboards.template import read_template + +app = dash.Dash(__name__, suppress_callback_exceptions=True) +app.index_string = read_template() +``` +For colours: ```python from gov_uk_dashboards.colours import GovUKColours From 4d17eecb9e915db80551347f1cfa72c572eeaf60 Mon Sep 17 00:00:00 2001 From: Rhys Date: Thu, 3 Feb 2022 16:35:40 +0000 Subject: [PATCH 16/16] changing version in setup.py to 2.0.0 --- setup.py | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/setup.py b/setup.py index aa102b4..9aab1f8 100644 --- a/setup.py +++ b/setup.py @@ -6,7 +6,7 @@ author="Department for Levelling Up, Housing and Communities", description="Provides access to functionality common to creating a data dashboard.", name="gov_uk_dashboards", - version="2.0.1", + version="2.0.0", packages=find_packages(), install_requires=[ "setuptools~=59.8.0",