{"version":3,"sources":["webpack://@verndale/toolkit/./src/js/components/StatsGraph.js"],"names":[],"mappings":"8JAGA,KAAM,GAAS,CAAC,UAAW,WAE3B,eAAyB,KAAU,CACjC,eAAgB,CACd,KAAK,IAAM,CACT,OAAQ,KAAK,GAAG,cAAc,gCAC9B,cAAe,KAAK,GACjB,cAAc,gCACd,WAAW,OAGhB,KAAK,UAAY,KAAK,GAAG,QAAQ,UACjC,KAAK,WAAa,KAAK,GAAG,QAAQ,WAC/B,OACA,QAAQ,WAAY,IACpB,MAAM,KACT,KAAK,YAAc,KAAK,GAAG,QAAQ,YACnC,KAAK,WAAa,KAAK,GAAG,QAAQ,WAClC,KAAK,YAAc,KACnB,KAAK,QAAU,KACf,KAAK,SAAW,GAAI,QAAO,qBACzB,GAAW,CACT,EAAQ,QAAQ,GAAS,CACvB,EAAU,gBAAkB,CAAC,KAAK,aAChC,MAAK,YAAc,GACnB,KAAK,gBAIX,CACE,UAAW,IAGf,KAAK,SAAS,QAAQ,KAAK,IAAI,QAGjC,SAAU,CACR,KAAM,GAAW,GACX,EAAe,KAAK,WAAW,OAAS,KAAK,YAC7C,EAAa,KAAK,WAAW,IAAI,GAAS,SAAS,EAAO,KAEhE,OAAQ,KAAK,eACN,OACH,OAAS,GAAI,EAAG,EAAI,KAAK,YAAa,IACpC,EAAS,KAAK,CACZ,MAAO,WAAW,IAClB,KAAM,KAAK,WAAW,MACpB,EAAI,EACJ,EAAe,EAAI,GAErB,YAAa,EAAO,GACpB,gBAAiB,EAAO,KAI5B,UACG,MACH,EAAS,KAAK,CACZ,MAAO,YACP,KAAM,EACN,gBAAiB,EAAO,KAE1B,EAAS,KAAK,CACZ,MAAO,YACP,KAAM,EAAW,IAAI,GAAS,IAAM,GACpC,gBAAiB,EAAO,KAE1B,UACG,WACH,EAAS,KAAK,CACZ,MAAO,YACP,KAAM,CAAC,GAAG,EAAY,IAAM,EAAW,IACvC,gBAAiB,IAEnB,cAEA,EAAS,KAAK,CACZ,MAAO,YACP,KAAM,KAAK,WAAW,IAAI,GAAS,SAAS,EAAO,KACnD,gBAAiB,EAAO,KAS9B,MALa,CACX,OAAQ,KAAK,YAAc,WAAa,CAAC,EAAG,GAAK,EAAS,GAAG,KAC7D,YAMJ,cAAe,CACb,OAAO,iBAAiB,SAAU,KAAK,aAAa,KAAK,OAG3D,WAAY,CACV,KAAK,OAAS,KAAK,IAAI,OAAO,YAAc,IAC5C,KAAK,MAAQ,GAAI,KAAM,KAAK,IAAI,cAAe,CAC7C,KAAM,KAAK,UACX,KAAM,KAAK,UACX,QAAS,CACP,UAAW,CACT,SAAU,KAGZ,YAAa,KAAK,YAAc,OAAS,EAAI,EAC7C,YAAa,KAAK,YAAc,WAAa,EAAI,IACjD,WAAY,GACZ,OAAQ,KAAK,OACb,QAAS,GACT,gBAAiB,EACjB,WAAY,CACV,QAAS,IAEX,OAAQ,GACR,OAAQ,CACN,QAAS,IAEX,SAAU,CACR,QAAS,IAEX,OAAQ,CACN,EAAG,CACD,QAAS,GACT,QAAS,IAEX,EAAG,CACD,QAAS,GACT,QAAS,KAGb,QAAS,CACP,OAAQ,CACN,QAAS,IAEX,MAAO,CACL,QAAS,QAOnB,cAAe,CACb,KAAK,OAAS,KAAK,IAAI,OAAO,YAAc,KAIhD,UAAe","file":"scripts/2325.b20afc1c8f9b89bcb421.js","sourcesContent":["import { Component } from '@verndale/core';\nimport Chart from 'chart.js/auto';\n\nconst COLORS = ['#e09a07', '#25486b'];\n\nclass StatsGraph extends Component {\n  setupDefaults() {\n    this.dom = {\n      canvas: this.el.querySelector('.home-statistic-card__canvas'),\n      canvasContext: this.el\n        .querySelector('.home-statistic-card__canvas')\n        .getContext('2d')\n    };\n\n    this.chartType = this.el.dataset.chartType;\n    this.chartValue = this.el.dataset.chartValue\n      .trim()\n      .replace(/[^0-9,]/g, '')\n      .split(',');\n    this.chartLabels = this.el.dataset.chartLabels;\n    this.chartTitle = this.el.dataset.chartTitle;\n    this.createChart = null;\n    this.timeout = null;\n    this.observer = new window.IntersectionObserver(\n      entries => {\n        entries.forEach(entry => {\n          if (entry.isIntersecting && !this.createChart) {\n            this.createChart = true;\n            this.initGraph();\n          }\n        });\n      },\n      {\n        threshold: 1\n      }\n    );\n    this.observer.observe(this.dom.canvas);\n  }\n\n  getData() {\n    const datasets = [];\n    const portionIndex = this.chartValue.length / this.chartLabels;\n    const valueArray = this.chartValue.map(value => parseInt(value, 10));\n\n    switch (this.chartType) {\n      case 'line':\n        for (let i = 0; i < this.chartLabels; i++) {\n          datasets.push({\n            label: `Dataset ${i}`,\n            data: this.chartValue.slice(\n              i * portionIndex,\n              portionIndex + i * portionIndex\n            ),\n            borderColor: COLORS[i],\n            backgroundColor: COLORS[i]\n          });\n        }\n\n        break;\n      case 'bar':\n        datasets.push({\n          label: 'Dataset 0',\n          data: valueArray,\n          backgroundColor: COLORS[0]\n        });\n        datasets.push({\n          label: 'Dataset 1',\n          data: valueArray.map(value => 100 - value),\n          backgroundColor: COLORS[1]\n        });\n        break;\n      case 'doughnut':\n        datasets.push({\n          label: 'Dataset 0',\n          data: [...valueArray, 100 - valueArray[0]],\n          backgroundColor: COLORS\n        });\n        break;\n      default:\n        datasets.push({\n          label: 'Dataset 0',\n          data: this.chartValue.map(value => parseInt(value, 10)),\n          backgroundColor: COLORS[0]\n        });\n    }\n\n    const data = {\n      labels: this.chartType === 'doughnut' ? [1, 2] : datasets[0].data,\n      datasets\n    };\n\n    return data;\n  }\n\n  addListeners() {\n    window.addEventListener('resize', this.handleResize.bind(this));\n  }\n\n  initGraph() {\n    this.cutout = this.dom.canvas.offsetWidth / 2.2;\n    this.chart = new Chart(this.dom.canvasContext, {\n      type: this.chartType,\n      data: this.getData(),\n      options: {\n        animation: {\n          duration: 2000\n        },\n\n        borderWidth: this.chartType === 'line' ? 4 : 0,\n        aspectRatio: this.chartType === 'doughnut' ? 1 : 1.6,\n        responsive: true,\n        cutout: this.cutout,\n        tension: 0.5,\n        maxBarThickness: 5,\n        scaleLabel: {\n          display: false\n        },\n        events: [],\n        legend: {\n          display: false\n        },\n        tooltips: {\n          enabled: false\n        },\n        scales: {\n          x: {\n            display: false,\n            stacked: true\n          },\n          y: {\n            display: false,\n            stacked: true\n          }\n        },\n        plugins: {\n          legend: {\n            display: false\n          },\n          title: {\n            display: false\n          }\n        }\n      }\n    });\n  }\n\n  handleResize() {\n    this.cutout = this.dom.canvas.offsetWidth / 2.2;\n  }\n}\n\nexport default StatsGraph;\n"],"sourceRoot":""}