import Chart from 'chart.js'

import { getCurrency, getAppID, getPurchaseButton } from './helpers/dom-helper'
import { get } from './helpers/http-request-helper'

Chart.defaults.global.legend.display = false

function fetchPriceData () {
  const currency = getCurrency().toLowerCase()
  const appID = getAppID()
  const dataURL = `https://raw.githubusercontent.com/BrakeValve/historical-prices/${currency}/${appID}.json`

  return get(dataURL)
}

function updateButtonStyle (prediction) {
  if (prediction) {
    const purchaseButton = getPurchaseButton()
    purchaseButton.classList.add('brakevalve')
    purchaseButton.classList.add(`btn-${prediction}`)

    const span = purchaseButton.querySelector('span')
    if (prediction === 'stop') {
      span.innerHTML = 'Don’t Buy - Discount Soon'
    } else if (prediction === 'caution') {
      span.innerHTML = 'Neutral'
    }
  }
}

fetchPriceData()
  .then((data) => {
    updateButtonStyle(data.prediction)
  })

@@ -21,16 +21,44 @@
 hart.js'
+%0Aimport Moment from 'moment'
 %0A%0Aimport
@@ -100,16 +100,35 @@
 seButton
+, getAppPurchaseBox
  %7D from 
@@ -249,16 +249,299 @@
  false%0A%0A
+class ChartProperties %7B%0A  static get areaUnderCurveColor () %7B%0A    return 'transparent'%0A  %7D%0A%0A  static get lineColor () %7B%0A    return 'rgba(255, 255, 255, 0.5)'%0A  %7D%0A%0A  static get lineWidth () %7B%0A    return 0.7%0A  %7D%0A%0A  static get dotColor () %7B%0A    return 'rgba(255, 255, 255, 0.5)'%0A  %7D%0A%7D%0A%0A
 function
@@ -1208,16 +1208,1113 @@
 %0A  %7D%0A%7D%0A%0A
+function createCanvas () %7B%0A  const canvas = document.createElement('canvas')%0A  canvas.classList.add('brakevalve', 'chart-box')%0A  return canvas%0A%7D%0A%0Afunction generateChartData (prices) %7B%0A  const labels = prices.map(%0A    (data) =%3E %7B%0A      return Moment(new Date(parseInt(data.timestamp) * 1000)).format('MMM DD')%0A    %7D%0A  )%0A%0A  const values = prices.map(%0A    (data) =%3E %7B%0A      return parseFloat(data.price)%0A    %7D%0A  )%0A%0A  return %7B%0A    labels: labels,%0A    datasets: %5B%0A      %7B%0A        data: values,%0A        backgroundColor: ChartProperties.areaUnderCurveColor,%0A        borderColor: ChartProperties.lineColor,%0A        borderWidth: ChartProperties.lineWidth,%0A        pointBackgroundColor: ChartProperties.dotColor%0A      %7D%0A    %5D%0A  %7D%0A%7D%0A%0Afunction plotHistoricalData (data) %7B%0A  const chartCanvas = createCanvas()%0A  getAppPurchaseBox().appendChild(chartCanvas)%0A%0A  const chartData = generateChartData(data)%0A  Chart.Line(%0A    chartCanvas.getContext('2d'),%0A    %7B%0A      data: chartData,%0A      options: %7B%0A        title: %7B%0A          display: true,%0A          text: 'Historical Price (USD)'%0A        %7D%0A      %7D%0A    %7D%0A  )%0A%7D%0A%0A
 fetchPri
@@ -2381,13 +2381,55 @@
 iction)%0A
+    plotHistoricalData(data.priceHistory)%0A
   %7D)%0A

Add chart to show historical data