@ministryofjustice/hmpps-digital-prison-reporting-frontend 4.17.0 → 4.17.2

package/dpr/components/_dashboards/dashboard-visualisation/DashboardVisualisation.ts

@@ -0,0 +1,40 @@
+/* eslint-disable prefer-destructuring */
+import { components } from '../../../types/api'
+import { DashboardDataResponse } from '../../../types/Metrics'
+
+class DashboardVisualisationClass {
+  responseData: DashboardDataResponse[]
+
+  definition: components['schemas']['DashboardVisualisationDefinition']
+
+  columns: components['schemas']['DashboardVisualisationColumnsDefinition']
+
+  measures: components['schemas']['DashboardVisualisationColumnDefinition'][]
+
+  keys: components['schemas']['DashboardVisualisationColumnDefinition'][]
+
+  unit: components['schemas']['DashboardVisualisationColumnDefinition']['unit']
+
+  type: components['schemas']['DashboardVisualisationDefinition']['type']
+
+  constructor(
+    responseData: DashboardDataResponse[],
+    definition: components['schemas']['DashboardVisualisationDefinition'],
+  ) {
+    this.definition = definition
+    this.columns = definition.columns
+    this.measures = this.columns.measures
+    this.keys = this.columns.keys
+    this.type = this.definition.type.split('-')[0] as components['schemas']['DashboardVisualisationDefinition']['type']
+    this.initUnit()
+    this.responseData = responseData
+  }
+
+  initUnit = () => {
+    // todo
+    this.unit = this.columns.measures[0].unit ? this.columns.measures[0].unit : undefined
+  }
+}
+
+export { DashboardVisualisationClass }
+export default DashboardVisualisationClass

package/dpr/components/_dashboards/dashboard-visualisation/types.js

@@ -0,0 +1,2 @@
+var o=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var c=Object.getOwnPropertyNames;var u=Object.prototype.hasOwnProperty;var b=(e,t)=>{for(var r in t)o(e,r,{get:t[r],enumerable:!0})},d=(e,t,r,s)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of c(t))!u.call(e,i)&&i!==r&&o(e,i,{get:()=>t[i],enumerable:!(s=l(t,i))||s.enumerable});return e};var m=e=>d(o({},"__esModule",{value:!0}),e);var D={};b(D,{DashboardVisualisationType:()=>n});module.exports=m(D);var n=(a=>(a.LIST="list",a.DONUT="doughnut",a.BAR="bar",a.LINE="line",a.MATRIX="matrix",a.MATRIX_TIMESERIES="matrix-timeseries",a.BAR_TIMESERIES="bar-timeseries",a.LINE_TIMESERIES="line-timeseries",a.SCORECARD="scorecard",a.SCORECARD_GROUP="scorecard-group",a))(n||{});0&&(module.exports={DashboardVisualisationType});
+//# sourceMappingURL=types.js.map

package/dpr/components/_dashboards/dashboard-visualisation/types.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/dpr/components/_dashboards/dashboard-visualisation/types.ts"],
+  "sourcesContent": ["import { components } from '../../../types/api'\nimport { Scorecard, ScorecardGroup } from '../scorecard/types'\nimport { MatrixChartData } from '../../_charts/chart/heatmap/types'\nimport { ChartDetails } from '../../../types/Charts'\n\nexport interface DashboardSection {\n  id: string\n  title?: string\n  description?: string\n  visualisations?: DashboardVisualisation[]\n}\n\nexport interface DashboardVisualisation {\n  id: string\n  type: components['schemas']['DashboardVisualisationDefinition']['type']\n  title?: string\n  description?: string\n  data:\n    | Scorecard\n    | Scorecard[]\n    | ScorecardGroup[]\n    | DashboardVisualisatonCardData\n    | DashboardVisualisationTable\n    | undefined\n}\n\nexport interface DashboardVisualisatonCardData {\n  chart: DashboardVisualisationData\n  table?: MoJTable\n  details?: ChartDetails\n}\n\nexport interface DashboardVisualisationData {\n  type: components['schemas']['DashboardVisualisationDefinition']['type']\n  unit?: components['schemas']['DashboardVisualisationColumnDefinition']['unit']\n  data: DashboardVisualisationDataValues\n  timeseries?: boolean\n}\n\nexport interface DashboardVisualisationDataValues {\n  labels?: string[]\n  datasets: DashboardVisualisationDataSet[]\n  axis?: 'x' | 'y'\n}\n\nexport interface DashboardVisualisationDataSet {\n  label: string\n  data: number[] | MatrixChartData[]\n  total?: number\n}\n\nexport interface DashboardVisualisationTable {\n  table: MoJTable\n  ts?: string\n}\n\nexport interface MoJTable {\n  head: MoJTableHead[]\n  rows: MoJTableRow[][]\n}\n\nexport interface MoJTableRow {\n  text?: string\n  html?: string\n}\n\nexport interface MoJTableHead {\n  text?: string\n  html?: string\n}\n\nexport enum DashboardVisualisationType {\n  LIST = 'list',\n  DONUT = 'doughnut',\n  BAR = 'bar',\n  LINE = 'line',\n  MATRIX = 'matrix',\n  MATRIX_TIMESERIES = 'matrix-timeseries',\n  BAR_TIMESERIES = 'bar-timeseries',\n  LINE_TIMESERIES = 'line-timeseries',\n  SCORECARD = 'scorecard',\n  SCORECARD_GROUP = 'scorecard-group',\n}\n\nexport type DashboardVisualisationOptions = ListDashboardVisualisationOptions | BucketDashboardVisualisationOptions\n\nexport interface ListDashboardVisualisationOptions {\n  showLatest?: boolean\n  columnsAsList?: boolean\n}\n\nexport interface BucketDashboardVisualisationOptions {\n  useRagColour?: boolean\n  buckets?: DashboardVisualisationBucket[]\n  baseColour?: string\n}\n\nexport interface DashboardVisualisationBucket {\n  min?: number\n  max?: number\n  hexColour?: string\n}\n"],
+  "mappings": "4ZAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,gCAAAE,IAAA,eAAAC,EAAAH,GAuEO,IAAKE,OACVA,EAAA,KAAO,OACPA,EAAA,MAAQ,WACRA,EAAA,IAAM,MACNA,EAAA,KAAO,OACPA,EAAA,OAAS,SACTA,EAAA,kBAAoB,oBACpBA,EAAA,eAAiB,iBACjBA,EAAA,gBAAkB,kBAClBA,EAAA,UAAY,YACZA,EAAA,gBAAkB,kBAVRA,OAAA",
+  "names": ["types_exports", "__export", "DashboardVisualisationType", "__toCommonJS"]
+}

package/dpr/components/_dashboards/dashboard-visualisation/types.ts

@@ -0,0 +1,102 @@
+import { components } from '../../../types/api'
+import { Scorecard, ScorecardGroup } from '../scorecard/types'
+import { MatrixChartData } from '../../_charts/chart/heatmap/types'
+import { ChartDetails } from '../../../types/Charts'
+
+export interface DashboardSection {
+  id: string
+  title?: string
+  description?: string
+  visualisations?: DashboardVisualisation[]
+}
+
+export interface DashboardVisualisation {
+  id: string
+  type: components['schemas']['DashboardVisualisationDefinition']['type']
+  title?: string
+  description?: string
+  data:
+    | Scorecard
+    | Scorecard[]
+    | ScorecardGroup[]
+    | DashboardVisualisatonCardData
+    | DashboardVisualisationTable
+    | undefined
+}
+
+export interface DashboardVisualisatonCardData {
+  chart: DashboardVisualisationData
+  table?: MoJTable
+  details?: ChartDetails
+}
+
+export interface DashboardVisualisationData {
+  type: components['schemas']['DashboardVisualisationDefinition']['type']
+  unit?: components['schemas']['DashboardVisualisationColumnDefinition']['unit']
+  data: DashboardVisualisationDataValues
+  timeseries?: boolean
+}
+
+export interface DashboardVisualisationDataValues {
+  labels?: string[]
+  datasets: DashboardVisualisationDataSet[]
+  axis?: 'x' | 'y'
+}
+
+export interface DashboardVisualisationDataSet {
+  label: string
+  data: number[] | MatrixChartData[]
+  total?: number
+}
+
+export interface DashboardVisualisationTable {
+  table: MoJTable
+  ts?: string
+}
+
+export interface MoJTable {
+  head: MoJTableHead[]
+  rows: MoJTableRow[][]
+}
+
+export interface MoJTableRow {
+  text?: string
+  html?: string
+}
+
+export interface MoJTableHead {
+  text?: string
+  html?: string
+}
+
+export enum DashboardVisualisationType {
+  LIST = 'list',
+  DONUT = 'doughnut',
+  BAR = 'bar',
+  LINE = 'line',
+  MATRIX = 'matrix',
+  MATRIX_TIMESERIES = 'matrix-timeseries',
+  BAR_TIMESERIES = 'bar-timeseries',
+  LINE_TIMESERIES = 'line-timeseries',
+  SCORECARD = 'scorecard',
+  SCORECARD_GROUP = 'scorecard-group',
+}
+
+export type DashboardVisualisationOptions = ListDashboardVisualisationOptions | BucketDashboardVisualisationOptions
+
+export interface ListDashboardVisualisationOptions {
+  showLatest?: boolean
+  columnsAsList?: boolean
+}
+
+export interface BucketDashboardVisualisationOptions {
+  useRagColour?: boolean
+  buckets?: DashboardVisualisationBucket[]
+  baseColour?: string
+}
+
+export interface DashboardVisualisationBucket {
+  min?: number
+  max?: number
+  hexColour?: string
+}

package/dpr/components/_dashboards/dashboard-visualisation/view.njk

@@ -11,7 +11,7 @@
 
   <div class="dashboard-visualisation-container" id="{{ id }}-dash-section-visualisation" tabindex="0">
     {% if title %}
-      <h3 class="govuk-heading-s">{{ title }}</h3>
+      <h3 class="govuk-heading-m">{{ title }}</h3>
     {% endif %}
 
     {% if description %}

package/dpr/components/_dashboards/scorecard/Scorecard.js

