An Overall Level Progress Bar?

I’ve seen a few different progress bar scripts and tools, but what I haven’t seen is a progress bar showing your levels as an average (or otherwise) of the colors of each SRS stage of each item. What I mean by this, is something like this:

I just screenshotted my items page on the WK statistics website and did some editing on it to get some solid ‘bars’ for each level, with level 1 on the left and level 60 on the right. It’d be cool if there was something like this, but more cleaned up, which shows each level and how ‘completed’ it is. If this already exists please tell me.


Closest I can think of is this function of the Wanikani Workload Graph. That’s pretty much what you’re looking for?

ignore the other lines - those are just my various reset journeys :sweat_smile:

Also, happy :cake: - day! :yum:


Closest thing I can think of is this script:

It turns the level submenu on your main page into a set of per-level progress bars. It ends up looking something like this:


I just looked at my dashboard, and I also have this script installed, which shows the overall progress bar across all levels:

It gives you a progress bar that looks like this:


That’s pretty close to what I want, thanks! It’s not quite exactly what I want since I want something that’s on the dashboard and shows unlearned stuff too, but it satisfies the same hunger for stats!


Oh that’s really cool, I didn’t know about that one. Still not quite what I’m looking for but it’s very interesting!


Something like this?


Yes, that’s almost perfect!

damn, you’re quick…


I am making it for you, so if there’s anything you want to change I’ll do it.

Alternative way to display the same data


Hmmm… I really like both of those settings, but I’m curious how it’d look of each level was a solid block of the average colours of each item :thinking: It may look terrible though so you don’t have to implement it if it does


Honestly, I don’t know how to average colors in a good way, so unless someone has a good method for doing it I won’t, but if someone does I’m willing to try it out

Here it is


I’ve been learning html and CSS and (re)learning Javascript lately so I may have a stab at it later when I get home :thinking:

1 Like

Maybe you could calculate an average SRS stage based on the items first, then create a gradient between each pair of adjacent SRS stages and assign the color based on that gradient.

So say you’d have mostly burn items (stage 9) and a few enlightened items (stage 8) on a level, your average SRS stage would be something like 8.8 or so, so you’d use the Enlightened to Burn gradient and take the color at 80% into that gradient.

You might need to check if the gradients blend well, otherwise you could instead assign white to 0.5, which would cause the colors to fade to white between SRS stages before fading back to the SRS stage color.


Damn Kumi, you don’t have to work this hard. We already love you…


I’ve got to get to bed and my knowhow for this stuff is incredibly lacking, but this is my (very) rough idea of how to do it:

const color = {
    '-1': '#aaa',
    // Changed 0 to be 6 characters long so it works
    0: '#aaaaaa',
    1: '#dd0093',
    2: '#dd0093',
    3: '#dd0093',
    4: '#dd0093',
    5: '#882d9e',
    6: '#882d9e',
    7: '#294ddb',
    8: '#0093dd',
    // Changing burns into a hex to match the others
    9: '#dfaa0b',
// levelItems is an array containing the SRS level of each item (this data is probably not stored as an array but idk how WK handles this data)
const levelItems = [];

let itemValues = [0,0,0];
let averageColor = "#";

// For each level, a mean average is taken of each item's color
for (let i = 0; i < levelItems.length; i++){
    // The original idea was to take the hex values as a string, chop them up into red, green, and blue, and then average those individually before recombining them.
    // Apparently parseInt() can be used to convert hexadecimal to decimal. I have no clue about the efficacy of this since I don't even know how to run JS code
    for (let j = 0; j < 3; j++){
        // idk the best way to convert to a string in JS, google said String()
        itemValues[j] += parseInt((("0x0" + String(color[levelItems[i]].slice((2*j + 1), (2*j + 2)))), 10));
// Divide by the total to get the means for RGB
itemValues /= levelItems.length;
// Convert back into hex
for (let j = 0; j < 3; j++){
    averageColor += itemValues[j].toString(16);
// Can you just straight up do += on a string? idk either way you stitch it all back up and hopefully you should have an average hex color. Maybe. Probably not, this probably doesn't work.

Also yes the line starting with itemValues[j] is very ugly.


That’s a really good idea, I’ll try that

This does work in a sense, but you don’t really get the result you want when you do it this way (color is tricky)

Don’t worry, the whole script is kinda messy since I just threw it together as quickly as I could

I tried out some different options. These all show the same data

60: My actual bar for level 60
59: @BIsTheAnswer’s idea. I like this
58: Just testing a gradient between all of the colors of 60
57: @Wantitled’s idea of averaging hex components. Sadly this doesn’t work very well
56: Chained weighted interpolation between color pairs (I had a function in the Heatmap to interpolate between two colors)

@Wantitled What do you think?


While you’re testing… how about option 6: display the divs for the different stages on top of each other with opacity set to nr of items / total level items. Let the screen do the color mixing.
Hmmm, I’m wondering if that’s heavily reliant on the order of the divs. Probably would require the most opaque div at the bottom.

edit: hihi mine all turn to grey goop. Order of divs definitely matters for the result.


Most opaque at bottom
Also tried making bottom 100% opaque
Burn at bottom at 100% opacity, others in DOM order


I tweaked some more and ended up with this

I basically gave the bars div the burn background (although I lightened it to prevent everything from turning gold and tan) and removed the burn segment from the original flex stack (which makes the otherwise small sections bigger for me), and that flex stack then has its opacity reduced by 5/6 of the burn ratio. I have no idea if this looks half decent for other distributions. Presumably if you have a small amount of burns in a level, you’d want it to be more visible that you have at least those many burns. In this setup it wouldn’t be very visible.
It’s very pastel. But I kinda like it.


That’s pretty interesting, and pretty


Damn color, it’s never simple.

@BIsTheAnswer 's gradient idea is really good, and it’s the closest to my original thought I think :thinking: The only issue I see with it is that it won’t reflect the colours of items not close to the average, but then, you don’t really want to be mixing in yellows into your purple because then you’ll end up with my color.

56 is really nice too, even 58 could have some uses if you applied it to all your items. I don’t know what you’d use such a gradient for, but it’d be cool.