Skip to content

Commit a2f9b1b

Browse files
rylevrylev
authored
Merge pull request #1255 from rylev/vue3-try-2
Upgrade to Vue3
2 parents c0a1a89 + 42695ab commit a2f9b1b

File tree

1 file changed

+126
-117
lines changed

1 file changed

+126
-117
lines changed

‎site/static/compare.html

Lines changed: 126 additions & 117 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,10 @@
2828

2929
}
3030

31+
#search-toggle-indicator {
32+
cursor: pointer;
33+
}
34+
3135
.section {
3236
display: flex;
3337
margin: 10px 0;
@@ -137,7 +141,7 @@
137141
position: relative;
138142
border-radius: 50%;
139143
font-size: 12px;
140-
margin: 0 -4px;
144+
margin: 0 4px;
141145
border: 1px solid #7d6969;
142146
width: 16px;
143147
text-align: center;
@@ -285,7 +289,7 @@
285289
text-align: center;
286290
}
287291
</style>
288-
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.min.js"></script>
292+
<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>
289293
</head>
290294

291295
<body>
@@ -616,114 +620,39 @@ <h2>Comparing <span id="stat-header">{{stat}}</span> between <span id="before">{
616620
}
617621
}
618622

619-
Vue.mixin({
620-
methods: {
621-
percentClass(pct) {
622-
let klass = "";
623-
if (pct > 1) {
624-
klass = 'positive';
625-
} else if (pct > 0) {
626-
klass = 'slightly-positive';
627-
} else if (pct < -1) {
628-
klass = 'negative';
629-
} else if (pct < -0) {
630-
klass = 'slightly-negative';
631-
}
632-
return klass;
633-
},
634-
}
635-
});
636-
Vue.component('test-cases-table', {
637-
props: ['cases', 'showRawData', 'commitA', 'commitB', 'before', 'after', 'title'],
638-
methods: {
639-
detailedQueryLink(commit, testCase) {
640-
return `/detailed-query.html?commit=${commit}&benchmark=${testCase.benchmark + "-" + testCase.profile}&scenario=${testCase.scenario}`;
641-
},
642-
percentLink(commit, baseCommit, testCase) {
643-
return `/detailed-query.html?commit=${commit}&base_commit=${baseCommit}&benchmark=${testCase.benchmark + "-" + testCase.profile}&scenario=${testCase.scenario}`;
644-
},
623+
const app = Vue.createApp({
624+
mounted() {
625+
const app = this;
626+
loadState(state => makeData(state, app));
627+
628+
document.getElementById("filters-toggle").onclick = (e) => {
629+
toggleFilters("filters-content", "filters-toggle-indicator");
630+
};
631+
document.getElementById("search-toggle").onclick = (e) => {
632+
toggleFilters("search-content", "search-toggle-indicator");
633+
};
645634
},
646-
template: `
647-
<div class="bench-table">
648-
<div class="category-title">{{ title }} benchmarks</div>
649-
<div v-if="cases.length === 0" style="text-align: center;">
650-
No results
651-
</div>
652-
<table v-else class="benches compare">
653-
<thead>
654-
<tr>
655-
<th>Benchmark & Profile</th>
656-
<th>Scenario</th>
657-
<th>% Change</th>
658-
<th>
659-
Significance Factor
660-
<span class="tooltip">?
661-
<span class="tooltiptext">
662-
How much a particular result is over the significance threshold. A factor of 2.50x
663-
means
664-
the result is 2.5 times over the significance threshold. You can see <a
665-
href="https://github.com/rust-lang/rustc-perf/blob/master/docs/comparison-analysis.md#what-makes-a-test-result-significant">
666-
here</a> how the significance threshold is calculated.
667-
</span>
668-
</span>
669-
</th>
670-
<th v-if="showRawData">{{ before }}</th>
671-
<th v-if="showRawData">{{ after }}</th>
672-
</tr>
673-
</thead>
674-
<tbody>
675-
<template v-for="testCase in cases">
676-
<tr>
677-
<td>{{ testCase.benchmark }} {{ testCase.profile }}</td>
678-
<td>{{ testCase.scenario }}</td>
679-
<td>
680-
<a v-bind:href="percentLink(commitB, commitA, testCase)">
681-
<span v-bind:class="percentClass(testCase.percent)">
682-
{{ testCase.percent.toFixed(2) }}%{{testCase.isDodgy ? "?" : ""}}
683-
</span>
684-
</a>
685-
</td>
686-
<td>
687-
{{ testCase.significanceFactor ? testCase.significanceFactor.toFixed(2) + "x" : "-" }}
688-
</td>
689-
<td v-if="showRawData">
690-
<a v-bind:href="detailedQueryLink(commitA, testCase)">
691-
<abbr :title="testCase.datumA">{{ testCase.datumA.toFixed(2) }}</abbr>
692-
</a>
693-
</td>
694-
<td v-if="showRawData">
695-
<a v-bind:href="detailedQueryLink(commitB, testCase)">
696-
<abbr :title="testCase.datumB">{{ testCase.datumB.toFixed(2) }}</abbr>
697-
</a>
698-
</td>
699-
</tr>
700-
</template>
701-
</tbody>
702-
</table>
703-
</div>
704-
`});
705-
706-
let app = new Vue({
707-
el: '#app',
708-
data: {
709-
filter: {
710-
name: null,
711-
showOnlySignificant: true,
712-
filterVerySmall: true,
713-
scenario: {
714-
full: true,
715-
incrFull: true,
716-
incrUnchanged: true,
717-
incrPatched: true
635+
data() {
636+
return {
637+
filter: {
638+
name: null,
639+
showOnlySignificant: true,
640+
filterVerySmall: true,
641+
scenario: {
642+
full: true,
643+
incrFull: true,
644+
incrUnchanged: true,
645+
incrPatched: true
646+
},
647+
category: {
648+
primary: true,
649+
secondary: true
650+
}
718651
},
719-
category: {
720-
primary: true,
721-
secondary: true
722-
}
723-
},
724-
showRawData: false,
725-
data: null,
726-
dataLoading: false
652+
showRawData: false,
653+
data: null,
654+
dataLoading: false
655+
}
727656
},
728657
computed: {
729658
notContinuous() {
@@ -982,6 +911,93 @@ <h2>Comparing <span id="stat-header">{{stat}}</span> between <span id="before">{
982911
},
983912
});
984913

914+
app.component('test-cases-table', {
915+
props: ['cases', 'showRawData', 'commitA', 'commitB', 'before', 'after', 'title'],
916+
methods: {
917+
detailedQueryLink(commit, testCase) {
918+
return `/detailed-query.html?commit=${commit}&benchmark=${testCase.benchmark + "-" + testCase.profile}&scenario=${testCase.scenario}`;
919+
},
920+
percentLink(commit, baseCommit, testCase) {
921+
return `/detailed-query.html?commit=${commit}&base_commit=${baseCommit}&benchmark=${testCase.benchmark + "-" + testCase.profile}&scenario=${testCase.scenario}`;
922+
},
923+
},
924+
template: `
925+
<div class="bench-table">
926+
<div class="category-title">{{ title }} benchmarks</div>
927+
<div v-if="cases.length === 0" style="text-align: center;">
928+
No results
929+
</div>
930+
<table v-else class="benches compare">
931+
<thead>
932+
<tr>
933+
<th>Benchmark & Profile</th>
934+
<th>Scenario</th>
935+
<th>% Change</th>
936+
<th>
937+
Significance Factor<span class="tooltip">?
938+
<span class="tooltiptext">
939+
How much a particular result is over the significance threshold. A factor of 2.50x
940+
means
941+
the result is 2.5 times over the significance threshold. You can see <a
942+
href="https://github.com/rust-lang/rustc-perf/blob/master/docs/comparison-analysis.md#what-makes-a-test-result-significant">
943+
here</a> how the significance threshold is calculated.
944+
</span>
945+
</span>
946+
</th>
947+
<th v-if="showRawData">{{ before }}</th>
948+
<th v-if="showRawData">{{ after }}</th>
949+
</tr>
950+
</thead>
951+
<tbody>
952+
<template v-for="testCase in cases">
953+
<tr>
954+
<td>{{ testCase.benchmark }} {{ testCase.profile }}</td>
955+
<td>{{ testCase.scenario }}</td>
956+
<td>
957+
<a v-bind:href="percentLink(commitB, commitA, testCase)">
958+
<span v-bind:class="percentClass(testCase.percent)">
959+
{{ testCase.percent.toFixed(2) }}%{{testCase.isDodgy ? "?" : ""}}
960+
</span>
961+
</a>
962+
</td>
963+
<td>
964+
{{ testCase.significanceFactor ? testCase.significanceFactor.toFixed(2) + "x" : "-" }}
965+
</td>
966+
<td v-if="showRawData">
967+
<a v-bind:href="detailedQueryLink(commitA, testCase)">
968+
<abbr :title="testCase.datumA">{{ testCase.datumA.toFixed(2) }}</abbr>
969+
</a>
970+
</td>
971+
<td v-if="showRawData">
972+
<a v-bind:href="detailedQueryLink(commitB, testCase)">
973+
<abbr :title="testCase.datumB">{{ testCase.datumB.toFixed(2) }}</abbr>
974+
</a>
975+
</td>
976+
</tr>
977+
</template>
978+
</tbody>
979+
</table>
980+
</div>
981+
`});
982+
app.mixin({
983+
methods: {
984+
percentClass(pct) {
985+
let klass = "";
986+
if (pct > 1) {
987+
klass = 'positive';
988+
} else if (pct > 0) {
989+
klass = 'slightly-positive';
990+
} else if (pct < -1) {
991+
klass = 'negative';
992+
} else if (pct < -0) {
993+
klass = 'slightly-negative';
994+
}
995+
return klass;
996+
},
997+
}
998+
});
999+
1000+
9851001
function toggleFilters(id, toggle) {
9861002
let styles = document.getElementById(id).style;
9871003
let indicator = document.getElementById(toggle);
@@ -1000,13 +1016,6 @@ <h2>Comparing <span id="stat-header">{{stat}}</span> between <span id="before">{
10001016
return testCase.benchmark + "-" + testCase.profile + "-" + testCase.scenario;
10011017
}
10021018

1003-
document.getElementById("filters-toggle").onclick = (e) => {
1004-
toggleFilters("filters-content", "filters-toggle-indicator");
1005-
};
1006-
document.getElementById("search-toggle").onclick = (e) => {
1007-
toggleFilters("search-content", "search-toggle-indicator");
1008-
};
1009-
10101019
function unique(arr) {
10111020
return arr.filter((value, idx) => arr.indexOf(value) == idx);
10121021
}
@@ -1015,7 +1024,7 @@ <h2>Comparing <span id="stat-header">{{stat}}</span> between <span id="before">{
10151024
return commit.substring(0, 8);
10161025
}
10171026

1018-
function makeData(state) {
1027+
function makeData(state, app) {
10191028
app.dataLoading = true;
10201029
let values = Object.assign({}, {
10211030
start: "",
@@ -1040,7 +1049,7 @@ <h2>Comparing <span id="stat-header">{{stat}}</span> between <span id="before">{
10401049
window.location.search = params.toString();
10411050
}
10421051

1043-
loadState(makeData);
1052+
app.mount('#app');
10441053
</script>
10451054
</body>
10461055

0 commit comments

Comments
 (0)