@@ -1,2 +1,2 @@
-var R=Object.create;var g=Object.defineProperty;var k=Object.getOwnPropertyDescriptor;var B=Object.getOwnPropertyNames;var $=Object.getPrototypeOf,T=Object.prototype.hasOwnProperty;var F=(u,l)=>{for(var e in l)g(u,e,{get:l[e],enumerable:!0})},b=(u,l,e,t)=>{if(l&&typeof l=="object"||typeof l=="function")for(let s of B(l))!T.call(u,s)&&s!==e&&g(u,s,{get:()=>l[s],enumerable:!(t=k(l,s))||t.enumerable});return u};var v=(u,l,e)=>(e=u!=null?R($(u)):{},b(l||!u||!u.__esModule?g(e,"default",{value:u,enumerable:!0}):e,u)),N=u=>b(g({},"__esModule",{value:!0}),u);var I={};F(I,{ScorecardVisualisation:()=>f,default:()=>M});module.exports=N(I);var K=v(require("../../_charts/chart/DashboardVisualisation")),n=v(require("../../../utils/datasetHelper")),D=v(require("../../_charts/chart/Buckets"));class f extends K.default{constructor(e,t,s=!1){super(e,t);this.buckets=[];this.ragColours=["#cce2d8","#fff7bf","#f4cdc6"];this.initBuckets=(e,t)=>{this.bucketsHelper=new D.default(e,this.definition,t,!1,this.ragColours),this.buckets=new D.default(e,this.definition,t,!1,this.ragColours).getBuckets()};this.initGroupVars=()=>{this.groupKey=n.default.getGroupKey(this.keys,this.dataset.latest),this.groupKeyId=this.groupKey?.id,this.groupKeyDisplay=this.groupKey?.display,this.valueColumn=this.measures.find(e=>e.displayValue),this.valueColumn&&(this.valueKey=this.valueColumn?.id,this.titleColumn=this.measures.find(e=>e.display||e.display===""),this.titleKey=this.titleColumn?.id)};this.getDataset=(e,t)=>{const s=n.default.getLastestDataset(t),r=n.default.getDatasetRows(e,s),i=r[0]?.ts?.raw,o=n.default.filterRowsByDisplayColumns(e,r,!0),a=n.default.getEarliestDataset(t),c=n.default.getDatasetRows(e,a),d=c[0]?.ts?.raw;return{earliest:n.default.filterRowsByDisplayColumns(e,c,!0),earliestTs:d,latest:o,latestTs:i}};this.setRagScore=(e,t)=>this.bucketsHelper.getBucketForValue(e,t);this.createScorecardData=({title:e,value:t,rag:s,valueFor:r,valueFrom:i,prevVal:o,groupTitle:a})=>({title:e,value:t,...!Number.isNaN(t)&&this.buckets.length&&{rag:this.setRagScore(t,s)},valueFor:r,trend:this.createTrend(r,i,t,o),...a&&{group:a}});this.createTrend=(e,t,s,r)=>{let i;if(t!==e){const o=+s-+r;i={direction:Math.sign(o),value:Math.abs(o),from:t}}return i};this.validateDefinition=()=>{const{id:e,type:t}=this.definition,s=[];if(this.group||(this.measures.length!==1?s.push(`Measures should only have 1 column defined. Found ${this.measures.length}`):this.titleColumn?this.valueKey||s.push('Missing ID in title measure. Expected measure to include "id: string" field'):s.push('No title column defined. Expected measure to include "display: string" field')),s.length){const r=`Validation: Visualisaton definition: ID: ${e}, type: ${t}, errors: ${s.join(",")}`;throw new Error(r)}};this.createScorecardGroupFromColumns=()=>{const{latest:e,earliest:t,latestTs:s,earliestTs:r}=this.dataset;return e.map((i,o)=>({title:this.createGroupTitle(i),scorecards:Object.keys(i).filter(a=>a!==this.groupKeyId).map(a=>{const d=this.measures.find(w=>w.id===a)?.display||a,p=i[a],{raw:h,rag:m}=p,y=Number(h),S=m!==void 0?Number(m):void 0;this.initBuckets([i],a);const C=`${s}`,V=`${r}`,G=t[o][a]?.raw;return this.createScorecardData({title:d,value:y,rag:S,prevVal:G,valueFor:C,valueFrom:V})})}))};this.createScorecardGroupFromList=()=>{const{latest:e,earliest:t}=this.dataset;return[{title:"",scorecards:e.map((s,r)=>{const i=this.getScorecardValues(s),o=t[r][this.valueKey].raw;return this.createScorecardData({...i,prevVal:o})})}]};this.createScorecardGroupFromListWithGroups=()=>{const{latest:e,earliest:t}=this.dataset;let s=n.default.groupRowsByKey(t,this.groupKeyId),r=n.default.groupRowsByKey(e,this.groupKeyId);return this.groupKeyId===this.titleKey&&(r=[r.flat()],s=[s.flat()]),r.map((o,a)=>({title:this.createGroupTitle(o[0]),scorecards:o.map((c,d)=>{const p=this.getScorecardValues(c),m=s[a][d][this.valueKey]?.raw;return this.createScorecardData({...p,prevVal:m})})}))};this.getScorecardValues=e=>{const{latestTs:t,earliestTs:s}=this.dataset,r=`${this.titleColumn.display} ${e[this.titleKey].raw}`,i=e[this.valueKey],{raw:o,rag:a}=i,c=Number(o),d=a!==void 0?Number(a):void 0;this.initBuckets([e],this.valueKey);const p=`${t}`,h=`${s}`;return{title:r,value:c,rag:d,valueFor:p,valueFrom:h}};this.buildScorecard=()=>{const{latest:e,earliest:t,latestTs:s,earliestTs:r}=this.dataset;return e.map((o,a)=>{const{raw:c,rag:d}=o[this.valueKey],p=t[a][this.valueKey].raw,h=`${s}`,m=`${r}`,y=this.titleColumn.display;return this.createScorecardData({title:y,value:c,rag:d,prevVal:p,valueFor:h,valueFrom:m})})[0]};this.createGroupTitle=e=>{const t=this.groupKeyId?`${e[this.groupKeyId]?.raw}`:"";return this.groupKeyDisplay&&this.groupKeyDisplay.length?`${this.groupKeyDisplay}: ${t}`:t};this.buildGroup=()=>{let e;return this.valueColumn?this.groupKey?e=this.createScorecardGroupFromListWithGroups():e=this.createScorecardGroupFromList():e=this.createScorecardGroupFromColumns(),e};this.build=()=>(this.validateDefinition(),this.group?this.buildGroup():this.buildScorecard());this.group=s,this.dataset=this.getDataset(t,e),s?this.initGroupVars():(this.valueKey=this.measures[0].id,this.titleColumn={display:t.display,id:this.valueKey},this.initBuckets(e,this.valueKey))}}var M=f;0&&(module.exports={ScorecardVisualisation});
+var V=Object.create;var g=Object.defineProperty;var k=Object.getOwnPropertyDescriptor;var B=Object.getOwnPropertyNames;var $=Object.getPrototypeOf,F=Object.prototype.hasOwnProperty;var T=(n,u)=>{for(var e in u)g(n,e,{get:u[e],enumerable:!0})},b=(n,u,e,t)=>{if(u&&typeof u=="object"||typeof u=="function")for(let s of B(u))!F.call(n,s)&&s!==e&&g(n,s,{get:()=>u[s],enumerable:!(t=k(u,s))||t.enumerable});return n};var f=(n,u,e)=>(e=n!=null?V($(n)):{},b(u||!n||!n.__esModule?g(e,"default",{value:n,enumerable:!0}):e,n)),N=n=>b(g({},"__esModule",{value:!0}),n);var x={};T(x,{ScorecardVisualisation:()=>D,default:()=>I});module.exports=N(x);var K=f(require("../dashboard-visualisation/DashboardVisualisation")),l=f(require("../../../utils/datasetHelper")),v=f(require("../../_charts/chart/Buckets"));class D extends K.default{constructor(e,t,s=!1){super(e,t);this.buckets=[];this.valueKey="";this.titleKey="";this.ragColours=["#cce2d8","#fff7bf","#f4cdc6"];this.initBuckets=(e,t)=>{(this.definition.options?.buckets||this.definition.options?.useRagColour)&&(this.bucketsHelper=new v.default(e,this.definition,t,!1,this.ragColours),this.buckets=new v.default(e,this.definition,t,!1,this.ragColours).getBuckets())};this.initGroupVars=()=>{this.groupKey=l.default.getGroupKey(this.keys,this.dataset.latest),this.groupKeyId=this.groupKey?.id,this.groupKeyDisplay=this.groupKey?.display,this.valueColumn=this.measures.find(e=>e.displayValue),this.valueColumn&&(this.valueKey=this.valueColumn?.id,this.titleColumn=this.measures.find(e=>e.display||e.display===""),this.titleKey=this.titleColumn?.id||"")};this.getDataset=(e,t)=>{const s=l.default.getLastestDataset(t),r=l.default.getDatasetRows(e,s),i=r[0]?.ts?.raw,o=l.default.filterRowsByDisplayColumns(e,r,!0),a=l.default.getEarliestDataset(t),c=l.default.getDatasetRows(e,a),d=c[0]?.ts?.raw;return{earliest:l.default.filterRowsByDisplayColumns(e,c,!0),earliestTs:d,latest:o,latestTs:i}};this.setRagScore=(e,t)=>this.bucketsHelper?.getBucketForValue(e,t);this.createScorecardData=({title:e,value:t,rag:s,valueFor:r,valueFrom:i,prevVal:o,groupTitle:a})=>({id:this.definition.id,title:e,value:t,...!Number.isNaN(t)&&this.buckets.length&&this.bucketsHelper&&{rag:this.setRagScore(t,s)},valueFor:r,trend:this.createTrend(r,i,t,o),...a&&{group:a}});this.createTrend=(e,t,s,r)=>{let i;if(t!==e){const o=+s-+r;i={direction:Math.sign(o),value:Math.abs(o),from:t}}return i};this.validateDefinition=()=>{const{id:e,type:t}=this.definition,s=[];if(this.group||(this.measures.length!==1?s.push(`Measures should only have 1 column defined. Found ${this.measures.length}`):this.titleColumn?this.valueKey||s.push('Missing ID in title measure. Expected measure to include "id: string" field'):s.push('No title column defined. Expected measure to include "display: string" field')),s.length){const r=`Validation: Visualisaton definition: ID: ${e}, type: ${t}, errors: ${s.join(",")}`;throw new Error(r)}};this.createScorecardGroupFromColumns=()=>{const{latest:e,earliest:t,latestTs:s,earliestTs:r}=this.dataset;return e.map((i,o)=>({title:this.createGroupTitle(i),scorecards:Object.keys(i).filter(a=>a!==this.groupKeyId).map(a=>{const d=this.measures.find(R=>R.id===a)?.display||a,p=i[a],{raw:h,rag:m}=p,y=Number(h),S=m!==void 0?Number(m):void 0;this.initBuckets([i],a);const C=`${s}`,w=`${r}`,G=t[o][a]?.raw;return this.createScorecardData({title:d,value:y,rag:S,prevVal:G,valueFor:C,valueFrom:w})})}))};this.createScorecardGroupFromList=()=>{const{latest:e,earliest:t}=this.dataset;return[{title:"",scorecards:e.map((s,r)=>{const i=this.getScorecardValues(s),o=t[r][this.valueKey].raw;return this.createScorecardData({...i,prevVal:o})})}]};this.createScorecardGroupFromListWithGroups=()=>{const{latest:e,earliest:t}=this.dataset;let s=l.default.groupRowsByKey(t,this.groupKeyId),r=l.default.groupRowsByKey(e,this.groupKeyId);return this.groupKeyId===this.titleKey&&(r=[r.flat()],s=[s.flat()]),r.map((o,a)=>({title:this.groupKeyDisplay?`By ${this.groupKeyDisplay}`:"",scorecards:o.map((c,d)=>{const p=this.getScorecardValues(c),m=s[a][d][this.valueKey]?.raw;return this.createScorecardData({...p,prevVal:m})})}))};this.getScorecardValues=e=>{const{latestTs:t,earliestTs:s}=this.dataset,r=`${this.titleColumn?.display} ${e[this.titleKey].raw}`,i=e[this.valueKey],{raw:o,rag:a}=i,c=Number(o),d=a!==void 0?Number(a):void 0;this.initBuckets([e],this.valueKey);const p=`${t}`,h=`${s}`;return{title:r,value:c,rag:d,valueFor:p,valueFrom:h}};this.buildScorecard=()=>{const{latest:e,earliest:t,latestTs:s,earliestTs:r}=this.dataset;return e.map((o,a)=>{const{raw:c,rag:d}=o[this.valueKey],p=t[a][this.valueKey].raw,h=`${s}`,m=`${r}`,y=this.titleColumn?.display;return this.createScorecardData({title:y||"",value:c,rag:d,prevVal:p,valueFor:h,valueFrom:m})})[0]};this.createGroupTitle=e=>{const t=this.groupKeyId?`${e[this.groupKeyId]?.raw}`:"";return this.groupKeyDisplay&&this.groupKeyDisplay.length?`${this.groupKeyDisplay}: ${t}`:t};this.buildGroup=()=>{let e;return this.valueColumn?this.groupKey?e=this.createScorecardGroupFromListWithGroups():e=this.createScorecardGroupFromList():e=this.createScorecardGroupFromColumns(),e};this.build=()=>(this.validateDefinition(),this.group?this.buildGroup():this.buildScorecard());this.group=s,this.dataset=this.getDataset(t,e),s?this.initGroupVars():(this.valueKey=this.measures[0].id,this.titleColumn={display:t.display,id:this.valueKey},this.initBuckets(e,this.valueKey))}}var I=D;0&&(module.exports={ScorecardVisualisation});
 //# sourceMappingURL=Scorecard.js.map

