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

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

@@ -0,0 +1,59 @@
+import { z } from 'zod'
+import { DashboardVisualisationSchema, DashboardColumns } from '../../../_dashboards/dashboard-visualisation/Validate'
+
+const BarMeasureShema = z.object({
+  id: z.string(),
+  display: z.string().optional(),
+  unit: z.enum(['NUMBER', 'PERCENTAGE']).optional(),
+  axis: z.enum(['x', 'y']).optional(),
+})
+
+const BarOptionsSchema = z.object({
+  showLatest: z.boolean().default(true),
+  horizontal: z.boolean().default(false),
+  xStacked: z.boolean().default(false),
+  yStacked: z.boolean().default(false),
+})
+
+const BarSchema = z.object({
+  ...DashboardVisualisationSchema.shape,
+  type: z.literal('bar'),
+  display: z.string(),
+  options: z.object(BarOptionsSchema.shape).optional(),
+  columns: z.object({
+    ...DashboardColumns.shape,
+    measures: z
+      .array(BarMeasureShema)
+      .refine(
+        (measures) => {
+          const xAxis = measures.find((m) => m.axis === 'x')
+          const yAxis = measures.find((m) => m.axis === 'y')
+
+          let valid = true
+          if ((xAxis !== undefined && !yAxis) || (yAxis !== undefined && !xAxis)) {
+            valid = false
+          }
+          return valid
+        },
+        { error: 'X and Y axis must be defined in measure' },
+      )
+      .refine(
+        (measures) => {
+          const xAxis = measures.find((m) => m.axis === 'x')
+          const yAxis = measures.find((m) => m.axis === 'y')
+          let valid = true
+          if (xAxis !== undefined && yAxis !== undefined && measures.length > 2) valid = false
+          return valid
+        },
+        { error: 'Measure must contain only 2 items when axis is specified' },
+      ),
+  }),
+})
+
+const BarChartSchemas = {
+  BarSchema,
+  BarMeasureShema,
+  BarOptionsSchema,
+}
+
+export default BarChartSchemas

package/dpr/components/_charts/chart/bar-timeseries/BarTimeseriesChart.js

@@ -0,0 +1,2 @@
+"use strict";var u=Object.create;var r=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var B=Object.getOwnPropertyNames;var D=Object.getPrototypeOf,c=Object.prototype.hasOwnProperty;var C=(i,t)=>{for(var s in t)r(i,s,{get:t[s],enumerable:!0})},h=(i,t,s,a)=>{if(t&&typeof t=="object"||typeof t=="function")for(let e of B(t))!c.call(i,e)&&e!==s&&r(i,e,{get:()=>t[e],enumerable:!(a=f(t,e))||a.enumerable});return i};var o=(i,t,s)=>(s=i!=null?u(D(i)):{},h(t||!i||!i.__esModule?r(s,"default",{value:i,enumerable:!0}):s,i)),b=i=>h(r({},"__esModule",{value:!0}),i);var y={};C(y,{BarTimeseriesChart:()=>n,default:()=>T});module.exports=b(y);var m=require("../../../_dashboards/dashboard-visualisation/types"),d=o(require("./validate")),p=o(require("../ChartTimeseries")),l=o(require("../bar/BarChart"));class n extends p.default{constructor(){super(...arguments);this.BarChartBuilder=new l.default;this.withDefinition=s=>(this.definition=d.default.BarTimeseriesSchema.parse(s),this.initFromDefinition(this.definition),this);this.build=()=>(this.buildDatasets(),this.setStyles(),this.datasets=this.BarChartBuilder.augmentDataset(this.datasets),this.BarChartBuilder.setBespokeOptions(),{type:m.DashboardVisualisationType.BAR,options:{unit:this.unit,timeseries:!0},data:{labels:this.labels,datasets:this.datasets,config:this.config}});this.setStyles=()=>{this.datasets=this.datasets.map((s,a)=>{const e=this.hexColours[a];return{...s,backgroundColor:e,borderColor:e}})}}}var T=n;0&&(module.exports={BarTimeseriesChart});
+//# sourceMappingURL=BarTimeseriesChart.js.map

