From 46ae46fd4cbc8873eef72fb48700c45ff696f9e6 Mon Sep 17 00:00:00 2001 From: Mat Johnson Date: Wed, 22 Apr 2026 16:09:05 +0100 Subject: [PATCH 1/4] Remove percentages in favour of numbers --- app/assets/sass/main.scss | 7 ++- .../batches/batch-detail-in-progress.html | 46 ++++++++----------- app/views/batches/batch-detail.html | 31 +++++++------ 3 files changed, 40 insertions(+), 44 deletions(-) diff --git a/app/assets/sass/main.scss b/app/assets/sass/main.scss index a6046b9..76659cd 100755 --- a/app/assets/sass/main.scss +++ b/app/assets/sass/main.scss @@ -40,7 +40,7 @@ tbody { display: flex; width: 100%; - height: 3rem; + //height: 3rem; overflow: hidden; } /* Each row becomes a segment, sized by its proportion of the total */ @@ -50,6 +50,10 @@ justify-content: left; overflow: hidden; } + /* Each row becomes a segment, sized by its proportion of the total */ + tbody td { + padding: 0; + } } .app-chart-bar-segmented-horizontal--legend { @include nhsuk-media-query($from: tablet) { @@ -89,7 +93,6 @@ .app-simple-progress-bar { width: 100%; min-width: 200px; - height: 3rem; &.--thin { height: auto; diff --git a/app/views/batches/batch-detail-in-progress.html b/app/views/batches/batch-detail-in-progress.html index 19064fc..38035d1 100644 --- a/app/views/batches/batch-detail-in-progress.html +++ b/app/views/batches/batch-detail-in-progress.html @@ -38,7 +38,7 @@

Change

- Standard (NTDD) batch imported 1st January 2026 + Imported 1st January 2026 @@ -57,6 +57,7 @@

@@ -101,10 +102,10 @@

Participant breakdown

Standard - + {{ tag({ text: "1970", - classes: "nhsuk-tag--green nhsuk-u-margin-left-2" + classes: "nhsuk-tag--green" }) }} @@ -112,10 +113,10 @@

Participant breakdown

Special Requirements - + {{ tag({ text: "12", - classes: "nhsuk-tag--orange nhsuk-u-margin-left-2" + classes: "nhsuk-tag--orange" }) }} @@ -123,10 +124,10 @@

Participant breakdown

Very High Risk - + {{ tag({ text: "5", - classes: "nhsuk-tag--red nhsuk-u-margin-left-2" + classes: "nhsuk-tag--red" }) }} @@ -201,10 +202,10 @@

Batch progress

-
+
{{ tag({ text: "1970 of 1987 dealt with", - classes: "nhsuk-tag--blue nhsuk-u-margin-left-2" + classes: "nhsuk-tag--blue" }) }}
@@ -218,16 +219,13 @@

Appoint

-
+
{{ tag({ - text: "100% appointed", - classes: "nhsuk-tag--green nhsuk-u-margin-left-2" + text: "1970 of 1970 appointed", + classes: "nhsuk-tag--green" }) }}
-
-

1970 of 1970 appointed

-
@@ -237,16 +235,13 @@

Appoint

-
+
{{ tag({ - text: "0% appointed", - classes: "nhsuk-tag--orange nhsuk-u-margin-left-2" + text: "0 of 12 appointed", + classes: "nhsuk-tag--orange" }) }}
-
-

0 of 12 appointed

-
@@ -257,16 +252,13 @@

Reconci

-
+
{{ tag({ - text: "0% reconciled", - classes: "nhsuk-tag--red nhsuk-u-margin-left-2" + text: "0 of 5 reconciled", + classes: "nhsuk-tag--red" }) }}
-
-

0 of 5 reconciled

-
diff --git a/app/views/batches/batch-detail.html b/app/views/batches/batch-detail.html index e974b23..b2fe6d5 100644 --- a/app/views/batches/batch-detail.html +++ b/app/views/batches/batch-detail.html @@ -38,7 +38,7 @@

Change

- Standard (NTDD) batch imported 1st January 2026 + Imported 1st January 2026
@@ -57,6 +57,7 @@

@@ -101,10 +102,10 @@

Participant breakdown

Standard - + {{ tag({ text: "1970", - classes: "nhsuk-tag--green nhsuk-u-margin-left-2" + classes: "nhsuk-tag--green" }) }} @@ -112,10 +113,10 @@

Participant breakdown

Special Requirements - + {{ tag({ text: "12", - classes: "nhsuk-tag--orange nhsuk-u-margin-left-2" + classes: "nhsuk-tag--orange" }) }} @@ -123,10 +124,10 @@

Participant breakdown

Very High Risk - + {{ tag({ text: "5", - classes: "nhsuk-tag--red nhsuk-u-margin-left-2" + classes: "nhsuk-tag--red" }) }} @@ -201,10 +202,10 @@

Batch progress

-
+
{{ tag({ text: "0 of 1987 dealt with", - classes: "nhsuk-tag--blue nhsuk-u-margin-left-2" + classes: "nhsuk-tag--blue" }) }}
@@ -218,10 +219,10 @@

Appoint

-
+
{{ tag({ text: "0% appointed", - classes: "nhsuk-tag--green nhsuk-u-margin-left-2" + classes: "nhsuk-tag--green" }) }}
@@ -237,10 +238,10 @@

Appoint

-
+
{{ tag({ text: "0% appointed", - classes: "nhsuk-tag--orange nhsuk-u-margin-left-2" + classes: "nhsuk-tag--orange" }) }}
@@ -257,10 +258,10 @@

Reconci

-
+
{{ tag({ text: "0% reconciled", - classes: "nhsuk-tag--red nhsuk-u-margin-left-2" + classes: "nhsuk-tag--red" }) }}
From cbec4efad7c398f33357a91ea6f2447d13ab17f9 Mon Sep 17 00:00:00 2001 From: Mat Johnson Date: Wed, 22 Apr 2026 17:00:12 +0100 Subject: [PATCH 2/4] Fleshing out some real data and finding weaknesses in breakdown graph --- app/assets/sass/main.scss | 2 +- .../batches/batch-detail-in-progress.html | 126 +++++++++++++++--- app/views/batches/batch-detail.html | 41 +++--- app/views/batches/index.html | 38 +++--- 4 files changed, 140 insertions(+), 67 deletions(-) diff --git a/app/assets/sass/main.scss b/app/assets/sass/main.scss index 76659cd..d325c7b 100755 --- a/app/assets/sass/main.scss +++ b/app/assets/sass/main.scss @@ -40,7 +40,7 @@ tbody { display: flex; width: 100%; - //height: 3rem; + min-height: 2rem; overflow: hidden; } /* Each row becomes a segment, sized by its proportion of the total */ diff --git a/app/views/batches/batch-detail-in-progress.html b/app/views/batches/batch-detail-in-progress.html index 38035d1..beb1827 100644 --- a/app/views/batches/batch-detail-in-progress.html +++ b/app/views/batches/batch-detail-in-progress.html @@ -31,14 +31,14 @@
- BDE-NTDD-202601011200 + BDE-NTDD-20260201

- Harrogate Practices Feb-March 2026 Round 13 + Malton Practices Apr-May 26 NTDD RD 13

Change

- Imported 1st January 2026 + Imported 2 February 2026
@@ -48,7 +48,7 @@

- 1987 + 715

total participants @@ -58,8 +58,8 @@

@@ -80,13 +80,13 @@

Participant breakdown

@@ -104,9 +104,10 @@

Participant breakdown

{{ tag({ - text: "1970", + text: "700", classes: "nhsuk-tag--green" }) }} + 700 @@ -115,9 +116,10 @@

Participant breakdown

{{ tag({ - text: "12", + text: "10", classes: "nhsuk-tag--orange" }) }} + 10 @@ -129,23 +131,107 @@

Participant breakdown

text: "5", classes: "nhsuk-tag--red" }) }} + 5 + + +
@@ -202,9 +288,9 @@

