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

package/dpr/components/_catalogue/catalogue-list/utils.test.ts

@@ -30,7 +30,7 @@ describe('CatalogueUtils', () => {
       const reportsTableData = await CatalogueUtils.getReportsList(res, services)
 
       expect(reportsTableData.head.length).toEqual(4)
-      expect(reportsTableData.rows.length).toEqual(72)
+      expect(reportsTableData.rows.length).toEqual(79)
     })
   })
 })

package/dpr/components/_charts/chart/Chart.js

@@ -0,0 +1,2 @@
+"use strict";var c=Object.create;var i=Object.defineProperty;var C=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var I=(e,a)=>{for(var t in a)i(e,t,{get:a[t],enumerable:!0})},l=(e,a,t,r)=>{if(a&&typeof a=="object"||typeof a=="function")for(let s of m(a))!g.call(e,s)&&s!==t&&i(e,s,{get:()=>a[s],enumerable:!(r=C(a,s))||r.enumerable});return e};var R=(e,a,t)=>(t=e!=null?c(f(e)):{},l(a||!e||!e.__esModule?i(t,"default",{value:e,enumerable:!0}):t,e)),x=e=>l(i({},"__esModule",{value:!0}),e);var V={};I(V,{Chart:()=>o,default:()=>M});module.exports=x(V);var u=require("./ChartColours"),d=R(require("./chart-config"));class o{constructor(){this.labels=[];this.labelId=void 0;this.datasets=[];this.responseData=[];this.backgroundColor=[];this.borderWidth=[0,0];this.borderColor=[];this.hexColours=[];this.config=d.default;this.withData=a=>(this.responseData=a,this);this.initUnit=a=>{this.unit=a.find(t=>t.unit)?.unit};this.createDatasets=(a,t)=>{this.hexColours=new u.ChartColours().getHexPallette(),this.datasets=t.map((r,s)=>{const h=this.createDatasetLabel(r),n=this.createDatasetValues(a,r),b=n.reduce((D,p)=>D+p,0);return{label:h,data:n,total:b,...this.setStyles(s)}})};this.createDatasetLabel=a=>this.labelId&&a[this.labelId]?`${a[this.labelId].raw}`:"All";this.createDatasetValues=(a,t)=>a.map(r=>{const s=r.id;return t[s]&&t[s].raw?Number(t[s].raw):0});this.setStyles=a=>{const t=this.hexColours[a];return{backgroundColor:t,borderColor:t}};this.createLabels=a=>{this.labels=a.map(t=>t.display||"")};this.getLabelId=a=>{if(a.length){const t=a.length-1;this.labelId=a[t]?.id}}}}var M=o;0&&(module.exports={Chart});
+//# sourceMappingURL=Chart.js.map

