Merge branch 'prerelease' into live

.github/workflows/ALL-BRANCHES-ALL-PRs-build-and-deploy-to-azure.yml

@@ -1,7 +1,7 @@
 # This Action builds the documentation site in mkdocs
 # and pushes it to Azure from where it is deployed
 # to the LIVE site https://growth.rcpch.ac.uk/
-# 
+#
 # Azure will also build a preview site for any PRs against LIVE or branches
 
 name: ALL-BRANCHES-ALL-PRs-build-and-deploy-to-azure.yml
@@ -28,7 +28,7 @@ jobs:
     steps:
       - uses: actions/checkout@v3
         with:
-          fetch-depth: 0
+          fetch-depth: 0 # required for git-revision and git-committers plugins to work properly in CI
           submodules: true
       - uses: actions/setup-python@v4
         with:
@@ -63,5 +63,5 @@ jobs:
           action: "close"
 
 
-      
+
 

docs/_assets/_snippets/docs-contributions.md

@@ -0,0 +1 @@
+If you spot errors or inconsistencies in any documentation, please do point them out to us either by creating an Issue in the relevant repository, or by making a pull request with a fix. We will [acknowledge](../about/acknowledgements) all contributors.

docs/developer/react-client.md

@@ -0,0 +1,47 @@
+---
+title: React Client
+reviewers: Dr Simon Chapman, Dr Marcus Baw
+
+---
+
+## Developer documentation
+
+The demonstration React client for the dGC API is built in React and styled with Semantic UI React. It is intended as a good starting point for understanding the dGC API backend and serves as a prototype client from which you can build your own client, if that is what you require.
+
+It's important to understand the three parts of the dGC platform that are in play here:
+
+1. **React client application** - this comprises the left sidebar with the input boxes and UI tools for inputting data such as heights, weights, age, sex, and gestation at birth. The React client imports the React chart component from NPM, so the chart component is a dependency of the client. When data are entered into the forms and submitted, the React client sends a HTTP request to the:
+
+1. **dGC API server** - which processes the data and returns a JSON response containing calculated centile data, corrected gestational ages, etc. This response is received by the React client which passes it direct into the React chart component without any JSON transformation being required.
+
+1. **React chart component** - this is the right hand side two thirds section of the screen in the demo client, containing the chart vector image. The component can be embedded in any web page and it natively 'understands' the JSON response from the API call. Passing an array of JSON API responses to the React chart component will result in all those measurements being plotted for you.
+
+### Set Up for local development using Docker
+
+1. Clone the React Client repo
+```console
+git clone https://github.com/rcpch/digital-growth-charts-react-client.git
+```
+
+1. Build the Docker image
+```console
+s/docker-rebuild
+```
+
+1. Start the Docker container
+```console
+s/docker-start
+```
+
+1. Open the React Client in your browser
+```console
+open http://localhost:3000
+```
+
+If you make changes to the dependencies you will need to rebuild the Docker image using `s/docker-rebuild` and restart the Docker container using `s/docker-start`.
+
+
+
+### Style
+
+We recommend the use of the Prettier Javascript linter.

docs/parents/faqs-parents.md

@@ -1,6 +1,6 @@
 ---
 title: Frequently Asked Questions
-reviewers: Dr Anchit Chandran
+reviewers: Dr Anchit Chandran, Dr Marcus Baw
 ---
 
 ### I didn’t breastfeed, or I stopped early – are these charts still right for my baby?

docs/products/react-client.md

@@ -10,7 +10,7 @@ reviewers: Dr Marcus Baw, Dr Anchit Chandran
 [![Github Issues](https://img.shields.io/github/issues/{{ repository_name }})](https://github.com/{{ repository_name }}/issues)
 [![Github Stars](https://img.shields.io/github/stars/{{ repository_name }})](https://github.com/{{ repository_name }}/stargazers)
 [![Github Forks](https://img.shields.io/github/forks/{{ repository_name }})](https://github.com/{{ repository_name }}/network/members)
-[![Github Licence](https://img.shields.io/github/license/{{ repository_name }})](https://github.com/{{repository_name }}/blob/live/LICENSE)
+[![Github Licence](https://img.shields.io/github/license/{{ repository_name }})](https://github.com/{{ repository_name }}/blob/live/LICENSE)
 [![GitHub Pages Build & Deploy](https://github.com/rcpch/digital-growth-charts-react-client/actions/workflows/deploy-react-app-gh-pages.yml/badge.svg)](https://github.com/rcpch/digital-growth-charts-react-client/actions/workflows/deploy-react-app-gh-pages.yml)
 
 [:octicons-mark-github-16: GitHub repository](https://github.com/{{ repository_name }})
@@ -25,37 +25,22 @@ This client, written in React.js, is for demonstration of the API and the chart
 
 We have attempted to build the very best of growth chart theory and practice into the React client, including guidance given to us by the RCPCH Digital Growth Charts Project Board, and accepted best practice from the days of paper growth charts.
 
-## Clinical notes regarding the React client
+## Notes regarding the React client
 
-### Pink and Blue no longer used for the charts
+### Colours for the charts have been updated
 
-It was felt that representing boys' charts with blue lines and girls' charts with pink lines did not really fit with 21st Century sensibilities of sex and gender. A Project Board decision was made to remove these colours and simply render the charts in monochrome black/grey, with some more off-the-wall colour themes available for variety and interest only.
+It was felt that representing boys' charts with blue lines and girls' charts with pink lines did not necessarily fit with 21st Century sensibilities of sex and gender. A Project Board decision was made to make the default chart colour monochrome black/grey.
 
-## Documentation
+'Traditional' growth chart pink and blue colours are available as an option, and we have created som other colour options named after James Tanner who pioneered the study of childrens' growth, showing off the capability of the chart component to be customised.
 
-API documentation can be found [here](../integrator/api-reference.md).
-
-If you spot errors or inconsistencies in any documentation, please do point them out to us either by creating an Issue in the relevant repository, or by making a pull request with a fix. We will [acknowledge](../about/acknowledgements) all contributors.
-
-## Developer documentation
-
-Built in React using Semantic UI React.
-
-### Set Up
-
-1. Install React [here](https://reactjs.org/docs/getting-started.html)
-1. Clone the repo
-1. Navigate to the root of the folder
-1. `npm login --registry=https://npm.pkg.github.com` and
-1. `npm install`
-1. `npm start`
-
-### Style
-
-We recommend the use of the Prettier Javascript linter.
-
-## Other documentation
+### Other documentation
 
+- [Clinician documentation](../clinician/how-the-api-works.md)
 - [Integrator documentation](../integrator/getting-started.md)
+- [API documentation](../integrator/api-reference.md)
+- [Developer documentation](../developer/react-client.md)
 - [Contributor documentation](../developer/start-here.md)
-- [Clinician documentation](../clinician/how-the-api-works.md)
+
+--8<--
+docs/_assets/_snippets/docs-contributions.md
+--8<--

mkdocs.yml

@@ -48,6 +48,7 @@ nav:
     - 'developer/api-python.md'
     - 'developer/api-docker.md'
     - 'developer/api-testing.md'
+    - 'developer/react-client.md'
     - 'developer/rcpchgrowth.md'
     - 'developer/rcpchgrowth-cli.md'
     - 'developer/versioning.md'