.
+
Please also see our [Pricing](../products/pricing.md) section for more details on the support included with each pricing tier.
-We have a number of different user types to support. Depending on your needs and role, please navigate to the appropriate section through the following options:
+To obtain the information you need for the best use of the RCPCH dGC platform depending on your role, please navigate to the appropriate section through the following options:
- :material-code-tags:{ .lg .middle } __Integrator__
-
+
*I am a developer looking to integrate Digital Growth Charts into an app, EPR, or other existing system.*
[:octicons-arrow-right-24: Integrators](../integrator/getting-started.md){ .md-button .md-button--primary }
- :material-stethoscope:{ .lg .middle } __Clinician__
-
+
*I am a clinician wanting to find out more about Digital Growth Charts and how I can get them at my place of work.*
[:octicons-arrow-right-24: Clinicians](../clinician/faqs-for-clinicians.md){ .md-button .md-button--primary }
- :fontawesome-brands-github:{ .lg .middle } __Contributor__
-
+
*I want to know how to set up a development environment and start improving the Digital Growth Charts platform.*
[:octicons-arrow-right-24: Contributors](../developer/start-here.md){ .md-button .md-button--primary }
- :material-safety-goggles:{ .lg .middle } __Clinical Safety Officer__
-
+
*I'm a Clinical Safety Officer looking for DCB0129 and other compliance information.*
-
+
[:octicons-arrow-right-24: Clinical Safety Management File](../safety/overview.md){ .md-button .md-button--primary }
diff --git a/docs/integrator/whos-using-dgc.md b/docs/integrator/whos-using-dgc.md
index f7943554..b336644c 100644
--- a/docs/integrator/whos-using-dgc.md
+++ b/docs/integrator/whos-using-dgc.md
@@ -1,6 +1,7 @@
---
title: Who's using the dGC Platform?
reviewers: Dr Marcus Baw, Dr Simon Chapman, Dr Anchit Chandran
+audience: integrators, implementers, technical-architects
---
# Who's using the dGC Platform?
@@ -20,5 +21,17 @@ this bit is hidden from the published site (but is visible in GH source)
to add:
NHSE/X as commissioners
NHSD - using python package in DAE for Maternity project
-Trusts - Northumberland
+
+## Suppliers
+CleverMed/BadgerNet
+TPP/SystmOne
+
+## Regions
+NHS Wales
+
+## Trusts
+Northumberland
+Cornwall
+Kent
+Forth Valley
-->
diff --git a/docs/legal/data-protection.md b/docs/legal/data-protection.md
index 917a9e12..a2f889d1 100644
--- a/docs/legal/data-protection.md
+++ b/docs/legal/data-protection.md
@@ -1,6 +1,7 @@
---
title: Data Protection
reviewers: Dr Marcus Baw, Dr Anchit Chandran
+audience: clinicians, caldicott-guardians, data-protection-officers, developers
---
# Data Protection Considerations
diff --git a/docs/legal/disclaimer.md b/docs/legal/disclaimer.md
index 5716665a..c6da8daf 100644
--- a/docs/legal/disclaimer.md
+++ b/docs/legal/disclaimer.md
@@ -1,6 +1,7 @@
---
title: DISCLAIMER
reviewers: Dr Marcus Baw, Dr Anchit Chandran
+audience: implementers, developers
---
# DISCLAIMER
diff --git a/docs/legal/licensing-copyright.md b/docs/legal/licensing-copyright.md
index d017f2c8..51c10a92 100644
--- a/docs/legal/licensing-copyright.md
+++ b/docs/legal/licensing-copyright.md
@@ -1,6 +1,7 @@
---
title: Licensing and Copyright
reviewers: Dr Marcus Baw, Dr Anchit Chandran
+audience: implementers, developers, clinicians
---
# Licensing and Copyright
diff --git a/docs/legal/privacy-notice.md b/docs/legal/privacy-notice.md
index 5d64b35b..cf23cdc1 100644
--- a/docs/legal/privacy-notice.md
+++ b/docs/legal/privacy-notice.md
@@ -1,38 +1,42 @@
---
+title: Privacy Notice
reviewers: Dr Marcus Baw, Dr Anchit Chandran
+audience: caldicott-guardians, implementers, developers
---
# Privacy Notice
-## What Information do we collect about you?
+## What information do we collect about you?
If you choose to create an account for the API service, we collect your name and email address and ask you to create a password. If you upgrade to a paid subscription, we will ask you for more details to process the payment.
We will process your data as part of a contract with you. Information collected will be used to create and manage your account, and to contact you about Growth API. We do not use your personal data to make automated decisions or undertake profiling about you.
-## What do we do with your information?
+It is important to distinguish between **the account data we collect about Integrators** (developer account data) and **the data we process on your behalf**. The data we collect about you is your account information, which is used to manage your account and contact you about the service. The data we process on your behalf is the measurements you send to the API, which are used to calculate centiles and SDS scores.
-We put security measures in place to ensure your information is securely stored. Your information will not be shared outside the RCPCH.
+## What do we do with your developer account information?
-Information will be stored with third-party suppliers who are acting on our behalf as data processors to provide certain products and services for the College. Your personal data will not be transferred outside of the UK.
+We have stringent security measures in place to ensure your information is securely stored. Your information will not be shared outside the RCPCH. Information will be stored with third-party suppliers who are acting on our behalf as data processors to provide certain products and services for the College. Your personal data will not be transferred outside of the UK.
We will only retain your information for as long as necessary to fulfil our contract with you. If you decide to end your subscription with us, we will retain your account details for two years after the end of your subscription and then delete your data.
-The RCPCH Digital Growth Chart API is stateless, meaning it does not persist any data about the measurements sent to it. This is a crucial part of the API’s privacy design and has enabled us to keep the API development simple and constrained to solving the specific problem of centile/SDS calculations.
+## What do we do with the data you send to the API?
-It is the responsibility of the consuming application to store the measurements. This is the logical place to store data about the child since this consuming application will already have other stored data about the child within it, such as demographics.
+The RCPCH Digital Growth Chart API is **stateless**, meaning it does not persist **any** data about the measurements sent to it. This is a crucial part of the API’s privacy design and has enabled us to keep the API development simple and constrained to solving the specific problem of providing centile/SDS calculations as a service.
+
+It is the responsibility of the *consuming application* to store the measurements. This is the logical place to store data about the child since this consuming application will already have other stored data about the child within it, such as demographics. The consuming application also already has an appropriate legal basis for storing the data, such as Direct Care.
## Your Rights
You have the following rights in relation to your data:
-* Right of access and right to have a copy of your personal data in a standard format (right to data portability). You can ask us for a copy of the information that we hold about you. You can also ask us for a copy of your data in a standard format where this is technically possible. But this only applies where we are holding your information with consent or as part of a contract with you.
+* Right of access and right to have a copy of your account data in a standard format (right to data portability). You can ask us for a copy of the information that we hold about you. You can also ask us for a copy of your data in a standard format where this is technically possible. This only applies where we are holding your information with consent or as part of a contract with you.
-* Change any factual errors or inaccuracies (right of rectification). If you have an RCPCH online account you can change and update your personal data. It is your responsibility to update us with any changes to the personal information you have provided. You can also contact us either via our contact form or contact the relevant team directly.
+* Change any factual errors or inaccuracies (right of rectification). If you have an RCPCH developer account you can change and update your personal data. It is your responsibility to update us with any changes to the personal information you have provided. You can also contact us either via our contact form or contact the relevant team directly.
* Delete your personal data (called a right to erasure). We cannot delete all personal data as we may have a legal obligation or because we have a requirement to retain it for a task in the public interest, but we can delete non-essential data.
-* Restrict the use of your data (right of restriction). You can request that we deactivate your RCPCH online account or that we only store your data but undertake no further processing. However, this only applies to certain circumstances.
+* Restrict the use of your data (right of restriction). You can request that we deactivate your RCPCH developer account or that we only store your data but undertake no further processing. However, this only applies to certain circumstances.
* Object to processing (right to objection). You can ask that we stop using data that is not necessary for fulfilling our legal obligations.
@@ -70,7 +74,7 @@ If you make a request, we have one month to respond to you.
Please note, when mailing inquiries, you must mark your letters for ‘DataRep’ and not ‘RCPCH’, or your inquiry will not reach them. Please refer clearly to RCPCH in your correspondence. On receiving your correspondence, RCPCH is likely to request evidence of your identity, to ensure your personal data and information connected with it is not provided to anyone other than you.
If you have any concerns over how DataRep will handle the personal data they will require to undertake for their services, please refer to their privacy notice.
-
+
For general enquiries about RCPCH and its data processing contact:
## How to make a complaint
diff --git a/docs/parents/chart-information-families.md b/docs/parents/chart-information-families.md
index 9d398440..2ec2648c 100644
--- a/docs/parents/chart-information-families.md
+++ b/docs/parents/chart-information-families.md
@@ -1,6 +1,7 @@
---
title: Information for Parents
reviewers: Dr Marcus Baw, Dr Anchit Chandran
+audience: parents, carers, families
---
# Information for Parents
@@ -49,3 +50,5 @@ After 2 years of age, height is measured, standing up with shoes removed. It is
From age 4 years, your child’s Body Mass Index (BMI) can be calculated from a measure of both weight and height. This measures how much weight your child is carrying, allowing for their height. It is calculated by dividing their weight (in kilograms) by their height (in metres), squared. The cut-off for a high BMI varies with age, but if a child’s BMI is above the cut-off, this generally suggests that they are overweight. A child with a low BMI is more likely to have a lean build rather than too little fat. Your GP or other health professional caring for your child will be able to discuss your child’s BMI with you.
The NHS has a website which can calculate Body Mass Index for children over 2 years of age.
+
+
diff --git a/docs/parents/faqs-parents.md b/docs/parents/faqs-parents.md
index 448343a6..0d9e5c87 100644
--- a/docs/parents/faqs-parents.md
+++ b/docs/parents/faqs-parents.md
@@ -1,11 +1,12 @@
---
title: Frequently Asked Questions
reviewers: Dr Anchit Chandran, Dr Marcus Baw
+audience: parents
---
### I didn’t breastfeed, or I stopped early – are these charts still right for my baby?
-The charts show how healthy babies with no problems grow. Babies grow most naturally when fed on breastmilk and this chart helps you check that your baby is still growing in the same healthy pattern.
+The charts show how healthy babies grow. Babies grow most naturally when fed on breast milk and this chart helps you check that your baby is still growing in the same healthy pattern.
### My baby was born prematurely. Is this taken into account?
@@ -21,8 +22,12 @@ Children often lose some weight when they are not well. Once your child recovers
### My baby’s weight was on one centile, but now it's nearly down to the next line – is this normal?
-It is normal for your child’s weight centile drop by up to one centile space (the distance between two centile lines) between measurements, but it is less common for a child’s weight to cross two spaces; if this happens your health visitor or doctor may want to measure their length, ask about their eating and may do some investigations.
+It is normal for your child’s weight centile drop by up to one centile space (the distance between two centile lines) between measurements, but it is less common for a child’s weight to cross two spaces; if this happens your health visitor or doctor may want to measure their length, ask about their eating and possibly do some investigations.
### My baby's head size has risen to the top of the centile chart – should I be worried?
British children have relatively large heads compared to the WHO standard, particularly after the age of 6 months. It's fairly common for the head centile to be at the very top of the chart or even above it. This should only cause concern if the head centile goes on rising after the first few weeks, or if there are other concerning signs or symptoms.
+
+### Why are there only two kinds of chart - 'boys' and 'girls'?
+
+Although some children may identify as a sex which is not the same as the sex they were identified at birth, their growth will still in most cases follow the chart ('boys' or 'girls') which most closely represents their sex assigned at birth. If your child is under the care of a specialist in growth, gender, or hormones, they will be able to advise you on which chart to use.
diff --git a/docs/products/api-server.md b/docs/products/api-server.md
index e84da66e..53c04a63 100644
--- a/docs/products/api-server.md
+++ b/docs/products/api-server.md
@@ -3,14 +3,14 @@ title: dGC API Server
reviewers: Dr Marcus Baw
---
-# dGC API Server
-
{% set repository_name="rcpch/digital-growth-charts-server" -%}
[](https://github.com/{{ repository_name }}/issues)
[](https://github.com/{{ repository_name }}/stargazers)
[](https://github.com/{{repository_name }}/blob/live/LICENSE)
[](https://github.com/rcpch/digital-growth-charts-server/actions/workflows/live-deploy-to-server-on-release.yml)
+
+
[](https://zenodo.org/badge/latestdoi/261587883)
[](https://god.gw.postman.com/run-collection/202702-d1daf1c6-3a4c-469d-be2a-e2fcf3d84090?action=collection%2Ffork&collection-url=entityId%3D202702-d1daf1c6-3a4c-469d-be2a-e2fcf3d84090%26entityType%3Dcollection%26workspaceId%3Dd868b72e-0677-4b67-9283-112363b1f5ac#?env%5BLIVE%20api.rcpch.ac.uk%5D=W3sia2V5IjoiYmFzZVVybCIsInZhbHVlIjoiaHR0cHM6Ly9hcGkucmNwY2guYWMudWsvZ3Jvd3RoL3YxIiwiZW5hYmxlZCI6dHJ1ZSwidHlwZSI6ImRlZmF1bHQiLCJzZXNzaW9uVmFsdWUiOiJodHRwczovL2FwaS5yY3BjaC5hYy51ay9ncm93dGgvdjEiLCJzZXNzaW9uSW5kZXgiOjB9LHsia2V5IjoiYXBpS2V5IiwidmFsdWUiOiJJTlNFUlRfWU9VUl9BUElfS0VZX0hFUkUiLCJlbmFibGVkIjp0cnVlLCJ0eXBlIjoic2VjcmV0Iiwic2Vzc2lvblZhbHVlIjoiSU5TRVJUX1lPVVJfQVBJX0tFWV9IRVJFIiwic2Vzc2lvbkluZGV4IjoxfV0=)
@@ -23,6 +23,6 @@ reviewers: Dr Marcus Baw
-## Getting Started
+## Getting Started with integrating our API
If you want to integrate the RCPCH Digital Growth Charts API into an application, then start [here](../integrator/getting-started.md).
diff --git a/docs/products/flask(deprecated).md b/docs/products/flask(deprecated).md
index ada8c981..aa117e8b 100644
--- a/docs/products/flask(deprecated).md
+++ b/docs/products/flask(deprecated).md
@@ -1,9 +1,10 @@
---
title: Flask/Python Client (deprecated)
reviewers: Dr Marcus Baw, Dr Anchit Chandran
+audience: developers, implementers, integrators
---
-# Flask/Python (deprecated)
+# Flask/Python ( :warning: deprecated)
Early in development of the growth charts, our client was simply part of the same Flask app, which later became the API. At that point, it was necessary to separate the two apps functionally for the client to use the API over REST.
diff --git a/docs/products/get-digital-growth-charts.md b/docs/products/get-digital-growth-charts.md
index 5d2f202b..704cd506 100644
--- a/docs/products/get-digital-growth-charts.md
+++ b/docs/products/get-digital-growth-charts.md
@@ -1,28 +1,28 @@
---
title: Get Digital Growth Charts
reviewers: Dr Marcus Baw, Dr Anchit Chandran
+audience: implementers, clinicians
---
-## Paper growth charts holding up your digital transformation?
+## Are paper growth charts holding up digital transformation?
We know from talking to experienced child health clinicians that they absolutely **must have** growth charts in any new digital solution. The lack of good quality and richly functional digital growth charts on the EPR/EHR market has held back digital transformation in many care settings. Some care-giving organisations have been forced to either hold up plans for digitisation, or use a parallel paper chart workflow.
-**We built the RCPCH Digital Growth Charts project to be a safe and cost-effective solution.**
+!!! success "RCPCH Digital Growth Charts are a safe and cost-effective solution"
+ Our solution is a UKCA/CE-marked Registered Medical Device, with a full DCB0129 clinical safety file, and is already in use in numerous NHS organisations across the UK, and within third-party EPR systems.
## Trusted, familiar-looking Digital Growth Charts
-Produced and warranted by the RCPCH itself – the international authority on child health.
+* Produced and warranted by the RCPCH itself – the international authority on child health.
-Designed to be familiar to clinicians used to paper growth charts.
+* Designed to be familiar to clinicians used to paper growth charts.
-Richly functional, adding features like automatic gestational age correction, bone age, mid-parental height, event recording, and specialist references for Turner and Down syndromes.
+* Richly functional, adding features like automatic gestational age correction, bone age, mid-parental height, event recording, and specialist references for Turner and Down syndromes.
## The heavy lifting is done for you
We know that calculation and display of growth parameters is technically hard, and comes with many clinical caveats. Our SaaS (Software As A Service) platform does all the hard work for you, meaning your clinicians get dependable, trustworthy charts, and digital transformation can proceed.
-We think more stuff in the NHS should be done this way!
-
## Who's using the RCPCH Digital Growth Charts?
The RCPCH Digital Growth Charts are already used in numerous NHS Trusts across England. Also, they are currently being adopted by UK General Practice clinical systems, at National level in UK Devolved Nations, and within major neonatal and maternity systems.
diff --git a/docs/products/google-sheets-plugin.md b/docs/products/google-sheets-plugin.md
index 500b77fb..082f0a28 100644
--- a/docs/products/google-sheets-plugin.md
+++ b/docs/products/google-sheets-plugin.md
@@ -1,6 +1,7 @@
---
title: Google Sheets Plugin
reviewers: Dr Marcus Baw, Dr Anchit Chandran
+audience: developers, implementers, integrators, researchers, academics
---
[:octicons-mark-github-16: GitHub Repository](https://github.com/rcpch/digital-growth-charts-google-sheets-plugin)
diff --git a/docs/products/products-overview.md b/docs/products/products-overview.md
index f6830c52..8c0284b2 100644
--- a/docs/products/products-overview.md
+++ b/docs/products/products-overview.md
@@ -1,6 +1,7 @@
---
title: Products Overview
reviewers: Dr Marcus Baw, Dr Anchit Chandran
+audience: implementers, clinicians
---
# Products Overview
diff --git a/docs/products/react-component.md b/docs/products/react-component.md
index 072af8a7..888d5097 100644
--- a/docs/products/react-component.md
+++ b/docs/products/react-component.md
@@ -6,483 +6,45 @@ reviewers: Dr Marcus Baw, Dr Simon Chapman, Dr Anchit Chandran
# React Chart Component
{% set repository_name="rcpch/digital-growth-charts-react-component-library" -%}
-
-[](https://github.com/{{ repository_name }}/issues)
-[](https://github.com/{{ repository_name }}/stargazers)
-[](https://github.com/{{ repository_name }}/network/members)
-[](https://github.com/{{repository_name }}/blob/live/LICENSE)
-[](https://github.com/rcpch/digital-growth-charts-react-component-library/actions/workflows/main.yml)
-
[:octicons-mark-github-16: GitHub repository](https://github.com/{{ repository_name }})
[:material-web: Online Demo](https://growth.rcpch.ac.uk/)
-
-
-You can use the component as-is in a React app, or include it in plain HTML or any other JavaScript framework.
-
-## Supported Features
-
-* Corrected/Chronological age with toggle
-* Zoom with zoom reset (optional prop)
-* Event logging - events associated with measurements
-* Bone ages
-* Mid-parental heights with mid-parental centile lines (at +2 and -2 SDS)
+## Features
+
+* Calculation and display of height, weight, BMI, head circumference, and BMI centiles.
+* Support for Trisomy 21 (Down syndrome) and Turner syndrome.
+* Automatic gestational age correction, throughout the life course.
+* Zoomable, scrollable charts.
+* Event logging - clinical events can be associated with measurements.
+* Bone age integration.
+* Mid-parental heights with mid-parental centile lines (at +2 and -2 SDS).
+* SDS (Standard Deviation Score) charts.
+* Decimal age support.
+* Customisable chart colours.
+* Save chart image to clipboard.
+* Tooltip information which can be optimised for clinicians or families.
+* 'Whole Life Course' toggle to view only measurements or whole chart.
-### Version 6 new features
-
-* Rework the data structure to match that from API to prevent persisting data in the component in future
-* BMI SDS lines
-* SDS charts
-* Save to clipboard
-
-### New in 6.1
-
-* Dates included in tooltips
-* `clinicianFocus` (optional prop) to toggle between advice strings aimed at clinicians or those aimed at families / children & young people
-* Toggle button to allow user to constrain viewable chart to measurements or view the whole chart
-
-## Background
+
-### Why a Chart library?
+## Digital Growth Charts React Client Component Library
-In the process of building the API, we realised the difficulty for developers unfamiliar with growth charts to produce one acceptable to clinicians.
+In the process of building the API, we realised the difficulty of building a graphically pleasing, clinically accurate growth chart representation, especially for non-clinician developers, who might be unfamiliar with growth charts.
-For example, charts typically have 9 main centile lines (though there are other formats), each of which can be rendered as a series. However, the UK-WHO chart is made of several growth references, each from different datasets, and it is a stipulation that they must not overlap. This means that for the four datasets which make up UK-WHO, the developer must render 36 separate 'sections' of centile lines, marrying them up correctly.
+As a simple example, charts typically have 9 main curved centile lines (though there are other formats), each of which can be rendered as a series. However, the UK-WHO chart is made of several growth references, each from different datasets, and it is a stipulation that they must not overlap. This means that for the four datasets which make up UK-WHO, the developer must render 36 separate 'sections' of centile lines, marrying them up correctly, including leaving a 'step' where the datasets change.
Even then, there are certain rules which are key, published by the RCPCH project board. These relate to usability of the charts. For example, the 50th centile should be de-emphasised. These and other rules are listed on the [Client Specification](../integrator/client-specification.md).
-Given the complexity, we decided to create a React component library for developers to use. We designed it to be customisable for direct use, but also as a demonstration for developers wanting to build the charts from the ground up.
-
-For this reason, we have produced a permissively-licensed, open-source React component, which aims to simplify the process of creating a chart from the chart data received from the API. It makes the job of drawing a vector-graphic centile chart much easier.
-
-If you want to see how the library is implemented, we have built a full client for the RCPCHGrowth API in React, which uses this component library, and can be found [here](https://github.com/rcpch/digital-growth-charts-react-client).
-
-### Why use React?
-
-React is a popular UI library for Javascript. It has endured well and seems like a popular choice for developers. Importantly, unlike some other Javascript frameworks which are primarily designed for Single Page Applications, React doesn't expect to have the entire webpage to itself. It can be used as a small component in any other web page, even if the main framework being used is completely different.
-
-!!! question "Tell us what you think"
- Let us know what you think of our design decisions, on this or any other area of the dGC Project, by chatting to us on our [dGC Forum](https://openhealthhub.org/c/rcpch-digital-growth-charts/) :fontawesome-brands-discourse:.
-
-### What about other frameworks/UI libraries?
-
-If you need us to develop a charting component in a different language or framework, we may be able to do this with you or your company. We would need to discuss the requirements and quote for this service. You should be aware that all such RCPCH-developed artefacts will also be open source. We ensure the licensing of open source components is compatible with commercial use.
-
-!!! note "Contact us"
- To contact us for this service, email .
-
-## Getting started
-
-```console
-npm i --save @rcpch/digital-growth-charts-react-component-library
-```
-
-### Circular import errors
-
-Victory Charts are a dependency (see below), built on top of D3.js. On build, it is likely you will get an error relating to circular dependencies for some files in the d3-interpolate module. This issue is logged [here](https://github.com/d3/d3-interpolate/issues/58).
-
-### Running the Charts Package locally
-
-To run the package locally alongside the React client, there are some extra steps. Since the Chart library and the React client both use React, the Charts will throw an error if you import them in the ```package.json``` of your app from a folder on your local machine.
-
-For example, in your React app:
-
-```json
-"dependencies": {
- "@rcpch/digital-growth-charts-react-component-library": "file:/Users/FooBar/Development/react/component-libraries/digital-growth-charts-react-component-library",
-}
-```
-
-This causes a problem as it leads to 2 versions of React running. To overcome this, in your application:
-
-```console
-cd node_modules/react
-npm link
-```
-
-In the root folder of your Chart library:
-
-```console
-npm link react
-```
-
-Repeat the same for ```react-dom``` ensuring all the package versions are the same for your app and the library. The library currently uses version `17.0.2` of React and React-dom.
-
-Now, you can view your changes made live in your app:
-
-```console
-npm run build
-```
-
-Refresh your app.
-
-If the invalid hooks error persists, an alternative method is to add the following line to ```package.json``` in the library. This removes the node_modules from the build folder:
-
-```json
-"scripts": {
- "postinstall": "rm -rf node_modules",
- ...
- },
-```
-
-## Structure
-
-This library has been written in Typescript. The main component is `RCPCHChart`, which takes the following `props`. Note that each component will only render a single chart type, so if you wanted to render a weight *and* a height chart, these must be done as two separate instances of the component.
-
-### RCPCHChart component
-
-??? note "`RCPCHChart` component props"
- ```js
- {
- title: string,
- subtitle: string,
- measurementMethod: 'height' | 'weight' | 'ofc' | 'bmi',
- sex: 'male' | 'female',
- measurementsArray: [Measurement],
- reference: 'uk-who' | 'turner' | 'trisomy-21',
- width: number,
- height: number,
- chartStyle: ChartStyle,
- axisStyle: AxisStyle,
- gridlineStyle: GridlineStyle,
- centileStyle: CentileStyle,
- sdsStyle?: SDSStyle;
- measurementStyle: MeasurementStyle
- midParentalHeightData?: MidParentalHeightObject,
- enableZoom?: boolean,
- chartType?: 'centile' | 'sds',
- enableExport: boolean,
- exportChartCallback: function(svg: any),
- clinicianFocus?: boolean;
- }
- ```
-
-
-### Measurement interface
-
-The `Measurement` interface is structured to reflect the JSON `Measurement` object which is returned by the API. The `RCPCHChart` component uses the `reference` prop to determine which chart to render. So far, 3 references are supported: UK-WHO, Turner Syndrome and Down Syndrome. The reference data for the centiles are included in the library in plottable format in the `chartdata` folder.
-
-!!! tip
- In practice, this means you get the returned JSON from the dGC API, passing it directly in to the component. The component 'knows' how to render this correctly. You don't need to parse, restructure, or even understand the JSON returned from the API: just pass it directly to the component inside an array containing one `Measurement` object.
+Given the complexity, we decided to create a React component library for your developers to use. We designed it to be customisable for direct use, but also as a demonstration for developers wanting to build the charts from the ground up. We do not, however, recommend developing your own growth charts from scratch, as it is a complex task. Using the component library will save you time and effort, and result in a more standardised and clinically-assured product.
-The `Measurement` interface structure is:
+The dGC React Chart Component is a permissively-licensed, open-source React component, which aims to simplify the process of creating a chart from the chart data received from the API. It makes the job of drawing a vector-graphic centile chart much easier. **The chart component natively 'understands' an array of the JSON objects returned by the API, without any transforms or parsing required.**
-??? note "`Measurement` object structure"
- ```js
- export interface Measurement {
- birth_data: {
- birth_date: string;
- estimated_date_delivery: string;
- estimated_date_delivery_string: string;
- gestation_weeks: number;
- gestation_days: number;
- sex: 'male' | 'female';
- };
- child_observation_value: {
- measurement_method: 'height' | 'weight' | 'bmi' | 'ofc';
- observation_value: number;
- observation_value_error?: string;
- };
- measurement_dates: {
- chronological_calendar_age: string;
- chronological_decimal_age: number;
- clinician_decimal_age_comment: string;
- corrected_calendar_age: string;
- corrected_decimal_age: number;
- corrected_gestational_age?: {
- corrected_gestation_weeks?: number;
- corrected_gestation_days?: number;
- };
- lay_decimal_age_comment: string;
- observation_date: Date;
- };
- measurement_calculated_values: {
- chronological_centile: number;
- chronological_centile_band: string;
- chronological_measurement_error?: string;
- chronological_sds: number;
- corrected_centile: number;
- corrected_centile_band: string;
- corrected_measurement_error?: string;
- corrected_sds: number;
- measurement_method: 'height' | 'weight' | 'bmi' | 'ofc';
- };
- plottable_data: {
- centile_data: {
- chronological_decimal_age_data: {
- age_error?: string;
- age_type: 'chronological_age' | 'corrected_age';
- calendar_age: string;
- centile_band: string;
- clinician_comment: string;
- lay_comment: string;
- observation_error?: string;
- observation_value_error?: string;
- x: number;
- y: number;
- b: number;
- bone_age_type?: 'greulich-pyle' | 'tanner-whitehouse-ii' | 'tanner-whitehouse-iii' | 'fels' | 'bonexpert';
- bone_age_label?: string;
- bone_age_centile: number;
- bone_age_sds?: number;
- events_text?: string[];
- };
- corrected_decimal_age_data: {
- age_error: null;
- age_type: 'chronological_age' | 'corrected_age';
- calendar_age: string;
- centile_band: string;
- clinician_comment: string;
- lay_comment: string;
- observation_error?: string;
- observation_value_error?: string;
- x: number;
- y: number;
- b: number;
- bone_age_type?: 'greulich-pyle' | 'tanner-whitehouse-ii' | 'tanner-whitehouse-iii' | 'fels' | 'bonexpert';
- bone_age_label?: string;
- bone_age_centile: number;
- bone_age_sds?: number;
- events_text?: string[];
- };
- };
- sds_data: {
- chronological_decimal_age_data: {
- age_error?: string;
- age_type: 'chronological_age' | 'corrected_age';
- calendar_age: string;
- centile_band: string;
- clinician_comment: string;
- lay_comment: string;
- observation_error?: string;
- observation_value_error?: string;
- x: number;
- y: number;
- b: number;
- bone_age_type?: 'greulich-pyle' | 'tanner-whitehouse-ii' | 'tanner-whitehouse-iii' | 'fels' | 'bonexpert';
- bone_age_label?: string;
- bone_age_centile: number;
- bone_age_sds?: number;
- events_text?: string[];
- };
- corrected_decimal_age_data: {
- age_error?: string;
- age_type: 'chronological_age' | 'corrected_age';
- calendar_age: string;
- centile_band: string;
- clinician_comment: string;
- lay_comment: string;
- observation_error?: string;
- observation_value_error?: string;
- x: number;
- y: number;
- b: number;
- bone_age_type?: 'greulich-pyle' | 'tanner-whitehouse-ii' | 'tanner-whitehouse-iii' | 'fels' | 'bonexpert';
- bone_age_label?: string;
- bone_age_centile: number;
- bone_age_sds?: number;
- events_text?: string[];
- };
- };
- };
- bone_age: {
- bone_age?: number;
- bone_age_type?: 'greulich-pyle' | 'tanner-whitehouse-ii' | 'tanner-whitehouse-iii' | 'fels' | 'bonexpert';
- bone_age_centile?: number;
- bone_age_sds?: number;
- bone_age_text?: string;
- };
- events_data: {
- events_text?: string[];
- };
- }
- ```
-
-The styling components allow the user to customise elements of the chart. Chart styles control the chart and the tooltips.
-
-??? note "Styling options available through `ChartStyle`"
- ```js
- interface ChartStyle{
- backgroundColour?: string,
- width?: number,
- height?: number,
- padding?: requires {left?: number, right?: number, top?: number, bottom?: number},
- titleStyle?: requires {name?: string, colour?: string, size?: number, weight?: 'bold' | 'italic' | 'regular'}
- subTitleStyle?: requires {name?: string, colour?: string, size?: number, weight?: 'bold' | 'italic' | 'regular'},,
- tooltipBackgroundColour?: string,
- tooltipStroke?: string,
- tooltipTextStyle?: requires {name?: string, colour?: string, size?: number, weight?: 'bold' | 'italic' | 'regular'}
- termFill?: string,
- termStroke?: string,
- infoBoxFill?: string,
- infoBoxStroke?: string
- infoBoxTextStyle?: requires {name?: string, colour?: string, size?: number, weight?: 'bold' | 'italic' | 'regular'}
- toggleButtonInactiveColour: string // relates to the toggle buttons present if age correction is necessary
- toggleButtonActiveColour: string
- toggleButtonTextColour: string
- }
- ```
-
-Note for the tooltips and infobox text sizes, these are strokeWidths, not point sizes as the text here is SVG.
-
-### Axis Styles
-
-??? note "Axis styles control axes and axis labels"
- ```js
- interface AxisStyle{
- axisStroke?: string,
- axisLabelTextStyle?: requires {name?: string, colour?: string, size?: number, weight?: 'bold' | 'italic' | 'regular'}
- tickLabelTextStyle?: requires {name?: string, colour?: string, size?: number, weight?: 'bold' | 'italic' | 'regular'}
- }
- ```
-
-### Gridline Styles
-
-??? note "Gridline styles allow/hide gridlines and control line width, presence of dashes, colour"
- ```js
- interface GridlineStyle{
- gridlines?: boolean,
- stroke?: string,
- strokeWidth?: number,
- dashed?: boolean
- }
- ```
-
-### Centile Styles
-
-??? note "Centile styles control the width and colour of the centile and SDS lines"
- ```js
- interface CentileStyle{
- sdsStroke?: string,
- sdsStrokeWidth?: string,
- centileStroke?: string,
- centileStrokeWidth?: number,
- delayedPubertyAreaFill?: string,
- midParentalCentileStroke?: number;
- midParentalCentileStrokeWidth?: number;
- midParentalAreaFill?: string;
- }
- ```
-
-### SDS Styles
-
-SDS styles control the colour and width of the SDS lines. As all measurement methods are rendered on a single chart, the user is offered the option of different colours for each measurement method (height, weight, head circumference(OFC) and body mass index (BMI)). If no SDS style is supplied, the centile line colour is used with an opacity applied to each measurement.
-
-??? note "SDS Styles"
- ```js
- interface SDSStyle {
- lineStrokeWidth?: number;
- heightStroke?: string;
- weightStroke?: string;
- ofcStroke?: string;
- bmiStroke?: string;
- }
- ```
-
-### Measurement Styles
-
-Measurement styles control the plotted data points: colour, size and shape. Corrected ages are always rendered as crosses. Circles for chronological ages are preferred. On the SDS charts, measurement points are grey by default, with the measurement method in focus highlighted by rendering as a line. Points which are not highlighted can be emphasised on mouse hover, with the highlighted colour being set by the `highlightedMeasurementFill` prop.
-
-??? note "Measurement Styles"
- ```js
- interface MeasurementStyle{
- measurementFill?: string,
- highLightedMeasurementFill?: string;
- }
- ```
-
-### Mid-Parental Height
-
-`midParentalHeightData`: This is the return value from the RCPCH API and takes the structure:
-
-??? note "`midParentalHeightData`"
- ```js
- export interface MidParentalHeightObject {
- mid_parental_height?: number;
- mid_parental_height_sds?: number;
- mid_parental_height_centile?: number;
- mid_parental_height_centile_data?: Reference[]
- mid_parental_height_upper_centile_data?: Reference[]
- mid_parental_height_lower_centile_data?: Reference[]
- mid_parental_height_lower_value?: number
- mid_parental_height_upper_value?: number
- }
- ```
-
-This returns a mid-parental height, mid-parental SDS and centile, along with the centile data if the user wishes to plot a mid-parental centile. The structure of the Reference and Centile interfaces is:
-
-??? note "`Reference` and `Centile` interface structures"
- ```js
- export interface Reference {
- [name: string]: ISexChoice
- }
-
- export interface ICentile {
- centile: number,
- data: IPlottedCentileMeasurement[],
- sds: number
- }
-
- export interface IPlottedCentileMeasurement {
- "l": string | number,
- "x": number,
- "y": number
- }
-
- export interface ISexChoice {
- male: IMeasurementMethod,
- female: IMeasurementMethod
- }
-
- export interface IMeasurementMethod{
- height?: ICentile[],
- weight?: ICentile[],
- bmi?: ICentile[],
- ofc?: ICentile[],
- }
- ```
-
-Centile data are returned from the RCPCH API in this same structure, though no API call is made from this component - all the centile data for all the references is included.
-
-### `enableZoom`
-
-```enableZoom```: a boolean optional prop which defaults to false. If true, the user can press and mouse click to zoom in or out once measurements are being displayed. A reset zoom button also appears.
-
-### `chartType`
-
-```chartType```: a string mandatory prop and must be one of ```'centile' | 'sds'```. It toggles between centile and SDS charts.
-
-### `enableExport`
-
-```enableExport```: a boolean optional prop, defaults to false. If true, ```exportChartCallback``` must be implemented and a copy-paste button is rendered below the chart.
-
-### `exportChartCallBack`
-
-```exportChartCallback``` callback function implemented if `enableExport` is true. It receives an SVG element. This can be saved in the client to clipboard by converting to canvas using HTML5. An example implementation of this is [here](https://github.com/rcpch/digital-growth-charts-react-client/blob/live/src/functions/canvasFromSVG.js) in our demo client.
-
-### `clinicianFocus`
-
-```clinicianFocus```: a boolean optional prop which defaults to false. If true, the advice strings that are reported to users in tooltips are more technical and aimed at clinicians familiar with centile charts. If false, the advice strings will be less technical and more suitable for parents, guardians, carers or other laypersons.
-
-!!! example "Requests for additional functionality in props"
- In time, more props can be added if users request them. If you have requests, please post issues on our [GitHub](https://github.com/rcpch/digital-growth-charts-react-component-library/issues) or get involved to contribute as below.
-
-## Contributing
-
-See [Contributing](../developer/contributing.md) for information on how to get involved in the project.
-
-You can get in touch with the primary developers to talk about the project using any of the methods on our [contact page](../about/contact.md).
-
-## Acknowledgements
-
-This Typescript library was built from the starter created by [Harvey Delaney](https://blog.harveydelaney.com/creating-your-own-react-component-library/)
-
-The charts are built using [Victory Charts](https://formidable.com/open-source/victory/docs/victory-chart/) for React. We tried several chart packages for React, but we chose Victory because of their documentation and their ability to customise components.
+If you want to see an example implementation, we have built a full demo client for the RCPCHGrowth API in React, which uses this component library, and can be found [here](https://github.com/rcpch/digital-growth-charts-react-client). You are welcome to reuse any of the code in this client, or use it as a reference implementation.
## Licensing
-The chart data bundled in the component is subject to copyright and is owned by the RCPCH. If you wish to use this software commercially, please [contact the RCPCH](../about/contact.md) so we can ensure you have the correct license for use.
-
-This chart component software is released under the MIT license.
+This chart component software is is subject to copyright and is owned by the RCPCH, but is released under the MIT license.
[](https://opensource.org/licenses/MIT)
+
+There is important chart line rendering data bundled in the component, which subject to copyright and is owned by the RCPCH. It is specifically excluded from the MIT license mentioned above. If you wish to use this software, please [contact the RCPCH](../about/contact.md) so we can ensure you have the correct license for use. Subscribers to the Digital Growth Charts API will automatically be assigned licenses for the chart plotting data.
diff --git a/includes/_abbreviations.md b/includes/_abbreviations.md
index 077efc5e..0e227c9d 100644
--- a/includes/_abbreviations.md
+++ b/includes/_abbreviations.md
@@ -5,6 +5,7 @@
*[AGPL]: Affero GNU Public License
*[API]: Application Programming Interface
*[BMI]: Body Mass Index, a measure of weight taking into account height
+*[CE]: Conformité Européenne
*[CLI]: Command Line Interface
*[CRMF]: Clinical Risk Management File
*[CRMP]: Clinical Risk Management Plan
diff --git a/mkdocs.yml b/mkdocs.yml
index 0c35313b..1c9ee660 100644
--- a/mkdocs.yml
+++ b/mkdocs.yml
@@ -48,6 +48,7 @@ nav:
- 'developer/api-python.md'
- 'developer/api-docker.md'
- 'developer/api-testing.md'
+ - 'developer/react-component.md'
- 'developer/react-client.md'
- 'developer/rcpchgrowth.md'
- 'developer/rcpchgrowth-cli.md'