package/dpr/components/_charts/chart/Chart.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/dpr/components/_charts/chart/Chart.ts"],
+  "sourcesContent": ["/* eslint-disable prefer-destructuring */\nimport { DashboardDataResponse } from '../../../types/Metrics'\nimport {\n  DashboardVisualisationDataSet,\n  VisualisationDefinitionKey,\n  ChartMeasure,\n} from '../../_dashboards/dashboard-visualisation/types'\nimport { ChartColours } from './ChartColours'\nimport ChartConfig from './chart-config'\n\nclass Chart {\n  labels: string[] = []\n\n  private labelId: string | undefined = undefined\n\n  datasets: DashboardVisualisationDataSet[] = []\n\n  unit: 'NUMBER' | 'PERCENTAGE' | undefined\n\n  responseData: DashboardDataResponse[] = []\n\n  backgroundColor: string[][] = []\n\n  borderWidth: number[] = [0, 0]\n\n  borderColor: string[][] = []\n\n  hexColours: string[] = []\n\n  config = ChartConfig\n\n  withData = (responseData: DashboardDataResponse[]) => {\n    this.responseData = responseData\n    return this\n  }\n\n  initUnit = (measures: ChartMeasure) => {\n    this.unit = measures.find((m) => m.unit)?.unit\n  }\n\n  createDatasets = (measures: ChartMeasure, responseData: DashboardDataResponse[]) => {\n    this.hexColours = new ChartColours().getHexPallette()\n    this.datasets = responseData.map((row, datasetIndex) => {\n      const label = this.createDatasetLabel(row)\n      const data = this.createDatasetValues(measures, row)\n      const total = data.reduce((acc: number, val: number) => acc + val, 0)\n\n      return {\n        label,\n        data,\n        total,\n        ...this.setStyles(datasetIndex),\n      }\n    })\n  }\n\n  private createDatasetLabel = (row: DashboardDataResponse) => {\n    return this.labelId && row[this.labelId] ? `${row[this.labelId].raw}` : 'All'\n  }\n\n  private createDatasetValues = (measures: ChartMeasure, row: DashboardDataResponse) => {\n    return measures.map((column) => {\n      const rowId = column.id\n      return row[rowId] && row[rowId].raw ? Number(row[rowId].raw) : 0\n    })\n  }\n\n  setStyles = (datasetIndex: number) => {\n    const colour = this.hexColours[datasetIndex]\n    return {\n      backgroundColor: colour,\n      borderColor: colour,\n    }\n  }\n\n  createLabels = (measures: ChartMeasure) => {\n    this.labels = measures.map((col) => col.display || '')\n  }\n\n  getLabelId = (keys: VisualisationDefinitionKey[]) => {\n    if (keys.length) {\n      const lastIndex = keys.length - 1\n      this.labelId = keys[lastIndex]?.id\n    }\n  }\n}\n\nexport { Chart }\nexport default Chart\n"],
+  "mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,WAAAE,EAAA,YAAAC,IAAA,eAAAC,EAAAJ,GAOA,IAAAK,EAA6B,0BAC7BC,EAAwB,6BAExB,MAAMJ,CAAM,CAAZ,cACE,YAAmB,CAAC,EAEpB,KAAQ,QAA8B,OAEtC,cAA4C,CAAC,EAI7C,kBAAwC,CAAC,EAEzC,qBAA8B,CAAC,EAE/B,iBAAwB,CAAC,EAAG,CAAC,EAE7B,iBAA0B,CAAC,EAE3B,gBAAuB,CAAC,EAExB,YAAS,EAAAK,QAET,cAAYC,IACV,KAAK,aAAeA,EACb,MAGT,cAAYC,GAA2B,CACrC,KAAK,KAAOA,EAAS,KAAMC,GAAMA,EAAE,IAAI,GAAG,IAC5C,EAEA,oBAAiB,CAACD,EAAwBD,IAA0C,CAClF,KAAK,WAAa,IAAI,eAAa,EAAE,eAAe,EACpD,KAAK,SAAWA,EAAa,IAAI,CAACG,EAAKC,IAAiB,CACtD,MAAMC,EAAQ,KAAK,mBAAmBF,CAAG,EACnCG,EAAO,KAAK,oBAAoBL,EAAUE,CAAG,EAC7CI,EAAQD,EAAK,OAAO,CAACE,EAAaC,IAAgBD,EAAMC,EAAK,CAAC,EAEpE,MAAO,CACL,MAAAJ,EACA,KAAAC,EACA,MAAAC,EACA,GAAG,KAAK,UAAUH,CAAY,CAChC,CACF,CAAC,CACH,EAEA,KAAQ,mBAAsBD,GACrB,KAAK,SAAWA,EAAI,KAAK,OAAO,EAAI,GAAGA,EAAI,KAAK,OAAO,EAAE,GAAG,GAAK,MAG1E,KAAQ,oBAAsB,CAACF,EAAwBE,IAC9CF,EAAS,IAAKS,GAAW,CAC9B,MAAMC,EAAQD,EAAO,GACrB,OAAOP,EAAIQ,CAAK,GAAKR,EAAIQ,CAAK,EAAE,IAAM,OAAOR,EAAIQ,CAAK,EAAE,GAAG,EAAI,CACjE,CAAC,EAGH,eAAaP,GAAyB,CACpC,MAAMQ,EAAS,KAAK,WAAWR,CAAY,EAC3C,MAAO,CACL,gBAAiBQ,EACjB,YAAaA,CACf,CACF,EAEA,kBAAgBX,GAA2B,CACzC,KAAK,OAASA,EAAS,IAAKY,GAAQA,EAAI,SAAW,EAAE,CACvD,EAEA,gBAAcC,GAAuC,CACnD,GAAIA,EAAK,OAAQ,CACf,MAAMC,EAAYD,EAAK,OAAS,EAChC,KAAK,QAAUA,EAAKC,CAAS,GAAG,EAClC,CACF,EACF,CAGA,IAAOpB,EAAQD",
+  "names": ["Chart_exports", "__export", "Chart", "Chart_default", "__toCommonJS", "import_ChartColours", "import_chart_config", "ChartConfig", "responseData", "measures", "m", "row", "datasetIndex", "label", "data", "total", "acc", "val", "column", "rowId", "colour", "col", "keys", "lastIndex"]
+}

