Select Heatmap:
\
`;
const monthly_html =
`
\
\
`;
const weekly_html =
`
\
\
`;
const yearly_js =
`const heatmap = new SimpleD3Heatmap();
const ONE_HOUR_IN_MILLISECONDS = 3600000;
const ONE_DAY_IN_MILLISECONDS = 86400000;
// create random data for one year
function generateYearData() {
let startDate = new Date(2017, 0).getTime();
const dataOfOneYear = {};
// create data for every day of the year
for (let i = 0; i < 365; i++) {
// add one day
const date = startDate + (ONE_DAY_IN_MILLISECONDS * i);
// add data to object with random value
dataOfOneYear[date] = Math.floor(Math.random() * 400);
}
// return our newly generated data
return dataOfOneYear;
}
// create calendar heatmap
const generatedData = generateYearData();
heatmap.yearly("yearlyCalendar", generatedData);
`;
const monthly_js =
`const heatmap = new SimpleD3Heatmap();
const ONE_HOUR_IN_MILLISECONDS = 3600000;
const ONE_DAY_IN_MILLISECONDS = 86400000;
// generate random data for one month
function generateMonthlyData() {
// initialize date object as february 2017, create dataOfOneMonth object
let startDate = new Date(2017, 1);
const dataOfOneMonth = {};
// convert date object to timestamp
startDate = startDate.getTime();
// go through all days in month (february has 28 days)
for (let i = 0; i < 28; i++) {
// grab startDate and add (ONE_DAY_IN_MILLISECONDS * i)
let dataTS = startDate + (ONE_DAY_IN_MILLISECONDS * i);
// go through 24 hours in one day
for (let j = 0; j < 24; j++) {
// add ONE_HOUR_IN_MILLISECONDS to dataTS
const dayHourTS = dataTS + (ONE_HOUR_IN_MILLISECONDS * j);
// only add the data to object if its between hours 6 and 18
if (j <= 18 && j >= 6) {
dataOfOneMonth[dayHourTS] = Math.floor(Math.random() * 30) + j;
}
}
}
// return our newly generated data
return dataOfOneMonth;
}
// create calendar heatmap
const generatedData = generateMonthlyData();
heatmap.monthly("monthlyCalendar", generatedData);
`;
const weekly_js =
`const heatmap = new SimpleD3Heatmap();
const ONE_HOUR_IN_MILLISECONDS = 3600000;
const ONE_DAY_IN_MILLISECONDS = 86400000;
// create random data for one week
function generateWeeklyData() {
// create date object @ february 2017 and convert it to a timestamp
let startDate = new Date(2017, 1, 5).getTime();
const dataOfOneWeek = {};
// a week has 7 days
for (let i = 0; i < 7; i++) {
const dayTS = startDate + (ONE_DAY_IN_MILLISECONDS * i);
// a day has 24 hours
for (let j = 0; j < 24; j++) {
const hourTS = dayTS + (ONE_HOUR_IN_MILLISECONDS * j);
// only add data if its between hours 6 and 18
if (j <= 18 && j >= 6) {
dataOfOneWeek[hourTS] = Math.floor(Math.random() * 50) + j;
}
}
}
// return our generated data
return dataOfOneWeek;
}
// create calendar heatmap
const generatedData = generateWeeklyData();
heatmap.weekly("weeklyCalendar", generatedData);
`;
const css = `.d3-calendar-tooltip {
background-color: white;
border: 2px solid #111;
color: black;
width: max-content;
padding: 3px 12px;
}
.d3-calendar-tooltip:after {
display: inline;
font-size: 12px;
line-height: 1;
color: #111;
content: "\\25BC";
position: absolute;
left: 35%; /* use 0px in a real world scenario! */
top: 24px;
text-align: center;
}`;
renderYearly();
function renderYearly() {
document.getElementById("header").innerHTML = "Yearly:";
new Jotted(document.querySelector("#editor"), {
files: [
{
type: "html",
content: yearly_html
},
{
type: "js",
content: yearly_js
},
{
type: "css",
content: css
}
],
plugins: ["ace"]
});
}
function renderMonthly() {
document.getElementById("header").innerHTML = "Monthly:";
new Jotted(document.querySelector("#editor"), {
files: [
{
type: "html",
content: monthly_html
},
{
type: "js",
content: monthly_js
},
{
type: "css",
content: css
}
],
plugins: ["ace"]
});
}
function renderWeekly() {
document.getElementById("header").innerHTML = "Weekly:";
new Jotted(document.querySelector("#editor"), {
files: [
{
type: "html",
content: weekly_html
},
{
type: "js",
content: weekly_js
},
{
type: "css",
content: css
}
],
plugins: ["ace"]
});
}