44 lines
1.0 KiB
JavaScript
44 lines
1.0 KiB
JavaScript
import Chart from 'chart.js'
|
|
import 'file-drop-element'
|
|
import { saveAs } from 'file-saver'
|
|
|
|
const fileDrop = document.getElementById('file-drop')
|
|
const dlButton = document.getElementById('download')
|
|
const canvas = document.getElementById('myChart')
|
|
const ctx = canvas.getContext('2d')
|
|
let filename
|
|
let chart = new Chart(ctx)
|
|
|
|
const trimExtension = filename =>
|
|
filename
|
|
.split('.')
|
|
.slice(0, -1)
|
|
.join('.')
|
|
|
|
async function readFile(file) {
|
|
return new Promise(resolve => {
|
|
let reader = new FileReader()
|
|
reader.readAsText(file)
|
|
reader.onload = function() {
|
|
resolve(this.result)
|
|
}
|
|
})
|
|
}
|
|
|
|
function displayDownLoadButton() {
|
|
dlButton.style.display = 'block'
|
|
}
|
|
|
|
fileDrop.addEventListener('filedrop', e => {
|
|
filename = e.files[0].name
|
|
if (chart) chart.destroy()
|
|
readFile(e.files[0])
|
|
.then(JSON.parse)
|
|
.then(config => (chart = new Chart(ctx, config)))
|
|
.then(displayDownLoadButton)
|
|
})
|
|
|
|
dlButton.addEventListener('click', () => {
|
|
canvas.toBlob(blob => saveAs(blob, trimExtension(filename) + '.png'))
|
|
})
|