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

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"]
+}

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

@@ -0,0 +1,5 @@
+import z from 'zod'
+import LineChartSchemas from './validate'
+
+export type LineDefinitionType = z.infer<typeof LineChartSchemas.LineSchema>
+export type LineDefinitionMeasure = z.infer<typeof LineChartSchemas.LineMeasureSchema>

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

@@ -0,0 +1,2 @@
+"use strict";var i=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var p=Object.prototype.hasOwnProperty;var u=(o,t)=>{for(var s in t)i(o,s,{get:t[s],enumerable:!0})},h=(o,t,s,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let a of m(t))!p.call(o,a)&&a!==s&&i(o,a,{get:()=>t[a],enumerable:!(r=c(t,a))||r.enumerable});return o};var b=o=>h(i({},"__esModule",{value:!0}),o);var E={};u(E,{default:()=>y});module.exports=b(E);var e=require("zod"),n=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()}),d=e.z.object({showLatest:e.z.boolean().default(!0)}),j=e.z.object({...n.DashboardVisualisationSchema.shape,display:e.z.string(),type:e.z.literal("line"),options:e.z.object(d.shape).optional(),columns:e.z.object({...n.DashboardColumns.shape,measures:e.z.array(l).min(1,"Measure must contain at least one item")})}),f={LineMeasureSchema:l,LineSchema:j};var y=f;
+//# sourceMappingURL=validate.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/dpr/components/_charts/chart/line/validate.ts"],
+  "sourcesContent": ["import { z } from 'zod'\nimport { DashboardVisualisationSchema, DashboardColumns } from '../../../_dashboards/dashboard-visualisation/Validate'\n\nconst LineMeasureSchema = z.object({\n  id: z.string(),\n  display: z.string().optional(),\n  unit: z.enum(['NUMBER', 'PERCENTAGE']).optional(),\n})\n\nconst lineOptions = z.object({\n  showLatest: z.boolean().default(true),\n})\n\nconst LineSchema = z.object({\n  ...DashboardVisualisationSchema.shape,\n  display: z.string(),\n  type: z.literal('line'),\n  options: z.object(lineOptions.shape).optional(),\n  columns: z.object({\n    ...DashboardColumns.shape,\n    measures: z.array(LineMeasureSchema).min(1, 'Measure must contain at least one item'),\n  }),\n})\n\nconst LineChartSchemas = {\n  LineMeasureSchema,\n  LineSchema,\n}\n\nexport default LineChartSchemas\n"],
+  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAAA,IAAAI,EAAkB,eAClBC,EAA+D,iEAE/D,MAAMC,EAAoB,IAAE,OAAO,CACjC,GAAI,IAAE,OAAO,EACb,QAAS,IAAE,OAAO,EAAE,SAAS,EAC7B,KAAM,IAAE,KAAK,CAAC,SAAU,YAAY,CAAC,EAAE,SAAS,CAClD,CAAC,EAEKC,EAAc,IAAE,OAAO,CAC3B,WAAY,IAAE,QAAQ,EAAE,QAAQ,EAAI,CACtC,CAAC,EAEKC,EAAa,IAAE,OAAO,CAC1B,GAAG,+BAA6B,MAChC,QAAS,IAAE,OAAO,EAClB,KAAM,IAAE,QAAQ,MAAM,EACtB,QAAS,IAAE,OAAOD,EAAY,KAAK,EAAE,SAAS,EAC9C,QAAS,IAAE,OAAO,CAChB,GAAG,mBAAiB,MACpB,SAAU,IAAE,MAAMD,CAAiB,EAAE,IAAI,EAAG,wCAAwC,CACtF,CAAC,CACH,CAAC,EAEKG,EAAmB,CACvB,kBAAAH,EACA,WAAAE,CACF,EAEA,IAAON,EAAQO",
+  "names": ["validate_exports", "__export", "validate_default", "__toCommonJS", "import_zod", "import_Validate", "LineMeasureSchema", "lineOptions", "LineSchema", "LineChartSchemas"]
+}

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

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

package/dpr/components/_charts/chart/line-timeseries/LineTimeseriesChart.js

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