mirror of
https://github.com/chartjs/Chart.js.git
synced 2024-10-06 04:09:08 +02:00
Format the label in the time scale tooltip (#5095)
This commit is contained in:
parent
2d7f0a46c3
commit
37ec8384d7
@ -403,6 +403,27 @@ function ticksFromTimestamps(values, majorUnit) {
|
||||
return ticks;
|
||||
}
|
||||
|
||||
function determineLabelFormat(data, timeOpts) {
|
||||
var i, momentDate, hasTime;
|
||||
var ilen = data.length;
|
||||
|
||||
// find the label with the most parts (milliseconds, minutes, etc.)
|
||||
// format all labels with the same level of detail as the most specific label
|
||||
for (i = 0; i < ilen; i++) {
|
||||
momentDate = momentify(data[i], timeOpts);
|
||||
if (momentDate.millisecond() !== 0) {
|
||||
return 'MMM D, YYYY h:mm:ss.SSS a';
|
||||
}
|
||||
if (momentDate.second() !== 0 || momentDate.minute() !== 0 || momentDate.hour() !== 0) {
|
||||
hasTime = true;
|
||||
}
|
||||
}
|
||||
if (hasTime) {
|
||||
return 'MMM D, YYYY h:mm:ss a';
|
||||
}
|
||||
return 'MMM D, YYYY';
|
||||
}
|
||||
|
||||
module.exports = function(Chart) {
|
||||
|
||||
var defaultConfig = {
|
||||
@ -621,6 +642,7 @@ module.exports = function(Chart) {
|
||||
me._majorUnit = determineMajorUnit(me._unit);
|
||||
me._table = buildLookupTable(me._timestamps.data, min, max, options.distribution);
|
||||
me._offsets = computeOffsets(me._table, ticks, min, max, options);
|
||||
me._labelFormat = determineLabelFormat(me._timestamps.data, timeOpts);
|
||||
|
||||
return ticksFromTimestamps(ticks, me._majorUnit);
|
||||
},
|
||||
@ -636,10 +658,13 @@ module.exports = function(Chart) {
|
||||
label = me.getRightValue(value);
|
||||
}
|
||||
if (timeOpts.tooltipFormat) {
|
||||
label = momentify(label, timeOpts).format(timeOpts.tooltipFormat);
|
||||
return momentify(label, timeOpts).format(timeOpts.tooltipFormat);
|
||||
}
|
||||
if (typeof label === 'string') {
|
||||
return label;
|
||||
}
|
||||
|
||||
return label;
|
||||
return momentify(label, timeOpts).format(me._labelFormat);
|
||||
},
|
||||
|
||||
/**
|
||||
|
@ -584,6 +584,115 @@ describe('Time scale tests', function() {
|
||||
expect(xScale.getLabelForIndex(6, 0)).toBe('2015-01-10T12:00');
|
||||
});
|
||||
|
||||
it('should get the correct label when time is specified as a string', function() {
|
||||
var chart = window.acquireChart({
|
||||
type: 'line',
|
||||
data: {
|
||||
datasets: [{
|
||||
xAxisID: 'xScale0',
|
||||
data: [{t: '2015-01-01T20:00:00', y: 10}, {t: '2015-01-02T21:00:00', y: 3}]
|
||||
}],
|
||||
},
|
||||
options: {
|
||||
scales: {
|
||||
xAxes: [{
|
||||
id: 'xScale0',
|
||||
type: 'time',
|
||||
position: 'bottom'
|
||||
}],
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
var xScale = chart.scales.xScale0;
|
||||
expect(xScale.getLabelForIndex(0, 0)).toBeTruthy();
|
||||
expect(xScale.getLabelForIndex(0, 0)).toBe('2015-01-01T20:00:00');
|
||||
});
|
||||
|
||||
it('should get the correct label for a timestamp with milliseconds', function() {
|
||||
var chart = window.acquireChart({
|
||||
type: 'line',
|
||||
data: {
|
||||
datasets: [{
|
||||
xAxisID: 'xScale0',
|
||||
data: [
|
||||
{t: +new Date('2018-01-08 05:14:23.234'), y: 10},
|
||||
{t: +new Date('2018-01-09 06:17:43.426'), y: 3}
|
||||
]
|
||||
}],
|
||||
},
|
||||
options: {
|
||||
scales: {
|
||||
xAxes: [{
|
||||
id: 'xScale0',
|
||||
type: 'time',
|
||||
position: 'bottom'
|
||||
}],
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
var xScale = chart.scales.xScale0;
|
||||
var label = xScale.getLabelForIndex(0, 0);
|
||||
expect(label).toEqual('Jan 8, 2018 5:14:23.234 am');
|
||||
});
|
||||
|
||||
it('should get the correct label for a timestamp with time', function() {
|
||||
var chart = window.acquireChart({
|
||||
type: 'line',
|
||||
data: {
|
||||
datasets: [{
|
||||
xAxisID: 'xScale0',
|
||||
data: [
|
||||
{t: +new Date('2018-01-08 05:14:23'), y: 10},
|
||||
{t: +new Date('2018-01-09 06:17:43'), y: 3}
|
||||
]
|
||||
}],
|
||||
},
|
||||
options: {
|
||||
scales: {
|
||||
xAxes: [{
|
||||
id: 'xScale0',
|
||||
type: 'time',
|
||||
position: 'bottom'
|
||||
}],
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
var xScale = chart.scales.xScale0;
|
||||
var label = xScale.getLabelForIndex(0, 0);
|
||||
expect(label).toEqual('Jan 8, 2018 5:14:23 am');
|
||||
});
|
||||
|
||||
it('should get the correct label for a timestamp representing a date', function() {
|
||||
var chart = window.acquireChart({
|
||||
type: 'line',
|
||||
data: {
|
||||
datasets: [{
|
||||
xAxisID: 'xScale0',
|
||||
data: [
|
||||
{t: +new Date('2018-01-08 00:00:00'), y: 10},
|
||||
{t: +new Date('2018-01-09 00:00:00'), y: 3}
|
||||
]
|
||||
}],
|
||||
},
|
||||
options: {
|
||||
scales: {
|
||||
xAxes: [{
|
||||
id: 'xScale0',
|
||||
type: 'time',
|
||||
position: 'bottom'
|
||||
}],
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
var xScale = chart.scales.xScale0;
|
||||
var label = xScale.getLabelForIndex(0, 0);
|
||||
expect(label).toEqual('Jan 8, 2018');
|
||||
});
|
||||
|
||||
it('should get the correct pixel for only one data in the dataset', function() {
|
||||
var chart = window.acquireChart({
|
||||
type: 'line',
|
||||
|
Loading…
Reference in New Issue
Block a user