package/dpr/components/_charts/chart/Chart.ts

@@ -0,0 +1,89 @@
+/* eslint-disable prefer-destructuring */
+import { DashboardDataResponse } from '../../../types/Metrics'
+import {
+  DashboardVisualisationDataSet,
+  VisualisationDefinitionKey,
+  ChartMeasure,
+} from '../../_dashboards/dashboard-visualisation/types'
+import { ChartColours } from './ChartColours'
+import ChartConfig from './chart-config'
+
+class Chart {
+  labels: string[] = []
+
+  private labelId: string | undefined = undefined
+
+  datasets: DashboardVisualisationDataSet[] = []
+
+  unit: 'NUMBER' | 'PERCENTAGE' | undefined
+
+  responseData: DashboardDataResponse[] = []
+
+  backgroundColor: string[][] = []
+
+  borderWidth: number[] = [0, 0]
+
+  borderColor: string[][] = []
+
+  hexColours: string[] = []
+
+  config = ChartConfig
+
+  withData = (responseData: DashboardDataResponse[]) => {
+    this.responseData = responseData
+    return this
+  }
+
+  initUnit = (measures: ChartMeasure) => {
+    this.unit = measures.find((m) => m.unit)?.unit
+  }
+
+  createDatasets = (measures: ChartMeasure, responseData: DashboardDataResponse[]) => {
+    this.hexColours = new ChartColours().getHexPallette()
+    this.datasets = responseData.map((row, datasetIndex) => {
+      const label = this.createDatasetLabel(row)
+      const data = this.createDatasetValues(measures, row)
+      const total = data.reduce((acc: number, val: number) => acc + val, 0)
+
+      return {
+        label,
+        data,
+        total,
+        ...this.setStyles(datasetIndex),
+      }
+    })
+  }
+
+  private createDatasetLabel = (row: DashboardDataResponse) => {
+    return this.labelId && row[this.labelId] ? `${row[this.labelId].raw}` : 'All'
+  }
+
+  private createDatasetValues = (measures: ChartMeasure, row: DashboardDataResponse) => {
+    return measures.map((column) => {
+      const rowId = column.id
+      return row[rowId] && row[rowId].raw ? Number(row[rowId].raw) : 0
+    })
+  }
+
+  setStyles = (datasetIndex: number) => {
+    const colour = this.hexColours[datasetIndex]
+    return {
+      backgroundColor: colour,
+      borderColor: colour,
+    }
+  }
+
+  createLabels = (measures: ChartMeasure) => {
+    this.labels = measures.map((col) => col.display || '')
+  }
+
+  getLabelId = (keys: VisualisationDefinitionKey[]) => {
+    if (keys.length) {
+      const lastIndex = keys.length - 1
+      this.labelId = keys[lastIndex]?.id
+    }
+  }
+}
+
+export { Chart }
+export default Chart

package/dpr/components/_charts/chart/ChartColours.js

@@ -0,0 +1,2 @@
+"use strict";var r=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var m=Object.prototype.hasOwnProperty;var o=(a,e)=>{for(var l in e)r(a,l,{get:e[l],enumerable:!0})},p=(a,e,l,n)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of x(e))!m.call(a,t)&&t!==l&&r(a,t,{get:()=>e[t],enumerable:!(n=h(e,t))||n.enumerable});return a};var u=a=>p(r({},"__esModule",{value:!0}),a);var s={};o(s,{ChartColours:()=>g});module.exports=u(s);class g{constructor(){this.pallette=[{name:"blue",hex:"#5694ca"},{name:"purple",hex:"#912b88"},{name:"green",hex:"#00703c"},{name:"dark_blue",hex:"#003078"},{name:"orange",hex:"#f47738"},{name:"orange",hex:"#28a197"}];this.getColourPallette=()=>this.pallette;this.getHexPallette=()=>this.pallette.map(e=>e.hex)}}0&&(module.exports={ChartColours});
+//# sourceMappingURL=ChartColours.js.map

