103 lines
2.8 KiB
JavaScript
103 lines
2.8 KiB
JavaScript
|
import React, { Component } from 'react'
|
||
|
|
import ReactDOM from 'react-dom'
|
||
|
|
|
||
|
|
import { data } from '../../data/large.js'
|
||
|
|
|
||
|
|
import { Form } from './components/form.js'
|
||
|
|
import { Chart } from './components/chart.js'
|
||
|
|
import { Progress } from './components/progress.js'
|
||
|
|
|
||
|
|
import { BenchmarkSuite } from './benchmarks/BenchmarkSuite.js'
|
||
|
|
import { generateCases } from './benchmarkCases/index.js'
|
||
|
|
import { IterationsBenchmark } from './benchmarks/IterationBenchmark.js'
|
||
|
|
import { BenchmarkJSBenchmark } from './benchmarks/BenchmarkJSBenchmark.js'
|
||
|
|
import { OpsPerTimeBenchmark } from './benchmarks/OpsPerTimeBenchmark.js'
|
||
|
|
|
||
|
|
class App extends Component {
|
||
|
|
constructor(props) {
|
||
|
|
super(props)
|
||
|
|
this.handleformChange = this.handleformChange.bind(this)
|
||
|
|
this.handleFormSubmit = this.handleFormSubmit.bind(this)
|
||
|
|
|
||
|
|
this.state = {
|
||
|
|
stats: {},
|
||
|
|
formState: { tolRange: [] },
|
||
|
|
totalCount: 0,
|
||
|
|
finishedCount: 0
|
||
|
|
}
|
||
|
|
|
||
|
|
this.suite = new BenchmarkSuite(new IterationsBenchmark(10))
|
||
|
|
this.suite.onCycle = (i, count, stats) => {
|
||
|
|
this.setState({
|
||
|
|
finishedCount: i,
|
||
|
|
totalCount: count,
|
||
|
|
stats: stats
|
||
|
|
})
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
async handleFormSubmit() {
|
||
|
|
this.runBenchmarks()
|
||
|
|
}
|
||
|
|
|
||
|
|
handleformChange(formState) {
|
||
|
|
const { tolStart, tolEnd, tolStep } = formState
|
||
|
|
const tolRange = []
|
||
|
|
for (let i = tolStart; i < tolEnd; i += tolStep) {
|
||
|
|
tolRange.push(i)
|
||
|
|
}
|
||
|
|
this.setState({ formState: { ...formState, tolRange } })
|
||
|
|
}
|
||
|
|
|
||
|
|
async runBenchmarks() {
|
||
|
|
this.suite.reset()
|
||
|
|
let benchtype
|
||
|
|
console.log(this.state.formState.benchMethod)
|
||
|
|
switch (this.state.formState.benchMethod) {
|
||
|
|
case 'benchmarkJS':
|
||
|
|
benchtype = new BenchmarkJSBenchmark()
|
||
|
|
break
|
||
|
|
case 'iteration':
|
||
|
|
benchtype = new IterationsBenchmark(this.state.formState.iterations)
|
||
|
|
break
|
||
|
|
case 'opsPerTime':
|
||
|
|
benchtype = new OpsPerTimeBenchmark(this.state.formState.timeToRun)
|
||
|
|
break
|
||
|
|
default:
|
||
|
|
console.warn('benchmark type "' + this.state.benchtype + '" not known')
|
||
|
|
benchtype = new IterationsBenchmark(10)
|
||
|
|
}
|
||
|
|
this.suite.setBenchmarkType(benchtype)
|
||
|
|
this.suite.setCases(generateCases(data, this.state.formState))
|
||
|
|
updateStatus('Running')
|
||
|
|
await this.suite.run()
|
||
|
|
updateStatus('Finished')
|
||
|
|
}
|
||
|
|
|
||
|
|
render() {
|
||
|
|
return (
|
||
|
|
<div id="app">
|
||
|
|
<Form
|
||
|
|
onFormChange={this.handleformChange}
|
||
|
|
onFormSubmit={this.handleFormSubmit}
|
||
|
|
/>
|
||
|
|
<Progress
|
||
|
|
totalCount={this.state.totalCount}
|
||
|
|
finishedCount={this.state.finishedCount}
|
||
|
|
/>
|
||
|
|
<Chart
|
||
|
|
labels={this.state.formState.tolRange}
|
||
|
|
highQual={this.state.formState.highQual}
|
||
|
|
data={this.state.stats}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
ReactDOM.render(<App />, document.getElementsByTagName('main')[0])
|
||
|
|
|
||
|
|
const updateStatus = status => {
|
||
|
|
console.log(status)
|
||
|
|
}
|