@ministryofjustice/hmpps-digital-prison-reporting-frontend 4.14.2 → 4.15.1

package/dpr/all.mjs

@@ -48,6 +48,7 @@ import RecentlyViewedList from './components/user-reports/viewed/clientClass.mjs
 import BarChartVisualisation from './components/_charts/chart/bar/clientClass.mjs'
 import DoughnutChartVisualisation from './components/_charts/chart/doughnut/clientClass.mjs'
 import LineChartVisualisation from './components/_charts/chart/line/clientClass.mjs'
+import MatrixChartVisualisation from './components/_charts/chart/heatmap/clientClass.mjs'
 
 // Dashboards
 import ScoreCard from './components/_dashboards/scorecard/clientClass.mjs'
@@ -86,6 +87,7 @@ function initAll() {
     BarChartVisualisation,
     DoughnutChartVisualisation,
     LineChartVisualisation,
+    MatrixChartVisualisation,
     ScoreCard,
     ReportActions,
     DownloadMessage,

package/dpr/all.scss

@@ -1883,6 +1883,10 @@ ul.dpr-card-group__item__filters-list {
   height: 400px;
 }
 
+.dpr-matrix-chart {
+  height: 700px;
+}
+
 .dpr-canvas-wrapper {
   height: 100%;
 }

package/dpr/components/_catalogue/catalogue-list/utils.test.ts

@@ -29,7 +29,7 @@ describe('CatalogueUtils', () => {
       const reportsTableData = await CatalogueUtils.getReportsList(res, services)
 
       expect(reportsTableData.head.length).toEqual(4)
-      expect(reportsTableData.rows.length).toEqual(69)
+      expect(reportsTableData.rows.length).toEqual(70)
     })
   })
 })

package/dpr/components/_charts/chart/clientClass.mjs

@@ -1,6 +1,7 @@
 /* eslint-disable class-methods-use-this */
 import Chart from 'chart.js/auto'
 import ChartDataLabels from 'chartjs-plugin-datalabels'
+import { MatrixController, MatrixElement } from 'chartjs-chart-matrix'
 
 import { DprClientClass } from '../../../DprClientClass.mjs'
 
