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

Fix review suggestions

Browse source
This commit is contained in:
shwin0901 2020-05-16 00:14:08 +08:00
parent c5b956b0ff
commit fd2c54ba3b
4 changed files with 55 additions and 58 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
extension/libs/charts.css
View file

@ -10,10 +10,6 @@
text-align: center; text-align: center;
} }
#chart rect:hover {
fill: rgb(255, 157, 0);
}
svg:not(:root) { svg:not(:root) {
overflow: initial; overflow: initial;
} }

65
extension/stats/index.css
View file

@ -1,54 +1,57 @@
* { * {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
li { li {
list-style: none; list-style: none;
} }
.logo { .logo {
padding: 40px; padding: 40px;
font-family: "Alfa Slab One", serif; font-family: "Alfa Slab One", serif;
font-size: 32px; font-size: 32px;
text-align: center; text-align: center;
display: flex; display: flex;
} }
.logo img { .logo img {
width: 60px; width: 60px;
margin: 0 25px; margin: 0 25px;
} }
.flex-layout { .flex-layout {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.show:not(:first-child) { .show:not(:first-child) {
border-left: 1px solid #ffffff; border-left: 1px solid #ffffff;
} }
.lang-stats-graph { .searching-stats-graph {
border-bottom-right-radius: 3px; border-bottom-right-radius: 3px;
border-top-right-radius: 3px; border-top-right-radius: 3px;
border-bottom-left-radius: 3px; border-bottom-left-radius: 3px;
border-top-left-radius: 3px; border-top-left-radius: 3px;
} }
.show:first-child { .show:first-child {
border-bottom-left-radius: 3px; border-bottom-left-radius: 3px;
border-top-left-radius: 3px; border-top-left-radius: 3px;
} }
.show:last-child { .show:last-child {
border-bottom-right-radius: 3px; border-bottom-right-radius: 3px;
border-top-right-radius: 3px; border-top-right-radius: 3px;
} }
.color-block { .color-block {
display: inline-block; display: inline-block;
width: 8px; width: 8px;
height: 8px; height: 8px;
border-radius: 50%; border-radius: 50%;
} }
.showText li { .showText li {
display: flex; display: flex;
align-items: center; align-items: center;
} }
.showText span { .showText span {
padding: 3px; padding: 3px;
} }
#chart rect:hover {
fill: rgb(255, 157, 0);
}

10
extension/stats/index.html
View file

@ -30,7 +30,7 @@
</div> </div>
<div id="chart"> <div id="chart">
<div style="padding: 30px 0;"> <div style="padding: 30px 0;">
<div class="lang-stats-graph" style=" height: 8px; width: 100%; display: flex;"> <div class="searching-stats-graph" style=" height: 8px; width: 100%; display: flex;">
</div> </div>
<div class="showText" style=" padding: 10px;"> <div class="showText" style=" padding: 10px;">
<ol style="display: flex; justify-content: space-around;"> <ol style="display: flex; justify-content: space-around;">
@ -38,17 +38,17 @@
</div> </div>
</div> </div>
<div class="flex-layout char-histogram"> <div class="flex-layout">
<div class="chart-histogram-week" style="position: relative;"></div> <div class="chart-histogram-week" style="position: relative;"></div>
</div> </div>
<div class="flex-layout char-histogram"> <div class="flex-layout">
<div class="chart-histogram-date" style="position: relative;"></div> <div class="chart-histogram-date" style="position: relative;"></div>
</div> </div>
<div class="flex-layout char-histogram"> <div class="flex-layout">
<div class="chart-histogram-hour" style="position: relative;"></div> <div class="chart-histogram-hour" style="position: relative;"></div>
</div> </div>
<div class="flex-layout"> <div class="flex-layout">
<div class="bar-chart" style="position: relative;box-sizing: border-box;"> <div class="bar-chart" style="position: relative;box-sizing: border-box;">
</div> </div>
</div> </div>

34
extension/stats/index.js
View file

@ -1,9 +1,9 @@
let history = JSON.parse(localStorage.getItem("history")); let history = JSON.parse(localStorage.getItem("history"));
let chartColor = "#F9BB2D"; let chartColor = "#F9BB2D";
let weeks = { "Sun": 0, "Mon": 0, "Tue": 0, "Wed": 0, "Thu": 0, "Fri": 0, "Sat": 0 }; let weeks = { "Sun": 0, "Mon": 0, "Tue": 0, "Wed": 0, "Thu": 0, "Fri": 0, "Sat": 0 };
let dates = num(1, 31); let dates = makeNumericKeyObject(1, 31);
let hours = num(0, 23); let hours = makeNumericKeyObject(0, 23);
function num(start, end, initial = 0) { function makeNumericKeyObject(start, end, initial = 0) {
return Array.from({ length: end + 1 - start }).fill(initial) return Array.from({ length: end + 1 - start }).fill(initial)
.reduce((obj, current, index) => { .reduce((obj, current, index) => {
obj[start + index] = current; obj[start + index] = current;
@ -22,7 +22,7 @@ let stats = [
{ name: "Std docs", prefix: "", value: 0, color: "#ffa600" }, { name: "Std docs", prefix: "", value: 0, color: "#ffa600" },
]; ];
let calendarData = []; let calendarData = [];
let barChartObj = {}; //bar-chart(url) let topCratesData = {}; //bar-chart(url)
let w = Object.keys(weeks); let w = Object.keys(weeks);
let d = Object.keys(dates); let d = Object.keys(dates);
@ -49,10 +49,10 @@ history.forEach(({ query, content, time }) => {
let url = new URL(content); let url = new URL(content);
let pathname = url.pathname.replace("/crates/", "/").slice(1); let pathname = url.pathname.replace("/crates/", "/").slice(1);
let [crate, _] = pathname.split("/"); let [crate, _] = pathname.split("/");
if (barChartObj[crate]) { if (topCratesData[crate]) {
barChartObj[crate] += 1; topCratesData[crate] += 1;
} else { } else {
barChartObj[crate] = 1; topCratesData[crate] = 1;
} }
} }
}); });
@ -101,7 +101,7 @@ histogram({
...histogramConfig, ...histogramConfig,
}); });
let spans = document.querySelector(".lang-stats-graph"); let spans = document.querySelector(".searching-stats-graph");
let showText = document.querySelector(".showText"); let showText = document.querySelector(".showText");
let ol = showText.querySelector("ol"); let ol = showText.querySelector("ol");
function byField(key) { function byField(key) {
@ -113,12 +113,11 @@ function byField(key) {
} }
} }
} }
let sort = stats.sort(byField("value")); let sum = stats.sort(byField("value")).reduce((item, { value }) => {
let sum = sort.reduce((item, { value }) => {
return item + value return item + value
}, 0); }, 0);
sort.forEach(({ name, color, value }) => { stats.forEach(({ name, color, value }) => {
let li = document.createElement("li"); let li = document.createElement("li");
li.innerHTML = `<span class="color-block" style="background-color:${color}"></span> li.innerHTML = `<span class="color-block" style="background-color:${color}"></span>
<span class="">${name}</span> <span class="">${name}</span>
@ -130,21 +129,20 @@ sort.forEach(({ name, color, value }) => {
} }
}) })
let barChartArr = []; topCratesData = Object.entries(topCratesData).map(([key, value]) => {
Object.entries(barChartObj).map(([key, value]) => { return {
barChartArr.push({
name: key, name: key,
value value
}); };
}); });
let barChartData = barChartArr.sort(byField("value")); topCratesData.sort(byField("value"));
barChartData.splice(10); topCratesData.splice(10);
barChart({ barChart({
margin: ({ top: 30, right: 0, bottom: 10, left: 30 }), margin: ({ top: 30, right: 0, bottom: 10, left: 30 }),
height: 320, height: 320,
barHeight: 25, barHeight: 25,
width: 750, width: 750,
data: barChartData, data: topCratesData,
selector: ".bar-chart", selector: ".bar-chart",
color: "#F9BB2D", color: "#F9BB2D",
}); });