nhsuk-tools-chart-components-react 2.1.0 → 2.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (29) hide show
  1. package/README.md +1 -1
  2. package/dist/cjs/bundle.css +318 -318
  3. package/dist/cjs/index.js +1 -1
  4. package/dist/cjs/index.js.map +1 -1
  5. package/dist/esm/bundle.css +267 -267
  6. package/dist/esm/components/bar-slider/bar-slider-chart-axis.js +1 -1
  7. package/dist/esm/components/bar-slider/bar-slider-chart-axis.js.map +1 -1
  8. package/dist/esm/components/bar-slider/bar-slider-chart-regions.js +1 -1
  9. package/dist/esm/components/bar-slider/bar-slider-chart-regions.js.map +1 -1
  10. package/dist/esm/components/bar-slider/bar-slider-figure-chart.js +1 -1
  11. package/dist/esm/components/bar-slider/bar-slider-figure-chart.js.map +1 -1
  12. package/dist/esm/components/blood-pressure/bp-chart.js +1 -1
  13. package/dist/esm/components/blood-pressure/bp-chart.js.map +1 -1
  14. package/dist/esm/components/blood-pressure/bp-figure-chart.js +1 -1
  15. package/dist/esm/components/blood-pressure/bp-figure-chart.js.map +1 -1
  16. package/dist/esm/components/bmi/bmi-figure-chart.js +1 -1
  17. package/dist/esm/components/bmi/bmi-figure-chart.js.map +1 -1
  18. package/dist/esm/components/chart-legend.js +1 -1
  19. package/dist/esm/components/chart-legend.js.map +1 -1
  20. package/dist/esm/components/child-bmi/cbmi-chart-marker.js +1 -1
  21. package/dist/esm/components/child-bmi/cbmi-chart-marker.js.map +1 -1
  22. package/dist/esm/components/child-bmi/cbmi-figure-chart.js +1 -1
  23. package/dist/esm/components/child-bmi/cbmi-figure-chart.js.map +1 -1
  24. package/dist/esm/models/bar-slider-chart.model.js +1 -1
  25. package/dist/esm/models/bar-slider-chart.model.js.map +1 -1
  26. package/dist/esm/utils/bar-slider.utils.js +1 -1
  27. package/dist/esm/utils/bar-slider.utils.js.map +1 -1
  28. package/dist/index.d.ts +2 -1
  29. package/package.json +9 -6
@@ -16,67 +16,101 @@
16
16
  }
17
17
 
18
18
 
