-
Notifications
You must be signed in to change notification settings - Fork 11.9k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Time axis ticks formatting for base and senior unit #4268
Changes from 14 commits
0fc6ed3
0572606
890f1c5
f5ddc57
d43f9ee
b471c73
d88a03a
dd66acb
86c4259
241ad82
086bf49
7242f96
5bd9cb6
3ab65fc
7bcae92
0dd966f
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -48,7 +48,9 @@ module.exports = function(Chart) { | |
autoSkipPadding: 0, | ||
labelOffset: 0, | ||
// We pass through arrays to be rendered as multiline labels, we convert Others to strings here. | ||
callback: Chart.Ticks.formatters.values | ||
callback: Chart.Ticks.formatters.values, | ||
minor: {}, | ||
major: {} | ||
} | ||
}; | ||
|
||
|
@@ -94,6 +96,28 @@ module.exports = function(Chart) { | |
// Any function defined here is inherited by all scale types. | ||
// Any function can be extended by the scale type | ||
|
||
mergeTicksOptions: function() { | ||
if (this.options.ticks.minor === false) { | ||
this.options.ticks.minor = { | ||
display: false | ||
}; | ||
} | ||
if (this.options.ticks.major === false) { | ||
this.options.ticks.major = { | ||
display: false | ||
}; | ||
} | ||
for (var key in this.options.ticks) { | ||
if (key !== 'major' && key !== 'minor') { | ||
if (typeof this.options.ticks.minor[key] === 'undefined') { | ||
this.options.ticks.minor[key] = this.options.ticks[key]; | ||
} | ||
if (typeof this.options.ticks.major[key] === 'undefined') { | ||
this.options.ticks.major[key] = this.options.ticks[key]; | ||
} | ||
} | ||
} | ||
}, | ||
beforeUpdate: function() { | ||
helpers.callback(this.options.beforeUpdate, [this]); | ||
}, | ||
|
@@ -486,7 +510,8 @@ module.exports = function(Chart) { | |
|
||
var context = me.ctx; | ||
var globalDefaults = Chart.defaults.global; | ||
var optionTicks = options.ticks; | ||
var optionTicks = options.ticks.minor; | ||
var optionMajorTicks = options.ticks.major ? options.ticks.major : optionTicks; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
|
||
var gridLines = options.gridLines; | ||
var scaleLabel = options.scaleLabel; | ||
|
||
|
@@ -503,6 +528,8 @@ module.exports = function(Chart) { | |
|
||
var tickFontColor = helpers.getValueOrDefault(optionTicks.fontColor, globalDefaults.defaultFontColor); | ||
var tickFont = parseFontOptions(optionTicks); | ||
var majorTickFontColor = helpers.getValueOrDefault(optionMajorTicks.fontColor, globalDefaults.defaultFontColor); | ||
var majorTickFont = parseFontOptions(optionMajorTicks); | ||
|
||
var tl = gridLines.drawTicks ? gridLines.tickMarkLength : 0; | ||
|
||
|
@@ -513,9 +540,6 @@ module.exports = function(Chart) { | |
var cosRotation = Math.cos(labelRotationRadians); | ||
var longestRotatedLabel = me.longestLabelWidth * cosRotation; | ||
|
||
// Make sure we draw text in the correct color and font | ||
context.fillStyle = tickFontColor; | ||
|
||
var itemsToDraw = []; | ||
|
||
if (isHorizontal) { | ||
|
@@ -547,7 +571,8 @@ module.exports = function(Chart) { | |
var yTickStart = options.position === 'bottom' ? me.top : me.bottom - tl; | ||
var yTickEnd = options.position === 'bottom' ? me.top + tl : me.bottom; | ||
|
||
helpers.each(me.ticks, function(label, index) { | ||
helpers.each(me.ticks, function(tick, index) { | ||
var label = typeof tick === 'object' && typeof tick.value !== 'undefined' ? tick.value : tick; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
|
||
// If the callback returned a null or undefined value, do not draw this line | ||
if (label === undefined || label === null) { | ||
return; | ||
|
@@ -645,6 +670,7 @@ module.exports = function(Chart) { | |
glBorderDashOffset: borderDashOffset, | ||
rotation: -1 * labelRotationRadians, | ||
label: label, | ||
major: tick.major === true, | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Why not simply: |
||
textBaseline: textBaseline, | ||
textAlign: textAlign | ||
}); | ||
|
@@ -678,10 +704,12 @@ module.exports = function(Chart) { | |
} | ||
|
||
if (optionTicks.display) { | ||
// Make sure we draw text in the correct color and font | ||
context.save(); | ||
context.translate(itemToDraw.labelX, itemToDraw.labelY); | ||
context.rotate(itemToDraw.rotation); | ||
context.font = tickFont.font; | ||
context.font = itemToDraw.major ? majorTickFont.font : tickFont.font; | ||
context.fillStyle = itemToDraw.major ? majorTickFontColor : tickFontColor; | ||
context.textBaseline = itemToDraw.textBaseline; | ||
context.textAlign = itemToDraw.textAlign; | ||
|
||
|
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:ss a', // 11:20:01 AM | ||
hour: 'MMM D, hA', // Sept 4, 5PM | ||
day: 'll', // Sep 4 2015 | ||
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. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I think we should change this to |
||
month: 'MMM YYYY', // Sept 2015 | ||
quarter: '[Q]Q - YYYY', // Q3 | ||
|
@@ -45,6 +45,8 @@ 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); | ||
}, | ||
determineDataLimits: function() { | ||
|
@@ -182,14 +184,34 @@ module.exports = function(Chart) { | |
}, | ||
// Function to format an individual tick mark | ||
tickFormatFunction: function(tick, index, ticks) { | ||
var formattedTick = tick.format(this.displayFormat); | ||
var tickOpts = this.options.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 major unit | ||
formattedTick = tick.format(this.majorDisplayFormat); | ||
tickOpts = this.options.ticks.major; | ||
major = true; | ||
} else { | ||
// format as minor (base) unit | ||
formattedTick = tick.format(this.displayFormat); | ||
tickOpts = this.options.ticks.minor; | ||
} | ||
|
||
var callback = helpers.getValueOrDefault(tickOpts.callback, tickOpts.userCallback); | ||
|
||
if (callback) { | ||
return callback(formattedTick, index, ticks); | ||
return { | ||
value: callback(formattedTick, index, ticks), | ||
major: major | ||
}; | ||
} | ||
return formattedTick; | ||
return { | ||
value: formattedTick, | ||
major: major | ||
}; | ||
}, | ||
convertTicksToLabels: function() { | ||
var me = this; | ||
|
@@ -257,11 +279,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, []); | ||
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.
Minification: (
this.options.ticks
is used 11 times)