@ministryofjustice/hmpps-digital-prison-reporting-frontend 4.20.1 → 4.21.0

package/dpr/components/_charts/chart/buckets/types.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/dpr/components/_charts/chart/buckets/types.ts"],
+  "sourcesContent": ["import z from 'zod'\nimport BucketOptionsSchema from './validate'\n\nexport type BucketOptionsDefinition = z.infer<typeof BucketOptionsSchema>\n"],
+  "mappings": "+WAAA,IAAAA,EAAA,kBAAAC,EAAAD",
+  "names": ["types_exports", "__toCommonJS"]
+}

package/dpr/components/_charts/chart/buckets/types.ts

@@ -0,0 +1,4 @@
+import z from 'zod'
+import BucketOptionsSchema from './validate'
+
+export type BucketOptionsDefinition = z.infer<typeof BucketOptionsSchema>

package/dpr/components/_charts/chart/buckets/validate.js

@@ -0,0 +1,2 @@
+"use strict";var n=Object.defineProperty;var s=Object.getOwnPropertyDescriptor;var i=Object.getOwnPropertyNames;var b=Object.prototype.hasOwnProperty;var c=(t,o)=>{for(var r in o)n(t,r,{get:o[r],enumerable:!0})},p=(t,o,r,l)=>{if(o&&typeof o=="object"||typeof o=="function")for(let a of i(o))!b.call(t,a)&&a!==r&&n(t,a,{get:()=>o[a],enumerable:!(l=s(o,a))||l.enumerable});return t};var m=t=>p(n({},"__esModule",{value:!0}),t);var f={};c(f,{BucketOptionsSchema:()=>u,default:()=>d});module.exports=m(f);var e=require("zod");const x=e.z.object({min:e.z.number().optional(),max:e.z.number().optional(),hexColour:e.z.string().regex(/^#/).optional()}),u=e.z.object({useRagColour:e.z.boolean().default(!1),buckets:e.z.array(x).default([]),baseColour:e.z.string().regex(/^#/).optional()});var d=u;0&&(module.exports={BucketOptionsSchema});
+//# sourceMappingURL=validate.js.map

package/dpr/components/_charts/chart/buckets/validate.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/dpr/components/_charts/chart/buckets/validate.ts"],
+  "sourcesContent": ["import { z } from 'zod'\n\nconst dashboardBucket = z.object({\n  min: z.number().optional(),\n  max: z.number().optional(),\n  hexColour: z.string().regex(/^#/).optional(),\n})\n\nexport const BucketOptionsSchema = z.object({\n  useRagColour: z.boolean().default(false),\n  buckets: z.array(dashboardBucket).default([]),\n  baseColour: z.string().regex(/^#/).optional(),\n})\n\nexport default BucketOptionsSchema\n"],
+  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,yBAAAE,EAAA,YAAAC,IAAA,eAAAC,EAAAJ,GAAA,IAAAK,EAAkB,eAElB,MAAMC,EAAkB,IAAE,OAAO,CAC/B,IAAK,IAAE,OAAO,EAAE,SAAS,EACzB,IAAK,IAAE,OAAO,EAAE,SAAS,EACzB,UAAW,IAAE,OAAO,EAAE,MAAM,IAAI,EAAE,SAAS,CAC7C,CAAC,EAEYJ,EAAsB,IAAE,OAAO,CAC1C,aAAc,IAAE,QAAQ,EAAE,QAAQ,EAAK,EACvC,QAAS,IAAE,MAAMI,CAAe,EAAE,QAAQ,CAAC,CAAC,EAC5C,WAAY,IAAE,OAAO,EAAE,MAAM,IAAI,EAAE,SAAS,CAC9C,CAAC,EAED,IAAOH,EAAQD",
+  "names": ["validate_exports", "__export", "BucketOptionsSchema", "validate_default", "__toCommonJS", "import_zod", "dashboardBucket"]
+}

package/dpr/components/_charts/chart/buckets/validate.ts

@@ -0,0 +1,15 @@
+import { z } from 'zod'
+
+const dashboardBucket = z.object({
+  min: z.number().optional(),
+  max: z.number().optional(),
+  hexColour: z.string().regex(/^#/).optional(),
+})
+
+export const BucketOptionsSchema = z.object({
+  useRagColour: z.boolean().default(false),
+  buckets: z.array(dashboardBucket).default([]),
+  baseColour: z.string().regex(/^#/).optional(),
+})
+
+export default BucketOptionsSchema

package/dpr/components/_charts/chart/chart-config.js

@@ -0,0 +1,2 @@
+"use strict";var e=Object.defineProperty;var a=Object.getOwnPropertyDescriptor;var s=Object.getOwnPropertyNames;var l=Object.prototype.hasOwnProperty;var p=(t,o)=>{for(var n in o)e(t,n,{get:o[n],enumerable:!0})},b=(t,o,n,r)=>{if(o&&typeof o=="object"||typeof o=="function")for(let i of s(o))!l.call(t,i)&&i!==n&&e(t,i,{get:()=>o[i],enumerable:!(r=a(o,i))||r.enumerable});return t};var d=t=>b(e({},"__esModule",{value:!0}),t);var y={};p(y,{default:()=>g});module.exports=d(y);const u={backgroundColor:"#FFF",bodyColor:"#000",titleFont:{size:16},bodyFont:{size:16},titleColor:"#000",displayColors:!1,borderWidth:1,borderColor:"#b1b4b6",cornerRadius:0,padding:20,footerFont:{weight:"bold"},animation:{duration:0}},m={responsive:!0,maintainAspectRatio:!1,animation:{duration:0},hover:{animationDuration:0},plugins:{legend:{position:"bottom"},tooltip:u}};var g=m;
+//# sourceMappingURL=chart-config.js.map

package/dpr/components/_charts/chart/chart-config.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/dpr/components/_charts/chart/chart-config.ts"],
+  "sourcesContent": ["const tooltip: ChartTooltipType = {\n  backgroundColor: '#FFF',\n  bodyColor: '#000',\n  titleFont: {\n    size: 16,\n  },\n  bodyFont: {\n    size: 16,\n  },\n  titleColor: '#000',\n  displayColors: false,\n  borderWidth: 1,\n  borderColor: '#b1b4b6',\n  cornerRadius: 0,\n  padding: 20,\n  footerFont: {\n    weight: 'bold',\n  },\n  animation: {\n    duration: 0,\n  },\n}\n\nconst chartConfig: ChartOptionsType = {\n  responsive: true,\n  maintainAspectRatio: false,\n  animation: {\n    duration: 0,\n  },\n  hover: {\n    animationDuration: 0,\n  },\n  plugins: {\n    legend: {\n      position: 'bottom',\n    },\n    tooltip,\n  },\n}\n\ntype ChartTooltipType = {\n  backgroundColor: string\n  bodyColor: string\n  titleFont: {\n    size: number\n  }\n  bodyFont: {\n    size: number\n  }\n  titleColor: string\n  displayColors: false\n  borderWidth: number\n  borderColor: string\n  cornerRadius: number\n  padding: number\n  footerFont: {\n    weight: string\n  }\n  animation: {\n    duration: number\n  }\n}\n\nexport type ChartOptionsType = {\n  responsive: boolean\n  maintainAspectRatio: boolean\n  animation: {\n    duration: number\n  }\n  hover: {\n    animationDuration: number\n  }\n  plugins: {\n    legend: {\n      position: string\n    }\n    tooltip: ChartTooltipType\n  }\n  indexAxis?: string\n  cutout?: string\n  scales?: ChartScalesType\n}\n\ntype ChartScalesType = {\n  y?: ChartScaleAxis\n  x?: ChartScaleAxis\n}\n\ntype ChartScaleAxis = {\n  stacked?: boolean\n  position?: string\n  type?: string\n  min?: number\n  offset?: boolean\n  labels?: Array<string | number>\n  grid?: {\n    display: boolean\n    drawBorder: boolean\n  }\n  ticks?: {\n    fontSize?: number\n    padding?: number\n    maxRotation?: number\n    stepSize?: number\n  }\n}\n\nexport default chartConfig\n"],
+  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAAA,MAAMI,EAA4B,CAChC,gBAAiB,OACjB,UAAW,OACX,UAAW,CACT,KAAM,EACR,EACA,SAAU,CACR,KAAM,EACR,EACA,WAAY,OACZ,cAAe,GACf,YAAa,EACb,YAAa,UACb,aAAc,EACd,QAAS,GACT,WAAY,CACV,OAAQ,MACV,EACA,UAAW,CACT,SAAU,CACZ,CACF,EAEMC,EAAgC,CACpC,WAAY,GACZ,oBAAqB,GACrB,UAAW,CACT,SAAU,CACZ,EACA,MAAO,CACL,kBAAmB,CACrB,EACA,QAAS,CACP,OAAQ,CACN,SAAU,QACZ,EACA,QAAAD,CACF,CACF,EAqEA,IAAOF,EAAQG",
+  "names": ["chart_config_exports", "__export", "chart_config_default", "__toCommonJS", "tooltip", "chartConfig"]
+}

package/dpr/components/_charts/chart/chart-config.ts

@@ -0,0 +1,108 @@
+const tooltip: ChartTooltipType = {
+  backgroundColor: '#FFF',
+  bodyColor: '#000',
+  titleFont: {
+    size: 16,
+  },
+  bodyFont: {
+    size: 16,
+  },
+  titleColor: '#000',
+  displayColors: false,
+  borderWidth: 1,
+  borderColor: '#b1b4b6',
+  cornerRadius: 0,
+  padding: 20,
+  footerFont: {
+    weight: 'bold',
+  },
+  animation: {
+    duration: 0,
+  },
+}
+
+const chartConfig: ChartOptionsType = {
+  responsive: true,
+  maintainAspectRatio: false,
+  animation: {
+    duration: 0,
+  },
+  hover: {
+    animationDuration: 0,
+  },
+  plugins: {
+    legend: {
+      position: 'bottom',
+    },
+    tooltip,
+  },
+}
+
+type ChartTooltipType = {
+  backgroundColor: string
+  bodyColor: string
+  titleFont: {
+    size: number
+  }
+  bodyFont: {
+    size: number
+  }
+  titleColor: string
+  displayColors: false
+  borderWidth: number
+  borderColor: string
+  cornerRadius: number
+  padding: number
+  footerFont: {
+    weight: string
+  }
+  animation: {
+    duration: number
+  }
+}
+
+export type ChartOptionsType = {
+  responsive: boolean
+  maintainAspectRatio: boolean
+  animation: {
+    duration: number
+  }
+  hover: {
+    animationDuration: number
+  }
+  plugins: {
+    legend: {
+      position: string
+    }
+    tooltip: ChartTooltipType
+  }
+  indexAxis?: string
+  cutout?: string
+  scales?: ChartScalesType
+}
+
+type ChartScalesType = {
+  y?: ChartScaleAxis
+  x?: ChartScaleAxis
+}
+
+type ChartScaleAxis = {
+  stacked?: boolean
+  position?: string
+  type?: string
+  min?: number
+  offset?: boolean
+  labels?: Array<string | number>
+  grid?: {
+    display: boolean
+    drawBorder: boolean
+  }
+  ticks?: {
+    fontSize?: number
+    padding?: number
+    maxRotation?: number
+    stepSize?: number
+  }
+}
+
+export default chartConfig

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

@@ -26,19 +26,9 @@ class ChartVisualisation extends DprClientClass {
     this.legendElement = document.getElementById(`dpr-${this.id}-legend`)
     this.legendElement = document.getElementById(`dpr-${this.id}-legend`)
 
-    // Time series
-    this.timeseries = this.getElement().getAttribute('data-dpr-chart-timeseries')
-    if (this.timeseries || this.type === 'line') {
-      this.daterangeInputs = document.querySelectorAll('.dpr-granular-date-range')
-      if (this.daterangeInputs && this.daterangeInputs.length) {
-        this.daterangeInputs.forEach((input) => {
-          this.partialStart = input.getAttribute('data-partial-start') === 'true'
-          this.partialEnd = input.getAttribute('data-partial-end') === 'true'
-        })
-      } else {
-        this.partialStart = false
-        this.partialEnd = false
-      }
+    if (this.chartParams.partialDate) {
+      this.partialStart = this.chartParams.partialDate.start || false
+      this.partialEnd = this.chartParams.partialDate.end || false
     }
 
     // flags
@@ -46,124 +36,56 @@ class ChartVisualisation extends DprClientClass {
   }
 
   initChart() {
-    Chart.defaults.font.family = 'GDS Transport'
-    Chart.defaults.font.size = 12
-    Chart.register(ChartDataLabels)
-    Chart.register(MatrixController, MatrixElement)
-    this.chart = new Chart(this.chartContext, this.chartData)
-
-    this.initChartEvents()
-  }
-
-  // Accessible colours from the MoJ Pattern Library
-  getColourPallette() {
-    return [
-      {
-        name: 'blue',
-        hex: '#5694ca',
-      },
-      {
-        name: 'purple',
-        hex: '#912b88',
-      },
-      {
-        name: 'green',
-        hex: '#00703c',
-      },
-      {
-        name: 'dark_blue',
-        hex: '#003078',
-      },
-      {
-        name: 'orange',
-        hex: '#f47738',
-      },
-      {
-        name: 'orange',
-        hex: '#28a197',
-      },
-    ]
-  }
-
-  mapHexColourToName(hex, ctx) {
-    const pallette = ctx.getColourPallette()
-    const colour = pallette.find((p) => {
-      return p.hex === hex
+    // Prevent font loading issue
+    window.addEventListener('load', () => {
+      // An example of creating a chart, replace with your code:
+      Chart.defaults.font.family = 'GDS Transport'
+      Chart.defaults.font.size = 12
+      Chart.register(ChartDataLabels)
+      Chart.register(MatrixController, MatrixElement)
+      this.chart = new Chart(this.chartContext, this.chartData)
     })
-    return colour ? colour.name : ''
-  }
 
-  createDatasets(datasets, styling) {
-    return datasets.map((d, i) => {
-      const { label, data } = d
-      const s = styling[i % 6] ? styling[i % 6] : styling[0]
-      return {
-        label,
-        data,
-        ...s,
-      }
-    })
+    this.initChartEvents()
   }
 
   generateChartData(settings) {
-    const { datasets, labels } = this.chartParams
-    const { options, styling, datalabels, plugins, pluginsOptions, toolTipOptions, hoverEvent } = settings
-    return {
+    const { datasets, labels, config } = this.chartParams
+    const { options, datalabels, plugins, pluginsOptions, toolTipOptions, hoverEvent, styling } = settings
+
+    const chartData = {
       type: this.type,
       data: {
         labels,
         datasets: this.createDatasets(datasets, styling),
       },
       options: {
-        responsive: true,
-        maintainAspectRatio: false,
-        animation: {
-          duration: 0,
-        },
-        hover: {
-          animationDuration: 0,
-        },
+        ...config,
         ...(options && options),
         ...(hoverEvent && hoverEvent),
         plugins: {
-          legend: {
-            position: 'bottom',
-          },
+          ...config.plugins,
           ...(pluginsOptions && pluginsOptions),
           ...(datalabels && { datalabels }),
           tooltip: {
-            ...this.setToolTip(),
+            ...config.plugins.tooltip,
             ...(toolTipOptions && toolTipOptions),
           },
         },
       },
       plugins: plugins && plugins.length ? [...plugins] : [],
     }
+
+    return chartData
   }
 
-  setToolTip() {
-    return {
-      backgroundColor: '#FFF',
-      bodyColor: '#000',
-      titleFont: {
-        size: 16,
-      },
-      bodyFont: {
-        size: 16,
-      },
-      titleColor: '#000',
-      displayColors: false,
-      borderWidth: 1,
-      borderColor: '#b1b4b6',
-      cornerRadius: 0,
-      padding: 20,
-      footerFont: {
-        weight: 'bold',
-      },
-      animation: {
-        duration: 0,
-      },
-    }
+  createDatasets(datasets, styling) {
+    return datasets.map((dataset) => {
+      return {
+        ...dataset,
+        ...(styling && styling),
+      }
+    })
   }
 
   setHoverValue({ label, value, legend, ctx }) {

package/dpr/components/_charts/chart/doughnut/DoughnutChart.js

@@ -0,0 +1,2 @@
+"use strict";var D=Object.create;var a=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var l=Object.getPrototypeOf,c=Object.prototype.hasOwnProperty;var g=(t,s)=>{for(var i in s)a(t,i,{get:s[i],enumerable:!0})},r=(t,s,i,n)=>{if(s&&typeof s=="object"||typeof s=="function")for(let e of f(s))!c.call(t,e)&&e!==i&&a(t,e,{get:()=>s[e],enumerable:!(n=d(s,e))||n.enumerable});return t};var h=(t,s,i)=>(i=t!=null?D(l(t)):{},r(s||!t||!t.__esModule?a(i,"default",{value:t,enumerable:!0}):i,t)),b=t=>r(a({},"__esModule",{value:!0}),t);var k={};g(k,{DoughnutChart:()=>o,default:()=>y});module.exports=b(k);var u=require("../../../_dashboards/dashboard-visualisation/types"),p=h(require("../Chart")),m=h(require("./validate"));class o extends p.default{constructor(){super(...arguments);this.init=()=>{this.measures=this.definition.columns.measures,this.keys=this.definition.columns.keys||[],this.initUnit(this.measures),this.getLabelId(this.keys)};this.withDefinition=i=>(this.definition=m.default.DoughnutSchema.parse(i),this.init(),this);this.build=()=>(this.createDatasets(this.measures,this.responseData),this.augmentDataset(),this.setBespokeOptions(),this.createLabels(this.measures),{type:u.DashboardVisualisationType.DONUT,options:{unit:this.unit},data:{labels:this.labels,datasets:this.datasets,config:this.config}});this.augmentDataset=()=>{this.datasets=this.datasets.map(i=>({...i,backgroundColor:[...this.hexColours,...this.hexColours],borderColor:void 0,hoverOffset:4,datalabels:{anchor:"center",borderWidth:0}}))};this.setBespokeOptions=()=>{const i=this.datasets.length===1?"50%":"20%";this.config={...this.config,cutout:i}}}}var y=o;0&&(module.exports={DoughnutChart});
+//# sourceMappingURL=DoughnutChart.js.map

package/dpr/components/_charts/chart/doughnut/DoughnutChart.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/dpr/components/_charts/chart/doughnut/DoughnutChart.ts"],
+  "sourcesContent": ["/* eslint-disable prefer-destructuring */\nimport {\n  DashboardVisualisationType,\n  DashboardVisualisationData,\n  VisualisationDefinitionKey,\n} from '../../../_dashboards/dashboard-visualisation/types'\nimport { components } from '../../../../types/api'\nimport Chart from '../Chart'\nimport { DoughnutDefinitionMeasure, DoughnutDefinitionType } from './types'\nimport DoughnutChartSchemas from './validate'\n\nclass DoughnutChart extends Chart {\n  private definition!: DoughnutDefinitionType\n\n  private measures!: DoughnutDefinitionMeasure[]\n\n  private keys!: VisualisationDefinitionKey[]\n\n  private init = () => {\n    this.measures = this.definition.columns.measures\n    this.keys = this.definition.columns.keys || []\n    this.initUnit(this.measures)\n    this.getLabelId(this.keys)\n  }\n\n  withDefinition = (definition: components['schemas']['DashboardVisualisationDefinition']) => {\n    this.definition = DoughnutChartSchemas.DoughnutSchema.parse(definition)\n    this.init()\n\n    return this\n  }\n\n  build = (): DashboardVisualisationData => {\n    this.createDatasets(this.measures, this.responseData)\n    this.augmentDataset()\n    this.setBespokeOptions()\n    this.createLabels(this.measures)\n\n    return {\n      type: DashboardVisualisationType.DONUT,\n      options: {\n        unit: this.unit,\n      },\n      data: {\n        labels: this.labels,\n        datasets: this.datasets,\n        config: this.config,\n      },\n    }\n  }\n\n  private augmentDataset = () => {\n    this.datasets = this.datasets.map((set) => {\n      return {\n        ...set,\n        backgroundColor: [...this.hexColours, ...this.hexColours],\n        borderColor: undefined,\n        hoverOffset: 4,\n        datalabels: {\n          anchor: 'center',\n          borderWidth: 0,\n        },\n      }\n    })\n  }\n\n  private setBespokeOptions = () => {\n    const cutout = this.datasets.length === 1 ? '50%' : '20%'\n    this.config = {\n      ...this.config,\n      cutout,\n    }\n  }\n}\n\nexport { DoughnutChart }\nexport default DoughnutChart\n"],
+  "mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,mBAAAE,EAAA,YAAAC,IAAA,eAAAC,EAAAJ,GACA,IAAAK,EAIO,8DAEPC,EAAkB,uBAElBC,EAAiC,yBAEjC,MAAML,UAAsB,EAAAM,OAAM,CAAlC,kCAOE,KAAQ,KAAO,IAAM,CACnB,KAAK,SAAW,KAAK,WAAW,QAAQ,SACxC,KAAK,KAAO,KAAK,WAAW,QAAQ,MAAQ,CAAC,EAC7C,KAAK,SAAS,KAAK,QAAQ,EAC3B,KAAK,WAAW,KAAK,IAAI,CAC3B,EAEA,oBAAkBC,IAChB,KAAK,WAAa,EAAAC,QAAqB,eAAe,MAAMD,CAAU,EACtE,KAAK,KAAK,EAEH,MAGT,WAAQ,KACN,KAAK,eAAe,KAAK,SAAU,KAAK,YAAY,EACpD,KAAK,eAAe,EACpB,KAAK,kBAAkB,EACvB,KAAK,aAAa,KAAK,QAAQ,EAExB,CACL,KAAM,6BAA2B,MACjC,QAAS,CACP,KAAM,KAAK,IACb,EACA,KAAM,CACJ,OAAQ,KAAK,OACb,SAAU,KAAK,SACf,OAAQ,KAAK,MACf,CACF,GAGF,KAAQ,eAAiB,IAAM,CAC7B,KAAK,SAAW,KAAK,SAAS,IAAKE,IAC1B,CACL,GAAGA,EACH,gBAAiB,CAAC,GAAG,KAAK,WAAY,GAAG,KAAK,UAAU,EACxD,YAAa,OACb,YAAa,EACb,WAAY,CACV,OAAQ,SACR,YAAa,CACf,CACF,EACD,CACH,EAEA,KAAQ,kBAAoB,IAAM,CAChC,MAAMC,EAAS,KAAK,SAAS,SAAW,EAAI,MAAQ,MACpD,KAAK,OAAS,CACZ,GAAG,KAAK,OACR,OAAAA,CACF,CACF,EACF,CAGA,IAAOT,EAAQD",
+  "names": ["DoughnutChart_exports", "__export", "DoughnutChart", "DoughnutChart_default", "__toCommonJS", "import_types", "import_Chart", "import_validate", "Chart", "definition", "DoughnutChartSchemas", "set", "cutout"]
+}

package/dpr/components/_charts/chart/doughnut/DoughnutChart.ts

@@ -0,0 +1,77 @@
+/* eslint-disable prefer-destructuring */
+import {
+  DashboardVisualisationType,
+  DashboardVisualisationData,
+  VisualisationDefinitionKey,
+} from '../../../_dashboards/dashboard-visualisation/types'
+import { components } from '../../../../types/api'
+import Chart from '../Chart'
+import { DoughnutDefinitionMeasure, DoughnutDefinitionType } from './types'
+import DoughnutChartSchemas from './validate'
+
+class DoughnutChart extends Chart {
+  private definition!: DoughnutDefinitionType
+
+  private measures!: DoughnutDefinitionMeasure[]
+
+  private keys!: VisualisationDefinitionKey[]
+
+  private init = () => {
+    this.measures = this.definition.columns.measures
+    this.keys = this.definition.columns.keys || []
+    this.initUnit(this.measures)
+    this.getLabelId(this.keys)
+  }
+
+  withDefinition = (definition: components['schemas']['DashboardVisualisationDefinition']) => {
+    this.definition = DoughnutChartSchemas.DoughnutSchema.parse(definition)
+    this.init()
+
+    return this
+  }
+
+  build = (): DashboardVisualisationData => {
+    this.createDatasets(this.measures, this.responseData)
+    this.augmentDataset()
+    this.setBespokeOptions()
+    this.createLabels(this.measures)
+
+    return {
+      type: DashboardVisualisationType.DONUT,
+      options: {
+        unit: this.unit,
+      },
+      data: {
+        labels: this.labels,
+        datasets: this.datasets,
+        config: this.config,
+      },
+    }
+  }
+
+  private augmentDataset = () => {
+    this.datasets = this.datasets.map((set) => {
+      return {
+        ...set,
+        backgroundColor: [...this.hexColours, ...this.hexColours],
+        borderColor: undefined,
+        hoverOffset: 4,
+        datalabels: {
+          anchor: 'center',
+          borderWidth: 0,
+        },
+      }
+    })
+  }
+
+  private setBespokeOptions = () => {
+    const cutout = this.datasets.length === 1 ? '50%' : '20%'
+    this.config = {
+      ...this.config,
+      cutout,
+    }
+  }
+}
+
+export { DoughnutChart }
+export default DoughnutChart

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

@@ -16,7 +16,6 @@ class DoughnutChartVisualisation extends ChartVisualisation {
   initSettings() {
     return {
       options: this.setOptions(),
-      styling: this.setDatasetStyling(),
       datalabels: this.setDataLabels(),
       pluginsOptions: this.setPluginsOptions(),
       toolTipOptions: this.setToolTipOptions(),
@@ -24,21 +23,6 @@ class DoughnutChartVisualisation extends ChartVisualisation {
     }
   }
 
-  setDatasetStyling() {
-    const pallette = this.getColourPallette()
-    const backgroundColor = pallette.map((p) => p.hex)
-    return [
-      {
-        backgroundColor: [...backgroundColor, ...backgroundColor],
-        hoverOffset: 4,
-        datalabels: {
-          anchor: 'center',
-          borderWidth: 0,
-        },
-      },
-    ]
-  }
-
   setOptions() {
     const cutoutValue = this.chartParams.datasets.length === 1 ? '50%' : '20%'
     return {
@@ -102,35 +86,6 @@ class DoughnutChartVisualisation extends ChartVisualisation {
     }
   }
 
-  setLegend() {
-    const classContext = this
-    const { legend, suffix } = this
-    return {
-      id: 'legend',
-      beforeInit(chart) {
-        const ul = document.createElement('ul')
-        const { labels } = chart.data
-        const { backgroundColor, data } = chart.data.datasets[0]
-
-        labels.forEach((label, i) => {
-          const colourIndex = i % backgroundColor.length
-          const colour = backgroundColor[colourIndex]
-          const colourName = classContext.mapHexColourToName(colour, classContext)
-          const value = chart.data.datasets.length === 1 ? `${data[i]}${suffix}` : ''
-
-          ul.innerHTML += `
-              <li aria-label="${label} ${value}">
-                <span class="chart-colour__${colourName}">${value}</span>
-                ${label}
-              </li>
-            `
-        })
-        legend.appendChild(ul)
-        return legend.appendChild(ul)
-      },
-    }
-  }
-
   setToolTipOptions() {
     const ctx = this
     return {

package/dpr/components/_charts/chart/doughnut/types.js

@@ -0,0 +1,2 @@
+"use strict";var h=Object.defineProperty;var r=Object.getOwnPropertyDescriptor;var a=Object.getOwnPropertyNames;var i=Object.prototype.hasOwnProperty;var m=(t,e,n,u)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of a(e))!i.call(t,o)&&o!==n&&h(t,o,{get:()=>e[o],enumerable:!(u=r(e,o))||u.enumerable});return t};var p=t=>m(h({},"__esModule",{value:!0}),t);var D={};module.exports=p(D);
+//# sourceMappingURL=types.js.map

package/dpr/components/_charts/chart/doughnut/types.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/dpr/components/_charts/chart/doughnut/types.ts"],
+  "sourcesContent": ["import z from 'zod'\nimport DoughnutChartSchemas from './validate'\n\nexport type DoughnutDefinitionType = z.infer<typeof DoughnutChartSchemas.DoughnutSchema>\nexport type DoughnutDefinitionMeasure = z.infer<typeof DoughnutChartSchemas.DounutMeasureSchema>\n"],
+  "mappings": "+WAAA,IAAAA,EAAA,kBAAAC,EAAAD",
+  "names": ["types_exports", "__toCommonJS"]
+}

package/dpr/components/_charts/chart/doughnut/types.ts

@@ -0,0 +1,5 @@
+import z from 'zod'
+import DoughnutChartSchemas from './validate'
+
+export type DoughnutDefinitionType = z.infer<typeof DoughnutChartSchemas.DoughnutSchema>
+export type DoughnutDefinitionMeasure = z.infer<typeof DoughnutChartSchemas.DounutMeasureSchema>

package/dpr/components/_charts/chart/doughnut/validate.js

@@ -0,0 +1,2 @@
+"use strict";var i=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var h=Object.prototype.hasOwnProperty;var p=(a,o)=>{for(var e in o)i(a,e,{get:o[e],enumerable:!0})},l=(a,o,e,u)=>{if(o&&typeof o=="object"||typeof o=="function")for(let s of m(o))!h.call(a,s)&&s!==e&&i(a,s,{get:()=>o[s],enumerable:!(u=c(o,s))||u.enumerable});return a};var b=a=>l(i({},"__esModule",{value:!0}),a);var f={};p(f,{default:()=>j});module.exports=b(f);var t=require("zod"),n=require("../../../_dashboards/dashboard-visualisation/Validate");const r=t.z.object({id:t.z.string(),display:t.z.string().optional(),unit:t.z.enum(["NUMBER","PERCENTAGE"]).optional()}),d=t.z.object({showLatest:t.z.boolean().default(!0)}),g=t.z.object({...n.DashboardVisualisationSchema.shape,type:t.z.literal("doughnut"),display:t.z.string(),options:t.z.object(d.shape).optional(),columns:t.z.object({...n.DashboardColumns.shape,measures:t.z.array(r).min(2,"Measure must contain 2 items")})}),D={DoughnutSchema:g,DounutMeasureSchema:r};var j=D;
+//# sourceMappingURL=validate.js.map

package/dpr/components/_charts/chart/doughnut/validate.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/dpr/components/_charts/chart/doughnut/validate.ts"],
+  "sourcesContent": ["import { z } from 'zod'\nimport { DashboardVisualisationSchema, DashboardColumns } from '../../../_dashboards/dashboard-visualisation/Validate'\n\nconst DounutMeasureSchema = z.object({\n  id: z.string(),\n  display: z.string().optional(),\n  unit: z.enum(['NUMBER', 'PERCENTAGE']).optional(),\n})\n\nconst DonutOptions = z.object({\n  showLatest: z.boolean().default(true),\n})\n\nconst DoughnutSchema = z.object({\n  ...DashboardVisualisationSchema.shape,\n  type: z.literal('doughnut'),\n  display: z.string(),\n  options: z.object(DonutOptions.shape).optional(),\n  columns: z.object({\n    ...DashboardColumns.shape,\n    measures: z.array(DounutMeasureSchema).min(2, 'Measure must contain 2 items'),\n  }),\n})\n\nconst DoughnutChartSchemas = {\n  DoughnutSchema,\n  DounutMeasureSchema,\n}\n\nexport default DoughnutChartSchemas\n"],
+  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAAA,IAAAI,EAAkB,eAClBC,EAA+D,iEAE/D,MAAMC,EAAsB,IAAE,OAAO,CACnC,GAAI,IAAE,OAAO,EACb,QAAS,IAAE,OAAO,EAAE,SAAS,EAC7B,KAAM,IAAE,KAAK,CAAC,SAAU,YAAY,CAAC,EAAE,SAAS,CAClD,CAAC,EAEKC,EAAe,IAAE,OAAO,CAC5B,WAAY,IAAE,QAAQ,EAAE,QAAQ,EAAI,CACtC,CAAC,EAEKC,EAAiB,IAAE,OAAO,CAC9B,GAAG,+BAA6B,MAChC,KAAM,IAAE,QAAQ,UAAU,EAC1B,QAAS,IAAE,OAAO,EAClB,QAAS,IAAE,OAAOD,EAAa,KAAK,EAAE,SAAS,EAC/C,QAAS,IAAE,OAAO,CAChB,GAAG,mBAAiB,MACpB,SAAU,IAAE,MAAMD,CAAmB,EAAE,IAAI,EAAG,8BAA8B,CAC9E,CAAC,CACH,CAAC,EAEKG,EAAuB,CAC3B,eAAAD,EACA,oBAAAF,CACF,EAEA,IAAOJ,EAAQO",
+  "names": ["validate_exports", "__export", "validate_default", "__toCommonJS", "import_zod", "import_Validate", "DounutMeasureSchema", "DonutOptions", "DoughnutSchema", "DoughnutChartSchemas"]
+}

package/dpr/components/_charts/chart/doughnut/validate.ts

@@ -0,0 +1,30 @@
+import { z } from 'zod'
+import { DashboardVisualisationSchema, DashboardColumns } from '../../../_dashboards/dashboard-visualisation/Validate'
+
+const DounutMeasureSchema = z.object({
+  id: z.string(),
+  display: z.string().optional(),
+  unit: z.enum(['NUMBER', 'PERCENTAGE']).optional(),
+})
+
+const DonutOptions = z.object({
+  showLatest: z.boolean().default(true),
+})
+
+const DoughnutSchema = z.object({
+  ...DashboardVisualisationSchema.shape,
+  type: z.literal('doughnut'),
+  display: z.string(),
+  options: z.object(DonutOptions.shape).optional(),
+  columns: z.object({
+    ...DashboardColumns.shape,
+    measures: z.array(DounutMeasureSchema).min(2, 'Measure must contain 2 items'),
+  }),
+})
+
+const DoughnutChartSchemas = {
+  DoughnutSchema,
+  DounutMeasureSchema,
+}
+
+export default DoughnutChartSchemas

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

@@ -1,2 +1,2 @@
-"use strict";var M=Object.create;var h=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var w=Object.getPrototypeOf,F=Object.prototype.hasOwnProperty;var V=(e,s)=>{for(var t in s)h(e,t,{get:s[t],enumerable:!0})},c=(e,s,t,a)=>{if(s&&typeof s=="object"||typeof s=="function")for(let i of x(s))!F.call(e,i)&&i!==t&&h(e,i,{get:()=>s[i],enumerable:!(a=g(s,i))||a.enumerable});return e};var m=(e,s,t)=>(t=e!=null?M(w(e)):{},c(s||!e||!e.__esModule?h(t,"default",{value:e,enumerable:!0}):t,e)),C=e=>c(h({},"__esModule",{value:!0}),e);var T={};V(T,{HeatmapChart:()=>d,default:()=>Y});module.exports=C(T);var n=m(require("dayjs")),D=require("../../../_dashboards/dashboard-visualisation/types"),y=m(require("../../../../utils/datasetHelper")),b=m(require("../../../_dashboards/dashboard-visualisation/DashboardVisualisation")),f=m(require("../Buckets"));class d extends b.default{constructor(t,a,i){super(t,i);this.data=[];this.dayDateFormat="DD/MM/YYYY";this.valueKey="";this.label="";this.setLabel=()=>{const{id:t,display:a}=this.columns.measures[1];this.valueKey=t,this.label=a||""};this.validateDefinition=()=>{const{id:t,columns:a,type:i}=this.definition,o=[];if(a.measures.length!==2?o.push(`Measures should only have 2 columns defined. Only found ${a.measures.length}`):i===D.DashboardVisualisationType.MATRIX_TIMESERIES&&a.measures[0].id!=="ts"&&o.push(`measure at index 0 has incorrect ID. Expected ID to be "ts". Found "${a.measures[0].id}"`),o.length){const r=`Validation: Visualisaton definition: ID: ${t}, type: ${i}, errors: ${o.join(",")}`;throw new Error(r)}};this.initTimeseriesData=()=>{const t=y.default.groupRowsByTimestamp(this.responseData);this.data=t.map(a=>{const{raw:i,rag:o}=a[0][this.valueKey],r=a[0].ts.raw,v=Number(i),k=o!==void 0?Number(a[0][this.valueKey].rag):void 0;let l=0,u=0;switch(this.granularity){case"hourly":break;case"weekly":l=(0,n.default)(r,this.dayDateFormat).format("ddd"),u=(0,n.default)(r,this.dayDateFormat).week();break;case"daily":l=(0,n.default)(r,this.dayDateFormat).format("MMM YY"),u=(0,n.default)(r,this.dayDateFormat).format("D");break;case"monthly":{const p=r.split(" ");l=p[1],u=p[0]}break;case"annually":l="year",u=r;break;default:l=(0,n.default)(r,this.dayDateFormat).format("MMM YY"),u=(0,n.default)(r,this.dayDateFormat).format("D");break}return{y:u,x:l,v,r:k}})};this.bucketData=()=>{this.data=this.data.map(t=>{const{v:a,r:i}=t,o=this.bucketsHelper.getBucketForValue(a,i);return{...t,c:o.colour}})};this.build=()=>(this.validateDefinition(),this.initTimeseriesData(),this.bucketData(),{type:this.type,unit:this.unit,timeseries:!0,data:{datasets:[{label:this.label,data:this.data}]}});this.granularity=a,this.setLabel(),this.initUnit(),this.bucketsHelper=new f.default(t,this.definition,this.valueKey,!0)}}var Y=d;0&&(module.exports={HeatmapChart});
+"use strict";var k=Object.create;var u=Object.defineProperty;var x=Object.getOwnPropertyDescriptor;var M=Object.getOwnPropertyNames;var w=Object.getPrototypeOf,C=Object.prototype.hasOwnProperty;var T=(e,t)=>{for(var a in t)u(e,a,{get:t[a],enumerable:!0})},d=(e,t,a,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of M(t))!C.call(e,i)&&i!==a&&u(e,i,{get:()=>t[i],enumerable:!(r=x(t,i))||r.enumerable});return e};var l=(e,t,a)=>(a=e!=null?k(w(e)):{},d(t||!e||!e.__esModule?u(a,"default",{value:e,enumerable:!0}):a,e)),L=e=>d(u({},"__esModule",{value:!0}),e);var R={};T(R,{HeatmapChart:()=>p,default:()=>B});module.exports=L(R);var n=l(require("dayjs")),c=require("../../../_dashboards/dashboard-visualisation/types"),D=l(require("../../../../utils/datasetHelper")),y=l(require("../buckets/Buckets")),b=l(require("./validate")),f=l(require("../chart-config"));class p{constructor(){this.responseData=[];this.data=[];this.dayDateFormat="DD/MM/YYYY";this.valueKey="";this.label="";this.datasets=[];this.config=f.default;this.xLabels=[];this.yLabels=[];this.withDefinition=t=>(this.definition=b.default.parse(t),this.init(),this);this.withData=t=>(this.responseData=t,this.bucketsHelper=new y.default(this.responseData,this.definition,this.valueKey,!0),this);this.withGranularity=t=>(this.granularity=t,this);this.init=()=>{this.measures=this.definition.columns.measures,this.setLabel(),this.initUnit()};this.initUnit=()=>{this.unit=this.measures[0].unit?this.measures[0].unit:void 0};this.setLabel=()=>{const{id:t,display:a}=this.measures[1];this.valueKey=t,this.label=a||""};this.initTimeseriesData=()=>{const t=D.default.groupRowsByTimestamp(this.responseData);this.data=t.map(a=>{const{raw:r,rag:i}=a[0][this.valueKey],s=a[0].ts.raw,g=Number(r),v=i!==void 0?Number(a[0][this.valueKey].rag):void 0;let o=0,h=0;switch(this.granularity){case"hourly":break;case"weekly":o=(0,n.default)(s,this.dayDateFormat).format("ddd"),h=(0,n.default)(s,this.dayDateFormat).week();break;case"daily":o=(0,n.default)(s,this.dayDateFormat).format("MMM YY"),h=(0,n.default)(s,this.dayDateFormat).format("D");break;case"monthly":{const m=s.split(" ");o=m[1],h=m[0]}break;case"annually":o="year",h=s;break;default:o=(0,n.default)(s,this.dayDateFormat).format("MMM YY"),h=(0,n.default)(s,this.dayDateFormat).format("D");break}return{y:h,x:o,v:g,r:v}}),this.bucketData(),this.datasets=[{label:this.label,data:this.data}]};this.bucketData=()=>{this.data=this.data.map(t=>{const{v:a,r}=t,i=this.bucketsHelper.getBucketForValue(a,r);return{...t,c:i.colour}})};this.setBespokeOptions=()=>{this.config={...this.config,scales:this.setScales()}};this.getCanvasHeight=()=>this.yLabels.length*20+60;this.build=()=>{this.initTimeseriesData(),this.bucketData(),this.setBespokeOptions();const t=this.getCanvasHeight();return{type:c.DashboardVisualisationType.MATRIX,options:{unit:this.unit,timeseries:!0,height:t},data:{datasets:this.datasets,config:this.config}}}}setScales(){this.xLabels=[...new Set(this.datasets[0].data.map(s=>s.x))],this.yLabels=[...new Set(this.datasets[0].data.map(s=>s.y))];const i={offset:!0,ticks:{padding:1,maxRotation:0,stepSize:1},grid:{display:!1,drawBorder:!1}};return{y:{position:"left",type:"category",...this.yLabels&&{labels:this.yLabels},...i},x:{position:"top",type:"category",...this.xLabels&&{labels:this.xLabels},...i}}}}var B=p;0&&(module.exports={HeatmapChart});
 //# sourceMappingURL=HeatmapChart.js.map