package/dpr/components/_charts/chart/ChartColours.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/dpr/components/_charts/chart/ChartColours.ts"],
+  "sourcesContent": ["export class ChartColours {\n  pallette = [\n    {\n      name: 'blue',\n      hex: '#5694ca',\n    },\n    {\n      name: 'purple',\n      hex: '#912b88',\n    },\n    {\n      name: 'green',\n      hex: '#00703c',\n    },\n    {\n      name: 'dark_blue',\n      hex: '#003078',\n    },\n    {\n      name: 'orange',\n      hex: '#f47738',\n    },\n    {\n      name: 'orange',\n      hex: '#28a197',\n    },\n  ]\n\n  getColourPallette = () => {\n    return this.pallette\n  }\n\n  getHexPallette = () => {\n    return this.pallette.map((p) => p.hex)\n  }\n}\n"],
+  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,kBAAAE,IAAA,eAAAC,EAAAH,GAAO,MAAME,CAAa,CAAnB,cACL,cAAW,CACT,CACE,KAAM,OACN,IAAK,SACP,EACA,CACE,KAAM,SACN,IAAK,SACP,EACA,CACE,KAAM,QACN,IAAK,SACP,EACA,CACE,KAAM,YACN,IAAK,SACP,EACA,CACE,KAAM,SACN,IAAK,SACP,EACA,CACE,KAAM,SACN,IAAK,SACP,CACF,EAEA,uBAAoB,IACX,KAAK,SAGd,oBAAiB,IACR,KAAK,SAAS,IAAKE,GAAMA,EAAE,GAAG,EAEzC",
+  "names": ["ChartColours_exports", "__export", "ChartColours", "__toCommonJS", "p"]
+}

package/dpr/components/_charts/chart/ChartColours.ts

@@ -0,0 +1,36 @@
+export class ChartColours {
+  pallette = [
+    {
+      name: 'blue',
+      hex: '#5694ca',
+    },
+    {
+      name: 'purple',
+      hex: '#912b88',
+    },
+    {
+      name: 'green',
+      hex: '#00703c',
+    },
+    {
+      name: 'dark_blue',
+      hex: '#003078',
+    },
+    {
+      name: 'orange',
+      hex: '#f47738',
+    },
+    {
+      name: 'orange',
+      hex: '#28a197',
+    },
+  ]
+
+  getColourPallette = () => {
+    return this.pallette
+  }
+
+  getHexPallette = () => {
+    return this.pallette.map((p) => p.hex)
+  }
+}

package/dpr/components/_charts/chart/ChartTimeseries.js

@@ -0,0 +1,2 @@
+"use strict";var f=Object.create;var o=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var c=Object.getOwnPropertyNames;var T=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var y=(t,e)=>{for(var i in e)o(t,i,{get:e[i],enumerable:!0})},l=(t,e,i,a)=>{if(e&&typeof e=="object"||typeof e=="function")for(let s of c(e))!g.call(t,s)&&s!==i&&o(t,s,{get:()=>e[s],enumerable:!(a=b(e,s))||a.enumerable});return t};var u=(t,e,i)=>(i=t!=null?f(T(t)):{},l(e||!t||!t.__esModule?o(i,"default",{value:t,enumerable:!0}):i,t)),C=t=>l(o({},"__esModule",{value:!0}),t);var k={};y(k,{TimeseriesChart:()=>h,default:()=>B});module.exports=C(k);var m=u(require("../../../utils/datasetHelper")),D=require("./ChartColours"),p=u(require("./chart-config"));class h{constructor(){this.labels=[];this.labelId=void 0;this.datasets=[];this.responseData=[];this.measures=[];this.keys=[];this.timeBlockData=[];this.datasetCount=0;this.hexColours=[];this.config=p.default;this.withData=e=>(this.responseData=e,this.initFromData(),this);this.initFromDefinition=e=>{this.measures=e.columns.measures,this.keys=e.columns.keys||[],this.unit=this.measures.find(i=>i.unit)?.unit};this.withPartialDate=e=>(this.partialDate=e,this);this.initFromData=()=>{this.groupKey=m.default.getGroupKey(this.responseData,this.keys),this.labelId=this.groupKey?.id||"",this.timeBlockData=m.default.groupRowsByTimestamp(this.responseData),this.labels=this.getLabels(),this.datasetCount=this.timeBlockData[0]?.length};this.buildDatasets=()=>{this.hexColours=new D.ChartColours().getHexPallette();for(let e=0;e<this.datasetCount;e+=1){const i=this.timeBlockData.map(n=>{const{raw:r}=n[e][this.measures[1].id];return r?Number(r):0}),a=i.reduce((n,r)=>n+r,0),s=this.labelId?this.timeBlockData[0][e][this.labelId].raw:"",d=s||"";this.datasets.push({data:i,label:d,total:a})}};this.getLabels=()=>this.timeBlockData.map(e=>e[0].ts.raw)}}var B=h;0&&(module.exports={TimeseriesChart});
+//# sourceMappingURL=ChartTimeseries.js.map

