Dash components for Gov UK
Project description
UK Gov dash components
UK Gov dash components is a Dash component library.
Plotly Dash have written some documentation on React for Python Developers which acts as good starting point.
Install dependencies
If you have selected install_dependencies during the prompt, you can skip this part.
- Install npm packages
npm install
- Create conda environment
conda env create -f environment.yml
Create a new component
Use the ComponentTemplate
component as a template.
This component is class based, while other components in this repository are functions.
You can read more about function components in the React documentation.
- Copy
src/lib/components/ComponentTemplate.react.js
->src/lib/components/YourComponent.react.js
- Copy
src/lib/fragments/ComponentTemplate.react.js
->src/lib/fragments/YourComponent.react.js
- Modify the newly created files, replacing all references to
ComponentTemplate
withYourComponent
, and replacing the sample functionality with what you'd like. - Add both an import and export of
YourComponent
to bothsrc/lib/index.js
andsrc/lib/LazyLoader.js
- Add
YourComponent
to the import at the top of thesrc/demo/App.js
file, and add<YourComponent>
to the App.render() function.- Run
npm start
to start the demo server. - Open http://localhost:55555 in your browser.
- If nothing apears on the page, then open up the browser console to see the error(s).
- Run
Test your code within a Dash Application
If you've previously been running npm start
you've been running your component within a pure React environment separate to Dash.
- Build your code which will generate all the Python code required
npm run build
- Run the
example.py
sample Dash app:python example.py
- Visit http://localhost:8050 in your web browser
- Add your component to
example.py
using the existing Python as a template.
Write tests for your component.
These are the default instructions
- A sample test is available in
tests/test_example.py
, it will loadexample.py
and you can then automate interactions with selenium. - Run the tests with
pytest tests
. - The Dash team uses these types of integration tests extensively. Browse the Dash component code on GitHub for more examples of testing (e.g. https://github.com/plotly/dash-core-components)
Add custom styles to your component
These are the default instructions
- Add custom styles to your component by putting your custom CSS files into your distribution folder (
uk_gov_dash_components
).- Make sure that they are referenced in
MANIFEST.in
so that they get properly included when you're ready to publish your component. - Make sure the stylesheets are added to the
_css_dist
dict inuk_gov_dash_components/__init__.py
so dash will serve them automatically when the component suite is requested.
- Make sure that they are referenced in
- Review your code
Create a production build and publish:
-
Update the
version
property of thepackage.json
file in the syle of Major.Minor.Patch, e.g. 1.2.3- Major - any breaking changes to previous functionality.
- Minor - additional functionality that doesn't effect backward compatibility. When updated the patch version should be reset to zero. eg. 2.3.1 goes to 2.4.0 for minor update.
- Patch - bug fixes that don't effect backward compatibility. For more information see here
-
Build your code:
npm run build
-
Create a Python distribution
python setup.py sdist bdist_wheel
This will create source and wheel distribution in the generated the
dist/
folder. See PyPA for more information. -
Test your tarball by copying it's full file path and installing it locally into a new environment by running:
pip install "<full file path>"
eg.
pip install "D:\Users\user\Desktop\Source Code Store\gov-uk-dash-react-components\dist\uk_gov_dash_components-1.2.1.tar.gz"
-
When your PR is merged to main, it will be released automatically by the Release workflow using the version within package.json. You can still merge a PR which doesn't update the version within
package.json
, but the Release workflow will fail. Failure of the Release workflow means that a new release won't have been generated and you won't be able to use the new version of the code in dashboard repos until you update the version inpackage.json
.
Project details
Release history Release notifications | RSS feed
Download files
Download the file for your platform. If you're not sure which to choose, learn more about installing packages.
Source Distribution
Built Distribution
Hashes for uk_gov_dash_components-1.6.6.tar.gz
Algorithm | Hash digest | |
---|---|---|
SHA256 | 336bd1ec96cf1b6378e596aba096c958f2fb96405b7c0a6134197c89e526aa12 |
|
MD5 | 94c0571f8bde20aa3924b467192675a5 |
|
BLAKE2b-256 | bf318fbc0869ec8c78db85541fa51c81bf1265edd7bd74f3979035bbc1cf9853 |
Hashes for uk_gov_dash_components-1.6.6-py3-none-any.whl
Algorithm | Hash digest | |
---|---|---|
SHA256 | c88b34468ac10738edccecdb94c7d8b2af2f4dcbfa3be9fe942d14f8305f6b5d |
|
MD5 | 1dd11ec028b3ddf9d9fbbedf9bc4d3dd |
|
BLAKE2b-256 | ed19ec8933951aab254ecaee34b3f30d5ae11cd6ffad84e7e3bce46af165c5d7 |