package/dpr/components/_charts/chart/bar-timeseries/BarTimeseriesChart.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/dpr/components/_charts/chart/bar-timeseries/BarTimeseriesChart.ts"],
+  "sourcesContent": ["/* eslint-disable prefer-destructuring */\nimport {\n  DashboardVisualisationType,\n  DashboardVisualisationData,\n} from '../../../_dashboards/dashboard-visualisation/types'\nimport { components } from '../../../../types/api'\nimport { BarTimeseriesDefinitionType } from './types'\nimport BarTimeseriesChartSchemas from './validate'\nimport TimeseriesChart from '../ChartTimeseries'\nimport BarChart from '../bar/BarChart'\n\nclass BarTimeseriesChart extends TimeseriesChart {\n  private definition!: BarTimeseriesDefinitionType\n\n  private BarChartBuilder: BarChart = new BarChart()\n\n  withDefinition = (definition: components['schemas']['DashboardVisualisationDefinition']) => {\n    this.definition = BarTimeseriesChartSchemas.BarTimeseriesSchema.parse(definition)\n    this.initFromDefinition(this.definition)\n\n    return this\n  }\n\n  build = (): DashboardVisualisationData => {\n    this.buildDatasets()\n    this.setStyles()\n    this.datasets = this.BarChartBuilder.augmentDataset(this.datasets)\n    this.BarChartBuilder.setBespokeOptions()\n\n    return {\n      type: DashboardVisualisationType.BAR,\n      options: {\n        unit: this.unit,\n        timeseries: true,\n      },\n      data: {\n        labels: this.labels,\n        datasets: this.datasets,\n        config: this.config,\n      },\n    }\n  }\n\n  private setStyles = () => {\n    this.datasets = this.datasets.map((set, datasetIndex) => {\n      const colour = this.hexColours[datasetIndex]\n      return {\n        ...set,\n        backgroundColor: colour,\n        borderColor: colour,\n      }\n    })\n  }\n}\n\nexport { BarTimeseriesChart }\nexport default BarTimeseriesChart\n"],
+  "mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,wBAAAE,EAAA,YAAAC,IAAA,eAAAC,EAAAJ,GACA,IAAAK,EAGO,8DAGPC,EAAsC,yBACtCC,EAA4B,iCAC5BC,EAAqB,8BAErB,MAAMN,UAA2B,EAAAO,OAAgB,CAAjD,kCAGE,KAAQ,gBAA4B,IAAI,EAAAC,QAExC,oBAAkBC,IAChB,KAAK,WAAa,EAAAC,QAA0B,oBAAoB,MAAMD,CAAU,EAChF,KAAK,mBAAmB,KAAK,UAAU,EAEhC,MAGT,WAAQ,KACN,KAAK,cAAc,EACnB,KAAK,UAAU,EACf,KAAK,SAAW,KAAK,gBAAgB,eAAe,KAAK,QAAQ,EACjE,KAAK,gBAAgB,kBAAkB,EAEhC,CACL,KAAM,6BAA2B,IACjC,QAAS,CACP,KAAM,KAAK,KACX,WAAY,EACd,EACA,KAAM,CACJ,OAAQ,KAAK,OACb,SAAU,KAAK,SACf,OAAQ,KAAK,MACf,CACF,GAGF,KAAQ,UAAY,IAAM,CACxB,KAAK,SAAW,KAAK,SAAS,IAAI,CAACE,EAAKC,IAAiB,CACvD,MAAMC,EAAS,KAAK,WAAWD,CAAY,EAC3C,MAAO,CACL,GAAGD,EACH,gBAAiBE,EACjB,YAAaA,CACf,CACF,CAAC,CACH,EACF,CAGA,IAAOZ,EAAQD",
+  "names": ["BarTimeseriesChart_exports", "__export", "BarTimeseriesChart", "BarTimeseriesChart_default", "__toCommonJS", "import_types", "import_validate", "import_ChartTimeseries", "import_BarChart", "TimeseriesChart", "BarChart", "definition", "BarTimeseriesChartSchemas", "set", "datasetIndex", "colour"]
+}

package/dpr/components/_charts/chart/bar-timeseries/BarTimeseriesChart.ts

