[Userscript] WaniKani Dashboard Level Progress Detail 1.0+

Version 1.0.3 is out!

What’s new:

  • Re-render if cached JSON has changed (as requested by @rwesterhof)

Shockingly… I found a bug :scream:

line 130

      var top_level = level_list.find(l => l.data.abandoned_at == null && l.data.passed_at == null && l.data.unlocked_at != null).data.level;

throws a

The problem here is that I have no more levels that satisfy

l.data.passed_at == null

after hitting 90% kanji passed on level 60. Assuming level 60 if the level cannot be found makes the script work again.

PS: I added a link to this thread to the Overview of scripts as a replacement for the original Dashboard Level Progress Detail so people don’t keep getting linked to the script that no longer works out of the box

1 Like

Version 1.0.4 is out!

What’s new:

  • Bug fix for max level users (thanks @rwesterhof again)
1 Like

Still get the same error, I locally changed

var top_level = level_list.find(l => l.data.abandoned_at == null && l.data.passed_at == null && l.data.unlocked_at != null).data.level || level_list.slice(-1)[0];


var top_level = (level_list.find(l => l.data.abandoned_at == null && l.data.passed_at == null && l.data.unlocked_at != null) || level_list.slice(-1)[0]).data.level;

Yeah that makes sense - I’m blind. Fixed that!

Version 1.0.5 is out!

What’s new:

  • Fix the bug fix because I’m blind (thanks @rwesterhof yet again)
1 Like

Works perfectly! I’m well aware of how difficult it is to debug situations you can’t reproduce locally - I’ve heavily relied on others loading my scripts too…

1 Like

You can just link to a https://pastebin.com/

1 Like

Alright, so here is the modified code: Dashboard Level Progress Custom - Pastebin.com

As a quick overview:

I added a Setting “Distinguish beyond Guru”
If this is turned off, you kinda have the current version in which you have different bars for the 4 apprentice levels and then one for guru+.

If it is turned on, you get also different bars for guru I, guru II, master, enlightened and burned (however, since I don’t have enlightened / burned items yet, I couldn’t really test this… The following screenshot shows that master at least works)

I also added a new tab in the settings where you can change the color of your bars:

The default values are kind of arbitrary (they are my current colors, except I somehow messed up and added the wrong default color code to Apprentice which should have been #1d99f3), so they probably won’t go well together with the vanilla style - you might want to change those.

It’s important to note that these are the top colors of a gradient which will always go down to a dark gray, which creates the shadow-effect. This works well with a dark mode but can look a bit awkward in light mode - sadly I haven’t added settings for the bottom color of the gradient yet.

Furthermore I added settings for the Opacity multipliers. This is mainly because lower opacity hits harder in light mode, so users might want to customize that as well.

The other changes mainly exist to keep the promise I made in the settings.

I’m always using the “100% guru right now” option, so I’m not sure how well it works with the other ones.

The actual reason I added in bars for Master+ in the first place was so eventually I’d be able to rework filters. Instead of fixing “90% guru right now” or “100% guru in the past” one could have the user put in their own percentage and then have radio buttons for:

  • Gurued some day

  • Guru right now

  • Master right now

  • Enlightened right now

  • Burned right now

I don’t know how useful this is, but I can imagine that later on the definition of “leech” might shift from apprentice to guru

1 Like

Thanks for posting this! I modified it a little and published it as version 1.1.0.

I’m too lazy to set the default colors back, but if anyone wants to post what they should be, I can add a bug fix patch.

1 Like

I got my first enlightened and the script broke immediately - due to a bug I introduced myself:

            else if (item.assignments.srs_stage == 7) {
            else if (item.assignments.srs_state == 8) {
            else if (item.assignments.srs_state == 9) {

Here I wrote state instead of stage twice by accident.

1 Like

Thanks, I pushed a fix in 1.1.1. Those extra totals weren’t needed, as the SRS totals sufficed, so I deleted them. :wink:

Edit: There was a bug in my bug fix; 1.1.2 has been released to fix it.

1 Like


Thank you for this script, I really enjoy it and am constantly using it!
With the latest modifications and since I’m using light mode I thought the colours were really off, especially the shadowy gradient that was there.

I also saw the potential for finer control over what progress is being shown that @MagicalGrill wrote a couple of days ago.
I therefore added some options in the first setting panel to control that behaviour as well.

I went ahead and modified the script and here is a link to it Dashboard Level Progress Indicator 1.0+ / Improvement

Summary of the modifications:

  • New values inside progress hidden criteria for master, enlightened and burnt
  • New progress hidden percentage value to control exactly what percentage is required
  • Restored default values for colours
  • New checkbox for activating shadow (dark vertical gradient)
  • Fixed min/max values for fading multipliers
  • Fixed multiplier expressed in terms of 1-100 range instead of 0.01-1 (clearer for most people)

Feel free to review it and maybe publish it if you think it is ok!

1 Like

I tried it out and loved it!

Now there are 2 things left that kind of bother me:

  1. The master opacity is set to 0.9. This is entirely my own fault - I set this as a constant when I didn’t think I’d add the option to change colors, then never changed it back. But in the current state this value is too random (and maybe frustrating to some users).

  2. Assuming your changes will be published, the constant 90%-marker is kind of random too. It would make more sense to have a marker at the user-specified percentage.

Thank you for your feedback!

  1. Agreed, we should set the master opacity as are the others.
  2. I’d say it might not be entirely random since it reflects (at least for kanji) the required amount of items to go to the next level. Maybe showing it only for the current level kanji progress bar and a marker at the desired percentage for all other progress bars?

Oh, I didn’t think about that! (Mainly because dense me never realized the amount of kanji needed for the next level is 90%…)

Then I guess it’s a design question what one wants to show. But I think if we’re showing a different marker for Kanji, one should make that clear by maybe using a different color or font weight, as otherwise it might be confusing.

There, I tried something…
Dashboard Level Progress Indicator 1.0+ / Improvements

Might not be best in terms of UI but it’s something I guess.
I have also removed extra consol.log calls I added since they were polluting the console.

@Nightzus Looks good, if you don’t use my setting of 100%:

Though I’m not sure how to fix it, as the amount of items needed between the lines to not make the numbers overlap depends on the total amount of items in that category.

EDIT: Maybe don’t add numbers to the lines? Or only to the line at the end and the Kanji marker?

Well, I think it’s going to be my final submission (for today at least…)
Dashboard Level Progress Indicator 1.0+ / Improvements

The user-specified percentage line marker and its value are not shown if the number of items is equal to the max.
There is also a threshold of 97% (found by tweaking and testing) over which the line marker is shown but the number is not because it would collapse with the total count.

Not ideal as it would be best to but the total count further right but I haven’t found how to do that…

EDIT: I fixed a rounding issue and changed the pastebin link accordingly

1 Like

Version 1.1.3 is out featuring fixes by @Nightzus, a maximum line length for code readability, and more settings!

This userscript now has a GitHub location. This allows a more convenient way to propose changes to the script! :slight_smile: