Add a new option to display contest info.

[laporchen]

We could display user contest records with LeetCode-Query.
Maybe it could show the status like LeetCode User page.

Or just lists out recent contest rank like recent activities.

[JacobLinCool]

@laporchen
Thanks for your advice.

I would like to add an extension about contest ranking history in the future.

In the latest refactoring, the data layer now fetches the contest information by default (us).

For now, my plan is to use d3 for plotting the curve, but I am not familiar with it.

Please feel free to open a PR (or draft PR) if you want to contribute something like that.

Thanks!

The data fetching function:

LeetCode-Stats-Card/src/core/query.ts

Lines 6 to 95 in 7a0c2c2

	async us(username: string): Promise<FetchedData> {
	const lc = new LeetCode();
	const { data } = await lc.graphql({
	operationName: "data",
	variables: { username },
	query: `
	query data($username: String!) {
	problems: allQuestionsCount {
	difficulty
	count
	}
	user: matchedUser(username: $username) {
	username
	profile {
	realname: realName
	about: aboutMe
	avatar: userAvatar
	skills: skillTags
	country: countryName
	ranking
	}
	submits: submitStats {
	ac: acSubmissionNum { difficulty count }
	}
	}
	submissions: recentSubmissionList(username: $username, limit: 10) {
	id
	title
	slug: titleSlug
	time: timestamp
	status: statusDisplay
	lang
	}
	contest: userContestRanking(username: $username) {
	rating
	ranking: globalRanking
	badge {
	name
	}
	}
	}`,
	});
	if (!data?.user) {
	throw new Error("User Not Found");
	}
	const result: FetchedData = {
	profile: {
	username: data.user.username,
	realname: data.user.profile.realname,
	about: data.user.profile.about,
	avatar: data.user.profile.avatar,
	skills: data.user.profile.skills,
	country: data.user.profile.country,
	},
	problem: {
	easy: {
	solved:
	data.user.submits.ac.find((x: any) => x.difficulty === "Easy")?.count || 0,
	total: data.problems.find((x: any) => x.difficulty === "Easy")?.count || 0,
	},
	medium: {
	solved:
	data.user.submits.ac.find((x: any) => x.difficulty === "Medium")?.count ||
	0,
	total: data.problems.find((x: any) => x.difficulty === "Medium")?.count || 0,
	},
	hard: {
	solved:
	data.user.submits.ac.find((x: any) => x.difficulty === "Hard")?.count || 0,
	total: data.problems.find((x: any) => x.difficulty === "Hard")?.count || 0,
	},
	ranking: data.user.profile.ranking,
	},
	submissions: data.submissions.map((x: any) => ({
	...x,
	time: parseInt(x.time) * 1000,
	})),
	contest: data.contest
	? {
	rating: data.contest.rating,
	ranking: data.contest.ranking,
	badge: data.contest.badge?.name || "",
	}
	: undefined,
	};
	return result;
	}

[JacobLinCool]

It seems that D3 will not be an option since it can not work without DOM and JSDOM needs more than 20ms to initialize the instance.

[JacobLinCool]

@laporchen

I have created an extension of contest rating history and both of README and DEMO have been updated.

You may notice that the example in README is not me because I don't have enough contest data to show a meaningful graph.

Feel free to tell me about your comment on the extension, thanks!

[laporchen]

@JacobLinCool

I tried to make some small changes to this extension. But I'm not sure about the method to test this locally.
I assume is to change account_id in wrangler.toml and run npm dev.
But the process is exited due to the address is in use.
Not sure the exactly way to test this.

Here's the error message if you're interested in.

/Users/laporchen/Documents/Code/LeetCode-Stats-Card/node_modules/wrangler/wrangler-dist/cli.js:20495
            throw ex;
            ^

