Skip to content

Commit f5d3cf6

Browse files
rylevrylev
committed
Convert comparison page to Vue3
1 parent b95787f commit f5d3cf6

File tree

1 file changed

+115
-109
lines changed

1 file changed

+115
-109
lines changed

‎site/static/compare.html

Lines changed: 115 additions & 109 deletions
Original file line numberDiff line numberDiff line change
@@ -285,7 +285,7 @@
285285
text-align: center;
286286
}
287287
</style>
288-
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.min.js"></script>
288+
<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>
289289
</head>
290290

291291
<body>
@@ -616,114 +616,32 @@ <h2>Comparing <span id="stat-header">{{stat}}</span> between <span id="before">{
616616
}
617617
}
618618

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-
},
619+
const app = Vue.createApp({
620+
mounted() {
621+
const app = this;
622+
loadState(state => makeData(state, app));
645623
},
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
624+
data() {
625+
return {
626+
filter: {
627+
name: null,
628+
showOnlySignificant: true,
629+
filterVerySmall: true,
630+
scenario: {
631+
full: true,
632+
incrFull: true,
633+
incrUnchanged: true,
634+
incrPatched: true
635+
},
636+
category: {
637+
primary: true,
638+
secondary: true
639+
}
718640
},
719-
category: {
720-
primary: true,
721-
secondary: true
722-
}
723-
},
724-
showRawData: false,
725-
data: null,
726-
dataLoading: false
641+
showRawData: false,
642+
data: null,
643+
dataLoading: false
644+
}
727645
},
728646
computed: {
729647
notContinuous() {
@@ -982,6 +900,94 @@ <h2>Comparing <span id="stat-header">{{stat}}</span> between <span id="before">{
982900
},
983901
});
984902

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

1018-
function makeData(state) {
1024+
function makeData(state, app) {
10191025
app.dataLoading = true;
10201026
let values = Object.assign({}, {
10211027
start: "",
@@ -1040,7 +1046,7 @@ <h2>Comparing <span id="stat-header">{{stat}}</span> between <span id="before">{
10401046
window.location.search = params.toString();
10411047
}
10421048

1043-
loadState(makeData);
1049+
app.mount('#app');
10441050
</script>
10451051
</body>
10461052

0 commit comments

Comments
 (0)