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;
}
#chart rect:hover {
fill: rgb(255, 157, 0);
}
svg:not(:root) {
overflow: initial;
}

65
extension/stats/index.css
View file

@ -1,54 +1,57 @@
* {
margin: 0;
padding: 0;
margin: 0;
padding: 0;
}
li {
list-style: none;
list-style: none;
}
.logo {
padding: 40px;
font-family: "Alfa Slab One", serif;
font-size: 32px;
text-align: center;
display: flex;
padding: 40px;
font-family: "Alfa Slab One", serif;
font-size: 32px;
text-align: center;
display: flex;
}
.logo img {
width: 60px;
margin: 0 25px;
width: 60px;
margin: 0 25px;
}
.flex-layout {
display: flex;
justify-content: center;
align-items: center;
display: flex;
justify-content: center;
align-items: center;
}
.show:not(:first-child) {
border-left: 1px solid #ffffff;
border-left: 1px solid #ffffff;
}
.lang-stats-graph {
border-bottom-right-radius: 3px;
border-top-right-radius: 3px;
border-bottom-left-radius: 3px;
border-top-left-radius: 3px;
.searching-stats-graph {
border-bottom-right-radius: 3px;
border-top-right-radius: 3px;
border-bottom-left-radius: 3px;
border-top-left-radius: 3px;
}
.show:first-child {
border-bottom-left-radius: 3px;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
border-top-left-radius: 3px;
}
.show:last-child {
border-bottom-right-radius: 3px;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
border-top-right-radius: 3px;
}
.color-block {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
}
.showText li {
display: flex;
align-items: center;
display: flex;
align-items: center;
}
.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 id="chart">
<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 class="showText" style=" padding: 10px;">
<ol style="display: flex; justify-content: space-around;">
@ -38,17 +38,17 @@
</div>
</div>
<div class="flex-layout char-histogram">
<div class="flex-layout">
<div class="chart-histogram-week" style="position: relative;"></div>
</div>
<div class="flex-layout char-histogram">
<div class="flex-layout">
<div class="chart-histogram-date" style="position: relative;"></div>
</div>
<div class="flex-layout char-histogram">
<div class="flex-layout">
<div class="chart-histogram-hour" style="position: relative;"></div>
</div>
<div class="flex-layout">
<div class="flex-layout">
<div class="bar-chart" style="position: relative;box-sizing: border-box;">
</div>
</div>

34
extension/stats/index.js
View file

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