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

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

@@ -0,0 +1,204 @@
+/* eslint-disable prefer-destructuring */
+import { DashboardDataResponse } from '../../../../types/Metrics'
+import {
+  DashboardVisualisationType,
+  DashboardVisualisationData,
+  DashboardVisualisationDataSet,
+  VisualisationDefinitionKey,
+} from '../../../_dashboards/dashboard-visualisation/types'
+import { components } from '../../../../types/api'
+import DatasetHelper from '../../../../utils/datasetHelper'
+import Chart from '../Chart'
+import BarChartSchemas from './validate'
+import { BarDefinitionMeasure, BarDefinitionOptions, BarDefinitionType } from './types'
+import { ChartColours } from '../ChartColours'
+
+class BarChart extends Chart {
+  private definition!: BarDefinitionType
+
+  private measures!: BarDefinitionMeasure[]
+
+  private keys!: VisualisationDefinitionKey[]
+
+  private options: BarDefinitionOptions | undefined
+
+  override responseData: DashboardDataResponse[] = []
+
+  private isList = false
+
+  override datasets: DashboardVisualisationDataSet[] = []
+
+  private groupsData: DashboardDataResponse[][] = []
+
+  private groupKey: BarDefinitionMeasure | undefined
+
+  private xAxisColumn: BarDefinitionMeasure | undefined
+
+  private yAxisColumn: BarDefinitionMeasure | undefined
+
+  private barCount = 0
+
+  withDefinition = (definition: components['schemas']['DashboardVisualisationDefinition']) => {
+    this.definition = BarChartSchemas.BarSchema.parse(definition)
+    this.initFromDefinitionData()
+
+    return this
+  }
+
+  override withData = (responseData: DashboardDataResponse[]) => {
+    this.responseData = responseData
+    if (this.isList) this.initListData()
+    return this
+  }
+
+  getCanvasHeight = () => {
+    this.barCount = this.datasets.length * this.datasets[0].data.length
+    return this.options?.horizontal ? this.barCount * 40 + 60 : 400
+  }
+
+  build = (): DashboardVisualisationData => {
+    if (!this.isList) {
+      this.getBarChartData()
+    } else {
+      this.getListBarChartData()
+    }
+    const height = this.getCanvasHeight()
+
+    return {
+      type: DashboardVisualisationType.BAR,
+      options: {
+        height,
+        unit: this.unit,
+        timeseries: false,
+      },
+      data: {
+        labels: this.labels,
+        datasets: this.datasets,
+        config: this.config,
+      },
+    }
+  }
+
+  augmentDataset = (datasets: DashboardVisualisationDataSet[]) => {
+    return datasets.map((set) => {
+      return {
+        ...set,
+        borderWidth: [0, 0],
+        datalabels: {
+          align: 'center',
+          anchor: 'bottom',
+        },
+      }
+    })
+  }
+
+  setBespokeOptions = () => {
+    let indexAxis = 'x'
+    let scales
+
+    if (this.options) {
+      const { horizontal, xStacked, yStacked } = this.options
+      indexAxis = horizontal ? 'y' : indexAxis
+      if (xStacked || yStacked) {
+        scales = {
+          ...(xStacked && { x: { stacked: xStacked } }),
+          ...(yStacked && { y: { stacked: yStacked } }),
+        }
+      }
+    }
+
+    return {
+      ...this.config,
+      indexAxis,
+      ...(scales && { scales }),
+    }
+  }
+
+  private getBarChartData = () => {
+    this.createDatasets(this.measures, this.responseData)
+    this.datasets = this.augmentDataset(this.datasets)
+    this.config = this.setBespokeOptions()
+    this.createLabels(this.measures)
+  }
+
+  private getListBarChartData = () => {
+    this.createListLabels()
+    this.createListDatasets()
+    this.datasets = this.augmentDataset(this.datasets)
+    this.config = this.setBespokeOptions()
+  }
+
+  private initFromDefinitionData = () => {
+    this.measures = this.definition.columns.measures
+    this.options = this.definition.options
+    this.keys = this.definition.columns.keys || []
+    this.isList = !!this.measures.find((col) => col.axis)
+    this.initUnit(this.measures)
+
+    if (!this.isList) this.getLabelId(this.keys)
+  }
+
+  private initListData = () => {
+    this.xAxisColumn = this.measures.find((col) => col.axis === 'x')
+    this.yAxisColumn = this.measures.find((col) => col.axis === 'y')
+    this.groupKey = <BarDefinitionMeasure>(
+      DatasetHelper.getGroupKey(
+        this.responseData,
+        <Array<components['schemas']['DashboardVisualisationColumnDefinition']>>this.keys,
+      )
+    )
+    this.groupsData = this.groupKey
+      ? DatasetHelper.groupRowsByKey(this.responseData, this.groupKey.id)
+      : [this.responseData]
+  }
+
+  private createListDatasets = () => {
+    this.hexColours = new ChartColours().getHexPallette()
+    this.datasets = this.groupsData.map((groupData, groupIndex) => {
+      const data = Array(this.labels.length)
+      groupData.forEach((row) => {
+        // Validation will ensure these columns exist
+        const yId = this.yAxisColumn?.id || ''
+        const xId = this.xAxisColumn?.id || ''
+
+        const labelField = row[xId]
+        const valueField = row[yId]
+
+        const raw = valueField && valueField.raw ? Number(valueField.raw) : 0
+        const dataIndex = this.labels.findIndex((l) => l === labelField.raw)
+        if (dataIndex !== -1) {
+          data[dataIndex] = Number(raw)
+        }
+      })
+
+      let label = ''
+      if (this.groupKey) {
+        const groupKeyId = this.groupKey.id
+        const groupRow = groupData[0]
+        label = groupRow && groupRow[groupKeyId] ? `${groupRow[groupKeyId].raw}` : ''
+      } else {
+        label = this.yAxisColumn?.display || label
+      }
+
+      return {
+        label,
+        data,
+        total: data.reduce((acc: number, val: number) => acc + val, 0),
+        ...this.setStyles(groupIndex),
+      }
+    })
+  }
+
+  private createListLabels = () => {
+    this.labels = this.groupsData.flatMap((gd) => {
+      const id = this.xAxisColumn?.id || ''
+      return gd.map((row) => {
+        const field = row[id]
+        return field ? `${field.raw}` : ''
+      })
+    })
+  }
+}
+
+export { BarChart }
+export default BarChart

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