@@ -18,7 +19,6 @@ class ChartVisualisation extends DprClientClass {
     this.legend = this.getElement().querySelector(`#js-legend-${this.id}`)
 
     // ChartCard elements
-    
     this.tooltipDetailsEl = document.getElementById(`dpr-${this.id}-tooltip-details`)
     this.headlineValuesEl = document.getElementById(`dpr-${this.id}-headline-values`)
     this.labelElement = document.getElementById(`dpr-${this.id}-label`)
@@ -47,10 +47,11 @@ class ChartVisualisation extends DprClientClass {
 
   initChart() {
     Chart.defaults.font.family = 'GDS Transport'
-    Chart.register(ChartDataLabels)
     Chart.defaults.font.size = 12
-
+    Chart.register(ChartDataLabels)
+    Chart.register(MatrixController, MatrixElement)
     this.chart = new Chart(this.chartContext, this.chartData)
+
     this.initChartEvents()
   }
 

package/dpr/components/_charts/chart/heatmap/Heatmap.js

@@ -0,0 +1,2 @@
+var k=Object.create;var m=Object.defineProperty;var C=Object.getOwnPropertyDescriptor;var v=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var M=(o,t)=>{for(var i in t)m(o,i,{get:t[i],enumerable:!0})},d=(o,t,i,e)=>{if(t&&typeof t=="object"||typeof t=="function")for(let s of v(t))!g.call(o,s)&&s!==i&&m(o,s,{get:()=>t[s],enumerable:!(e=C(t,s))||e.enumerable});return o};var b=(o,t,i)=>(i=o!=null?k(x(o)):{},d(t||!o||!o.__esModule?m(i,"default",{value:o,enumerable:!0}):i,o)),B=o=>d(m({},"__esModule",{value:!0}),o);var R={};M(R,{HeatmapChart:()=>p,default:()=>T});module.exports=B(R);var u=b(require("dayjs")),D=require("with-alpha-hex"),f=require("../../../_dashboards/dashboard/types"),y=b(require("../../../../utils/datasetHelper"));class p{constructor(t,i,e){this.baseColour="#1d70b8";this.ragColours=["#00703c","#ffdd00","#d4351c"];this.buckets=[];this.data=[];this.dayDateFormat="DD/MM/YYYY";this.hasRag=!1;this.options={};this.initFromResponseData=t=>{this.hasRag=t[0][this.valueKey].rag!==void 0,this.responseData=t};this.initFromDefinition=t=>{this.definition=t,this.columns=t.columns,this.unit=this.columns.measures[0].unit?this.columns.measures[0].unit:void 0,this.type=this.definition.type.split("-")[0],this.options=t.options,this.baseColour=this.options.baseColour||this.baseColour,this.valueKey=this.columns.measures[1].id,this.label=this.columns.measures[1].display,this.onlyBucketColoursDefined=this.options?.buckets?.every(i=>!i.max&&!i.min&&i.hexColour!==void 0)};this.initBuckets=()=>{const{buckets:t}=this.options;this.setBucketCount(),this.initBucketColours(),t?this.onlyBucketColoursDefined?this.initAutomaticThresholdBucket():this.initCustomThresholdBuckets():this.hasRag||this.initAutomaticThresholdBucket()};this.initCustomThresholdBuckets=()=>{this.buckets=this.options.buckets.map((t,i)=>({...this.buckets[i],...t}))};this.initAutomaticThresholdBucket=()=>{const{min:t,max:i,bucketSize:e}=this.setAutomaticThresholdSize();let s=0;this.buckets=this.buckets.map((a,r)=>{let n=t;return r!==0&&(n=s+1),s=e*(r+1),r===this.buckets.length-1&&(s=i),{hexColour:this.options?.buckets?this.options.buckets[r]?.hexColour:a.hexColour,min:n,max:s}})};this.initBucketColours=()=>{const{useRagColours:t}=this.options;if(t&&this.bucketCount===3)this.buckets=Array.from(new Array(this.bucketCount)).map((i,e)=>({hexColour:this.ragColours[e]}));else{const i=1/this.bucketCount;this.buckets=Array.from(new Array(this.bucketCount)).map((e,s)=>{const a=i*(s+1);return{hexColour:(0,D.withAlphaHex)(this.baseColour,a)}})}};this.setAutomaticThresholdSize=()=>{const t=this.responseData.map(a=>Number(a[this.valueKey].raw)),i=Math.min(...t),e=Math.max(...t),s=Math.ceil((e-i)/this.bucketCount);return{min:i,max:e,bucketSize:s}};this.setBucketCount=()=>{const{buckets:t}=this.options;this.hasRag?this.bucketCount=Math.max(...this.responseData.map(i=>i[this.valueKey].rag))+1:t?this.bucketCount=t.length:this.bucketCount=3};this.validateDefinition=()=>{const{id:t,columns:i,type:e}=this.definition,s=[];if(i.measures.length!==2?s.push(`Measures should only have 2 columns defined. Only found ${i.measures.length}`):e===f.DashboardVisualisationType.MATRIX_TIMESERIES&&i.measures[0].id!=="ts"&&s.push(`measure at index 0 has incorrect ID. Expected ID to be "ts". Found "${i.measures[0].id}"`),s.length){const a=`Validation: Visualisaton definition: ID: ${t}, type: ${e}, errors: ${s.join(",")}`;throw new Error(a)}};this.initTimeseriesData=()=>{const t=y.default.groupRowsByTimestamp(this.responseData);this.data=t.map(i=>{const{raw:e,rag:s}=i[0][this.valueKey],a=i[0].ts.raw,r=Number(e),n=s!==void 0?Number(i[0][this.valueKey].rag):void 0;let h,l;switch(this.granularity){case"hourly":break;case"weekly":h=(0,u.default)(a,this.dayDateFormat).format("ddd"),l=(0,u.default)(a,this.dayDateFormat).week();break;case"daily":h=(0,u.default)(a,this.dayDateFormat).format("MMM YY"),l=(0,u.default)(a,this.dayDateFormat).format("D");break;case"monthly":{const c=a.split(" ");h=c[1],l=c[0]}break;case"annually":h="year",l=a;break;default:h=(0,u.default)(a,this.dayDateFormat).format("MMM YY"),l=(0,u.default)(a,this.dayDateFormat).format("D");break}return{y:l,x:h,v:r,r:n}})};this.binDataIntoBuckets=()=>{this.data=this.data.map(t=>{const{v:i,r:e}=t;let s;return e!==void 0?s=this.buckets[e].hexColour:this.buckets.forEach(a=>{const{min:r,max:n}=a;!r&&n&&i<=n&&(s=a.hexColour),r&&i>=a.min&&n&&i<=a.max&&(s=a.hexColour),r&&!n&&i>=r&&(s=a.hexColour)}),{...t,c:s}})};this.build=()=>(this.validateDefinition(),this.initTimeseriesData(),this.binDataIntoBuckets(),{type:this.type,unit:this.unit,timeseries:!0,data:{datasets:[{label:this.label,data:this.data}]}});this.granularity=i,this.initFromDefinition(e),this.initFromResponseData(t),this.initBuckets()}}var T=p;0&&(module.exports={HeatmapChart});
+//# sourceMappingURL=Heatmap.js.map

package/dpr/components/_charts/chart/heatmap/Heatmap.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/dpr/components/_charts/chart/heatmap/Heatmap.ts"],
+  "sourcesContent": ["/* eslint-disable prefer-destructuring */\nimport dayjs from 'dayjs'\nimport { withAlphaHex } from 'with-alpha-hex'\nimport { Granularity } from '../../../_inputs/granular-date-range/types'\nimport { DashboardDataResponse } from '../../../../types/Metrics'\nimport {\n  DashboardVisualisation,\n  DashboardVisualisationColumns,\n  DashboardVisualisationType,\n  MatrixDashboardVisualisationBucket,\n  MatrixDashboardVisualisationOptions,\n} from '../../../_dashboards/dashboard/types'\nimport { ChartData, ChartType, MatrixChartData, UnitType } from '../../../../types/Charts'\nimport DatasetHelper from '../../../../utils/datasetHelper'\n\nclass HeatmapChart {\n  private baseColour = '#1d70b8'\n\n  private ragColours: string[] = ['#00703c', '#ffdd00', '#d4351c']\n\n  private buckets: MatrixDashboardVisualisationBucket[] = []\n\n  private bucketCount: number\n\n  private onlyBucketColoursDefined: boolean\n\n  private granularity: Granularity\n\n  private responseData: DashboardDataResponse[]\n\n  private data: MatrixChartData[] = []\n\n  private definition: DashboardVisualisation\n\n  private columns: DashboardVisualisationColumns\n\n  private unit: UnitType\n\n  private type: ChartType\n\n  private dayDateFormat = 'DD/MM/YYYY'\n\n  private hasRag = false\n\n  private valueKey: string\n\n  private options: MatrixDashboardVisualisationOptions = {}\n\n  private label: string\n\n  constructor(responseData: DashboardDataResponse[], granularity: Granularity, definition: DashboardVisualisation) {\n    this.granularity = granularity\n    this.initFromDefinition(definition)\n    this.initFromResponseData(responseData)\n    this.initBuckets()\n  }\n\n  private initFromResponseData = (responseData: DashboardDataResponse[]) => {\n    this.hasRag = responseData[0][this.valueKey].rag !== undefined\n    this.responseData = responseData\n  }\n\n  private initFromDefinition = (definition: DashboardVisualisation) => {\n    this.definition = definition\n    this.columns = definition.columns\n    this.unit = this.columns.measures[0].unit ? this.columns.measures[0].unit : undefined\n    this.type = this.definition.type.split('-')[0] as ChartType\n\n    this.options = <MatrixDashboardVisualisationOptions>definition.options\n    this.baseColour = this.options.baseColour || this.baseColour\n    this.valueKey = this.columns.measures[1].id\n    this.label = this.columns.measures[1].display\n    this.onlyBucketColoursDefined = this.options?.buckets?.every(\n      (bucket) => !bucket.max && !bucket.min && bucket.hexColour !== undefined,\n    )\n  }\n\n  private initBuckets = () => {\n    const { buckets } = this.options\n    this.setBucketCount()\n    this.initBucketColours()\n    if (buckets) {\n      if (this.onlyBucketColoursDefined) {\n        this.initAutomaticThresholdBucket()\n      } else {\n        this.initCustomThresholdBuckets()\n      }\n    } else if (!this.hasRag) this.initAutomaticThresholdBucket()\n  }\n\n  private initCustomThresholdBuckets = () => {\n    this.buckets = this.options.buckets.map((bucket, i) => {\n      return {\n        ...this.buckets[i],\n        ...bucket,\n      }\n    })\n  }\n\n  /**\n   * Initialises the bucket thresholds by defining the range between the min and max\n   * and dividing into 3 equal parts\n   */\n  private initAutomaticThresholdBucket = () => {\n    const { min, max, bucketSize } = this.setAutomaticThresholdSize()\n    let maxValue = 0\n    this.buckets = this.buckets.map((bucket, i) => {\n      let minValue = min\n      if (i !== 0) minValue = maxValue + 1\n      maxValue = bucketSize * (i + 1)\n      if (i === this.buckets.length - 1) maxValue = max\n\n      return {\n        hexColour: this.options?.buckets ? this.options.buckets[i]?.hexColour : bucket.hexColour,\n        min: minValue,\n        max: maxValue,\n      }\n    })\n  }\n\n  private initBucketColours = () => {\n    const { useRagColours } = this.options\n    if (useRagColours && this.bucketCount === 3) {\n      this.buckets = Array.from(new Array(this.bucketCount)).map((d, i) => {\n        return {\n          hexColour: this.ragColours[i],\n        }\n      })\n    } else {\n      const alphaDivision = 1 / this.bucketCount\n      this.buckets = Array.from(new Array(this.bucketCount)).map((d, i) => {\n        const division = alphaDivision * (i + 1)\n        return {\n          hexColour: withAlphaHex(this.baseColour, division),\n        }\n      })\n    }\n  }\n\n  private setAutomaticThresholdSize = () => {\n    const values = this.responseData.map((resData) => Number(resData[this.valueKey].raw))\n    const min = Math.min(...values)\n    const max = Math.max(...values)\n    const bucketSize = Math.ceil((max - min) / this.bucketCount)\n\n    return {\n      min,\n      max,\n      bucketSize,\n    }\n  }\n\n  private setBucketCount = () => {\n    const { buckets } = this.options\n    if (this.hasRag) {\n      this.bucketCount =\n        Math.max(...this.responseData.map((resData: DashboardDataResponse) => resData[this.valueKey].rag)) + 1\n    } else if (buckets) {\n      this.bucketCount = buckets.length\n    } else {\n      this.bucketCount = 3\n    }\n  }\n\n  private validateDefinition = () => {\n    const { id, columns, type } = this.definition\n    const errors = []\n\n    // Validate measures\n    if (columns.measures.length !== 2) {\n      errors.push(`Measures should only have 2 columns defined. Only found ${columns.measures.length}`)\n    } else if (type === DashboardVisualisationType.MATRIX_TIMESERIES) {\n      if (columns.measures[0].id !== 'ts') {\n        errors.push(`measure at index 0 has incorrect ID. Expected ID to be \"ts\". Found \"${columns.measures[0].id}\"`)\n      }\n    }\n\n    // Throw the error\n    if (errors.length) {\n      const message = `Validation: Visualisaton definition: ID: ${id}, type: ${type}, errors: ${errors.join(',')}`\n      throw new Error(message)\n    }\n  }\n\n  private initTimeseriesData = () => {\n    const timeBlockData = DatasetHelper.groupRowsByTimestamp(this.responseData)\n\n    this.data = timeBlockData.map((tsData) => {\n      const { raw, rag } = tsData[0][this.valueKey]\n      const tsRaw = tsData[0].ts.raw\n\n      const v = Number(raw)\n      const r = rag !== undefined ? Number(tsData[0][this.valueKey].rag) : undefined\n      let x\n      let y\n\n      switch (this.granularity) {\n        case 'hourly':\n          break\n        case 'weekly':\n          x = dayjs(tsRaw, this.dayDateFormat).format('ddd')\n          y = dayjs(tsRaw, this.dayDateFormat).week()\n          break\n        case 'daily':\n          x = dayjs(tsRaw, this.dayDateFormat).format('MMM YY')\n          y = dayjs(tsRaw, this.dayDateFormat).format('D')\n          break\n        case 'monthly':\n          {\n            const ts = (<string>tsRaw).split(' ')\n            x = ts[1]\n            y = ts[0]\n          }\n          break\n        case 'annually':\n          x = 'year'\n          y = <string>tsRaw\n          break\n        default:\n          x = dayjs(tsRaw, this.dayDateFormat).format('MMM YY')\n          y = dayjs(tsRaw, this.dayDateFormat).format('D')\n          break\n      }\n      return { y, x, v, r }\n    })\n  }\n\n  private binDataIntoBuckets = () => {\n    this.data = this.data.map((d) => {\n      const { v, r } = d\n      let c\n      if (r !== undefined) {\n        c = this.buckets[r].hexColour\n      } else {\n        this.buckets.forEach((bucket) => {\n          const { min, max } = bucket\n          // First bucket\n          if (!min && max && v <= max) {\n            c = bucket.hexColour\n          }\n          // middle buckets\n          if (min && v >= bucket.min && max && v <= bucket.max) {\n            c = bucket.hexColour\n          }\n          // last bucket\n          if (min && !max && v >= min) {\n            c = bucket.hexColour\n          }\n        })\n      }\n\n      return { ...d, c }\n    })\n  }\n\n  build = (): ChartData => {\n    this.validateDefinition()\n    this.initTimeseriesData()\n    this.binDataIntoBuckets()\n\n    return {\n      type: this.type,\n      unit: this.unit,\n      timeseries: true,\n      data: {\n        datasets: [\n          {\n            label: this.label,\n            data: this.data,\n          },\n        ],\n      },\n    }\n  }\n}\n\nexport { HeatmapChart }\nexport default HeatmapChart\n"],
+  "mappings": "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",
+  "names": ["Heatmap_exports", "__export", "HeatmapChart", "Heatmap_default", "__toCommonJS", "import_dayjs", "import_with_alpha_hex", "import_types", "import_datasetHelper", "responseData", "granularity", "definition", "bucket", "buckets", "min", "max", "bucketSize", "maxValue", "i", "minValue", "useRagColours", "d", "alphaDivision", "division", "values", "resData", "id", "columns", "type", "errors", "message", "timeBlockData", "DatasetHelper", "tsData", "raw", "rag", "tsRaw", "v", "r", "x", "y", "dayjs", "ts", "c"]
+}

package/dpr/components/_charts/chart/heatmap/Heatmap.ts

@@ -0,0 +1,278 @@
+/* eslint-disable prefer-destructuring */
+import dayjs from 'dayjs'
+import { withAlphaHex } from 'with-alpha-hex'
+import { Granularity } from '../../../_inputs/granular-date-range/types'
+import { DashboardDataResponse } from '../../../../types/Metrics'
+import {
+  DashboardVisualisation,
+  DashboardVisualisationColumns,
+  DashboardVisualisationType,
+  MatrixDashboardVisualisationBucket,
+  MatrixDashboardVisualisationOptions,
+} from '../../../_dashboards/dashboard/types'
+import { ChartData, ChartType, MatrixChartData, UnitType } from '../../../../types/Charts'
+import DatasetHelper from '../../../../utils/datasetHelper'
+
+class HeatmapChart {
+  private baseColour = '#1d70b8'
+
+  private ragColours: string[] = ['#00703c', '#ffdd00', '#d4351c']
+
+  private buckets: MatrixDashboardVisualisationBucket[] = []
+
+  private bucketCount: number
+
+  private onlyBucketColoursDefined: boolean
+
+  private granularity: Granularity
+
+  private responseData: DashboardDataResponse[]
+
+  private data: MatrixChartData[] = []
+
+  private definition: DashboardVisualisation
+
+  private columns: DashboardVisualisationColumns
+
+  private unit: UnitType
+
+  private type: ChartType
+
+  private dayDateFormat = 'DD/MM/YYYY'
+
+  private hasRag = false
+
+  private valueKey: string
+
+  private options: MatrixDashboardVisualisationOptions = {}
+
+  private label: string
+
+  constructor(responseData: DashboardDataResponse[], granularity: Granularity, definition: DashboardVisualisation) {
+    this.granularity = granularity
+    this.initFromDefinition(definition)
+    this.initFromResponseData(responseData)
+    this.initBuckets()
+  }
+
+  private initFromResponseData = (responseData: DashboardDataResponse[]) => {
+    this.hasRag = responseData[0][this.valueKey].rag !== undefined
+    this.responseData = responseData
+  }
+
+  private initFromDefinition = (definition: DashboardVisualisation) => {
+    this.definition = definition
+    this.columns = definition.columns
+    this.unit = this.columns.measures[0].unit ? this.columns.measures[0].unit : undefined
+    this.type = this.definition.type.split('-')[0] as ChartType
+
+    this.options = <MatrixDashboardVisualisationOptions>definition.options
+    this.baseColour = this.options.baseColour || this.baseColour
+    this.valueKey = this.columns.measures[1].id
+    this.label = this.columns.measures[1].display
+    this.onlyBucketColoursDefined = this.options?.buckets?.every(
+      (bucket) => !bucket.max && !bucket.min && bucket.hexColour !== undefined,
+    )
+  }
+
+  private initBuckets = () => {
+    const { buckets } = this.options
+    this.setBucketCount()
+    this.initBucketColours()
+    if (buckets) {
+      if (this.onlyBucketColoursDefined) {
+        this.initAutomaticThresholdBucket()
+      } else {
+        this.initCustomThresholdBuckets()
+      }
+    } else if (!this.hasRag) this.initAutomaticThresholdBucket()
+  }
+
+  private initCustomThresholdBuckets = () => {
+    this.buckets = this.options.buckets.map((bucket, i) => {
+      return {
+        ...this.buckets[i],
+        ...bucket,
+      }
+    })
+  }
+
+  /**
+   * Initialises the bucket thresholds by defining the range between the min and max
+   * and dividing into 3 equal parts
+   */
+  private initAutomaticThresholdBucket = () => {
+    const { min, max, bucketSize } = this.setAutomaticThresholdSize()
+    let maxValue = 0
+    this.buckets = this.buckets.map((bucket, i) => {
+      let minValue = min
+      if (i !== 0) minValue = maxValue + 1
+      maxValue = bucketSize * (i + 1)
+      if (i === this.buckets.length - 1) maxValue = max
+
+      return {
+        hexColour: this.options?.buckets ? this.options.buckets[i]?.hexColour : bucket.hexColour,
+        min: minValue,
+        max: maxValue,
+      }
+    })
+  }
+
+  private initBucketColours = () => {
+    const { useRagColours } = this.options
+    if (useRagColours && this.bucketCount === 3) {
+      this.buckets = Array.from(new Array(this.bucketCount)).map((d, i) => {
+        return {
+          hexColour: this.ragColours[i],
+        }
+      })
+    } else {
+      const alphaDivision = 1 / this.bucketCount
+      this.buckets = Array.from(new Array(this.bucketCount)).map((d, i) => {
+        const division = alphaDivision * (i + 1)
+        return {
+          hexColour: withAlphaHex(this.baseColour, division),
+        }
+      })
+    }
+  }
+
+  private setAutomaticThresholdSize = () => {
+    const values = this.responseData.map((resData) => Number(resData[this.valueKey].raw))
+    const min = Math.min(...values)
+    const max = Math.max(...values)
+    const bucketSize = Math.ceil((max - min) / this.bucketCount)
+
+    return {
+      min,
+      max,
+      bucketSize,
+    }
+  }
+
+  private setBucketCount = () => {
+    const { buckets } = this.options
+    if (this.hasRag) {
+      this.bucketCount =
+        Math.max(...this.responseData.map((resData: DashboardDataResponse) => resData[this.valueKey].rag)) + 1
+    } else if (buckets) {
+      this.bucketCount = buckets.length
+    } else {
+      this.bucketCount = 3
+    }
+  }
+
+  private validateDefinition = () => {
+    const { id, columns, type } = this.definition
+    const errors = []
+
+    // Validate measures
+    if (columns.measures.length !== 2) {
+      errors.push(`Measures should only have 2 columns defined. Only found ${columns.measures.length}`)
+    } else if (type === DashboardVisualisationType.MATRIX_TIMESERIES) {
+      if (columns.measures[0].id !== 'ts') {
+        errors.push(`measure at index 0 has incorrect ID. Expected ID to be "ts". Found "${columns.measures[0].id}"`)
+      }
+    }
+
+    // Throw the error
+    if (errors.length) {
+      const message = `Validation: Visualisaton definition: ID: ${id}, type: ${type}, errors: ${errors.join(',')}`
+      throw new Error(message)
+    }
+  }
+
+  private initTimeseriesData = () => {
+    const timeBlockData = DatasetHelper.groupRowsByTimestamp(this.responseData)
+
+    this.data = timeBlockData.map((tsData) => {
+      const { raw, rag } = tsData[0][this.valueKey]
+      const tsRaw = tsData[0].ts.raw
+
+      const v = Number(raw)
+      const r = rag !== undefined ? Number(tsData[0][this.valueKey].rag) : undefined
+      let x
+      let y
+
+      switch (this.granularity) {
+        case 'hourly':
+          break
+        case 'weekly':
+          x = dayjs(tsRaw, this.dayDateFormat).format('ddd')
+          y = dayjs(tsRaw, this.dayDateFormat).week()
+          break
+        case 'daily':
+          x = dayjs(tsRaw, this.dayDateFormat).format('MMM YY')
+          y = dayjs(tsRaw, this.dayDateFormat).format('D')
+          break
+        case 'monthly':
+          {
+            const ts = (<string>tsRaw).split(' ')
+            x = ts[1]
+            y = ts[0]
+          }
+          break
+        case 'annually':
+          x = 'year'
+          y = <string>tsRaw
+          break
+        default:
+          x = dayjs(tsRaw, this.dayDateFormat).format('MMM YY')
+          y = dayjs(tsRaw, this.dayDateFormat).format('D')
+          break
+      }
+      return { y, x, v, r }
+    })
+  }
+
+  private binDataIntoBuckets = () => {
+    this.data = this.data.map((d) => {
+      const { v, r } = d
+      let c
+      if (r !== undefined) {
+        c = this.buckets[r].hexColour
+      } else {
+        this.buckets.forEach((bucket) => {
+          const { min, max } = bucket
+          // First bucket
+          if (!min && max && v <= max) {
+            c = bucket.hexColour
+          }
+          // middle buckets
+          if (min && v >= bucket.min && max && v <= bucket.max) {
+            c = bucket.hexColour
+          }
+          // last bucket
+          if (min && !max && v >= min) {
+            c = bucket.hexColour
+          }
+        })
+      }
+
+      return { ...d, c }
+    })
+  }
+
+  build = (): ChartData => {
+    this.validateDefinition()
+    this.initTimeseriesData()
+    this.binDataIntoBuckets()
+
+    return {
+      type: this.type,
+      unit: this.unit,
+      timeseries: true,
+      data: {
+        datasets: [
+          {
+            label: this.label,
+            data: this.data,
+          },
+        ],
+      },
+    }
+  }
+}
+
+export { HeatmapChart }
+export default HeatmapChart

package/dpr/components/_charts/chart/heatmap/clientClass.mjs

@@ -0,0 +1,175 @@
+/* eslint-disable prefer-destructuring */
+/* eslint-disable class-methods-use-this */
+import ChartVisualisation from '../clientClass.mjs'
+
+export default class MatrixChartVisualisation extends ChartVisualisation {
+  static getModuleName() {
+    return 'matrix-chart'
+  }
+
+  initialise() {
+    this.setupCanvas()
+    this.settings = this.initSettings()
+    this.chartData = this.generateChartData(this.settings)
+    this.initChart(this.chartData)
+  }
+
+  initSettings() {
+    return {
+      options: this.setOptions({ scaleType: 'category' }),
+      toolTipOptions: this.setToolTipOptions(),
+    }
+  }
+
+  setToolTipOptions() {
+    const ctx = this
+    return {
+      callbacks: {
+        title(context) {
+          const { raw } = context[0]
+          const title = `${raw.y} ${raw.x}`
+          return title
+        },
+        label(context) {
+          const { data, label: legend } = context.dataset
+          const dataValue = data[context.dataIndex]
+          const label = `${dataValue.y} ${dataValue.x}`
+          const value = `${dataValue.v}${ctx.suffix}`
+          ctx.setHoverValue({ label, value, legend, ctx })
+          return `${legend}: ${value}`
+        },
+      },
+    }
+  }
+
+  setOptions({ scaleType }) {
+    return {
+      scales: this.setScales({ scaleType }),
+    }
+  }
+
+  generateChartData(settings) {
+    const { options, plugins, pluginsOptions, toolTipOptions, hoverEvent } = settings
+    return {
+      type: this.type,
+      data: {
+        datasets: this.createDatasets(),
+      },
+      options: {
+        responsive: true,
+        maintainAspectRatio: false,
+        animation: {
+          duration: 0,
+        },
+        hover: {
+          animationDuration: 0,
+        },
+        ...(options && options),
+        ...(hoverEvent && hoverEvent),
+        plugins: {
+          legend: {
+            position: 'bottom',
+            display: false,
+          },
+          ...(pluginsOptions && pluginsOptions),
+          datalabels: {
+            display: false,
+          },
+          tooltip: {
+            ...this.setToolTip(),
+            ...(toolTipOptions && toolTipOptions),
+          },
+        },
+      },
+      plugins: plugins && plugins.length ? [...plugins] : [],
+    }
+  }
+
+  createDatasets() {
+    const { datasets } = this.chartParams
+    return datasets.map((d) => {
+      const { label, data } = d
+      return {
+        label,
+        data,
+        backgroundColor(c) {
+          return c.raw.c
+        },
+        width: ({ chart }) => (chart.chartArea || {}).width / chart.scales.x.ticks.length - 1,
+        height: ({ chart }) => (chart.chartArea || {}).height / chart.scales.y.ticks.length - 1,
+      }
+    })
+  }
+
+  setScales({ scaleType }) {
+    let xTime
+    let yTime
+    let xLabels
+    let yLabels
+
+    switch (scaleType) {
+      case 'time':
+        yTime = {
+          unit: 'week',
+        }
+        xTime = {
+          unit: 'day',
+        }
+        break
+      case 'category':
+        {
+          const { datasets } = this.chartParams
+          xLabels = [
+            ...new Set(
+              datasets[0].data.map((d) => {
+                return d.x
+              }),
+            ),
+          ]
+          yLabels = [
+            ...new Set(
+              datasets[0].data.map((d) => {
+                return d.y
+              }),
+            ),
+          ]
+        }
+        break
+      default:
+        break
+    }
+
+    const grid = {
+      display: false,
+      drawBorder: false,
+    }
+    const ticks = {
+      padding: 1,
+      maxRotation: 0,
+      stepSize: 1,
+    }
+    const offset = true
+    const common = {
+      offset,
+      ticks,
+      grid,
+    }
+
+    return {
+      y: {
+        left: 'left',
+        ...(scaleType && { type: scaleType }),
+        ...(yLabels && { labels: yLabels }),
+        ...(yTime && { time: yTime }),
+        ...common,
+      },
+      x: {
+        position: 'top',
+        ...(scaleType && { type: scaleType }),
+        ...(xLabels && { labels: xLabels }),
+        ...(xTime && { time: xTime }),
+        ...common,
+      },
+    }
+  }
+}

package/dpr/components/_charts/chart/styles.scss

@@ -26,6 +26,10 @@
   height: 400px;
 }
 