package/dpr/components/_charts/chart/ChartTimeseries.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/dpr/components/_charts/chart/ChartTimeseries.ts"],
+  "sourcesContent": ["import { components } from '../../../types/api'\nimport { DashboardDataResponse } from '../../../types/Metrics'\nimport {\n  DashboardVisualisationDataSet,\n  TimeseriesChartMeasure,\n  VisualisationDefinitionKey,\n} from '../../_dashboards/dashboard-visualisation/types'\nimport DatasetHelper from '../../../utils/datasetHelper'\nimport { BarTimeseriesDefinitionMeasure, BarTimeseriesDefinitionType } from './bar-timeseries/types'\nimport { LineTimeseriesDefinitionMeasure, LineTimeseriesDefinitionType } from './line-timeseries/types'\nimport { ChartColours } from './ChartColours'\nimport ChartConfig from './chart-config'\nimport { PartialDate } from '../../_filters/types'\n\nclass TimeseriesChart {\n  labels: string[] = []\n\n  labelId: string | undefined = undefined\n\n  datasets: DashboardVisualisationDataSet[] = []\n\n  unit: 'NUMBER' | 'PERCENTAGE' | undefined\n\n  responseData: DashboardDataResponse[] = []\n\n  measures: TimeseriesChartMeasure = []\n\n  keys: VisualisationDefinitionKey[] = []\n\n  timeBlockData: DashboardDataResponse[][] = []\n\n  groupKey: LineTimeseriesDefinitionMeasure | BarTimeseriesDefinitionMeasure | undefined\n\n  datasetCount = 0\n\n  hexColours: string[] = []\n\n  config = ChartConfig\n\n  partialDate: PartialDate | undefined\n\n  withData = (responseData: DashboardDataResponse[]) => {\n    this.responseData = responseData\n    this.initFromData()\n    return this\n  }\n\n  initFromDefinition = (definition: BarTimeseriesDefinitionType | LineTimeseriesDefinitionType) => {\n    this.measures = definition.columns.measures\n    this.keys = definition.columns.keys || []\n    this.unit = this.measures.find((m) => m.unit)?.unit\n  }\n\n  withPartialDate = (partialDate?: PartialDate) => {\n    this.partialDate = partialDate\n    return this\n  }\n\n  initFromData = () => {\n    this.groupKey = DatasetHelper.getGroupKey(\n      this.responseData,\n      <Array<components['schemas']['DashboardVisualisationColumnDefinition']>>this.keys,\n    )\n    this.labelId = this.groupKey?.id || ''\n    this.timeBlockData = DatasetHelper.groupRowsByTimestamp(this.responseData)\n    this.labels = this.getLabels()\n    this.datasetCount = this.timeBlockData[0]?.length\n  }\n\n  buildDatasets = () => {\n    this.hexColours = new ChartColours().getHexPallette()\n    for (let index = 0; index < this.datasetCount; index += 1) {\n      const data = this.timeBlockData.map((timeperiod) => {\n        const { raw } = timeperiod[index][this.measures[1].id]\n        return raw ? Number(raw) : 0\n      })\n      const total = data.reduce((a, c) => a + c, 0)\n      const rawValue = this.labelId ? this.timeBlockData[0][index][this.labelId].raw : ''\n      const label = rawValue ? <string>rawValue : ''\n\n      this.datasets.push({\n        data,\n        label,\n        total,\n      })\n    }\n  }\n\n  private getLabels = () => {\n    return this.timeBlockData.map((d: DashboardDataResponse[]) => <string>d[0]['ts'].raw)\n  }\n}\n\nexport { TimeseriesChart }\nexport default TimeseriesChart\n"],
+  "mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,qBAAAE,EAAA,YAAAC,IAAA,eAAAC,EAAAJ,GAOA,IAAAK,EAA0B,2CAG1BC,EAA6B,0BAC7BC,EAAwB,6BAGxB,MAAML,CAAgB,CAAtB,cACE,YAAmB,CAAC,EAEpB,aAA8B,OAE9B,cAA4C,CAAC,EAI7C,kBAAwC,CAAC,EAEzC,cAAmC,CAAC,EAEpC,UAAqC,CAAC,EAEtC,mBAA2C,CAAC,EAI5C,kBAAe,EAEf,gBAAuB,CAAC,EAExB,YAAS,EAAAM,QAIT,cAAYC,IACV,KAAK,aAAeA,EACpB,KAAK,aAAa,EACX,MAGT,wBAAsBC,GAA2E,CAC/F,KAAK,SAAWA,EAAW,QAAQ,SACnC,KAAK,KAAOA,EAAW,QAAQ,MAAQ,CAAC,EACxC,KAAK,KAAO,KAAK,SAAS,KAAMC,GAAMA,EAAE,IAAI,GAAG,IACjD,EAEA,qBAAmBC,IACjB,KAAK,YAAcA,EACZ,MAGT,kBAAe,IAAM,CACnB,KAAK,SAAW,EAAAC,QAAc,YAC5B,KAAK,aACmE,KAAK,IAC/E,EACA,KAAK,QAAU,KAAK,UAAU,IAAM,GACpC,KAAK,cAAgB,EAAAA,QAAc,qBAAqB,KAAK,YAAY,EACzE,KAAK,OAAS,KAAK,UAAU,EAC7B,KAAK,aAAe,KAAK,cAAc,CAAC,GAAG,MAC7C,EAEA,mBAAgB,IAAM,CACpB,KAAK,WAAa,IAAI,eAAa,EAAE,eAAe,EACpD,QAASC,EAAQ,EAAGA,EAAQ,KAAK,aAAcA,GAAS,EAAG,CACzD,MAAMC,EAAO,KAAK,cAAc,IAAKC,GAAe,CAClD,KAAM,CAAE,IAAAC,CAAI,EAAID,EAAWF,CAAK,EAAE,KAAK,SAAS,CAAC,EAAE,EAAE,EACrD,OAAOG,EAAM,OAAOA,CAAG,EAAI,CAC7B,CAAC,EACKC,EAAQH,EAAK,OAAO,CAACI,EAAGC,IAAMD,EAAIC,EAAG,CAAC,EACtCC,EAAW,KAAK,QAAU,KAAK,cAAc,CAAC,EAAEP,CAAK,EAAE,KAAK,OAAO,EAAE,IAAM,GAC3EQ,EAAQD,GAA8B,GAE5C,KAAK,SAAS,KAAK,CACjB,KAAAN,EACA,MAAAO,EACA,MAAAJ,CACF,CAAC,CACH,CACF,EAEA,KAAQ,UAAY,IACX,KAAK,cAAc,IAAKK,GAAuCA,EAAE,CAAC,EAAE,GAAM,GAAG,EAExF,CAGA,IAAOpB,EAAQD",
+  "names": ["ChartTimeseries_exports", "__export", "TimeseriesChart", "ChartTimeseries_default", "__toCommonJS", "import_datasetHelper", "import_ChartColours", "import_chart_config", "ChartConfig", "responseData", "definition", "m", "partialDate", "DatasetHelper", "index", "data", "timeperiod", "raw", "total", "a", "c", "rawValue", "label", "d"]
+}