@@ -16,49 +16,8 @@ class BarChartVisualisation extends ChartVisualisation {
 
   initSettings() {
     return {
-      options: this.setOptions(),
       toolTipOptions: this.setToolTipOptions(),
       datalabels: this.setDataLabels(),
-      styling: this.setDatasetStyling(),
-    }
-  }
-
-  setDatasetStyling() {
-    const pallette = this.getColourPallette()
-    return pallette.map((colour) => {
-      return {
-        borderColor: colour.hex,
-        ...this.setBackgroundColour(colour.hex),
-        datalabels: {
-          align: 'center',
-          anchor: 'center',
-        },
-      }
-    })
-  }
-
-  setBackgroundColour(colour) {
-    const lastIndex = this.chartParams.labels.length - 1
-    const backgroundColors = []
-    const borderWidths = []
-    const borderColors = []
-
-    this.chartParams.labels.forEach((label, i) => {
-      if ((this.partialEnd && i === lastIndex) || (this.partialStart && i === 0)) {
-        backgroundColors.push(colour)
-        borderWidths.push(3)
-        borderColors.push('#b1b4b6')
-      } else {
-        backgroundColors.push(colour)
-        borderWidths.push(0)
-        borderColors.push(colour)
-      }
-    })
-
-    return {
-      backgroundColor: backgroundColors,
-      borderWidth: borderWidths,
-      borderColor: borderColors,
     }
   }
 
@@ -83,23 +42,6 @@ class BarChartVisualisation extends ChartVisualisation {
     }
   }
 
