{"version":3,"sources":["webpack:///./src/js/modules/interactive-chart.js"],"names":["InteractiveChart","Component","setupDefaults","this","dom","chartCanvas","el","querySelector","filters","querySelectorAll","initChart","addListeners","forEach","filter","addEventListener","handleFilterChange","bind","showLegend","dataset","legendPosition","chartColors","JSON","parse","hoverColors","stepSize","chartData","labels","jsonDatasets","data","suffix","datasets","type","createBarChart","createLineChart","event","selectedValue","target","classList","add","disabled","remove","filterByMonths","Number","getDatesInRange","numberOfMonths","dateObjects","map","dateStr","month","day","year","split","Date","sort","a","b","lastDate","startDate","setMonth","getMonth","date","String","padStart","getDate","getFullYear","months","filteredLabels","chart","destroy","currentYear","label","length","reverse","filteredDatasets","index","push","values","slice","cumulativeSum","backgroundColor","hoverBackgroundColor","borderColor","tension","config","labelsToRender","Chart","borderWidth","options","maintainAspectRatio","scales","y","beginAtZero","ticks","color","callback","value","grid","display","lineWidth","drawOnChartArea","border","width","dash","x","plugins","legend","position","tooltip","callbacks","context","parsed","arr","result","sum","indexAxis","padding","inputDate","toString","formatDate"],"mappings":"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","file":"28.0e2c40670373c662ed9f.js","sourcesContent":["import { Component } from '@verndale/core';\nimport Chart from 'chart.js/auto';\n\nclass InteractiveChart extends Component {\n  setupDefaults() {\n    this.dom = {\n      chartCanvas: this.el.querySelector('.interactive-chart__chart-canvas'),\n      filters: this.el.querySelectorAll('.interactive-chart__filter-button')\n    };\n\n    this.initChart();\n  }\n\n  addListeners() {\n    if (this.dom.filters) {\n      this.dom.filters.forEach((filter) => {\n        filter.addEventListener('click', this.handleFilterChange.bind(this));\n      });\n    }\n  }\n\n  initChart() {\n    this.showLegend = this.el.dataset.showLegend === 'true';\n    this.legendPosition = this.el.dataset.legendPosition || 'top';\n    this.chartColors = JSON.parse(this.el.dataset.chartColors);\n    this.hoverColors = JSON.parse(this.el.dataset.hoverColors);\n    this.stepSize = this.el.dataset.stepSize;\n    this.chartData = JSON.parse(this.el.dataset.chartData);\n    this.labels = this.chartData.labels;\n    this.jsonDatasets = this.chartData.data;\n    this.suffix = this.chartData.suffix;\n    this.datasets = [];\n    this.type = this.chartData.type;\n\n    if (this.type === 'Bar') {\n      this.createBarChart();\n    }\n\n    if (this.type === 'Line' || this.type === 'LineWithFilter') {\n      this.createLineChart();\n    }\n  }\n\n  handleFilterChange(event) {\n    const selectedValue = event.target.dataset.filter;\n\n    this.dom.filters.forEach((filter) => {\n      filter.classList.add('btn--outline');\n      filter.disabled = false;\n    });\n\n    event.target.classList.remove('btn--outline');\n    event.target.disabled = true;\n    this.filterByMonths(Number(selectedValue));\n  }\n\n  getDatesInRange(numberOfMonths) {\n    // Helper function to parse dates\n    function parseDate(dateStr) {\n      const [month, day, year] = dateStr.split('/').map(Number);\n      return new Date(year, month - 1, day); // Months are 0-based in JavaScript Date\n    }\n\n    // Helper function to format a date to \"MM/DD/YYYY\"\n    function formatDate(date) {\n      const month = String(date.getMonth() + 1).padStart(2, '0');\n      const day = String(date.getDate()).padStart(2, '0');\n      const year = date.getFullYear();\n      return `${month}/${day}/${year}`;\n    }\n\n    // Convert the string dates into Date objects\n    const dateObjects = this.labels.map(parseDate);\n\n    // Sort dates to ensure the last date is the latest\n    dateObjects.sort((a, b) => b - a);\n\n    // Get the last date\n    const lastDate = dateObjects[0];\n\n    // Calculate the start date by subtracting N months\n    const startDate = new Date(lastDate);\n    startDate.setMonth(startDate.getMonth() - numberOfMonths);\n\n    // Filter dates to include only those within the range\n    const filteredDates = dateObjects.filter((date) => date > startDate);\n\n    // Convert the filtered dates back to string format\n    return filteredDates.map(formatDate);\n  }\n\n  //filter by the last N months\n  filterByMonths(months) {\n    let filteredLabels = [],\n      numberOfMonths;\n    this.chart.destroy();\n\n    if (months === -1) {\n      this.createLineChart();\n      return;\n    }\n\n    if (months === 0) {\n      //get YTD data\n      const currentYear = new Date().getFullYear();\n      filteredLabels = this.labels.filter((label) => new Date(label).getFullYear() === currentYear);\n      numberOfMonths = filteredLabels.length;\n    } else {\n      filteredLabels = this.getDatesInRange(months)?.reverse();\n      numberOfMonths = filteredLabels.length;\n    }\n\n    const filteredDatasets = [];\n\n    this.jsonDatasets.forEach((dataset, index) => {\n      filteredDatasets.push(dataset.values.slice(-numberOfMonths));\n    });\n\n    this.datasets = [];\n\n    this.jsonDatasets.forEach((dataset, index) => {\n      this.datasets.push({\n        label: dataset.label,\n        data: this.cumulativeSum(filteredDatasets[index]),\n        backgroundColor: this.chartColors[index],\n        hoverBackgroundColor: this.hoverColors[index],\n        borderColor: this.chartColors[index],\n        tension: 0.1\n      });\n    });\n\n    const data = {\n      labels: filteredLabels,\n      datasets: this.datasets\n    };\n\n    this.config = {\n      ...this.config,\n      data\n    };\n\n    this.labelsToRender = filteredLabels;\n\n    this.chart = new Chart(this.dom.chartCanvas, this.config);\n  }\n\n  createBarChart() {\n    this.jsonDatasets.forEach((dataset, index) => {\n      this.datasets.push({\n        label: dataset.label,\n        data: dataset.values,\n        backgroundColor: this.chartColors[index],\n        hoverBackgroundColor: this.hoverColors[index],\n        borderWidth: 1\n      });\n    });\n\n    const data = {\n      labels: this.labels,\n      datasets: this.datasets\n    };\n\n    const { suffix, showLegend, legendPosition } = this;\n\n    this.config = {\n      type: 'bar',\n      data,\n      options: {\n        maintainAspectRatio: false,\n        scales: {\n          y: {\n            beginAtZero: true,\n            ticks: {\n              color: '#171a21',\n              callback: (value, index, ticks) => {\n                if (suffix) {\n                  return `${value}${suffix}`;\n                }\n                return `${value}`;\n              },\n              stepSize: this.stepSize\n            },\n            grid: {\n              display: true,\n              lineWidth: 2,\n              drawOnChartArea: false\n            },\n            border: {\n              display: true,\n              color: '#171a21',\n              width: 2,\n              dash: [5, 5]\n            }\n          },\n          x: {\n            ticks: {\n              color: '#171a21'\n            },\n            grid: {\n              display: true,\n              drawOnChartArea: false\n            },\n            border: {\n              display: true,\n              color: '#171a21',\n              width: 2\n            }\n          }\n        },\n        plugins: {\n          legend: {\n            display: showLegend,\n            position: legendPosition\n          },\n          tooltip: {\n            callbacks: {\n              label(context) {\n                return `${context.dataset.label}: ${context.parsed.y}${suffix || ''}`;\n              }\n            }\n          }\n        }\n      }\n    };\n\n    this.chart = new Chart(this.dom.chartCanvas, this.config);\n  }\n\n  cumulativeSum(arr) {\n    const result = [];\n    let sum = 0;\n\n    for(const value of arr) {\n      sum += Number(value) * 100;\n      result.push(sum);\n    }\n\n    return result;\n  }\n\n  createLineChart() {\n    this.datasets = [];\n\n    this.jsonDatasets.forEach((dataset, index) => {\n      this.datasets.push({\n        label: dataset.label,\n        data: this.type === 'LineWithFilter' ? this.cumulativeSum(dataset.values) : dataset.values,\n        backgroundColor: this.chartColors[index],\n        borderColor: this.chartColors[index],\n        hoverBackgroundColor: this.hoverColors[index],\n        tension: 0.1\n      });\n    });\n\n    const data = {\n      labels: this.labels,\n      datasets: this.datasets\n    };\n\n    const formatDate = (inputDate) => {\n      // Parse the input date string\n      const [month, day, year] = inputDate.split('/').map(Number);\n\n      // Create an array of month names abbreviated to three letters\n      const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];\n\n      // Extract the abbreviated month name\n      const monthName = months[month - 1];\n\n      // Extract the last two digits of the year\n      const yearSuffix = year.toString().slice(-2);\n\n      // Construct and return the formatted date string\n      return `${monthName} '${yearSuffix}`;\n    };\n\n    const { suffix, showLegend, legendPosition } = this;\n\n    this.labelsToRender = this.labels;\n\n    this.config = {\n      type: 'line',\n      data,\n      options: {\n        maintainAspectRatio: false,\n        indexAxis: 'x',\n        scales: {\n          y: {\n            ticks: {\n              color: '#171a21',\n              callback: (value, index, ticks) => {\n                if (suffix) {\n                  return `${value}${suffix}`;\n                }\n                return `${value}`;\n              },\n              stepSize: this.stepSize\n            },\n            border: {\n              display: true,\n              color: '#171a21',\n              width: 2\n            },\n            grid: {\n              display: true,\n              drawOnChartArea: false\n            }\n          },\n          x: {\n            ticks: {\n              color: '#171a21',\n              padding: 30,\n              callback: (value, index, ticks) => {\n                const newValue = this.labelsToRender[index];\n                return formatDate(newValue);\n              }\n            },\n            border: {\n              display: true,\n              color: '#171a21',\n              width: 2\n            },\n            grid: {\n              display: true,\n              drawOnChartArea: false\n            }\n          }\n        },\n        plugins: {\n          legend: {\n            display: showLegend,\n            position: legendPosition\n          },\n          tooltip: {\n            callbacks: {\n              label(context) {\n                return `${context.dataset.label}: ${context.parsed.y}${suffix || ''}`;\n              }\n            }\n          }\n        }\n      }\n    };\n\n    this.chart = new Chart(this.dom.chartCanvas, this.config);\n  }\n}\n\nexport default InteractiveChart;\n"],"sourceRoot":""}