diff --git a/benchmarking/public/chart.html b/benchmarking/public/chart.html
index 4f1aaa7..89dae7a 100644
--- a/benchmarking/public/chart.html
+++ b/benchmarking/public/chart.html
@@ -23,8 +23,6 @@
right: 2px;
bottom: 2px;
border: 2px dashed #fff;
- background-color: rgba(88, 116, 88, 0.2);
- border-color: rgba(65, 129, 65, 0.5);
border-radius: 10px;
opacity: 0;
transform: scale(0.95);
@@ -34,6 +32,8 @@
}
.drop-valid::after {
+ background-color: rgba(88, 116, 88, 0.2);
+ border-color: rgba(65, 129, 65, 0.5);
opacity: 1;
transform: scale(1);
transition-timing-function: ease-out;
@@ -49,10 +49,12 @@
+
Drop config here
+
diff --git a/benchmarking/src/loadChart.js b/benchmarking/src/loadChart.js
index 4f9167c..fc23a99 100644
--- a/benchmarking/src/loadChart.js
+++ b/benchmarking/src/loadChart.js
@@ -1,10 +1,19 @@
-import 'file-drop-element'
-
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 => {
@@ -16,9 +25,19 @@ async function readFile(file) {
})
}
+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 => new Chart(ctx, config))
- .then(document.getElementsByTagName('file-drop')[0].remove())
+ .then(config => (chart = new Chart(ctx, config)))
+ .then(displayDownLoadButton)
+})
+
+dlButton.addEventListener('click', () => {
+ canvas.toBlob(blob => saveAs(blob, trimExtension(filename) + '.png'))
})