@@ -0,0 +1,57 @@
+/* eslint-disable prefer-destructuring */
+import {
+  DashboardVisualisationType,
+  DashboardVisualisationData,
+} from '../../../_dashboards/dashboard-visualisation/types'
+import { components } from '../../../../types/api'
+import { BarTimeseriesDefinitionType } from './types'
+import BarTimeseriesChartSchemas from './validate'
+import TimeseriesChart from '../ChartTimeseries'
+import BarChart from '../bar/BarChart'
+
+class BarTimeseriesChart extends TimeseriesChart {
+  private definition!: BarTimeseriesDefinitionType
+
+  private BarChartBuilder: BarChart = new BarChart()
+
+  withDefinition = (definition: components['schemas']['DashboardVisualisationDefinition']) => {
+    this.definition = BarTimeseriesChartSchemas.BarTimeseriesSchema.parse(definition)
+    this.initFromDefinition(this.definition)
+
+    return this
+  }
+
+  build = (): DashboardVisualisationData => {
+    this.buildDatasets()
+    this.setStyles()
+    this.datasets = this.BarChartBuilder.augmentDataset(this.datasets)
+    this.BarChartBuilder.setBespokeOptions()
+
+    return {
+      type: DashboardVisualisationType.BAR,
+      options: {
+        unit: this.unit,
+        timeseries: true,
+      },
+      data: {
+        labels: this.labels,
+        datasets: this.datasets,
+        config: this.config,
+      },
+    }
+  }
+
+  private setStyles = () => {
+    this.datasets = this.datasets.map((set, datasetIndex) => {
+      const colour = this.hexColours[datasetIndex]
+      return {
+        ...set,
+        backgroundColor: colour,
+        borderColor: colour,
+      }
+    })
+  }
+}
+
+export { BarTimeseriesChart }
+export default BarTimeseriesChart

package/dpr/components/_charts/chart/bar-timeseries/types.js

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

package/dpr/components/_charts/chart/bar-timeseries/types.js.map

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

package/dpr/components/_charts/chart/bar-timeseries/types.ts

@@ -0,0 +1,5 @@
+import z from 'zod'
+import BarTimeseriesChartSchemas from './validate'
+
+export type BarTimeseriesDefinitionType = z.infer<typeof BarTimeseriesChartSchemas.BarTimeseriesSchema>
+export type BarTimeseriesDefinitionMeasure = z.infer<typeof BarTimeseriesChartSchemas.BarTimeseriesMeasureSchema>

package/dpr/components/_charts/chart/bar-timeseries/validate.js

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

package/dpr/components/_charts/chart/bar-timeseries/validate.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/dpr/components/_charts/chart/bar-timeseries/validate.ts"],
+  "sourcesContent": ["import { z } from 'zod'\nimport { DashboardVisualisationSchema, DashboardColumns } from '../../../_dashboards/dashboard-visualisation/Validate'\n\nconst BarTimeseriesMeasureSchema = z.object({\n  id: z.string(),\n  display: z.string().optional(),\n  unit: z.enum(['NUMBER', 'PERCENTAGE']).optional(),\n})\n\nconst BarTimeseriesOptions = z.object({\n  showLatest: z.literal(false),\n})\n\nconst BarTimeseriesSchema = z.object({\n  ...DashboardVisualisationSchema.shape,\n  display: z.string(),\n  type: z.literal('bar-timeseries'),\n  options: z.object(BarTimeseriesOptions.shape).optional(),\n  columns: z.object({\n    ...DashboardColumns.shape,\n    measures: z.array(BarTimeseriesMeasureSchema).min(1, 'Measure must contain at least one item'),\n  }),\n})\n\nconst BarTimeseriesChartSchemas = {\n  BarTimeseriesMeasureSchema,\n  BarTimeseriesSchema,\n}\n\nexport default BarTimeseriesChartSchemas\n"],
+  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAAA,IAAAI,EAAkB,eAClBC,EAA+D,iEAE/D,MAAMC,EAA6B,IAAE,OAAO,CAC1C,GAAI,IAAE,OAAO,EACb,QAAS,IAAE,OAAO,EAAE,SAAS,EAC7B,KAAM,IAAE,KAAK,CAAC,SAAU,YAAY,CAAC,EAAE,SAAS,CAClD,CAAC,EAEKC,EAAuB,IAAE,OAAO,CACpC,WAAY,IAAE,QAAQ,EAAK,CAC7B,CAAC,EAEKC,EAAsB,IAAE,OAAO,CACnC,GAAG,+BAA6B,MAChC,QAAS,IAAE,OAAO,EAClB,KAAM,IAAE,QAAQ,gBAAgB,EAChC,QAAS,IAAE,OAAOD,EAAqB,KAAK,EAAE,SAAS,EACvD,QAAS,IAAE,OAAO,CAChB,GAAG,mBAAiB,MACpB,SAAU,IAAE,MAAMD,CAA0B,EAAE,IAAI,EAAG,wCAAwC,CAC/F,CAAC,CACH,CAAC,EAEKG,EAA4B,CAChC,2BAAAH,EACA,oBAAAE,CACF,EAEA,IAAON,EAAQO",
+  "names": ["validate_exports", "__export", "validate_default", "__toCommonJS", "import_zod", "import_Validate", "BarTimeseriesMeasureSchema", "BarTimeseriesOptions", "BarTimeseriesSchema", "BarTimeseriesChartSchemas"]
+}

