Merge pull request #1 from communitiesuk/adding_components

Adding plotly components

.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

MANIFEST.in

@@ -1,2 +1,3 @@
 include LICENSE
-include README.md
+include README.md
+include gov_uk_dashboards/template.html

README.md

@@ -31,14 +31,30 @@ 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
+
+GovUKColours.DLUHC_BLUE.value
+```
 
+For components:
 ```python
-from GOV_UK_Colours.colours import GovUKColors
+from gov_uk_dashboards.components.plotly import banners
 
-GovUKColors.DLUHC_BLUE.value
+banners.message_banner('category','message')
 ```
 
+
 ## License
 
 [MIT](LICENSE) Copyright (c) 2022 Crown Copyright (Department for Levelling Up, Housing and Communities)

GOV_UK_Colours/colours.py → gov_uk_dashboards/colours.py

@@ -1,7 +1,8 @@
 """govuk_colors"""
 from enum import Enum
 
-class GovUKColors(Enum):
+
+class GovUKColours(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",
-    ]
+    ]

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",
+    )

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")

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%"})

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}
+    )

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")

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",
+            },
+        ),
+    )