Batch progress

-
+
{{ tag({ - text: "1970 of 1987 dealt with", + text: "704 of 715 dealt with", classes: "nhsuk-tag--blue" }) }}
@@ -221,7 +307,7 @@

Appoint
{{ tag({ - text: "1970 of 1970 appointed", + text: "700 of 700 appointed", classes: "nhsuk-tag--green" }) }}
@@ -235,9 +321,9 @@

Appoint

-
+
{{ tag({ - text: "0 of 12 appointed", + text: "4 of 10 appointed", classes: "nhsuk-tag--orange" }) }}
diff --git a/app/views/batches/batch-detail.html b/app/views/batches/batch-detail.html index b2fe6d5..1fd8b62 100644 --- a/app/views/batches/batch-detail.html +++ b/app/views/batches/batch-detail.html @@ -31,14 +31,14 @@
- BDE-NTDD-202601011200 + BDE-NTDD-20260101

Harrogate Practices Feb-March 2026 Round 13

Change

- Imported 1st January 2026 + Imported 1 January 2026
@@ -48,7 +48,7 @@

- 1987 + 610

total participants @@ -80,13 +80,13 @@

Participant breakdown

@@ -104,7 +104,7 @@

Participant breakdown

{{ tag({ - text: "1970", + text: "560", classes: "nhsuk-tag--green" }) }} @@ -115,7 +115,7 @@