package/dpr/components/_charts/chart/bar-timeseries/validate.ts

@@ -0,0 +1,30 @@
+import { z } from 'zod'
+import { DashboardVisualisationSchema, DashboardColumns } from '../../../_dashboards/dashboard-visualisation/Validate'
+
+const BarTimeseriesMeasureSchema = z.object({
+  id: z.string(),
+  display: z.string().optional(),
+  unit: z.enum(['NUMBER', 'PERCENTAGE']).optional(),
+})
+
+const BarTimeseriesOptions = z.object({
+  showLatest: z.literal(false),
+})
+
+const BarTimeseriesSchema = z.object({
+  ...DashboardVisualisationSchema.shape,
+  display: z.string(),
+  type: z.literal('bar-timeseries'),
+  options: z.object(BarTimeseriesOptions.shape).optional(),
+  columns: z.object({
+    ...DashboardColumns.shape,
+    measures: z.array(BarTimeseriesMeasureSchema).min(1, 'Measure must contain at least one item'),
+  }),
+})
+
+const BarTimeseriesChartSchemas = {
+  BarTimeseriesMeasureSchema,
+  BarTimeseriesSchema,
+}
+
+export default BarTimeseriesChartSchemas

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

@@ -0,0 +1,2 @@
+"use strict";var m=Object.create;var h=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var C=Object.getPrototypeOf,d=Object.prototype.hasOwnProperty;var g=(o,t)=>{for(var e in t)h(o,e,{get:t[e],enumerable:!0})},l=(o,t,e,s)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of b(t))!d.call(o,i)&&i!==e&&h(o,i,{get:()=>t[i],enumerable:!(s=f(t,i))||s.enumerable});return o};var B=(o,t,e)=>(e=o!=null?m(C(o)):{},l(t||!o||!o.__esModule?h(e,"default",{value:o,enumerable:!0}):e,o)),D=o=>l(h({},"__esModule",{value:!0}),o);var y={};g(y,{Buckets:()=>c,default:()=>v});module.exports=D(y);var p=require("with-alpha-hex"),k=B(require("./validate"));class c{constructor(t,e,s,i,r){this.baseColour="#1d70b8";this.ragColours=["#00703c","#ffdd00","#d4351c"];this.buckets=[];this.useRagColour=!1;this.bucketCount=0;this.onlyBucketColoursDefined=!1;this.autoBucketing=!1;this.hasRagScore=!1;this.initFromOptions=t=>{this.options=k.default.parse(t.options),this.baseColour=this.options?.baseColour||this.baseColour,this.useRagColour=this.options?.useRagColour||!1,this.onlyBucketColoursDefined=this.options&&this.options.buckets?this.options?.buckets?.every(e=>!e.max&&!e.min&&e.hexColour!==void 0):!1};this.initBuckets=()=>{const{buckets:t}=this.options;this.setBucketCount(),this.initBucketColours(),t&&t.length?this.hasRagScore?this.onlyBucketColoursDefined&&(this.buckets=t):!this.hasRagScore&&this.onlyBucketColoursDefined&&this.autoBucketing?this.initAutomaticThresholdBucket():this.initCustomThresholdBuckets():!this.hasRagScore&&this.autoBucketing&&this.initAutomaticThresholdBucket()};this.initCustomThresholdBuckets=()=>{this.buckets=this.options.buckets?this.options.buckets.map((t,e)=>({...this.buckets[e],...t})):[]};this.initAutomaticThresholdBucket=()=>{const{min:t,max:e,bucketSize:s}=this.setAutomaticThresholdSize();let i=0;this.buckets=this.buckets.map((r,u)=>{let n=t;return u!==0&&(n=i+1),i=s*(u+1)+t,u===this.buckets.length-1&&(i=e),{hexColour:this.options?.buckets&&this.options?.buckets.length?this.options.buckets[u]?.hexColour:r.hexColour,min:n,max:i}})};this.initBucketColours=()=>{if(this.useRagColour&&this.bucketCount===3)this.buckets=Array.from(new Array(this.bucketCount)).map((t,e)=>({hexColour:this.ragColours[e]}));else{const t=1/this.bucketCount;this.buckets=Array.from(new Array(this.bucketCount)).map((e,s)=>{const i=t*(s+1);return{hexColour:(0,p.withAlphaHex)(this.baseColour,i)}})}};this.setAutomaticThresholdSize=()=>{const t=this.responseData.map(r=>Number(r[this.valueKey].raw)),e=Math.min(...t),s=Math.max(...t),i=Math.ceil((s-e)/this.bucketCount);return{min:e,max:s,bucketSize:i}};this.setBucketCount=()=>{const{buckets:t}=this.options;if(this.hasRagScore)if(this.useRagColour)this.bucketCount=3;else{const e=this.responseData.reduce((s,i)=>(i[this.valueKey].rag!==void 0&&s.push(i[this.valueKey].rag),s),[]);this.bucketCount=Math.max(...e)+1}else t&&t.length?this.bucketCount=t.length:this.bucketCount=3};this.getBucketForValue=(t,e)=>{let s="",i=0;return e!==void 0?{colour:this.buckets[e].hexColour||s,score:e}:(this.buckets.forEach((r,u)=>{const{min:n,max:a}=r;!n&&a&&t<=a&&(s=r.hexColour||s,i=u),n&&t>=n&&a&&t<=a&&(s=r.hexColour||s,i=u),n&&!a&&t>=n&&(s=r.hexColour||s,i=u)}),{colour:s,score:i})};this.getBuckets=()=>this.buckets;this.responseData=t,this.initFromOptions(e),this.valueKey=s,this.hasRagScore=t[0][this.valueKey].rag!==void 0,this.autoBucketing=!!i,r&&(this.ragColours=r),this.initBuckets()}}var v=c;0&&(module.exports={Buckets});
+//# sourceMappingURL=Buckets.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/dpr/components/_charts/chart/buckets/Buckets.ts"],
+  "sourcesContent": ["/* eslint-disable prefer-destructuring */\nimport { withAlphaHex } from 'with-alpha-hex'\nimport { ScorecardDefinitionType } from '../../../_dashboards/scorecard/types'\nimport { ScorecardGroupDefinitionType } from '../../../_dashboards/scorecard-group/types'\nimport { DashboardDataResponse } from '../../../../types/Metrics'\nimport { DashboardVisualisationBucket } from '../../../_dashboards/dashboard-visualisation/types'\nimport { MatrixTimeseriesDefinitionType } from '../heatmap/types'\nimport BucketOptionsSchema from './validate'\nimport { BucketOptionsDefinition } from './types'\n\ntype DefinitionsWithBuckets = MatrixTimeseriesDefinitionType | ScorecardGroupDefinitionType | ScorecardDefinitionType\n\nclass Buckets {\n  private baseColour = '#1d70b8'\n\n  private ragColours: string[] = ['#00703c', '#ffdd00', '#d4351c']\n\n  private buckets: DashboardVisualisationBucket[] = []\n\n  private useRagColour = false\n\n  private bucketCount = 0\n\n  private onlyBucketColoursDefined = false\n\n  private autoBucketing = false\n\n  private hasRagScore = false\n\n  private valueKey: string\n\n  private options!: BucketOptionsDefinition\n\n  responseData: DashboardDataResponse[]\n\n  constructor(\n    responseData: DashboardDataResponse[],\n    definition: DefinitionsWithBuckets,\n    valueKey: string,\n    autoBucketing?: boolean,\n    ragColours?: string[],\n  ) {\n    this.responseData = responseData\n    this.initFromOptions(definition)\n    this.valueKey = valueKey\n    this.hasRagScore = responseData[0][this.valueKey].rag !== undefined\n    this.autoBucketing = Boolean(autoBucketing)\n    if (ragColours) this.ragColours = ragColours\n    this.initBuckets()\n  }\n\n  private initFromOptions = (definition: DefinitionsWithBuckets) => {\n    this.options = BucketOptionsSchema.parse(definition.options)\n    this.baseColour = this.options?.baseColour || this.baseColour\n    this.useRagColour = this.options?.useRagColour || false\n    this.onlyBucketColoursDefined =\n      this.options && this.options.buckets\n        ? this.options?.buckets?.every((bucket) => !bucket.max && !bucket.min && bucket.hexColour !== undefined)\n        : false\n  }\n\n  private initBuckets = () => {\n    const { buckets } = this.options\n\n    this.setBucketCount()\n    this.initBucketColours()\n\n    if (buckets && buckets.length) {\n      if (this.hasRagScore) {\n        if (this.onlyBucketColoursDefined) {\n          this.buckets = buckets\n        }\n      } else if (!this.hasRagScore && this.onlyBucketColoursDefined && this.autoBucketing) {\n        this.initAutomaticThresholdBucket()\n      } else {\n        this.initCustomThresholdBuckets()\n      }\n    } else if (!this.hasRagScore && this.autoBucketing) {\n      this.initAutomaticThresholdBucket()\n    }\n  }\n\n  private initCustomThresholdBuckets = () => {\n    this.buckets = this.options.buckets\n      ? this.options.buckets.map((bucket, i) => {\n          return {\n            ...this.buckets[i],\n            ...bucket,\n          }\n        })\n      : []\n  }\n\n  /**\n   * Initialises the bucket thresholds by defining the range between the min and max\n   * and dividing into 3 equal parts\n   */\n  private initAutomaticThresholdBucket = () => {\n    const { min, max, bucketSize } = this.setAutomaticThresholdSize()\n    let maxValue = 0\n    this.buckets = this.buckets.map((bucket, i) => {\n      let minValue = min\n      if (i !== 0) minValue = maxValue + 1\n      maxValue = bucketSize * (i + 1) + min\n      if (i === this.buckets.length - 1) maxValue = max\n\n      return {\n        hexColour:\n          this.options?.buckets && this.options?.buckets.length ? this.options.buckets[i]?.hexColour : bucket.hexColour,\n        min: minValue,\n        max: maxValue,\n      }\n    })\n  }\n\n  private initBucketColours = () => {\n    if (this.useRagColour && this.bucketCount === 3) {\n      this.buckets = Array.from(new Array(this.bucketCount)).map((_d, i) => {\n        return {\n          hexColour: this.ragColours[i],\n        }\n      })\n    } else {\n      const alphaDivision = 1 / this.bucketCount\n      this.buckets = Array.from(new Array(this.bucketCount)).map((_d, i) => {\n        const division = alphaDivision * (i + 1)\n        return {\n          hexColour: withAlphaHex(this.baseColour, division),\n        }\n      })\n    }\n  }\n\n  private setAutomaticThresholdSize = () => {\n    const values = this.responseData.map((resData) => Number(resData[this.valueKey].raw))\n    const min = Math.min(...values)\n    const max = Math.max(...values)\n    const bucketSize = Math.ceil((max - min) / this.bucketCount)\n\n    return {\n      min,\n      max,\n      bucketSize,\n    }\n  }\n\n  private setBucketCount = () => {\n    const { buckets } = this.options\n    if (this.hasRagScore) {\n      if (this.useRagColour) {\n        this.bucketCount = 3\n      } else {\n        const allRags: number[] = this.responseData.reduce((acc: number[], resData: DashboardDataResponse) => {\n          if (resData[this.valueKey].rag !== undefined) {\n            acc.push(<number>resData[this.valueKey].rag)\n          }\n          return acc\n        }, [])\n        this.bucketCount = Math.max(...allRags) + 1\n      }\n    } else if (buckets && buckets.length) {\n      this.bucketCount = buckets.length\n    } else {\n      this.bucketCount = 3\n    }\n  }\n\n  getBucketForValue = (value: number, ragScore?: number): { colour: string; score: number } => {\n    let colour = ''\n    let score = 0\n\n    if (ragScore !== undefined) {\n      return {\n        colour: this.buckets[ragScore].hexColour || colour,\n        score: ragScore,\n      }\n    }\n\n    this.buckets.forEach((bucket, index) => {\n      const { min, max } = bucket\n      // First bucket\n      if (!min && max && value <= max) {\n        colour = bucket.hexColour || colour\n        score = index\n      }\n      // middle buckets\n      if (min && value >= min && max && value <= max) {\n        colour = bucket.hexColour || colour\n        score = index\n      }\n      // last bucket\n      if (min && !max && value >= min) {\n        colour = bucket.hexColour || colour\n        score = index\n      }\n    })\n\n    return {\n      colour,\n      score,\n    }\n  }\n\n  getBuckets = () => {\n    return this.buckets\n  }\n}\n\nexport { Buckets }\nexport default Buckets\n"],
+  "mappings": "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",
+  "names": ["Buckets_exports", "__export", "Buckets", "Buckets_default", "__toCommonJS", "import_with_alpha_hex", "import_validate", "responseData", "definition", "valueKey", "autoBucketing", "ragColours", "BucketOptionsSchema", "bucket", "buckets", "i", "min", "max", "bucketSize", "maxValue", "minValue", "_d", "alphaDivision", "division", "values", "resData", "allRags", "acc", "value", "ragScore", "colour", "score", "index"]
+}