package/dpr/components/_dashboards/scorecard/Scorecard.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/dpr/components/_dashboards/scorecard/Scorecard.ts"],
-  "sourcesContent": ["/* eslint-disable prefer-destructuring */\nimport { DashboardDataResponse } from '../../../types/Metrics'\nimport DashboardVisualisationClass from '../../_charts/chart/DashboardVisualisation'\nimport {\n  DashboardVisualisation,\n  DashboardVisualisationBucket,\n  DashboardVisualisationColumnKey,\n  DashboardVisualisationColumnMeasure,\n} from '../dashboard/types'\nimport DatasetHelper from '../../../utils/datasetHelper'\nimport { CreateScorecardDataArgs, Scorecard, ScorecardDataset, ScorecardGroup, ScorecardTrend } from './types'\nimport Buckets from '../../_charts/chart/Buckets'\n\nclass ScorecardVisualisation extends DashboardVisualisationClass {\n  private dataset: ScorecardDataset\n\n  private groupKey: DashboardVisualisationColumnKey\n\n  private groupKeyId: string\n\n  private groupKeyDisplay: string\n\n  private bucketsHelper: Buckets\n\n  private buckets: DashboardVisualisationBucket[] = []\n\n  private valueColumn: DashboardVisualisationColumnMeasure\n\n  private valueKey: string\n\n  private titleColumn: DashboardVisualisationColumnMeasure\n\n  private titleKey: string\n\n  private group: boolean\n\n  private ragColours: string[] = ['#cce2d8', '#fff7bf', '#f4cdc6']\n\n  constructor(responseData: DashboardDataResponse[], definition: DashboardVisualisation, group = false) {\n    super(responseData, definition)\n    this.group = group\n    this.dataset = this.getDataset(definition, responseData)\n\n    if (group) {\n      this.initGroupVars()\n    } else {\n      this.valueKey = this.measures[0].id\n      this.titleColumn = { display: definition.display, id: this.valueKey }\n      this.initBuckets(responseData, this.valueKey)\n    }\n  }\n\n  private initBuckets = (responseData: DashboardDataResponse[], valueKey: string) => {\n    this.bucketsHelper = new Buckets(responseData, this.definition, valueKey, false, this.ragColours)\n    this.buckets = new Buckets(responseData, this.definition, valueKey, false, this.ragColours).getBuckets()\n  }\n\n  private initGroupVars = () => {\n    this.groupKey = DatasetHelper.getGroupKey(this.keys, this.dataset.latest)\n    this.groupKeyId = this.groupKey?.id\n    this.groupKeyDisplay = this.groupKey?.display\n\n    this.valueColumn = this.measures.find((col) => col.displayValue)\n    if (this.valueColumn) {\n      this.valueKey = this.valueColumn?.id\n      this.titleColumn = this.measures.find((col) => {\n        return col.display || col.display === ''\n      })\n      this.titleKey = this.titleColumn?.id\n    }\n  }\n\n  private getDataset = (scorecardDefinition: DashboardVisualisation, rawData: DashboardDataResponse[]) => {\n    const latestData = DatasetHelper.getLastestDataset(rawData)\n    const latestDataSetRows = DatasetHelper.getDatasetRows(scorecardDefinition, latestData)\n    const latestTs = latestDataSetRows[0]?.ts?.raw\n    const latestFiltered = DatasetHelper.filterRowsByDisplayColumns(scorecardDefinition, latestDataSetRows, true)\n\n    const earliestData = DatasetHelper.getEarliestDataset(rawData)\n    const earliestDataSetRows = DatasetHelper.getDatasetRows(scorecardDefinition, earliestData)\n    const earliestTs = earliestDataSetRows[0]?.ts?.raw\n    const earliestfiltered = DatasetHelper.filterRowsByDisplayColumns(scorecardDefinition, earliestDataSetRows, true)\n\n    return {\n      earliest: earliestfiltered,\n      earliestTs,\n      latest: latestFiltered,\n      latestTs,\n    }\n  }\n\n  private setRagScore = (value: number, rag?: number) => {\n    return this.bucketsHelper.getBucketForValue(value, rag)\n  }\n\n  private createScorecardData = ({\n    title,\n    value,\n    rag,\n    valueFor,\n    valueFrom,\n    prevVal,\n    groupTitle,\n  }: CreateScorecardDataArgs) => {\n    return {\n      title,\n      value,\n      ...(!Number.isNaN(value) && this.buckets.length && { rag: this.setRagScore(<number>value, rag) }),\n      valueFor,\n      trend: this.createTrend(valueFor, valueFrom, value, prevVal),\n      ...(groupTitle && {\n        group: groupTitle,\n      }),\n    }\n  }\n\n  private createTrend = (\n    valueFor: string,\n    valueFrom: string,\n    latestValue: string | number,\n    earliestValue: string | number,\n  ): ScorecardTrend | undefined => {\n    let trendData\n\n    if (valueFrom !== valueFor) {\n      const value = +latestValue - +earliestValue\n      const direction = Math.sign(value)\n      trendData = {\n        direction,\n        value: Math.abs(value),\n        from: valueFrom,\n      }\n    }\n\n    return trendData\n  }\n\n  private validateDefinition = () => {\n    const { id, type } = this.definition\n    const errors = []\n    if (!this.group) {\n      if (this.measures.length !== 1) {\n        errors.push(`Measures should only have 1 column defined. Found ${this.measures.length}`)\n      } else if (!this.titleColumn) {\n        errors.push(`No title column defined. Expected measure to include \"display: string\" field`)\n      } else if (!this.valueKey) {\n        errors.push(`Missing ID in title measure. Expected measure to include \"id: string\" field`)\n      }\n    }\n\n    if (errors.length) {\n      // Throw the error\n      const message = `Validation: Visualisaton definition: ID: ${id}, type: ${type}, errors: ${errors.join(',')}`\n      throw new Error(message)\n    }\n  }\n\n  private createScorecardGroupFromColumns = () => {\n    const { latest, earliest, latestTs, earliestTs } = this.dataset\n\n    return latest.map((row, rowIndex) => {\n      return {\n        title: this.createGroupTitle(row),\n        scorecards: Object.keys(row)\n          .filter((colId) => colId !== this.groupKeyId)\n          .map((colId) => {\n            const measure = this.measures.find((m) => m.id === colId)\n            const title = measure?.display || colId\n            const rowCol = row[colId]\n            const { raw, rag: ragScore } = rowCol\n            const value = Number(raw)\n\n            const rag = ragScore !== undefined ? Number(ragScore) : undefined\n            this.initBuckets([row], colId)\n\n            const valueFor = `${latestTs}`\n            const valueFrom = `${earliestTs}`\n\n            const comparisonRow = earliest[rowIndex]\n            const prevVal = comparisonRow[colId]?.raw\n\n            return this.createScorecardData({\n              title,\n              value,\n              rag,\n              prevVal,\n              valueFor,\n              valueFrom,\n            })\n          }),\n      }\n    })\n  }\n\n  private createScorecardGroupFromList = (): ScorecardGroup[] => {\n    const { latest, earliest } = this.dataset\n    return [\n      {\n        title: '',\n        scorecards: latest.map((row: DashboardDataResponse, index: number) => {\n          const values = this.getScorecardValues(row)\n          const prevVal = earliest[index][this.valueKey].raw\n          return this.createScorecardData({\n            ...values,\n            prevVal,\n          })\n        }),\n      },\n    ]\n  }\n\n  private createScorecardGroupFromListWithGroups = () => {\n    const { latest, earliest } = this.dataset\n\n    let earliestGroupedByKey = DatasetHelper.groupRowsByKey(earliest, this.groupKeyId)\n    let latestGroupedByKey = DatasetHelper.groupRowsByKey(latest, this.groupKeyId)\n    if (this.groupKeyId === this.titleKey) {\n      latestGroupedByKey = [latestGroupedByKey.flat()]\n      earliestGroupedByKey = [earliestGroupedByKey.flat()]\n    }\n\n    const scorecardGroup = latestGroupedByKey.map((group, groupIndex) => {\n      return {\n        title: this.createGroupTitle(group[0]),\n        scorecards: group.map((row, rowIndex) => {\n          const values = this.getScorecardValues(row)\n          const comparisonRow = earliestGroupedByKey[groupIndex][rowIndex]\n          const prevVal = comparisonRow[this.valueKey]?.raw\n\n          return this.createScorecardData({\n            ...values,\n            prevVal,\n          })\n        }),\n      }\n    })\n\n    return scorecardGroup\n  }\n\n  private getScorecardValues = (row: DashboardDataResponse) => {\n    const { latestTs, earliestTs } = this.dataset\n    const title = `${this.titleColumn.display} ${row[this.titleKey].raw}`\n    const rowCol = row[this.valueKey]\n    const { raw, rag: ragScore } = rowCol\n    const value = Number(raw)\n    const rag = ragScore !== undefined ? Number(ragScore) : undefined\n    this.initBuckets([row], this.valueKey)\n    const valueFor = `${latestTs}`\n    const valueFrom = `${earliestTs}`\n\n    return {\n      title,\n      value,\n      rag,\n      valueFor,\n      valueFrom,\n    }\n  }\n\n  /**\n   * Builds a single scorecard\n   *\n   * @return {Scorecard}\n   */\n  private buildScorecard = () => {\n    const { latest, earliest, latestTs, earliestTs } = this.dataset\n    const scorecordArr: Scorecard[] = latest.map((datasetRow: DashboardDataResponse, index: number) => {\n      const { raw: value, rag } = datasetRow[this.valueKey]\n      const prevVal = earliest[index][this.valueKey].raw\n      const valueFor = `${latestTs}`\n      const valueFrom = `${earliestTs}`\n      const title = this.titleColumn.display\n\n      return this.createScorecardData({\n        title,\n        value,\n        rag,\n        prevVal,\n        valueFor,\n        valueFrom,\n      })\n    })\n\n    return scorecordArr[0]\n  }\n\n  private createGroupTitle = (row: DashboardDataResponse) => {\n    const title = this.groupKeyId ? `${row[this.groupKeyId]?.raw}` : ''\n    return this.groupKeyDisplay && this.groupKeyDisplay.length ? `${this.groupKeyDisplay}: ${title}` : title\n  }\n\n  private buildGroup = () => {\n    let scorecardGroup: ScorecardGroup[]\n    if (!this.valueColumn) {\n      scorecardGroup = this.createScorecardGroupFromColumns()\n    } else if (this.groupKey) {\n      scorecardGroup = this.createScorecardGroupFromListWithGroups()\n    } else {\n      scorecardGroup = this.createScorecardGroupFromList()\n    }\n    return scorecardGroup\n  }\n\n  build = () => {\n    this.validateDefinition()\n    if (this.group) {\n      return this.buildGroup()\n    }\n    return this.buildScorecard()\n  }\n}\n\nexport { ScorecardVisualisation }\nexport default ScorecardVisualisation\n"],
-  "mappings": "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",
+  "sourcesContent": ["/* eslint-disable prefer-destructuring */\nimport { DashboardDataResponse } from '../../../types/Metrics'\nimport DashboardVisualisationClass from '../dashboard-visualisation/DashboardVisualisation'\nimport { DashboardVisualisationBucket } from '../dashboard-visualisation/types'\nimport DatasetHelper from '../../../utils/datasetHelper'\nimport { CreateScorecardDataArgs, Scorecard, ScorecardDataset, ScorecardGroup, ScorecardTrend } from './types'\nimport Buckets from '../../_charts/chart/Buckets'\nimport { components } from '../../../types/api'\n\nclass ScorecardVisualisation extends DashboardVisualisationClass {\n  private dataset: ScorecardDataset\n\n  private groupKey: components['schemas']['DashboardVisualisationColumnDefinition'] | undefined\n\n  private groupKeyId: string | undefined\n\n  private groupKeyDisplay: string | undefined\n\n  private bucketsHelper: Buckets | undefined\n\n  private buckets: DashboardVisualisationBucket[] = []\n\n  private valueColumn: components['schemas']['DashboardVisualisationColumnDefinition'] | undefined\n\n  private valueKey = ''\n\n  private titleColumn: components['schemas']['DashboardVisualisationColumnDefinition'] | undefined\n\n  private titleKey = ''\n\n  private group: boolean\n\n  private ragColours: string[] = ['#cce2d8', '#fff7bf', '#f4cdc6']\n\n  constructor(\n    responseData: DashboardDataResponse[],\n    definition: components['schemas']['DashboardVisualisationDefinition'],\n    group = false,\n  ) {\n    super(responseData, definition)\n    this.group = group\n    this.dataset = this.getDataset(definition, responseData)\n\n    if (group) {\n      this.initGroupVars()\n    } else {\n      this.valueKey = this.measures[0].id\n      this.titleColumn = { display: definition.display, id: this.valueKey }\n      this.initBuckets(responseData, this.valueKey)\n    }\n  }\n\n  private initBuckets = (responseData: DashboardDataResponse[], valueKey: string) => {\n    if (this.definition.options?.buckets || this.definition.options?.useRagColour) {\n      this.bucketsHelper = new Buckets(responseData, this.definition, valueKey, false, this.ragColours)\n      this.buckets = new Buckets(responseData, this.definition, valueKey, false, this.ragColours).getBuckets()\n    }\n  }\n\n  private initGroupVars = () => {\n    this.groupKey = DatasetHelper.getGroupKey(this.keys, this.dataset.latest)\n    this.groupKeyId = this.groupKey?.id\n    this.groupKeyDisplay = this.groupKey?.display\n\n    this.valueColumn = this.measures.find((col) => col.displayValue)\n    if (this.valueColumn) {\n      this.valueKey = this.valueColumn?.id\n      this.titleColumn = this.measures.find((col) => {\n        return col.display || col.display === ''\n      })\n      this.titleKey = this.titleColumn?.id || ''\n    }\n  }\n\n  private getDataset = (\n    scorecardDefinition: components['schemas']['DashboardVisualisationDefinition'],\n    rawData: DashboardDataResponse[],\n  ) => {\n    const latestData = DatasetHelper.getLastestDataset(rawData)\n    const latestDataSetRows = DatasetHelper.getDatasetRows(scorecardDefinition, latestData)\n    const latestTs = latestDataSetRows[0]?.ts?.raw\n    const latestFiltered = DatasetHelper.filterRowsByDisplayColumns(scorecardDefinition, latestDataSetRows, true)\n\n    const earliestData = DatasetHelper.getEarliestDataset(rawData)\n    const earliestDataSetRows = DatasetHelper.getDatasetRows(scorecardDefinition, earliestData)\n    const earliestTs = earliestDataSetRows[0]?.ts?.raw\n    const earliestfiltered = DatasetHelper.filterRowsByDisplayColumns(scorecardDefinition, earliestDataSetRows, true)\n\n    return {\n      earliest: earliestfiltered,\n      earliestTs,\n      latest: latestFiltered,\n      latestTs,\n    }\n  }\n\n  private setRagScore = (value: number, rag?: number) => {\n    return this.bucketsHelper?.getBucketForValue(value, rag)\n  }\n\n  private createScorecardData = ({\n    title,\n    value,\n    rag,\n    valueFor,\n    valueFrom,\n    prevVal,\n    groupTitle,\n  }: CreateScorecardDataArgs): Scorecard => {\n    return {\n      id: this.definition.id,\n      title,\n      value,\n      ...(!Number.isNaN(value) &&\n        this.buckets.length &&\n        this.bucketsHelper && { rag: this.setRagScore(<number>value, rag) }),\n      valueFor,\n      trend: this.createTrend(valueFor, valueFrom, value, prevVal),\n      ...(groupTitle && {\n        group: groupTitle,\n      }),\n    }\n  }\n\n  private createTrend = (\n    valueFor: string,\n    valueFrom: string,\n    latestValue: string | number,\n    earliestValue: string | number,\n  ): ScorecardTrend | undefined => {\n    let trendData\n\n    if (valueFrom !== valueFor) {\n      const value = +latestValue - +earliestValue\n      const direction = Math.sign(value)\n      trendData = {\n        direction,\n        value: Math.abs(value),\n        from: valueFrom,\n      }\n    }\n\n    return trendData\n  }\n\n  private validateDefinition = () => {\n    const { id, type } = this.definition\n    const errors = []\n    if (!this.group) {\n      if (this.measures.length !== 1) {\n        errors.push(`Measures should only have 1 column defined. Found ${this.measures.length}`)\n      } else if (!this.titleColumn) {\n        errors.push(`No title column defined. Expected measure to include \"display: string\" field`)\n      } else if (!this.valueKey) {\n        errors.push(`Missing ID in title measure. Expected measure to include \"id: string\" field`)\n      }\n    }\n\n    if (errors.length) {\n      // Throw the error\n      const message = `Validation: Visualisaton definition: ID: ${id}, type: ${type}, errors: ${errors.join(',')}`\n      throw new Error(message)\n    }\n  }\n\n  private createScorecardGroupFromColumns = () => {\n    const { latest, earliest, latestTs, earliestTs } = this.dataset\n\n    return latest.map((row, rowIndex) => {\n      return {\n        title: this.createGroupTitle(row),\n        scorecards: Object.keys(row)\n          .filter((colId) => colId !== this.groupKeyId)\n          .map((colId) => {\n            const measure = this.measures.find((m) => m.id === colId)\n            const title = measure?.display || colId\n            const rowCol = row[colId]\n            const { raw, rag: ragScore } = rowCol\n            const value = Number(raw)\n\n            const rag = ragScore !== undefined ? Number(ragScore) : undefined\n            this.initBuckets([row], colId)\n\n            const valueFor = `${latestTs}`\n            const valueFrom = `${earliestTs}`\n\n            const comparisonRow = earliest[rowIndex]\n            const prevVal = comparisonRow[colId]?.raw\n\n            return this.createScorecardData({\n              title,\n              value,\n              rag,\n              prevVal,\n              valueFor,\n              valueFrom,\n            })\n          }),\n      }\n    })\n  }\n\n  private createScorecardGroupFromList = (): ScorecardGroup[] => {\n    const { latest, earliest } = this.dataset\n    return [\n      {\n        title: '',\n        scorecards: latest.map((row: DashboardDataResponse, index: number) => {\n          const values = this.getScorecardValues(row)\n          const prevVal = earliest[index][this.valueKey].raw\n          return this.createScorecardData({\n            ...values,\n            prevVal,\n          })\n        }),\n      },\n    ]\n  }\n\n  private createScorecardGroupFromListWithGroups = () => {\n    const { latest, earliest } = this.dataset\n\n    let earliestGroupedByKey = DatasetHelper.groupRowsByKey(earliest, <string>this.groupKeyId)\n    let latestGroupedByKey = DatasetHelper.groupRowsByKey(latest, <string>this.groupKeyId)\n    if (this.groupKeyId === this.titleKey) {\n      latestGroupedByKey = [latestGroupedByKey.flat()]\n      earliestGroupedByKey = [earliestGroupedByKey.flat()]\n    }\n\n    const scorecardGroup = latestGroupedByKey.map((group, groupIndex) => {\n      return {\n        title: this.groupKeyDisplay ? `By ${this.groupKeyDisplay}` : '',\n        scorecards: group.map((row, rowIndex) => {\n          const values = this.getScorecardValues(row)\n          const comparisonRow = earliestGroupedByKey[groupIndex][rowIndex]\n          const prevVal = comparisonRow[this.valueKey]?.raw\n\n          return this.createScorecardData({\n            ...values,\n            prevVal,\n          })\n        }),\n      }\n    })\n\n    return scorecardGroup\n  }\n\n  private getScorecardValues = (row: DashboardDataResponse) => {\n    const { latestTs, earliestTs } = this.dataset\n    const title = `${this.titleColumn?.display} ${row[this.titleKey].raw}`\n    const rowCol = row[this.valueKey]\n    const { raw, rag: ragScore } = rowCol\n    const value = Number(raw)\n    const rag = ragScore !== undefined ? Number(ragScore) : undefined\n    this.initBuckets([row], this.valueKey)\n    const valueFor = `${latestTs}`\n    const valueFrom = `${earliestTs}`\n\n    return {\n      title,\n      value,\n      rag,\n      valueFor,\n      valueFrom,\n    }\n  }\n\n  /**\n   * Builds a single scorecard\n   *\n   * @return {Scorecard}\n   */\n  private buildScorecard = () => {\n    const { latest, earliest, latestTs, earliestTs } = this.dataset\n    const scorecordArr: Scorecard[] = latest.map((datasetRow: DashboardDataResponse, index: number) => {\n      const { raw: value, rag } = datasetRow[this.valueKey]\n      const prevVal = earliest[index][this.valueKey].raw\n      const valueFor = `${latestTs}`\n      const valueFrom = `${earliestTs}`\n      const title = this.titleColumn?.display\n\n      return this.createScorecardData({\n        title: title || '',\n        value,\n        rag,\n        prevVal,\n        valueFor,\n        valueFrom,\n      })\n    })\n\n    return scorecordArr[0]\n  }\n\n  private createGroupTitle = (row: DashboardDataResponse) => {\n    const title = this.groupKeyId ? `${row[this.groupKeyId]?.raw}` : ''\n    return this.groupKeyDisplay && this.groupKeyDisplay.length ? `${this.groupKeyDisplay}: ${title}` : title\n  }\n\n  private buildGroup = () => {\n    let scorecardGroup: ScorecardGroup[]\n    if (!this.valueColumn) {\n      scorecardGroup = this.createScorecardGroupFromColumns()\n    } else if (this.groupKey) {\n      scorecardGroup = this.createScorecardGroupFromListWithGroups()\n    } else {\n      scorecardGroup = this.createScorecardGroupFromList()\n    }\n    return scorecardGroup\n  }\n\n  build = () => {\n    this.validateDefinition()\n    if (this.group) {\n      return this.buildGroup()\n    }\n    return this.buildScorecard()\n  }\n}\n\nexport { ScorecardVisualisation }\nexport default ScorecardVisualisation\n"],
+  "mappings": "6iBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,4BAAAE,EAAA,YAAAC,IAAA,eAAAC,EAAAJ,GAEA,IAAAK,EAAwC,gEAExCC,EAA0B,2CAE1BC,EAAoB,0CAGpB,MAAML,UAA+B,EAAAM,OAA4B,CAyB/D,YACEC,EACAC,EACAC,EAAQ,GACR,CACA,MAAMF,EAAcC,CAAU,EAnBhC,KAAQ,QAA0C,CAAC,EAInD,KAAQ,SAAW,GAInB,KAAQ,SAAW,GAInB,KAAQ,WAAuB,CAAC,UAAW,UAAW,SAAS,EAoB/D,KAAQ,YAAc,CAACD,EAAuCG,IAAqB,EAC7E,KAAK,WAAW,SAAS,SAAW,KAAK,WAAW,SAAS,gBAC/D,KAAK,cAAgB,IAAI,EAAAC,QAAQJ,EAAc,KAAK,WAAYG,EAAU,GAAO,KAAK,UAAU,EAChG,KAAK,QAAU,IAAI,EAAAC,QAAQJ,EAAc,KAAK,WAAYG,EAAU,GAAO,KAAK,UAAU,EAAE,WAAW,EAE3G,EAEA,KAAQ,cAAgB,IAAM,CAC5B,KAAK,SAAW,EAAAE,QAAc,YAAY,KAAK,KAAM,KAAK,QAAQ,MAAM,EACxE,KAAK,WAAa,KAAK,UAAU,GACjC,KAAK,gBAAkB,KAAK,UAAU,QAEtC,KAAK,YAAc,KAAK,SAAS,KAAMC,GAAQA,EAAI,YAAY,EAC3D,KAAK,cACP,KAAK,SAAW,KAAK,aAAa,GAClC,KAAK,YAAc,KAAK,SAAS,KAAMA,GAC9BA,EAAI,SAAWA,EAAI,UAAY,EACvC,EACD,KAAK,SAAW,KAAK,aAAa,IAAM,GAE5C,EAEA,KAAQ,WAAa,CACnBC,EACAC,IACG,CACH,MAAMC,EAAa,EAAAJ,QAAc,kBAAkBG,CAAO,EACpDE,EAAoB,EAAAL,QAAc,eAAeE,EAAqBE,CAAU,EAChFE,EAAWD,EAAkB,CAAC,GAAG,IAAI,IACrCE,EAAiB,EAAAP,QAAc,2BAA2BE,EAAqBG,EAAmB,EAAI,EAEtGG,EAAe,EAAAR,QAAc,mBAAmBG,CAAO,EACvDM,EAAsB,EAAAT,QAAc,eAAeE,EAAqBM,CAAY,EACpFE,EAAaD,EAAoB,CAAC,GAAG,IAAI,IAG/C,MAAO,CACL,SAHuB,EAAAT,QAAc,2BAA2BE,EAAqBO,EAAqB,EAAI,EAI9G,WAAAC,EACA,OAAQH,EACR,SAAAD,CACF,CACF,EAEA,KAAQ,YAAc,CAACK,EAAeC,IAC7B,KAAK,eAAe,kBAAkBD,EAAOC,CAAG,EAGzD,KAAQ,oBAAsB,CAAC,CAC7B,MAAAC,EACA,MAAAF,EACA,IAAAC,EACA,SAAAE,EACA,UAAAC,EACA,QAAAC,EACA,WAAAC,CACF,KACS,CACL,GAAI,KAAK,WAAW,GACpB,MAAAJ,EACA,MAAAF,EACA,GAAI,CAAC,OAAO,MAAMA,CAAK,GACrB,KAAK,QAAQ,QACb,KAAK,eAAiB,CAAE,IAAK,KAAK,YAAoBA,EAAOC,CAAG,CAAE,EACpE,SAAAE,EACA,MAAO,KAAK,YAAYA,EAAUC,EAAWJ,EAAOK,CAAO,EAC3D,GAAIC,GAAc,CAChB,MAAOA,CACT,CACF,GAGF,KAAQ,YAAc,CACpBH,EACAC,EACAG,EACAC,IAC+B,CAC/B,IAAIC,EAEJ,GAAIL,IAAcD,EAAU,CAC1B,MAAMH,EAAQ,CAACO,EAAc,CAACC,EAE9BC,EAAY,CACV,UAFgB,KAAK,KAAKT,CAAK,EAG/B,MAAO,KAAK,IAAIA,CAAK,EACrB,KAAMI,CACR,CACF,CAEA,OAAOK,CACT,EAEA,KAAQ,mBAAqB,IAAM,CACjC,KAAM,CAAE,GAAAC,EAAI,KAAAC,CAAK,EAAI,KAAK,WACpBC,EAAS,CAAC,EAWhB,GAVK,KAAK,QACJ,KAAK,SAAS,SAAW,EAC3BA,EAAO,KAAK,qDAAqD,KAAK,SAAS,MAAM,EAAE,EAC7E,KAAK,YAEL,KAAK,UACfA,EAAO,KAAK,6EAA6E,EAFzFA,EAAO,KAAK,8EAA8E,GAM1FA,EAAO,OAAQ,CAEjB,MAAMC,EAAU,4CAA4CH,CAAE,WAAWC,CAAI,aAAaC,EAAO,KAAK,GAAG,CAAC,GAC1G,MAAM,IAAI,MAAMC,CAAO,CACzB,CACF,EAEA,KAAQ,gCAAkC,IAAM,CAC9C,KAAM,CAAE,OAAAC,EAAQ,SAAAC,EAAU,SAAApB,EAAU,WAAAI,CAAW,EAAI,KAAK,QAExD,OAAOe,EAAO,IAAI,CAACE,EAAKC,KACf,CACL,MAAO,KAAK,iBAAiBD,CAAG,EAChC,WAAY,OAAO,KAAKA,CAAG,EACxB,OAAQE,GAAUA,IAAU,KAAK,UAAU,EAC3C,IAAKA,GAAU,CAEd,MAAMhB,EADU,KAAK,SAAS,KAAMiB,GAAMA,EAAE,KAAOD,CAAK,GACjC,SAAWA,EAC5BE,EAASJ,EAAIE,CAAK,EAClB,CAAE,IAAAG,EAAK,IAAKC,CAAS,EAAIF,EACzBpB,EAAQ,OAAOqB,CAAG,EAElBpB,EAAMqB,IAAa,OAAY,OAAOA,CAAQ,EAAI,OACxD,KAAK,YAAY,CAACN,CAAG,EAAGE,CAAK,EAE7B,MAAMf,EAAW,GAAGR,CAAQ,GACtBS,EAAY,GAAGL,CAAU,GAGzBM,EADgBU,EAASE,CAAQ,EACTC,CAAK,GAAG,IAEtC,OAAO,KAAK,oBAAoB,CAC9B,MAAAhB,EACA,MAAAF,EACA,IAAAC,EACA,QAAAI,EACA,SAAAF,EACA,UAAAC,CACF,CAAC,CACH,CAAC,CACL,EACD,CACH,EAEA,KAAQ,6BAA+B,IAAwB,CAC7D,KAAM,CAAE,OAAAU,EAAQ,SAAAC,CAAS,EAAI,KAAK,QAClC,MAAO,CACL,CACE,MAAO,GACP,WAAYD,EAAO,IAAI,CAACE,EAA4BO,IAAkB,CACpE,MAAMC,EAAS,KAAK,mBAAmBR,CAAG,EACpCX,EAAUU,EAASQ,CAAK,EAAE,KAAK,QAAQ,EAAE,IAC/C,OAAO,KAAK,oBAAoB,CAC9B,GAAGC,EACH,QAAAnB,CACF,CAAC,CACH,CAAC,CACH,CACF,CACF,EAEA,KAAQ,uCAAyC,IAAM,CACrD,KAAM,CAAE,OAAAS,EAAQ,SAAAC,CAAS,EAAI,KAAK,QAElC,IAAIU,EAAuB,EAAApC,QAAc,eAAe0B,EAAkB,KAAK,UAAU,EACrFW,EAAqB,EAAArC,QAAc,eAAeyB,EAAgB,KAAK,UAAU,EACrF,OAAI,KAAK,aAAe,KAAK,WAC3BY,EAAqB,CAACA,EAAmB,KAAK,CAAC,EAC/CD,EAAuB,CAACA,EAAqB,KAAK,CAAC,GAG9BC,EAAmB,IAAI,CAACxC,EAAOyC,KAC7C,CACL,MAAO,KAAK,gBAAkB,MAAM,KAAK,eAAe,GAAK,GAC7D,WAAYzC,EAAM,IAAI,CAAC8B,EAAKC,IAAa,CACvC,MAAMO,EAAS,KAAK,mBAAmBR,CAAG,EAEpCX,EADgBoB,EAAqBE,CAAU,EAAEV,CAAQ,EACjC,KAAK,QAAQ,GAAG,IAE9C,OAAO,KAAK,oBAAoB,CAC9B,GAAGO,EACH,QAAAnB,CACF,CAAC,CACH,CAAC,CACH,EACD,CAGH,EAEA,KAAQ,mBAAsBW,GAA+B,CAC3D,KAAM,CAAE,SAAArB,EAAU,WAAAI,CAAW,EAAI,KAAK,QAChCG,EAAQ,GAAG,KAAK,aAAa,OAAO,IAAIc,EAAI,KAAK,QAAQ,EAAE,GAAG,GAC9DI,EAASJ,EAAI,KAAK,QAAQ,EAC1B,CAAE,IAAAK,EAAK,IAAKC,CAAS,EAAIF,EACzBpB,EAAQ,OAAOqB,CAAG,EAClBpB,EAAMqB,IAAa,OAAY,OAAOA,CAAQ,EAAI,OACxD,KAAK,YAAY,CAACN,CAAG,EAAG,KAAK,QAAQ,EACrC,MAAMb,EAAW,GAAGR,CAAQ,GACtBS,EAAY,GAAGL,CAAU,GAE/B,MAAO,CACL,MAAAG,EACA,MAAAF,EACA,IAAAC,EACA,SAAAE,EACA,UAAAC,CACF,CACF,EAOA,KAAQ,eAAiB,IAAM,CAC7B,KAAM,CAAE,OAAAU,EAAQ,SAAAC,EAAU,SAAApB,EAAU,WAAAI,CAAW,EAAI,KAAK,QAkBxD,OAjBkCe,EAAO,IAAI,CAACc,EAAmCL,IAAkB,CACjG,KAAM,CAAE,IAAKvB,EAAO,IAAAC,CAAI,EAAI2B,EAAW,KAAK,QAAQ,EAC9CvB,EAAUU,EAASQ,CAAK,EAAE,KAAK,QAAQ,EAAE,IACzCpB,EAAW,GAAGR,CAAQ,GACtBS,EAAY,GAAGL,CAAU,GACzBG,EAAQ,KAAK,aAAa,QAEhC,OAAO,KAAK,oBAAoB,CAC9B,MAAOA,GAAS,GAChB,MAAAF,EACA,IAAAC,EACA,QAAAI,EACA,SAAAF,EACA,UAAAC,CACF,CAAC,CACH,CAAC,EAEmB,CAAC,CACvB,EAEA,KAAQ,iBAAoBY,GAA+B,CACzD,MAAMd,EAAQ,KAAK,WAAa,GAAGc,EAAI,KAAK,UAAU,GAAG,GAAG,GAAK,GACjE,OAAO,KAAK,iBAAmB,KAAK,gBAAgB,OAAS,GAAG,KAAK,eAAe,KAAKd,CAAK,GAAKA,CACrG,EAEA,KAAQ,WAAa,IAAM,CACzB,IAAI2B,EACJ,OAAK,KAAK,YAEC,KAAK,SACdA,EAAiB,KAAK,uCAAuC,EAE7DA,EAAiB,KAAK,6BAA6B,EAJnDA,EAAiB,KAAK,gCAAgC,EAMjDA,CACT,EAEA,WAAQ,KACN,KAAK,mBAAmB,EACpB,KAAK,MACA,KAAK,WAAW,EAElB,KAAK,eAAe,GArR3B,KAAK,MAAQ3C,EACb,KAAK,QAAU,KAAK,WAAWD,EAAYD,CAAY,EAEnDE,EACF,KAAK,cAAc,GAEnB,KAAK,SAAW,KAAK,SAAS,CAAC,EAAE,GACjC,KAAK,YAAc,CAAE,QAASD,EAAW,QAAS,GAAI,KAAK,QAAS,EACpE,KAAK,YAAYD,EAAc,KAAK,QAAQ,EAEhD,CA6QF,CAGA,IAAON,EAAQD",
   "names": ["Scorecard_exports", "__export", "ScorecardVisualisation", "Scorecard_default", "__toCommonJS", "import_DashboardVisualisation", "import_datasetHelper", "import_Buckets", "DashboardVisualisationClass", "responseData", "definition", "group", "valueKey", "Buckets", "DatasetHelper", "col", "scorecardDefinition", "rawData", "latestData", "latestDataSetRows", "latestTs", "latestFiltered", "earliestData", "earliestDataSetRows", "earliestTs", "value", "rag", "title", "valueFor", "valueFrom", "prevVal", "groupTitle", "latestValue", "earliestValue", "trendData", "id", "type", "errors", "message", "latest", "earliest", "row", "rowIndex", "colId", "m", "rowCol", "raw", "ragScore", "index", "values", "earliestGroupedByKey", "latestGroupedByKey", "groupIndex", "datasetRow", "scorecardGroup"]
 }

