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

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/dpr/components/_charts/chart/heatmap/HeatmapChart.ts"],
-  "sourcesContent": ["/* eslint-disable prefer-destructuring */\nimport dayjs from 'dayjs'\nimport { Granularity } from '../../../_inputs/granular-date-range/types'\nimport { DashboardDataResponse } from '../../../../types/Metrics'\nimport {\n  DashboardVisualisationType,\n  DashboardVisualisationData,\n} from '../../../_dashboards/dashboard-visualisation/types'\nimport { MatrixChartData } from './types'\nimport DatasetHelper from '../../../../utils/datasetHelper'\nimport DashboardVisualisationClass from '../../../_dashboards/dashboard-visualisation/DashboardVisualisation'\nimport Buckets from '../Buckets'\nimport { components } from '../../../../types/api'\n\nclass HeatmapChart extends DashboardVisualisationClass {\n  private granularity: Granularity\n\n  private data: MatrixChartData[] = []\n\n  private dayDateFormat = 'DD/MM/YYYY'\n\n  private valueKey = ''\n\n  private label = ''\n\n  private bucketsHelper: Buckets\n\n  constructor(\n    responseData: DashboardDataResponse[],\n    granularity: Granularity,\n    definition: components['schemas']['DashboardVisualisationDefinition'],\n  ) {\n    super(responseData, definition)\n\n    this.granularity = granularity\n    this.setLabel()\n    this.initUnit()\n    this.bucketsHelper = new Buckets(responseData, this.definition, this.valueKey, true)\n  }\n\n  private setLabel = () => {\n    const { id, display } = this.columns.measures[1]\n    this.valueKey = id\n    this.label = display || ''\n  }\n\n  private validateDefinition = () => {\n    const { id, columns, type } = this.definition\n    const errors = []\n\n    // Validate measures\n    if (columns.measures.length !== 2) {\n      errors.push(`Measures should only have 2 columns defined. Only found ${columns.measures.length}`)\n    } else if (<DashboardVisualisationType>type === DashboardVisualisationType.MATRIX_TIMESERIES) {\n      if (columns.measures[0].id !== 'ts') {\n        errors.push(`measure at index 0 has incorrect ID. Expected ID to be \"ts\". Found \"${columns.measures[0].id}\"`)\n      }\n    }\n\n    // Throw the error\n    if (errors.length) {\n      const message = `Validation: Visualisaton definition: ID: ${id}, type: ${type}, errors: ${errors.join(',')}`\n      throw new Error(message)\n    }\n  }\n\n  private initTimeseriesData = () => {\n    const timeBlockData = DatasetHelper.groupRowsByTimestamp(this.responseData)\n\n    this.data = timeBlockData.map((tsData) => {\n      const { raw, rag } = tsData[0][this.valueKey]\n      const tsRaw = tsData[0]['ts'].raw\n\n      const v: MatrixChartData['v'] = Number(raw)\n      const r: MatrixChartData['r'] = rag !== undefined ? Number(tsData[0][this.valueKey].rag) : undefined\n      let x: MatrixChartData['x'] = 0\n      let y: MatrixChartData['y'] = 0\n\n      switch (this.granularity) {\n        case 'hourly':\n          break\n        case 'weekly':\n          x = dayjs(tsRaw, this.dayDateFormat).format('ddd')\n          y = dayjs(tsRaw, this.dayDateFormat).week()\n          break\n        case 'daily':\n          x = dayjs(tsRaw, this.dayDateFormat).format('MMM YY')\n          y = dayjs(tsRaw, this.dayDateFormat).format('D')\n          break\n        case 'monthly':\n          {\n            const ts = (<string>tsRaw).split(' ')\n            x = ts[1]\n            y = ts[0]\n          }\n          break\n        case 'annually':\n          x = 'year'\n          y = <string>tsRaw\n          break\n        default:\n          x = dayjs(tsRaw, this.dayDateFormat).format('MMM YY')\n          y = dayjs(tsRaw, this.dayDateFormat).format('D')\n          break\n      }\n      return { y, x, v, r }\n    })\n  }\n\n  private bucketData = () => {\n    this.data = this.data.map((d) => {\n      const { v, r } = d\n      const bucketData = this.bucketsHelper.getBucketForValue(v, r)\n      return { ...d, c: bucketData.colour }\n    })\n  }\n\n  build = (): DashboardVisualisationData => {\n    this.validateDefinition()\n    this.initTimeseriesData()\n    this.bucketData()\n\n    return {\n      type: this.type,\n      unit: this.unit,\n      timeseries: true,\n      data: {\n        datasets: [\n          {\n            label: this.label,\n            data: this.data,\n          },\n        ],\n      },\n    }\n  }\n}\n\nexport { HeatmapChart }\nexport default HeatmapChart\n"],
-  "mappings": "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",
-  "names": ["HeatmapChart_exports", "__export", "HeatmapChart", "HeatmapChart_default", "__toCommonJS", "import_dayjs", "import_types", "import_datasetHelper", "import_DashboardVisualisation", "import_Buckets", "DashboardVisualisationClass", "responseData", "granularity", "definition", "id", "display", "columns", "type", "errors", "message", "timeBlockData", "DatasetHelper", "tsData", "raw", "rag", "tsRaw", "r", "x", "y", "dayjs", "ts", "d", "v", "bucketData", "Buckets"]
+  "sourcesContent": ["/* eslint-disable prefer-destructuring */\nimport dayjs from 'dayjs'\nimport { Granularity } from '../../../_inputs/granular-date-range/types'\nimport { DashboardDataResponse } from '../../../../types/Metrics'\nimport {\n  DashboardVisualisationType,\n  DashboardVisualisationData,\n  DashboardVisualisationDataSet,\n} from '../../../_dashboards/dashboard-visualisation/types'\nimport { MatrixChartData, MatrixTimeseriesDefinitionType } from './types'\nimport DatasetHelper from '../../../../utils/datasetHelper'\nimport Buckets from '../buckets/Buckets'\nimport { components } from '../../../../types/api'\nimport MatrixSchema from './validate'\nimport ChartConfig from '../chart-config'\n\nclass HeatmapChart {\n  private definition!: MatrixTimeseriesDefinitionType\n\n  private measures!: MatrixTimeseriesDefinitionType['columns']['measures']\n\n  private responseData: DashboardDataResponse[] = []\n\n  private granularity!: Granularity\n\n  private data: MatrixChartData[] = []\n\n  private dayDateFormat = 'DD/MM/YYYY'\n\n  private valueKey = ''\n\n  private label = ''\n\n  private unit: 'NUMBER' | 'PERCENTAGE' | undefined\n\n  private bucketsHelper!: Buckets\n\n  private datasets: DashboardVisualisationDataSet[] = []\n\n  config = ChartConfig\n\n  private xLabels: (string | number)[] = []\n\n  private yLabels: (string | number)[] = []\n\n  withDefinition = (definition: components['schemas']['DashboardVisualisationDefinition']) => {\n    this.definition = MatrixSchema.parse(definition)\n    this.init()\n    return this\n  }\n\n  withData = (responseData: DashboardDataResponse[]) => {\n    this.responseData = responseData\n    this.bucketsHelper = new Buckets(this.responseData, this.definition, this.valueKey, true)\n    return this\n  }\n\n  withGranularity = (granularity: Granularity) => {\n    this.granularity = granularity\n    return this\n  }\n\n  private init = () => {\n    this.measures = this.definition.columns.measures\n    this.setLabel()\n    this.initUnit()\n  }\n\n  initUnit = () => {\n    this.unit = this.measures[0].unit ? this.measures[0].unit : undefined\n  }\n\n  private setLabel = () => {\n    const { id, display } = this.measures[1]\n    this.valueKey = id\n    this.label = display || ''\n  }\n\n  private initTimeseriesData = () => {\n    const timeBlockData = DatasetHelper.groupRowsByTimestamp(this.responseData)\n\n    this.data = timeBlockData.map((tsData) => {\n      const { raw, rag } = tsData[0][this.valueKey]\n      const tsRaw = tsData[0]['ts'].raw\n\n      const v: MatrixChartData['v'] = Number(raw)\n      const r: MatrixChartData['r'] = rag !== undefined ? Number(tsData[0][this.valueKey].rag) : undefined\n      let x: MatrixChartData['x'] = 0\n      let y: MatrixChartData['y'] = 0\n\n      switch (this.granularity) {\n        case 'hourly':\n          break\n        case 'weekly':\n          x = dayjs(tsRaw, this.dayDateFormat).format('ddd')\n          y = dayjs(tsRaw, this.dayDateFormat).week()\n          break\n        case 'daily':\n          x = dayjs(tsRaw, this.dayDateFormat).format('MMM YY')\n          y = dayjs(tsRaw, this.dayDateFormat).format('D')\n          break\n        case 'monthly':\n          {\n            const ts = (<string>tsRaw).split(' ')\n            x = ts[1]\n            y = ts[0]\n          }\n          break\n        case 'annually':\n          x = 'year'\n          y = <string>tsRaw\n          break\n        default:\n          x = dayjs(tsRaw, this.dayDateFormat).format('MMM YY')\n          y = dayjs(tsRaw, this.dayDateFormat).format('D')\n          break\n      }\n      return { y, x, v, r }\n    })\n\n    this.bucketData()\n    this.datasets = [\n      {\n        label: this.label,\n        data: this.data,\n      },\n    ]\n  }\n\n  private bucketData = () => {\n    this.data = this.data.map((d) => {\n      const { v, r } = d\n      const bucketData = this.bucketsHelper.getBucketForValue(v, r)\n      return { ...d, c: bucketData.colour }\n    })\n  }\n\n  private setBespokeOptions = () => {\n    this.config = {\n      ...this.config,\n      scales: this.setScales(),\n    }\n  }\n\n  setScales() {\n    this.xLabels = [\n      ...new Set(\n        (<MatrixChartData[]>this.datasets[0].data).map((d) => {\n          return d.x\n        }),\n      ),\n    ]\n    this.yLabels = [\n      ...new Set(\n        (<MatrixChartData[]>this.datasets[0].data).map((d) => {\n          return d.y\n        }),\n      ),\n    ]\n    const grid = {\n      display: false,\n      drawBorder: false,\n    }\n    const ticks = {\n      padding: 1,\n      maxRotation: 0,\n      stepSize: 1,\n    }\n    const offset = true\n    const common = {\n      offset,\n      ticks,\n      grid,\n    }\n\n    return {\n      y: {\n        position: 'left',\n        type: 'category',\n        ...(this.yLabels && { labels: this.yLabels }),\n        ...common,\n      },\n      x: {\n        position: 'top',\n        type: 'category',\n        ...(this.xLabels && { labels: this.xLabels }),\n        ...common,\n      },\n    }\n  }\n\n  getCanvasHeight = () => {\n    return this.yLabels.length * 20 + 60\n  }\n\n  build = (): DashboardVisualisationData => {\n    this.initTimeseriesData()\n    this.bucketData()\n    this.setBespokeOptions()\n    const height = this.getCanvasHeight()\n\n    return {\n      type: DashboardVisualisationType.MATRIX,\n      options: {\n        unit: this.unit,\n        timeseries: true,\n        height,\n      },\n      data: {\n        datasets: this.datasets,\n        config: this.config,\n      },\n    }\n  }\n}\n\nexport { HeatmapChart }\nexport default HeatmapChart\n"],
+  "mappings": "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",
+  "names": ["HeatmapChart_exports", "__export", "HeatmapChart", "HeatmapChart_default", "__toCommonJS", "import_dayjs", "import_types", "import_datasetHelper", "import_Buckets", "import_validate", "import_chart_config", "ChartConfig", "definition", "MatrixSchema", "responseData", "Buckets", "granularity", "id", "display", "timeBlockData", "DatasetHelper", "tsData", "raw", "rag", "tsRaw", "v", "r", "x", "y", "dayjs", "ts", "d", "bucketData", "height", "common"]
 }

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

