nhsuk-tools-chart-components-react 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 NHS England
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,23 @@
+# NHS.UK Tools Chart components
+
+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), 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`
+
+## Installation
+
+Ensure you have Node.js 20.x.x. installed. Usage of NVM is recommended, to allow for easily switching between versions on different projects.
+
+`npm install` will install dependencies.
+
+## Build
+
+`npm run build` will build the project.
+
+## Build storybook
+
+`npm run storybook` will build and deploy the storybook locally in `http://localhost:6006/`

package/dist/cjs/bundle.css

@@ -0,0 +1,598 @@
+.nhsuk-chart-legend-card {
+  max-width: 250px;
+}
+
+.nhsuk-chart-legend-key-wrapper {
+  display: flex;
+}
+
+.nhsuk-chart-legend-key {
+  width: 25px;
+  height: 25px;
+  margin-right: 10px;
+  border-bottom: 1px solid white;
+  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 {
+  position: relative;
+  outline: 1px solid black;
+  margin-top: 20px;
+  display: flex;
+  height: 28px;
+}
+@media (min-width: 320px) and (max-width: 641px) {
+  .nhsuk-cbmi-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 {
+  position: absolute;
+  bottom: -5px;
+  margin-left: -0.5px;
+  border: 1px solid black;
+  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 {
+  position: absolute;
+  z-index: 4;
+  height: 16px;
+  width: 16px;
+  margin: -8px 0 -8px -8px;
+}
+@media (min-width: 320px) and (max-width: 641px) {
+  .nhsuk-cbmi-chart-arrow-marker {
+    height: 12px;
+    width: 12px;
+    margin: -8px 0 -6px -6px;
+  }
+}
+
+.nhsuk-cbmi-chart-label-align-left {
+  display: flex;
+  justify-content: left;
+}
+
+.nhsuk-cbmi-chart-label-align-center {
+  display: flex;
+  justify-content: center;
+}
+
+.nhsuk-cbmi-chart-label-align-right {
+  display: flex;
+  justify-content: right;
+}
+
+.nhsuk-cbmi-chart-label-marker {
+  position: relative;
+  height: 25;
+  width: auto;
+  white-space: nowrap;
+  margin-top: -30px;
+  z-index: 4;
+}
+
+.nhsuk-cbmi-chart-centile-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;
+}
+
+.nhsuk-bmi-classification-underweight, .nhsuk-bmi-legend-key-classification-underweight {
+  background: #330072;
+}
+
+.nhsuk-bmi-classification-healthy, .nhsuk-bmi-legend-key-classification-healthy {
+  background: repeating-linear-gradient(-45deg, #30b4ab, #30b4ab 4.5px, #00a499 4.5px, #00a499 9px);
+}
+
+.nhsuk-bmi-classification-overweight, .nhsuk-bmi-legend-key-classification-overweight {
+  background: #ffb81c;
+}
+
+.nhsuk-bmi-classification-obese, .nhsuk-bmi-legend-key-classification-obese {
+  background: repeating-linear-gradient(45deg, #da5147, #da5147 4.5px, #d5281b 4.5px, #d5281b 9px);
+}
+
+.nhsuk-bmi-graph {
+  position: relative;
+  outline: 1px solid black;
+  display: flex;
+  height: 28px;
+  margin-bottom: nhsuk-spacing(4);
+}
+@media (min-width: 320px) and (max-width: 641px) {
+  .nhsuk-bmi-graph {
+    height: 24px;
+  }
+}
+
+.nhsuk-bmi-classification-underweight, .nhsuk-bmi-legend-key-classification-underweight {
+  background: #330072;
+}
+
+.nhsuk-bmi-classification-healthy, .nhsuk-bmi-legend-key-classification-healthy {
+  background: repeating-linear-gradient(-45deg, #30b4ab, #30b4ab 4.5px, #00a499 4.5px, #00a499 9px);
+}
+
+.nhsuk-bmi-classification-overweight, .nhsuk-bmi-legend-key-classification-overweight {
+  background: #ffb81c;
+}
+
+.nhsuk-bmi-classification-obese, .nhsuk-bmi-legend-key-classification-obese {
+  background: repeating-linear-gradient(45deg, #da5147, #da5147 4.5px, #d5281b 4.5px, #d5281b 9px);
+}
+
+.nhsuk-bmi-legend-key-classification-obese {
+  border-bottom: none;
+  box-shadow: none;
+}
+
+.nhsuk-bmi-legend-key-marker {
+  border-bottom: none;
+  box-shadow: none;
+}
+
+.nhsuk-bmi-chart-marker {
+  position: absolute;
+  z-index: 4;
+  height: 24px;
+  width: 24px;
+  margin: 2px 0 -12px -12px;
+}
+@media (min-width: 320px) and (max-width: 641px) {
+  .nhsuk-bmi-chart-marker {
+    height: 20px;
+    width: 20px;
+    margin: 2px 0 -10px -10px;
+  }
+}
+
+.nhsuk-bmi-classification-underweight, .nhsuk-bmi-legend-key-classification-underweight {
+  background: #330072;
+}
+
+.nhsuk-bmi-classification-healthy, .nhsuk-bmi-legend-key-classification-healthy {
+  background: repeating-linear-gradient(-45deg, #30b4ab, #30b4ab 4.5px, #00a499 4.5px, #00a499 9px);
+}
+
+.nhsuk-bmi-classification-overweight, .nhsuk-bmi-legend-key-classification-overweight {
+  background: #ffb81c;
+}
+
+.nhsuk-bmi-classification-obese, .nhsuk-bmi-legend-key-classification-obese {
+  background: repeating-linear-gradient(45deg, #da5147, #da5147 4.5px, #d5281b 4.5px, #d5281b 9px);
+}
+
+.nhsuk-bmi-classification-obese, .nhsuk-bmi-classification-overweight, .nhsuk-bmi-classification-healthy, .nhsuk-bmi-classification-underweight {
+  position: absolute;
+  bottom: 0%;
+  outline: 1px solid black;
+  border-right: 1px solid black;
+  box-shadow: -1px 0px white inset, 2px 0px white, 0px -2px white;
+  height: 28px;
+}
+@media (min-width: 320px) and (max-width: 641px) {
+  .nhsuk-bmi-classification-obese, .nhsuk-bmi-classification-overweight, .nhsuk-bmi-classification-healthy, .nhsuk-bmi-classification-underweight {
+    height: 24px;
+  }
+}
+
+.nhsuk-bmi-classification-underweight {
+  z-index: 3;
+}
+
+.nhsuk-bmi-classification-healthy {
+  z-index: 2;
+}
+
+.nhsuk-bmi-classification-overweight {
+  z-index: 1;
+}
+
+.nhsuk-bmi-classification-obese {
+  border-right: none;
+  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;
+  margin-right: 20px;
+  outline: 2px solid black;
+  display: flex;
+  flex-direction: column;
+  height: 350px;
+}
+@media (max-width: 320px) {
+  .nhsuk-bp-graph {
+    height: 225px;
+  }
+}
+@media (min-width: 320px) and (max-width: 641px) {
+  .nhsuk-bp-graph {
+    height: 275px;
+  }
+}
+
+.nhsuk-bp-graph-row {
+  flex-grow: 1;
+  display: flex;
+}
+
+.nhsuk-bp-systolic-legend-wrapper {
+  display: flex;
+  align-items: flex-end;
+  margin-bottom: 10px;
+}
+
+.nhsuk-bp-diastolic-legend-wrapper {
+  display: flex;
+  align-items: flex-start;
+  margin-top: 30px;
+  padding-left: 18px;
+}
+
+.nhsuk-bp-diastolic-legend-marker, .nhsuk-bp-systolic-legend-marker {
+  height: 16px;
+  margin-right: 5px;
+  border-left: 2px solid black;
+}
+
+.nhsuk-bp-systolic-legend-marker {
+  width: 40px;
+  border-top: 2px solid black;
+}
+
+.nhsuk-bp-diastolic-legend-marker {
+  width: 20px;
+  border-bottom: 2px solid black;
+}
+
+.nhsuk-bp-classification-0, .nhsuk-bp-legend-key-classification-low {
+  background: #330072;
+}
+
+.nhsuk-bp-classification-1, .nhsuk-bp-legend-key-classification-healthy {
+  background: repeating-linear-gradient(-45deg, #59c3bc, #59c3bc 4.5px, #33b6ad 4.5px, #33b6ad 9px);
+}
+
+.nhsuk-bp-classification-2, .nhsuk-bp-legend-key-classification-slightlyraised {
+  background: #ffb81c;
+}
+
+.nhsuk-bp-classification-3, .nhsuk-bp-legend-key-classification-high {
+  background: repeating-linear-gradient(45deg, #e1746b, #e1746b 4.5px, #dd5349 4.5px, #dd5349 9px);
+}
+
+#nhsuk-bp-chart > figure {
+  margin: 0;
+}
+
+.nhsuk-bp-legend-key-wrapper {
+  display: flex;
+}
+.nhsuk-bp-legend-key-wrapper:last-child {
+  margin-top: 5px;
+}
+
+.nhsuk-bp-legend-display-card {
+  margin-top: 50px;
+  max-width: 300px;
+}
+
+.nhsuk-bp-legend-key-classification-low {
+  border-bottom: none;
+  box-shadow: none;
+}
+
+.nhsuk-bp-legend-key-marker {
+  border-bottom: none;
+  box-shadow: none;
+}
+
+.nhsuk-bp-diastolic-axis-marker, .nhsuk-bp-systolic-axis-marker {
+  position: absolute;
+  outline: 0.5px solid black;
+}
+
+.nhsuk-bp-diastolic-axis-label, .nhsuk-bp-systolic-axis-label {
+  position: absolute;
+}
+
+.nhsuk-bp-systolic-axis-marker {
+  width: 5px;
+  left: -5px;
+}
+.nhsuk-bp-systolic-axis-marker:first-child {
+  bottom: -1px !important;
+}
+.nhsuk-bp-systolic-axis-marker:last-child {
+  bottom: calc(100% + 1px) !important;
+}
+
+.nhsuk-bp-diastolic-axis-marker {
+  height: 5px;
+  bottom: -5px;
+}
+.nhsuk-bp-diastolic-axis-marker:first-child {
+  left: -1px !important;
+}
+.nhsuk-bp-diastolic-axis-marker:last-child {
+  left: calc(100% + 1px) !important;
+}
+
+@media (max-width: 450px) {
+  .nhsuk-bp-diastolic-axis-marker-85 {
+    display: none;
+  }
+}
+
+.nhsuk-bp-diastolic-axis-marker-90 {
+  display: none;
+}
+@media (max-width: 450px) {
+  .nhsuk-bp-diastolic-axis-marker-90 {
+    display: block;
+  }
+}
+
+.nhsuk-bp-systolic-axis-label {
+  left: -30px;
+  top: -10px;
+  width: 26px;
+  text-align: end;
+}
+
+.nhsuk-bp-diastolic-axis-label {
+  bottom: -25px;
+  left: -10px;
+  width: 20px;
+  text-align: center;
+}
+
+.nhsuk-bp-graph-marker {
+  position: absolute;
+  z-index: 6;
+  height: 24px;
+  width: 24px;
+  margin: 0 0 -12px -12px;
+}
+@media (max-width: 320px) {
+  .nhsuk-bp-graph-marker {
+    height: 20px;
+    width: 20px;
+    margin: 0 0 -10px -10px;
+  }
+}
+@media (min-width: 320px) and (max-width: 641px) {
+  .nhsuk-bp-graph-marker {
+    height: 22px;
+    width: 22px;
+    margin: 0 0 -11px -11px;
+  }
+}
+
+.nhsuk-bp-classification-0, .nhsuk-bp-legend-key-classification-low {
+  background: #330072;
+}
+
+.nhsuk-bp-classification-1, .nhsuk-bp-legend-key-classification-healthy {
+  background: repeating-linear-gradient(-45deg, #59c3bc, #59c3bc 4.5px, #33b6ad 4.5px, #33b6ad 9px);
+}
+
+.nhsuk-bp-classification-2, .nhsuk-bp-legend-key-classification-slightlyraised {
+  background: #ffb81c;
+}
+
+.nhsuk-bp-classification-3, .nhsuk-bp-legend-key-classification-high {
+  background: repeating-linear-gradient(45deg, #e1746b, #e1746b 4.5px, #dd5349 4.5px, #dd5349 9px);
+}
+
+.nhsuk-bp-region-boundary {
+  position: absolute;
+  bottom: 0%;
+  outline: 1px solid black;
+  border-top: 1px solid black;
+  border-right: 1px solid black;
+  box-shadow: -1px 1px white inset, 2px 0px white, 0px -2px white, 2px -2px white;
+  z-index: 5;
+  background: transparent;
+}
+
+.nhsuk-bp-classification-0 {
+  position: absolute;
+  bottom: 0%;
+  z-index: 3;
+}
+
+.nhsuk-bp-classification-1 {
+  position: absolute;
+  bottom: 0%;
+  z-index: 2;
+}
+
+.nhsuk-bp-classification-2 {
+  position: absolute;
+  bottom: 0%;
+  z-index: 1;
+}
+
+.nhsuk-bp-classification-3 {
+  position: absolute;
+  bottom: 0%;
+  z-index: 0;
+}
+
+.nhsuk-bp-graph-cell {
+  flex-grow: 1;
+  border-bottom: 1px solid white;
+  border-left: 1px solid white;
+  background: transparent;
+  z-index: 4;
+}
+
+.nhsuk-bp-first-in-column {
+  border-bottom: none;
+}
+
+.nhsuk-bp-first-in-row {
+  border-left: none;
+}

package/dist/cjs/index.js

@@ -0,0 +1,2 @@
+"use strict";var e=require("react"),t=require("nhsuk-react-components"),n=require("big.js");const a={Underweight:"underweight",Healthy:"healthy",Overweight:"overweight"},r=Object.assign(Object.assign({},a),{Obese:"obese"}),s=Object.assign(Object.assign({},a),{Obese1:"obese1",Obese2:"obese2",Obese3:"obese3"});s.Underweight,s.Healthy,s.Underweight,s.Overweight,s.Healthy;const l={[s.Underweight]:null,[s.Healthy]:s.Underweight,[s.Overweight]:s.Healthy};class i{constructor(e){this.bounds={lowerBound:0,upperBounds:{[r.Underweight]:e.upper[s.Underweight].value,[r.Healthy]:e.upper[s.Healthy].value,[r.Overweight]:e.upper[s.Overweight].value}}}get chartRange(){return this.bounds.upperBounds[s.Overweight]-this.bounds.lowerBound}classificationPercentage(e){return this.offsetPercentage(this.bounds.upperBounds[e])}offsetPercentage(e){const t=this.chartRange;if(e<=2){const n=.08*t;return this.calculateOffset(e,a.Underweight,n)}if(e<=91){const n=.72*t,r=.08*t;return this.calculateOffset(e,a.Healthy,n)+r}const n=.2*t,r=.8*t;return this.calculateOffset(e,a.Overweight,n)+r}calculateOffset(e,t,n){const a=l[t]?this.bounds.upperBounds[l[t]]:0;return(e-a)/(this.bounds.upperBounds[t]-a)*n}clampedOffsetPercentage(e){const t=Math.max(1,Math.min(e,99));return this.offsetPercentage(t)}}function c({markerText:t,offsetPercent:n}){return e.createElement("div",{className:"nhsuk-cbmi-axis-marker",style:{left:`${n}%`}},e.createElement("div",{className:"nhsuk-font-size-16 nhsuk-cbmi-axis-marker-label"},t))}function o({model:t}){return e.createElement(e.Fragment,null,e.createElement(c,{markerText:t.bounds.upperBounds[a.Underweight].toString(),offsetPercent:t.classificationPercentage(a.Underweight)}),e.createElement(c,{markerText:t.bounds.upperBounds[a.Healthy].toString(),offsetPercent:t.classificationPercentage(a.Healthy)}))}function u(){return e.createElement("svg",{viewBox:"0 0 12 12",fill:"none",xmlns:"http://www.w3.org/2000/svg"},e.createElement("path",{d:"M6 9L0.803849 -9.78799e-07L11.1962 -7.02746e-08L6 9Z",fill:"black"}))}const m=e=>e<=20?"nhsuk-cbmi-chart-label-align-left":e<=80?"nhsuk-cbmi-chart-label-align-center":"nhsuk-cbmi-chart-label-align-right";function d({centile:t,markerText:n}){return e.createElement("div",{className:"nhsuk-cbmi-chart-label-marker"},e.createElement("div",{className:`nhsuk-u-font-size-19 ${m(t.value)}`},n,e.createElement("span",{className:"nhsuk-cbmi-chart-centile-marker"},t.label)))}function h({centile:t,model:n,markerText:a}){const r=n.clampedOffsetPercentage(t.value);let s=0;if(r>0){const e=1,t=Math.pow(10,e);s=Math.round(r*t)/t}return e.createElement("div",null,e.createElement("div",{className:"nhsuk-cbmi-chart-arrow-marker",style:{left:`${s}%`}},e.createElement(d,{centile:t,markerText:a}),e.createElement(u,null)),e.createElement("div",{className:"nhsuk-cbmi-chart-axis-marker",style:{left:`${s}%`}}))}function g({classification:t,model:n}){const a=n.classificationPercentage(t);return e.createElement("div",{className:`nhsuk-cbmi-classification-${t}`,style:{width:`${a}%`}})}function p({model:t}){return e.createElement(e.Fragment,null,e.createElement(g,{classification:a.Underweight,model:t}),e.createElement(g,{classification:a.Healthy,model:t}),e.createElement(g,{classification:a.Overweight,model:t}))}function f({classificationBounds:t,centile:n,markerText:a}){const r=new i(t);return e.createElement("div",{className:"nhsuk-cbmi-graph nhsuk-u-margin-bottom-9 ","aria-hidden":"true"},e.createElement(o,{model:r}),e.createElement(h,{centile:n,markerText:a,model:r}),e.createElement(p,{model:r}))}function b({element:t,text:n,className:a,wrapperClassName:r}){return e.createElement("div",{className:`nhsuk-chart-legend-key-wrapper ${null!=r?r:""}`},e.createElement("div",{className:`nhsuk-chart-legend-key ${null!=a?a:""}`},t),n)}function y({legendKeys:n,className:a}){return e.createElement(t.Card,{className:`${a} nhsuk-u-padding-3 nhsuk-chart-legend-card`},n.map((t=>e.createElement(b,Object.assign({key:t.text},t)))))}function k({legendKeys:t,className:n}){return e.createElement("div",{className:n},t.map((t=>e.createElement(b,Object.assign({key:t.text},t)))))}function E({legendKeys:t,borderWrapper:n=!0}){const a="nhsuk-u-margin-top-6 nhsuk-u-margin-bottom-3 nhsuk-u-secondary-text-color nhsuk-body-s";return e.createElement("div",{"aria-hidden":"true"},n?e.createElement(y,{legendKeys:t,className:a}):e.createElement(k,{legendKeys:t,className:a}))}class w{constructor(e){this.bounds={lowerBound:17.5,upperBounds:{[r.Underweight]:e.upper[s.Underweight].value,[r.Healthy]:e.upper[s.Healthy].value,[r.Overweight]:e.upper[s.Overweight].value,[r.Obese]:e.upper[s.Obese2].value}}}get chartRange(){return this.bounds.upperBounds[r.Obese]-this.bounds.lowerBound}classificationPercentage(e){return this.offsetPercentage(this.bounds.upperBounds[e])}offsetPercentage(e){return(e-this.bounds.lowerBound)/this.chartRange*100}}function v(){return e.createElement("svg",{viewBox:"1 1 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg"},e.createElement("g",{clipPath:"url(#clip0_1346_102759)"},e.createElement("path",{xmlns:"http://www.w3.org/2000/svg",d:"M1.93209 4.05025L1.57854 4.40381L1.93209 4.75736L6.17473 9L1.93209 13.2426L1.57854 13.5962L1.93209 13.9497L4.05341 16.0711L4.40697 16.4246L4.76052 16.0711L9.00316 11.8284L13.2458 16.0711L13.5994 16.4246L13.9529 16.0711L16.0742 13.9497L16.4278 13.5962L16.0742 13.2426L11.8316 9L16.0742 4.75736L16.4278 4.40381L16.0742 4.05025L13.9529 1.92893L13.5994 1.57538L13.2458 1.92893L9.00316 6.17157L4.76052 1.92893L4.40697 1.57538L4.05341 1.92893L1.93209 4.05025Z",fill:"black",stroke:"white"})))}function L({bmi:t,model:n}){const a=n.offsetPercentage(t);let r=0;if(a>0){const e=1,t=Math.pow(10,e);r=Math.round(a*t)/t}return e.createElement("div",{className:"nhsuk-bmi-chart-marker",style:{left:`${r}%`}},e.createElement(v,null))}function x({classification:t,model:n}){const a=n.classificationPercentage(t);return e.createElement("div",{className:`nhsuk-bmi-classification-${t}`,style:{width:`${a}%`}})}function B({model:t}){return e.createElement(e.Fragment,null,e.createElement(x,{classification:r.Underweight,model:t}),e.createElement(x,{classification:r.Healthy,model:t}),e.createElement(x,{classification:r.Overweight,model:t}),e.createElement(x,{classification:r.Obese,model:t}))}function N({markerText:t,offsetPercent:n}){return e.createElement("div",{className:"nhsuk-bmi-axis-marker",style:{left:`${n}%`}},e.createElement("div",{className:"nhsuk-bmi-axis-marker-label"},t))}function O({model:t}){return e.createElement(e.Fragment,null,e.createElement(N,{markerText:t.bounds.upperBounds[r.Underweight].toString(),offsetPercent:t.classificationPercentage(r.Underweight)}),e.createElement(N,{markerText:t.bounds.upperBounds[r.Healthy].toString(),offsetPercent:t.classificationPercentage(r.Healthy)}),e.createElement(N,{markerText:t.bounds.upperBounds[r.Overweight].toString(),offsetPercent:t.classificationPercentage(r.Overweight)}))}function T({classificationBounds:t,bmi:n}){const a=new w(t);return e.createElement("div",{className:"nhsuk-bmi-graph","aria-hidden":"true"},e.createElement(O,{model:a}),e.createElement(L,{bmi:n,model:a}),e.createElement(B,{model:a}))}const P={Low:"0",Healthy:"1",SlightlyRaised:"2",High:"3",VeryHigh:"4"};var $;function H({axisType:t,labelText:n,offsetPercent:a,applyLabelSpecificStyles:r=!0}){const s=`${$[t].toLowerCase()}-axis`,l=`nhsuk-bp-${s}-marker`,i=`nhsuk-bp-${s}-marker-${n}`;return e.createElement("div",{className:r?`${l} ${i}`:`${l}`,style:t===$.Systolic?{bottom:`${a}%`}:{left:`${a}%`}},e.createElement("div",{className:`nhsuk-bp-${s}-label`},n))}function S(e,t,n){return(e-n)/(t-n)*100}function R(e,t,n){return S(t[e].value,t[P.High].value,n)}function U({axisType:t,upperBounds:n,lowerBound:a}){const r={slightlyRaisedValueToCheck:85,slightlyRaisedValueToAdd:90};return e.createElement("div",null,e.createElement(H,{labelText:a.toString(),offsetPercent:0,axisType:t}),e.createElement(H,{labelText:n[P.Low].value.toString(),offsetPercent:R(P.Low,n,a),axisType:t}),e.createElement(H,{labelText:n[P.Healthy].value.toString(),offsetPercent:R(P.Healthy,n,a),axisType:t}),e.createElement(H,{labelText:n[P.SlightlyRaised].value.toString(),offsetPercent:R(P.SlightlyRaised,n,a),axisType:t,applyLabelSpecificStyles:n[P.SlightlyRaised].value===r.slightlyRaisedValueToCheck}),t===$.Diastolic&&n[P.SlightlyRaised].value===r.slightlyRaisedValueToCheck&&e.createElement(H,{labelText:r.slightlyRaisedValueToAdd.toString(),offsetPercent:S(r.slightlyRaisedValueToAdd,n[P.High].value,a),axisType:t}),e.createElement(H,{labelText:n[P.High].value.toString(),offsetPercent:100,axisType:t}))}function C({bounds:t}){return e.createElement(e.Fragment,null,e.createElement(U,{axisType:$.Systolic,upperBounds:t.systolic.upper,lowerBound:t.systolic.lower}),e.createElement(U,{axisType:$.Diastolic,upperBounds:t.diastolic.upper,lowerBound:t.diastolic.lower}))}function j(){return e.createElement("svg",{viewBox:"0 0 32 32",fill:"none",xmlns:"http://www.w3.org/2000/svg"},e.createElement("g",{clipPath:"url(#clip0_1346_102759)"},e.createElement("path",{d:"M5.18718 8.36931L4.48008 9.07641L5.18718 9.78352L11.3744 15.9707L5.18718 22.1579L4.48008 22.865L5.18718 23.5721L8.36916 26.7541L9.07627 27.4612L9.78338 26.7541L15.9706 20.5669L22.1577 26.7541L22.8649 27.4612L23.572 26.7541L26.7539 23.5721L27.461 22.865L26.7539 22.1579L20.5668 15.9707L26.7539 9.78352L27.461 9.07641L26.7539 8.36931L23.572 5.18732L22.8649 4.48022L22.1577 5.18732L15.9706 11.3745L9.78338 5.18732L9.07627 4.48022L8.36916 5.18732L5.18718 8.36931Z",fill:"black",stroke:"white",strokeWidth:"2"})))}function M({systolicReading:t,diastolicReading:a,systolicLowerBound:r,systolicUpperBound:s,diastolicLowerBound:l,diastolicUpperBound:i}){const c=i-l,o=new n((t-r)/(s-r)).times(100),u=new n((a-l)/c).times(100),m=o.round(1),d=u.round(1);return e.createElement("div",{className:"nhsuk-bp-graph-marker",style:{left:`${d}%`,bottom:`${m}%`}},e.createElement(j,null))}function K(e,t,n){return(t[n].value-e)/(t[3].value-e)*100}function A(e){return`nhsuk-bp-classification-${e.toLowerCase()}`}function F({classification:t,bounds:n,renderAsBoundary:a=!1}){const r=K(n.diastolic.lower,n.diastolic.upper,t),s=K(n.systolic.lower,n.systolic.upper,t);return e.createElement("div",{className:a?"nhsuk-bp-region-boundary":A(t),style:{width:`${r}%`,height:`${s}%`}})}function V({bounds:t,renderAsBoundary:n=!1}){return e.createElement(e.Fragment,null,e.createElement(F,Object.assign({classification:P.Low},{bounds:t,renderAsBoundary:n})),e.createElement(F,Object.assign({classification:P.Healthy},{bounds:t,renderAsBoundary:n})),e.createElement(F,Object.assign({classification:P.SlightlyRaised},{bounds:t,renderAsBoundary:n})),!n&&e.createElement(F,Object.assign({classification:P.High},{bounds:t,renderAsBoundary:n})))}function D({firstInRow:t=!1,firstInColumn:n=!1}){let a="nhsuk-bp-graph-cell";return t&&(a+=" nhsuk-bp-first-in-row"),n&&(a+=" nhsuk-bp-first-in-column"),e.createElement("div",{className:a})}function W({bounds:t,graphLayout:n,reading:a}){const{systolic:r,diastolic:s}=a,{systolicLabel:l,diastolicLabel:i}=n;return e.createElement("div",{className:"nhsuk-body-s"},e.createElement("div",{className:"nhsuk-bp-systolic-legend-wrapper","aria-hidden":"true"},e.createElement("div",{className:"nhsuk-bp-systolic-legend-marker"}),e.createElement("span",null,l)),e.createElement("div",{className:"nhsuk-bp-graph","aria-hidden":"true"},e.createElement(C,{bounds:t}),e.createElement(M,{systolicReading:r,diastolicReading:s,systolicLowerBound:t.systolic.lower,systolicUpperBound:t.systolic.upper[3].value,diastolicLowerBound:t.diastolic.lower,diastolicUpperBound:t.diastolic.upper[3].value}),e.createElement(V,{bounds:t}),n.rows.map((t=>e.createElement("div",{key:t.id,className:"nhsuk-bp-graph-row"},t.cells.map((t=>e.createElement(D,Object.assign({key:t.id},t))))))),e.createElement(V,{bounds:t,renderAsBoundary:!0})),e.createElement("div",{className:"nhsuk-bp-diastolic-legend-wrapper","aria-hidden":"true"},e.createElement("div",{className:"nhsuk-bp-diastolic-legend-marker"}),e.createElement("span",null,i)))}!function(e){e[e.Systolic=0]="Systolic",e[e.Diastolic=1]="Diastolic"}($||($={})),n.RM=n.roundHalfEven;exports.BmiChart=T,exports.BmiChartFigure=function({classificationBounds:t,bmi:n,ariaLabel:a,legendKeys:r,legendMarkerText:s}){const l=((t,n)=>Object.entries(t).map((([e,t])=>({text:t,className:`nhsuk-bmi-legend-key-classification-${e}`}))).concat({text:n,className:"nhsuk-bmi-legend-key-marker",element:e.createElement(v,null)}))(r,s);return e.createElement("figure",{className:"nhsuk-u-margin-0"},e.createElement("figcaption",{className:"nhsuk-u-visually-hidden"},a),e.createElement(T,{classificationBounds:t,bmi:n}),e.createElement(E,{legendKeys:l,borderWrapper:!0}))},exports.BpChart=W,exports.BpChartFigure=function({bounds:t,graphLayout:n,reading:a,ariaLabel:r,legendKeys:s,legendMarkerText:l}){const i=((t,n)=>Object.entries(t).map((([e,t])=>({text:t,className:`nhsuk-bp-legend-key-classification-${e}`}))).concat({text:n,className:"nhsuk-bp-legend-key-marker",element:e.createElement(j,null)}))(s,l);return e.createElement("figure",{className:"nhsuk-u-margin-0"},e.createElement("figcaption",{className:"nhsuk-u-visually-hidden"},r),e.createElement(W,{bounds:t,reading:a,graphLayout:n}),e.createElement(E,{legendKeys:i}))},exports.ChartLegend=E,exports.ChildBmiChart=f,exports.ChildBmiChartFigure=function({classificationBounds:t,centile:n,centileMarkerText:a,ariaLabel:r,legendKeys:s}){const l=Object.entries(s).map((([e,t])=>({text:t,className:`nhsuk-cbmi-legend-key-classification-${e}`,wrapperClassName:"nhsuk-cbmi-legend-marker"})));return e.createElement("figure",{className:"nhsuk-u-margin-0"},e.createElement("figcaption",{className:"nhsuk-u-visually-hidden"},r),e.createElement(f,{classificationBounds:t,centile:n,markerText:a}),e.createElement(E,{legendKeys:l,borderWrapper:!1}))};
+//# sourceMappingURL=index.js.map