MJMA Reporting (#5)

* ESWE-1100_prepare_project_for_development Added DPS header and footer

* ESWE-1100_prepare_project_for_development Updated dependencies

* ESWE-1100_prepare_project_for_development Added common utilities, config entries

* ESWE-1100_prepare_project_for_development added blank pages

* ESWE-981_mjma_reporting_filter Added filter block and date pickers

* ESWE-981_mjma_reporting_filter Added date pass through and validation

* ESWE-981_mjma_reporting_filter Added code for mjma summary

* ESWE-981_mjma_reporting_filter Added code for applications totals table

* ESWE-981_mjma_reporting_filter Added code for latest applications by stages

* ESWE-981_mjma_reporting_filter Fixed ordering bug, added missing unit tests

* ESWE-981_mjma_reporting_filter Added wiring for integration tests

* ESWE-981_mjma_reporting_filter Completed cypress tests

assets/js/index.js

@@ -3,3 +3,19 @@ import * as mojFrontend from '@ministryofjustice/frontend'
 
 govukFrontend.initAll()
 mojFrontend.initAll()
+
+document.addEventListener('DOMContentLoaded', function pageLoaded() {
+  // Clear anchors from the URL on page loads
+  if (window.location.hash) {
+    history.replaceState(null, '', window.location.pathname)
+  }
+
+  // Set width for elements with the class 'app-chart-table__percentage-cell-bar'
+  const percentageCellBars = document.querySelectorAll('.app-chart-table__percentage-cell-bar')
+  percentageCellBars.forEach(element => {
+    const styleWidth = element.getAttribute('data-style-width')
+    if (styleWidth) {
+      element.style.width = styleWidth
+    }
+  })
+})

assets/scss/application.scss

@@ -8,4 +8,40 @@ $govuk-page-width: $moj-page-width;
 @import "@ministryofjustice/frontend/moj/all";
 
 @import './components/header-bar';
+@import './components/_external-header-bar';
+@import './components/_footer';
+@import './components/chart-colours';
+@import './components/chart-table';
+@import './components/chart-table-bars';
 @import './local';
+
+.filter-box {
+  background-color: govuk-colour("light-grey");
+  padding: 25px 10px 25px 10px;
+}
+
+.filter-box-width-override-60 {
+  width: 60%;
+  float: left;
+}
+
+.filter-box-width-override-20 {
+  width: 20%;
+  float: left;
+}
+
+.reporting-stats h4 {
+  margin-bottom: 5px;
+}
+
+.reporting-stats p {
+  margin-bottom: 10px;
+}
+
+.reporting-big-number {
+  font-weight: 300;
+  font-size: 36px;
+  margin-bottom: 10px !important
+
+}
+

assets/scss/components/_chart-colours.scss

@@ -0,0 +1,35 @@
+.app-chart-colour--light-blue {
+  background: govuk-colour("light-blue");
+}
+
+.app-chart-colour--dark-blue {
+  background: govuk-colour("dark-blue");
+}
+
+.app-chart-colour--turquoise {
+  background: govuk-colour("turquoise");
+}
+
+.app-chart-colour--yellow {
+  background: govuk-colour("yellow");
+}
+
+.app-chart-colour--pink {
+  background: govuk-colour("pink");
+}
+
+.app-chart-colour--mid-grey {
+  background: govuk-colour("mid-grey");
+}
+
+.app-chart-colour--orange {
+  background: govuk-colour("orange"); // not expected to be used: presence in chart indicates unforeseen column set
+}
+
+.app-chart-colour--light-green {
+  background: govuk-colour("light-green"); // not expected to be used: presence in chart indicates unforeseen column set
+}
+
+.app-chart-colour--red {
+  background: govuk-colour("red"); // not expected to be used: colour palette has ended
+}

assets/scss/components/_chart-table-bars.scss

@@ -0,0 +1,153 @@
+/** Styles for horizontal-stacked-bar-type analytics chart */
+
+// table containing horizontal stacked bar chart
+.app-chart-table--bars {
+  th, td {
+    text-align: right;
+
+    // column containing chart bars
+    &:last-child {
+      min-width: 38%;
+    }
+  }
+}
+
+// tables packing rows more closely together; 1 line of text per row
+.app-chart-table--tight-bars {
+  tbody tr:not(:last-child) td {
+    padding-bottom: 0;
+  }
+}
+
+@mixin chart-table-columns($bars-width, $column-count, $first-column-width: null) {
+  th, td {
+    @if $first-column-width {
+      // normal column width when first column is wider
+      width: calc((100% - $bars-width - $first-column-width) / ($column-count - 1));
+
+      // column containing row label (e.g. location or protected characteristic)
+      &:first-child {
+        width: $first-column-width;
+      }
+    } @else {
+      // normal column width
+      width: calc((100% - $bars-width) / $column-count);
+    }
+
+    // column containing chart bars
+    &:last-child {
+      width: $bars-width;
+    }
+  }
+}
+
+.app-chart-table--bars-with-2-columns {
+  @include chart-table-columns(64%, 2);
+
+  &.app-chart-table--bars-wide-label, &.app-chart-table--bars-extra-wide-label {
+    @include chart-table-columns(50%, 2, 25%);
+  }
+}
+
+.app-chart-table--bars-with-3-columns {
+  @include chart-table-columns(61%, 3);
+
+  &.app-chart-table--bars-wide-label {
+    @include chart-table-columns(44%, 3, 22%);
+  }
+
+  &.app-chart-table--bars-extra-wide-label {
+    @include chart-table-columns(39%, 3, 41%);
+  }
+}
+
+.app-chart-table--bars-with-4-columns {
+  @include chart-table-columns(52%, 4);
+
+  &.app-chart-table--bars-wide-label {
+    @include chart-table-columns(40%, 4, 21%);
+  }
+
+  &.app-chart-table--bars-extra-wide-label {
+    @include chart-table-columns(42%, 4, 28%);
+  }
+}
+
+.app-chart-table--bars-with-5-columns {
+  @include chart-table-columns(50%, 5);
+
+  &.app-chart-table--bars-wide-label {
+    @include chart-table-columns(39%, 5, 21%);
+  }
+
+  &.app-chart-table--bars-extra-wide-label {
+    @include chart-table-columns(39%, 5, 21%);
+  }
+}
+
+// cell containing bars
+td.app-chart-table__percentage-cell {
+  position: relative;
+  padding-right: 0;
+  border-left: 1px solid $govuk-border-colour;
+  border-right: 1px solid $govuk-border-colour;
+}
+
+// bars forming the chart; stackable
+.app-chart-table__percentage-cell-bar {
+  position: relative;
+  float: left;
+  width: 0;
+  color: #fff;
+
+  .app-chart-table--tight-bars & {
+    padding-right: 5px;
+    padding-top: 5px;
+    padding-bottom: 5px;
+  }
+}
+
+// vertical 50% gridline
+.app-chart-table__axis-midpoint {
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 50%;
+  height: 100%;
+  border-left: 1px solid $govuk-border-colour;
+}
+
+// container for horizontal axis values
+td.app-chart-table__axis-values {
+  position: relative;
+  border-left: 1px solid $govuk-border-colour;
+  border-right: 1px solid $govuk-border-colour;
+}
+
+// values in horizontal axis
+.app-chart-table__axis-value {
+  display: block;
+  position: absolute;
+  min-width: 50px;
+  text-align: center;
+  top: 0;
+  padding: 0;
+  font-weight: bold;
+  @include govuk-font($size: 16);
+}
+
+.app-chart-table__axis-value--min {
+  top: 1.5em;
+  left: -25px
+}
+
+.app-chart-table__axis-value--mid {
+  top: 1.5em;
+  left: 50%;
+  margin-left: -25px
+}
+
+.app-chart-table__axis-value--max {
+  top: 1.5em;
+  right: -25px
+}

assets/scss/components/_chart-table.scss

@@ -0,0 +1,55 @@
+/** Base styles for analytics charts */
+
+$chart-cell-pading: govuk-spacing(2);
+
+// chart container that allows horizontal scrolling when the contents are too wide for the screen
+.app-chart-container {
+  margin-top: govuk-spacing(4);
+  overflow-x: scroll;
+}
+
+// base chart-containing table styles
+.app-chart-table {
+  margin: govuk-spacing(4) 0 govuk-spacing(6);
+  width: 100%;
+  border-collapse: collapse;
+  border-spacing: 0;
+  @include govuk-font($size: 16);
+  @include govuk-text-colour;
+
+  tr:first-child td.app-chart-table__label-cell {
+    padding-top: govuk-spacing(5);
+  }
+
+  td.app-chart-table__label-cell {
+    text-wrap: nowrap;
+    padding-top: govuk-spacing(3);
+    font-size: 1.1rem;
+    line-height: 1.25;
+  }
+
+  tr:first-child td {
+    padding-top: govuk-spacing(4)
+  }
+
+  th, td {
+    padding: $chart-cell-pading $chart-cell-pading $chart-cell-pading 0;
+    vertical-align: top;
+    text-align: left;
+  }
+
+  th {
+    font-weight: bold;
+  }
+
+  @media print {
+    a {
+      text-decoration: none;
+      color: $govuk-print-text-colour;
+
+      &:after {
+        display: none;
+      }
+    }
+  }
+}