melch/mt-polygon-simplification
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Add chart download

Browse Source
This commit is contained in:
Alfred Melch 2019-08-07 15:34:24 +02:00
parent e6c32fd8bb
commit e4a3e82f7e
2 changed files with 27 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
benchmarking/public/chart.html
View File

@ -23,8 +23,6 @@
right: 2px; right: 2px;
bottom: 2px; bottom: 2px;
border: 2px dashed #fff; border: 2px dashed #fff;
background-color: rgba(88, 116, 88, 0.2);
border-color: rgba(65, 129, 65, 0.5);
border-radius: 10px; border-radius: 10px;
opacity: 0; opacity: 0;
transform: scale(0.95); transform: scale(0.95);
@ -34,6 +32,8 @@
} }
.drop-valid::after { .drop-valid::after {
background-color: rgba(88, 116, 88, 0.2);
border-color: rgba(65, 129, 65, 0.5);
opacity: 1; opacity: 1;
transform: scale(1); transform: scale(1);
transition-timing-function: ease-out; transition-timing-function: ease-out;
@ -49,10 +49,12 @@
</style> </style>
</head> </head>
<body> <body>
<header>Header <a href="../">Back</a></header>
<main> <main>
<file-drop id="file-drop" accept="application/json" <file-drop id="file-drop" accept="application/json"
>Drop config here</file-drop >Drop config here</file-drop
> >
<button id="download" style="display: none">Download image</button>
<div><canvas id="myChart" width="600" height="400"></canvas></div> <div><canvas id="myChart" width="600" height="400"></canvas></div>
</main> </main>
<script src="./loadChart.js"></script> <script src="./loadChart.js"></script>

27
benchmarking/src/loadChart.js
View File

@ -1,10 +1,19 @@
import 'file-drop-element'
import Chart from 'chart.js' import Chart from 'chart.js'
import 'file-drop-element'
import { saveAs } from 'file-saver'
const fileDrop = document.getElementById('file-drop') const fileDrop = document.getElementById('file-drop')
const dlButton = document.getElementById('download')
const canvas = document.getElementById('myChart') const canvas = document.getElementById('myChart')
const ctx = canvas.getContext('2d') 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) { async function readFile(file) {
return new Promise(resolve => { return new Promise(resolve => {
@ -16,9 +25,19 @@ async function readFile(file) {
}) })
} }
function displayDownLoadButton() {
dlButton.style.display = 'block'
}
fileDrop.addEventListener('filedrop', e => { fileDrop.addEventListener('filedrop', e => {
filename = e.files[0].name
if (chart) chart.destroy()
readFile(e.files[0]) readFile(e.files[0])
.then(JSON.parse) .then(JSON.parse)
.then(config => new Chart(ctx, config)) .then(config => (chart = new Chart(ctx, config)))
.then(document.getElementsByTagName('file-drop')[0].remove()) .then(displayDownLoadButton)
})
dlButton.addEventListener('click', () => {
canvas.toBlob(blob => saveAs(blob, trimExtension(filename) + '.png'))
}) })