[Web App] WaniKani History + Timemachine

Thanks! I’ll finish that and a few other little things and get the PR submitted tomorrow morning (in around 12-14h) :slight_smile:

3 Likes

Can’t you delete the element in the actual HTML to prevent the code inside the if statement from executing? My apologies for not being able to test.

I got an email from my University’s Japanese professor concerning placement, so I had to deal with that

1 Like

Yeah, that’s what I did! No errors in the console or in the functionality, so I’m assuming it’s fine.

Obviously, that has to come first! No problem.

1 Like

PR for the header and settings submitted!
I’m going to hold off on the large screen improvements until you have a chance to implement the sub pages, because some of the changes will be dependant on things like the number of columns on each page. Good luck with it!

1 Like

Then I can now continue working through my to-do-list now. Great job!

1 Like

It’s finally here
image
When averaged it shows the counts of all items used for the calculation (for example here over 10 days).

Fixed
medianLine

I removed the one day snapshot completely :sweat_smile: I learn from mistakes so whatever. But you can now use your arrow keys to cycle through the days on all the charts where dates are used.
arrows

3 Likes

Honestly awesome. I’m not finding the words to express how much I both respect what you’ve done here and am grateful for the time and effort you’ve put into this. It’s my favorite use of the api and I’ll probably be looking at it daily for the next couple years :sweat_smile:

Thank you :pray:
And if I think of any more suggestions for data visualization or ui changes I’ll let you know :upside_down_face:

2 Likes

I’m really glad you enjoy it! Thank you for you warm-hearted reply :smiling_face: I really hope to do something good for this community because everyone was so welcoming and nice to me since the first day but obviously I also like looking at stats myself (like everyone does, I’m sure) so that’s why I started this in the first place! And also, I’ll be happy to implement any suggestions you give me, all the ones that you had up to this point were top notch. :grin:

5 Likes

I was thinking it might be nice for the black lines on the charts:
image
in dark mode to be white or some other light colour instead, right now in dark mode they’re very hard to see even though imo they’re pretty important as the total/average!
If you like I can change them when (once you’re done with splitting the website into a couple of pages) I do the wide-screen styling, although I’m less sure how to change their colour in the hover box:
image
So maybe if you get a chance you could take a look at either just that or also the actual lines? :smiley:

2 Likes

Deep into the chart HTML structure the tooltip colors can be changed:

So it would work with only css, I think. I can do that, now that I’m already on to it!

1 Like

Ah - you’re right, I’d missed it because of how it only appears when the tooltip is actually open! (I assumed it would always be there but just with display:none or something, I didn’t think about how it would probably be toggled with JS lol)
Thanks :slight_smile:

1 Like

This is how it will look:

darkmode

Do you think this code is good practice?

.dark-mode .google-visualization-tooltip-item-list [style="background-color:#000000;"] {
	background-color: white !important;
}

.dark-mode svg[aria-label="A chart."] [stroke="#000000"] {
	stroke: white;
}

.dark-mode svg[aria-label="A chart."] [fill="#000000"] {
	fill: white;
}

Should I really use the svg aria-label “A chart.” to find all the charts, or should I just leave that part out?

3 Likes

Looks great, much easier to see!

I imagine it probably isn’t the best practice, but I also think it’s probably the best way to do it in this case! If it doesn’t seem to have broken anything (which I don’t think it should have?) it looks good :slight_smile:
I’m definitely not an expert at CSS by any means though, so don’t take my word for it lol

1 Like

I just wanted to say thanks for improving it even more! Im enjoying both the improvements to the stats and also the coding discussions here (although front end is really not my thing :smiley: )

The only possible request thats on my mind is perhaps some flag (oh yea, i love checkboxes) that changes “accuracy info” (maybe even “review info”?) section from radical/kanji/vocab as it is now and stages (app/guru/master/enlighten) accuracy? Im currently using the one from “Wanikani workload graph” for those, but that one is simply not as cool looking :smiley: (you cant even select a day and hover, its just graph). I think its kind of cool seeing how some cathegories get worse/better over time.

although pink, purple and blue are used for both kanji/vocab/radical and app/guru/master/enlight, its actually entirely different graph

stages graph from Wanikani workload graph


item graph from your website


2 Likes

I’ve made another pull request, with a couple of small CSS fixes (margins & changed Wall of Fame/Shame “All” items back to black, because if they’re white then the text is invisible) and the ability to click on Wall of Fame/Shame items to take you to the relevant WaniKani page!

1 Like

Ah - also, just so you know, since your last update the Level Info median line setting seems to have inverted (shows it when set to not show it and vice-versa), I had a quick look but couldn’t work out why!

1 Like

I fixed that! It just forgot the exclamation mark when using the bool.

I saw that you removed this line:

.dark-mode svg[aria-label="A chart."] [fill="#000000"] {
	fill: white;
}

But it is important for filling the selection circle on the chart with white in dark mode
image

Also you added this “path” in here:

.dark-mode svg[aria-label="A chart."] path[stroke="#000000"] {
	stroke: white;
}

But this line actually also serves the function to fill the line around the selection point white in dark mode which would be gone when only considering path elements.
image

But the rest seems fine, thanks!

1 Like

Good point. The problem is that that makes the Wall of Shame/Fame “All” bars also white, which makes the text invisible. Would adding circle to the CSS rule work to prevent that?

.dark-mode svg[aria-label="A chart."] circle[fill="#000000"] {
	fill: white;
}

Ah yep, I hadn’t noticed that!

1 Like

I think the white for the wall of shame/fame isn’t so bad in dark mode. I changed the text to black though so that it is readable.


1 Like

As long as the text is black then it’s fine like you say! I just meant that as it is currently the text is invisible :slight_smile:

1 Like