Google Git
Sign in
apache / superset / fc02f0c7fc19dd176920fda82d794aebe33c5169 / . / superset-frontend / plugins / legacy-plugin-chart-calendar / src / vendor / cal-heatmap.js
blob: a8da0b374afb112f5937fca00259ce13ce16e145 [file] [log] [blame]
// [LICENSE TBD]
/* Copied and altered from http://cal-heatmap.com/ , alterations around:
* - tuning tooltips
* - supporting multi-colors scales
* - legend format
* - UTC handling
*/
/* eslint-disable */
import d3tip from 'd3-tip';
import './d3tip.css';
var d3 = typeof require === 'function' ? require('d3') : window.d3;
var d3 = typeof require === 'function' ? require('d3') : window.d3;
var CalHeatMap = function () {
'use strict';
var self = this;
self.tip = d3tip()
.attr('class', 'd3-tip')
.direction('n')
.offset([-5, 0])
.html(
d => `
${self.options.timeFormatter(d.t)}: <strong>${self.options.valueFormatter(d.v)}</strong>
`,
);
self.legendTip = d3tip()
.attr('class', 'd3-tip')
.direction('n')
.offset([-5, 0])
.html(d => self.options.valueFormatter(d));
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],
valueFormatter: d => d,
timeFormatter: d => d,
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,
// Additional headers sent when requesting data
// Expect an object formatted like:
// { 'X-CSRF-TOKEN': 'token' }
dataRequestHeaders: 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",
// colorScaler: null,
// }
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 and completing update().
afterUpdate: null,
// 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() - (self.options.weekStartOnMonday ? 1 : 0);
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.root.attr('x', 0).attr('y', 0).append('svg').attr('class', 'graph');
self.Legend = new Legend(self);
if (self.options.paintOnLoad) {
_initCalendar();
}
self.root.call(self.tip);
self.root.call(self.legendTip);
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) {
self.tip.show(d, this);
})
.on('mouseout', function () {
self.tip.hide(d);
});
}
});
// 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',
'afterUpdate',
];
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);
},
/**
* Sprintf like function.
* Replaces placeholders {0} in string with values from provided object.
*
* @param string formatted String containing placeholders.
* @param object args Object with properties to replace placeholders in string.
*
* @return String
*/
formatStringWithObject: function (formatted, args) {
'use strict';
for (var prop in args) {
if (args.hasOwnProperty(prop)) {
var regexp = new RegExp('\\{' + prop + '\\}', 'gi');
formatted = formatted.replace(regexp, args[prop]);
}
}
return formatted;
},
// =========================================================================//
// 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);
}
}
},
afterUpdate: function () {
'use strict';
return this.triggerEvent('afterUpdate');
},
// =========================================================================//
// 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.formatStringWithObject(this.options.subDomainTitleFormat.empty, {
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.formatStringWithObject(this.options.subDomainTitleFormat.filled, {
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 += 1) {
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 += 1) {
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 += 1;
}
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 (error, 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(null, {});
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);
}
var xhr = null;
switch (this.options.dataType) {
case 'json':
xhr = d3.json(url);
break;
case 'csv':
xhr = d3.csv(url);
break;
case 'tsv':
xhr = d3.tsv(url);
break;
case 'txt':
xhr = d3.text(url, 'text/plain');
break;
}
// jshint maxdepth:5
if (self.options.dataRequestHeaders !== null) {
for (var header in self.options.dataRequestHeaders) {
if (self.options.dataRequestHeaders.hasOwnProperty(header)) {
xhr.header(header, self.options.dataRequestHeaders[header]);
}
}
}
xhr.send(requestType, payload, _callback);
}
return false;
case 'object':
if (source === Object(source)) {
_callback(null, source);
return false;
}
/* falls through */
default:
_callback(null, {});
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 += 1) {
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 === 0) {
dataSource = this.options.data;
}
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();
self.afterUpdate();
},
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 += 1) {
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 += 1) {
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('rx', options.legendCellRadius)
.attr('ry', options.legendCellRadius)
.attr('x', function (d, i) {
return i * (options.legendCellSize + options.legendCellPadding);
});
}
legendItem.select('title').text(function (d, i) {
if (i === 0) {
return calendar.formatStringWithObject(options.legendTitleFormat.lower, {
min: options.legend[i],
name: options.itemName[1],
});
} else if (i === _legend.length - 1) {
return calendar.formatStringWithObject(options.legendTitleFormat.upper, {
max: options.legend[i - 1],
name: options.itemName[1],
});
} else {
return calendar.formatStringWithObject(options.legendTitleFormat.inner, {
down: options.legend[i - 1],
up: options.legend[i],
name: options.itemName[1],
});
}
});
legendItem
.on('mouseover', function (d) {
calendar.legendTip.show(d, this);
})
.on('mouseout', function () {
calendar.legendTip.hide();
});
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;
if (options.legendColors.hasOwnProperty('colorScale')) {
colorScale = options.legendColors.colorScale;
} else {
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 += 1) {
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();
};
/**
* #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 += 1) {
// 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;
}
export default CalHeatMap;