19
- .nhsuk-bmi-legend-key-classification-underweight, .nhsuk-bmi-classification-underweight {
19
+ .nhsuk-bmi-classification-underweight, .nhsuk-bmi-legend-key-classification-underweight {
20
20
  background: #330072;
21
21
  }
22
22
 
23
- .nhsuk-bmi-legend-key-classification-healthy, .nhsuk-bmi-classification-healthy {
23
+ .nhsuk-bmi-classification-healthy, .nhsuk-bmi-legend-key-classification-healthy {
24
24
  background: repeating-linear-gradient(-45deg, #30b4ab, #30b4ab 4.5px, #00a499 4.5px, #00a499 9px);
25
25
  }
26
26
 
27
- .nhsuk-bmi-legend-key-classification-overweight, .nhsuk-bmi-classification-overweight {
27
+ .nhsuk-bmi-classification-overweight, .nhsuk-bmi-legend-key-classification-overweight {
28
28
  background: #ffb81c;
29
29
  }
30
30
 
31
- .nhsuk-bmi-legend-key-classification-obese, .nhsuk-bmi-classification-obese {
31
+ .nhsuk-bmi-classification-obese, .nhsuk-bmi-legend-key-classification-obese {
32
32
  background: repeating-linear-gradient(45deg, #da5147, #da5147 4.5px, #d5281b 4.5px, #d5281b 9px);
33
33
  }
34
34
 
35
- .nhsuk-bmi-classification-obese, .nhsuk-bmi-classification-overweight, .nhsuk-bmi-classification-healthy, .nhsuk-bmi-classification-underweight {
36
- position: absolute;
37
- bottom: 0%;
35
+ .nhsuk-bmi-graph {
36
+ position: relative;
38
37
  outline: 1px solid black;
39
- border-right: 1px solid black;
40
- box-shadow: -1px 0px white inset, 2px 0px white, 0px -2px white;
38
+ display: flex;
41
39
  height: 28px;
40
+ margin-bottom: nhsuk-spacing(4);
42
41
  }
43
42
  @media (min-width: 320px) and (max-width: 641px) {
44
- .nhsuk-bmi-classification-obese, .nhsuk-bmi-classification-overweight, .nhsuk-bmi-classification-healthy, .nhsuk-bmi-classification-underweight {
43
+ .nhsuk-bmi-graph {
45
44
  height: 24px;
46
45
  }
47
46
  }
48
47
 
49
- .nhsuk-bmi-classification-underweight {
50
- z-index: 3;
48
+ .nhsuk-bmi-classification-underweight, .nhsuk-bmi-legend-key-classification-underweight {
49
+ background: #330072;
51
50
  }
52
51
 
53
- .nhsuk-bmi-classification-healthy {
54
- z-index: 2;
52
+ .nhsuk-bmi-classification-healthy, .nhsuk-bmi-legend-key-classification-healthy {
53
+ background: repeating-linear-gradient(-45deg, #30b4ab, #30b4ab 4.5px, #00a499 4.5px, #00a499 9px);
55
54
  }
56
55
 
57
- .nhsuk-bmi-classification-overweight {
58
- z-index: 1;
56
+ .nhsuk-bmi-classification-overweight, .nhsuk-bmi-legend-key-classification-overweight {
57
+ background: #ffb81c;
59
58
  }
60
59
 
61
- .nhsuk-bmi-classification-obese {
62
- border-right: none;
60
+ .nhsuk-bmi-classification-obese, .nhsuk-bmi-legend-key-classification-obese {
61
+ background: repeating-linear-gradient(45deg, #da5147, #da5147 4.5px, #d5281b 4.5px, #d5281b 9px);
62
+ }
63
+
64
+ .nhsuk-bmi-legend-key-classification-obese {
65
+ border-bottom: none;
63
66
  box-shadow: none;
64
67
  }
65
68
 
69
+ .nhsuk-bmi-legend-key-marker {
70
+ border-bottom: none;
71
+ box-shadow: none;
72
+ }
66
73
 
67
- .nhsuk-bmi-chart-marker {
68
- position: absolute;
69
- z-index: 4;
70
- height: 24px;
71
- width: 24px;
72
- margin: 2px 0 -12px -12px;
74
+ .nhsuk-bp-classification-low, .nhsuk-bp-legend-key-classification-low {
75
+ background: #330072;
73
76
  }
74
- @media (min-width: 320px) and (max-width: 641px) {
75
- .nhsuk-bmi-chart-marker {
76
- height: 20px;
77
- width: 20px;
78
- margin: 2px 0 -10px -10px;
79
- }
77
+
78
+ .nhsuk-bp-classification-healthy, .nhsuk-bp-legend-key-classification-healthy {
79
+ background: repeating-linear-gradient(-45deg, #59c3bc, #59c3bc 4.5px, #33b6ad 4.5px, #33b6ad 9px);
80
+ }
81
+
82
+ .nhsuk-bp-classification-slightlyraised, .nhsuk-bp-legend-key-classification-slightlyraised {
83
+ background: #ffb81c;
84
+ }
85
+
86
+ .nhsuk-bp-classification-high, .nhsuk-bp-legend-key-classification-high {
87
+ background: repeating-linear-gradient(45deg, #e1746b, #e1746b 4.5px, #dd5349 4.5px, #dd5349 9px);
88
+ }
89
+
90
+ #nhsuk-bp-chart > figure {
91
+ margin: 0;
92
+ }
93
+
94
+ .nhsuk-bp-legend-key-wrapper {
95
+ display: flex;
96
+ }
97
+ .nhsuk-bp-legend-key-wrapper:last-child {
98
+ margin-top: 5px;
99
+ }
100
+
101
+ .nhsuk-bp-legend-display-card {
102
+ margin-top: 50px;
103
+ max-width: 300px;
104
+ }
105
+
106
+ .nhsuk-bp-legend-key-classification-low {
107
+ border-bottom: none;
108
+ box-shadow: none;
109
+ }
110
+
111
+ .nhsuk-bp-legend-key-marker {
112
+ border-bottom: none;
113
+ box-shadow: none;
80
114
  }
81
115
 
82
116
  .nhsuk-bmi-axis-marker {
@@ -155,46 +189,20 @@
155
189
  text-align: center;
156
190
  }
157
191
 
158
- .nhsuk-bp-classification-low, .nhsuk-bp-legend-key-classification-low {
159
- background: #330072;
160
- }
161
-
162
- .nhsuk-bp-classification-healthy, .nhsuk-bp-legend-key-classification-healthy {
163
- background: repeating-linear-gradient(-45deg, #59c3bc, #59c3bc 4.5px, #33b6ad 4.5px, #33b6ad 9px);
164
- }
165
-
166
- .nhsuk-bp-classification-slightlyraised, .nhsuk-bp-legend-key-classification-slightlyraised {
167
- background: #ffb81c;
168
- }
169
-
170
- .nhsuk-bp-classification-high, .nhsuk-bp-legend-key-classification-high {
171
- background: repeating-linear-gradient(45deg, #e1746b, #e1746b 4.5px, #dd5349 4.5px, #dd5349 9px);
172
- }
173
-
174
- #nhsuk-bp-chart > figure {
175
- margin: 0;
176
- }
177
-
178
- .nhsuk-bp-legend-key-wrapper {
179
- display: flex;
180
- }
181
- .nhsuk-bp-legend-key-wrapper:last-child {
182
- margin-top: 5px;
183
- }
184
-
185
- .nhsuk-bp-legend-display-card {
186
- margin-top: 50px;
187
- max-width: 300px;
188
- }
189
192
 
190
- .nhsuk-bp-legend-key-classification-low {
191
- border-bottom: none;
192
- box-shadow: none;
193
+ .nhsuk-bmi-chart-marker {
194
+ position: absolute;
195
+ z-index: 4;
196
+ height: 24px;
197
+ width: 24px;
198
+ margin: 2px 0 -12px -12px;
193
199
  }
194
-
195
- .nhsuk-bp-legend-key-marker {
196
- border-bottom: none;
197
- box-shadow: none;
200
+ @media (min-width: 320px) and (max-width: 641px) {
201
+ .nhsuk-bmi-chart-marker {
202
+ height: 20px;
203
+ width: 20px;
204
+ margin: 2px 0 -10px -10px;
205
+ }
198
206
  }
199
207
 
200
208
 
@@ -252,66 +260,6 @@
252
260
  border-bottom: 2px solid black;
253
261
  }
254
262
 
255
- .nhsuk-bp-graph-cell {
256
- flex-grow: 1;
257
- border-bottom: 1px solid white;
258
- border-left: 1px solid white;
259
- background: transparent;
260
- z-index: 4;
261
- }
262
-
263
- .nhsuk-bp-first-in-column {
264
- border-bottom: none;
265
- }
266
-
267
- .nhsuk-bp-first-in-row {
268
- border-left: none;
269
- }
270
-
271
-
272
- .nhsuk-bmi-legend-key-classification-underweight, .nhsuk-bmi-classification-underweight {
273
- background: #330072;
274
- }
275
-
276
- .nhsuk-bmi-legend-key-classification-healthy, .nhsuk-bmi-classification-healthy {
277
- background: repeating-linear-gradient(-45deg, #30b4ab, #30b4ab 4.5px, #00a499 4.5px, #00a499 9px);
278
- }
279
-
280
- .nhsuk-bmi-legend-key-classification-overweight, .nhsuk-bmi-classification-overweight {
281
- background: #ffb81c;
282
- }
283
-
284
- .nhsuk-bmi-legend-key-classification-obese, .nhsuk-bmi-classification-obese {
285
- background: repeating-linear-gradient(45deg, #da5147, #da5147 4.5px, #d5281b 4.5px, #d5281b 9px);
286
- }
287
-
288
- .nhsuk-bmi-graph {
289
- position: relative;
290
- outline: 1px solid black;
291
- display: flex;
292
- height: 28px;
293
- margin-bottom: nhsuk-spacing(4);
294
- }
295
- @media (min-width: 320px) and (max-width: 641px) {
296
- .nhsuk-bmi-graph {
297
- height: 24px;
298
- }
299
- }
300
-
301
-
302
- .nhsuk-bar-slider-graph {
303
- position: relative;
304
- outline: 1px solid black;
305
- margin-top: 20px;
306
- display: flex;
307
- height: 28px;
308
- }
309
- @media (min-width: 320px) and (max-width: 641px) {
310
- .nhsuk-bar-slider-graph {
311
- height: 24px;
312
- }
313
- }
314
-
315
263
  .nhsuk-bp-classification-low, .nhsuk-bp-legend-key-classification-low {
316
264
  background: #330072;
317
265
  }
@@ -364,74 +312,53 @@
364
312
  }
365
313
 
366
314
 
367
- .nhsuk-bp-graph-marker {
368
- position: absolute;
369
- z-index: 6;
370
- height: 24px;
371
- width: 24px;
372
- margin: 0 0 -12px -12px;
315
+ .nhsuk-bmi-classification-underweight, .nhsuk-bmi-legend-key-classification-underweight {
316
+ background: #330072;
373
317
  }
374
- @media (max-width: 320px) {
375
- .nhsuk-bp-graph-marker {
376
- height: 20px;
377
- width: 20px;
378
- margin: 0 0 -10px -10px;
379
- }
318
+
319
+ .nhsuk-bmi-classification-healthy, .nhsuk-bmi-legend-key-classification-healthy {
320
+ background: repeating-linear-gradient(-45deg, #30b4ab, #30b4ab 4.5px, #00a499 4.5px, #00a499 9px);
380
321
  }
381
- @media (min-width: 320px) and (max-width: 641px) {
382
- .nhsuk-bp-graph-marker {
383
- height: 22px;
384
- width: 22px;
385
- margin: 0 0 -11px -11px;
386
- }
322
+
323
+ .nhsuk-bmi-classification-overweight, .nhsuk-bmi-legend-key-classification-overweight {
324
+ background: #ffb81c;
387
325
  }
388
326
 
327
+ .nhsuk-bmi-classification-obese, .nhsuk-bmi-legend-key-classification-obese {
328
+ background: repeating-linear-gradient(45deg, #da5147, #da5147 4.5px, #d5281b 4.5px, #d5281b 9px);
329
+ }
389
330
 
390
- .nhsuk-bar-slider-arrow-marker {
331
+ .nhsuk-bmi-classification-obese, .nhsuk-bmi-classification-overweight, .nhsuk-bmi-classification-healthy, .nhsuk-bmi-classification-underweight {
391
332
  position: absolute;
392
- height: 16px;
393
- width: 16px;
394
- margin: -9px 0 -8px -8px;
333
+ bottom: 0%;
334
+ outline: 1px solid black;
335
+ border-right: 1px solid black;
336
+ box-shadow: -1px 0px white inset, 2px 0px white, 0px -2px white;
337
+ height: 28px;
395
338
  }
396
339
  @media (min-width: 320px) and (max-width: 641px) {
397
- .nhsuk-bar-slider-arrow-marker {
398
- height: 12px;
399
- width: 12px;
400
- margin: -9px 0 -6px -6px;
340
+ .nhsuk-bmi-classification-obese, .nhsuk-bmi-classification-overweight, .nhsuk-bmi-classification-healthy, .nhsuk-bmi-classification-underweight {
341
+ height: 24px;
401
342
  }
402
343
  }
403
344
 
404
- .nhsuk-bar-slider-label-align-left {
405
- display: flex;
406
- justify-content: left;
407
- }
408
-
409
- .nhsuk-bar-slider-label-align-center {
410
- display: flex;
411
- justify-content: center;
345
+ .nhsuk-bmi-classification-underweight {
346
+ z-index: 3;
412
347
  }
413
348
 
414
- .nhsuk-bar-slider-label-align-right {
415
- display: flex;
416
- justify-content: right;
349
+ .nhsuk-bmi-classification-healthy {
350
+ z-index: 2;
417
351
  }
418
352
 
419
- .nhsuk-bar-slider-label-marker {
420
- position: relative;
421
- height: 25px;
422
- width: auto;
423
- white-space: nowrap;
424
- margin-top: -30px;
353
+ .nhsuk-bmi-classification-overweight {
354
+ z-index: 1;
425
355
  }
426
356
 
427
- .nhsuk-bar-slider-value-marker {
428
- position: relative;
429
- font-weight: bold;
430
- margin-left: 5px;
431
- margin-right: 2px;
357
+ .nhsuk-bmi-classification-obese {
358
+ border-right: none;
359
+ box-shadow: none;
432
360
  }
433
361
 
434
-
435
362
  .nhsuk-cbmi-legend-key-classification-healthy, .nhsuk-cbmi-classification-healthy {
436
363
  background: repeating-linear-gradient(-45deg, #30b4ab, #30b4ab 4.5px, #00a499 4.5px, #00a499 9px);
437
364
  }
@@ -444,19 +371,30 @@
444
371
  background: #330072;
445
372
  }
446
373
 
447
- .nhsuk-cbmi-graph {
448
- position: relative;
449
- outline: 1px solid black;
450
- margin-top: 20px;
451
- display: flex;
452
- height: 28px;
374
+
375
+ .nhsuk-cbmi-axis-marker {
376
+ border: 1px solid black;
377
+ position: absolute;
378
+ bottom: -5px;
379
+ margin-left: -0.5px;
380
+ box-shadow: 0px 0px white inset, 1px 0px white, -1px 0px white;
381
+ z-index: 100;
382
+ height: 33px;
453
383
  }
454
384
  @media (min-width: 320px) and (max-width: 641px) {
455
- .nhsuk-cbmi-graph {
456
- height: 24px;
385
+ .nhsuk-cbmi-axis-marker {
386
+ height: 29px;
457
387
  }
458
388
  }
459
389
 
390
+ .nhsuk-cbmi-axis-marker-label {
391
+ position: absolute;
392
+ bottom: -25px;
393
+ left: -10px;
394
+ width: 20px;
395
+ text-align: center;
396
+ }
397
+
460
398
 
461
399
  .nhsuk-cbmi-legend-key-classification-healthy, .nhsuk-cbmi-classification-healthy {
462
400
  background: repeating-linear-gradient(-45deg, #30b4ab, #30b4ab 4.5px, #00a499 4.5px, #00a499 9px);
@@ -470,89 +408,56 @@
470
408
  background: #330072;
471
409
  }
472
410
 
473
- .nhsuk-cbmi-chart-arrow-marker {
474
- position: absolute;
475
- z-index: 4;
476
- height: 16px;
477
- width: 16px;
478
- margin: -9px 0 -8px -8px;
479
- }
480
- @media (min-width: 320px) and (max-width: 641px) {
481
- .nhsuk-cbmi-chart-arrow-marker {
482
- height: 12px;
483
- width: 12px;
484
- margin: -9px 0 -6px -6px;
485
- }
486
- }
487
-
488
- .nhsuk-cbmi-chart-label-align-left {
489
- display: flex;
490
- justify-content: left;
491
- }
492
-
493
- .nhsuk-cbmi-chart-label-align-center {
494
- display: flex;
495
- justify-content: center;
496
- }
497
-
498
- .nhsuk-cbmi-chart-label-align-right {
499
- display: flex;
500
- justify-content: right;
501
- }
502
-
503
- .nhsuk-cbmi-chart-label-marker {
504
- position: relative;
505
- height: 25px;
506
- width: auto;
507
- white-space: nowrap;
508
- margin-top: -30px;
509
- z-index: 4;
510
- }
511
-
512
- .nhsuk-cbmi-chart-centile-marker {
411
+ .nhsuk-cbmi-graph {
513
412
  position: relative;
514
- font-weight: bold;
515
- margin-left: 5px;
516
- }
517
-
518
- .nhsuk-cbmi-chart-axis-marker {
519
- position: absolute;
520
- margin-left: -1px;
521
- border: 1.5px solid black;
522
- box-shadow: 0px 0px white inset, 2px 0px white, -2px 0px white;
523
- z-index: 4;
413
+ outline: 1px solid black;
414
+ margin-top: 20px;
415
+ display: flex;
524
416
  height: 28px;
525
417
  }
526
418
  @media (min-width: 320px) and (max-width: 641px) {
527
- .nhsuk-cbmi-chart-axis-marker {
419
+ .nhsuk-cbmi-graph {
528
420
  height: 24px;
529
421
  }
530
422
  }
531
423
 
532
- .nhsuk-bmi-legend-key-classification-underweight, .nhsuk-bmi-classification-underweight {
533
- background: #330072;
424
+ .nhsuk-bp-graph-cell {
425
+ flex-grow: 1;
426
+ border-bottom: 1px solid white;
427
+ border-left: 1px solid white;
428
+ background: transparent;
429
+ z-index: 4;
534
430
  }
535
431
 
536
- .nhsuk-bmi-legend-key-classification-healthy, .nhsuk-bmi-classification-healthy {
537
- background: repeating-linear-gradient(-45deg, #30b4ab, #30b4ab 4.5px, #00a499 4.5px, #00a499 9px);
432
+ .nhsuk-bp-first-in-column {
433
+ border-bottom: none;
538
434
  }
539
435
 
540
- .nhsuk-bmi-legend-key-classification-overweight, .nhsuk-bmi-classification-overweight {
541
- background: #ffb81c;
436
+ .nhsuk-bp-first-in-row {
437
+ border-left: none;
542
438
  }
543
439
 
544
- .nhsuk-bmi-legend-key-classification-obese, .nhsuk-bmi-classification-obese {
545
- background: repeating-linear-gradient(45deg, #da5147, #da5147 4.5px, #d5281b 4.5px, #d5281b 9px);
546
- }
547
440
 
548
- .nhsuk-bmi-legend-key-classification-obese {
549
- border-bottom: none;
550
- box-shadow: none;
441
+ .nhsuk-bp-graph-marker {
442
+ position: absolute;
443
+ z-index: 6;
444
+ height: 24px;
445
+ width: 24px;
446
+ margin: 0 0 -12px -12px;
551
447
  }
552
-
553
- .nhsuk-bmi-legend-key-marker {
554
- border-bottom: none;
555
- box-shadow: none;
448
+ @media (max-width: 320px) {
449
+ .nhsuk-bp-graph-marker {
450
+ height: 20px;
451
+ width: 20px;
452
+ margin: 0 0 -10px -10px;
453
+ }
454
+ }
455
+ @media (min-width: 320px) and (max-width: 641px) {
456
+ .nhsuk-bp-graph-marker {
457
+ height: 22px;
458
+ width: 22px;
459
+ margin: 0 0 -11px -11px;
460
+ }
556
461
  }
557
462
 
558
463
 
@@ -630,6 +535,66 @@
630
535
  border-left: 8px solid #ffb81c;
631
536
  }
632
537
 
538
+
539
+ .nhsuk-bar-slider-graph {
540
+ position: relative;
541
+ outline: 1px solid black;
542
+ margin-top: 20px;
543
+ display: flex;
544
+ height: 28px;
545
+ }
546
+ @media (min-width: 320px) and (max-width: 641px) {
547
+ .nhsuk-bar-slider-graph {
548
+ height: 24px;
549
+ }
550
+ }
551
+
552
+
553
+ .nhsuk-bar-slider-arrow-marker {
554
+ position: absolute;
555
+ height: 16px;
556
+ width: 16px;
557
+ margin: -9px 0 -8px -8px;
558
+ }
559
+ @media (min-width: 320px) and (max-width: 641px) {
560
+ .nhsuk-bar-slider-arrow-marker {
561
+ height: 12px;
562
+ width: 12px;
563
+ margin: -9px 0 -6px -6px;
564
+ }
565
+ }
566
+
567
+ .nhsuk-bar-slider-label-align-left {
568
+ display: flex;
569
+ justify-content: left;
570
+ }
571
+
572
+ .nhsuk-bar-slider-label-align-center {
573
+ display: flex;
574
+ justify-content: center;
575
+ }
576
+
577
+ .nhsuk-bar-slider-label-align-right {
578
+ display: flex;
579
+ justify-content: right;
580
+ }
581
+
582
+ .nhsuk-bar-slider-label-marker {
583
+ position: relative;
584
+ height: 25px;
585
+ width: auto;
586
+ white-space: nowrap;
587
+ margin-top: -30px;
588
+ }
589
+
590
+ .nhsuk-bar-slider-value-marker {
591
+ position: relative;
592
+ font-weight: bold;
593
+ margin-left: 5px;
594
+ margin-right: 2px;
595
+ }
596
+
597
+
633
598
  .nhsuk-cbmi-classification-healthy, .nhsuk-cbmi-legend-key-classification-healthy {
634
599
  background: repeating-linear-gradient(-45deg, #30b4ab, #30b4ab 4.5px, #00a499 4.5px, #00a499 9px);
635
600
  }
@@ -642,26 +607,61 @@
642
607
  background: #330072;
643
608
  }
644
609
 
645
-
646
- .nhsuk-cbmi-axis-marker {
647
- border: 1px solid black;
610
+ .nhsuk-cbmi-chart-arrow-marker {
648
611
  position: absolute;
649
- bottom: -5px;
650
- margin-left: -0.5px;
651
- box-shadow: 0px 0px white inset, 1px 0px white, -1px 0px white;
652
- z-index: 100;
653
- height: 33px;
612
+ z-index: 4;
613
+ height: 16px;
614
+ width: 16px;
615
+ margin: -9px 0 -8px -8px;
654
616
  }
655
617
  @media (min-width: 320px) and (max-width: 641px) {
656
- .nhsuk-cbmi-axis-marker {
657
- height: 29px;
618
+ .nhsuk-cbmi-chart-arrow-marker {
619
+ height: 12px;
620
+ width: 12px;
621
+ margin: -9px 0 -6px -6px;
658
622
  }
659
623
  }
660
624
 
661
- .nhsuk-cbmi-axis-marker-label {
625
+ .nhsuk-cbmi-chart-label-align-left {
626
+ display: flex;
627
+ justify-content: left;
628
+ }
629
+
630
+ .nhsuk-cbmi-chart-label-align-center {
631
+ display: flex;
632
+ justify-content: center;
633
+ }
634
+
635
+ .nhsuk-cbmi-chart-label-align-right {
636
+ display: flex;
637
+ justify-content: right;
638
+ }
639
+
640
+ .nhsuk-cbmi-chart-label-marker {
641
+ position: relative;
642
+ height: 25px;
643
+ width: auto;
644
+ white-space: nowrap;
645
+ margin-top: -30px;
646
+ z-index: 4;
647
+ }
648
+
649
+ .nhsuk-cbmi-chart-centile-marker {
650
+ position: relative;
651
+ font-weight: bold;
652
+ margin-left: 5px;
653
+ }
654
+
655
+ .nhsuk-cbmi-chart-axis-marker {
662
656
  position: absolute;
663
- bottom: -25px;
664
- left: -10px;
665
- width: 20px;
666
- text-align: center;
657
+ margin-left: -1px;
658
+ border: 1.5px solid black;
659
+ box-shadow: 0px 0px white inset, 2px 0px white, -2px 0px white;
660
+ z-index: 4;
661
+ height: 28px;
662
+ }
663
+ @media (min-width: 320px) and (max-width: 641px) {
664
+ .nhsuk-cbmi-chart-axis-marker {
665
+ height: 24px;
666
+ }
667
667
  }
@@ -1,2 +1,2 @@
1
- import e from"react";const t=(e,t)=>t>0?`${e}-axis-marker-label`:`${e}-start-axis-marker-label`,a=(e,t)=>t>0?`${e}-axis-marker`:`${e}-start-axis-marker`;function r({chartName:r,markerText:s,offsetPercent:l}){return e.createElement("div",{className:`${a(r,l)}`,style:{left:`${l}%`}},e.createElement("div",{className:`nhsuk-font-size-16 nhsuk-u-secondary-text-color ${t(r,l)}`},s))}function s({model:t}){return e.createElement(e.Fragment,null,t.getAxisTicks().map((({label:a,value:s,isVisible:l})=>l&&e.createElement(r,{chartName:t.name,markerText:a,offsetPercent:s,key:a}))))}export{s as BarSliderChartAxis};
1
+ import e from"react";const t=(e,t)=>t>0?`${e}-axis-marker-label`:`${e}-start-axis-marker-label`,a=(e,t)=>t>0?`${e}-axis-marker`:`${e}-start-axis-marker`;function r({chartName:r,markerText:s,offsetPercent:l}){return e.createElement("div",{className:`${a(r,l)}`,style:{left:`${l}%`}},e.createElement("div",{className:`nhsuk-font-size-16 nhsuk-u-secondary-text-color ${t(r,l)}`},s))}function s({model:t}){return e.createElement(e.Fragment,null,t.getAxisTicks().map(({label:a,value:s,isVisible:l})=>l&&e.createElement(r,{chartName:t.name,markerText:a,offsetPercent:s,key:a})))}export{s as BarSliderChartAxis};
2
2
  //# sourceMappingURL=bar-slider-chart-axis.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"bar-slider-chart-axis.js","sources":["../../../../../../src/components/bar-slider/bar-slider-chart-axis.tsx"],"sourcesContent":[null],"names":["markerAxisLabelClassname","name","offsetPercent","markerAxisClassname","AxisMarker","chartName","markerText","React","className","style","left","createElement","BarSliderChartAxis","model","getAxisTicks","map","label","value","isVisible","key"],"mappings":"qBAaA,MAAMA,EAA2B,CAC/BC,EACAC,IAEAA,EAAgB,EACZ,GAAGD,sBACH,GAAGA,4BAEHE,EAAsB,CAACF,EAAcC,IACzCA,EAAgB,EAAI,GAAGD,gBAAqB,GAAGA,sBAEjD,SAASG,GAAWC,UAClBA,EAASC,WACTA,EAAUJ,cACVA,IAEA,OACEK,uBACEC,UAAW,GAAGL,EAAoBE,EAAWH,KAC7CO,MAAO,CAAEC,KAAM,GAAGR,OAClBK,EAAAI,cAAA,MAAA,CACEH,UAAW,mDAAmDR,EAC5DK,EACAH,MAEDI,GAIT,CAEM,SAAUM,GAAmBC,MACjCA,IAEA,OACEN,gCACGM,EACEC,eACAC,KACC,EAAGC,QAAOC,QAAOC,eACfA,GACEX,EAAAI,cAACP,GACCC,UAAWQ,EAAMZ,KACjBK,WAAYU,EACZd,cAAee,EACfE,IAAKH,MAMrB"}
1
+ {"version":3,"file":"bar-slider-chart-axis.js","sources":["../../../../../../src/components/bar-slider/bar-slider-chart-axis.tsx"],"sourcesContent":[null],"names":["markerAxisLabelClassname","name","offsetPercent","markerAxisClassname","AxisMarker","chartName","markerText","React","className","style","left","createElement","BarSliderChartAxis","model","getAxisTicks","map","label","value","isVisible","key"],"mappings":"qBAaA,MAAMA,EAA2B,CAC/BC,EACAC,IAEAA,EAAgB,EACZ,GAAGD,sBACH,GAAGA,4BAEHE,EAAsB,CAACF,EAAcC,IACzCA,EAAgB,EAAI,GAAGD,gBAAqB,GAAGA,sBAEjD,SAASG,GAAWC,UAClBA,EAASC,WACTA,EAAUJ,cACVA,IAEA,OACEK,uBACEC,UAAW,GAAGL,EAAoBE,EAAWH,KAC7CO,MAAO,CAAEC,KAAM,GAAGR,OAClBK,EAAAI,cAAA,MAAA,CACEH,UAAW,mDAAmDR,EAC5DK,EACAH,MAEDI,GAIT,CAEM,SAAUM,GAAmBC,MACjCA,IAEA,OACEN,gCACGM,EACEC,eACAC,IACC,EAAGC,QAAOC,QAAOC,eACfA,GACEX,EAAAI,cAACP,GACCC,UAAWQ,EAAMZ,KACjBK,WAAYU,EACZd,cAAee,EACfE,IAAKH,KAMrB"}
@@ -1,2 +1,2 @@
1
- import e from"react";function t({value:t,styleClass:l}){return e.createElement("div",{className:l,style:{width:`${t}%`}})}function l({model:l}){return e.createElement(e.Fragment,null,l.getChartRegions().map((({value:l,styleClass:a})=>e.createElement(t,{value:l,styleClass:a,key:l}))))}export{l as BarSliderChartRegions};
1
+ import e from"react";function t({value:t,styleClass:l}){return e.createElement("div",{className:l,style:{width:`${t}%`}})}function l({model:l}){return e.createElement(e.Fragment,null,l.getChartRegions().map(({value:l,styleClass:a})=>e.createElement(t,{value:l,styleClass:a,key:l})))}export{l as BarSliderChartRegions};
2
2
  //# sourceMappingURL=bar-slider-chart-regions.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"bar-slider-chart-regions.js","sources":["../../../../../../src/components/bar-slider/bar-slider-chart-regions.tsx"],"sourcesContent":[null],"names":["RegionForClassification","value","styleClass","React","createElement","className","style","width","BarSliderChartRegions","model","Fragment","getChartRegions","map","key"],"mappings":"qBAGA,SAASA,GAAwBC,MAC/BA,EAAKC,WACLA,IAKA,OAAOC,EAAAC,cAAA,MAAA,CAAKC,UAAWH,EAAYI,MAAO,CAAEC,MAAO,GAAGN,OACxD,CAEM,SAAUO,GAAsBC,MACpCA,IAIA,OACEN,EAAAC,cAAAD,EAAAO,SAAA,KACGD,EAAME,kBAAkBC,KAAI,EAAGX,QAAOC,gBACrCC,EAAAC,cAACJ,GACCC,MAAOA,EACPC,WAAYA,EACZW,IAAKZ,MAKf"}
1
+ {"version":3,"file":"bar-slider-chart-regions.js","sources":["../../../../../../src/components/bar-slider/bar-slider-chart-regions.tsx"],"sourcesContent":[null],"names":["RegionForClassification","value","styleClass","React","createElement","className","style","width","BarSliderChartRegions","model","Fragment","getChartRegions","map","key"],"mappings":"qBAGA,SAASA,GAAwBC,MAC/BA,EAAKC,WACLA,IAKA,OAAOC,EAAAC,cAAA,MAAA,CAAKC,UAAWH,EAAYI,MAAO,CAAEC,MAAO,GAAGN,OACxD,CAEM,SAAUO,GAAsBC,MACpCA,IAIA,OACEN,EAAAC,cAAAD,EAAAO,SAAA,KACGD,EAAME,kBAAkBC,IAAI,EAAGX,QAAOC,gBACrCC,EAAAC,cAACJ,GACCC,MAAOA,EACPC,WAAYA,EACZW,IAAKZ,KAKf"}
@@ -1,2 +1,2 @@
1
- import e from"react";import{ChartLegend as r}from"../chart-legend.js";import{BarSliderChart as a}from"./bar-slider-chart.js";function t({config:t,value:l,ariaLabel:n,markerText:m}){const s=Object.values(t.segments).filter((e=>null!=e.legend)).map((e=>({text:e.legend,className:`${t.name}-legend-key-${e.styleSuffix}`,wrapperClassName:`${t.name}-legend-marker`})));return e.createElement("figure",{className:"nhsuk-u-margin-0"},e.createElement("figcaption",{className:"nhsuk-u-visually-hidden"},n),e.createElement(a,{config:t,value:l,markerText:m}),e.createElement(r,{legendKeys:s,borderWrapper:!1}))}export{t as BarSliderChartFigure};
1
+ import e from"react";import{ChartLegend as r}from"../chart-legend.js";import{BarSliderChart as a}from"./bar-slider-chart.js";function t({config:t,value:l,ariaLabel:n,markerText:m}){const s=Object.values(t.segments).filter(e=>null!=e.legend).map(e=>({text:e.legend,className:`${t.name}-legend-key-${e.styleSuffix}`,wrapperClassName:`${t.name}-legend-marker`}));return e.createElement("figure",{className:"nhsuk-u-margin-0"},e.createElement("figcaption",{className:"nhsuk-u-visually-hidden"},n),e.createElement(a,{config:t,value:l,markerText:m}),e.createElement(r,{legendKeys:s,borderWrapper:!1}))}export{t as BarSliderChartFigure};
2
2
  //# sourceMappingURL=bar-slider-figure-chart.js.map