+.dpr-matrix-chart {
+  height: 700px;
+}
+
 .dpr-canvas-wrapper {
   height: 100%;
 }

package/dpr/components/_charts/utils.js

@@ -1,2 +1,2 @@
-var M=Object.create;var C=Object.defineProperty;var S=Object.getOwnPropertyDescriptor;var k=Object.getOwnPropertyNames;var I=Object.getPrototypeOf,E=Object.prototype.hasOwnProperty;var L=(a,s)=>{for(var e in s)C(a,e,{get:s[e],enumerable:!0})},w=(a,s,e,t)=>{if(s&&typeof s=="object"||typeof s=="function")for(let o of k(s))!E.call(a,o)&&o!==e&&C(a,o,{get:()=>s[o],enumerable:!(t=S(s,o))||t.enumerable});return a};var f=(a,s,e)=>(e=a!=null?M(I(a)):{},w(s||!a||!a.__esModule?C(e,"default",{value:a,enumerable:!0}):e,a)),K=a=>w(C({},"__esModule",{value:!0}),a);var U={};L(U,{createChart:()=>V,default:()=>A});module.exports=K(U);var b=require("../_dashboards/dashboard/types"),p=f(require("../../utils/datasetHelper")),R=f(require("../_dashboards/dashboard-list/utils"));const V=(a,s)=>{const e=[b.DashboardVisualisationType.BAR_TIMESERIES,b.DashboardVisualisationType.LINE_TIMESERIES],{type:t}=a;let o,l,d;if(e.includes(t)){const{latestData:n,dataSetRows:r,timeseriesData:u}=$(a,s);r.length&&(l=P(a,u),o=N(a,u),d=T(a,n,!0))}else{const{dataSetRows:n,snapshotData:r}=J(a,s);n.length&&(l=_(a,r),o=H(a,n),d=T(a,n))}return{details:d,table:o,chart:l}};var A={createChart:V};const J=(a,s)=>{const e=p.default.getLastestDataset(s),t=p.default.getDatasetRows(a,e),o=p.default.filterRowsByDisplayColumns(a,t,!0);return{dataSetRows:t,snapshotData:o}},$=(a,s)=>{const e=p.default.getLastestDataset(s),t=p.default.getDatasetRows(a,s),o=p.default.filterRowsByDisplayColumns(a,t,!0);return{latestData:e,dataSetRows:t,timeseriesData:o}},T=(a,s,e=!1)=>{const t=[],o=F(a,s,e);return s[0]?.ts&&t.push({label:"Values for:",value:s[0]?.ts.raw}),{meta:t,headlines:o}},F=(a,s,e=!1)=>{const t=[],{columns:o}=a,{measures:l}=o,d=!!l.find(i=>i.axis);let n,r,u,h;return e?(r=l.find(i=>i.id!=="ts"),r&&(h=`${s[0].ts.raw}`,u=+s[0][r.id].raw,n={label:h,value:u})):(r=d?l.find(i=>i.axis&&i.axis==="y"):l[0],r&&(h=`Total ${r.display.toLowerCase()}`,u=s.reduce((i,m)=>i+ +m[r.id].raw,0),n={label:h,value:u})),t.push(n),t},_=(a,s)=>{const{type:e,columns:t}=a,{measures:o}=t,l=!!o.find(u=>u.axis);let d,n,r;return l?{labels:d,unit:n,datasets:r}=G(t,s):{labels:d,unit:n,datasets:r}=v(t,s),{type:e,unit:n,data:{labels:d,datasets:r}}},v=(a,s)=>{const{keys:e,measures:t}=a,o=t.map(r=>r.display),l=e[e.length-1]?.id,d=t[0].unit?t[0].unit:void 0,n=s.map(r=>{const u=r[l]?`${r[l].raw}`:"All",h=t.map(m=>{const c=m.id;return r[c]?+r[c].raw:0}),i=h.reduce((m,c)=>m+c,0);return{label:u,data:h,total:i}});return{labels:o,unit:d,datasets:n}},G=(a,s)=>{const{measures:e,keys:t}=a,o=e.find(i=>i.axis==="x"),l=e.find(i=>i.axis==="y"),d=l?.unit||void 0,n=p.default.getGroupKey(t,s),r=n?p.default.groupRowsByKey(s,n.id):[s],u=r[0]?.map(i=>`${i[o.id].raw}`),h=r.map(i=>{const m=i.map(c=>+c[l.id].raw);return{label:n?`${i[0][n.id].raw}`:l.display,data:m,total:m.reduce((c,D)=>c+D,0)}});return{labels:u,unit:d,datasets:h}},H=(a,s)=>{const{columns:e}=a,{keys:t,measures:o}=e,d=[...t,...o].map(u=>({text:u.display})),n=p.default.filterRowsByDisplayColumns(a,s,!0),r=R.default.createTableRows(n);return{head:d,rows:r}},P=(a,s)=>{const{columns:e}=a,{keys:t,measures:o}=e,l=o[0].unit?o[0].unit:void 0,d=a.type===b.DashboardVisualisationType.BAR_TIMESERIES?"bar":"line",r=p.default.getGroupKey(t,s).id,u=p.default.groupRowsByTimestamp(s),h=u.map(c=>c[0].ts.raw),i=u[0].length,m=[];for(let c=0;c<i;c+=1){const D=u.map(y=>+y[c][o[1].id].raw),g=D.reduce((y,x)=>y+x,0),B=u[0][c][r].raw;m.push({data:D,label:B,total:g})}return{type:d,unit:l,timeseries:!0,data:{labels:h,datasets:m}}},N=(a,s)=>{const{columns:e}=a,{keys:t,measures:o}=e;let l=s.flat();const d=s.length>1;let n=[...o];if(d){const h=n.findIndex(m=>m.id==="ts"),i=n[h];n.splice(h,1),n=[...t,...n],n.unshift(i)}else l=p.default.filterRowsByDisplayColumns(a,l);const r=n.map(h=>({text:h.display})),u=R.default.createTableRows(l);return{head:r,rows:u}};0&&(module.exports={createChart});
+var G=Object.create;var b=Object.defineProperty;var $=Object.getOwnPropertyDescriptor;var A=Object.getOwnPropertyNames;var F=Object.getPrototypeOf,H=Object.prototype.hasOwnProperty;var j=(a,t)=>{for(var e in t)b(a,e,{get:t[e],enumerable:!0})},w=(a,t,e,s)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of A(t))!H.call(a,o)&&o!==e&&b(a,o,{get:()=>t[o],enumerable:!(s=$(t,o))||s.enumerable});return a};var p=(a,t,e)=>(e=a!=null?G(F(a)):{},w(t||!a||!a.__esModule?b(e,"default",{value:a,enumerable:!0}):e,a)),v=a=>w(b({},"__esModule",{value:!0}),a);var Q={};j(Q,{createChart:()=>M,createMatrixChart:()=>S,createTimeseriesCharts:()=>L,default:()=>P});module.exports=v(Q);var T=p(require("dayjs")),x=p(require("dayjs/plugin/weekOfYear")),D=p(require("../../utils/datasetHelper")),f=p(require("../_dashboards/dashboard-list/utils")),B=require("../_inputs/granular-date-range/types"),k=p(require("./chart/heatmap/Heatmap"));T.default.extend(x.default);const M=(a,t)=>{let e,s,o;const{dataSetRows:r,snapshotData:l}=O(a,t);return r.length&&(s=Y(a,l),e=z(a,r),o=R(a,r)),{details:o,table:e,chart:s}},L=(a,t)=>{let e,s,o;const{latestData:r,dataSetRows:l,timeseriesData:u}=g(a,t);return l.length&&(s=N(a,u),e=V(a,u),o=R(a,r,!0)),{details:o,table:e,chart:s}},S=(a,t,e)=>{let s,o,r,l=B.Granularity.DAILY;Object.keys(e).forEach(h=>{h.includes("granularity")&&(l=e[h])});const{latestData:u,dataSetRows:n,timeseriesData:i}=g(a,t);return n.length&&(o=new k.default(i,l,a).build(),s=V(a,i),r=R(a,u,!0)),{details:r,table:s,chart:o}},O=(a,t)=>{const e=D.default.getLastestDataset(t),s=D.default.getDatasetRows(a,e),o=D.default.filterRowsByDisplayColumns(a,s,!0);return{dataSetRows:s,snapshotData:o}},g=(a,t)=>{const e=D.default.getLastestDataset(t),s=D.default.getDatasetRows(a,t),o=D.default.filterRowsByDisplayColumns(a,s,!0);return{latestData:e,dataSetRows:s,timeseriesData:o}},R=(a,t,e=!1)=>{const s=[],o=W(a,t,e);return t[0]?.ts&&s.push({label:"Values for:",value:t[0]?.ts.raw}),{meta:s,headlines:o}},W=(a,t,e=!1)=>{const s=[],{columns:o}=a,{measures:r}=o,l=!!r.find(d=>d.axis);let u,n,i,h;return e?(n=r.find(d=>d.id!=="ts"),n&&(h=`${t[0].ts.raw}`,i=+t[0][n.id].raw,u={label:h,value:i})):(n=l?r.find(d=>d.axis&&d.axis==="y"):r[0],n&&(h=`Total ${n.display.toLowerCase()}`,i=t.reduce((d,c)=>d+ +c[n.id].raw,0),u={label:h,value:i})),s.push(u),s},Y=(a,t)=>{const{type:e,columns:s}=a,{measures:o}=s,r=!!o.find(i=>i.axis);let l,u,n;return r?{labels:l,unit:u,datasets:n}=U(s,t):{labels:l,unit:u,datasets:n}=E(s,t),{type:e,unit:u,data:{labels:l,datasets:n}}},E=(a,t)=>{const{keys:e,measures:s}=a,o=s.map(n=>n.display),r=e[e.length-1]?.id,l=s[0].unit?s[0].unit:void 0,u=t.map(n=>{const i=n[r]?`${n[r].raw}`:"All",h=s.map(c=>{const m=c.id;return n[m]?+n[m].raw:0}),d=h.reduce((c,m)=>c+m,0);return{label:i,data:h,total:d}});return{labels:o,unit:l,datasets:u}},U=(a,t)=>{const{measures:e,keys:s}=a,o=e.find(d=>d.axis==="x"),r=e.find(d=>d.axis==="y"),l=r?.unit||void 0,u=D.default.getGroupKey(s,t),n=u?D.default.groupRowsByKey(t,u.id):[t],i=n[0]?.map(d=>`${d[o.id].raw}`),h=n.map(d=>{const c=d.map(m=>+m[r.id].raw);return{label:u?`${d[0][u.id].raw}`:r.display,data:c,total:c.reduce((m,C)=>m+C,0)}});return{labels:i,unit:l,datasets:h}},z=(a,t)=>{const{columns:e}=a,{keys:s,measures:o}=e,l=[...s,...o].map(i=>({text:i.display})),u=D.default.filterRowsByDisplayColumns(a,t,!0),n=f.default.createTableRows(u);return{head:l,rows:n}},N=(a,t)=>{const{columns:e}=a,{keys:s,measures:o}=e,r=o[0].unit?o[0].unit:void 0,l=a.type.split("-")[0],n=D.default.getGroupKey(s,t).id,i=D.default.groupRowsByTimestamp(t),h=i.map(m=>m[0].ts.raw),d=i[0].length,c=[];for(let m=0;m<d;m+=1){const C=i.map(y=>+y[m][o[1].id].raw),J=C.reduce((y,K)=>y+K,0),I=i[0][m][n].raw;c.push({data:C,label:I,total:J})}return{type:l,unit:r,timeseries:!0,data:{labels:h,datasets:c}}},V=(a,t)=>{const{columns:e}=a,{keys:s,measures:o}=e;let r=t.flat(),l=[...o];if(t.length>1){const i=l.findIndex(c=>c.id==="ts"),h=l[i];l.splice(i,1),l=[...s.filter(c=>c.id!=="ts"),...l],l.unshift(h)}else r=D.default.filterRowsByDisplayColumns(a,r);const u=l.map(i=>({text:i.display})),n=f.default.createTableRows(r);return{head:u,rows:n}};var P={createChart:M,createTimeseriesCharts:L,createMatrixChart:S};0&&(module.exports={createChart,createMatrixChart,createTimeseriesCharts});
 //# sourceMappingURL=utils.js.map