Error: listen EADDRINUSE: address already in use :::8976
    at Server.setupListenHandle [as _listen2] (node:net:1330:16)
    at listenInCluster (node:net:1378:12)
    at Server.listen (node:net:1465:7)
    at /Users/laporchen/Documents/Code/LeetCode-Stats-Card/node_modules/wrangler/wrangler-dist/cli.js:116922:12
    at new Promise (<anonymous>)
    at login (/Users/laporchen/Documents/Code/LeetCode-Stats-Card/node_modules/wrangler/wrangler-dist/cli.js:116866:24)
    at async loginOrRefreshIfRequired (/Users/laporchen/Documents/Code/LeetCode-Stats-Card/node_modules/wrangler/wrangler-dist/cli.js:116847:33)
    at async requireLoggedIn (/Users/laporchen/Documents/Code/LeetCode-Stats-Card/node_modules/wrangler/wrangler-dist/cli.js:117085:20)
    at async fetchInternal (/Users/laporchen/Documents/Code/LeetCode-Stats-Card/node_modules/wrangler/wrangler-dist/cli.js:117044:3)
    at async fetchResult (/Users/laporchen/Documents/Code/LeetCode-Stats-Card/node_modules/wrangler/wrangler-dist/cli.js:117116:16)
Emitted 'error' event on Server instance at:
    at emitErrorNT (node:net:1357:8)
    at processTicksAndRejections (node:internal/process/task_queues:83:21) {
  code: 'EADDRINUSE',
  errno: -48,
  syscall: 'listen',
  address: '::',
  port: 8976
}

[JacobLinCool]

@laporchen

npm run dev (or pnpm dev) is the correct way to run a dev server.

It seems that the port (8976) has been used by another program (or maybe another wrangler?)

Can you run node -v and wrangler -v to show the version of node and wrangler?

My environment:

❯ node -v
v16.13.1
❯ wrangler -v
2.0.6

wrangler's issues: https://github.com/cloudflare/wrangler2/issues?q=is%3Aissue+8976+is%3Aclosed

[laporchen]

Just checked the versions

❯ node -v
v16.14.0
❯ wrangler -v

Delegating to locally-installed version of wrangler @ v2.0.15
2.0.15

And I noticed that wrangle dev tries to login two times at the same time. Maybe this is why the address is in use?
This is the first part of the output of npm run dev

⬣ Listening at http://localhost:8787
Total Upload: 236.46 KiB / gzip: 136.65 KiB
Attempting to login via OAuth...
Opening a link in your default browser: https://removed-the-link-address-and-heres-the-mockup
Attempting to login via OAuth...
Opening a link in your default browser: https://removed-the-link-address-and-heres-the-mockup
...

[JacobLinCool]

@laporchen

Maybe the problem will be solved if you login (wrangler login) before starting the dev server?

[laporchen]

@JacobLinCool
Yeah, that was the problem.

Now I'm trying to make animation for the graph and show contest name on each points when hover on it.
But it seems polyline does not support these stuffs.
I tried animate tag to make animation but the result is mediocre and will start animation before it fades in.

The alternative solution I'm looking for right now may be chart.js.
Chart.js seems to solve the both problems above. But I'm not sure can it work with the Item class or not.

[JacobLinCool]

@laporchen

Um... I don't think chart.js (or other alternatives, such as echart) will be a solution.

Let me explain about some restrictions of SVG on GitHub:

1. No JavaScript. The restriction is not only being applied on GitHub, all SVG file in <img> tag will not be able to execute JavaScript because of security problems.
2. No external resources. All images, fonts and other assets must be inlined into the SVG itself because of the GitHub CSP.

As far as I know, all chart libraries are using JavaScript to make animations work. So, they are all not an option for our use case.
Currently the animation system is sucks. So we may have to design a good enough, extendable, and CSS only animation system.
You may want to see my opinion in #51.

Also, the hover state is not detectable if the SVG is loaded into <img> tag, so we cannot apply :hover effect to the card. So sad, I know.

If I misunderstand something, please let me know, thanks.

[laporchen]

Understand.
I think this extension is good right now.
It's pretty neat.

I'm not familiar with CSS animations. I might need to look into it a bit more before trying something else for now.