@@ -5,15 +5,23 @@ import { DashboardDataResponse } from '../../../../types/Metrics'
 import {
   DashboardVisualisationType,
   DashboardVisualisationData,
+  DashboardVisualisationDataSet,
 } from '../../../_dashboards/dashboard-visualisation/types'
-import { MatrixChartData } from './types'
+import { MatrixChartData, MatrixTimeseriesDefinitionType } from './types'
 import DatasetHelper from '../../../../utils/datasetHelper'
-import DashboardVisualisationClass from '../../../_dashboards/dashboard-visualisation/DashboardVisualisation'
-import Buckets from '../Buckets'
+import Buckets from '../buckets/Buckets'
 import { components } from '../../../../types/api'
+import MatrixSchema from './validate'
+import ChartConfig from '../chart-config'
 
-class HeatmapChart extends DashboardVisualisationClass {
-  private granularity: Granularity
+class HeatmapChart {
+  private definition!: MatrixTimeseriesDefinitionType
+
+  private measures!: MatrixTimeseriesDefinitionType['columns']['measures']
+
+  private responseData: DashboardDataResponse[] = []
+
+  private granularity!: Granularity
 
   private data: MatrixChartData[] = []
 
@@ -23,47 +31,51 @@ class HeatmapChart extends DashboardVisualisationClass {
 
   private label = ''
 
-  private bucketsHelper: Buckets
+  private unit: 'NUMBER' | 'PERCENTAGE' | undefined
+
+  private bucketsHelper!: Buckets
+
+  private datasets: DashboardVisualisationDataSet[] = []
+
+  config = ChartConfig
 
-  constructor(
-    responseData: DashboardDataResponse[],
-    granularity: Granularity,
-    definition: components['schemas']['DashboardVisualisationDefinition'],
-  ) {
-    super(responseData, definition)
+  private xLabels: (string | number)[] = []
+
+  private yLabels: (string | number)[] = []
+
+  withDefinition = (definition: components['schemas']['DashboardVisualisationDefinition']) => {
+    this.definition = MatrixSchema.parse(definition)
+    this.init()
+    return this
+  }
+
+  withData = (responseData: DashboardDataResponse[]) => {
+    this.responseData = responseData
+    this.bucketsHelper = new Buckets(this.responseData, this.definition, this.valueKey, true)
+    return this
+  }
 
+  withGranularity = (granularity: Granularity) => {
     this.granularity = granularity
+    return this
+  }
+
+  private init = () => {
+    this.measures = this.definition.columns.measures
     this.setLabel()
     this.initUnit()
-    this.bucketsHelper = new Buckets(responseData, this.definition, this.valueKey, true)
+  }
+
+  initUnit = () => {
+    this.unit = this.measures[0].unit ? this.measures[0].unit : undefined
   }
 
   private setLabel = () => {
-    const { id, display } = this.columns.measures[1]
+    const { id, display } = this.measures[1]
     this.valueKey = id
     this.label = display || ''
   }
 
-  private validateDefinition = () => {
-    const { id, columns, type } = this.definition
-    const errors = []
-
-    // Validate measures
-    if (columns.measures.length !== 2) {
-      errors.push(`Measures should only have 2 columns defined. Only found ${columns.measures.length}`)
-    } else if (<DashboardVisualisationType>type === DashboardVisualisationType.MATRIX_TIMESERIES) {
-      if (columns.measures[0].id !== 'ts') {
-        errors.push(`measure at index 0 has incorrect ID. Expected ID to be "ts". Found "${columns.measures[0].id}"`)
-      }
-    }
-
-    // Throw the error
-    if (errors.length) {
-      const message = `Validation: Visualisaton definition: ID: ${id}, type: ${type}, errors: ${errors.join(',')}`
-      throw new Error(message)
-    }
-  }
-
   private initTimeseriesData = () => {
     const timeBlockData = DatasetHelper.groupRowsByTimestamp(this.responseData)
 
@@ -105,6 +117,14 @@ class HeatmapChart extends DashboardVisualisationClass {
       }
       return { y, x, v, r }
     })
+
+    this.bucketData()
+    this.datasets = [
+      {
+        label: this.label,
+        data: this.data,
+      },
+    ]
   }
 
   private bucketData = () => {
@@ -115,22 +135,80 @@ class HeatmapChart extends DashboardVisualisationClass {
     })
   }
 
+  private setBespokeOptions = () => {
+    this.config = {
+      ...this.config,
+      scales: this.setScales(),
+    }
+  }
+
+  setScales() {
+    this.xLabels = [
+      ...new Set(
+        (<MatrixChartData[]>this.datasets[0].data).map((d) => {
+          return d.x
+        }),
+      ),
+    ]
+    this.yLabels = [
+      ...new Set(
+        (<MatrixChartData[]>this.datasets[0].data).map((d) => {
+          return d.y
+        }),
+      ),
+    ]
+    const grid = {
+      display: false,
+      drawBorder: false,
+    }
+    const ticks = {
+      padding: 1,
+      maxRotation: 0,
+      stepSize: 1,
+    }
+    const offset = true
+    const common = {
+      offset,
+      ticks,
+      grid,
+    }
+
+    return {
+      y: {
+        position: 'left',
+        type: 'category',
+        ...(this.yLabels && { labels: this.yLabels }),
+        ...common,
+      },
+      x: {
+        position: 'top',
+        type: 'category',
+        ...(this.xLabels && { labels: this.xLabels }),
+        ...common,
+      },
+    }
+  }
+
+  getCanvasHeight = () => {
+    return this.yLabels.length * 20 + 60
+  }
+
   build = (): DashboardVisualisationData => {
-    this.validateDefinition()
     this.initTimeseriesData()
     this.bucketData()
+    this.setBespokeOptions()
+    const height = this.getCanvasHeight()
 
     return {
-      type: this.type,
-      unit: this.unit,
-      timeseries: true,
+      type: DashboardVisualisationType.MATRIX,
+      options: {
+        unit: this.unit,
+        timeseries: true,
+        height,
+      },
       data: {
-        datasets: [
-          {
-            label: this.label,
-            data: this.data,
-          },
-        ],
+        datasets: this.datasets,
+        config: this.config,
       },
     }
   }

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

@@ -16,7 +16,6 @@ export default class MatrixChartVisualisation extends ChartVisualisation {
 
   initSettings() {
     return {
-      options: this.setOptions({ scaleType: 'category' }),
       toolTipOptions: this.setToolTipOptions(),
     }
   }
@@ -42,31 +41,20 @@ export default class MatrixChartVisualisation extends ChartVisualisation {
     }
   }
 
-  setOptions({ scaleType }) {
-    return {
-      scales: this.setScales({ scaleType }),
-    }
-  }
-
   generateChartData(settings) {
+    const { config } = this.chartParams
     const { options, plugins, pluginsOptions, toolTipOptions, hoverEvent } = settings
-    return {
+    const d = {
       type: this.type,
       data: {
         datasets: this.createDatasets(),
       },
       options: {
-        responsive: true,
-        maintainAspectRatio: false,
-        animation: {
-          duration: 0,
-        },
-        hover: {
-          animationDuration: 0,
-        },
+        ...config,
         ...(options && options),
         ...(hoverEvent && hoverEvent),
         plugins: {
+          ...config.plugins,
           legend: {
             position: 'bottom',
             display: false,
@@ -76,13 +64,15 @@ export default class MatrixChartVisualisation extends ChartVisualisation {
             display: false,
           },
           tooltip: {
-            ...this.setToolTip(),
+            ...config.plugins.tooltip,
             ...(toolTipOptions && toolTipOptions),
           },
         },
       },
       plugins: plugins && plugins.length ? [...plugins] : [],
     }
+
+    return d
   }
 
   createDatasets() {
@@ -100,76 +90,4 @@ export default class MatrixChartVisualisation extends ChartVisualisation {
       }
     })
   }
-
-  setScales({ scaleType }) {
-    let xTime
-    let yTime
-    let xLabels
-    let yLabels
-
-    switch (scaleType) {
-      case 'time':
-        yTime = {
-          unit: 'week',
-        }
-        xTime = {
-          unit: 'day',
-        }
-        break
-      case 'category':
-        {
-          const { datasets } = this.chartParams
-          xLabels = [
-            ...new Set(
-              datasets[0].data.map((d) => {
-                return d.x
-              }),
-            ),
-          ]
-          yLabels = [
-            ...new Set(
-              datasets[0].data.map((d) => {
-                return d.y
-              }),
-            ),
-          ]
-        }
-        break
-      default:
-        break
-    }
-
-    const grid = {
-      display: false,
-      drawBorder: false,
-    }
-    const ticks = {
-      padding: 1,
-      maxRotation: 0,
-      stepSize: 1,
-    }
-    const offset = true
-    const common = {
-      offset,
-      ticks,
-      grid,
-    }
-
-    return {
-      y: {
-        left: 'left',
-        ...(scaleType && { type: scaleType }),
-        ...(yLabels && { labels: yLabels }),
-        ...(yTime && { time: yTime }),
-        ...common,
-      },
-      x: {
-        position: 'top',
-        ...(scaleType && { type: scaleType }),
-        ...(xLabels && { labels: xLabels }),
-        ...(xTime && { time: xTime }),
-        ...common,
-      },
-    }
-  }
 }

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

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

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/dpr/components/_charts/chart/heatmap/types.ts"],
-  "sourcesContent": ["export interface MatrixChartData {\n  x: number | string\n  y: number | string\n  r?: number | undefined\n  v: number\n}\n"],
+  "sourcesContent": ["import z from 'zod'\nimport MatrixTimeseriesSchema from './validate'\n\nexport interface MatrixChartData {\n  x: number | string\n  y: number | string\n  r?: number | undefined\n  v: number\n}\n\nexport type MatrixTimeseriesDefinitionType = z.infer<typeof MatrixTimeseriesSchema>\n"],
   "mappings": "+WAAA,IAAAA,EAAA,kBAAAC,EAAAD",
   "names": ["types_exports", "__toCommonJS"]
 }

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