package/dpr/components/_charts/chart/ChartTimeseries.ts

@@ -0,0 +1,95 @@
+import { components } from '../../../types/api'
+import { DashboardDataResponse } from '../../../types/Metrics'
+import {
+  DashboardVisualisationDataSet,
+  TimeseriesChartMeasure,
+  VisualisationDefinitionKey,
+} from '../../_dashboards/dashboard-visualisation/types'
+import DatasetHelper from '../../../utils/datasetHelper'
+import { BarTimeseriesDefinitionMeasure, BarTimeseriesDefinitionType } from './bar-timeseries/types'
+import { LineTimeseriesDefinitionMeasure, LineTimeseriesDefinitionType } from './line-timeseries/types'
+import { ChartColours } from './ChartColours'
+import ChartConfig from './chart-config'
+import { PartialDate } from '../../_filters/types'
+
+class TimeseriesChart {
+  labels: string[] = []
+
+  labelId: string | undefined = undefined
+
+  datasets: DashboardVisualisationDataSet[] = []
+
+  unit: 'NUMBER' | 'PERCENTAGE' | undefined
+
+  responseData: DashboardDataResponse[] = []
+
+  measures: TimeseriesChartMeasure = []
+
+  keys: VisualisationDefinitionKey[] = []
+
+  timeBlockData: DashboardDataResponse[][] = []
+
+  groupKey: LineTimeseriesDefinitionMeasure | BarTimeseriesDefinitionMeasure | undefined
+
+  datasetCount = 0
+
+  hexColours: string[] = []
+
+  config = ChartConfig
+
+  partialDate: PartialDate | undefined
+
+  withData = (responseData: DashboardDataResponse[]) => {
+    this.responseData = responseData
+    this.initFromData()
+    return this
+  }
+
+  initFromDefinition = (definition: BarTimeseriesDefinitionType | LineTimeseriesDefinitionType) => {
+    this.measures = definition.columns.measures
+    this.keys = definition.columns.keys || []
+    this.unit = this.measures.find((m) => m.unit)?.unit
+  }
+
+  withPartialDate = (partialDate?: PartialDate) => {
+    this.partialDate = partialDate
+    return this
+  }
+
+  initFromData = () => {
+    this.groupKey = DatasetHelper.getGroupKey(
+      this.responseData,
+      <Array<components['schemas']['DashboardVisualisationColumnDefinition']>>this.keys,
+    )
+    this.labelId = this.groupKey?.id || ''
+    this.timeBlockData = DatasetHelper.groupRowsByTimestamp(this.responseData)
+    this.labels = this.getLabels()
+    this.datasetCount = this.timeBlockData[0]?.length
+  }
+
+  buildDatasets = () => {
+    this.hexColours = new ChartColours().getHexPallette()
+    for (let index = 0; index < this.datasetCount; index += 1) {
+      const data = this.timeBlockData.map((timeperiod) => {
+        const { raw } = timeperiod[index][this.measures[1].id]
+        return raw ? Number(raw) : 0
+      })
+      const total = data.reduce((a, c) => a + c, 0)
+      const rawValue = this.labelId ? this.timeBlockData[0][index][this.labelId].raw : ''
+      const label = rawValue ? <string>rawValue : ''
+
+      this.datasets.push({
+        data,
+        label,
+        total,
+      })
+    }
+  }
+
+  private getLabels = () => {
+    return this.timeBlockData.map((d: DashboardDataResponse[]) => <string>d[0]['ts'].raw)
+  }
+}
+
+export { TimeseriesChart }
+export default TimeseriesChart

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

