import 'file-drop-element'

import Chart from 'chart.js'

const fileDrop = document.getElementById('file-drop')
const canvas = document.getElementById('myChart')
const ctx = canvas.getContext('2d')

async function readFile(file) {
  return new Promise(resolve => {
    let reader = new FileReader()
    reader.readAsText(file)
    reader.onload = function() {
      resolve(this.result)
    }
  })
}

fileDrop.addEventListener('filedrop', e => {
  readFile(e.files[0])
    .then(JSON.parse)
    .then(config => new Chart(ctx, config))
    .then(document.getElementsByTagName('file-drop')[0].remove())
})