From 6308b16f34821cf366fea172337904ab6049108e Mon Sep 17 00:00:00 2001 From: Alfred Melch Date: Tue, 6 Aug 2019 14:03:05 +0200 Subject: [PATCH] Add chart save/load --- benchmarking/package-lock.json | 5 ++ benchmarking/package.json | 1 + benchmarking/public/chart.html | 63 +++++++++++++++++++++++ benchmarking/public/index.html | 4 ++ benchmarking/src/components/chart.js | 77 +++++++++++++++++++++++----- benchmarking/src/loadChart.js | 23 +++++++++ benchmarking/webpack.config.js | 7 ++- lib/json-download/index.js | 15 ++++++ 8 files changed, 179 insertions(+), 16 deletions(-) create mode 100644 benchmarking/public/chart.html create mode 100644 benchmarking/src/loadChart.js create mode 100644 lib/json-download/index.js diff --git a/benchmarking/package-lock.json b/benchmarking/package-lock.json index 8990018..2f98529 100644 --- a/benchmarking/package-lock.json +++ b/benchmarking/package-lock.json @@ -3924,6 +3924,11 @@ "escape-string-regexp": "1.0.5" } }, + "file-drop-element": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/file-drop-element/-/file-drop-element-0.2.0.tgz", + "integrity": "sha512-BGDdaJ4U2Cz0qhv6YGLnuhVtKcN8fp7F/4dS7lGSL1Fbe8m4cbGk+8awwHW0xcFqutMojxGchMVuWYQpEpP/Qg==" + }, "file-loader": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/file-loader/-/file-loader-4.0.0.tgz", diff --git a/benchmarking/package.json b/benchmarking/package.json index f25c668..99420b1 100644 --- a/benchmarking/package.json +++ b/benchmarking/package.json @@ -22,6 +22,7 @@ "dependencies": { "benchmark": "^2.1.4", "chart.js": "^2.8.0", + "file-drop-element": "^0.2.0", "lodash": "^4.17.11", "react": "^16.8.6", "react-chartjs-2": "^2.7.6", diff --git a/benchmarking/public/chart.html b/benchmarking/public/chart.html new file mode 100644 index 0000000..861be33 --- /dev/null +++ b/benchmarking/public/chart.html @@ -0,0 +1,63 @@ + + + + + + Document + + + +
Header Back
+
+
+ Drop config here +
+
+
+ + + diff --git a/benchmarking/public/index.html b/benchmarking/public/index.html index 2ea78b7..9532c99 100644 --- a/benchmarking/public/index.html +++ b/benchmarking/public/index.html @@ -12,6 +12,10 @@

Benchmarking

+ diff --git a/benchmarking/src/components/chart.js b/benchmarking/src/components/chart.js index 770bad1..e1b7773 100644 --- a/benchmarking/src/components/chart.js +++ b/benchmarking/src/components/chart.js @@ -2,6 +2,7 @@ import React from 'react' import { Line, Bar } from 'react-chartjs-2' import debounceRender from 'react-debounce-render' +import { downloadAsJson } from '../../../lib/json-download/index.js' import { datasetTemplates, genOptions, beautifyLabels } from './chartOptions.js' export class Chart extends React.Component { @@ -43,13 +44,20 @@ class WasmVsJsChart extends React.Component { dataset.data = dataset.data.map(mean => 1000 / mean) } } + render() { let data = JSON.parse(JSON.stringify(this.props.data)) // deep copy let options = genOptions('Wasm vs. JavaScript', false, this.state.scaleY) if (this.state.values === 'hz') this.convertDataToHz(data) return ( <> - + (this.ref = ref)} + height={400} + width={400} + data={data} + options={options} + /> + ) } @@ -103,20 +112,60 @@ function modifyDataArrays(data, exec, pre, after) { } } -const WasmStackChart = ({ data }) => { - modifyDataArrays(data, 'simplifyWASM', 'storeCoords', 'loadResult') - const options = genOptions('Wasm execution', true) - return +class WasmStackChart extends React.Component { + render() { + const data = this.props.data + modifyDataArrays(data, 'simplifyWASM', 'storeCoords', 'loadResult') + const options = genOptions('Wasm execution', true) + return ( + <> + (this.ref = ref)} + height={400} + width={400} + data={data} + options={options} + /> + + + ) + } } -const JsStackChart = ({ data }) => { - const options = genOptions('SimplifyJS execution', true) - modifyDataArrays( - data, - 'origSimplifyWithTransformCase', - 'transformToObjectFormCase', - 'transformToArrayFormCase' - ) - return +class JsStackChart extends React.Component { + render() { + const data = this.props.data + const options = genOptions('SimplifyJS execution', true) + modifyDataArrays( + data, + 'origSimplifyWithTransformCase', + 'transformToObjectFormCase', + 'transformToArrayFormCase' + ) + return ( + <> + (this.ref = ref)} + height={400} + width={400} + data={data} + options={options} + /> + + + ) + } } + export const DebouncedChart = debounceRender(Chart, 300) + +/** + * Downloads the chart config as json + */ +function saveChart(chartRef) { + let myChart = chartRef.chartInstance.config + let config = JSON.stringify(myChart, (key, val) => + key === '_meta' ? undefined : val + ) + downloadAsJson(config, 'config.json') +} diff --git a/benchmarking/src/loadChart.js b/benchmarking/src/loadChart.js new file mode 100644 index 0000000..f7fcb0f --- /dev/null +++ b/benchmarking/src/loadChart.js @@ -0,0 +1,23 @@ +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)) +}) diff --git a/benchmarking/webpack.config.js b/benchmarking/webpack.config.js index e721f97..d19e0ec 100644 --- a/benchmarking/webpack.config.js +++ b/benchmarking/webpack.config.js @@ -3,10 +3,13 @@ const CopyPlugin = require('copy-webpack-plugin') const path = require('path') module.exports = { - entry: './src/index.js', + entry: { + bundle: './src/index.js', + loadChart: './src/loadChart.js' + }, output: { path: path.resolve(__dirname, 'dist'), - filename: 'bundle.js' + filename: '[name].js' }, module: { // Suppress warnings and errors logged by benchmark.js when bundled using webpack. diff --git a/lib/json-download/index.js b/lib/json-download/index.js new file mode 100644 index 0000000..8ae8668 --- /dev/null +++ b/lib/json-download/index.js @@ -0,0 +1,15 @@ +/* +Taken from: https://stackoverflow.com/questions/19721439/download-json-object-as-a-file-from-browser +*/ + +export function downloadAsJson(exportObj, exportName) { + if (typeof exportObj !== 'string') exportObj = JSON.stringify(exportObj) + var dataStr = + 'data:application/json;charset=utf-8,' + encodeURIComponent(exportObj) + var downloadAnchorNode = document.createElement('a') + downloadAnchorNode.setAttribute('href', dataStr) + downloadAnchorNode.setAttribute('download', exportName) + document.body.appendChild(downloadAnchorNode) // required for firefox + downloadAnchorNode.click() + downloadAnchorNode.remove() +}