package/dpr/components/_dashboards/scorecard/Scorecard.ts

@@ -1,42 +1,42 @@
 /* eslint-disable prefer-destructuring */
 import { DashboardDataResponse } from '../../../types/Metrics'
-import DashboardVisualisationClass from '../../_charts/chart/DashboardVisualisation'
-import {
-  DashboardVisualisation,
-  DashboardVisualisationBucket,
-  DashboardVisualisationColumnKey,
-  DashboardVisualisationColumnMeasure,
-} from '../dashboard/types'
+import DashboardVisualisationClass from '../dashboard-visualisation/DashboardVisualisation'
+import { DashboardVisualisationBucket } from '../dashboard-visualisation/types'
 import DatasetHelper from '../../../utils/datasetHelper'
 import { CreateScorecardDataArgs, Scorecard, ScorecardDataset, ScorecardGroup, ScorecardTrend } from './types'
 import Buckets from '../../_charts/chart/Buckets'
+import { components } from '../../../types/api'
 
 class ScorecardVisualisation extends DashboardVisualisationClass {
   private dataset: ScorecardDataset
 
-  private groupKey: DashboardVisualisationColumnKey
+  private groupKey: components['schemas']['DashboardVisualisationColumnDefinition'] | undefined
 
-  private groupKeyId: string
+  private groupKeyId: string | undefined
 
-  private groupKeyDisplay: string
+  private groupKeyDisplay: string | undefined
 
-  private bucketsHelper: Buckets
+  private bucketsHelper: Buckets | undefined
 
   private buckets: DashboardVisualisationBucket[] = []
 
-  private valueColumn: DashboardVisualisationColumnMeasure
+  private valueColumn: components['schemas']['DashboardVisualisationColumnDefinition'] | undefined
 
-  private valueKey: string
+  private valueKey = ''
 
-  private titleColumn: DashboardVisualisationColumnMeasure
+  private titleColumn: components['schemas']['DashboardVisualisationColumnDefinition'] | undefined
 
-  private titleKey: string
+  private titleKey = ''
 
   private group: boolean
 
   private ragColours: string[] = ['#cce2d8', '#fff7bf', '#f4cdc6']
 
-  constructor(responseData: DashboardDataResponse[], definition: DashboardVisualisation, group = false) {
+  constructor(
+    responseData: DashboardDataResponse[],
+    definition: components['schemas']['DashboardVisualisationDefinition'],
+    group = false,
+  ) {
     super(responseData, definition)
     this.group = group
     this.dataset = this.getDataset(definition, responseData)
@@ -51,8 +51,10 @@ class ScorecardVisualisation extends DashboardVisualisationClass {
   }
 
   private initBuckets = (responseData: DashboardDataResponse[], valueKey: string) => {
-    this.bucketsHelper = new Buckets(responseData, this.definition, valueKey, false, this.ragColours)
-    this.buckets = new Buckets(responseData, this.definition, valueKey, false, this.ragColours).getBuckets()
+    if (this.definition.options?.buckets || this.definition.options?.useRagColour) {
+      this.bucketsHelper = new Buckets(responseData, this.definition, valueKey, false, this.ragColours)
+      this.buckets = new Buckets(responseData, this.definition, valueKey, false, this.ragColours).getBuckets()
+    }
   }
 
   private initGroupVars = () => {
@@ -66,11 +68,14 @@ class ScorecardVisualisation extends DashboardVisualisationClass {
       this.titleColumn = this.measures.find((col) => {
         return col.display || col.display === ''
       })
-      this.titleKey = this.titleColumn?.id
+      this.titleKey = this.titleColumn?.id || ''
     }
   }
 
-  private getDataset = (scorecardDefinition: DashboardVisualisation, rawData: DashboardDataResponse[]) => {
+  private getDataset = (
+    scorecardDefinition: components['schemas']['DashboardVisualisationDefinition'],
+    rawData: DashboardDataResponse[],
+  ) => {
     const latestData = DatasetHelper.getLastestDataset(rawData)
     const latestDataSetRows = DatasetHelper.getDatasetRows(scorecardDefinition, latestData)
     const latestTs = latestDataSetRows[0]?.ts?.raw
@@ -90,7 +95,7 @@ class ScorecardVisualisation extends DashboardVisualisationClass {
   }
 
   private setRagScore = (value: number, rag?: number) => {
-    return this.bucketsHelper.getBucketForValue(value, rag)
+    return this.bucketsHelper?.getBucketForValue(value, rag)
   }
 
   private createScorecardData = ({
@@ -101,11 +106,14 @@ class ScorecardVisualisation extends DashboardVisualisationClass {
     valueFrom,
     prevVal,
     groupTitle,
-  }: CreateScorecardDataArgs) => {
+  }: CreateScorecardDataArgs): Scorecard => {
     return {
+      id: this.definition.id,
       title,
       value,
-      ...(!Number.isNaN(value) && this.buckets.length && { rag: this.setRagScore(<number>value, rag) }),
+      ...(!Number.isNaN(value) &&
+        this.buckets.length &&
+        this.bucketsHelper && { rag: this.setRagScore(<number>value, rag) }),
       valueFor,
       trend: this.createTrend(valueFor, valueFrom, value, prevVal),
       ...(groupTitle && {
@@ -212,8 +220,8 @@ class ScorecardVisualisation extends DashboardVisualisationClass {
   private createScorecardGroupFromListWithGroups = () => {
     const { latest, earliest } = this.dataset
 
-    let earliestGroupedByKey = DatasetHelper.groupRowsByKey(earliest, this.groupKeyId)
-    let latestGroupedByKey = DatasetHelper.groupRowsByKey(latest, this.groupKeyId)
+    let earliestGroupedByKey = DatasetHelper.groupRowsByKey(earliest, <string>this.groupKeyId)
+    let latestGroupedByKey = DatasetHelper.groupRowsByKey(latest, <string>this.groupKeyId)
     if (this.groupKeyId === this.titleKey) {
       latestGroupedByKey = [latestGroupedByKey.flat()]
       earliestGroupedByKey = [earliestGroupedByKey.flat()]
@@ -221,7 +229,7 @@ class ScorecardVisualisation extends DashboardVisualisationClass {
 
     const scorecardGroup = latestGroupedByKey.map((group, groupIndex) => {
       return {
-        title: this.createGroupTitle(group[0]),
+        title: this.groupKeyDisplay ? `By ${this.groupKeyDisplay}` : '',
         scorecards: group.map((row, rowIndex) => {
           const values = this.getScorecardValues(row)
           const comparisonRow = earliestGroupedByKey[groupIndex][rowIndex]
@@ -240,7 +248,7 @@ class ScorecardVisualisation extends DashboardVisualisationClass {
 
   private getScorecardValues = (row: DashboardDataResponse) => {
     const { latestTs, earliestTs } = this.dataset
-    const title = `${this.titleColumn.display} ${row[this.titleKey].raw}`
+    const title = `${this.titleColumn?.display} ${row[this.titleKey].raw}`
     const rowCol = row[this.valueKey]
     const { raw, rag: ragScore } = rowCol
     const value = Number(raw)
@@ -270,10 +278,10 @@ class ScorecardVisualisation extends DashboardVisualisationClass {
       const prevVal = earliest[index][this.valueKey].raw
       const valueFor = `${latestTs}`
       const valueFrom = `${earliestTs}`
-      const title = this.titleColumn.display
+      const title = this.titleColumn?.display
 
       return this.createScorecardData({
-        title,
+        title: title || '',
         value,
         rag,
         prevVal,

package/dpr/components/_dashboards/scorecard/types.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/dpr/components/_dashboards/scorecard/types.ts"],
-  "sourcesContent": ["import { DashboardDataResponse } from '../../../types/Metrics'\n\nexport interface Scorecard {\n  title: string\n  group?: string\n  value: number | string\n  trend?: ScorecardTrend\n  link?: {\n    href: '#'\n    displayName: 'View breakdown'\n  }\n  valueFor?: string\n  rag?: ScorecardRag\n}\n\nexport interface ScorecardSubGroup {\n  name: string\n  scorecards: Scorecard[]\n}\n\nexport interface ScorecardGroup {\n  title?: string\n  description?: string\n  scorecards: Scorecard[]\n}\n\nexport interface ScorecardTrend {\n  direction: number\n  value: number\n  from: string\n}\n\nexport interface ScorecardRag {\n  score: number\n  colour: string\n}\n\nexport interface ScorecardDataset {\n  earliest: DashboardDataResponse[]\n  earliestTs: string | number\n  latest: DashboardDataResponse[]\n  latestTs: string | number\n}\n\nexport interface CreateScorecardDataArgs {\n  title: string\n  value: string | number\n  rag?: number\n  valueFor: string\n  valueFrom: string\n  prevVal: string | number\n  groupTitle?: string\n}\n"],
+  "sourcesContent": ["import { DashboardDataResponse } from '../../../types/Metrics'\n\nexport interface Scorecard {\n  id: string\n  title: string\n  group?: string\n  value: number | string\n  trend?: ScorecardTrend\n  link?: {\n    href: '#'\n    displayName: 'View breakdown'\n  }\n  valueFor?: string\n  rag?: ScorecardRag\n}\n\nexport interface ScorecardSubGroup {\n  name: string\n  scorecards: Scorecard[]\n}\n\nexport interface ScorecardGroup {\n  title?: string\n  description?: string\n  scorecards: Scorecard[]\n}\n\nexport interface ScorecardTrend {\n  direction: number\n  value: number\n  from: string\n}\n\nexport interface ScorecardRag {\n  score: number\n  colour: string\n}\n\nexport interface ScorecardDataset {\n  earliest: DashboardDataResponse[]\n  earliestTs: string | number\n  latest: DashboardDataResponse[]\n  latestTs: string | number\n}\n\nexport interface CreateScorecardDataArgs {\n  title: string\n  value: string | number\n  rag?: number\n  valueFor: string\n  valueFrom: string\n  prevVal: string | number\n  groupTitle?: string\n}\n"],
   "mappings": "kWAAA,IAAAA,EAAA,kBAAAC,EAAAD",
   "names": ["types_exports", "__toCommonJS"]
 }

package/dpr/components/_dashboards/scorecard/types.ts

@@ -1,6 +1,7 @@
 import { DashboardDataResponse } from '../../../types/Metrics'
 
 export interface Scorecard {
+  id: string
   title: string
   group?: string
   value: number | string

package/dpr/components/_dashboards/scorecard/utils.js

@@ -1,2 +1,2 @@
-var d=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var h=Object.prototype.hasOwnProperty;var l=(o,c)=>{for(var e in c)d(o,e,{get:c[e],enumerable:!0})},i=(o,c,e,t)=>{if(c&&typeof c=="object"||typeof c=="function")for(let r of u(c))!h.call(o,r)&&r!==e&&d(o,r,{get:()=>c[r],enumerable:!(t=p(c,r))||t.enumerable});return o};var m=o=>i(d({},"__esModule",{value:!0}),o);var S={};l(S,{default:()=>b,mergeScorecardsIntoGroup:()=>s});module.exports=m(S);var n=require("../dashboard/types");const s=o=>(o.reduce((e,t,r)=>(t.type===n.DashboardVisualisationType.SCORECARD&&e.push(r),e),[]).reduce((e,t)=>{const r=e[e.length-1];return(!r||r[r.length-1]!==t-1)&&e.push([]),e[e.length-1].push(t),e},[]).reverse().forEach(e=>{const t=e[0],r=e.map(a=>o[a].data).filter(a=>!!a);for(;e.length;)o.splice(e.pop(),1);r.length&&o.splice(t,0,{id:`${t}`,type:n.DashboardVisualisationType.SCORECARD_GROUP,data:[{scorecards:r}]})}),o);var b={mergeScorecardsIntoGroup:s};0&&(module.exports={mergeScorecardsIntoGroup});
+var d=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var h=Object.prototype.hasOwnProperty;var i=(o,c)=>{for(var e in c)d(o,e,{get:c[e],enumerable:!0})},l=(o,c,e,t)=>{if(c&&typeof c=="object"||typeof c=="function")for(let r of p(c))!h.call(o,r)&&r!==e&&d(o,r,{get:()=>c[r],enumerable:!(t=u(c,r))||t.enumerable});return o};var m=o=>l(d({},"__esModule",{value:!0}),o);var f={};i(f,{default:()=>b,mergeScorecardsIntoGroup:()=>s});module.exports=m(f);var n=require("../dashboard-visualisation/types");const s=o=>(o.reduce((e,t,r)=>(t.type===n.DashboardVisualisationType.SCORECARD&&e.push(r),e),[]).reduce((e,t)=>{const r=e[e.length-1];return(!r||r[r.length-1]!==t-1)&&e.push([]),e[e.length-1].push(t),e},[]).reverse().forEach(e=>{const t=e[0],r=e.map(a=>o[a].data).filter(a=>!!a);for(;e.length;){const a=e.pop();a!==void 0&&o.splice(a,1)}r.length&&o.splice(t,0,{id:`${t}`,type:n.DashboardVisualisationType.SCORECARD_GROUP,data:[{scorecards:r}]})}),o);var b={mergeScorecardsIntoGroup:s};0&&(module.exports={mergeScorecardsIntoGroup});
 //# sourceMappingURL=utils.js.map

package/dpr/components/_dashboards/scorecard/utils.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/dpr/components/_dashboards/scorecard/utils.ts"],
-  "sourcesContent": ["import { DashboardUIVisualisation, DashboardVisualisationType } from '../dashboard/types'\nimport { Scorecard } from './types'\n\nexport const mergeScorecardsIntoGroup = (visualisations: DashboardUIVisualisation[]) => {\n  const groupedScorecardIndexes: number[][] = visualisations\n    // get scorecard indexes\n    .reduce((acc: number[], vis: DashboardUIVisualisation, i: number) => {\n      if (vis.type === DashboardVisualisationType.SCORECARD) acc.push(i)\n      return acc\n    }, [])\n    // group adjacent indexes\n    .reduce((r, n) => {\n      const lastSubArray = r[r.length - 1]\n      if (!lastSubArray || lastSubArray[lastSubArray.length - 1] !== n - 1) r.push([])\n      r[r.length - 1].push(n)\n      return r\n    }, [])\n\n  groupedScorecardIndexes.reverse().forEach((group: number[]) => {\n    const spliceAtIndex = group[0]\n    const scorecardGroup: Scorecard[] = group\n      .map((scIndex: number) => {\n        return visualisations[scIndex].data as Scorecard\n      })\n      .filter((scorecard: Scorecard) => !!scorecard)\n\n    while (group.length) {\n      visualisations.splice(group.pop(), 1)\n    }\n\n    if (scorecardGroup.length) {\n      visualisations.splice(spliceAtIndex, 0, {\n        id: `${spliceAtIndex}`,\n        type: DashboardVisualisationType.SCORECARD_GROUP,\n        data: [{ scorecards: scorecardGroup }],\n      })\n    }\n  })\n\n  return visualisations\n}\n\nexport default {\n  mergeScorecardsIntoGroup,\n}\n"],
-  "mappings": "4ZAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,EAAA,6BAAAC,IAAA,eAAAC,EAAAJ,GAAA,IAAAK,EAAqE,8BAG9D,MAAMF,EAA4BG,IACKA,EAEzC,OAAO,CAACC,EAAeC,EAA+BC,KACjDD,EAAI,OAAS,6BAA2B,WAAWD,EAAI,KAAKE,CAAC,EAC1DF,GACN,CAAC,CAAC,EAEJ,OAAO,CAACG,EAAGC,IAAM,CAChB,MAAMC,EAAeF,EAAEA,EAAE,OAAS,CAAC,EACnC,OAAI,CAACE,GAAgBA,EAAaA,EAAa,OAAS,CAAC,IAAMD,EAAI,IAAGD,EAAE,KAAK,CAAC,CAAC,EAC/EA,EAAEA,EAAE,OAAS,CAAC,EAAE,KAAKC,CAAC,EACfD,CACT,EAAG,CAAC,CAAC,EAEiB,QAAQ,EAAE,QAASG,GAAoB,CAC7D,MAAMC,EAAgBD,EAAM,CAAC,EACvBE,EAA8BF,EACjC,IAAKG,GACGV,EAAeU,CAAO,EAAE,IAChC,EACA,OAAQC,GAAyB,CAAC,CAACA,CAAS,EAE/C,KAAOJ,EAAM,QACXP,EAAe,OAAOO,EAAM,IAAI,EAAG,CAAC,EAGlCE,EAAe,QACjBT,EAAe,OAAOQ,EAAe,EAAG,CACtC,GAAI,GAAGA,CAAa,GACpB,KAAM,6BAA2B,gBACjC,KAAM,CAAC,CAAE,WAAYC,CAAe,CAAC,CACvC,CAAC,CAEL,CAAC,EAEMT,GAGT,IAAOJ,EAAQ,CACb,yBAAAC,CACF",
+  "sourcesContent": ["import { DashboardVisualisation, DashboardVisualisationType } from '../dashboard-visualisation/types'\nimport { Scorecard } from './types'\n\nexport const mergeScorecardsIntoGroup = (visualisations: DashboardVisualisation[]) => {\n  const groupedScorecardIndexes: number[][] = visualisations\n    // get scorecard indexes\n    .reduce((acc: number[], vis: DashboardVisualisation, i: number) => {\n      if (vis.type === DashboardVisualisationType.SCORECARD) acc.push(i)\n      return acc\n    }, [])\n    // group adjacent indexes\n    .reduce((r: number[][], n) => {\n      const lastSubArray = r[r.length - 1]\n      if (!lastSubArray || lastSubArray[lastSubArray.length - 1] !== n - 1) r.push([])\n      r[r.length - 1].push(n)\n      return r\n    }, [])\n\n  groupedScorecardIndexes.reverse().forEach((group: number[]) => {\n    const spliceAtIndex = group[0]\n    const scorecardGroup: Scorecard[] = group\n      .map((scIndex: number) => {\n        return visualisations[scIndex].data as Scorecard\n      })\n      .filter((scorecard: Scorecard) => !!scorecard)\n\n    while (group.length) {\n      const i = group.pop()\n      if (i !== undefined) visualisations.splice(i, 1)\n    }\n\n    if (scorecardGroup.length) {\n      visualisations.splice(spliceAtIndex, 0, {\n        id: `${spliceAtIndex}`,\n        type: DashboardVisualisationType.SCORECARD_GROUP,\n        data: [{ scorecards: scorecardGroup }],\n      })\n    }\n  })\n\n  return visualisations\n}\n\nexport default {\n  mergeScorecardsIntoGroup,\n}\n"],
+  "mappings": "4ZAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,EAAA,6BAAAC,IAAA,eAAAC,EAAAJ,GAAA,IAAAK,EAAmE,4CAG5D,MAAMF,EAA4BG,IACKA,EAEzC,OAAO,CAACC,EAAeC,EAA6BC,KAC/CD,EAAI,OAAS,6BAA2B,WAAWD,EAAI,KAAKE,CAAC,EAC1DF,GACN,CAAC,CAAC,EAEJ,OAAO,CAACG,EAAeC,IAAM,CAC5B,MAAMC,EAAeF,EAAEA,EAAE,OAAS,CAAC,EACnC,OAAI,CAACE,GAAgBA,EAAaA,EAAa,OAAS,CAAC,IAAMD,EAAI,IAAGD,EAAE,KAAK,CAAC,CAAC,EAC/EA,EAAEA,EAAE,OAAS,CAAC,EAAE,KAAKC,CAAC,EACfD,CACT,EAAG,CAAC,CAAC,EAEiB,QAAQ,EAAE,QAASG,GAAoB,CAC7D,MAAMC,EAAgBD,EAAM,CAAC,EACvBE,EAA8BF,EACjC,IAAKG,GACGV,EAAeU,CAAO,EAAE,IAChC,EACA,OAAQC,GAAyB,CAAC,CAACA,CAAS,EAE/C,KAAOJ,EAAM,QAAQ,CACnB,MAAMJ,EAAII,EAAM,IAAI,EAChBJ,IAAM,QAAWH,EAAe,OAAOG,EAAG,CAAC,CACjD,CAEIM,EAAe,QACjBT,EAAe,OAAOQ,EAAe,EAAG,CACtC,GAAI,GAAGA,CAAa,GACpB,KAAM,6BAA2B,gBACjC,KAAM,CAAC,CAAE,WAAYC,CAAe,CAAC,CACvC,CAAC,CAEL,CAAC,EAEMT,GAGT,IAAOJ,EAAQ,CACb,yBAAAC,CACF",
   "names": ["utils_exports", "__export", "utils_default", "mergeScorecardsIntoGroup", "__toCommonJS", "import_types", "visualisations", "acc", "vis", "i", "r", "n", "lastSubArray", "group", "spliceAtIndex", "scorecardGroup", "scIndex", "scorecard"]
 }

package/dpr/components/_dashboards/scorecard/utils.test.ts

@@ -1,8 +1,11 @@
 import ScorecardUtils from './utils'
 import { Scorecard } from './types'
 
-import { DashboardUIVisualisation, DashboardVisualisationType } from '../dashboard/types'
-import { ChartCardData } from '../../../types/Charts'
+import {
+  DashboardVisualisation,
+  DashboardVisualisationType,
+  DashboardVisualisatonCardData,
+} from '../dashboard-visualisation/types'
 
 describe('ScorecardUtils', () => {
   let scorecardData1: Scorecard
@@ -10,6 +13,7 @@ describe('ScorecardUtils', () => {
 
   beforeEach(() => {
     scorecardData1 = {
+      id: '1',
       rag: {
         colour: 'red',
         score: 2,
@@ -25,6 +29,7 @@ describe('ScorecardUtils', () => {
     }
 
     scorecardData2 = {
+      id: '2',
       rag: {
         colour: 'red',
         score: 2,
@@ -42,7 +47,7 @@ describe('ScorecardUtils', () => {
 
   describe('mergeScorecards', () => {
     it('should merge individual scorecards into a scorecard group', () => {
-      const visualistationData: DashboardUIVisualisation[] = [
+      const visualistationData: DashboardVisualisation[] = [
         {
           id: '1',
           type: DashboardVisualisationType.SCORECARD,
@@ -56,7 +61,7 @@ describe('ScorecardUtils', () => {
         {
           id: '3',
           type: DashboardVisualisationType.BAR,
-          data: {} as unknown as ChartCardData,
+          data: {} as unknown as DashboardVisualisatonCardData,
         },
         {
           id: '4',
@@ -79,6 +84,7 @@ describe('ScorecardUtils', () => {
             {
               scorecards: [
                 {
+                  id: '1',
                   rag: {
                     colour: 'red',
                     score: 2,
@@ -93,6 +99,7 @@ describe('ScorecardUtils', () => {
                   valueFor: 'Jan 25',
                 },
                 {
+                  id: '2',
                   rag: {
                     colour: 'red',
                     score: 2,
@@ -122,6 +129,7 @@ describe('ScorecardUtils', () => {
             {
               scorecards: [
                 {
+                  id: '1',
                   rag: {
                     colour: 'red',
                     score: 2,
@@ -136,6 +144,7 @@ describe('ScorecardUtils', () => {
                   valueFor: 'Jan 25',
                 },
                 {
+                  id: '2',
                   rag: {
                     colour: 'red',
                     score: 2,

package/dpr/components/_dashboards/scorecard/utils.ts

@@ -1,15 +1,15 @@
-import { DashboardUIVisualisation, DashboardVisualisationType } from '../dashboard/types'
+import { DashboardVisualisation, DashboardVisualisationType } from '../dashboard-visualisation/types'
 import { Scorecard } from './types'
 
-export const mergeScorecardsIntoGroup = (visualisations: DashboardUIVisualisation[]) => {
+export const mergeScorecardsIntoGroup = (visualisations: DashboardVisualisation[]) => {
   const groupedScorecardIndexes: number[][] = visualisations
     // get scorecard indexes
-    .reduce((acc: number[], vis: DashboardUIVisualisation, i: number) => {
+    .reduce((acc: number[], vis: DashboardVisualisation, i: number) => {
       if (vis.type === DashboardVisualisationType.SCORECARD) acc.push(i)
       return acc
     }, [])
     // group adjacent indexes
-    .reduce((r, n) => {
+    .reduce((r: number[][], n) => {
       const lastSubArray = r[r.length - 1]
       if (!lastSubArray || lastSubArray[lastSubArray.length - 1] !== n - 1) r.push([])
       r[r.length - 1].push(n)
@@ -25,7 +25,8 @@ export const mergeScorecardsIntoGroup = (visualisations: DashboardUIVisualisatio
       .filter((scorecard: Scorecard) => !!scorecard)
 
     while (group.length) {
-      visualisations.splice(group.pop(), 1)
+      const i = group.pop()
+      if (i !== undefined) visualisations.splice(i, 1)
     }
 
     if (scorecardGroup.length) {

package/dpr/components/_dashboards/scorecard/view.njk

@@ -1,6 +1,7 @@
-{% macro dprScoreCard(scorecard) %}
+{% macro dprScoreCard(scorecard, index) %}
   {% set classes = scorecard.classes %}
 
+  {% set id = scorecard.id %}
   {% set title = scorecard.title %}
   {% set value = scorecard.value %}
   {% set rag = scorecard.rag %}
@@ -20,13 +21,13 @@
     {% set directionIcon = '◼' %}
     {% set directionDisplay = '' %}
   {% endif %}
-  <div class="dpr-scorecard" data-dpr-module="scorecard">
-    <p class="govuk-heading-s govuk-!-margin-bottom-1">
+  <div class="dpr-scorecard" data-dpr-module="scorecard" aria-labelledby="{{ id }}_title_{{index }}">
+    <p id="{{ id }}_title_{{index}}" class="govuk-heading-s govuk-!-margin-bottom-1">
       {{ title }}
     </p>
 
-    <p style="background-color: {{ rag.colour }}" class="govuk-body dpr-scorecard__value {% if rag %}govuk-tag--{{ rag.colour }}{% endif %}">{{ value }}</p>
-    {% if rag.score %}
+    <p {% if rag %}style="background-color: {{ rag.colour }}"{% endif %} class="govuk-body dpr-scorecard__value {% if rag %}govuk-tag--{{ rag.colour }}{% endif %}">{{ value }}</p>
+    {% if rag.score !== 'undefined' %}
       <p class="govuk-body dpr-scorecard__value-description">Status: {{ rag.score }}</p>
     {% endif %}