@@ -1,6 +1,11 @@
+import z from 'zod'
+import MatrixTimeseriesSchema from './validate'
+
 export interface MatrixChartData {
   x: number | string
   y: number | string
   r?: number | undefined
   v: number
 }
+
+export type MatrixTimeseriesDefinitionType = z.infer<typeof MatrixTimeseriesSchema>

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

@@ -0,0 +1,2 @@
+"use strict";var r=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var l=Object.getOwnPropertyNames;var c=Object.prototype.hasOwnProperty;var p=(o,e)=>{for(var i in e)r(o,i,{get:e[i],enumerable:!0})},h=(o,e,i,n)=>{if(e&&typeof e=="object"||typeof e=="function")for(let s of l(e))!c.call(o,s)&&s!==i&&r(o,s,{get:()=>e[s],enumerable:!(n=m(e,s))||n.enumerable});return o};var u=o=>h(r({},"__esModule",{value:!0}),o);var f={};p(f,{default:()=>d});module.exports=u(f);var a=require("zod"),t=require("../../../_dashboards/dashboard-visualisation/Validate");const b=a.z.object({id:a.z.string(),optional:a.z.boolean().default(!1)}),y=a.z.object({...t.DashboardVisualisationSchema.shape,type:a.z.literal("matrix-timeseries"),options:a.z.object(t.BucketOptionsSchema.shape).optional(),columns:a.z.object({...t.DashboardColumns.shape,keys:a.z.array(b).min(1,"Key array cannot be empty").optional(),measures:a.z.array(t.DashboardVisualisationMeasureSchema).length(2,"Measure must contain a single item")})});var d=y;
+//# sourceMappingURL=validate.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/dpr/components/_charts/chart/heatmap/validate.ts"],
+  "sourcesContent": ["import { z } from 'zod'\nimport {\n  DashboardVisualisationSchema,\n  DashboardColumns,\n  DashboardVisualisationMeasureSchema,\n  BucketOptionsSchema,\n} from '../../../_dashboards/dashboard-visualisation/Validate'\n\nconst matrixKeys = z.object({\n  id: z.string(),\n  optional: z.boolean().default(false),\n})\n\nconst MatrixTimeseriesSchema = z.object({\n  ...DashboardVisualisationSchema.shape,\n  type: z.literal('matrix-timeseries'),\n  options: z.object(BucketOptionsSchema.shape).optional(),\n  columns: z.object({\n    ...DashboardColumns.shape,\n    keys: z.array(matrixKeys).min(1, 'Key array cannot be empty').optional(),\n    measures: z.array(DashboardVisualisationMeasureSchema).length(2, 'Measure must contain a single item'),\n  }),\n})\n\nexport default MatrixTimeseriesSchema\n"],
+  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAAA,IAAAI,EAAkB,eAClBC,EAKO,iEAEP,MAAMC,EAAa,IAAE,OAAO,CAC1B,GAAI,IAAE,OAAO,EACb,SAAU,IAAE,QAAQ,EAAE,QAAQ,EAAK,CACrC,CAAC,EAEKC,EAAyB,IAAE,OAAO,CACtC,GAAG,+BAA6B,MAChC,KAAM,IAAE,QAAQ,mBAAmB,EACnC,QAAS,IAAE,OAAO,sBAAoB,KAAK,EAAE,SAAS,EACtD,QAAS,IAAE,OAAO,CAChB,GAAG,mBAAiB,MACpB,KAAM,IAAE,MAAMD,CAAU,EAAE,IAAI,EAAG,2BAA2B,EAAE,SAAS,EACvE,SAAU,IAAE,MAAM,qCAAmC,EAAE,OAAO,EAAG,oCAAoC,CACvG,CAAC,CACH,CAAC,EAED,IAAOJ,EAAQK",
+  "names": ["validate_exports", "__export", "validate_default", "__toCommonJS", "import_zod", "import_Validate", "matrixKeys", "MatrixTimeseriesSchema"]
+}

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

