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

Optimize stats code

Browse source
This commit is contained in:
shwin0901 2020-05-15 22:51:43 +08:00
parent e4edbb6994
commit c5b956b0ff
5 changed files with 73 additions and 133 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
extension/libs/barChart.js
View file

@ -25,11 +25,6 @@ function barChart({ margin, height, width, data, selector,color,}) {
let x = d3.scaleLinear()
.domain([0, d3.max(data, d => d.value)])
.range([margin.left, width - margin.right])
// .domain(d3.range(data.length))
// .range([margin.left, width - margin.right])
// .padding(0.1);
// let format = x.tickFormat(20);
const svg = d3.select(selector)
.append("svg")
@ -54,7 +49,7 @@ function barChart({ margin, height, width, data, selector,color,}) {
.html(`<span>${d.value}</span>`)
.style('width', `${tooltipWidth}px`)
.style('left', x(d.value) + 5 + "px")
.style('top', y(i)+y.bandwidth() / 6 - tooltipWidth / 6 + "px")
.style('top', y(i)+y.bandwidth() / 2 - tooltipWidth / 3 + "px")
})
.on("mouseout", function (d, i) {
tooltip.remove();

2
extension/libs/charts.css
View file

@ -10,7 +10,7 @@
text-align: center;
}
.char-histogram rect:hover {
#chart rect:hover {
fill: rgb(255, 157, 0);
}

1
extension/stats/index.css
View file

@ -44,7 +44,6 @@ li {
width: 8px;
height: 8px;
border-radius: 50%;
/* background-color: black; */
}
.showText li {
display: flex;

32
extension/stats/index.html
View file

@ -34,38 +34,6 @@
</div>
<div class="showText" style=" padding: 10px;">
<ol style="display: flex; justify-content: space-around;">
<li> <span class="color-block"></span>
<span class="lang"></span>
<span class="percent"></span>
</li>
<li> <span class="color-block"></span>
<span class="lang"></span>
<span class="percent"></span>
</li>
<li> <span class="color-block"></span>
<span class="lang"></span>
<span class="percent"></span>
</li>
<li> <span class="color-block"></span>
<span class="lang"></span>
<span class="percent"></span>
</li>
<li> <span class="color-block"></span>
<span class="lang"></span>
<span class="percent"></span>
</li>
<li> <span class="color-block"></span>
<span class="lang"></span>
<span class="percent"></span>
</li>
<li> <span class="color-block"></span>
<span class="lang"></span>
<span class="percent"></span>
</li>
<li> <span class="color-block"></span>
<span class="lang"></span>
<span class="percent"></span>
</li>
</ol>
</div>
</div>

164
extension/stats/index.js
View file

@ -1,16 +1,34 @@
let history = JSON.parse(localStorage.getItem("history"));
let colorRange = "#F9BB2D";
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);
let stats = [{ name: "docsss", value: 0, color: "#f00" }, { name: "docss", value: 0, color: "#ff00af" }, { name: "docs", value: 0, color: "#b600ff" }, { name: "%", value: 0, color: "#3400ff" }, { name: ">", value: 0, color: "#0944ff" }, { name: "@", value: 0, color: "#00f2ff" }, { name: "#", value: 0, color: "#00ff2d" }, { name: "text", value: 0, color: "#ffa600" }]
function num(start, end, initial = 0) {
return Array.from({ length: end + 1 - start }).fill(initial)
.reduce((obj, current, index) => {
obj[start + index] = current;
return obj;
}, {});
};
let stats = [
// { name: "Repository", prefix: "!!!", value: 0, color: "#f00" },
{ name: "Docs", prefix: "!!", value: 0, color: "#ff00af" },
{ name: "Crates", prefix: "!", value: 0, color: "#b600ff" },
{ name: "Book", prefix: "%", value: 0, color: "#3400ff" },
{ name: "Lint", prefix: ">", value: 0, color: "#0944ff" },
{ name: "Crate docs", prefix: "@", value: 0, color: "#00f2ff" },
{ name: "Attribute", prefix: "#", value: 0, color: "#00442d" },
{ name: "Std docs", prefix: "", value: 0, color: "#ffa600" },
];
let calendarData = [];
let barChartObj = {}; //bar-chart(url)
let w = Object.keys(weeks);
let d = Object.keys(dates);
let h = Object.keys(hours);
history.forEach(({ time }) => {
history.forEach(({ query, content, time }) => {
let date = new Date(time);
calendarData.push({
date,
@ -19,37 +37,35 @@ history.forEach(({ time }) => {
weeks[w[date.getDay()]] += 1;
dates[d[date.getDate() - 1]] += 1;
hours[h[date.getHours()]] += 1;
//chart-heatmap
let stat = stats.find(item => query.startsWith(item.prefix));
if (stat) {
stat.value += 1;
}
// bar-chart(url)
if (["https://docs.rs", "https://crates.io", "https://lib.rs"].some(prefix => content.startsWith(prefix))) {
let url = new URL(content);
let pathname = url.pathname.replace("/crates/", "/").slice(1);
let [crate, _] = pathname.split("/");
if (barChartObj[crate]) {
barChartObj[crate] += 1;
} else {
barChartObj[crate] = 1;
}
}
});
let [weeksData, datesData, hoursData] = [weeks, dates, hours].map(data => {
return Object.entries(data).map(([key, value]) => { return { name: key, value } })
});
history.forEach(({ query }) => {
if (query.startsWith("!!!")) {
stats[0].value += 1
} else if (query.startsWith("!!")) {
stats[1].value += 1
} else if (query.startsWith("!")) {
stats[2].value += 1
} else if (query.startsWith("%")) {
stats[3].value += 1
} else if (query.startsWith(">")) {
stats[4].value += 1
} else if (query.startsWith("@")) {
stats[5].value += 1
} else if (query.startsWith("#")) {
stats[6].value += 1
} else {
stats[7].value += 1
}
})
let heatmap = calendarHeatmap()
.data(calendarData)
.selector('.chart-heatmap')
.tooltipEnabled(true)
.colorRange(['#f4f7f7', colorRange])
.colorRange(['#f4f7f7', chartColor])
.tooltipUnit([
{ min: 0, unit: 'searching' },
{ min: 1, max: 1, unit: 'searching' },
@ -61,48 +77,33 @@ let heatmap = calendarHeatmap()
});
heatmap();
function num(start, end) {
let obj = {};
for (let i = start; i <= end; i++) {
obj[i] = 0;
}
return obj;
let histogramConfig = {
width: 550,
height: 320,
color: chartColor,
margin: { top: 30, right: 0, bottom: 40, left: 40 }
};
histogram({
selector: ".chart-histogram-week",
data: weeksData,
width: 550,
height: 320,
color: "#F9BB2D",
margin: { top: 30, right: 0, bottom: 40, left: 40 },
...histogramConfig,
});
histogram({
selector: ".chart-histogram-date",
data: datesData,
width: 550,
height: 320,
color: "#F9BB2D",
margin: { top: 30, right: 0, bottom: 40, left: 40 },
...histogramConfig,
});
histogram({
selector: ".chart-histogram-hour",
data: hoursData,
width: 550,
height: 320,
color: "#F9BB2D",
margin: { top: 30, right: 0, bottom: 40, left: 40 },
...histogramConfig,
});
let spans = document.querySelector(".lang-stats-graph");
let showText = document.querySelector(".showText");
let lang = showText.querySelectorAll(".lang");
let percent = showText.querySelectorAll(".percent");
let colorBlock = showText.querySelectorAll(".color-block")
let ol = showText.querySelector("ol");
function byField(key) {
return function (a, b) {
if (b[key] > a[key]) {
@ -112,61 +113,38 @@ function byField(key) {
}
}
}
let sort = stats.sort(byField("value"))
let sort = stats.sort(byField("value"));
let sum = sort.reduce((item, { value }) => {
return item + value
}, 0)
}, 0);
for (let i = 0; i < sort.length; i++) {
lang[i].textContent = `${sort[i].name}`;
percent[i].textContent = `${(sort[i].value / sum * 100).toFixed(1)} %`;
colorBlock[i].style.backgroundColor = `${sort[i].color}`;
if (sort[i].value == 0) {
null;
} else {
let p = document.createElement("span");
p.style.width = `${sort[i].value / sum * 100}` + "%";
p.style.backgroundColor = `${sort[i].color}`;
p.classList = "show";
spans.append(p);
}
}
let datar = {};
history.forEach(({content}) => {
if (["https://docs.rs", "https://crates.io","https://lib.rs"].some(prefix => content.startsWith(prefix))){
let url = new URL(content);
let pathname = url.pathname.replace("/crates/", "/").slice(1);
let [crate, __] = pathname.split("/");
if(datar[crate]) {
datar[crate] += 1;
} else {
datar[crate] = 1;
}
sort.forEach(({ name, color, value }) => {
let li = document.createElement("li");
li.innerHTML = `<span class="color-block" style="background-color:${color}"></span>
<span class="">${name}</span>
<span class="">${(value / sum * 100).toFixed(1)}%<span>`;
ol.append(li);
if (value > 0) {
spans.insertAdjacentHTML('beforeend', `<span class="show" style="width: ${value / sum * 100}%;
background-color:${color}"></span>`);
}
})
let arr = [];
for(let i in datar) {
arr.push({
name: i,
value: `${datar[i]}`
})
}
let datat = arr.sort(byField("value"));
datat.splice(10);
datat[0].value = 16;
let barChartArr = [];
Object.entries(barChartObj).map(([key, value]) => {
barChartArr.push({
name: key,
value
});
});
let barChartData = barChartArr.sort(byField("value"));
barChartData.splice(10);
barChart({
margin: ({ top: 30, right: 0, bottom: 10, left: 30 }),
height: 320,
barHeight: 25,
width: 750,
data: datat,
data: barChartData,
selector: ".bar-chart",
color: "#F9BB2D",
})
});