[Web App] WaniKani History + Timemachine

Thank you, I really appreciate it!

2 Likes

That’s because by default, iPads request the desktop site but iPhones don’t. Users can always request desktop/mobile site, so if this is the only thing different between the two, you might not want to trust that.

You could add a date picker if you wanted to add a mobile-friendly / more precise input for the snapshot or add a checkbox to show the snapshot on tapping so it won’t appear unless the user wants it to


I just tried out 3.6.0 and projections finally appeared on my iPad.

However, the screenshot shows a problem with the level progressions graph. When I tap in the grey area above level 17, the input for the median line covers the entire thing, so I can’t look at the details for that.

Would there be some way you could have an option to just show as text that the median is 10d 18h (or whatever) and remove the line from the graph
 or some other option that would make it possible to see the permanently invisible information?

1 Like

@saraqael I’ve made a pull request on Github with some styling changes/fixes, mostly for dark mode (although also a couple of other small things such as alignments and the header menu). I’ve tested it and I don’t think I’ve broken anything!
No worries if you don’t want to merge it for any reason though! :slight_smile:

3 Likes

Wow, this really looks great!

Thank you so much for taking the time to do this, I really appreciate it. How couldn’t I merge this? I really like the rounded edges (I thought of doing this way back but because I overdid it it didn’t look that good, but this has a completely different appearance). Great job!

The only small thing I noticed was this:


In dark mode the bars look greyed out. But in my opinion it looks better than when they are not, so I’m just going to leave it like this :smile:

And I think I will also apply that rounded look to the settings boxes to make them fit the style
image

2 Likes

Ah yes, good point, I didn’t think to round the settings boxes!
I also noticed the lack of colour in the chart, but wasn’t really sure how to fix it. The problem with leaving it greyed out is that it might not be obvious that it’s a stacked chart if you aren’t familiar with it. So I’d probably recommend either fixing the colours or adding a title to that chart to specify what it is!

If I get some time in the next few days I might make another pull request to make the website look a bit better on large monitors :slight_smile:

1 Like

You’re right even though it doesn’t look that bad it can be confusing!

You really don’t have to. But if you insist who am I to intervene? :smiling_face: Thanks!

What is this piece of code supposed to do? Because without it the problem seems fixed. It changes colors of exactly these “g” element to grey (#d6d6d6).

.dark-mode g > g > g > rect:only-child {
	fill: #d6d6d6;
}

.dark-mode g > g > g > rect:nth-child(1):nth-last-child(2) {
	fill: #d6d6d6;
}

.dark-mode g > g > g > rect:nth-child(2):nth-last-child(1) {
	fill: #d6d6d6;
}

Which chart should this format? Because it’s not my code


That CSS is to make the edge grid lines on the charts white instead of gray or black, so that they stand out more (equivalent to the thicker black lines in light mode).


Not sure why it’s affecting anything else though, I’ll have a look now!

EDIT: Worked out how I messed it up, working out a fix now

1 Like

Fixed, I’ll submit a pull request in a minute!

2 Likes

I found a way around this to additionally check for iPads and it seems to work for my model.

Then I think I know what the mistake was. The dates that your userscript passed on were in a different weird format that depends on the device and the string wasn’t recognized as a date again when I wanted to translate it back. This was also the problem on one of my devices. I changed one thing so that your userscript passes the dates directly which presumably fixed the issue.

I did it like this (the checkbox should only appear on mobile).

Added a hide median line feature.

Edit: Oops, just realized currently it’s completely useless because the hiding is only visual:

I implemented this. The order is also saved.
image

And a bonus feature: total averages. So the averages over the whole existence time span of the user:
image

2 Likes

@saraqael Just in case you don’t get email notifications, I submitted a PR #4 to your repo.

1 Like

Nice:) Although I did encounter a bug at once: I can’t bring the 曛歗熟èȘž(よじじゅくご) up past the “Wall of X” section.

As for the one day snapshot what I had in mind was more something like this:
Screenshot 2022-06-01 9.55.19 PM

where you can see at a glance whether a high or a low accruacy score was a really good/bad performance or if it was just due to a low number of items.

I also just find this table hard to read


I can see that 100% accuracy on radicals was just from answering 1 review correctly, while 100% on kanji was from 16 reviews and 98.8% was from 79 vocab reviews, so it does make it easier than having to scroll between different graphs to make the comparison but it’s also just densly packed with all this other data with similar looking names :sweat_smile: Not that more info is a bad thing but don’t we allready get all this presented in a clearer manner in the info table?

Also: I don’t get what the average column is showing (especially for “Reviews Radical”). Average over how many days?

2 Likes

Might a reading coverage chart like the one on WKStats fit in somewhere (like the right hand column)?

1 Like

That’s because on desktop there are different columns (left and right) for certain items on desktop which shouldn’t mingle with each other. But on mobile because there isn’t as much space horizontally it is just put below it. But due to the html structure I’ve used for the columns it would be difficult and weird to have this only be switchable on mobile. (If you are on desktop you also have this behavior if your screen is less than 1800px wide; if you zoom out with Control + “-” you will also see the right side bar.)

That is already on my to-do list, I’m on it!

This is the average over all the days you were active, so the “total average” basically. So “5.3” is the average amount of radical reviews you would do on any given day where you were doing wanikani.

I thought so too, but this is what I interpreted that overview to be. Maybe I’ll change it up a bit to be more usable.

I saw that just now and for me it seems to have created the projections span again at the level chart:

Can I delete that element or should I just hide it? Because for me it seemed like deleting it didn’t cause any problems


I thought about something similar (obviously I don’t want to just copy it from WK stats). But because the amount of charts has gotten quite big, I might split the site into sub pages. And one of these sub pages could be something like Reading Coverage where you can look at charts of how much percent of certain kanji collections one can already read (also N5-N1 but additionally others like maybe genki or even famous Japanese books) just to get an idea how far one has gotten with their Japanese journey and to motivate them. Because it is sometimes surprising how fast one can actually learn kanji on WK.

2 Likes

Sounds good! Should I hold off on making stuff look better on wide screens for now then if you’re going to split the site into sub pages? (in case you change the number of columns or something) Or aren’t you going to split it quite yet?

2 Likes

If I’m done implementing the current list of requests/problems I’m going to start with the sub pages. But that could take a little while so you definitely can work on the design (thank you again for that)! Either way I won’t change the style of the website too much so I could then just apply the new style to the sub pages also.

2 Likes

@saraqael how would you feel about moving the menu bar with the links up to the top in line with the log-out button and version number something like this? (haven’t done any styling yet, wanted to check what you thought first)
I feel like they’re not nearly as important as the internal links to the different parts of the page and so they just take up unnecessary space and attention having a whole large nav bar to themselves!

2 Likes

I thought maybe the menu bar could be the sub page navigation? But I can worry about that later. The links on there were actually just placeholders in the beginning but then I just kept them. Although I think it’s time to completely remove the old website link because it is not really that important. But yeah, I think this looks better!

2 Likes

Would changing the settings boxes to appear on hover like this be fine with you? I think it would help declutter the page a bit!
hoversettings

2 Likes

You’re really working hard on this! The page already looks miles better than before. So yeah, I really like that look. :smile:

4 Likes