@@ -0,0 +1,25 @@
+import { z } from 'zod'
+import {
+  DashboardVisualisationSchema,
+  DashboardColumns,
+  DashboardVisualisationMeasureSchema,
+  BucketOptionsSchema,
+} from '../../../_dashboards/dashboard-visualisation/Validate'
+
+const matrixKeys = z.object({
+  id: z.string(),
+  optional: z.boolean().default(false),
+})
+
+const MatrixTimeseriesSchema = z.object({
+  ...DashboardVisualisationSchema.shape,
+  type: z.literal('matrix-timeseries'),
+  options: z.object(BucketOptionsSchema.shape).optional(),
+  columns: z.object({
+    ...DashboardColumns.shape,
+    keys: z.array(matrixKeys).min(1, 'Key array cannot be empty').optional(),
+    measures: z.array(DashboardVisualisationMeasureSchema).length(2, 'Measure must contain a single item'),
+  }),
+})
+
+export default MatrixTimeseriesSchema

package/dpr/components/_charts/chart/line/LineChart.js

@@ -0,0 +1,2 @@
+"use strict";var l=Object.create;var n=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var d=Object.getOwnPropertyNames;var D=Object.getPrototypeOf,c=Object.prototype.hasOwnProperty;var y=(i,t)=>{for(var s in t)n(i,s,{get:t[s],enumerable:!0})},r=(i,t,s,a)=>{if(t&&typeof t=="object"||typeof t=="function")for(let e of d(t))!c.call(i,e)&&e!==s&&n(i,e,{get:()=>t[e],enumerable:!(a=f(t,e))||a.enumerable});return i};var h=(i,t,s)=>(s=i!=null?l(D(i)):{},r(t||!i||!i.__esModule?n(s,"default",{value:i,enumerable:!0}):s,i)),b=i=>r(n({},"__esModule",{value:!0}),i);var k={};y(k,{LineChart:()=>o,default:()=>L});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=s=>(this.definition=m.default.LineSchema.parse(s),this.init(),this);this.build=()=>(this.createDatasets(this.measures,this.responseData),this.datasets=this.augmentDataset(this.datasets),this.config=this.setBespokeOptions(),this.createLabels(this.measures),{type:u.DashboardVisualisationType.LINE,options:{unit:this.unit},data:{labels:this.labels,datasets:this.datasets,config:this.config}});this.augmentDataset=s=>s.map(a=>({...a,pointStyle:"circle",pointRadius:4,pointHoverRadius:10,pointHitRadius:20,datalabels:{display:!1}}));this.setBespokeOptions=()=>({...this.config,scales:{y:{min:0,ticks:{fontSize:12}},x:{ticks:{fontSize:12}}}})}}var L=o;0&&(module.exports={LineChart});
+//# sourceMappingURL=LineChart.js.map

