[Userscript] Wanikani Heatmap

Abstormal · February 10, 2019, 12:36pm

Ah! Oki! =D
Probably my resets bugging it up
I’ll let you know later today when I do some more lessons =)

Kumirei · February 10, 2019, 12:38pm

Oh, and reset your data before doing lessons, because otherwise it will still think you’re finished with all lessons

Abstormal · February 10, 2019, 12:58pm

Updated, then reset. Will let you know when I do lessons later =)

Abstormal · February 10, 2019, 3:50pm

It worked! Now it updates properly without having to re-fetch =)

omoide · February 10, 2019, 10:13pm

Thanks for developing this userscript.

Have you tried to display a heatmap of the number of reviews per item? It may show that kanjis are getting harder to master, and the number of reviews per item is increasing exponentially, as we progress to higher levels.

Abstormal · February 10, 2019, 11:42pm

I usually find vocab to be the hardest. Especially those weird ones putting two kanjis together to make a third completely unrelated meaning with a utterly messed up reading to boot O_o
or just generally the “oh, this reading is exceptional, you just have to learn it”… thank…you… (luckily not too many of those, but there are a few “if you already know this word”, nope, I didn’t… XD

Kai_973 · February 11, 2019, 12:30am

You should have it already; I sent a 2nd e-mail on the 8th.

Kumirei · February 11, 2019, 8:50am

Oh, I only got the one

Anyway, I think I found the issue. Both the issue with longest streak not being correct (due to DST of course), and the current streak not updating correctly.

Also added a tooltip that displays the date your longest streak ended.

abdullahalt · February 11, 2019, 6:50pm

When I change the colors from the settings they’re not applied to the heatmap, I didn’t try all the settings but most of them work fine except for the colors
probably not a big deal since no one seems to have noticed until now, but thought you should know anyway

Kumirei · February 11, 2019, 7:23pm

You need to tick “custom colors” in general to apply the color settings. I did it that way so it will alway be easy to go back to default

Kai_973 · February 11, 2019, 8:13pm

Your e-mail probably blocked it because it looked like nothing but a string of nonsense

It’s working now though. Thanks

Kumirei · February 11, 2019, 8:17pm

What did your streak end up being?

abdullahalt · February 12, 2019, 2:29am

Oh wow that’s embarrassing…
Don’t you think a “reset default” button would be a more user-friendly way of doing that? You can reset all settings not just colors that way. Besides, other people might get confused like me and think the colors are broken

Kai_973 · February 12, 2019, 2:41am

It now says 321, starting from August 4th. The tooltip says the streak ended on June 23rd though, which is actually when I started back up.

(June 21st was my first day of no reviews since WK began tracking reveiws.)

Kumirei · February 12, 2019, 4:22am

I thought about that, but I like that you can keep the custom colors saved when going back to default

Kumirei · February 12, 2019, 1:00pm

Fixed

dunsany · February 12, 2019, 1:48pm

@Kumirei I would love to see when “level ups” happened. Is it possible to add a cross or something to the boxes on the days when I leveled up?

Abstormal · February 12, 2019, 1:54pm

I was planing to ask the very same thing!

Either a mark, or if possible, the actual level we became (might be too hard)

Kumirei · February 12, 2019, 3:33pm

Something like this? I can add levels and such as as hover-tooltips. I can also add resets, if you’d like.

chrome_CAEVnaeGce

chrome_lOxnp2R6hf

Notes for self, because it's a bit tricky to overlay an element right on the correct day

var level_up_date = "July 23, 2018";
var year = 2018;
var level = 42;

var title_elem;
$('.reviews_heatmaps title').each((i, e)=>{if (e.innerHTML.includes(level_up_date)) title_elem = e;});
var day_elem = title_elem.previousElementSibling;
var month_elem = $(day_elem).closest('.graph-domain')[0];
var year_elem = $(month_elem).closest('.cal-heatmap-container')[0];

var year_width = year_elem.attributes.width.value;
var month_x = month_elem.attributes.x.value;
var day_x = day_elem.attributes.x.value;
var day_y = day_elem.attributes.y.value;

var level_up_x = month_x + day_x - 1;
var level_up_y = 25 + day_y - 1;
var level_up_elem = $('#level_'+level)[0];
var level_ups_elem = $('#heatmap'+year+' .level_ups')[0];

level_up_elem.style.left = level_up_x;
level_up_elem.style.top = level_up_y;
level_ups_elem.style.width = year_width;

<section class="heatmaps">
    <div class="buttons">...</div>
    <div class="reviews_heatmaps heatmaps">
        <div class="stats">...</div>
        <div class="charts">
            <div id="heatmap2019">...</div>
            <div id="heatmap2018>
                <div class="year">2018</div>
                <div class="chart">
                    <div class="level_ups">
                        <div class="level_up" id="level_42"></div>
                    </div>
                    ...
                </div>
            <div id="heatmap2017">...</div>
            <div class="footer total_reviews">...</div>
            </div>
        </div>
    <div class="lessons_heatmaps heatmaps hidden">...</div>
</section>

.level_ups {
    position: relative;
    height: 100%;
    margin: auto;
}

.level_up {
    position: absolute;
    width: 8px;
    height: 8px;
    border: 2px solid [optional color];
    border-radius: 4px;
}

rfindley · February 12, 2019, 5:24pm

@Kumirei,
If you don’t mind the level-up highlight being relatively basic, you can forego adding an overlay, and just use the following CSS:

.heatmaps rect.levelup {outline: 2px solid red;}