solved.ac에서 차트를 여러 개 띄울 수 있게 해주는 유저스크립트
// ==UserScript==
// @name Multiple graph for solved.ac
// @version 0.1
// @description solved.ac에서 차트를 여러 개 띄울 수 있게 해주는 유저스크립트
// @author cgiosy
// @match https://solved.ac/*
// @grant none
// @namespace https://greatest.deepsurf.us/users/438284
// ==/UserScript==
function main() {
const myId = location.href.split('/')[3];
expLineChart.data.datasets[0].label = myId;
rankLineChart.data.datasets[0].label = myId;
const expDataMap = {
[myId]: expLineChart.data.datasets[0]
};
const rankDataMap = {
[myId]: rankLineChart.data.datasets[0]
};
const nextScoreFactor = 1.2;
const getBackgroundRules = (score) => [
{backgroundColor:"#222222", yAxisSegement: 0},
{backgroundColor:"#999999", yAxisSegement: 10},
{backgroundColor:"#c39466", yAxisSegement: 9600},
{backgroundColor:"#cd9966", yAxisSegement: 20544},
{backgroundColor:"#d89e66", yAxisSegement: 43532},
{backgroundColor:"#e2a366", yAxisSegement: 88188},
{backgroundColor:"#eca966", yAxisSegement: 168558},
{backgroundColor:"#8a99a7", yAxisSegement: 302518},
{backgroundColor:"#8e9faf", yAxisSegement: 500778},
{backgroundColor:"#92a4b6", yAxisSegement: 790218},
{backgroundColor:"#96aabd", yAxisSegement: 1207018},
{backgroundColor:"#9ab0c5", yAxisSegement: 1798878},
{backgroundColor:"#e5b966", yAxisSegement: 2834653},
{backgroundColor:"#f3c266", yAxisSegement: 4274353},
{backgroundColor:"#ffcb66", yAxisSegement: 6261153},
{backgroundColor:"#ffd466", yAxisSegement: 8983078},
{backgroundColor:"#ffde66", yAxisSegement: 12684878},
{backgroundColor:"#7be0be", yAxisSegement: 18704018},
{backgroundColor:"#7dedc8", yAxisSegement: 26829878},
{backgroundColor:"#7ffbd2", yAxisSegement: 37759148},
{backgroundColor:"#82ffdc", yAxisSegement: 52404368},
{backgroundColor:"#84ffe5", yAxisSegement: 71955728},
{backgroundColor:"#66c7ee", yAxisSegement: 106626808},
{backgroundColor:"#66d2fd", yAxisSegement: 152565968},
{backgroundColor:"#66dcff", yAxisSegement: 213205688},
{backgroundColor:"#66e7ff", yAxisSegement: 292946928},
{backgroundColor:"#66f2ff", yAxisSegement: 397407928},
{backgroundColor:"#d87fa1", yAxisSegement: 567809928},
{backgroundColor:"#e57fa6", yAxisSegement: 789332578},
{backgroundColor:"#f27fab", yAxisSegement: 1076204378},
{backgroundColor:"#ff7fb0", yAxisSegement: 1446268978},
{backgroundColor:"#ff7fb5", yAxisSegement: 1e100}
]; //.filter(({ yAxisSegement }) => yAxisSegement <= score * nextScoreFactor);
const getPage = (id) => fetch(`/${id}/overview`).then(res => res.text());
const getData = (id) => getPage(id).then(html => ({
expData: eval(html.match(/const expData = (\[.+?\]);/)[1]),
rankData: eval(html.match(/const rankData = (\[.+?\]);/)[1])
}));
const updateData = async(id) => {
const { expData, rankData } = await getData(id);
expDataMap[id] = {
label: id,
data: expData,
fill: false,
lineTension: 0,
backgroundColor: "#00c0ff",
borderColor: "#666",
pointBackgroundColor: "#00c0ff",
pointBorderColor: "#666"
};
rankDataMap[id] = {
label: id,
data: rankData,
fill: false,
lineTension: 0,
backgroundColor: "#00c0ff",
borderColor: "#666",
pointBackgroundColor: "#00c0ff",
pointBorderColor: "#666"
};
};
const getExpData = async(id) => {
if(expDataMap[id] === undefined) await updateData(id);
return expDataMap[id];
};
const getRankData = async(id) => {
if(rankDataMap[id] === undefined) await updateData(id);
return rankDataMap[id];
};
const addData = async(id) => {
const expData = await getExpData(id);
const rankData = await getRankData(id);
expLineChart.data.datasets.push(expData);
rankLineChart.data.datasets.push(rankData);
const ticks = expLineChart.options.scales.yAxes[0].ticks;
for(const { y } of expData.data) {
ticks.max = Math.max(ticks.max, y * nextScoreFactor);
}
};
window.updateCharts = (ids) => {
ids = ids || [];
ids.push(myId);
ids = [...new Set(ids)];
expLineChart.options.backgroundRules = getBackgroundRules();
rankLineChart.options.backgroundRules = getBackgroundRules();
expLineChart.options.hover = {
mode: 'nearest',
axis: 'x',
intersect: false
};
expLineChart.options.tooltips = {
mode: 'nearest',
axis: 'x',
intersect: false,
itemSort: (a, b, data) => b.yLabel - a.yLabel
};
expLineChart.options.scales.yAxes[0].ticks = {
max: 0,
min: 0,
beginAtZero: true,
callback: function(value, index, values) {
return formatK(Math.floor(value));
}
};
expLineChart.data.datasets = [];
rankLineChart.data.datasets = [];
Promise.all(ids.map(id => addData(id))).then(() => {
//expLineChart.$plugins.descriptors[3].plugin.beforeDraw(expLineChart);
//rankLineChart.$plugins.descriptors[3].plugin.beforeDraw(rankLineChart);
expLineChart.update();
rankLineChart.update();
});
};
document.addEventListener('keypress', (e) => {
if(e.key === 'c') {
const arr = prompt('비교할 대상을 공백으로 구분하여 입력해 주세요.').trim().split(/ +/).map(x => x.replace(/[^a-zA-Z0-9]/g, ''));
setTimeout(() => {
updateCharts(arr);
}, 100);
}
});
}
(function() {
'use strict';
const script = document.createElement('script');
script.setAttribute('type', 'text/javascript');
script.appendChild(document.createTextNode('('+ main +')();'));
document.body.appendChild(script);
})();