package/dpr/components/_charts/chart/line/LineChart.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/dpr/components/_charts/chart/line/LineChart.ts"],
+  "sourcesContent": ["/* eslint-disable prefer-destructuring */\nimport {\n  DashboardVisualisationType,\n  DashboardVisualisationData,\n  VisualisationDefinitionKey,\n  DashboardVisualisationDataSet,\n} from '../../../_dashboards/dashboard-visualisation/types'\nimport { components } from '../../../../types/api'\nimport Chart from '../Chart'\nimport { LineDefinitionMeasure, LineDefinitionType } from './types'\nimport LineChartSchemas from './validate'\n\nclass LineChart extends Chart {\n  private definition!: LineDefinitionType\n\n  private measures!: LineDefinitionMeasure[]\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 = LineChartSchemas.LineSchema.parse(definition)\n    this.init()\n\n    return this\n  }\n\n  build = (): DashboardVisualisationData => {\n    this.createDatasets(this.measures, this.responseData)\n    this.datasets = this.augmentDataset(this.datasets)\n    this.config = this.setBespokeOptions()\n    this.createLabels(this.measures)\n\n    return {\n      type: DashboardVisualisationType.LINE,\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  augmentDataset = (datasets: DashboardVisualisationDataSet[]) => {\n    return datasets.map((set) => {\n      return {\n        ...set,\n        pointStyle: 'circle',\n        pointRadius: 4,\n        pointHoverRadius: 10,\n        pointHitRadius: 20,\n        datalabels: {\n          display: false,\n        },\n      }\n    })\n  }\n\n  setBespokeOptions = () => {\n    return {\n      ...this.config,\n      scales: {\n        y: {\n          min: 0,\n          ticks: {\n            fontSize: 12,\n          },\n        },\n        x: {\n          ticks: {\n            fontSize: 12,\n          },\n        },\n      },\n    }\n  }\n}\n\nexport { LineChart }\nexport default LineChart\n"],
+  "mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,eAAAE,EAAA,YAAAC,IAAA,eAAAC,EAAAJ,GACA,IAAAK,EAKO,8DAEPC,EAAkB,uBAElBC,EAA6B,yBAE7B,MAAML,UAAkB,EAAAM,OAAM,CAA9B,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,QAAiB,WAAW,MAAMD,CAAU,EAC9D,KAAK,KAAK,EAEH,MAGT,WAAQ,KACN,KAAK,eAAe,KAAK,SAAU,KAAK,YAAY,EACpD,KAAK,SAAW,KAAK,eAAe,KAAK,QAAQ,EACjD,KAAK,OAAS,KAAK,kBAAkB,EACrC,KAAK,aAAa,KAAK,QAAQ,EAExB,CACL,KAAM,6BAA2B,KACjC,QAAS,CACP,KAAM,KAAK,IACb,EACA,KAAM,CACJ,OAAQ,KAAK,OACb,SAAU,KAAK,SACf,OAAQ,KAAK,MACf,CACF,GAGF,oBAAkBE,GACTA,EAAS,IAAKC,IACZ,CACL,GAAGA,EACH,WAAY,SACZ,YAAa,EACb,iBAAkB,GAClB,eAAgB,GAChB,WAAY,CACV,QAAS,EACX,CACF,EACD,EAGH,uBAAoB,KACX,CACL,GAAG,KAAK,OACR,OAAQ,CACN,EAAG,CACD,IAAK,EACL,MAAO,CACL,SAAU,EACZ,CACF,EACA,EAAG,CACD,MAAO,CACL,SAAU,EACZ,CACF,CACF,CACF,GAEJ,CAGA,IAAOT,EAAQD",
+  "names": ["LineChart_exports", "__export", "LineChart", "LineChart_default", "__toCommonJS", "import_types", "import_Chart", "import_validate", "Chart", "definition", "LineChartSchemas", "datasets", "set"]
+}

