paulbsd/website
1
0
Fork 0
Code Issues Pull Requests Releases 18 Wiki Activity
f38f243c25
website/static/bower_components/cal-heatmap/cal-heatmap.js

3485 lines
93 KiB
JavaScript
Raw Normal View History

initial website commit
2020-01-12 14:14:15 +01:00
/*! cal-heatmap v3.6.0 (Sun Apr 24 2016 19:19:35)
* ---------------------------------------------
* Cal-Heatmap is a javascript module to create calendar heatmap to visualize time series data
* https://github.com/wa0x6e/cal-heatmap
* Licensed under the MIT license
* Copyright 2014 Wan Qi Chen
*/
var d3 = typeof require === "function" ? require("d3") : window.d3;
var CalHeatMap = function() {
"use strict";
var self = this;
this.allowedDataType = ["json", "csv", "tsv", "txt"];
// Default settings
this.options = {
// selector string of the container to append the graph to
// Accept any string value accepted by document.querySelector or CSS3
// or an Element object
itemSelector: "#cal-heatmap",
// Whether to paint the calendar on init()
// Used by testsuite to reduce testing time
paintOnLoad: true,
// ================================================
// DOMAIN
// ================================================
// Number of domain to display on the graph
range: 12,
// Size of each cell, in pixel
cellSize: 10,
// Padding between each cell, in pixel
cellPadding: 2,
// For rounded subdomain rectangles, in pixels
cellRadius: 0,
domainGutter: 2,
domainMargin: [0, 0, 0, 0],
domain: "hour",
subDomain: "min",
// Number of columns to split the subDomains to
// If not null, will takes precedence over rowLimit
colLimit: null,
// Number of rows to split the subDomains to
// Will be ignored if colLimit is not null
rowLimit: null,
// First day of the week is Monday
// 0 to start the week on Sunday
weekStartOnMonday: true,
// Start date of the graph
// @default now
start: new Date(),
minDate: null,
maxDate: null,
// ================================================
// DATA
// ================================================
// Data source
// URL, where to fetch the original datas
data: "",
// Data type
// Default: json
dataType: this.allowedDataType[0],
// Payload sent when using POST http method
// Leave to null (default) for GET request
// Expect a string, formatted like "a=b;c=d"
dataPostPayload: null,
// Whether to consider missing date:value from the datasource
// as equal to 0, or just leave them as missing
considerMissingDataAsZero: false,
// Load remote data on calendar creation
// When false, the calendar will be left empty
loadOnInit: true,
// Calendar orientation
// false: display domains side by side
// true : display domains one under the other
verticalOrientation: false,
// Domain dynamic width/height
// The width on a domain depends on the number of
domainDynamicDimension: true,
// Domain Label properties
label: {
// valid: top, right, bottom, left
position: "bottom",
// Valid: left, center, right
// Also valid are the direct svg values: start, middle, end
align: "center",
// By default, there is no margin/padding around the label
offset: {
x: 0,
y: 0
},
rotate: null,
// Used only on vertical orientation
width: 100,
// Used only on horizontal orientation
height: null
},
// ================================================
// LEGEND
// ================================================
// Threshold for the legend
legend: [10, 20, 30, 40],
// Whether to display the legend
displayLegend: true,
legendCellSize: 10,
legendCellPadding: 2,
legendMargin: [0, 0, 0, 0],
// Legend vertical position
// top: place legend above calendar
// bottom: place legend below the calendar
legendVerticalPosition: "bottom",
// Legend horizontal position
// accepted values: left, center, right
legendHorizontalPosition: "left",
// Legend rotation
// accepted values: horizontal, vertical
legendOrientation: "horizontal",
// Objects holding all the heatmap different colors
// null to disable, and use the default css styles
//
// Examples:
// legendColors: {
// min: "green",
// max: "red",
// empty: "#ffffff",
// base: "grey",
// overflow: "red"
// }
legendColors: null,
// ================================================
// HIGHLIGHT
// ================================================
// List of dates to highlight
// Valid values:
// - []: don't highlight anything
// - "now": highlight the current date
// - an array of Date objects: highlight the specified dates
highlight: [],
// ================================================
// TEXT FORMATTING / i18n
// ================================================
// Name of the items to represent in the calendar
itemName: ["item", "items"],
// Formatting of the domain label
// @default: null, will use the formatting according to domain type
// Accept a string used as specifier by d3.time.format()
// or a function
//
// Refer to https://github.com/mbostock/d3/wiki/Time-Formatting
// for accepted date formatting used by d3.time.format()
domainLabelFormat: null,
// Formatting of the title displayed when hovering a subDomain cell
subDomainTitleFormat: {
empty: "{date}",
filled: "{count} {name} {connector} {date}"
},
// Formatting of the {date} used in subDomainTitleFormat
// @default: null, will use the formatting according to subDomain type
// Accept a string used as specifier by d3.time.format()
// or a function
//
// Refer to https://github.com/mbostock/d3/wiki/Time-Formatting
// for accepted date formatting used by d3.time.format()
subDomainDateFormat: null,
// Formatting of the text inside each subDomain cell
// @default: null, no text
// Accept a string used as specifier by d3.time.format()
// or a function
//
// Refer to https://github.com/mbostock/d3/wiki/Time-Formatting
// for accepted date formatting used by d3.time.format()
subDomainTextFormat: null,
// Formatting of the title displayed when hovering a legend cell
legendTitleFormat: {
lower: "less than {min} {name}",
inner: "between {down} and {up} {name}",
upper: "more than {max} {name}"
},
// Animation duration, in ms
animationDuration: 500,
nextSelector: false,
previousSelector: false,
itemNamespace: "cal-heatmap",
tooltip: false,
// ================================================
// EVENTS CALLBACK
// ================================================
// Callback when clicking on a time block
onClick: null,
// Callback after painting the empty calendar
// Can be used to trigger an API call, once the calendar is ready to be filled
afterLoad: null,
// Callback after loading the next domain in the calendar
afterLoadNextDomain: null,
// Callback after loading the previous domain in the calendar
afterLoadPreviousDomain: null,
// Callback after finishing all actions on the calendar
onComplete: null,
// Callback after fetching the datas, but before applying them to the calendar
// Used mainly to convert the datas if they're not formatted like expected
// Takes the fetched "data" object as argument, must return a json object
// formatted like {timestamp:count, timestamp2:count2},
afterLoadData: function(data) { return data; },
// Callback triggered after calling next().
// The `status` argument is equal to true if there is no
// more next domain to load
//
// This callback is also executed once, after calling previous(),
// only when the max domain is reached
onMaxDomainReached: null,
// Callback triggered after calling previous().
// The `status` argument is equal to true if there is no
// more previous domain to load
//
// This callback is also executed once, after calling next(),
// only when the min domain is reached
onMinDomainReached: null
};
this._domainType = {
"min": {
name: "minute",
level: 10,
maxItemNumber: 60,
defaultRowNumber: 10,
defaultColumnNumber: 6,
row: function(d) { return self.getSubDomainRowNumber(d); },
column: function(d) { return self.getSubDomainColumnNumber(d); },
position: {
x: function(d) { return Math.floor(d.getMinutes() / self._domainType.min.row(d)); },
y: function(d) { return d.getMinutes() % self._domainType.min.row(d); }
},
format: {
date: "%H:%M, %A %B %-e, %Y",
legend: "",
connector: "at"
},
extractUnit: function(d) {
return new Date(d.getFullYear(), d.getMonth(), d.getDate(), d.getHours(), d.getMinutes()).getTime();
}
},
"hour": {
name: "hour",
level: 20,
maxItemNumber: function(d) {
switch(self.options.domain) {
case "day":
return 24;
case "week":
return 24 * 7;
case "month":
return 24 * (self.options.domainDynamicDimension ? self.getDayCountInMonth(d): 31);
}
},
defaultRowNumber: 6,
defaultColumnNumber: function(d) {
switch(self.options.domain) {
case "day":
return 4;
case "week":
return 28;
case "month":
return self.options.domainDynamicDimension ? self.getDayCountInMonth(d): 31;
}
},
row: function(d) { return self.getSubDomainRowNumber(d); },
column: function(d) { return self.getSubDomainColumnNumber(d); },
position: {
x: function(d) {
if (self.options.domain === "month") {
if (self.options.colLimit > 0 || self.options.rowLimit > 0) {
return Math.floor((d.getHours() + (d.getDate()-1)*24) / self._domainType.hour.row(d));
}
return Math.floor(d.getHours() / self._domainType.hour.row(d)) + (d.getDate()-1)*4;
} else if (self.options.domain === "week") {
if (self.options.colLimit > 0 || self.options.rowLimit > 0) {
return Math.floor((d.getHours() + self.getWeekDay(d)*24) / self._domainType.hour.row(d));
}
return Math.floor(d.getHours() / self._domainType.hour.row(d)) + self.getWeekDay(d)*4;
}
return Math.floor(d.getHours() / self._domainType.hour.row(d));
},
y: function(d) {
var p = d.getHours();
if (self.options.colLimit > 0 || self.options.rowLimit > 0) {
switch(self.options.domain) {
case "month":
p += (d.getDate()-1) * 24;
break;
case "week":
p += self.getWeekDay(d) * 24;
break;
}
}
return Math.floor(p % self._domainType.hour.row(d));
}
},
format: {
date: "%Hh, %A %B %-e, %Y",
legend: "%H:00",
connector: "at"
},
extractUnit: function(d) {
return new Date(d.getFullYear(), d.getMonth(), d.getDate(), d.getHours()).getTime();
}
},
"day": {
name: "day",
level: 30,
maxItemNumber: function(d) {
switch(self.options.domain) {
case "week":
return 7;
case "month":
return self.options.domainDynamicDimension ? self.getDayCountInMonth(d) : 31;
case "year":
return self.options.domainDynamicDimension ? self.getDayCountInYear(d) : 366;
}
},
defaultColumnNumber: function(d) {
d = new Date(d);
switch(self.options.domain) {
case "week":
return 1;
case "month":
return (self.options.domainDynamicDimension && !self.options.verticalOrientation) ? (self.getWeekNumber(new Date(d.getFullYear(), d.getMonth()+1, 0)) - self.getWeekNumber(d) + 1): 6;
case "year":
return (self.options.domainDynamicDimension ? (self.getWeekNumber(new Date(d.getFullYear(), 11, 31)) - self.getWeekNumber(new Date(d.getFullYear(), 0)) + 1): 54);
}
},
defaultRowNumber: 7,
row: function(d) { return self.getSubDomainRowNumber(d); },
column: function(d) { return self.getSubDomainColumnNumber(d); },
position: {
x: function(d) {
switch(self.options.domain) {
case "week":
return Math.floor(self.getWeekDay(d) / self._domainType.day.row(d));
case "month":
if (self.options.colLimit > 0 || self.options.rowLimit > 0) {
return Math.floor((d.getDate() - 1)/ self._domainType.day.row(d));
}
return self.getWeekNumber(d) - self.getWeekNumber(new Date(d.getFullYear(), d.getMonth()));
case "year":
if (self.options.colLimit > 0 || self.options.rowLimit > 0) {
return Math.floor((self.getDayOfYear(d) - 1) / self._domainType.day.row(d));
}
return self.getWeekNumber(d);
}
},
y: function(d) {
var p = self.getWeekDay(d);
if (self.options.colLimit > 0 || self.options.rowLimit > 0) {
switch(self.options.domain) {
case "year":
p = self.getDayOfYear(d) - 1;
break;
case "week":
p = self.getWeekDay(d);
break;
case "month":
p = d.getDate() - 1;
break;
}
}
return Math.floor(p % self._domainType.day.row(d));
}
},
format: {
date: "%A %B %-e, %Y",
legend: "%e %b",
connector: "on"
},
extractUnit: function(d) {
return new Date(d.getFullYear(), d.getMonth(), d.getDate()).getTime();
}
},
"week": {
name: "week",
level: 40,
maxItemNumber: 54,
defaultColumnNumber: function(d) {
d = new Date(d);
switch(self.options.domain) {
case "year":
return self._domainType.week.maxItemNumber;
case "month":
return self.options.domainDynamicDimension ? self.getWeekNumber(new Date(d.getFullYear(), d.getMonth()+1, 0)) - self.getWeekNumber(d) : 5;
}
},
defaultRowNumber: 1,
row: function(d) { return self.getSubDomainRowNumber(d); },
column: function(d) { return self.getSubDomainColumnNumber(d); },
position: {
x: function(d) {
switch(self.options.domain) {
case "year":
return Math.floor(self.getWeekNumber(d) / self._domainType.week.row(d));
case "month":
return Math.floor(self.getMonthWeekNumber(d) / self._domainType.week.row(d));
}
},
y: function(d) {
return self.getWeekNumber(d) % self._domainType.week.row(d);
}
},
format: {
date: "%B Week #%W",
legend: "%B Week #%W",
connector: "in"
},
extractUnit: function(d) {
var dt = new Date(d.getFullYear(), d.getMonth(), d.getDate());
// According to ISO-8601, week number computation are based on week starting on Monday
var weekDay = dt.getDay()-1;
if (weekDay < 0) {
weekDay = 6;
}
dt.setDate(dt.getDate() - weekDay);
return dt.getTime();
}
},
"month": {
name: "month",
level: 50,
maxItemNumber: 12,
defaultColumnNumber: 12,
defaultRowNumber: 1,
row: function() { return self.getSubDomainRowNumber(); },
column: function() { return self.getSubDomainColumnNumber(); },
position: {
x: function(d) { return Math.floor(d.getMonth() / self._domainType.month.row(d)); },
y: function(d) { return d.getMonth() % self._domainType.month.row(d); }
},
format: {
date: "%B %Y",
legend: "%B",
connector: "in"
},
extractUnit: function(d) {
return new Date(d.getFullYear(), d.getMonth()).getTime();
}
},
"year": {
name: "year",
level: 60,
row: function() { return self.options.rowLimit || 1; },
column: function() { return self.options.colLimit || 1; },
position: {
x: function() { return 1; },
y: function() { return 1; }
},
format: {
date: "%Y",
legend: "%Y",
connector: "in"
},
extractUnit: function(d) {
return new Date(d.getFullYear()).getTime();
}
}
};
for (var type in this._domainType) {
if (this._domainType.hasOwnProperty(type)) {
var d = this._domainType[type];
this._domainType["x_" + type] = {
name: "x_" + type,
level: d.type,
maxItemNumber: d.maxItemNumber,
defaultRowNumber: d.defaultRowNumber,
defaultColumnNumber: d.defaultColumnNumber,
row: d.column,
column: d.row,
position: {
x: d.position.y,
y: d.position.x
},
format: d.format,
extractUnit: d.extractUnit
};
}
}
// Record the address of the last inserted domain when browsing
this.lastInsertedSvg = null;
this._completed = false;
// Record all the valid domains
// Each domain value is a timestamp in milliseconds
this._domains = d3.map();
this.graphDim = {
width: 0,
height: 0
};
this.legendDim = {
width: 0,
height: 0
};
this.NAVIGATE_LEFT = 1;
this.NAVIGATE_RIGHT = 2;
// Various update mode when using the update() API
this.RESET_ALL_ON_UPDATE = 0;
this.RESET_SINGLE_ON_UPDATE = 1;
this.APPEND_ON_UPDATE = 2;
this.DEFAULT_LEGEND_MARGIN = 10;
this.root = null;
this.tooltip = null;
this._maxDomainReached = false;
this._minDomainReached = false;
this.domainPosition = new DomainPosition();
this.Legend = null;
this.legendScale = null;
// List of domains that are skipped because of DST
// All times belonging to these domains should be re-assigned to the previous domain
this.DSTDomain = [];
/**
* Display the graph for the first time
* @return bool True if the calendar is created
*/
this._init = function() {
self.getDomain(self.options.start).map(function(d) { return d.getTime(); }).map(function(d) {
self._domains.set(d, self.getSubDomain(d).map(function(d) { return {t: self._domainType[self.options.subDomain].extractUnit(d), v: null}; }));
});
self.root = d3.select(self.options.itemSelector).append("svg").attr("class", "cal-heatmap-container");
self.tooltip = d3.select(self.options.itemSelector)
.attr("style", function() {
var current = d3.select(self.options.itemSelector).attr("style");
return (current !== null ? current : "") + "position:relative;";
})
.append("div")
.attr("class", "ch-tooltip")
;
self.root.attr("x", 0).attr("y", 0).append("svg").attr("class", "graph");
self.Legend = new Legend(self);
if (self.options.paintOnLoad) {
_initCalendar();
}
return true;
};
function _initCalendar() {
self.verticalDomainLabel = (self.options.label.position === "top" || self.options.label.position === "bottom");
self.domainVerticalLabelHeight = self.options.label.height === null ? Math.max(25, self.options.cellSize*2): self.options.label.height;
self.domainHorizontalLabelWidth = 0;
if (self.options.domainLabelFormat === "" && self.options.label.height === null) {
self.domainVerticalLabelHeight = 0;
}
if (!self.verticalDomainLabel) {
self.domainVerticalLabelHeight = 0;
self.domainHorizontalLabelWidth = self.options.label.width;
}
self.paint();
// =========================================================================//
// ATTACHING DOMAIN NAVIGATION EVENT //
// =========================================================================//
if (self.options.nextSelector !== false) {
d3.select(self.options.nextSelector).on("click." + self.options.itemNamespace, function() {
d3.event.preventDefault();
return self.loadNextDomain(1);
});
}
if (self.options.previousSelector !== false) {
d3.select(self.options.previousSelector).on("click." + self.options.itemNamespace, function() {
d3.event.preventDefault();
return self.loadPreviousDomain(1);
});
}
self.Legend.redraw(self.graphDim.width - self.options.domainGutter - self.options.cellPadding);
self.afterLoad();
var domains = self.getDomainKeys();
// Fill the graph with some datas
if (self.options.loadOnInit) {
self.getDatas(
self.options.data,
new Date(domains[0]),
self.getSubDomain(domains[domains.length-1]).pop(),
function() {
self.fill();
self.onComplete();
}
);
} else {
self.onComplete();
}
self.checkIfMinDomainIsReached(domains[0]);
self.checkIfMaxDomainIsReached(self.getNextDomain().getTime());
}
// Return the width of the domain block, without the domain gutter
// @param int d Domain start timestamp
function w(d, outer) {
var width = self.options.cellSize*self._domainType[self.options.subDomain].column(d) + self.options.cellPadding*self._domainType[self.options.subDomain].column(d);
if (arguments.length === 2 && outer === true) {
return width += self.domainHorizontalLabelWidth + self.options.domainGutter + self.options.domainMargin[1] + self.options.domainMargin[3];
}
return width;
}
// Return the height of the domain block, without the domain gutter
function h(d, outer) {
var height = self.options.cellSize*self._domainType[self.options.subDomain].row(d) + self.options.cellPadding*self._domainType[self.options.subDomain].row(d);
if (arguments.length === 2 && outer === true) {
height += self.options.domainGutter + self.domainVerticalLabelHeight + self.options.domainMargin[0] + self.options.domainMargin[2];
}
return height;
}
/**
*
*
* @param int navigationDir
*/
this.paint = function(navigationDir) {
var options = self.options;
if (arguments.length === 0) {
navigationDir = false;
}
// Painting all the domains
var domainSvg = self.root.select(".graph")
.selectAll(".graph-domain")
.data(
function() {
var data = self.getDomainKeys();
return navigationDir === self.NAVIGATE_LEFT ? data.reverse(): data;
},
function(d) { return d; }
)
;
var enteringDomainDim = 0;
var exitingDomainDim = 0;
// =========================================================================//
// PAINTING DOMAIN //
// =========================================================================//
var svg = domainSvg
.enter()
.append("svg")
.attr("width", function(d) {
return w(d, true);
})
.attr("height", function(d) {
return h(d, true);
})
.attr("x", function(d) {
if (options.verticalOrientation) {
self.graphDim.width = Math.max(self.graphDim.width, w(d, true));
return 0;
} else {
return getDomainPosition(d, self.graphDim, "width", w(d, true));
}
})
.attr("y", function(d) {
if (options.verticalOrientation) {
return getDomainPosition(d, self.graphDim, "height", h(d, true));
} else {
self.graphDim.height = Math.max(self.graphDim.height, h(d, true));
return 0;
}
})
.attr("class", function(d) {
var classname = "graph-domain";
var date = new Date(d);
switch(options.domain) {
case "hour":
classname += " h_" + date.getHours();
/* falls through */
case "day":
classname += " d_" + date.getDate() + " dy_" + date.getDay();
/* falls through */
case "week":
classname += " w_" + self.getWeekNumber(date);
/* falls through */
case "month":
classname += " m_" + (date.getMonth() + 1);
/* falls through */
case "year":
classname += " y_" + date.getFullYear();
}
return classname;
})
;
self.lastInsertedSvg = svg;
function getDomainPosition(domainIndex, graphDim, axis, domainDim) {
var tmp = 0;
switch(navigationDir) {
case false:
tmp = graphDim[axis];
graphDim[axis] += domainDim;
self.domainPosition.setPosition(domainIndex, tmp);
return tmp;
case self.NAVIGATE_RIGHT:
self.domainPosition.setPosition(domainIndex, graphDim[axis]);
enteringDomainDim = domainDim;
exitingDomainDim = self.domainPosition.getPositionFromIndex(1);
self.domainPosition.shiftRightBy(exitingDomainDim);
return graphDim[axis];
case self.NAVIGATE_LEFT:
tmp = -domainDim;
enteringDomainDim = -tmp;
exitingDomainDim = graphDim[axis] - self.domainPosition.getLast();
self.domainPosition.setPosition(domainIndex, tmp);
self.domainPosition.shiftLeftBy(enteringDomainDim);
return tmp;
}
}
svg.append("rect")
.attr("width", function(d) { return w(d, true) - options.domainGutter - options.cellPadding; })
.attr("height", function(d) { return h(d, true) - options.domainGutter - options.cellPadding; })
.attr("class", "domain-background")
;
// =========================================================================//
// PAINTING SUBDOMAINS //
// =========================================================================//
var subDomainSvgGroup = svg.append("svg")
.attr("x", function() {
if (options.label.position === "left") {
return self.domainHorizontalLabelWidth + options.domainMargin[3];
} else {
return options.domainMargin[3];
}
})
.attr("y", function() {
if (options.label.position === "top") {
return self.domainVerticalLabelHeight + options.domainMargin[0];
} else {
return options.domainMargin[0];
}
})
.attr("class", "graph-subdomain-group")
;
var rect = subDomainSvgGroup
.selectAll("g")
.data(function(d) { return self._domains.get(d); })
.enter()
.append("g")
;
rect
.append("rect")
.attr("class", function(d) {
return "graph-rect" + self.getHighlightClassName(d.t) + (options.onClick !== null ? " hover_cursor": "");
})
.attr("width", options.cellSize)
.attr("height", options.cellSize)
.attr("x", function(d) { return self.positionSubDomainX(d.t); })
.attr("y", function(d) { return self.positionSubDomainY(d.t); })
.on("click", function(d) {
if (options.onClick !== null) {
return self.onClick(new Date(d.t), d.v);
}
})
.call(function(selection) {
if (options.cellRadius > 0) {
selection
.attr("rx", options.cellRadius)
.attr("ry", options.cellRadius)
;
}
if (self.legendScale !== null && options.legendColors !== null && options.legendColors.hasOwnProperty("base")) {
selection.attr("fill", options.legendColors.base);
}
if (options.tooltip) {
selection.on("mouseover", function(d) {
var domainNode = this.parentNode.parentNode;
self.tooltip
.html(self.getSubDomainTitle(d))
.attr("style", "display: block;")
;
var tooltipPositionX = self.positionSubDomainX(d.t) - self.tooltip[0][0].offsetWidth/2 + options.cellSize/2;
var tooltipPositionY = self.positionSubDomainY(d.t) - self.tooltip[0][0].offsetHeight - options.cellSize/2;
// Offset by the domain position
tooltipPositionX += parseInt(domainNode.getAttribute("x"), 10);
tooltipPositionY += parseInt(domainNode.getAttribute("y"), 10);
// Offset by the calendar position (when legend is left/top)
tooltipPositionX += parseInt(self.root.select(".graph").attr("x"), 10);
tooltipPositionY += parseInt(self.root.select(".graph").attr("y"), 10);
// Offset by the inside domain position (when label is left/top)
tooltipPositionX += parseInt(domainNode.parentNode.getAttribute("x"), 10);
tooltipPositionY += parseInt(domainNode.parentNode.getAttribute("y"), 10);
self.tooltip.attr("style",
"display: block; " +
"left: " + tooltipPositionX + "px; " +
"top: " + tooltipPositionY + "px;")
;
});
selection.on("mouseout", function() {
self.tooltip
.attr("style", "display:none")
.html("");
});
}
})
;
// Appending a title to each subdomain
if (!options.tooltip) {
rect.append("title").text(function(d){ return self.formatDate(new Date(d.t), options.subDomainDateFormat); });
}
// =========================================================================//
// PAINTING LABEL //
// =========================================================================//
if (options.domainLabelFormat !== "") {
svg.append("text")
.attr("class", "graph-label")
.attr("y", function(d) {
var y = options.domainMargin[0];
switch(options.label.position) {
case "top":
y += self.domainVerticalLabelHeight/2;
break;
case "bottom":
y += h(d) + self.domainVerticalLabelHeight/2;
}
return y + options.label.offset.y *
(
((options.label.rotate === "right" && options.label.position === "right") ||
(options.label.rotate === "left" && options.label.position === "left")) ?
-1: 1
);
})
.attr("x", function(d){
var x = options.domainMargin[3];
switch(options.label.position) {
case "right":
x += w(d);
break;
case "bottom":
case "top":
x += w(d)/2;
}
if (options.label.align === "right") {
return x + self.domainHorizontalLabelWidth - options.label.offset.x *
(options.label.rotate === "right" ? -1: 1);
}
return x + options.label.offset.x;
})
.attr("text-anchor", function() {
switch(options.label.align) {
case "start":
case "left":
return "start";
case "end":
case "right":
return "end";
default:
return "middle";
}
})
.attr("dominant-baseline", function() { return self.verticalDomainLabel ? "middle": "top"; })
.text(function(d) { return self.formatDate(new Date(d), options.domainLabelFormat); })
.call(domainRotate)
;
}
function domainRotate(selection) {
switch (options.label.rotate) {
case "right":
selection
.attr("transform", function(d) {
var s = "rotate(90), ";
switch(options.label.position) {
case "right":
s += "translate(-" + w(d) + " , -" + w(d) + ")";
break;
case "left":
s += "translate(0, -" + self.domainHorizontalLabelWidth + ")";
break;
}
return s;
});
break;
case "left":
selection
.attr("transform", function(d) {
var s = "rotate(270), ";
switch(options.label.position) {
case "right":
s += "translate(-" + (w(d) + self.domainHorizontalLabelWidth) + " , " + w(d) + ")";
break;
case "left":
s += "translate(-" + (self.domainHorizontalLabelWidth) + " , " + self.domainHorizontalLabelWidth + ")";
break;
}
return s;
});
break;
}
}
// =========================================================================//
// PAINTING DOMAIN SUBDOMAIN CONTENT //
// =========================================================================//
if (options.subDomainTextFormat !== null) {
rect
.append("text")
.attr("class", function(d) { return "subdomain-text" + self.getHighlightClassName(d.t); })
.attr("x", function(d) { return self.positionSubDomainX(d.t) + options.cellSize/2; })
.attr("y", function(d) { return self.positionSubDomainY(d.t) + options.cellSize/2; })
.attr("text-anchor", "middle")
.attr("dominant-baseline", "central")
.text(function(d){
return self.formatDate(new Date(d.t), options.subDomainTextFormat);
})
;
}
// =========================================================================//
// ANIMATION //
// =========================================================================//
if (navigationDir !== false) {
domainSvg.transition().duration(options.animationDuration)
.attr("x", function(d){
return options.verticalOrientation ? 0: self.domainPosition.getPosition(d);
})
.attr("y", function(d){
return options.verticalOrientation? self.domainPosition.getPosition(d): 0;
})
;
}
var tempWidth = self.graphDim.width;
var tempHeight = self.graphDim.height;
if (options.verticalOrientation) {
self.graphDim.height += enteringDomainDim - exitingDomainDim;
} else {
self.graphDim.width += enteringDomainDim - exitingDomainDim;
}
// At the time of exit, domainsWidth and domainsHeight already automatically shifted
domainSvg.exit().transition().duration(options.animationDuration)
.attr("x", function(d){
if (options.verticalOrientation) {
return 0;
} else {
switch(navigationDir) {
case self.NAVIGATE_LEFT:
return Math.min(self.graphDim.width, tempWidth);
case self.NAVIGATE_RIGHT:
return -w(d, true);
}
}
})
.attr("y", function(d){
if (options.verticalOrientation) {
switch(navigationDir) {
case self.NAVIGATE_LEFT:
return Math.min(self.graphDim.height, tempHeight);
case self.NAVIGATE_RIGHT:
return -h(d, true);
}
} else {
return 0;
}
})
.remove()
;
// Resize the root container
self.resize();
};
};
CalHeatMap.prototype = {
/**
* Validate and merge user settings with default settings
*
* @param {object} settings User settings
* @return {bool} False if settings contains error
*/
/* jshint maxstatements:false */
init: function(settings) {
"use strict";
var parent = this;
var options = parent.options = mergeRecursive(parent.options, settings);
// Fatal errors
// Stop script execution on error
validateDomainType();
validateSelector(options.itemSelector, false, "itemSelector");
if (parent.allowedDataType.indexOf(options.dataType) === -1) {
throw new Error("The data type '" + options.dataType + "' is not valid data type");
}
if (d3.select(options.itemSelector)[0][0] === null) {
throw new Error("The node '" + options.itemSelector + "' specified in itemSelector does not exists");
}
try {
validateSelector(options.nextSelector, true, "nextSelector");
validateSelector(options.previousSelector, true, "previousSelector");
} catch(error) {
console.log(error.message);
return false;
}
// If other settings contains error, will fallback to default
if (!settings.hasOwnProperty("subDomain")) {
this.options.subDomain = getOptimalSubDomain(settings.domain);
}
if (typeof options.itemNamespace !== "string" || options.itemNamespace === "") {
console.log("itemNamespace can not be empty, falling back to cal-heatmap");
options.itemNamespace = "cal-heatmap";
}
// Don't touch these settings
var s = ["data", "onComplete", "onClick", "afterLoad", "afterLoadData", "afterLoadPreviousDomain", "afterLoadNextDomain"];
for (var k in s) {
if (settings.hasOwnProperty(s[k])) {
options[s[k]] = settings[s[k]];
}
}
options.subDomainDateFormat = (typeof options.subDomainDateFormat === "string" || typeof options.subDomainDateFormat === "function" ? options.subDomainDateFormat : this._domainType[options.subDomain].format.date);
options.domainLabelFormat = (typeof options.domainLabelFormat === "string" || typeof options.domainLabelFormat === "function" ? options.domainLabelFormat : this._domainType[options.domain].format.legend);
options.subDomainTextFormat = ((typeof options.subDomainTextFormat === "string" && options.subDomainTextFormat !== "") || typeof options.subDomainTextFormat === "function" ? options.subDomainTextFormat : null);
options.domainMargin = expandMarginSetting(options.domainMargin);
options.legendMargin = expandMarginSetting(options.legendMargin);
options.highlight = parent.expandDateSetting(options.highlight);
options.itemName = expandItemName(options.itemName);
options.colLimit = parseColLimit(options.colLimit);
options.rowLimit = parseRowLimit(options.rowLimit);
if (!settings.hasOwnProperty("legendMargin")) {
autoAddLegendMargin();
}
autoAlignLabel();
/**
* Validate that a queryString is valid
*
* @param {Element|string|bool} selector The queryString to test
* @param {bool} canBeFalse Whether false is an accepted and valid value
* @param {string} name Name of the tested selector
* @throws {Error} If the selector is not valid
* @return {bool} True if the selector is a valid queryString
*/
function validateSelector(selector, canBeFalse, name) {
if (((canBeFalse && selector === false) || selector instanceof Element || typeof selector === "string") && selector !== "") {
return true;
}
throw new Error("The " + name + " is not valid");
}
/**
* Return the optimal subDomain for the specified domain
*
* @param {string} domain a domain name
* @return {string} the subDomain name
*/
function getOptimalSubDomain(domain) {
switch(domain) {
case "year":
return "month";
case "month":
return "day";
case "week":
return "day";
case "day":
return "hour";
default:
return "min";
}
}
/**
* Ensure that the domain and subdomain are valid
*
* @throw {Error} when domain or subdomain are not valid
* @return {bool} True if domain and subdomain are valid and compatible
*/
function validateDomainType() {
if (!parent._domainType.hasOwnProperty(options.domain) || options.domain === "min" || options.domain.substring(0, 2) === "x_") {
throw new Error("The domain '" + options.domain + "' is not valid");
}
if (!parent._domainType.hasOwnProperty(options.subDomain) || options.subDomain === "year") {
throw new Error("The subDomain '" + options.subDomain + "' is not valid");
}
if (parent._domainType[options.domain].level <= parent._domainType[options.subDomain].level) {
throw new Error("'" + options.subDomain + "' is not a valid subDomain to '" + options.domain + "'");
}
return true;
}
/**
* Fine-tune the label alignement depending on its position
*
* @return void
*/
function autoAlignLabel() {
// Auto-align label, depending on it's position
if (!settings.hasOwnProperty("label") || (settings.hasOwnProperty("label") && !settings.label.hasOwnProperty("align"))) {
switch(options.label.position) {
case "left":
options.label.align = "right";
break;
case "right":
options.label.align = "left";
break;
default:
options.label.align = "center";
}
if (options.label.rotate === "left") {
options.label.align = "right";
} else if (options.label.rotate === "right") {
options.label.align = "left";
}
}
if (!settings.hasOwnProperty("label") || (settings.hasOwnProperty("label") && !settings.label.hasOwnProperty("offset"))) {
if (options.label.position === "left" || options.label.position === "right") {
options.label.offset = {
x: 10,
y: 15
};
}
}
}
/**
* If not specified, add some margin around the legend depending on its position
*
* @return void
*/
function autoAddLegendMargin() {
switch(options.legendVerticalPosition) {
case "top":
options.legendMargin[2] = parent.DEFAULT_LEGEND_MARGIN;
break;
case "bottom":
options.legendMargin[0] = parent.DEFAULT_LEGEND_MARGIN;
break;
case "middle":
case "center":
options.legendMargin[options.legendHorizontalPosition === "right" ? 3 : 1] = parent.DEFAULT_LEGEND_MARGIN;
}
}
/**
* Expand a number of an array of numbers to an usable 4 values array
*
* @param {integer|array} value
* @return {array} array
*/
function expandMarginSetting(value) {
if (typeof value === "number") {
value = [value];
}
if (!Array.isArray(value)) {
console.log("Margin only takes an integer or an array of integers");
value = [0];
}
switch(value.length) {
case 1:
return [value[0], value[0], value[0], value[0]];
case 2:
return [value[0], value[1], value[0], value[1]];
case 3:
return [value[0], value[1], value[2], value[1]];
case 4:
return value;
default:
return value.slice(0, 4);
}
}
/**
* Convert a string to an array like [singular-form, plural-form]
*
* @param {string|array} value Date to convert
* @return {array} An array like [singular-form, plural-form]
*/
function expandItemName(value) {
if (typeof value === "string") {
return [value, value + (value !== "" ? "s" : "")];
}
if (Array.isArray(value)) {
if (value.length === 1) {
return [value[0], value[0] + "s"];
} else if (value.length > 2) {
return value.slice(0, 2);
}
return value;
}
return ["item", "items"];
}
function parseColLimit(value) {
return value > 0 ? value : null;
}
function parseRowLimit(value) {
if (value > 0 && options.colLimit > 0) {
console.log("colLimit and rowLimit are mutually exclusive, rowLimit will be ignored");
return null;
}
return value > 0 ? value : null;
}
return this._init();
},
/**
* Convert a keyword or an array of keyword/date to an array of date objects
*
* @param {string|array|Date} value Data to convert
* @return {array} An array of Dates
*/
expandDateSetting: function(value) {
"use strict";
if (!Array.isArray(value)) {
value = [value];
}
return value.map(function(data) {
if (data === "now") {
return new Date();
}
if (data instanceof Date) {
return data;
}
return false;
}).filter(function(d) { return d !== false; });
},
/**
* Fill the calendar by coloring the cells
*
* @param array svg An array of html node to apply the transformation to (optional)
* It's used to limit the painting to only a subset of the calendar
* @return void
*/
fill: function(svg) {
"use strict";
var parent = this;
var options = parent.options;
if (arguments.length === 0) {
svg = parent.root.selectAll(".graph-domain");
}
var rect = svg
.selectAll("svg").selectAll("g")
.data(function(d) { return parent._domains.get(d); })
;
/**
* Colorize the cell via a style attribute if enabled
*/
function addStyle(element) {
if (parent.legendScale === null) {
return false;
}
element.attr("fill", function(d) {
if (d.v === null && (options.hasOwnProperty("considerMissingDataAsZero") && !options.considerMissingDataAsZero)) {
if (options.legendColors.hasOwnProperty("base")) {
return options.legendColors.base;
}
}
if (options.legendColors !== null && options.legendColors.hasOwnProperty("empty") &&
(d.v === 0 || (d.v === null && options.hasOwnProperty("considerMissingDataAsZero") && options.considerMissingDataAsZero))
) {
return options.legendColors.empty;
}
if (d.v < 0 && options.legend[0] > 0 && options.legendColors !== null && options.legendColors.hasOwnProperty("overflow")) {
return options.legendColors.overflow;
}
return parent.legendScale(Math.min(d.v, options.legend[options.legend.length-1]));
});
}
rect.transition().duration(options.animationDuration).select("rect")
.attr("class", function(d) {
var htmlClass = parent.getHighlightClassName(d.t).trim().split(" ");
var pastDate = parent.dateIsLessThan(d.t, new Date());
var sameDate = parent.dateIsEqual(d.t, new Date());
if (parent.legendScale === null ||
(d.v === null && (options.hasOwnProperty("considerMissingDataAsZero") && !options.considerMissingDataAsZero) &&!options.legendColors.hasOwnProperty("base"))
) {
htmlClass.push("graph-rect");
}
if (sameDate) {
htmlClass.push("now");
} else if (!pastDate) {
htmlClass.push("future");
}
if (d.v !== null) {
htmlClass.push(parent.Legend.getClass(d.v, (parent.legendScale === null)));
} else if (options.considerMissingDataAsZero && pastDate) {
htmlClass.push(parent.Legend.getClass(0, (parent.legendScale === null)));
}
if (options.onClick !== null) {
htmlClass.push("hover_cursor");
}
return htmlClass.join(" ");
})
.call(addStyle)
;
rect.transition().duration(options.animationDuration).select("title")
.text(function(d) { return parent.getSubDomainTitle(d); })
;
function formatSubDomainText(element) {
if (typeof options.subDomainTextFormat === "function") {
element.text(function(d) { return options.subDomainTextFormat(d.t, d.v); });
}
}
/**
* Change the subDomainText class if necessary
* Also change the text, e.g when text is representing the value
* instead of the date
*/
rect.transition().duration(options.animationDuration).select("text")
.attr("class", function(d) { return "subdomain-text" + parent.getHighlightClassName(d.t); })
.call(formatSubDomainText)
;
},
// =========================================================================//
// EVENTS CALLBACK //
// =========================================================================//
/**
* Helper method for triggering event callback
*
* @param string eventName Name of the event to trigger
* @param array successArgs List of argument to pass to the callback
* @param boolean skip Whether to skip the event triggering
* @return mixed True when the triggering was skipped, false on error, else the callback function
*/
triggerEvent: function(eventName, successArgs, skip) {
"use strict";
if ((arguments.length === 3 && skip) || this.options[eventName] === null) {
return true;
}
if (typeof this.options[eventName] === "function") {
if (typeof successArgs === "function") {
successArgs = successArgs();
}
return this.options[eventName].apply(this, successArgs);
} else {
console.log("Provided callback for " + eventName + " is not a function.");
return false;
}
},
/**
* Event triggered on a mouse click on a subDomain cell
*
* @param Date d Date of the subdomain block
* @param int itemNb Number of items in that date
*/
onClick: function(d, itemNb) {
"use strict";
return this.triggerEvent("onClick", [d, itemNb]);
},
/**
* Event triggered after drawing the calendar, byt before filling it with data
*/
afterLoad: function() {
"use strict";
return this.triggerEvent("afterLoad");
},
/**
* Event triggered after completing drawing and filling the calendar
*/
onComplete: function() {
"use strict";
var response = this.triggerEvent("onComplete", [], this._completed);
this._completed = true;
return response;
},
/**
* Event triggered after shifting the calendar one domain back
*
* @param Date start Domain start date
* @param Date end Domain end date
*/
afterLoadPreviousDomain: function(start) {
"use strict";
var parent = this;
return this.triggerEvent("afterLoadPreviousDomain", function() {
var subDomain = parent.getSubDomain(start);
return [subDomain.shift(), subDomain.pop()];
});
},
/**
* Event triggered after shifting the calendar one domain above
*
* @param Date start Domain start date
* @param Date end Domain end date
*/
afterLoadNextDomain: function(start) {
"use strict";
var parent = this;
return this.triggerEvent("afterLoadNextDomain", function() {
var subDomain = parent.getSubDomain(start);
return [subDomain.shift(), subDomain.pop()];
});
},
/**
* Event triggered after loading the leftmost domain allowed by minDate
*
* @param boolean reached True if the leftmost domain was reached
*/
onMinDomainReached: function(reached) {
"use strict";
this._minDomainReached = reached;
return this.triggerEvent("onMinDomainReached", [reached]);
},
/**
* Event triggered after loading the rightmost domain allowed by maxDate
*
* @param boolean reached True if the rightmost domain was reached
*/
onMaxDomainReached: function(reached) {
"use strict";
this._maxDomainReached = reached;
return this.triggerEvent("onMaxDomainReached", [reached]);
},
checkIfMinDomainIsReached: function(date, upperBound) {
"use strict";
if (this.minDomainIsReached(date)) {
this.onMinDomainReached(true);
}
if (arguments.length === 2) {
if (this._maxDomainReached && !this.maxDomainIsReached(upperBound)) {
this.onMaxDomainReached(false);
}
}
},
checkIfMaxDomainIsReached: function(date, lowerBound) {
"use strict";
if (this.maxDomainIsReached(date)) {
this.onMaxDomainReached(true);
}
if (arguments.length === 2) {
if (this._minDomainReached && !this.minDomainIsReached(lowerBound)) {
this.onMinDomainReached(false);
}
}
},
// =========================================================================//
// FORMATTER //
// =========================================================================//
formatNumber: d3.format(",g"),
formatDate: function(d, format) {
"use strict";
if (arguments.length < 2) {
format = "title";
}
if (typeof format === "function") {
return format(d);
} else {
var f = d3.time.format(format);
return f(d);
}
},
getSubDomainTitle: function(d) {
"use strict";
if (d.v === null && !this.options.considerMissingDataAsZero) {
return (this.options.subDomainTitleFormat.empty).format({
date: this.formatDate(new Date(d.t), this.options.subDomainDateFormat)
});
} else {
var value = d.v;
// Consider null as 0
if (value === null && this.options.considerMissingDataAsZero) {
value = 0;
}
return (this.options.subDomainTitleFormat.filled).format({
count: this.formatNumber(value),
name: this.options.itemName[(value !== 1 ? 1: 0)],
connector: this._domainType[this.options.subDomain].format.connector,
date: this.formatDate(new Date(d.t), this.options.subDomainDateFormat)
});
}
},
// =========================================================================//
// DOMAIN NAVIGATION //
// =========================================================================//
/**
* Shift the calendar one domain forward
*
* The new domain is loaded only if it's not beyond maxDate
*
* @param int n Number of domains to load
* @return bool True if the next domain was loaded, else false
*/
loadNextDomain: function(n) {
"use strict";
if (this._maxDomainReached || n === 0) {
return false;
}
var bound = this.loadNewDomains(this.NAVIGATE_RIGHT, this.getDomain(this.getNextDomain(), n));
this.afterLoadNextDomain(bound.end);
this.checkIfMaxDomainIsReached(this.getNextDomain().getTime(), bound.start);
return true;
},
/**
* Shift the calendar one domain backward
*
* The previous domain is loaded only if it's not beyond the minDate
*
* @param int n Number of domains to load
* @return bool True if the previous domain was loaded, else false
*/
loadPreviousDomain: function(n) {
"use strict";
if (this._minDomainReached || n === 0) {
return false;
}
var bound = this.loadNewDomains(this.NAVIGATE_LEFT, this.getDomain(this.getDomainKeys()[0], -n).reverse());
this.afterLoadPreviousDomain(bound.start);
this.checkIfMinDomainIsReached(bound.start, bound.end);
return true;
},
loadNewDomains: function(direction, newDomains) {
"use strict";
var parent = this;
var backward = direction === this.NAVIGATE_LEFT;
var i = -1;
var total = newDomains.length;
var domains = this.getDomainKeys();
function buildSubDomain(d) {
return {t: parent._domainType[parent.options.subDomain].extractUnit(d), v: null};
}
// Remove out of bound domains from list of new domains to prepend
while (++i < total) {
if (backward && this.minDomainIsReached(newDomains[i])) {
newDomains = newDomains.slice(0, i+1);
break;
}
if (!backward && this.maxDomainIsReached(newDomains[i])) {
newDomains = newDomains.slice(0, i);
break;
}
}
newDomains = newDomains.slice(-this.options.range);
for (i = 0, total = newDomains.length; i < total; i++) {
this._domains.set(
newDomains[i].getTime(),
this.getSubDomain(newDomains[i]).map(buildSubDomain)
);
this._domains.remove(backward ? domains.pop() : domains.shift());
}
domains = this.getDomainKeys();
if (backward) {
newDomains = newDomains.reverse();
}
this.paint(direction);
this.getDatas(
this.options.data,
newDomains[0],
this.getSubDomain(newDomains[newDomains.length-1]).pop(),
function() {
parent.fill(parent.lastInsertedSvg);
}
);
return {
start: newDomains[backward ? 0 : 1],
end: domains[domains.length-1]
};
},
/**
* Return whether a date is inside the scope determined by maxDate
*
* @param int datetimestamp The timestamp in ms to test
* @return bool True if the specified date correspond to the calendar upper bound
*/
maxDomainIsReached: function(datetimestamp) {
"use strict";
return (this.options.maxDate !== null && (this.options.maxDate.getTime() < datetimestamp));
},
/**
* Return whether a date is inside the scope determined by minDate
*
* @param int datetimestamp The timestamp in ms to test
* @return bool True if the specified date correspond to the calendar lower bound
*/
minDomainIsReached: function (datetimestamp) {
"use strict";
return (this.options.minDate !== null && (this.options.minDate.getTime() >= datetimestamp));
},
/**
* Return the list of the calendar's domain timestamp
*
* @return Array a sorted array of timestamp
*/
getDomainKeys: function() {
"use strict";
return this._domains.keys()
.map(function(d) { return parseInt(d, 10); })
.sort(function(a,b) { return a-b; });
},
// =========================================================================//
// POSITIONNING //
// =========================================================================//
positionSubDomainX: function(d) {
"use strict";
var index = this._domainType[this.options.subDomain].position.x(new Date(d));
return index * this.options.cellSize + index * this.options.cellPadding;
},
positionSubDomainY: function(d) {
"use strict";
var index = this._domainType[this.options.subDomain].position.y(new Date(d));
return index * this.options.cellSize + index * this.options.cellPadding;
},
getSubDomainColumnNumber: function(d) {
"use strict";
if (this.options.rowLimit > 0) {
var i = this._domainType[this.options.subDomain].maxItemNumber;
if (typeof i === "function") {
i = i(d);
}
return Math.ceil(i / this.options.rowLimit);
}
var j = this._domainType[this.options.subDomain].defaultColumnNumber;
if (typeof j === "function") {
j = j(d);
}
return this.options.colLimit || j;
},
getSubDomainRowNumber: function(d) {
"use strict";
if (this.options.colLimit > 0) {
var i = this._domainType[this.options.subDomain].maxItemNumber;
if (typeof i === "function") {
i = i(d);
}
return Math.ceil(i / this.options.colLimit);
}
var j = this._domainType[this.options.subDomain].defaultRowNumber;
if (typeof j === "function") {
j = j(d);
}
return this.options.rowLimit || j;
},
/**
* Return a classname if the specified date should be highlighted
*
* @param timestamp date Date of the current subDomain
* @return String the highlight class
*/
getHighlightClassName: function(d) {
"use strict";
d = new Date(d);
if (this.options.highlight.length > 0) {
for (var i in this.options.highlight) {
if (this.dateIsEqual(this.options.highlight[i], d)) {
return this.isNow(this.options.highlight[i]) ? " highlight-now": " highlight";
}
}
}
return "";
},
/**
* Return whether the specified date is now,
* according to the type of subdomain
*
* @param Date d The date to compare
* @return bool True if the date correspond to a subdomain cell
*/
isNow: function(d) {
"use strict";
return this.dateIsEqual(d, new Date());
},
/**
* Return whether 2 dates are equals
* This function is subdomain-aware,
* and dates comparison are dependent of the subdomain
*
* @param Date dateA First date to compare
* @param Date dateB Secon date to compare
* @return bool true if the 2 dates are equals
*/
/* jshint maxcomplexity: false */
dateIsEqual: function(dateA, dateB) {
"use strict";
if(!(dateA instanceof Date)) {
dateA = new Date(dateA);
}
if (!(dateB instanceof Date)) {
dateB = new Date(dateB);
}
switch(this.options.subDomain) {
case "x_min":
case "min":
return dateA.getFullYear() === dateB.getFullYear() &&
dateA.getMonth() === dateB.getMonth() &&
dateA.getDate() === dateB.getDate() &&
dateA.getHours() === dateB.getHours() &&
dateA.getMinutes() === dateB.getMinutes();
case "x_hour":
case "hour":
return dateA.getFullYear() === dateB.getFullYear() &&
dateA.getMonth() === dateB.getMonth() &&
dateA.getDate() === dateB.getDate() &&
dateA.getHours() === dateB.getHours();
case "x_day":
case "day":
return dateA.getFullYear() === dateB.getFullYear() &&
dateA.getMonth() === dateB.getMonth() &&
dateA.getDate() === dateB.getDate();
case "x_week":
case "week":
return dateA.getFullYear() === dateB.getFullYear() &&
this.getWeekNumber(dateA) === this.getWeekNumber(dateB);
case "x_month":
case "month":
return dateA.getFullYear() === dateB.getFullYear() &&
dateA.getMonth() === dateB.getMonth();
default:
return false;
}
},
/**
* Returns wether or not dateA is less than or equal to dateB. This function is subdomain aware.
* Performs automatic conversion of values.
* @param dateA may be a number or a Date
* @param dateB may be a number or a Date
* @returns {boolean}
*/
dateIsLessThan: function(dateA, dateB) {
"use strict";
if(!(dateA instanceof Date)) {
dateA = new Date(dateA);
}
if (!(dateB instanceof Date)) {
dateB = new Date(dateB);
}
function normalizedMillis(date, subdomain) {
switch(subdomain) {
case "x_min":
case "min":
return new Date(date.getFullYear(), date.getMonth(), date.getDate(), date.getHours(), date.getMinutes()).getTime();
case "x_hour":
case "hour":
return new Date(date.getFullYear(), date.getMonth(), date.getDate(), date.getHours()).getTime();
case "x_day":
case "day":
return new Date(date.getFullYear(), date.getMonth(), date.getDate()).getTime();
case "x_week":
case "week":
case "x_month":
case "month":
return new Date(date.getFullYear(), date.getMonth()).getTime();
default:
return date.getTime();
}
}
return normalizedMillis(dateA, this.options.subDomain) < normalizedMillis(dateB, this.options.subDomain);
},
// =========================================================================//
// DATE COMPUTATION //
// =========================================================================//
/**
* Return the day of the year for the date
* @param Date
* @return int Day of the year [1,366]
*/
getDayOfYear: d3.time.format("%j"),
/**
* Return the week number of the year
* Monday as the first day of the week
* @return int Week number [0-53]
*/
getWeekNumber: function(d) {
"use strict";
var f = this.options.weekStartOnMonday === true ? d3.time.format("%W"): d3.time.format("%U");
return f(d);
},
/**
* Return the week number, relative to its month
*
* @param int|Date d Date or timestamp in milliseconds
* @return int Week number, relative to the month [0-5]
*/
getMonthWeekNumber: function (d) {
"use strict";
if (typeof d === "number") {
d = new Date(d);
}
var monthFirstWeekNumber = this.getWeekNumber(new Date(d.getFullYear(), d.getMonth()));
return this.getWeekNumber(d) - monthFirstWeekNumber - 1;
},
/**
* Return the number of weeks in the dates' year
*
* @param int|Date d Date or timestamp in milliseconds
* @return int Number of weeks in the date's year
*/
getWeekNumberInYear: function(d) {
"use strict";
if (typeof d === "number") {
d = new Date(d);
}
},
/**
* Return the number of days in the date's month
*
* @param int|Date d Date or timestamp in milliseconds
* @return int Number of days in the date's month
*/
getDayCountInMonth: function(d) {
"use strict";
return this.getEndOfMonth(d).getDate();
},
/**
* Return the number of days in the date's year
*
* @param int|Date d Date or timestamp in milliseconds
* @return int Number of days in the date's year
*/
getDayCountInYear: function(d) {
"use strict";
if (typeof d === "number") {
d = new Date(d);
}
return (new Date(d.getFullYear(), 1, 29).getMonth() === 1) ? 366 : 365;
},
/**
* Get the weekday from a date
*
* Return the week day number (0-6) of a date,
* depending on whether the week start on monday or sunday
*
* @param Date d
* @return int The week day number (0-6)
*/
getWeekDay: function(d) {
"use strict";
if (this.options.weekStartOnMonday === false) {
return d.getDay();
}
return d.getDay() === 0 ? 6 : (d.getDay()-1);
},
/**
* Get the last day of the month
* @param Date|int d Date or timestamp in milliseconds
* @return Date Last day of the month
*/
getEndOfMonth: function(d) {
"use strict";
if (typeof d === "number") {
d = new Date(d);
}
return new Date(d.getFullYear(), d.getMonth()+1, 0);
},
/**
*
* @param Date date
* @param int count
* @param string step
* @return Date
*/
jumpDate: function(date, count, step) {
"use strict";
var d = new Date(date);
switch(step) {
case "hour":
d.setHours(d.getHours() + count);
break;
case "day":
d.setHours(d.getHours() + count * 24);
break;
case "week":
d.setHours(d.getHours() + count * 24 * 7);
break;
case "month":
d.setMonth(d.getMonth() + count);
break;
case "year":
d.setFullYear(d.getFullYear() + count);
}
return new Date(d);
},
// =========================================================================//
// DOMAIN COMPUTATION //
// =========================================================================//
/**
* Return all the minutes between 2 dates
*
* @param Date d date A date
* @param int|date range Number of minutes in the range, or a stop date
* @return array An array of minutes
*/
getMinuteDomain: function (d, range) {
"use strict";
var start = new Date(d.getFullYear(), d.getMonth(), d.getDate(), d.getHours());
var stop = null;
if (range instanceof Date) {
stop = new Date(range.getFullYear(), range.getMonth(), range.getDate(), range.getHours());
} else {
stop = new Date(+start + range * 1000 * 60);
}
return d3.time.minutes(Math.min(start, stop), Math.max(start, stop));
},
/**
* Return all the hours between 2 dates
*
* @param Date d A date
* @param int|date range Number of hours in the range, or a stop date
* @return array An array of hours
*/
getHourDomain: function (d, range) {
"use strict";
var start = new Date(d.getFullYear(), d.getMonth(), d.getDate(), d.getHours());
var stop = null;
if (range instanceof Date) {
stop = new Date(range.getFullYear(), range.getMonth(), range.getDate(), range.getHours());
} else {
stop = new Date(start);
stop.setHours(stop.getHours() + range);
}
var domains = d3.time.hours(Math.min(start, stop), Math.max(start, stop));
// Passing from DST to standard time
// If there are 25 hours, let's compress the duplicate hours
var i = 0;
var total = domains.length;
for(i = 0; i < total; i++) {
if (i > 0 && (domains[i].getHours() === domains[i-1].getHours())) {
this.DSTDomain.push(domains[i].getTime());
domains.splice(i, 1);
break;
}
}
// d3.time.hours is returning more hours than needed when changing
// from DST to standard time, because there is really 2 hours between
// 1am and 2am!
if (typeof range === "number" && domains.length > Math.abs(range)) {
domains.splice(domains.length-1, 1);
}
return domains;
},
/**
* Return all the days between 2 dates
*
* @param Date d A date
* @param int|date range Number of days in the range, or a stop date
* @return array An array of weeks
*/
getDayDomain: function (d, range) {
"use strict";
var start = new Date(d.getFullYear(), d.getMonth(), d.getDate());
var stop = null;
if (range instanceof Date) {
stop = new Date(range.getFullYear(), range.getMonth(), range.getDate());
} else {
stop = new Date(start);
stop = new Date(stop.setDate(stop.getDate() + parseInt(range, 10)));
}
return d3.time.days(Math.min(start, stop), Math.max(start, stop));
},
/**
* Return all the weeks between 2 dates
*
* @param Date d A date
* @param int|date range Number of minutes in the range, or a stop date
* @return array An array of weeks
*/
getWeekDomain: function (d, range) {
"use strict";
var weekStart;
if (this.options.weekStartOnMonday === false) {
weekStart = new Date(d.getFullYear(), d.getMonth(), d.getDate() - d.getDay());
} else {
if (d.getDay() === 1) {
weekStart = new Date(d.getFullYear(), d.getMonth(), d.getDate());
} else if (d.getDay() === 0) {
weekStart = new Date(d.getFullYear(), d.getMonth(), d.getDate());
weekStart.setDate(weekStart.getDate() - 6);
} else {
weekStart = new Date(d.getFullYear(), d.getMonth(), d.getDate()-d.getDay()+1);
}
}
var endDate = new Date(weekStart);
var stop = range;
if (typeof range !== "object") {
stop = new Date(endDate.setDate(endDate.getDate() + range * 7));
}
return (this.options.weekStartOnMonday === true) ?
d3.time.mondays(Math.min(weekStart, stop), Math.max(weekStart, stop)):
d3.time.sundays(Math.min(weekStart, stop), Math.max(weekStart, stop))
;
},
/**
* Return all the months between 2 dates
*
* @param Date d A date
* @param int|date range Number of months in the range, or a stop date
* @return array An array of months
*/
getMonthDomain: function (d, range) {
"use strict";
var start = new Date(d.getFullYear(), d.getMonth());
var stop = null;
if (range instanceof Date) {
stop = new Date(range.getFullYear(), range.getMonth());
} else {
stop = new Date(start);
stop = stop.setMonth(stop.getMonth()+range);
}
return d3.time.months(Math.min(start, stop), Math.max(start, stop));
},
/**
* Return all the years between 2 dates
*
* @param Date d date A date
* @param int|date range Number of minutes in the range, or a stop date
* @return array An array of hours
*/
getYearDomain: function(d, range){
"use strict";
var start = new Date(d.getFullYear(), 0);
var stop = null;
if (range instanceof Date) {
stop = new Date(range.getFullYear(), 0);
} else {
stop = new Date(d.getFullYear()+range, 0);
}
return d3.time.years(Math.min(start, stop), Math.max(start, stop));
},
/**
* Get an array of domain start dates
*
* @param int|Date date A random date included in the wanted domain
* @param int|Date range Number of dates to get, or a stop date
* @return Array of dates
*/
getDomain: function(date, range) {
"use strict";
if (typeof date === "number") {
date = new Date(date);
}
if (arguments.length < 2) {
range = this.options.range;
}
switch(this.options.domain) {
case "hour" :
var domains = this.getHourDomain(date, range);
// Case where an hour is missing, when passing from standard time to DST
// Missing hour is perfectly acceptabl in subDomain, but not in domains
if (typeof range === "number" && domains.length < range) {
if (range > 0) {
domains.push(this.getHourDomain(domains[domains.length-1], 2)[1]);
} else {
domains.shift(this.getHourDomain(domains[0], -2)[0]);
}
}
return domains;
case "day" :
return this.getDayDomain(date, range);
case "week" :
return this.getWeekDomain(date, range);
case "month":
return this.getMonthDomain(date, range);
case "year" :
return this.getYearDomain(date, range);
}
},
/* jshint maxcomplexity: false */
getSubDomain: function(date) {
"use strict";
if (typeof date === "number") {
date = new Date(date);
}
var parent = this;
/**
* @return int
*/
var computeDaySubDomainSize = function(date, domain) {
switch(domain) {
case "year":
return parent.getDayCountInYear(date);
case "month":
return parent.getDayCountInMonth(date);
case "week":
return 7;
}
};
/**
* @return int
*/
var computeMinSubDomainSize = function(date, domain) {
switch (domain) {
case "hour":
return 60;
case "day":
return 60 * 24;
case "week":
return 60 * 24 * 7;
}
};
/**
* @return int
*/
var computeHourSubDomainSize = function(date, domain) {
switch(domain) {
case "day":
return 24;
case "week":
return 168;
case "month":
return parent.getDayCountInMonth(date) * 24;
}
};
/**
* @return int
*/
var computeWeekSubDomainSize = function(date, domain) {
if (domain === "month") {
var endOfMonth = new Date(date.getFullYear(), date.getMonth()+1, 0);
var endWeekNb = parent.getWeekNumber(endOfMonth);
var startWeekNb = parent.getWeekNumber(new Date(date.getFullYear(), date.getMonth()));
if (startWeekNb > endWeekNb) {
startWeekNb = 0;
endWeekNb++;
}
return endWeekNb - startWeekNb + 1;
} else if (domain === "year") {
return parent.getWeekNumber(new Date(date.getFullYear(), 11, 31));
}
};
switch(this.options.subDomain) {
case "x_min":
case "min" :
return this.getMinuteDomain(date, computeMinSubDomainSize(date, this.options.domain));
case "x_hour":
case "hour" :
return this.getHourDomain(date, computeHourSubDomainSize(date, this.options.domain));
case "x_day":
case "day" :
return this.getDayDomain(date, computeDaySubDomainSize(date, this.options.domain));
case "x_week":
case "week" :
return this.getWeekDomain(date, computeWeekSubDomainSize(date, this.options.domain));
case "x_month":
case "month":
return this.getMonthDomain(date, 12);
}
},
/**
* Get the n-th next domain after the calendar newest (rightmost) domain
* @param int n
* @return Date The start date of the wanted domain
*/
getNextDomain: function(n) {
"use strict";
if (arguments.length === 0) {
n = 1;
}
return this.getDomain(this.jumpDate(this.getDomainKeys().pop(), n, this.options.domain), 1)[0];
},
/**
* Get the n-th domain before the calendar oldest (leftmost) domain
* @param int n
* @return Date The start date of the wanted domain
*/
getPreviousDomain: function(n) {
"use strict";
if (arguments.length === 0) {
n = 1;
}
return this.getDomain(this.jumpDate(this.getDomainKeys().shift(), -n, this.options.domain), 1)[0];
},
// =========================================================================//
// DATAS //
// =========================================================================//
/**
* Fetch and interpret data from the datasource
*
* @param string|object source
* @param Date startDate
* @param Date endDate
* @param function callback
* @param function|boolean afterLoad function used to convert the data into a json object. Use true to use the afterLoad callback
* @param updateMode
*
* @return mixed
* - True if there are no data to load
* - False if data are loaded asynchronously
*/
getDatas: function(source, startDate, endDate, callback, afterLoad, updateMode) {
"use strict";
var self = this;
if (arguments.length < 5) {
afterLoad = true;
}
if (arguments.length < 6) {
updateMode = this.APPEND_ON_UPDATE;
}
var _callback = function(data) {
if (afterLoad !== false) {
if (typeof afterLoad === "function") {
data = afterLoad(data);
} else if (typeof (self.options.afterLoadData) === "function") {
data = self.options.afterLoadData(data);
} else {
console.log("Provided callback for afterLoadData is not a function.");
}
} else if (self.options.dataType === "csv" || self.options.dataType === "tsv") {
data = this.interpretCSV(data);
}
self.parseDatas(data, updateMode, startDate, endDate);
if (typeof callback === "function") {
callback();
}
};
switch(typeof source) {
case "string":
if (source === "") {
_callback({});
return true;
} else {
var url = this.parseURI(source, startDate, endDate);
var requestType = "GET";
if (self.options.dataPostPayload !== null ) {
requestType = "POST";
}
var payload = null;
if (self.options.dataPostPayload !== null) {
payload = this.parseURI(self.options.dataPostPayload, startDate, endDate);
}
switch(this.options.dataType) {
case "json":
d3.json(url, _callback).send(requestType, payload);
break;
case "csv":
d3.csv(url, _callback).send(requestType, payload);
break;
case "tsv":
d3.tsv(url, _callback).send(requestType, payload);
break;
case "txt":
d3.text(url, "text/plain", _callback).send(requestType, payload);
break;
}
}
return false;
case "object":
if (source === Object(source)) {
_callback(source);
return false;
}
/* falls through */
default:
_callback({});
return true;
}
},
/**
* Populate the calendar internal data
*
* @param object data
* @param constant updateMode
* @param Date startDate
* @param Date endDate
*
* @return void
*/
parseDatas: function(data, updateMode, startDate, endDate) {
"use strict";
if (updateMode === this.RESET_ALL_ON_UPDATE) {
this._domains.forEach(function(key, value) {
value.forEach(function(element, index, array) {
array[index].v = null;
});
});
}
var temp = {};
var extractTime = function(d) { return d.t; };
/*jshint forin:false */
for (var d in data) {
var date = new Date(d*1000);
var domainUnit = this.getDomain(date)[0].getTime();
// The current data belongs to a domain that was compressed
// Compress the data for the two duplicate hours into the same hour
if (this.DSTDomain.indexOf(domainUnit) >= 0) {
// Re-assign all data to the first or the second duplicate hours
// depending on which is visible
if (this._domains.has(domainUnit - 3600 * 1000)) {
domainUnit -= 3600 * 1000;
}
}
// Skip if data is not relevant to current domain
if (isNaN(d) || !data.hasOwnProperty(d) || !this._domains.has(domainUnit) || !(domainUnit >= +startDate && domainUnit < +endDate)) {
continue;
}
var subDomainsData = this._domains.get(domainUnit);
if (!temp.hasOwnProperty(domainUnit)) {
temp[domainUnit] = subDomainsData.map(extractTime);
}
var index = temp[domainUnit].indexOf(this._domainType[this.options.subDomain].extractUnit(date));
if (updateMode === this.RESET_SINGLE_ON_UPDATE) {
subDomainsData[index].v = data[d];
} else {
if (!isNaN(subDomainsData[index].v)) {
subDomainsData[index].v += data[d];
} else {
subDomainsData[index].v = data[d];
}
}
}
},
parseURI: function(str, startDate, endDate) {
"use strict";
// Use a timestamp in seconds
str = str.replace(/\{\{t:start\}\}/g, startDate.getTime()/1000);
str = str.replace(/\{\{t:end\}\}/g, endDate.getTime()/1000);
// Use a string date, following the ISO-8601
str = str.replace(/\{\{d:start\}\}/g, startDate.toISOString());
str = str.replace(/\{\{d:end\}\}/g, endDate.toISOString());
return str;
},
interpretCSV: function(data) {
"use strict";
var d = {};
var keys = Object.keys(data[0]);
var i, total;
for (i = 0, total = data.length; i < total; i++) {
d[data[i][keys[0]]] = +data[i][keys[1]];
}
return d;
},
/**
* Handle the calendar layout and dimension
*
* Expand and shrink the container depending on its children dimension
* Also rearrange the children position depending on their dimension,
* and the legend position
*
* @return void
*/
resize: function() {
"use strict";
var parent = this;
var options = parent.options;
var legendWidth = options.displayLegend ? (parent.Legend.getDim("width") + options.legendMargin[1] + options.legendMargin[3]) : 0;
var legendHeight = options.displayLegend ? (parent.Legend.getDim("height") + options.legendMargin[0] + options.legendMargin[2]) : 0;
var graphWidth = parent.graphDim.width - options.domainGutter - options.cellPadding;
var graphHeight = parent.graphDim.height - options.domainGutter - options.cellPadding;
this.root.transition().duration(options.animationDuration)
.attr("width", function() {
if (options.legendVerticalPosition === "middle" || options.legendVerticalPosition === "center") {
return graphWidth + legendWidth;
}
return Math.max(graphWidth, legendWidth);
})
.attr("height", function() {
if (options.legendVerticalPosition === "middle" || options.legendVerticalPosition === "center") {
return Math.max(graphHeight, legendHeight);
}
return graphHeight + legendHeight;
})
;
this.root.select(".graph").transition().duration(options.animationDuration)
.attr("y", function() {
if (options.legendVerticalPosition === "top") {
return legendHeight;
}
return 0;
})
.attr("x", function() {
if (
(options.legendVerticalPosition === "middle" || options.legendVerticalPosition === "center") &&
options.legendHorizontalPosition === "left") {
return legendWidth;
}
return 0;
})
;
},
// =========================================================================//
// PUBLIC API //
// =========================================================================//
/**
* Shift the calendar forward
*/
next: function(n) {
"use strict";
if (arguments.length === 0) {
n = 1;
}
return this.loadNextDomain(n);
},
/**
* Shift the calendar backward
*/
previous: function(n) {
"use strict";
if (arguments.length === 0) {
n = 1;
}
return this.loadPreviousDomain(n);
},
/**
* Jump directly to a specific date
*
* JumpTo will scroll the calendar until the wanted domain with the specified
* date is visible. Unless you set reset to true, the wanted domain
* will not necessarily be the first (leftmost) domain of the calendar.
*
* @param Date date Jump to the domain containing that date
* @param bool reset Whether the wanted domain should be the first domain of the calendar
* @param bool True of the calendar was scrolled
*/
jumpTo: function(date, reset) {
"use strict";
if (arguments.length < 2) {
reset = false;
}
var domains = this.getDomainKeys();
var firstDomain = domains[0];
var lastDomain = domains[domains.length-1];
if (date < firstDomain) {
return this.loadPreviousDomain(this.getDomain(firstDomain, date).length);
} else {
if (reset) {
return this.loadNextDomain(this.getDomain(firstDomain, date).length);
}
if (date > lastDomain) {
return this.loadNextDomain(this.getDomain(lastDomain, date).length);
}
}
return false;
},
/**
* Navigate back to the start date
*
* @since 3.3.8
* @return void
*/
rewind: function() {
"use strict";
this.jumpTo(this.options.start, true);
},
/**
* Update the calendar with new data
*
* @param object|string dataSource The calendar's datasource, same type as this.options.data
* @param boolean|function afterLoad Whether to execute afterLoad() on the data. Pass directly a function
* if you don't want to use the afterLoad() callback
*/
update: function(dataSource, afterLoad, updateMode) {
"use strict";
if (arguments.length < 2) {
afterLoad = true;
}
if (arguments.length < 3) {
updateMode = this.RESET_ALL_ON_UPDATE;
}
var domains = this.getDomainKeys();
var self = this;
this.getDatas(
dataSource,
new Date(domains[0]),
this.getSubDomain(domains[domains.length-1]).pop(),
function() {
self.fill();
},
afterLoad,
updateMode
);
},
/**
* Set the legend
*
* @param array legend an array of integer, representing the different threshold value
* @param array colorRange an array of 2 hex colors, for the minimum and maximum colors
*/
setLegend: function() {
"use strict";
var oldLegend = this.options.legend.slice(0);
if (arguments.length >= 1 && Array.isArray(arguments[0])) {
this.options.legend = arguments[0];
}
if (arguments.length >= 2) {
if (Array.isArray(arguments[1]) && arguments[1].length >= 2) {
this.options.legendColors = [arguments[1][0], arguments[1][1]];
} else {
this.options.legendColors = arguments[1];
}
}
if ((arguments.length > 0 && !arrayEquals(oldLegend, this.options.legend)) || arguments.length >= 2) {
this.Legend.buildColors();
this.fill();
}
this.Legend.redraw(this.graphDim.width - this.options.domainGutter - this.options.cellPadding);
},
/**
* Remove the legend
*
* @return bool False if there is no legend to remove
*/
removeLegend: function() {
"use strict";
if (!this.options.displayLegend) {
return false;
}
this.options.displayLegend = false;
this.Legend.remove();
return true;
},
/**
* Display the legend
*
* @return bool False if the legend was already displayed
*/
showLegend: function() {
"use strict";
if (this.options.displayLegend) {
return false;
}
this.options.displayLegend = true;
this.Legend.redraw(this.graphDim.width - this.options.domainGutter - this.options.cellPadding);
return true;
},
/**
* Highlight dates
*
* Add a highlight class to a set of dates
*
* @since 3.3.5
* @param array Array of dates to highlight
* @return bool True if dates were highlighted
*/
highlight: function(args) {
"use strict";
if ((this.options.highlight = this.expandDateSetting(args)).length > 0) {
this.fill();
return true;
}
return false;
},
/**
* Destroy the calendar
*
* Usage: cal = cal.destroy();
*
* @since 3.3.6
* @param function A callback function to trigger after destroying the calendar
* @return null
*/
destroy: function(callback) {
"use strict";
this.root.transition().duration(this.options.animationDuration)
.attr("width", 0)
.attr("height", 0)
.remove()
.each("end", function() {
if (typeof callback === "function") {
callback();
} else if (typeof callback !== "undefined") {
console.log("Provided callback for destroy() is not a function.");
}
})
;
return null;
},
getSVG: function() {
"use strict";
var styles = {
".cal-heatmap-container": {},
".graph": {},
".graph-rect": {},
"rect.highlight": {},
"rect.now": {},
"rect.highlight-now": {},
"text.highlight": {},
"text.now": {},
"text.highlight-now": {},
".domain-background": {},
".graph-label": {},
".subdomain-text": {},
".q0": {},
".qi": {}
};
for (var j = 1, total = this.options.legend.length+1; j <= total; j++) {
styles[".q" + j] = {};
}
var root = this.root;
var whitelistStyles = [
// SVG specific properties
"stroke", "stroke-width", "stroke-opacity", "stroke-dasharray", "stroke-dashoffset", "stroke-linecap", "stroke-miterlimit",
"fill", "fill-opacity", "fill-rule",
"marker", "marker-start", "marker-mid", "marker-end",
"alignement-baseline", "baseline-shift", "dominant-baseline", "glyph-orientation-horizontal", "glyph-orientation-vertical", "kerning", "text-anchor",
"shape-rendering",
// Text Specific properties
"text-transform", "font-family", "font", "font-size", "font-weight"
];
var filterStyles = function(attribute, property, value) {
if (whitelistStyles.indexOf(property) !== -1) {
styles[attribute][property] = value;
}
};
var getElement = function(e) {
return root.select(e)[0][0];
};
/* jshint forin:false */
for (var element in styles) {
if (!styles.hasOwnProperty(element)) {
continue;
}
var dom = getElement(element);
if (dom === null) {
continue;
}
// The DOM Level 2 CSS way
/* jshint maxdepth: false */
if ("getComputedStyle" in window) {
var cs = getComputedStyle(dom, null);
if (cs.length !== 0) {
for (var i = 0; i < cs.length; i++) {
filterStyles(element, cs.item(i), cs.getPropertyValue(cs.item(i)));
}
// Opera workaround. Opera doesn"t support `item`/`length`
// on CSSStyleDeclaration.
} else {
for (var k in cs) {
if (cs.hasOwnProperty(k)) {
filterStyles(element, k, cs[k]);
}
}
}
// The IE way
} else if ("currentStyle" in dom) {
var css = dom.currentStyle;
for (var p in css) {
filterStyles(element, p, css[p]);
}
}
}
var string = "<svg xmlns=\"http://www.w3.org/2000/svg\" "+
"xmlns:xlink=\"http://www.w3.org/1999/xlink\"><style type=\"text/css\"><![CDATA[ ";
for (var style in styles) {
string += style + " {\n";
for (var l in styles[style]) {
string += "\t" + l + ":" + styles[style][l] + ";\n";
}
string += "}\n";
}
string += "]]></style>";
string += new XMLSerializer().serializeToString(this.root[0][0]);
string += "</svg>";
return string;
}
};
// =========================================================================//
// DOMAIN POSITION COMPUTATION //
// =========================================================================//
/**
* Compute the position of a domain, relative to the calendar
*/
var DomainPosition = function() {
"use strict";
this.positions = d3.map();
};
DomainPosition.prototype.getPosition = function(d) {
"use strict";
return this.positions.get(d);
};
DomainPosition.prototype.getPositionFromIndex = function(i) {
"use strict";
var domains = this.getKeys();
return this.positions.get(domains[i]);
};
DomainPosition.prototype.getLast = function() {
"use strict";
var domains = this.getKeys();
return this.positions.get(domains[domains.length-1]);
};
DomainPosition.prototype.setPosition = function(d, dim) {
"use strict";
this.positions.set(d, dim);
};
DomainPosition.prototype.shiftRightBy = function(exitingDomainDim) {
"use strict";
this.positions.forEach(function(key, value) {
this.set(key, value - exitingDomainDim);
});
var domains = this.getKeys();
this.positions.remove(domains[0]);
};
DomainPosition.prototype.shiftLeftBy = function(enteringDomainDim) {
"use strict";
this.positions.forEach(function(key, value) {
this.set(key, value + enteringDomainDim);
});
var domains = this.getKeys();
this.positions.remove(domains[domains.length-1]);
};
DomainPosition.prototype.getKeys = function() {
"use strict";
return this.positions.keys().sort(function(a, b) {
return parseInt(a, 10) - parseInt(b, 10);
});
};
// =========================================================================//
// LEGEND //
// =========================================================================//
var Legend = function(calendar) {
"use strict";
this.calendar = calendar;
this.computeDim();
if (calendar.options.legendColors !== null) {
this.buildColors();
}
};
Legend.prototype.computeDim = function() {
"use strict";
var options = this.calendar.options; // Shorter accessor for variable name mangling when minifying
this.dim = {
width:
options.legendCellSize * (options.legend.length+1) +
options.legendCellPadding * (options.legend.length),
height:
options.legendCellSize
};
};
Legend.prototype.remove = function() {
"use strict";
this.calendar.root.select(".graph-legend").remove();
this.calendar.resize();
};
Legend.prototype.redraw = function(width) {
"use strict";
if (!this.calendar.options.displayLegend) {
return false;
}
var parent = this;
var calendar = this.calendar;
var legend = calendar.root;
var legendItem;
var options = calendar.options; // Shorter accessor for variable name mangling when minifying
this.computeDim();
var _legend = options.legend.slice(0);
_legend.push(_legend[_legend.length-1]+1);
var legendElement = calendar.root.select(".graph-legend");
if (legendElement[0][0] !== null) {
legend = legendElement;
legendItem = legend
.select("g")
.selectAll("rect").data(_legend)
;
} else {
// Creating the new legend DOM if it doesn't already exist
legend = options.legendVerticalPosition === "top" ? legend.insert("svg", ".graph") : legend.append("svg");
legend
.attr("x", getLegendXPosition())
.attr("y", getLegendYPosition())
;
legendItem = legend
.attr("class", "graph-legend")
.attr("height", parent.getDim("height"))
.attr("width", parent.getDim("width"))
.append("g")
.selectAll().data(_legend)
;
}
legendItem
.enter()
.append("rect")
.call(legendCellLayout)
.attr("class", function(d){ return calendar.Legend.getClass(d, (calendar.legendScale === null)); })
.attr("fill-opacity", 0)
.call(function(selection) {
if (calendar.legendScale !== null && options.legendColors !== null && options.legendColors.hasOwnProperty("base")) {
selection.attr("fill", options.legendColors.base);
}
})
.append("title")
;
legendItem.exit().transition().duration(options.animationDuration)
.attr("fill-opacity", 0)
.remove();
legendItem.transition().delay(function(d, i) { return options.animationDuration * i/10; })
.call(legendCellLayout)
.attr("fill-opacity", 1)
.call(function(element) {
element.attr("fill", function(d, i) {
if (calendar.legendScale === null) {
return "";
}
if (i === 0) {
return calendar.legendScale(d - 1);
}
return calendar.legendScale(options.legend[i-1]);
});
element.attr("class", function(d) { return calendar.Legend.getClass(d, (calendar.legendScale === null)); });
})
;
function legendCellLayout(selection) {
selection
.attr("width", options.legendCellSize)
.attr("height", options.legendCellSize)
.attr("x", function(d, i) {
return i * (options.legendCellSize + options.legendCellPadding);
})
;
}
legendItem.select("title").text(function(d, i) {
if (i === 0) {
return (options.legendTitleFormat.lower).format({
min: options.legend[i],
name: options.itemName[1]
});
} else if (i === _legend.length-1) {
return (options.legendTitleFormat.upper).format({
max: options.legend[i-1],
name: options.itemName[1]
});
} else {
return (options.legendTitleFormat.inner).format({
down: options.legend[i-1],
up: options.legend[i],
name: options.itemName[1]
});
}
})
;
legend.transition().duration(options.animationDuration)
.attr("x", getLegendXPosition())
.attr("y", getLegendYPosition())
.attr("width", parent.getDim("width"))
.attr("height", parent.getDim("height"))
;
legend.select("g").transition().duration(options.animationDuration)
.attr("transform", function() {
if (options.legendOrientation === "vertical") {
return "rotate(90 " + options.legendCellSize/2 + " " + options.legendCellSize/2 + ")";
}
return "";
})
;
function getLegendXPosition() {
switch(options.legendHorizontalPosition) {
case "right":
if (options.legendVerticalPosition === "center" || options.legendVerticalPosition === "middle") {
return width + options.legendMargin[3];
}
return width - parent.getDim("width") - options.legendMargin[1];
case "middle":
case "center":
return Math.round(width/2 - parent.getDim("width")/2);
default:
return options.legendMargin[3];
}
}
function getLegendYPosition() {
if (options.legendVerticalPosition === "bottom") {
return calendar.graphDim.height + options.legendMargin[0] - options.domainGutter - options.cellPadding;
}
return options.legendMargin[0];
}
calendar.resize();
};
/**
* Return the dimension of the legend
*
* Takes into account rotation
*
* @param string axis Width or height
* @return int height or width in pixels
*/
Legend.prototype.getDim = function(axis) {
"use strict";
var isHorizontal = (this.calendar.options.legendOrientation === "horizontal");
switch(axis) {
case "width":
return this.dim[isHorizontal ? "width": "height"];
case "height":
return this.dim[isHorizontal ? "height": "width"];
}
};
Legend.prototype.buildColors = function() {
"use strict";
var options = this.calendar.options; // Shorter accessor for variable name mangling when minifying
if (options.legendColors === null) {
this.calendar.legendScale = null;
return false;
}
var _colorRange = [];
if (Array.isArray(options.legendColors)) {
_colorRange = options.legendColors;
} else if (options.legendColors.hasOwnProperty("min") && options.legendColors.hasOwnProperty("max")) {
_colorRange = [options.legendColors.min, options.legendColors.max];
} else {
options.legendColors = null;
return false;
}
var _legend = options.legend.slice(0);
if (_legend[0] > 0) {
_legend.unshift(0);
} else if (_legend[0] < 0) {
// Let's guess the leftmost value, it we have to add one
_legend.unshift(_legend[0] - (_legend[_legend.length-1] - _legend[0])/_legend.length);
}
var colorScale = d3.scale.linear()
.range(_colorRange)
.interpolate(d3.interpolateHcl)
.domain([d3.min(_legend), d3.max(_legend)])
;
var legendColors = _legend.map(function(element) { return colorScale(element); });
this.calendar.legendScale = d3.scale.threshold().domain(options.legend).range(legendColors);
return true;
};
/**
* Return the classname on the legend for the specified value
*
* @param integer n Value associated to a date
* @param bool withCssClass Whether to display the css class used to style the cell.
* Disabling will allow styling directly via html fill attribute
*
* @return string Classname according to the legend
*/
Legend.prototype.getClass = function(n, withCssClass) {
"use strict";
if (n === null || isNaN(n)) {
return "";
}
var index = [this.calendar.options.legend.length + 1];
for (var i = 0, total = this.calendar.options.legend.length-1; i <= total; i++) {
if (this.calendar.options.legend[0] > 0 && n < 0) {
index = ["1", "i"];
break;
}
if (n <= this.calendar.options.legend[i]) {
index = [i+1];
break;
}
}
if (n === 0) {
index.push(0);
}
index.unshift("");
return (index.join(" r") + (withCssClass ? index.join(" q"): "")).trim();
};
/**
* Sprintf like function
* @source http://stackoverflow.com/a/4795914/805649
* @return String
*/
String.prototype.format = function () {
"use strict";
var formatted = this;
for (var prop in arguments[0]) {
if (arguments[0].hasOwnProperty(prop)) {
var regexp = new RegExp("\\{" + prop + "\\}", "gi");
formatted = formatted.replace(regexp, arguments[0][prop]);
}
}
return formatted;
};
/**
* #source http://stackoverflow.com/a/383245/805649
*/
function mergeRecursive(obj1, obj2) {
"use strict";
/*jshint forin:false */
for (var p in obj2) {
try {
// Property in destination object set; update its value.
if (obj2[p].constructor === Object) {
obj1[p] = mergeRecursive(obj1[p], obj2[p]);
} else {
obj1[p] = obj2[p];
}
} catch(e) {
// Property in destination object not set; create it and set its value.
obj1[p] = obj2[p];
}
}
return obj1;
}
/**
* Check if 2 arrays are equals
*
* @link http://stackoverflow.com/a/14853974/805649
* @param array array the array to compare to
* @return bool true of the 2 arrays are equals
*/
function arrayEquals(arrayA, arrayB) {
"use strict";
// if the other array is a falsy value, return
if (!arrayB || !arrayA) {
return false;
}
// compare lengths - can save a lot of time
if (arrayA.length !== arrayB.length) {
return false;
}
for (var i = 0; i < arrayA.length; i++) {
// Check if we have nested arrays
if (arrayA[i] instanceof Array && arrayB[i] instanceof Array) {
// recurse into the nested arrays
if (!arrayEquals(arrayA[i], arrayB[i])) {
return false;
}
}
else if (arrayA[i] !== arrayB[i]) {
// Warning - two different object instances will never be equal: {x:20} != {x:20}
return false;
}
}
return true;
}
/**
* AMD Loader
*/
if (typeof define === "function" && define.amd) {
define(["d3"], function() {
"use strict";
return CalHeatMap;
});
} else if (typeof module === "object" && module.exports) {
module.exports = CalHeatMap;
} else {
window.CalHeatMap = CalHeatMap;
}
Reference in New Issue Copy Permalink