@ministryofjustice/hmpps-digital-prison-reporting-frontend 3.26.1 → 3.26.2

package/dpr/assets/js/all.mjs

@@ -1537,9 +1537,8 @@ class ChartVisualisation extends DprClientClass {
   setHoverValue({ label, value, legend, ctx }) {
     if (ctx.tooltipDetailsEl) {
       ctx.tooltipDetailsEl.style.display = 'block';
-      ctx.labelElement.innerHTML = `${label}`;
+      ctx.labelElement.innerHTML = `${legend}: ${label}`;
       ctx.valueElement.innerHTML = `${value}`;
-      ctx.legendElement.innerHTML = `${legend}`;
     }
     if (ctx.headlineValuesEl) {
       ctx.headlineValuesEl.style.display = 'none';
@@ -1615,17 +1614,16 @@ class BarChartVisualisation extends ChartVisualisation {
     const ctx = this;
     return {
       callbacks: {
+        title(context) {
+          const { label, dataset } = context[0];
+          const { label: establishmentId } = dataset;
+          return `${establishmentId}: ${label}`
+        },
         label(context) {
           const { label } = context;
           const { data, label: legend } = context.dataset;
-          let value = `${data[context.dataIndex]}${ctx.suffix}`;
-
-          if (!ctx.isPercentage) {
-            value = `${legend}: ${value}`;
-            ctx.setHoverValue({ label, value, legend, ctx });
-          } else {
-            ctx.setHoverValue({ label, value, ctx });
-          }
+          const value = `${data[context.dataIndex]}${ctx.suffix}`;
+          ctx.setHoverValue({ label, value, legend, ctx });
           return value
         },
       },
@@ -1682,6 +1680,7 @@ class DoughnutChartVisualisation extends ChartVisualisation {
 
   initSettings() {
     return {
+      options: this.setOptions(),
       styling: this.setDatasetStyling(),
       datalabels: this.setDataLabels(),
       pluginsOptions: this.setPluginsOptions(),
@@ -1704,6 +1703,13 @@ class DoughnutChartVisualisation extends ChartVisualisation {
     ]
   }
 
+  setOptions() {
+    const cutoutValue = this.chartParams.datasets.length === 1 ? '50%' : '20%';
+    return {
+      cutout: cutoutValue,
+    }
+  }
+
   setPluginsOptions() {
     return {
       legend: {
@@ -1790,6 +1796,11 @@ class DoughnutChartVisualisation extends ChartVisualisation {
     const ctx = this;
     return {
       callbacks: {
+        title(context) {
+          const { label, dataset } = context[0];
+          const { label: establishmentId } = dataset;
+          return `${establishmentId}: ${label}`
+        },
         label(context) {
           const { label, parsed: value, dataset } = context;
           const { label: legend } = dataset;
@@ -1804,7 +1815,7 @@ class DoughnutChartVisualisation extends ChartVisualisation {
             ctx.setHoverValue({ label, value: toolipValue, legend, ctx });
           } else {
             toolipValue = `${toolipValue}`;
-            ctx.setHoverValue({ label, value: toolipValue, ctx });
+            ctx.setHoverValue({ label, value: toolipValue, legend, ctx });
           }
 
           return toolipValue
@@ -1818,13 +1829,18 @@ class DoughnutChartVisualisation extends ChartVisualisation {
       textAlign: 'center',
       color: '#FFF',
       display: (context) => {
-        const value = context.dataset.data[context.dataIndex];
-        const total = context.dataset.data.reduce((a, c) => a + c, 0);
+        const { dataset, dataIndex } = context;
+        const value = dataset.data[dataIndex];
+        const total = dataset.data.reduce((a, c) => a + c, 0);
         const percentage = (value / total) * 100;
         return percentage > 4
       },
-      formatter: (value) => {
-        return `${value}${this.suffix}`
+      formatter: (value, context) => {
+        const { dataset } = context;
+        const label = `${value}${this.suffix}
+${dataset.label}`;
+
+        return label
       },
       labels: {
         title: {

package/dpr/components/chart-card/utils.js

@@ -3,67 +3,114 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const Charts_1 = require("../../types/Charts");
 exports.default = {
     getChartData: ({ definition, metric, }) => {
-        const { id, display: title, description, visualisationType: type, specification } = definition;
-        const unit = specification[1].unit ? specification[1].unit : Charts_1.ChartUnit.NUMBER;
-        const labels = createLabels(metric);
-        const datasets = createDatasets(metric, definition);
-        const table = createTable(metric, definition, unit);
-        const chartCardData = {
+        const { id, display: title, description, specification } = definition;
+        const values = getValues(specification, metric);
+        const chartsValues = getChartsData(values);
+        const chartsData = chartsValues.map((value) => {
+            return createVisualisationData(value);
+        });
+        return {
             id,
             title,
             description,
-            type,
-            unit,
             data: {
-                chart: {
-                    labels,
-                    datasets,
-                },
-                table,
+                chart: chartsData,
+                table: createTable(values),
             },
         };
-        return chartCardData;
     },
 };
-const createLabels = (metric) => {
-    return metric.data.map((d) => {
-        return `${Object.values(d)[0]}`;
+const getChartsData = (values) => {
+    const availableChartTypes = [Charts_1.ChartType.BAR, Charts_1.ChartType.DONUT, Charts_1.ChartType.LINE];
+    const chartsValues = [];
+    availableChartTypes.forEach((chartType) => {
+        const chartData = {
+            type: chartType,
+            datasets: [],
+        };
+        values.forEach((value) => {
+            const chartValues = value.data.filter((valueData) => {
+                var _a;
+                return (_a = valueData.chart) === null || _a === void 0 ? void 0 : _a.includes(chartType);
+            });
+            if (chartValues.length)
+                chartData.datasets.push({ data: chartValues, group: value.group });
+        });
+        if (chartData.datasets.length)
+            chartsValues.push(chartData);
     });
+    return chartsValues;
 };
-const createDatasets = (metric, definition) => {
-    const specification = JSON.parse(JSON.stringify(definition.specification));
-    specification.shift();
-    const datasets = [];
-    specification.forEach((spec) => {
-        const label = spec.display;
-        const data = metric.data.map((m) => {
-            return m[spec.name];
+const getValues = (specification, metric) => {
+    return metric.data.map((d) => {
+        const groupArray = [];
+        let groupValue = '';
+        let groupName = '';
+        Object.entries(d).forEach((attr) => {
+            const specificationData = specification.find((spec) => {
+                return spec.name === attr[0];
+            });
+            if (specificationData.group) {
+                groupName = specificationData.display;
+                groupValue = `${attr[1]}`;
+            }
+            else {
+                groupArray.push({
+                    ...specificationData,
+                    value: attr[1],
+                });
+            }
         });
-        datasets.push({
+        return {
+            ...(groupName.length && { group: { name: groupName, value: groupValue } }),
+            data: groupArray,
+        };
+    });
+};
+const createVisualisationData = (value) => {
+    const labels = value.datasets[0].data.map((d) => {
+        return d.display;
+    });
+    let unit;
+    const datasets = value.datasets.map((d) => {
+        const data = d.data.map((v) => +v.value);
+        unit = d.data[0].unit;
+        const label = d.group ? d.group.value : '';
+        return {
             label,
             data,
             total: data.reduce((acc, val) => acc + val, 0),
-        });
+        };
     });
-    return datasets;
+    const visData = {
+        type: value.type,
+        unit,
+        data: {
+            labels,
+            datasets,
+        },
+    };
+    return visData;
 };
-const createTable = (metric, definition, unit) => {
-    const { specification } = definition;
+const createTable = (values) => {
     const head = [];
-    const suffix = setSuffix(unit);
-    Object.entries(metric.data[0]).forEach((key) => {
-        const name = `${key[0]}`;
-        const spec = specification.find((s) => s.name === name);
-        const text = spec ? spec.display : name;
-        head.push({ text });
-    });
     const rows = [];
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    metric.data.forEach((item) => {
+    // Head
+    if (values[0].group) {
+        head.push({ text: values[0].group.name });
+    }
+    values[0].data.forEach((v) => {
+        head.push({ text: v.display });
+    });
+    // Rows
+    values.forEach((v) => {
         const row = [];
-        Object.entries(item).forEach((v) => {
-            const value = typeof v[1] === 'number' ? `${v[1]}${suffix}` : `${v[1]}`;
-            row.push({ text: value });
+        if (v.group) {
+            row.push({ text: v.group.value });
+        }
+        v.data.forEach((d) => {
+            const suffix = setSuffix(d.unit);
+            row.push({ text: `${d.value}${suffix}` });
         });
         rows.push(row);
     });

package/dpr/components/chart-card/utils.ts

@@ -1,4 +1,16 @@
-import { ChartCardData, ChartUnit, MoJTableHead, MoJTableRow, ChartDataset } from '../../types/Charts'
+import {
+  ChartCardData,
+  ChartUnit,
+  MoJTableHead,
+  MoJTableRow,
+  ChartDataset,
+  ChartType,
+  ChartData,
+  ChartCardValue,
+  ChartsData,
+  ChartValue,
+  ChartGroup,
+} from '../../types/Charts'
 import { MetricsDataResponse, MetricsDefinition, MetricsDefinitionSpecification } from '../../types/Metrics'
 
 export default {
@@ -9,79 +21,126 @@ export default {
     definition: MetricsDefinition
     metric: MetricsDataResponse
   }): ChartCardData => {
-    const { id, display: title, description, visualisationType: type, specification } = definition
-    const unit = specification[1].unit ? specification[1].unit : ChartUnit.NUMBER
-
-    const labels = createLabels(metric)
-    const datasets = createDatasets(metric, definition)
-    const table = createTable(metric, definition, unit)
+    const { id, display: title, description, specification } = definition
+    const values = getValues(specification, metric)
+    const chartsValues = getChartsData(values)
+    const chartsData = chartsValues.map((value: ChartsData) => {
+      return createVisualisationData(value)
+    })
 
-    const chartCardData = {
+    return {
       id,
       title,
       description,
-      type,
-      unit,
       data: {
-        chart: {
-          labels,
-          datasets,
-        },
-        table,
+        chart: chartsData,
+        table: createTable(values),
       },
     }
-
-    return chartCardData
   },
 }
 
-const createLabels = (metric: MetricsDataResponse) => {
-  return metric.data.map((d) => {
-    return `${Object.values(d)[0]}`
+const getChartsData = (values: ChartValue[]) => {
+  const availableChartTypes = [ChartType.BAR, ChartType.DONUT, ChartType.LINE]
+
+  const chartsValues: ChartsData[] = []
+  availableChartTypes.forEach((chartType: ChartType) => {
+    const chartData = {
+      type: chartType,
+      datasets: [] as { data: ChartCardValue[]; group: ChartGroup }[],
+    }
+
+    values.forEach((value: ChartValue) => {
+      const chartValues = value.data.filter((valueData: ChartCardValue) => {
+        return valueData.chart?.includes(chartType)
+      })
+      if (chartValues.length) chartData.datasets.push({ data: chartValues, group: value.group })
+    })
+
+    if (chartData.datasets.length) chartsValues.push(chartData)
   })
+
+  return chartsValues
 }
 
-const createDatasets = (metric: MetricsDataResponse, definition: MetricsDefinition) => {
-  const specification: MetricsDefinitionSpecification[] = JSON.parse(JSON.stringify(definition.specification))
-  specification.shift()
+const getValues = (specification: MetricsDefinitionSpecification[], metric: MetricsDataResponse): ChartValue[] => {
+  return metric.data.map((d) => {
+    const groupArray: ChartCardValue[] = []
+    let groupValue = ''
+    let groupName = ''
 
-  const datasets: ChartDataset[] = []
-  specification.forEach((spec) => {
-    const label = spec.display
-    const data = metric.data.map((m) => {
-      return m[spec.name] as number
+    Object.entries(d).forEach((attr) => {
+      const specificationData = specification.find((spec: MetricsDefinitionSpecification) => {
+        return spec.name === attr[0]
+      })
+      if (specificationData.group) {
+        groupName = specificationData.display
+        groupValue = `${attr[1]}`
+      } else {
+        groupArray.push({
+          ...specificationData,
+          value: attr[1],
+        })
+      }
     })
-    datasets.push({
+
+    return {
+      ...(groupName.length && { group: { name: groupName, value: groupValue } }),
+      data: groupArray,
+    }
+  })
+}
+
+const createVisualisationData = (value: ChartsData): ChartData => {
+  const labels: string[] = value.datasets[0].data.map((d: ChartCardValue) => {
+    return d.display
+  })
+
+  let unit
+  const datasets: ChartDataset[] = value.datasets.map((d) => {
+    const data = d.data.map((v) => +v.value)
+    unit = d.data[0].unit
+    const label = d.group ? d.group.value : ''
+    return {
       label,
       data,
       total: data.reduce((acc: number, val: number) => acc + val, 0),
-    })
+    }
   })
 
-  return datasets
+  const visData: ChartData = {
+    type: value.type,
+    unit,
+    data: {
+      labels,
+      datasets,
+    },
+  }
+
+  return visData
 }
 
-const createTable = (metric: MetricsDataResponse, definition: MetricsDefinition, unit: ChartUnit) => {
-  const { specification } = definition
+const createTable = (values: ChartValue[]) => {
   const head: MoJTableHead[] = []
-  const suffix = setSuffix(unit)
+  const rows: MoJTableRow[][] = []
 
-  Object.entries(metric.data[0]).forEach((key) => {
-    const name = `${key[0]}`
-    const spec = specification.find((s) => s.name === name)
-    const text = spec ? spec.display : name
-    head.push({ text })
+  // Head
+  if (values[0].group) {
+    head.push({ text: values[0].group.name })
+  }
+  values[0].data.forEach((v) => {
+    head.push({ text: v.display })
   })
 
-  const rows: MoJTableRow[][] = []
-
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  metric.data.forEach((item: any) => {
+  // Rows
+  values.forEach((v) => {
     const row: MoJTableRow[] = []
-
-    Object.entries(item).forEach((v) => {
-      const value = typeof v[1] === 'number' ? `${v[1]}${suffix}` : `${v[1]}`
-      row.push({ text: value })
+    if (v.group) {
+      row.push({ text: v.group.value })
+    }
+    v.data.forEach((d) => {
+      const suffix = setSuffix(d.unit)
+      row.push({ text: `${d.value}${suffix}` })
     })
     rows.push(row)
   })

package/dpr/components/chart-card/view.njk

@@ -7,11 +7,9 @@
 {% macro dprChartCard(chart) %}
   {% set id = chart.id %}
   {% set title = chart.title %}
-  {% set type = chart.type %}
   {% set data = chart.data %}
   {% set description = chart.description %}
   {% set details = chart.details %}
-  {% set unit = chart.unit %}
   
   <div class="dpr-chart-card" id="{{ id }}-chart-card">
     <h2 class="govuk-heading-m">{{ title }}</h2>
@@ -22,7 +20,7 @@
 
     <div class="chart-tabs-container">
       
-      {{ dprChartTabs(id, type, data, unit) }}
+      {{ dprChartTabs(id, data, unit) }}
 
       <div class="chart-tabs-details">
         {% set headlines = details.headlines %}
@@ -31,7 +29,6 @@
         <div id="dpr-{{ id }}-tooltip-details" class="chart-tabs-details__item chart-tabs-details__item--tooltip">
           <h3 id="dpr-{{ id }}-label" class="govuk-heading-s dpr-chart-details-label">init</h3>
           <p id="dpr-{{ id }}-value" class="govuk-body dpr-chart-details-value">init</p>
-          <p id="dpr-{{ id }}-legend" class="govuk-body-s dpr-chart-details-legend">init</p>
         </div>
 
         <div id="dpr-{{ id }}-headline-values" class="chart-tabs-details__item chart-tabs-details__item--headlines">

package/dpr/components/chart-tabs/view.njk

@@ -2,19 +2,24 @@
 {% from "govuk/components/tabs/macro.njk" import govukTabs %}
 {% from "govuk/components/table/macro.njk" import govukTable %}
 
-{% macro dprChartTabs(id, type, data, unit) %}
+{% macro dprChartTabs(id, data, unit) %}
   {% set chartData = data.chart %}
   {% set tableData = data.table %}
 
   {% set tabItems = [] %}
-  {% for t in type %}
+  {% for chart in chartData %}
+
+    {% set type = chart.type %}
+    {% set data = chart.data %}
+    {% set unit = chart.unit %}
+
     {% set chartHtml %}
-      {{ dprChart(id, t, chartData, unit) }}
+      {{ dprChart(id, type, data, unit) }}
     {% endset -%}
     
     {% set tabContent = {
-      label: t | capitalize,
-      id: id + "_" + t + "_tab",
+      label: type | capitalize,
+      id: id + "_" + type + "_tab",
       panel: {
         html: chartHtml
       }

package/dpr/types/Charts.ts

@@ -1,22 +1,25 @@
 interface Chart {
   id: string
-  type: ChartType
-  unit: ChartUnit
   data: {
-    chart: ChartData
+    chart: ChartData[]
   }
 }
 
+export interface ChartData {
+  type: ChartType
+  unit: ChartUnit
+  data: ChartDataValues
+}
+
 export enum ChartUnit {
   NUMBER = 'number',
   PERCENTAGE = 'percentage',
 }
 
 interface ChartTabs extends Omit<Chart, 'type'> {
-  type: ChartType[]
   data: {
-    chart: ChartData
-    table: MoJTable
+    chart: ChartData[]
+    table?: MoJTable
   }
 }
 
@@ -34,7 +37,7 @@ interface ChartCardDetailsItem {
   value: string | number
 }
 
-interface ChartData {
+export interface ChartDataValues {
   labels: string[]
   datasets: ChartDataset[]
   axis?: 'x' | 'y'
@@ -66,3 +69,26 @@ export interface MoJTableHead {
   text?: string
   html?: string
 }
+
+export interface ChartCardValue {
+  value: string | number
+  name: string
+  display: string
+  unit?: ChartUnit
+  chart?: ChartType[]
+}
+
+export interface ChartValue {
+  group?: ChartGroup
+  data: ChartCardValue[]
+}
+
+export interface ChartGroup {
+  name: string
+  value: string
+}
+
+export interface ChartsData {
+  type: ChartType
+  datasets: { data: ChartCardValue[]; group: ChartGroup }[]
+}

package/dpr/types/Dashboards.ts

@@ -1,5 +1,3 @@
-import { ChartType } from './Charts'
-
 export interface DashboardDefinition {
   id: string
   name: string
@@ -9,5 +7,4 @@ export interface DashboardDefinition {
 
 export interface DashboardMetricDefinition {
   id: string
-  visualisationType: ChartType[]
 }

package/dpr/types/Metrics.ts

@@ -1,12 +1,10 @@
 import { ChartType, ChartUnit } from './Charts'
-import Dict = NodeJS.Dict
 
 export interface MetricsDefinition {
   id: string
   name: string
   display: string
   description: string
-  visualisationType: ChartType[]
   specification: MetricsDefinitionSpecification[]
 }
 
@@ -14,10 +12,12 @@ export interface MetricsDefinitionSpecification {
   name: string
   display: string
   unit?: ChartUnit
+  group?: true
+  chart?: ChartType[]
 }
 
 export interface MetricsDataResponse {
   id: string
-  data: Array<Dict<string | number>>
+  data: { [key: string]: number | string }[]
   updated: string
 }

package/dpr/utils/dashboardUtils.js

@@ -11,10 +11,8 @@ exports.default = {
             const metrics = JSON.parse(req.body.metrics);
             const { title, description } = req.body;
             const metricsData = await Promise.all(metrics.map(async (metric) => {
-                const { visualisationType: type } = metric;
                 return metricsUtils_1.default.getMetricData({
                     id: metric.id,
-                    type,
                     req,
                     res,
                     services,

package/dpr/utils/dashboardUtils.ts

@@ -11,10 +11,8 @@ export default {
       const { title, description } = req.body
       const metricsData = await Promise.all(
         metrics.map(async (metric: DashboardMetricDefinition) => {
-          const { visualisationType: type } = metric
           return MetricsUtils.getMetricData({
             id: metric.id,
-            type,
             req,
             res,
             services,

package/dpr/utils/metricsUtils.js

@@ -1,14 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = {
-    getMetricData: async ({ id, type, req, res, services, next, }) => {
+    getMetricData: async ({ id, req, res, services, next, }) => {
         var _a;
         const token = ((_a = res.locals.user) === null || _a === void 0 ? void 0 : _a.token) ? res.locals.user.token : 'token';
         const { dpdId } = req.params;
         const { dataProductDefinitionsPath } = req.query;
         const definition = await services.metricService.getDefinition(token, id, dpdId, dataProductDefinitionsPath);
-        if (type)
-            definition.visualisationType = type;
         const metric = await services.metricService.getMetricData(token, id, dpdId);
         return {
             definition,

package/dpr/utils/metricsUtils.ts

@@ -1,16 +1,14 @@
 import { AsyncReportUtilsParams } from '../types/AsyncReportUtils'
-import { ChartType } from '../types/Charts'
 import { MetricsDataResponse, MetricsDefinition } from '../types/Metrics'
 
 export default {
   getMetricData: async ({
     id,
-    type,
     req,
     res,
     services,
     next,
-  }: { id: string; type: ChartType[] } & AsyncReportUtilsParams): Promise<{
+  }: { id: string } & AsyncReportUtilsParams): Promise<{
     definition: MetricsDefinition
     metric: MetricsDataResponse
   }> => {
@@ -19,7 +17,6 @@ export default {
     const { dataProductDefinitionsPath } = req.query
 
     const definition = await services.metricService.getDefinition(token, id, dpdId, <string>dataProductDefinitionsPath)
-    if (type) definition.visualisationType = type
 
     const metric = await services.metricService.getMetricData(token, id, dpdId)
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ministryofjustice/hmpps-digital-prison-reporting-frontend",
   "description": "The Digital Prison Reporting Frontend contains templates and code to help display data effectively in UI applications.",
-  "version": "3.26.1",
+  "version": "3.26.2",
   "main": "dpr/assets/js/all.mjs",
   "sass": "dpr/all.scss",
   "engines": {