@@ -0,0 +1,2 @@
+"use strict";var B=Object.create;var h=Object.defineProperty;var L=Object.getOwnPropertyDescriptor;var k=Object.getOwnPropertyNames;var A=Object.getPrototypeOf,K=Object.prototype.hasOwnProperty;var w=(i,a)=>{for(var t in a)h(i,t,{get:a[t],enumerable:!0})},m=(i,a,t,e)=>{if(a&&typeof a=="object"||typeof a=="function")for(let s of k(a))!K.call(i,s)&&s!==t&&h(i,s,{get:()=>a[s],enumerable:!(e=L(a,s))||e.enumerable});return i};var p=(i,a,t)=>(t=i!=null?B(A(i)):{},m(a||!i||!i.__esModule?h(t,"default",{value:i,enumerable:!0}):t,i)),V=i=>m(h({},"__esModule",{value:!0}),i);var M={};w(M,{BarChart:()=>l,default:()=>S});module.exports=V(M);var f=require("../../../_dashboards/dashboard-visualisation/types"),d=p(require("../../../../utils/datasetHelper")),c=p(require("../Chart")),g=p(require("./validate")),b=require("../ChartColours");class l extends c.default{constructor(){super(...arguments);this.responseData=[];this.isList=!1;this.datasets=[];this.groupsData=[];this.barCount=0;this.withDefinition=t=>(this.definition=g.default.BarSchema.parse(t),this.initFromDefinitionData(),this);this.withData=t=>(this.responseData=t,this.isList&&this.initListData(),this);this.getCanvasHeight=()=>(this.barCount=this.datasets.length*this.datasets[0].data.length,this.options?.horizontal?this.barCount*40+60:400);this.build=()=>{this.isList?this.getListBarChartData():this.getBarChartData();const t=this.getCanvasHeight();return{type:f.DashboardVisualisationType.BAR,options:{height:t,unit:this.unit,timeseries:!1},data:{labels:this.labels,datasets:this.datasets,config:this.config}}};this.augmentDataset=t=>t.map(e=>({...e,borderWidth:[0,0],datalabels:{align:"center",anchor:"bottom"}}));this.setBespokeOptions=()=>{let t="x",e;if(this.options){const{horizontal:s,xStacked:r,yStacked:o}=this.options;t=s?"y":t,(r||o)&&(e={...r&&{x:{stacked:r}},...o&&{y:{stacked:o}}})}return{...this.config,indexAxis:t,...e&&{scales:e}}};this.getBarChartData=()=>{this.createDatasets(this.measures,this.responseData),this.datasets=this.augmentDataset(this.datasets),this.config=this.setBespokeOptions(),this.createLabels(this.measures)};this.getListBarChartData=()=>{this.createListLabels(),this.createListDatasets(),this.datasets=this.augmentDataset(this.datasets),this.config=this.setBespokeOptions()};this.initFromDefinitionData=()=>{this.measures=this.definition.columns.measures,this.options=this.definition.options,this.keys=this.definition.columns.keys||[],this.isList=!!this.measures.find(t=>t.axis),this.initUnit(this.measures),this.isList||this.getLabelId(this.keys)};this.initListData=()=>{this.xAxisColumn=this.measures.find(t=>t.axis==="x"),this.yAxisColumn=this.measures.find(t=>t.axis==="y"),this.groupKey=d.default.getGroupKey(this.responseData,this.keys),this.groupsData=this.groupKey?d.default.groupRowsByKey(this.responseData,this.groupKey.id):[this.responseData]};this.createListDatasets=()=>{this.hexColours=new b.ChartColours().getHexPallette(),this.datasets=this.groupsData.map((t,e)=>{const s=Array(this.labels.length);t.forEach(o=>{const n=this.yAxisColumn?.id||"",y=this.xAxisColumn?.id||"",x=o[y],u=o[n],C=u&&u.raw?Number(u.raw):0,D=this.labels.findIndex(v=>v===x.raw);D!==-1&&(s[D]=Number(C))});let r="";if(this.groupKey){const o=this.groupKey.id,n=t[0];r=n&&n[o]?`${n[o].raw}`:""}else r=this.yAxisColumn?.display||r;return{label:r,data:s,total:s.reduce((o,n)=>o+n,0),...this.setStyles(e)}})};this.createListLabels=()=>{this.labels=this.groupsData.flatMap(t=>{const e=this.xAxisColumn?.id||"";return t.map(s=>{const r=s[e];return r?`${r.raw}`:""})})}}}var S=l;0&&(module.exports={BarChart});
+//# sourceMappingURL=BarChart.js.map

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

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

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