1
0
mirror of https://github.com/toast-ts/Daggerbot-TS.git synced 2024-11-17 08:20:58 -05:00

Enlargen the canvas for ranking, add dark mode if needed.

This commit is contained in:
AnxietyisReal 2023-03-18 21:00:18 +11:00
parent 3330ead022
commit cbe60b8cec
2 changed files with 13 additions and 13 deletions

View File

@ -115,7 +115,7 @@ export default {
const graphOrigin = [15, 65]; const graphOrigin = [15, 65];
const graphSize = [1300, 630]; const graphSize = [1300, 630];
const nodeWidth = graphSize[0] / (data.length - 1); const nodeWidth = graphSize[0] / (data.length - 1);
ctx.fillStyle = '#36393f'; ctx.fillStyle = '#36393f'; //'#111111';
ctx.fillRect(0, 0, img.width, img.height); ctx.fillRect(0, 0, img.width, img.height);
// grey horizontal lines // grey horizontal lines
@ -134,18 +134,18 @@ export default {
const previousY: Array<number> = []; const previousY: Array<number> = [];
ctx.strokeStyle = '#202225'; ctx.strokeStyle = '#202225'; //'#555B63';
for (let i = 0; i <= chosen_interval[1]; i++) { for (let i = 0; i <= chosen_interval[1]; i++) {
const y = graphOrigin[1] + graphSize[1] - (i * (chosen_interval[0] / second_graph_top) * graphSize[1]); const y = graphOrigin[1] + graphSize[1] - (i * (chosen_interval[0] / second_graph_top) * graphSize[1]);
if (y < graphOrigin[1]) continue; if (y < graphOrigin[1]) continue;
const even = ((i + 1) % 2) === 0; const even = ((i + 1) % 2) === 0;
if (even) ctx.strokeStyle = '#2c2f33'; if (even) ctx.strokeStyle = '#2c2f33'; //'#3E4245';
ctx.beginPath(); ctx.beginPath();
ctx.lineTo(graphOrigin[0], y); ctx.lineTo(graphOrigin[0], y);
ctx.lineTo(graphOrigin[0] + graphSize[0], y); ctx.lineTo(graphOrigin[0] + graphSize[0], y);
ctx.stroke(); ctx.stroke();
ctx.closePath(); ctx.closePath();
if (even) ctx.strokeStyle = '#202225'; if (even) ctx.strokeStyle = '#202225'; //'#555B63';
previousY.push(y, i * chosen_interval[0]); previousY.push(y, i * chosen_interval[0]);
} }

View File

@ -48,13 +48,13 @@ export default {
const second_graph_top = Math.ceil(maxValue * 10 ** (-maxValueArr.length + 2)) * 10 ** (maxValueArr.length - 2); const second_graph_top = Math.ceil(maxValue * 10 ** (-maxValueArr.length + 2)) * 10 ** (maxValueArr.length - 2);
const textSize = 32; const textSize = 32;
const img = canvas.createCanvas(950, 450); const img = canvas.createCanvas(1200, 600);
const ctx = img.getContext('2d'); const ctx = img.getContext('2d');
const graphOrigin = [10, 50]; const graphOrigin = [25, 50];
const graphSize = [700, 360]; const graphSize = [1020, 500];
const nodeWidth = graphSize[0] / (data.length - 1); const nodeWidth = graphSize[0] / (data.length - 1);
ctx.fillStyle = '#36393f'; ctx.fillStyle = '#36393f'; //'#111111';
ctx.fillRect(0, 0, img.width, img.height); ctx.fillRect(0, 0, img.width, img.height);
// grey horizontal lines // grey horizontal lines
@ -72,18 +72,18 @@ export default {
const chosen_interval = interval_candidates.sort((a, b) => b[2] - a[2])[0]; const chosen_interval = interval_candidates.sort((a, b) => b[2] - a[2])[0];
let previousY: Array<number> = []; let previousY: Array<number> = [];
ctx.strokeStyle = '#202225'; ctx.strokeStyle = '#202225'; //'#555B63';
for (let i = 0; i <= chosen_interval[1]; i++) { for (let i = 0; i <= chosen_interval[1]; i++) {
const y = graphOrigin[1] + graphSize[1] - (i * (chosen_interval[0] / second_graph_top) * graphSize[1]); const y = graphOrigin[1] + graphSize[1] - (i * (chosen_interval[0] / second_graph_top) * graphSize[1]);
if (y < graphOrigin[1]) continue; if (y < graphOrigin[1]) continue;
const even = ((i + 1) % 2) === 0; const even = ((i + 1) % 2) === 0;
if (even) ctx.strokeStyle = '#2c2f33'; if (even) ctx.strokeStyle = '#2c2f33'; //'#3E4245';
ctx.beginPath(); ctx.beginPath();
ctx.lineTo(graphOrigin[0], y); ctx.lineTo(graphOrigin[0], y);
ctx.lineTo(graphOrigin[0] + graphSize[0], y); ctx.lineTo(graphOrigin[0] + graphSize[0], y);
ctx.stroke(); ctx.stroke();
ctx.closePath(); ctx.closePath();
if (even) ctx.strokeStyle = '#202225'; if (even) ctx.strokeStyle = '#202225'; //'#555B63';
previousY = [y, i * chosen_interval[0]]; previousY = [y, i * chosen_interval[0]];
} }
@ -100,7 +100,7 @@ export default {
// draw points // draw points
ctx.strokeStyle = client.config.embedColor as string; ctx.strokeStyle = client.config.embedColor as string;
ctx.fillStyle = client.config.embedColor as string; ctx.fillStyle = client.config.embedColor as string;
ctx.lineWidth = 3; ctx.lineWidth = 4;
function getYCoordinate(value: number) { function getYCoordinate(value: number) {
return ((1 - (value / second_graph_top)) * graphSize[1]) + graphOrigin[1]; return ((1 - (value / second_graph_top)) * graphSize[1]) + graphOrigin[1];
@ -137,7 +137,7 @@ export default {
// lowest value // lowest value
const lowx = graphOrigin[0] + graphSize[0] + textSize; const lowx = graphOrigin[0] + graphSize[0] + textSize;
const lowy = graphOrigin[1] + graphSize[1] + (textSize / 3); const lowy = graphOrigin[1] + graphSize[1] + (textSize / 3);
ctx.fillText('0 msgs/day', lowx, lowy); ctx.fillText('0 msgs', lowx, lowy);
// 30d // 30d
ctx.fillText('30d ago', lastMonthStart, graphOrigin[1] - (textSize / 3)); ctx.fillText('30d ago', lastMonthStart, graphOrigin[1] - (textSize / 3));