[Userscript] WaniKani Dashboard Level Progress Detail 1.0+

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:


I added a pull request. This gives you the option to customize the gradient for each stage, so the user has the chance to add a shadow (or even some crazy gradient) that doesn’t look as awkard even in light mode.

I don’t know if this is related to what everyone has been doing, but the script is no longer working for me. Where should I use the script that Nightzus are uploaded, should I copy and paste it into the edit script of the old one?

(Basically the are things that I have got. learn but it’s not tracking the “gradients”. So apprentice 1-3 and guru 1 don’t show up I think.)

The current version is the script that Nightzus linked. So if you updated your version, you should already have it.

Please check your Settings (My Settings-Page looks a bit different, don’t worry about it):

Are the fading multipliers numbers between 1 and 100? If they are too low, the bars for Apprentice 1-3 and Guru 1 might seem invisible.

1 Like

Ah ha! Thank you. Some how the default was set to .7 instead of 70. Fixed the setting thank you!


Thank you! In the future, after adding code to your fork, please create a new pull request from this page so I know that it’s there: Pull requests · UInt2048/WKDashboardLevelProgressDetail · GitHub

This way, I can merge the PR while away from the forums!

Version 1.1.4 has been released with new settings for gradient colors & slight rewording of settings thanks to @MagicalGrill!

1 Like

That would be due to a ‘bug’ when upgrading from 1.1.0 - 1.1.2 (instead of 1.0.5 or earlier) to 1.1.3+.

1 Like

Perfect. I’m just glad it was an easy fix. I’m not super computer-y, but I was able to getting it working again with that one tweak.

1 Like