package/dpr/components/_charts/chart/{Buckets.ts → buckets/Buckets.ts}

@@ -1,11 +1,14 @@
 /* eslint-disable prefer-destructuring */
 import { withAlphaHex } from 'with-alpha-hex'
-import { DashboardDataResponse } from '../../../types/Metrics'
-import {
-  DashboardVisualisationBucket,
-  BucketDashboardVisualisationOptions,
-} from '../../_dashboards/dashboard-visualisation/types'
-import { components } from '../../../types/api'
+import { ScorecardDefinitionType } from '../../../_dashboards/scorecard/types'
+import { ScorecardGroupDefinitionType } from '../../../_dashboards/scorecard-group/types'
+import { DashboardDataResponse } from '../../../../types/Metrics'
+import { DashboardVisualisationBucket } from '../../../_dashboards/dashboard-visualisation/types'
+import { MatrixTimeseriesDefinitionType } from '../heatmap/types'
+import BucketOptionsSchema from './validate'
+import { BucketOptionsDefinition } from './types'
+
+type DefinitionsWithBuckets = MatrixTimeseriesDefinitionType | ScorecardGroupDefinitionType | ScorecardDefinitionType
 
 class Buckets {
   private baseColour = '#1d70b8'
@@ -26,13 +29,13 @@ class Buckets {
 
   private valueKey: string
 
-  private options: BucketDashboardVisualisationOptions = {}
+  private options!: BucketOptionsDefinition
 
   responseData: DashboardDataResponse[]
 
   constructor(
     responseData: DashboardDataResponse[],
-    definition: components['schemas']['DashboardVisualisationDefinition'],
+    definition: DefinitionsWithBuckets,
     valueKey: string,
     autoBucketing?: boolean,
     ragColours?: string[],
@@ -46,8 +49,8 @@ class Buckets {
     this.initBuckets()
   }
 
-  private initFromOptions = (definition: components['schemas']['DashboardVisualisationDefinition']) => {
-    this.options = <BucketDashboardVisualisationOptions>definition.options || {}
+  private initFromOptions = (definition: DefinitionsWithBuckets) => {
+    this.options = BucketOptionsSchema.parse(definition.options)
     this.baseColour = this.options?.baseColour || this.baseColour
     this.useRagColour = this.options?.useRagColour || false
     this.onlyBucketColoursDefined =
@@ -62,7 +65,7 @@ class Buckets {
     this.setBucketCount()
     this.initBucketColours()
 
-    if (buckets) {
+    if (buckets && buckets.length) {
       if (this.hasRagScore) {
         if (this.onlyBucketColoursDefined) {
           this.buckets = buckets
@@ -72,7 +75,7 @@ class Buckets {
       } else {
         this.initCustomThresholdBuckets()
       }
-    } else if (!buckets && !this.hasRagScore && this.autoBucketing) {
+    } else if (!this.hasRagScore && this.autoBucketing) {
       this.initAutomaticThresholdBucket()
     }
   }
@@ -102,7 +105,8 @@ class Buckets {
       if (i === this.buckets.length - 1) maxValue = max
 
       return {
-        hexColour: this.options?.buckets ? this.options.buckets[i]?.hexColour : bucket.hexColour,
+        hexColour:
+          this.options?.buckets && this.options?.buckets.length ? this.options.buckets[i]?.hexColour : bucket.hexColour,
         min: minValue,
         max: maxValue,
       }
@@ -154,7 +158,7 @@ class Buckets {
         }, [])
         this.bucketCount = Math.max(...allRags) + 1
       }
-    } else if (buckets) {
+    } else if (buckets && buckets.length) {
       this.bucketCount = buckets.length
     } else {
       this.bucketCount = 3

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

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

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