Time axis ticks formatting for base and senior unit #4268
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -25,9 +25,9 @@ module.exports = function(Chart) { | |
| displayFormats: { | ||
| millisecond: 'h:mm:ss.SSS a', // 11:20:01.123 AM, | ||
| second: 'h:mm:ss a', // 11:20:01 AM | ||
| minute: 'h:mm a', // 11:20 AM | ||
| hour: 'hA', // 5PM | ||
| day: 'MMM D', // Sep 4 | ||
| week: 'll', // Week 46, or maybe "[W]WW - YYYY" ? | ||
|
There was a problem hiding this comment. I think we should change this to |
||
| month: 'MMM YYYY', // Sept 2015 | ||
| quarter: '[Q]Q - YYYY', // Q3 | ||
|
|
@@ -36,6 +36,19 @@ module.exports = function(Chart) { | |
| }, | ||
| ticks: { | ||
| autoSkip: false | ||
| }, | ||
| majorTicks: { | ||
|
There was a problem hiding this comment. I liked to have all tick options scoped under the
There was a problem hiding this comment. Also, defaults There was a problem hiding this comment. If minor ticks will fetch their options from There was a problem hiding this comment. I mean, global options for ticks: {
minor: {}, //< use common tick options
major: {} //< use common tick options
}and we keep current global
It's not a breaking change because minor and major ticks would use the There was a problem hiding this comment. @etimberg @benmccann thoughts? There was a problem hiding this comment. Yes, @simonbrunel, I like your suggestion There was a problem hiding this comment. @simonbrunel I like that suggestion as well 😄 |
||
| beginAtZero: false, | ||
| minRotation: 0, | ||
| maxRotation: 50, | ||
| mirror: false, | ||
| padding: 0, | ||
| reverse: false, | ||
| display: true, | ||
| autoSkip: true, | ||
| autoSkipPadding: 0, | ||
| labelOffset: 0, | ||
| callback: Chart.Ticks.formatters.values | ||
| } | ||
| }; | ||
|
|
||
|
|
@@ -45,8 +58,17 @@ module.exports = function(Chart) { | |
| throw new Error('Chart.js - Moment.js could not be found! You must include it before Chart.js to use the time scale. Download at https://momentjs.com'); | ||
| } | ||
|
|
||
| this.mergeTicksOptions(); | ||
|
|
||
| Chart.Scale.prototype.initialize.call(this); | ||
| }, | ||
| mergeTicksOptions: function() { | ||
|
There was a problem hiding this comment. The docs for this function imply that it should be applicable to all scales. Should There was a problem hiding this comment. Also, we should really mark all internal members private and make them public only if requested. There was a problem hiding this comment. Sorry I can't find docs for There was a problem hiding this comment. This method should apply to all scale, so the new There was a problem hiding this comment. Ok understood. Thanks! |
||
| for (var key in this.options.ticks) { | ||
| if (typeof this.options.majorTicks[key] === 'undefined') { | ||
| this.options.majorTicks[key] = this.options.ticks[key]; | ||
| } | ||
| } | ||
| }, | ||
| determineDataLimits: function() { | ||
| var me = this; | ||
| var timeOpts = me.options.time; | ||
|
|
@@ -182,14 +204,34 @@ module.exports = function(Chart) { | |
| }, | ||
| // Function to format an individual tick mark | ||
| tickFormatFunction: function(tick, index, ticks) { | ||
| var formattedTick; | ||
| var tickClone = tick.clone(); | ||
| var tickTimestamp = tick.valueOf(); | ||
| var major = false; | ||
| var tickOpts; | ||
| if (this.majorUnit && this.majorDisplayFormat && tickTimestamp === tickClone.startOf(this.majorUnit).valueOf()) { | ||
| // format as senior unit | ||
| formattedTick = tick.format(this.majorDisplayFormat); | ||
| tickOpts = this.options.majorTicks; | ||
| major = true; | ||
| } else { | ||
| // format as base unit | ||
| formattedTick = tick.format(this.displayFormat); | ||
| tickOpts = this.options.ticks; | ||
| } | ||
|
|
||
| var callback = helpers.getValueOrDefault(tickOpts.callback, tickOpts.userCallback); | ||
|
|
||
| if (callback) { | ||
| return { | ||
| value: callback(formattedTick, index, ticks), | ||
| major: major | ||
| }; | ||
| } | ||
| return { | ||
| value: formattedTick, | ||
| major: major | ||
| }; | ||
| }, | ||
| convertTicksToLabels: function() { | ||
| var me = this; | ||
|
|
@@ -257,11 +299,12 @@ module.exports = function(Chart) { | |
| var me = this; | ||
|
|
||
| me.displayFormat = me.options.time.displayFormats.millisecond; // Pick the longest format for guestimation | ||
| var exampleLabel = me.tickFormatFunction(moment(exampleTime), 0, []).value; | ||
| var tickLabelWidth = me.getLabelWidth(exampleLabel); | ||
|
|
||
| var innerWidth = me.isHorizontal() ? me.width : me.height; | ||
| var labelCapacity = innerWidth / tickLabelWidth; | ||
|
|
||
| return labelCapacity; | ||
| } | ||
| }); | ||
|
|
||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
var label = (tick && tick.value) || tick;