Participant breakdown

{{ tag({ - text: "12", + text: "40", classes: "nhsuk-tag--orange" }) }} @@ -126,7 +126,7 @@

Participant breakdown

{{ tag({ - text: "5", + text: "10", classes: "nhsuk-tag--red" }) }} @@ -138,21 +138,21 @@

Participant breakdown

  • - 1970 standard
    + 560 standard
    ready to appoint
  • - 12 special requirements
    + 40 special requirements
    reasonable adjustments etc.
    • @@ -204,7 +204,7 @@

    Batch progress

    {{ tag({ - text: "0 of 1987 dealt with", + text: "0 of 610 dealt with", classes: "nhsuk-tag--blue" }) }}
    @@ -221,14 +221,11 @@

    Appoint
    {{ tag({ - text: "0% appointed", + text: "0 of 560 appointed", classes: "nhsuk-tag--green" }) }}
    -
    -

    0 of 1970 appointed

    -

    @@ -240,14 +237,11 @@

    Appoint
    {{ tag({ - text: "0% appointed", + text: "0 of 40 appointed", classes: "nhsuk-tag--orange" }) }}
    -
    -

    0 of 12 appointed

    -

    @@ -260,14 +254,11 @@

    Reconci
    {{ tag({ - text: "0% reconciled", + text: "0 of 10 reconciled", classes: "nhsuk-tag--red" }) }}
    -
    -

    0 of 5 reconciled

    -

    diff --git a/app/views/batches/index.html b/app/views/batches/index.html index 55ea1e8..0f572a4 100644 --- a/app/views/batches/index.html +++ b/app/views/batches/index.html @@ -34,36 +34,32 @@

    Batches in progress

    - - {% set batch %} - + {% set batch_new %} + Harrogate Practices Feb-March 2026 Round 13
    - BDE-NTDD-202601011200 + BYO-NTDD-20260101     {% endset %} - - {% set progress %} -
    + {% set progress_new %} +
    {{ tag({ - text: "99%", - classes: "nhsuk-tag--blue nhsuk-u-margin-1" + text: "0 of 610", + classes: "nhsuk-tag--blue" }) }}
    {% endset %} - - {% set batch_new %} - - Harrogate Practices Feb-March 2026 Round 13
    - BDE-NTDD-202601011200 + {% set batch %} +     + Malton Practices Apr-May 26 NTDD RD 13
    + BYO-NTDD-20260201     {% endset %} - - {% set progress_new %} -
    + {% set progress %} +
    {{ tag({ - text: "0%", - classes: "nhsuk-tag--blue nhsuk-u-margin-1" + text: "704 of 715", + classes: "nhsuk-tag--blue" }) }}
    {% endset %} @@ -94,7 +90,7 @@

    Batches in progress

    text: "Standard (NTDD)" }, { - text: "1987", + text: "610", format: "numeric" }, { @@ -109,7 +105,7 @@

    Batches in progress

    text: "Standard (NTDD)" }, { - text: "1987", + text: "715", format: "numeric" }, { From a7f2822192e57fadab62737d50f99e4faf4cb1a8 Mon Sep 17 00:00:00 2001 From: Mat Johnson Date: Thu, 23 Apr 2026 10:53:58 +0100 Subject: [PATCH 3/4] Adding a card alternate for breakdown --- app/assets/sass/main.scss | 16 ++ .../batches/batch-detail-in-progress.html | 144 ++++++------------ 2 files changed, 64 insertions(+), 96 deletions(-) diff --git a/app/assets/sass/main.scss b/app/assets/sass/main.scss index d325c7b..f076b0e 100755 --- a/app/assets/sass/main.scss +++ b/app/assets/sass/main.scss @@ -80,6 +80,22 @@ } } +.app-segmented-cards { + .nhsuk-card__content { + display: flex; + gap: 8px; + @include nhsuk-responsive-padding(3); + } + .swatch { + display: inline-block; + width: 2rem; + height: 2rem; + flex-shrink: 0; + margin-right: 6px; + vertical-align: middle; + } +} + .app-batch-overview-sparkline { background-color: #fff; } diff --git a/app/views/batches/batch-detail-in-progress.html b/app/views/batches/batch-detail-in-progress.html index beb1827..fe8a4ee 100644 --- a/app/views/batches/batch-detail-in-progress.html +++ b/app/views/batches/batch-detail-in-progress.html @@ -43,19 +43,18 @@

    -
    -
    -
    -

    - - 715 - -

    - total participants -
    -
    +
    + {% call card({ + clickable: true, + heading: "715", + headingClasses: "nhsuk-u-font-size-36 nhsuk-u-margin-bottom-1" + }) %} +

    + 715 total participants +

    + {% endcall %}
    -
    +
    • Standard (NTDD) batch
    • 8 postal outcodes
      • @@ -137,89 +136,6 @@

      Participant breakdown

      - - -
      • @@ -243,8 +159,44 @@

        Participant breakdown

    - + +
      +
    • + {% call card({ + clickable: true + }) %} + +
      + 700 standard
      + ready to appoint +
      + {% endcall %} +
      • +
    • + {% call card({ + clickable: true + }) %} + +
      + 10 special requirements
      + reasonable adjustments etc. +
      + {% endcall %} +
      • +
    • + {% call card({ + clickable: true + }) %} + +
      + 5 very high risk (VHR)
      + ready to reconcile +
      + {% endcall %} +
      • + +
    From 13fc94aed87943f2dbe4002614615324b7b286fd Mon Sep 17 00:00:00 2001 From: Mat Johnson Date: Thu, 23 Apr 2026 10:59:38 +0100 Subject: [PATCH 4/4] Comment out stacked bar in one visual --- app/assets/sass/main.scss | 1 + app/views/batches/batch-detail-in-progress.html | 4 ++-- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/app/assets/sass/main.scss b/app/assets/sass/main.scss index f076b0e..07c01d7 100755 --- a/app/assets/sass/main.scss +++ b/app/assets/sass/main.scss @@ -80,6 +80,7 @@ } } +// alternate to stacked bar? .app-segmented-cards { .nhsuk-card__content { display: flex; diff --git a/app/views/batches/batch-detail-in-progress.html b/app/views/batches/batch-detail-in-progress.html index fe8a4ee..bf449d4 100644 --- a/app/views/batches/batch-detail-in-progress.html +++ b/app/views/batches/batch-detail-in-progress.html @@ -72,7 +72,7 @@

    Participant breakdown

    - +
    • {% call card({