package/dpr/components/_charts/chart/line/LineChart.ts

@@ -0,0 +1,89 @@
+/* eslint-disable prefer-destructuring */
+import {
+  DashboardVisualisationType,
+  DashboardVisualisationData,
+  VisualisationDefinitionKey,
+  DashboardVisualisationDataSet,
+} from '../../../_dashboards/dashboard-visualisation/types'
+import { components } from '../../../../types/api'
+import Chart from '../Chart'
+import { LineDefinitionMeasure, LineDefinitionType } from './types'
+import LineChartSchemas from './validate'
+
+class LineChart extends Chart {
+  private definition!: LineDefinitionType
+
+  private measures!: LineDefinitionMeasure[]
+
+  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 = LineChartSchemas.LineSchema.parse(definition)
+    this.init()
+
+    return this
+  }
+
+  build = (): DashboardVisualisationData => {
+    this.createDatasets(this.measures, this.responseData)
+    this.datasets = this.augmentDataset(this.datasets)
+    this.config = this.setBespokeOptions()
+    this.createLabels(this.measures)
+
+    return {
+      type: DashboardVisualisationType.LINE,
+      options: {
+        unit: this.unit,
+      },
+      data: {
+        labels: this.labels,
+        datasets: this.datasets,
+        config: this.config,
+      },
+    }
+  }
+
+  augmentDataset = (datasets: DashboardVisualisationDataSet[]) => {
+    return datasets.map((set) => {
+      return {
+        ...set,
+        pointStyle: 'circle',
+        pointRadius: 4,
+        pointHoverRadius: 10,
+        pointHitRadius: 20,
+        datalabels: {
+          display: false,
+        },
+      }
+    })
+  }
+
+  setBespokeOptions = () => {
+    return {
+      ...this.config,
+      scales: {
+        y: {
+          min: 0,
+          ticks: {
+            fontSize: 12,
+          },
+        },
+        x: {
+          ticks: {
+            fontSize: 12,
+          },
+        },
+      },
+    }
+  }
+}
+
+export { LineChart }
+export default LineChart

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

