Mirrors/rust-search-extension
2
0
Fork 0
mirror of https://github.com/huhu/rust-search-extension synced 2024-11-15 08:07:08 +00:00
Code Issues Projects Releases Packages Wiki Activity

Use balloon.css to clarify stats metrics

Browse source
This commit is contained in:
shwin0901 2020-05-30 23:38:02 +08:00
parent 85aeee57f9
commit fc573e1441
4 changed files with 23 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
extension/libs/balloon.min.css vendored Normal file
View file

File diff suppressed because one or more lines are too long

9
extension/stats/index.css
View file

@ -30,9 +30,11 @@ h3 {
border-radius: 50%;
}
.search-stats-text li {
list-style: none;
}
.search-stats-text div {
display: flex;
align-items: center;
list-style: none;
}
.search-stats-text span {
padding: 3px;
@ -46,6 +48,7 @@ h3 {
fill: rgb(255, 157, 0);
}
.appendix {
color: #666;
padding: 5px;
font-size: 20px;
border: none;
outline: none;
}

9
extension/stats/index.html
View file

@ -11,6 +11,7 @@
<script type="text/javascript" src="../libs/charts.js"></script>
<link rel="stylesheet" href="../libs/calendar-heatmap.css">
<link rel="stylesheet" href="../libs/balloon.min.css">
<link rel="stylesheet" href="../libs/charts.css">
<link rel="stylesheet" href="../generic.css">
<link rel="stylesheet" href="index.css">
@ -31,6 +32,8 @@
</div>
<div class="search-time" style="text-align: center;font-size: 20px;">
<b>0</b> searches in total since the first day, approximately saved <b>0 seconds.</b>
<button aria-label="We consider one search save 5 seconds in average, just an estimated value."
data-balloon-pos="up" data-balloon-length="medium" class="appendix">[i]</button>
</div>
<div id="chart">
<div style="padding: 30px 0;">
@ -41,7 +44,7 @@
</ol>
</div>
</div>
<div style="display: flex; flex-direction: row-reverse; align-items: flex-start; padding: 30px 0;">
<div style="display: flex; flex-direction: row-reverse; align-items: flex-start; padding-top: 30px;">
<div>
<div class="" style="padding-bottom: 20px;">
<h3>Searches per weekday</h3>
@ -64,10 +67,6 @@
</div>
</div>
</div>
<hr>
<div class="appendix">
<div id="appendix1"><small>1. We consider one search save 5 seconds in average, just an estimated value.</small></div>
</div>
</div>
</div>
</body>

22
extension/stats/index.js
View file

@ -12,12 +12,12 @@ function makeNumericKeyObject(start, end, initial = 0) {
}
let stats = [
{ name: "Std docs", pattern: null, value: 0, color: "#ffa600" },
{ name: "External docs", pattern: /^[~@].*/i, value: 0, color: "#ff00af" },
{ name: "Crates", pattern: /^!.*/i, value: 0, color: "#b600ff" },
{ name: "Attribute", pattern: /^#.*/i, value: 0, color: "#00442d" },
{ name: "Error code", pattern: /e\d{2,4}$/i, value: 0, color: "#dd4814" },
{ name: "Others", pattern: /^[>%].*/i, value: 0, color: "#ededed" },
{ name: "Std docs", pattern: null, value: 0, color: "#ffa600", description: "Std docs!"},
{ name: "External docs", pattern: /^[~@].*/i, value: 0, color: "#ff00af", description: "External docs"},
{ name: "Crates", pattern: /^!.*/i, value: 0, color: "#b600ff", description: "Crates"},
{ name: "Attribute", pattern: /^#.*/i, value: 0, color: "#00442d", description: "Attribute"},
{ name: "Error code", pattern: /e\d{2,4}$/i, value: 0, color: "#dd4814", description: "Error code"},
{ name: "Others", pattern: /^[>%].*/i, value: 0, color: "#ededed", description: "Others"},
];
let calendarData = [];
let topCratesData = {};
@ -157,11 +157,13 @@ stats.sort((a, b) => {
if (a.name === "Others" || b.name === "Others") return 0;
return b.value - a.value;
});
stats.forEach(({ name, color, value }) => {
stats.forEach(({ name, color, value, description }) => {
let li = document.createElement("li");
li.innerHTML = `<span class="color-block" style="background-color:${color}"></span>
<span class="">${name}</span>
<span class="">${(value / history.length * 100).toFixed(1)}%<span>`;
li.innerHTML = `<div aria-label="${description}" data-balloon-pos="up">
<span class="color-block" style="background-color:${color}"></span>
<span class="">${name}</span>
<span class="">${(value / history.length * 100).toFixed(1)}%</span>
</div>`;
ol.append(li);
if (value > 0) {
searchStatsGraph.insertAdjacentHTML('beforeend', `<span class="show" style="width: ${value / history.length * 100}%;