1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
|
import * as echarts from 'echarts';
import {EChartsOption, EChartsType} from "echarts";
let scoreChart: EChartsType;
const userDeviceLabel = 'Your device';
let deviceScores = [
{ device: 'AMD Ryzen 9\n7950X\n(16c/32t)', multiCoreScore: 1294, singleCoreScore: 121 },
{ device: 'AMD Ryzen 7\n5700X\n(8c/16t)', multiCoreScore: 663, singleCoreScore: 104 },
{ device: 'AMD Ryzen 7\n3700X\n(8c/16t)', multiCoreScore: 416, singleCoreScore: 74 },
{ device: 'Intel 11th Gen\ni5-1145G7\n(4c/8t)', multiCoreScore: 294, singleCoreScore: 73 },
{ device: 'Intel 8th Gen\ni7-8550U\n(4c/8t)', multiCoreScore: 221, singleCoreScore: 53 },
{ device: 'iPhone XS\n(6c/6t)\n(*WebKit)', multiCoreScore: 71, singleCoreScore: 28 },
{ device: 'Raspberry Pi4\nARM Cortex-A72\n(4c/4t)', multiCoreScore: 25, singleCoreScore: 9 }
]
let scoreDataset = {
dimensions: ['device', 'multiCoreScore', 'singleCoreScore'],
source: deviceScores
}
const option: EChartsOption = {
legend: {},
dataset: scoreDataset,
xAxis: {
type: 'value',
max: deviceScores[0].multiCoreScore,
axisLabel: {
showMaxLabel: false,
showMinLabel: false
},
splitLine: {
show: true,
showMaxLine: false,
},
},
yAxis: {
type: 'category',
inverse: true,
axisLabel: {
formatter: function (label) {
if (label == userDeviceLabel) {
return `{usersDevice|${label}}`;
}
return label;
},
rich: {
usersDevice: {
color: "#5755d9",
fontWeight: "bold",
fontSize: "14px"
},
},
},
},
series: [
{
name: 'Multi-core',
type: 'bar',
label: {
show: true,
position: "right"
},
},
{
name: 'Single core',
type: 'bar',
label: {
show: true,
position: "right"
},
}
],
grid: {
left: '0%',
top: '5%',
containLabel: true
},
color: [
'#5755d9',
'#f1f1fc'
],
}
export function initScoreChart(dom: HTMLElement) {
scoreChart = echarts.init(dom);
scoreChart.setOption(option);
window.addEventListener('resize', function() {
scoreChart.resize();
});
}
export function addDeviceResult(multiCoreScore: number, singleCoreScore: number) {
// Remove previous result if present
const index = deviceScores.findIndex(d => d.device === userDeviceLabel);
if (index >= 0) {
deviceScores.splice(index, 1)
}
deviceScores.push({device: userDeviceLabel, multiCoreScore: multiCoreScore, singleCoreScore: singleCoreScore});
deviceScores.sort((a, b) => b.multiCoreScore - a.multiCoreScore);
scoreChart.setOption(option);
}
|