310 lines
10 KiB
JavaScript
Executable file
310 lines
10 KiB
JavaScript
Executable file
/*global window: false */
|
|
"use strict";
|
|
|
|
var moment = require('moment');
|
|
moment = typeof(moment) === 'function' ? moment : window.moment;
|
|
|
|
module.exports = function(Chart) {
|
|
|
|
var helpers = Chart.helpers;
|
|
|
|
if (!moment) {
|
|
console.warn('Chart.js - Moment.js could not be found! You must include it before Chart.js to use the time scale. Download at http://momentjs.com/');
|
|
return;
|
|
}
|
|
|
|
var time = {
|
|
units: [{
|
|
name: 'millisecond',
|
|
steps: [1, 2, 5, 10, 20, 50, 100, 250, 500]
|
|
}, {
|
|
name: 'second',
|
|
steps: [1, 2, 5, 10, 30]
|
|
}, {
|
|
name: 'minute',
|
|
steps: [1, 2, 5, 10, 30]
|
|
}, {
|
|
name: 'hour',
|
|
steps: [1, 2, 3, 6, 12]
|
|
}, {
|
|
name: 'day',
|
|
steps: [1, 2, 5]
|
|
}, {
|
|
name: 'week',
|
|
maxStep: 4
|
|
}, {
|
|
name: 'month',
|
|
maxStep: 3
|
|
}, {
|
|
name: 'quarter',
|
|
maxStep: 4
|
|
}, {
|
|
name: 'year',
|
|
maxStep: false
|
|
}]
|
|
};
|
|
|
|
var defaultConfig = {
|
|
position: "bottom",
|
|
|
|
time: {
|
|
format: false, // false == date objects or use pattern string from http://momentjs.com/docs/#/parsing/string-format/
|
|
unit: false, // false == automatic or override with week, month, year, etc.
|
|
round: false, // none, or override with week, month, year, etc.
|
|
displayFormat: false, // DEPRECATED
|
|
|
|
// defaults to unit's corresponding unitFormat below or override using pattern string from http://momentjs.com/docs/#/displaying/format/
|
|
displayFormats: {
|
|
'millisecond': 'h:mm:ss.SSS a', // 11:20:01.123 AM,
|
|
'second': 'h:mm:ss a', // 11:20:01 AM
|
|
'minute': 'h:mm:ss a', // 11:20:01 AM
|
|
'hour': 'MMM D, hA', // Sept 4, 5PM
|
|
'day': 'll', // Sep 4 2015
|
|
'week': 'll', // Week 46, or maybe "[W]WW - YYYY" ?
|
|
'month': 'MMM YYYY', // Sept 2015
|
|
'quarter': '[Q]Q - YYYY', // Q3
|
|
'year': 'YYYY' // 2015
|
|
}
|
|
},
|
|
ticks: {
|
|
autoSkip: false,
|
|
}
|
|
};
|
|
|
|
var TimeScale = Chart.Scale.extend({
|
|
getLabelMoment: function(datasetIndex, index) {
|
|
return this.labelMoments[datasetIndex][index];
|
|
},
|
|
determineDataLimits: function() {
|
|
this.labelMoments = [];
|
|
|
|
// Only parse these once. If the dataset does not have data as x,y pairs, we will use
|
|
// these
|
|
var scaleLabelMoments = [];
|
|
if (this.chart.data.labels && this.chart.data.labels.length > 0) {
|
|
helpers.each(this.chart.data.labels, function(label, index) {
|
|
var labelMoment = this.parseTime(label);
|
|
if (this.options.time.round) {
|
|
labelMoment.startOf(this.options.time.round);
|
|
}
|
|
scaleLabelMoments.push(labelMoment);
|
|
}, this);
|
|
|
|
this.firstTick = moment.min.call(this, scaleLabelMoments);
|
|
this.lastTick = moment.max.call(this, scaleLabelMoments);
|
|
} else {
|
|
this.firstTick = null;
|
|
this.lastTick = null;
|
|
}
|
|
|
|
helpers.each(this.chart.data.datasets, function(dataset, datasetIndex) {
|
|
var momentsForDataset = [];
|
|
|
|
if (typeof dataset.data[0] === 'object') {
|
|
helpers.each(dataset.data, function(value, index) {
|
|
var labelMoment = this.parseTime(this.getRightValue(value));
|
|
if (this.options.time.round) {
|
|
labelMoment.startOf(this.options.time.round);
|
|
}
|
|
momentsForDataset.push(labelMoment);
|
|
|
|
// May have gone outside the scale ranges, make sure we keep the first and last ticks updated
|
|
this.firstTick = this.firstTick !== null ? moment.min(this.firstTick, labelMoment) : labelMoment;
|
|
this.lastTick = this.lastTick !== null ? moment.max(this.lastTick, labelMoment) : labelMoment;
|
|
}, this);
|
|
} else {
|
|
// We have no labels. Use the ones from the scale
|
|
momentsForDataset = scaleLabelMoments;
|
|
}
|
|
|
|
this.labelMoments.push(momentsForDataset);
|
|
}, this);
|
|
|
|
// Set these after we've done all the data
|
|
if (this.options.time.min) {
|
|
this.firstTick = this.parseTime(this.options.time.min);
|
|
}
|
|
|
|
if (this.options.time.max) {
|
|
this.lastTick = this.parseTime(this.options.time.max);
|
|
}
|
|
|
|
// We will modify these, so clone for later
|
|
this.firstTick = (this.firstTick || moment()).clone();
|
|
this.lastTick = (this.lastTick || moment()).clone();
|
|
},
|
|
buildTicks: function(index) {
|
|
|
|
this.ticks = [];
|
|
this.unitScale = 1; // How much we scale the unit by, ie 2 means 2x unit per step
|
|
|
|
// Set unit override if applicable
|
|
if (this.options.time.unit) {
|
|
this.tickUnit = this.options.time.unit || 'day';
|
|
this.displayFormat = this.options.time.displayFormats[this.tickUnit];
|
|
this.tickRange = Math.ceil(this.lastTick.diff(this.firstTick, this.tickUnit, true));
|
|
} else {
|
|
// Determine the smallest needed unit of the time
|
|
var innerWidth = this.isHorizontal() ? this.width - (this.paddingLeft + this.paddingRight) : this.height - (this.paddingTop + this.paddingBottom);
|
|
var labelCapacity = innerWidth / (this.options.ticks.fontSize + 10);
|
|
var buffer = this.options.time.round ? 0 : 1;
|
|
|
|
// Start as small as possible
|
|
this.tickUnit = 'millisecond';
|
|
this.tickRange = Math.ceil(this.lastTick.diff(this.firstTick, this.tickUnit, true) + buffer);
|
|
this.displayFormat = this.options.time.displayFormats[this.tickUnit];
|
|
|
|
var unitDefinitionIndex = 0;
|
|
var unitDefinition = time.units[unitDefinitionIndex];
|
|
|
|
// While we aren't ideal and we don't have units left
|
|
while (unitDefinitionIndex < time.units.length) {
|
|
// Can we scale this unit. If `false` we can scale infinitely
|
|
this.unitScale = 1;
|
|
|
|
if (helpers.isArray(unitDefinition.steps) && Math.ceil(this.tickRange / labelCapacity) < helpers.max(unitDefinition.steps)) {
|
|
// Use one of the prefedined steps
|
|
for (var idx = 0; idx < unitDefinition.steps.length; ++idx) {
|
|
if (unitDefinition.steps[idx] > Math.ceil(this.tickRange / labelCapacity)) {
|
|
this.unitScale = unitDefinition.steps[idx];
|
|
break;
|
|
}
|
|
}
|
|
|
|
break;
|
|
} else if ((unitDefinition.maxStep === false) || (Math.ceil(this.tickRange / labelCapacity) < unitDefinition.maxStep)) {
|
|
// We have a max step. Scale this unit
|
|
this.unitScale = Math.ceil(this.tickRange / labelCapacity);
|
|
break;
|
|
} else {
|
|
// Move to the next unit up
|
|
++unitDefinitionIndex;
|
|
unitDefinition = time.units[unitDefinitionIndex];
|
|
|
|
this.tickUnit = unitDefinition.name;
|
|
this.tickRange = Math.ceil(this.lastTick.diff(this.firstTick, this.tickUnit) + buffer);
|
|
this.displayFormat = this.options.time.displayFormats[unitDefinition.name];
|
|
}
|
|
}
|
|
}
|
|
|
|
var roundedStart;
|
|
|
|
// Only round the first tick if we have no hard minimum
|
|
if (!this.options.time.min) {
|
|
this.firstTick.startOf(this.tickUnit);
|
|
roundedStart = this.firstTick;
|
|
} else {
|
|
roundedStart = this.firstTick.clone().startOf(this.tickUnit);
|
|
}
|
|
|
|
// Only round the last tick if we have no hard maximum
|
|
if (!this.options.time.max) {
|
|
this.lastTick.endOf(this.tickUnit);
|
|
}
|
|
|
|
this.smallestLabelSeparation = this.width;
|
|
|
|
helpers.each(this.chart.data.datasets, function(dataset, datasetIndex) {
|
|
for (var i = 1; i < this.labelMoments[datasetIndex].length; i++) {
|
|
this.smallestLabelSeparation = Math.min(this.smallestLabelSeparation, this.labelMoments[datasetIndex][i].diff(this.labelMoments[datasetIndex][i - 1], this.tickUnit, true));
|
|
}
|
|
}, this);
|
|
|
|
// Tick displayFormat override
|
|
if (this.options.time.displayFormat) {
|
|
this.displayFormat = this.options.time.displayFormat;
|
|
}
|
|
|
|
// first tick. will have been rounded correctly if options.time.min is not specified
|
|
this.ticks.push(this.firstTick.clone());
|
|
|
|
// For every unit in between the first and last moment, create a moment and add it to the ticks tick
|
|
for (var i = 1; i < this.tickRange; ++i) {
|
|
var newTick = roundedStart.clone().add(i, this.tickUnit);
|
|
|
|
// Are we greater than the max time
|
|
if (this.options.time.max && newTick.diff(this.lastTick, this.tickUnit, true) >= 0) {
|
|
break;
|
|
}
|
|
|
|
if (i % this.unitScale === 0) {
|
|
this.ticks.push(newTick);
|
|
}
|
|
}
|
|
|
|
// Always show the right tick
|
|
if (this.options.time.max) {
|
|
this.ticks.push(this.lastTick.clone());
|
|
} else if (this.ticks[this.ticks.length - 1].diff(this.lastTick, this.tickUnit, true) !== 0) {
|
|
this.tickRange = Math.ceil(this.tickRange / this.unitScale) * this.unitScale;
|
|
this.ticks.push(this.firstTick.clone().add(this.tickRange, this.tickUnit));
|
|
this.lastTick = this.ticks[this.ticks.length - 1].clone();
|
|
}
|
|
},
|
|
// Get tooltip label
|
|
getLabelForIndex: function(index, datasetIndex) {
|
|
var label = this.chart.data.labels && index < this.chart.data.labels.length ? this.chart.data.labels[index] : '';
|
|
|
|
if (typeof this.chart.data.datasets[datasetIndex].data[0] === 'object') {
|
|
label = this.getRightValue(this.chart.data.datasets[datasetIndex].data[index]);
|
|
}
|
|
|
|
// Format nicely
|
|
if (this.options.time.tooltipFormat) {
|
|
label = this.parseTime(label).format(this.options.time.tooltipFormat);
|
|
}
|
|
|
|
return label;
|
|
},
|
|
convertTicksToLabels: function() {
|
|
this.ticks = this.ticks.map(function(tick, index, ticks) {
|
|
var formattedTick = tick.format(this.displayFormat);
|
|
|
|
if (this.options.ticks.userCallback) {
|
|
return this.options.ticks.userCallback(formattedTick, index, ticks);
|
|
} else {
|
|
return formattedTick;
|
|
}
|
|
}, this);
|
|
},
|
|
getPixelForValue: function(value, index, datasetIndex, includeOffset) {
|
|
var labelMoment = this.getLabelMoment(datasetIndex, index);
|
|
var offset = labelMoment.diff(this.firstTick, this.tickUnit, true);
|
|
|
|
var decimal = offset / this.tickRange;
|
|
|
|
if (this.isHorizontal()) {
|
|
var innerWidth = this.width - (this.paddingLeft + this.paddingRight);
|
|
var valueWidth = innerWidth / Math.max(this.ticks.length - 1, 1);
|
|
var valueOffset = (innerWidth * decimal) + this.paddingLeft;
|
|
|
|
return this.left + Math.round(valueOffset);
|
|
} else {
|
|
var innerHeight = this.height - (this.paddingTop + this.paddingBottom);
|
|
var valueHeight = innerHeight / Math.max(this.ticks.length - 1, 1);
|
|
var heightOffset = (innerHeight * decimal) + this.paddingTop;
|
|
|
|
return this.top + Math.round(heightOffset);
|
|
}
|
|
},
|
|
parseTime: function(label) {
|
|
// Date objects
|
|
if (typeof label.getMonth === 'function' || typeof label === 'number') {
|
|
return moment(label);
|
|
}
|
|
// Moment support
|
|
if (label.isValid && label.isValid()) {
|
|
return label;
|
|
}
|
|
// Custom parsing (return an instance of moment)
|
|
if (typeof this.options.time.format !== 'string' && this.options.time.format.call) {
|
|
return this.options.time.format(label);
|
|
}
|
|
// Moment format parsing
|
|
return moment(label, this.options.time.format);
|
|
}
|
|
});
|
|
Chart.scaleService.registerScaleType("time", TimeScale, defaultConfig);
|
|
|
|
}; |