-  setOptions() {
-    const { indexAxis, stacked } = this.chartParams
-    return {
-      indexAxis: indexAxis || 'x',
-      ...(stacked && {
-        scales: {
-          x: {
-            stacked: true,
-          },
-          y: {
-            stacked: true,
-          },
-        },
-      }),
-    }
-  }
-
   setDataLabels() {
     return {
       color: '#FFF',

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

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

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

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

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

@@ -0,0 +1,6 @@
+import z from 'zod'
+import BarChartSchemas from './validate'
+
+export type BarDefinitionType = z.infer<typeof BarChartSchemas.BarSchema>
+export type BarDefinitionMeasure = z.infer<typeof BarChartSchemas.BarMeasureShema>
+export type BarDefinitionOptions = z.infer<typeof BarChartSchemas.BarOptionsSchema>

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

@@ -0,0 +1,2 @@
+"use strict";var r=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var c=Object.prototype.hasOwnProperty;var x=(a,i)=>{for(var t in i)r(a,t,{get:i[t],enumerable:!0})},p=(a,i,t,o)=>{if(i&&typeof i=="object"||typeof i=="function")for(let n of u(i))!c.call(a,n)&&n!==t&&r(a,n,{get:()=>i[n],enumerable:!(o=f(i,n))||o.enumerable});return a};var h=a=>p(r({},"__esModule",{value:!0}),a);var S={};x(S,{default:()=>y});module.exports=h(S);var e=require("zod"),s=require("../../../_dashboards/dashboard-visualisation/Validate");const l=e.z.object({id:e.z.string(),display:e.z.string().optional(),unit:e.z.enum(["NUMBER","PERCENTAGE"]).optional(),axis:e.z.enum(["x","y"]).optional()}),d=e.z.object({showLatest:e.z.boolean().default(!0),horizontal:e.z.boolean().default(!1),xStacked:e.z.boolean().default(!1),yStacked:e.z.boolean().default(!1)}),m=e.z.object({...s.DashboardVisualisationSchema.shape,type:e.z.literal("bar"),display:e.z.string(),options:e.z.object(d.shape).optional(),columns:e.z.object({...s.DashboardColumns.shape,measures:e.z.array(l).refine(a=>{const i=a.find(n=>n.axis==="x"),t=a.find(n=>n.axis==="y");let o=!0;return(i!==void 0&&!t||t!==void 0&&!i)&&(o=!1),o},{error:"X and Y axis must be defined in measure"}).refine(a=>{const i=a.find(n=>n.axis==="x"),t=a.find(n=>n.axis==="y");let o=!0;return i!==void 0&&t!==void 0&&a.length>2&&(o=!1),o},{error:"Measure must contain only 2 items when axis is specified"})})}),b={BarSchema:m,BarMeasureShema:l,BarOptionsSchema:d};var y=b;
+//# sourceMappingURL=validate.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/dpr/components/_charts/chart/bar/validate.ts"],
+  "sourcesContent": ["import { z } from 'zod'\nimport { DashboardVisualisationSchema, DashboardColumns } from '../../../_dashboards/dashboard-visualisation/Validate'\n\nconst BarMeasureShema = z.object({\n  id: z.string(),\n  display: z.string().optional(),\n  unit: z.enum(['NUMBER', 'PERCENTAGE']).optional(),\n  axis: z.enum(['x', 'y']).optional(),\n})\n\nconst BarOptionsSchema = z.object({\n  showLatest: z.boolean().default(true),\n  horizontal: z.boolean().default(false),\n  xStacked: z.boolean().default(false),\n  yStacked: z.boolean().default(false),\n})\n\nconst BarSchema = z.object({\n  ...DashboardVisualisationSchema.shape,\n  type: z.literal('bar'),\n  display: z.string(),\n  options: z.object(BarOptionsSchema.shape).optional(),\n  columns: z.object({\n    ...DashboardColumns.shape,\n    measures: z\n      .array(BarMeasureShema)\n      .refine(\n        (measures) => {\n          const xAxis = measures.find((m) => m.axis === 'x')\n          const yAxis = measures.find((m) => m.axis === 'y')\n\n          let valid = true\n          if ((xAxis !== undefined && !yAxis) || (yAxis !== undefined && !xAxis)) {\n            valid = false\n          }\n          return valid\n        },\n        { error: 'X and Y axis must be defined in measure' },\n      )\n      .refine(\n        (measures) => {\n          const xAxis = measures.find((m) => m.axis === 'x')\n          const yAxis = measures.find((m) => m.axis === 'y')\n          let valid = true\n          if (xAxis !== undefined && yAxis !== undefined && measures.length > 2) valid = false\n          return valid\n        },\n        { error: 'Measure must contain only 2 items when axis is specified' },\n      ),\n  }),\n})\n\nconst BarChartSchemas = {\n  BarSchema,\n  BarMeasureShema,\n  BarOptionsSchema,\n}\n\nexport default BarChartSchemas\n"],
+  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAAA,IAAAI,EAAkB,eAClBC,EAA+D,iEAE/D,MAAMC,EAAkB,IAAE,OAAO,CAC/B,GAAI,IAAE,OAAO,EACb,QAAS,IAAE,OAAO,EAAE,SAAS,EAC7B,KAAM,IAAE,KAAK,CAAC,SAAU,YAAY,CAAC,EAAE,SAAS,EAChD,KAAM,IAAE,KAAK,CAAC,IAAK,GAAG,CAAC,EAAE,SAAS,CACpC,CAAC,EAEKC,EAAmB,IAAE,OAAO,CAChC,WAAY,IAAE,QAAQ,EAAE,QAAQ,EAAI,EACpC,WAAY,IAAE,QAAQ,EAAE,QAAQ,EAAK,EACrC,SAAU,IAAE,QAAQ,EAAE,QAAQ,EAAK,EACnC,SAAU,IAAE,QAAQ,EAAE,QAAQ,EAAK,CACrC,CAAC,EAEKC,EAAY,IAAE,OAAO,CACzB,GAAG,+BAA6B,MAChC,KAAM,IAAE,QAAQ,KAAK,EACrB,QAAS,IAAE,OAAO,EAClB,QAAS,IAAE,OAAOD,EAAiB,KAAK,EAAE,SAAS,EACnD,QAAS,IAAE,OAAO,CAChB,GAAG,mBAAiB,MACpB,SAAU,IACP,MAAMD,CAAe,EACrB,OACEG,GAAa,CACZ,MAAMC,EAAQD,EAAS,KAAME,GAAMA,EAAE,OAAS,GAAG,EAC3CC,EAAQH,EAAS,KAAME,GAAMA,EAAE,OAAS,GAAG,EAEjD,IAAIE,EAAQ,GACZ,OAAKH,IAAU,QAAa,CAACE,GAAWA,IAAU,QAAa,CAACF,KAC9DG,EAAQ,IAEHA,CACT,EACA,CAAE,MAAO,yCAA0C,CACrD,EACC,OACEJ,GAAa,CACZ,MAAMC,EAAQD,EAAS,KAAME,GAAMA,EAAE,OAAS,GAAG,EAC3CC,EAAQH,EAAS,KAAME,GAAMA,EAAE,OAAS,GAAG,EACjD,IAAIE,EAAQ,GACZ,OAAIH,IAAU,QAAaE,IAAU,QAAaH,EAAS,OAAS,IAAGI,EAAQ,IACxEA,CACT,EACA,CAAE,MAAO,0DAA2D,CACtE,CACJ,CAAC,CACH,CAAC,EAEKC,EAAkB,CACtB,UAAAN,EACA,gBAAAF,EACA,iBAAAC,CACF,EAEA,IAAOL,EAAQY",
+  "names": ["validate_exports", "__export", "validate_default", "__toCommonJS", "import_zod", "import_Validate", "BarMeasureShema", "BarOptionsSchema", "BarSchema", "measures", "xAxis", "m", "yAxis", "valid", "BarChartSchemas"]
+}

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