[Userscript] Wanikani Heatmap


#202

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


#203

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


#204

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


#205

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


#206

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.


#207

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


#208

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


#209

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.
image


#210

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


#211

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

image


#212

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

It’s working now though. Thanks :slight_smile:


#213

What did your streak end up being?


#214

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


#215

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.)


#216

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


#217

Fixed


#218

@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?


#219

I was planing to ask the very same thing! :rofl:

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


#220

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;
}

#221

@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;}

image