Skip to content

Commit

Permalink
Allow tooltipFormat to be a function. Provide a default tooltipFormat
Browse files Browse the repository at this point in the history
  • Loading branch information
benmccann committed Sep 19, 2017
1 parent 52145de commit 2d18815
Show file tree
Hide file tree
Showing 3 changed files with 38 additions and 9 deletions.
12 changes: 9 additions & 3 deletions docs/axes/cartesian/time.md
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ The following options are provided by the time scale. You may also set options p

| Name | Type | Default | Description
| -----| ---- | --------| -----------
<<<<<<< 52145de5db5dc3bae093880429b35954f0034993
| `distribution` | `String` | `linear` | How data is plotted. [more...](#scale-distribution)
| `bounds` | `String` | `data` | Determines the scale bounds. [more...](#scale-bounds)
| `ticks.source` | `String` | `auto` | How ticks are generated. [more...](#ticks-source)
Expand All @@ -36,7 +37,7 @@ The following options are provided by the time scale. You may also set options p
| `time.min` | [Time](#date-formats) | | If defined, this will override the data minimum
| `time.parser` | `String` or `Function` | | Custom parser for dates. [more...](#parser)
| `time.round` | `String` | `false` | If defined, dates will be rounded to the start of this unit. See [Time Units](#time-units) below for the allowed units.
| `time.tooltipFormat` | `String` | | The moment js format string to use for the tooltip.
| `time.tooltipFormat` | `String|Function` | | The moment js format string to use for the tooltip. [more...](#tooltip-format)
| `time.unit` | `String` | `false` | If defined, will force the unit to be a certain type. See [Time Units](#time-units) section below for details.
| `time.stepSize` | `Number` | `1` | The number of units between grid lines.
| `time.minUnit` | `String` | `'millisecond'` | The minimum display format to be used for a time unit.
Expand Down Expand Up @@ -147,6 +148,11 @@ The `ticks.source` property controls the ticks generation
* `'labels'`: generates ticks from user given `data.labels` values ONLY

### Parser
If this property is defined as a string, it is interpreted as a custom format to be used by moment to parse the date.
If this property is defined as a string, it is interpreted as a custom format to be used by Moment.js to parse the date.

If this is a function, it must return a moment.js object given the appropriate data value.
If this is a function, it must return a Moment.js object given the appropriate data value.

### Tooltip Format
If this property is defined as a string, it is interpreted as a custom format to be used by Moment.js to format the date.

If this is a function, it must return a custom format to be used by Moment.js to format the date given a Moment.js object, the index of the dataset, and index within the dataset.
34 changes: 28 additions & 6 deletions src/scales/scale.time.js
Original file line number Diff line number Diff line change
Expand Up @@ -231,6 +231,11 @@ function parse(input, scale) {
/**
* Returns the number of unit to skip to be able to display up to `capacity` number of ticks
* in `unit` for the given `min` / `max` range and respecting the interval steps constraints.
* @param min {number} minimum tick millis
* @param max {number} maximum tick millis
* @param unit {string} the time unit the ticks are being displayed as
* @param capacity {number} the number of labels we have room to display
* @return {string} the number of ticks to skip before displaying the next one
*/
function determineStepSize(min, max, unit, capacity) {
var range = max - min;
Expand Down Expand Up @@ -380,6 +385,19 @@ function ticksFromTimestamps(values, majorUnit) {
return ticks;
}

/**
* Show the most specific time format by default
*/
function defaultTooltipFormat(momentDate) {
if (momentDate.millisecond() !== 0) {
return 'MMM D, YYYY h:mm:ss.SSS a';
}
if (momentDate.second() !== 0 || momentDate.minute() !== 0 || momentDate.hour() !== 0) {
return 'MMM D, YYYY h:mm:ss a';
}
return 'MMM D, YYYY';
}

module.exports = function(Chart) {

var defaultConfig = {
Expand Down Expand Up @@ -411,6 +429,7 @@ module.exports = function(Chart) {
displayFormat: false, // DEPRECATED
isoWeekday: false, // override week start day - see http://momentjs.com/docs/#/get-set/iso-weekday/
minUnit: 'millisecond',
tooltipFormat: defaultTooltipFormat,

// defaults to unit's corresponding unitFormat below or override using pattern string from http://momentjs.com/docs/#/displaying/format/
displayFormats: {
Expand Down Expand Up @@ -608,17 +627,20 @@ module.exports = function(Chart) {
var me = this;
var data = me.chart.data;
var timeOpts = me.options.time;
var tooltipFormat = timeOpts.tooltipFormat;
var label = data.labels && index < data.labels.length ? data.labels[index] : '';
var value = data.datasets[datasetIndex].data[index];
var momentDate;

if (helpers.isObject(value)) {
label = me.getRightValue(value);
}
if (timeOpts.tooltipFormat) {
label = momentify(label, timeOpts).format(timeOpts.tooltipFormat);
if (!helpers.isObject(value)) {
return label;
}

return label;
momentDate = momentify(me.getRightValue(value), timeOpts);
tooltipFormat = typeof tooltipFormat === 'function'
? tooltipFormat.call(me, momentDate, datasetIndex, index)
: tooltipFormat;
return momentDate.format(tooltipFormat);
},

/**
Expand Down
1 change: 1 addition & 0 deletions test/specs/scale.time.tests.js
Original file line number Diff line number Diff line change
Expand Up @@ -102,6 +102,7 @@ describe('Time scale tests', function() {
isoWeekday: false,
displayFormat: false,
minUnit: 'millisecond',
tooltipFormat: defaultConfig.time.tooltipFormat,
displayFormats: {
millisecond: 'h:mm:ss.SSS a', // 11:20:01.123 AM
second: 'h:mm:ss a', // 11:20:01 AM
Expand Down

0 comments on commit 2d18815

Please sign in to comment.