@@ -16,7 +16,6 @@ class LineChartVisualisation extends ChartVisualisation {
 
   initSettings() {
     return {
-      options: this.setOptions(),
       toolTipOptions: this.setToolTipOptions(),
       styling: this.setDatasetStyling(),
     }
@@ -31,23 +30,11 @@ class LineChartVisualisation extends ChartVisualisation {
   }
 
   setDatasetStyling() {
-    const pallette = this.getColourPallette()
-    return pallette.map((colour) => {
-      return {
-        borderColor: colour.hex,
-        backgroundColor: colour.hex,
-        pointStyle: 'circle',
-        pointRadius: 4,
-        pointHoverRadius: 10,
-        pointHitRadius: 20,
-        datalabels: {
-          display: false,
-        },
-        segment: {
-          borderDash: (ctx) => this.setPartialStyle(ctx),
-        },
-      }
-    })
+    return {
+      segment: {
+        borderDash: (ctx) => this.setPartialStyle(ctx),
+      },
+    }
   }
 
   setToolTipOptions() {
@@ -70,24 +57,6 @@ class LineChartVisualisation extends ChartVisualisation {
       },
     }
   }
-
-  setOptions() {
-    return {
-      scales: {
-        y: {
-          min: 0,
-          ticks: {
-            fontSize: 12,
-          },
-        },
-        x: {
-          ticks: {
-            fontSize: 12,
-          },
-        },
-      },
-    }
-  }
 }
 
 export { LineChartVisualisation }

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

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

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

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