Greasy Fork is available in English.
Adds review and lesson heatmaps to the dashboard.
Versión del día
Este script no debería instalarse directamente. Es una biblioteca que utilizan otros scripts mediante la meta-directiva de inclusión // @require https://update.greasyfork.org/scripts/410910/846871/Heatmap.js
// ==UserScript==
// @name Heatmap
// @namespace http://tampermonkey.net/
// @version 1.0.3
// @description Adds review and lesson heatmaps to the dashboard.
// @author Kumirei
// @include /^https://(www|preview).wanikani.com/(dashboard)?$/
// @grant none
// ==/UserScript==
(function($) {
class Heatmap {
constructor(config, data) {
this.maps = {};
this.config = config;
this.data = {};
if (data !== undefined) this.initiate(data);
}
initiate(data) {
let dates = this._get_dates(data);
let parsed_data = this._parse_data(data, dates);
this.data = parsed_data;
if (this.config.type === "year") {
for (let year=dates.first_year; year<=dates.last_year; year++) {
this.maps[year] = this._init_year(year, parsed_data, dates);
}
this._add_markings(this.config.markings, this.maps);
}
if (this.config.type === "day") {
this.maps.day = this._init_single_day(parsed_data, dates);
}
}
_parse_data(data, dates) {
let parsed_data = {};
for (let year=dates.first_year; year<=dates.last_year; year++) {
parsed_data[year] = {};
for (let month=1; month<=12; month++) {
parsed_data[year][month] = {};
for (let day=0; day<=31; day++) {
parsed_data[year][month][day] = {counts: {}, lists: {}, hours: new Array(24).fill().map(()=>{return {counts: {}, lists: {}}})};
}
}
}
for (let [date, counts, lists] of data) {
let [year, month, day, hour] = this._get_ymdh(date-1000*60*60*this.config.day_start);
if (date-1000*60*60*this.config.day_start < new Date(this.config.first_date).getTime() || date-1000*60*60*this.config.day_start > new Date(this.config.last_date || date+1).getTime()) continue;
let parsed_day = parsed_data[year][month][day];
for (let [key, value] of Object.entries(counts)) {
if (!parsed_day.counts[key]) parsed_day.counts[key] = value || 0;
else parsed_day.counts[key] += value || 0;
if (!parsed_day.hours[hour].counts[key]) parsed_day.hours[hour].counts[key] = value;
else parsed_day.hours[hour].counts[key] += value;
}
for (let [key, value] of Object.entries(lists)) {
if (!parsed_day.lists[key]) parsed_day.lists[key] = [value];
else parsed_day.lists[key].push(value);
if (!parsed_day.hours[hour].lists[key]) parsed_day.hours[hour].lists[key] = [value];
else parsed_day.hours[hour].lists[key].push(value);
}
}
return parsed_data;
}
_init_year(year, data, dates) {
let year_elem = this._create_elem({type: 'div', class: 'year heatmap '+this.config.id+(this.config.segment_years?' segment_years':'')+(this.config.zero_gap?' zero_gap':'')});
year_elem.setAttribute('data-year', year);
let labels = this._create_elem({type: 'div', class: 'year-labels', children: this._get_year_labels(year)});
let months = this._create_elem({type: 'div', class: 'months'});
for (let month=1; month<=12; month++) {
months.append(this._init_month(year, month, data, dates));
}
year_elem.append(labels, months);
return year_elem;
}
_get_year_labels(year) {
let year_label = this._create_elem({type: 'div', class: 'year-label hover-wrapper-target', child: String(year)});
let day_labels = this._create_elem({type: 'div', class: 'day-labels'});
for (let day=0; day<7; day++) {
day_labels.append(this._create_elem({type: 'div', class: 'day-label', child: ['M','T','W','T','F','S','S'][(day+Number(this.config.week_start))%7]}));
};
return [year_label, day_labels];
}
_init_month(year, month, data, dates) {
let offset = (new Date(year+'-'+month+'-01 0:0').getDay()+6-this.config.week_start)%7;
let month_elem = this._create_elem({type: 'div', class: 'month offset-'+offset});
if (year===dates.first_year && month<dates.first_month) month_elem.classList.add('no-data');
let label = this._create_elem({type: 'div', class: 'month-label', child: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'][month-1]});
let days = this._create_elem({type: 'div', class: 'days'});
let days_in_month = this._get_days_in_month(year, month);
for (let day=1; day<=days_in_month; day++) {
days.append(this._init_day(year, month, day, data, dates));
}
month_elem.append(label, days);
return month_elem;
}
_init_day(year, month, day, data, dates) {
let day_data = data[year][month][day];
let day_elem = this._create_elem({type: 'div',
class: 'day hover-wrapper-target',
info: {counts: day_data.counts, lists: day_data.lists},
child: this._create_elem({type: 'div', class: 'hover-wrapper', child: this.config.day_hover_callback([year, month, day], day_data)})});
day_elem.setAttribute('data-date', `${year}-${month}-${day}`);
if (year===dates.first_year && month===dates.first_month && day<dates.first_day) day_elem.classList.add('no-data');
day_elem.style.setProperty('background-color', this.config.color_callback([year, month, day], day_data));
return day_elem;
}
_init_single_day(data, dates) {
let day = this._create_elem({type: 'div', class: 'single-day '+this.config.id});
let hour_data = data[dates.first_year][dates.first_month][dates.first_day].hours;
let current_hour = new Date().getHours();
for (let i=0; i<24; i++) {
let j = (i+this.config.day_start)%24;
let hour = this._create_elem({type: 'div', class: 'hour hover-wrapper-target'+(j===current_hour&&Date.parse(new Date().toDateString())==this.config.first_date?' today marked':''), info: {counts: hour_data[i].counts, lists: hour_data[i].lists}});
let hover = this._create_elem({type: 'div', class: 'hover-wrapper', child: this.config.day_hover_callback([dates.first_year, dates.first_month, dates.first_day, j], hour_data[i])});
hour.append(hover);
hour.style.setProperty('background-color', this.config.color_callback([dates.first_year, dates.first_month, dates.first_day, j], hour_data[i]));
day.append(hour);
}
day.instance = this;
return day;
}
_add_markings(markings, years) {
for (let [date, mark] of markings) {
let [year, month, day] = this._get_ymdh(date);
if (years[year]) years[year].querySelector(`.day[data-date="${year}-${month}-${day}"]`).classList.add(...mark.split(' '), 'marked');
}
}
_get_days_in_month(year, month) {return [31, this._is_leap_year(year)?29:28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31][month-1];}
_is_leap_year(year) {return year%4==0 && (year%100!=0 || year%400==0);}
_create_elem(config) {
let div = document.createElement(config.type);
for (let [attr, value] of Object.entries(config)) {
if (attr === "type") continue;
else if (attr === "class") div.className = value;
else if (attr === "child") div.append(value);
else if (attr === "children") div.append(...value);
else div[attr] = value;
}
return div;
}
_get_dates() {
let [first_year, first_month, first_day] = this._get_ymdh(this.config.first_date);
let [last_year, last_month, last_day] = this._get_ymdh(this.config.last_date || Date.now());
return {first_year, first_month, first_day,
last_year, last_month, last_day,
};
}
_get_ymdh(date) {let d = new Date(date); return [d.getFullYear(), d.getMonth()+1, d.getDate(), d.getHours()];}
}
window.Heatmap = Heatmap;
})();