nhsuk-tools-chart-components-react 1.0.5 → 1.1.1

package/README.md

@@ -2,11 +2,57 @@
 
 This repository contains the code for NHS.UK Chart components
 
-These chart components are designed for visualizing Body Mass Index (BMI), Child Body Mass Index (CBMI), Blood Pressure (BP) and Waist to Height (WHTR) data.
+These chart components are designed for visualizing Body Mass Index (BMI), Child Body Mass Index (CBMI) and Blood Pressure (BP) data.
 
 Initially, these charts were integrated into separate codebases for each of the individual tools. To support consistency and reusability across NHS projects, we have migrated these chart components into a dedicated library.
 
-A storybook instance for the components can be found in `https://tools-graph-components.nhswebsite-dev.nhs.uk/?path=/docs/welcome--docs`
+## Components
+
+### Bar Slider
+
+The `Bar Slider` chart is a generic chart component that can be used to visualize a variety of data. It is part of the NHS.UK Chart component library and can be customized to fit specific needs.
+
+```jsx
+<BarSliderChart
+  config={mockBarSliderConfigExample2}
+  value={35.7}
+  markerText="Your Result:"
+/>
+```
+
+### Body Mass Index
+
+The Body Mass Index (BMI) chart component can be used to visualise body mass index data.
+
+```jsx
+<BmiChart classificationBounds={classificationBounds} bmi={19.4} />
+```
+
+### Child Body Mass Index
+
+The Child Body Mass Index (CBMI) chart component can be used to visualise the centile score.
+
+```jsx
+<ChildBmiChart
+  classificationBounds={classificationBounds}
+  centile={{ value: 1, label: 'Below 2' }}
+  markerText="The centile:"
+/>
+```
+
+### Blood Pressure
+
+The Blood Pressure (BP) chart component can be used to visualise systolic and diastolic blood pressure readings.
+
+```jsx
+<BpChart
+  bounds={bounds}
+  reading={{ systolic: 120, diastolic: 80 }}
+  graphLayout={graphLayoutProp}
+/>
+```
+
+A `storybook` instance for the components can be found in `https://tools-graph-components.nhswebsite-dev.nhs.uk/?path=/docs/welcome--docs`
 
 ## Installation
 
@@ -22,7 +68,7 @@ Ensure you have Node.js 20.x.x. installed. Usage of NVM is recommended, to allow
 
 `npm run storybook` will build and deploy the storybook locally in `http://localhost:6006/`
 
-# Import the compiled CSS
+## Import the compiled CSS
 
 Before using the components, import the compiled CSS file from your project's build directory:
 

package/dist/cjs/bundle.css

@@ -11,23 +11,11 @@
   height: 25px;
   margin-right: 10px;
   border-bottom: 1px solid white;
-  box-shadow: 0px 2px 0px 0px rgb(150, 76, 76);
+  box-shadow: 0px 2px 0px 0px black;
   margin-bottom: 3px;
 }
 
-.nhsuk-cbmi-classification-healthy, .nhsuk-cbmi-legend-key-classification-healthy {
-  background: repeating-linear-gradient(-45deg, #30b4ab, #30b4ab 4.5px, #00a499 4.5px, #00a499 9px);
-}
-
-.nhsuk-cbmi-classification-overweight, .nhsuk-cbmi-legend-key-classification-overweight {
-  background: #ffb81c;
-}
-
-.nhsuk-cbmi-classification-underweight, .nhsuk-cbmi-legend-key-classification-underweight {
-  background: #330072;
-}
-
-.nhsuk-cbmi-graph {
+.nhsuk-bar-slider-graph {
   position: relative;
   outline: 1px solid black;
   margin-top: 20px;
@@ -35,189 +23,53 @@
   height: 28px;
 }
 @media (min-width: 320px) and (max-width: 641px) {
-  .nhsuk-cbmi-graph {
+  .nhsuk-bar-slider-graph {
     height: 24px;
   }
 }
 
-.nhsuk-cbmi-classification-healthy, .nhsuk-cbmi-legend-key-classification-healthy {
-  background: repeating-linear-gradient(-45deg, #30b4ab, #30b4ab 4.5px, #00a499 4.5px, #00a499 9px);
-}
-
-.nhsuk-cbmi-classification-overweight, .nhsuk-cbmi-legend-key-classification-overweight {
-  background: #ffb81c;
-}
-
-.nhsuk-cbmi-classification-underweight, .nhsuk-cbmi-legend-key-classification-underweight {
-  background: #330072;
-}
-
-.nhsuk-cbmi-legend-key-classification-overweight {
-  border-bottom: none;
-  box-shadow: none;
-}
-
-.nhsuk-cbmi-legend-key, .nhsuk-cbmi-legend-key-classification-underweight, .nhsuk-cbmi-legend-key-classification-healthy, .nhsuk-cbmi-legend-key-classification-overweight {
-  border-bottom: 2px solid white;
-  margin-bottom: 2px;
-}
-
-.nhsuk-cbmi-legend-marker {
-  margin-bottom: 2px;
-}
-
-.nhsuk-cbmi-classification-underweight-heading {
-  border-left: 8px solid #330072;
-}
-
-.nhsuk-cbmi-classification-healthy-heading {
-  border-left: 8px solid #30b4ab;
-}
-
-.nhsuk-cbmi-classification-overweight-heading {
-  border-left: 8px solid #ffb81c;
-}
-
-.nhsuk-cbmi-classification-healthy, .nhsuk-cbmi-legend-key-classification-healthy {
-  background: repeating-linear-gradient(-45deg, #30b4ab, #30b4ab 4.5px, #00a499 4.5px, #00a499 9px);
-}
-
-.nhsuk-cbmi-classification-overweight, .nhsuk-cbmi-legend-key-classification-overweight {
-  background: #ffb81c;
-}
-
-.nhsuk-cbmi-classification-underweight, .nhsuk-cbmi-legend-key-classification-underweight {
-  background: #330072;
-}
-
-.nhsuk-cbmi-axis-marker {
-  border: 1px solid black;
-  position: absolute;
-  bottom: -5px;
-  margin-left: -0.5px;
-  box-shadow: 0px 0px white inset, 1px 0px white, -1px 0px white;
-  z-index: 4;
-  height: 33px;
-}
-@media (min-width: 320px) and (max-width: 641px) {
-  .nhsuk-cbmi-axis-marker {
-    height: 29px;
-  }
-}
-
-.nhsuk-cbmi-axis-marker-label {
-  position: absolute;
-  bottom: -25px;
-  left: -10px;
-  width: 20px;
-  text-align: center;
-}
-
-.nhsuk-cbmi-classification-healthy, .nhsuk-cbmi-legend-key-classification-healthy {
-  background: repeating-linear-gradient(-45deg, #30b4ab, #30b4ab 4.5px, #00a499 4.5px, #00a499 9px);
-}
-
-.nhsuk-cbmi-classification-overweight, .nhsuk-cbmi-legend-key-classification-overweight {
-  background: #ffb81c;
-}
-
-.nhsuk-cbmi-classification-underweight, .nhsuk-cbmi-legend-key-classification-underweight {
-  background: #330072;
-}
-
-.nhsuk-cbmi-chart-arrow-marker {
+.nhsuk-bar-slider-arrow-marker {
   position: absolute;
-  z-index: 4;
   height: 16px;
   width: 16px;
   margin: -9px 0 -8px -8px;
 }
 @media (min-width: 320px) and (max-width: 641px) {
-  .nhsuk-cbmi-chart-arrow-marker {
+  .nhsuk-bar-slider-arrow-marker {
     height: 12px;
     width: 12px;
     margin: -9px 0 -6px -6px;
   }
 }
 
-.nhsuk-cbmi-chart-label-align-left {
+.nhsuk-bar-slider-label-align-left {
   display: flex;
   justify-content: left;
 }
 
-.nhsuk-cbmi-chart-label-align-center {
+.nhsuk-bar-slider-label-align-center {
   display: flex;
   justify-content: center;
 }
 
-.nhsuk-cbmi-chart-label-align-right {
+.nhsuk-bar-slider-label-align-right {
   display: flex;
   justify-content: right;
 }
 
-.nhsuk-cbmi-chart-label-marker {
+.nhsuk-bar-slider-label-marker {
   position: relative;
   height: 25px;
   width: auto;
   white-space: nowrap;
   margin-top: -30px;
-  z-index: 4;
 }
 
-.nhsuk-cbmi-chart-centile-marker {
+.nhsuk-bar-slider-value-marker {
   position: relative;
   font-weight: bold;
   margin-left: 5px;
-}
-
-.nhsuk-cbmi-chart-axis-marker {
-  position: absolute;
-  margin-left: -1px;
-  border: 1.5px solid black;
-  box-shadow: 0px 0px white inset, 2px 0px white, -2px 0px white;
-  z-index: 4;
-  height: 28px;
-}
-@media (min-width: 320px) and (max-width: 641px) {
-  .nhsuk-cbmi-chart-axis-marker {
-    height: 24px;
-  }
-}
-
-.nhsuk-cbmi-classification-healthy, .nhsuk-cbmi-legend-key-classification-healthy {
-  background: repeating-linear-gradient(-45deg, #30b4ab, #30b4ab 4.5px, #00a499 4.5px, #00a499 9px);
-}
-
-.nhsuk-cbmi-classification-overweight, .nhsuk-cbmi-legend-key-classification-overweight {
-  background: #ffb81c;
-}
-
-.nhsuk-cbmi-classification-underweight, .nhsuk-cbmi-legend-key-classification-underweight {
-  background: #330072;
-}
-
-.nhsuk-cbmi-classification-overweight, .nhsuk-cbmi-classification-healthy, .nhsuk-cbmi-classification-underweight {
-  position: absolute;
-  bottom: 0%;
-  outline: 1px solid black;
-  height: 28px;
-}
-@media (min-width: 320px) and (max-width: 641px) {
-  .nhsuk-cbmi-classification-overweight, .nhsuk-cbmi-classification-healthy, .nhsuk-cbmi-classification-underweight {
-    height: 24px;
-  }
-}
-
-.nhsuk-cbmi-classification-underweight {
-  z-index: 3;
-}
-
-.nhsuk-cbmi-classification-healthy {
-  z-index: 2;
-}
-
-.nhsuk-cbmi-classification-overweight {
-  z-index: 1;
+  margin-right: 2px;
 }
 
 .nhsuk-bmi-classification-underweight, .nhsuk-bmi-legend-key-classification-underweight {
@@ -337,21 +189,6 @@
   box-shadow: none;
 }
 
-.nhsuk-bmi-axis-marker {
-  position: absolute;
-  outline: 0.5px solid black;
-  height: 5px;
-  bottom: -5px;
-}
-
-.nhsuk-bmi-axis-marker-label {
-  position: absolute;
-  bottom: -25px;
-  left: -10px;
-  width: 20px;
-  text-align: center;
-}
-
 .nhsuk-bp-graph {
   position: relative;
   margin-left: 20px;
@@ -406,6 +243,21 @@
   border-bottom: 2px solid black;
 }
 
+.nhsuk-bmi-axis-marker {
+  position: absolute;
+  outline: 0.5px solid black;
+  height: 5px;
+  bottom: -5px;
+}
+
+.nhsuk-bmi-axis-marker-label {
+  position: absolute;
+  bottom: -25px;
+  left: -10px;
+  width: 20px;
+  text-align: center;
+}
+
 .nhsuk-bp-classification-low, .nhsuk-bp-legend-key-classification-low {
   background: #330072;
 }
@@ -597,19 +449,19 @@
   border-left: none;
 }
 
-.nhsuk-whtr-classification-increased, .nhsuk-whtr-legend-key-classification-increased {
-  background: #ffb81c;
+.nhsuk-cbmi-classification-healthy, .nhsuk-cbmi-legend-key-classification-healthy {
+  background: repeating-linear-gradient(-45deg, #30b4ab, #30b4ab 4.5px, #00a499 4.5px, #00a499 9px);
 }
 
-.nhsuk-whtr-classification-high, .nhsuk-whtr-legend-key-classification-high {
-  background: repeating-linear-gradient(-45deg, #db3832, #db3832 4.5px, #d76662 4.5px, #d76662 9px);
+.nhsuk-cbmi-classification-overweight, .nhsuk-cbmi-legend-key-classification-overweight {
+  background: #ffb81c;
 }
 
-.nhsuk-whtr-classification-low, .nhsuk-whtr-legend-key-classification-low {
-  background: repeating-linear-gradient(45deg, #00a499, #00a499 4.5px, #02beb1 4.5px, #02beb1 9px);
+.nhsuk-cbmi-classification-underweight, .nhsuk-cbmi-legend-key-classification-underweight {
+  background: #330072;
 }
 
-.nhsuk-whtr-graph {
+.nhsuk-cbmi-graph {
   position: relative;
   outline: 1px solid black;
   margin-top: 20px;
@@ -617,62 +469,97 @@
   height: 28px;
 }
 @media (min-width: 320px) and (max-width: 641px) {
-  .nhsuk-whtr-graph {
+  .nhsuk-cbmi-graph {
     height: 24px;
   }
 }
 
-.nhsuk-whtr-classification-increased, .nhsuk-whtr-legend-key-classification-increased {
-  background: #ffb81c;
+.nhsuk-cbmi-classification-healthy, .nhsuk-cbmi-legend-key-classification-healthy {
+  background: repeating-linear-gradient(-45deg, #30b4ab, #30b4ab 4.5px, #00a499 4.5px, #00a499 9px);
 }
 
-.nhsuk-whtr-classification-high, .nhsuk-whtr-legend-key-classification-high {
-  background: repeating-linear-gradient(-45deg, #db3832, #db3832 4.5px, #d76662 4.5px, #d76662 9px);
+.nhsuk-cbmi-classification-overweight, .nhsuk-cbmi-legend-key-classification-overweight {
+  background: #ffb81c;
 }
 
-.nhsuk-whtr-classification-low, .nhsuk-whtr-legend-key-classification-low {
-  background: repeating-linear-gradient(45deg, #00a499, #00a499 4.5px, #02beb1 4.5px, #02beb1 9px);
+.nhsuk-cbmi-classification-underweight, .nhsuk-cbmi-legend-key-classification-underweight {
+  background: #330072;
 }
 
-.nhsuk-whtr-legend-key-classification-high {
+.nhsuk-cbmi-legend-key-classification-overweight {
   border-bottom: none;
   box-shadow: none;
 }
 
-.nhsuk-whtr-legend-key, .nhsuk-whtr-legend-key-classification-low, .nhsuk-whtr-legend-key-classification-increased, .nhsuk-whtr-legend-key-classification-high {
+.nhsuk-cbmi-legend-key, .nhsuk-cbmi-legend-key-classification-underweight, .nhsuk-cbmi-legend-key-classification-healthy, .nhsuk-cbmi-legend-key-classification-overweight {
   border-bottom: 2px solid white;
   margin-bottom: 2px;
 }
 
-.nhsuk-whtr-legend-marker {
+.nhsuk-cbmi-legend-marker {
   margin-bottom: 2px;
 }
 
-.nhsuk-whtr-classification-low-heading {
-  border-left: 8px solid #00a499;
+.nhsuk-cbmi-classification-underweight-heading {
+  border-left: 8px solid #330072;
+}
+
+.nhsuk-cbmi-classification-healthy-heading {
+  border-left: 8px solid #30b4ab;
 }
 
-.nhsuk-whtr-classification-increased-heading {
+.nhsuk-cbmi-classification-overweight-heading {
   border-left: 8px solid #ffb81c;
 }
 
-.nhsuk-whtr-classification-high-heading {
-  border-left: 8px solid #db3832;
+.nhsuk-cbmi-classification-healthy, .nhsuk-cbmi-legend-key-classification-healthy {
+  background: repeating-linear-gradient(-45deg, #30b4ab, #30b4ab 4.5px, #00a499 4.5px, #00a499 9px);
 }
 
-.nhsuk-whtr-classification-increased, .nhsuk-whtr-legend-key-classification-increased {
+.nhsuk-cbmi-classification-overweight, .nhsuk-cbmi-legend-key-classification-overweight {
   background: #ffb81c;
 }
 
-.nhsuk-whtr-classification-high, .nhsuk-whtr-legend-key-classification-high {
-  background: repeating-linear-gradient(-45deg, #db3832, #db3832 4.5px, #d76662 4.5px, #d76662 9px);
+.nhsuk-cbmi-classification-underweight, .nhsuk-cbmi-legend-key-classification-underweight {
+  background: #330072;
 }
 
-.nhsuk-whtr-classification-low, .nhsuk-whtr-legend-key-classification-low {
-  background: repeating-linear-gradient(45deg, #00a499, #00a499 4.5px, #02beb1 4.5px, #02beb1 9px);
+.nhsuk-cbmi-axis-marker {
+  border: 1px solid black;
+  position: absolute;
+  bottom: -5px;
+  margin-left: -0.5px;
+  box-shadow: 0px 0px white inset, 1px 0px white, -1px 0px white;
+  z-index: 100;
+  height: 33px;
+}
+@media (min-width: 320px) and (max-width: 641px) {
+  .nhsuk-cbmi-axis-marker {
+    height: 29px;
+  }
 }
 
-.nhsuk-whtr-chart-arrow-marker {
+.nhsuk-cbmi-axis-marker-label {
+  position: absolute;
+  bottom: -25px;
+  left: -10px;
+  width: 20px;
+  text-align: center;
+}
+
+.nhsuk-cbmi-classification-healthy, .nhsuk-cbmi-legend-key-classification-healthy {
+  background: repeating-linear-gradient(-45deg, #30b4ab, #30b4ab 4.5px, #00a499 4.5px, #00a499 9px);
+}
+
+.nhsuk-cbmi-classification-overweight, .nhsuk-cbmi-legend-key-classification-overweight {
+  background: #ffb81c;
+}
+
+.nhsuk-cbmi-classification-underweight, .nhsuk-cbmi-legend-key-classification-underweight {
+  background: #330072;
+}
+
+.nhsuk-cbmi-chart-arrow-marker {
   position: absolute;
   z-index: 4;
   height: 16px;
@@ -680,29 +567,29 @@
   margin: -9px 0 -8px -8px;
 }
 @media (min-width: 320px) and (max-width: 641px) {
-  .nhsuk-whtr-chart-arrow-marker {
+  .nhsuk-cbmi-chart-arrow-marker {
     height: 12px;
     width: 12px;
     margin: -9px 0 -6px -6px;
   }
 }
 
-.nhsuk-whtr-chart-label-align-left {
+.nhsuk-cbmi-chart-label-align-left {
   display: flex;
   justify-content: left;
 }
 
-.nhsuk-whtr-chart-label-align-center {
+.nhsuk-cbmi-chart-label-align-center {
   display: flex;
   justify-content: center;
 }
 
-.nhsuk-whtr-chart-label-align-right {
+.nhsuk-cbmi-chart-label-align-right {
   display: flex;
   justify-content: right;
 }
 
-.nhsuk-whtr-chart-label-marker {
+.nhsuk-cbmi-chart-label-marker {
   position: relative;
   height: 25px;
   width: auto;
@@ -711,14 +598,13 @@
   z-index: 4;
 }
 
-.nhsuk-whtr-chart-ratio-marker {
+.nhsuk-cbmi-chart-centile-marker {
   position: relative;
   font-weight: bold;
   margin-left: 5px;
-  margin-right: 2px;
 }
 
-.nhsuk-whtr-chart-axis-marker {
+.nhsuk-cbmi-chart-axis-marker {
   position: absolute;
   margin-left: -1px;
   border: 1.5px solid black;
@@ -727,96 +613,43 @@
   height: 28px;
 }
 @media (min-width: 320px) and (max-width: 641px) {
-  .nhsuk-whtr-chart-axis-marker {
+  .nhsuk-cbmi-chart-axis-marker {
     height: 24px;
   }
 }
 
-.nhsuk-whtr-classification-increased, .nhsuk-whtr-legend-key-classification-increased {
-  background: #ffb81c;
+.nhsuk-cbmi-classification-healthy, .nhsuk-cbmi-legend-key-classification-healthy {
+  background: repeating-linear-gradient(-45deg, #30b4ab, #30b4ab 4.5px, #00a499 4.5px, #00a499 9px);
 }
 
-.nhsuk-whtr-classification-high, .nhsuk-whtr-legend-key-classification-high {
-  background: repeating-linear-gradient(-45deg, #db3832, #db3832 4.5px, #d76662 4.5px, #d76662 9px);
+.nhsuk-cbmi-classification-overweight, .nhsuk-cbmi-legend-key-classification-overweight {
+  background: #ffb81c;
 }
 
-.nhsuk-whtr-classification-low, .nhsuk-whtr-legend-key-classification-low {
-  background: repeating-linear-gradient(45deg, #00a499, #00a499 4.5px, #02beb1 4.5px, #02beb1 9px);
+.nhsuk-cbmi-classification-underweight, .nhsuk-cbmi-legend-key-classification-underweight {
+  background: #330072;
 }
 
-.nhsuk-whtr-classification-high, .nhsuk-whtr-classification-increased, .nhsuk-whtr-classification-low {
+.nhsuk-cbmi-classification-overweight, .nhsuk-cbmi-classification-healthy, .nhsuk-cbmi-classification-underweight {
   position: absolute;
   bottom: 0%;
   outline: 1px solid black;
   height: 28px;
 }
 @media (min-width: 320px) and (max-width: 641px) {
-  .nhsuk-whtr-classification-high, .nhsuk-whtr-classification-increased, .nhsuk-whtr-classification-low {
+  .nhsuk-cbmi-classification-overweight, .nhsuk-cbmi-classification-healthy, .nhsuk-cbmi-classification-underweight {
     height: 24px;
   }
 }
 
-.nhsuk-whtr-classification-low {
+.nhsuk-cbmi-classification-underweight {
   z-index: 3;
 }
 
-.nhsuk-whtr-classification-increased {
+.nhsuk-cbmi-classification-healthy {
   z-index: 2;
 }
 
-.nhsuk-whtr-classification-high {
+.nhsuk-cbmi-classification-overweight {
   z-index: 1;
-}
-
-.nhsuk-whtr-legend-key-classification-increased, .nhsuk-whtr-classification-increased {
-  background: #ffb81c;
-}
-
-.nhsuk-whtr-legend-key-classification-high, .nhsuk-whtr-classification-high {
-  background: repeating-linear-gradient(-45deg, #db3832, #db3832 4.5px, #d76662 4.5px, #d76662 9px);
-}
-
-.nhsuk-whtr-legend-key-classification-low, .nhsuk-whtr-classification-low {
-  background: repeating-linear-gradient(45deg, #00a499, #00a499 4.5px, #02beb1 4.5px, #02beb1 9px);
-}
-
-.nhsuk-whtr-axis-start-marker {
-  position: absolute;
-  bottom: -5px;
-  margin-left: -0.5px;
-  box-shadow: 0px 0px white inset, 1px 0px white, -1px 0px white;
-  z-index: 4;
-  height: 33px;
-}
-@media (min-width: 320px) and (max-width: 641px) {
-  .nhsuk-whtr-axis-start-marker {
-    height: 29px;
-  }
-}
-
-.nhsuk-whtr-axis-marker {
-  border: 1px solid black;
-  position: absolute;
-  bottom: -5px;
-  margin-left: -0.5px;
-  box-shadow: 0px 0px white inset, 1px 0px white, -1px 0px white;
-  z-index: 4;
-  height: 33px;
-}
-@media (min-width: 320px) and (max-width: 641px) {
-  .nhsuk-whtr-axis-marker {
-    height: 29px;
-  }
-}
-
-.nhsuk-whtr-axis-start-marker-label {
-  position: absolute;
-  bottom: -25px;
-  left: -2px;
-}
-
-.nhsuk-whtr-axis-marker-label {
-  position: absolute;
-  bottom: -25px;
-  left: -10px;
 }