Mirrors/Chart.js
1
0
Fork 0
mirror of https://github.com/chartjs/Chart.js.git synced 2024-10-06 12:19:08 +02:00
Code Issues Packages Projects Releases Wiki Activity

Reduce core.title.js size

Browse Source
This commit is contained in:
Evert Timberg 2016-05-04 21:08:59 -04:00
parent 5ca07b84f0
commit 4068836a42
2 changed files with 61 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

115
src/core/core.title.js
View File

@ -16,6 +16,7 @@ module.exports = function(Chart) {
text: ''
};
var noop = helpers.noop;
Chart.Title = Chart.Element.extend({
initialize: function(config) {
@ -28,7 +29,7 @@ module.exports = function(Chart) {
// These methods are ordered by lifecyle. Utilities then follow.
beforeUpdate: helpers.noop,
beforeUpdate: noop,
update: function(maxWidth, maxHeight, margins) {
// Update Lifecycle - Probably don't want to ever extend or overwrite this function ;)
@ -58,11 +59,11 @@ module.exports = function(Chart) {
return this.minSize;
},
afterUpdate: helpers.noop,
afterUpdate: noop,
//
beforeSetDimensions: helpers.noop,
beforeSetDimensions: noop,
setDimensions: function() {
// Set the unconstrained dimension before label rotation
if (this.isHorizontal()) {
@ -90,103 +91,83 @@ module.exports = function(Chart) {
height: 0
};
},
afterSetDimensions: helpers.noop,
afterSetDimensions: noop,
//
beforeBuildLabels: helpers.noop,
buildLabels: helpers.noop,
afterBuildLabels: helpers.noop,
beforeBuildLabels: noop,
buildLabels: noop,
afterBuildLabels: noop,
//
beforeFit: helpers.noop,
beforeFit: noop,
fit: function() {
var ctx = this.ctx;
var fontSize = helpers.getValueOrDefault(this.options.fontSize, Chart.defaults.global.defaultFontSize);
var fontStyle = helpers.getValueOrDefault(this.options.fontStyle, Chart.defaults.global.defaultFontStyle);
var fontFamily = helpers.getValueOrDefault(this.options.fontFamily, Chart.defaults.global.defaultFontFamily);
var titleFont = helpers.fontString(fontSize, fontStyle, fontFamily);
var ctx = this.ctx,
valueOrDefault = helpers.getValueOrDefault,
opts = this.options,
globalDefaults = Chart.defaults.global,
display = opts.display,
fontSize = valueOrDefault(opts.fontSize, globalDefaults.defaultFontSize),
minSize = this.minSize;
// Width
if (this.isHorizontal()) {
this.minSize.width = this.maxWidth; // fill all the width
minSize.width = this.maxWidth; // fill all the width
minSize.height = display ? fontSize + (opts.padding * 2) : 0;
} else {
this.minSize.width = 0;
minSize.width = display ? fontSize + (opts.padding * 2) : 0;
minSize.height = this.maxHeight; // fill all the height
}
// height
if (this.isHorizontal()) {
this.minSize.height = 0;
} else {
this.minSize.height = this.maxHeight; // fill all the height
}
// Increase sizes here
if (this.isHorizontal()) {
// Title
if (this.options.display) {
this.minSize.height += fontSize + (this.options.padding * 2);
}
} else {
if (this.options.display) {
this.minSize.width += fontSize + (this.options.padding * 2);
}
}
this.width = this.minSize.width;
this.height = this.minSize.height;
this.width = minSize.width;
this.height = minSize.height;
},
afterFit: helpers.noop,
afterFit: noop,
// Shared Methods
isHorizontal: function() {
return this.options.position === "top" || this.options.position === "bottom";
var pos = this.options.position;
return pos === "top" || pos === "bottom";
},
// Actualy draw the title block on the canvas
draw: function() {
if (this.options.display) {
var ctx = this.ctx;
var titleX, titleY;
var ctx = this.ctx,
valueOrDefault = helpers.getValueOrDefault,
opts = this.options,
globalDefaults = Chart.defaults.global;
var fontColor = helpers.getValueOrDefault(this.options.fontColor, Chart.defaults.global.defaultFontColor);
var fontSize = helpers.getValueOrDefault(this.options.fontSize, Chart.defaults.global.defaultFontSize);
var fontStyle = helpers.getValueOrDefault(this.options.fontStyle, Chart.defaults.global.defaultFontStyle);
var fontFamily = helpers.getValueOrDefault(this.options.fontFamily, Chart.defaults.global.defaultFontFamily);
var titleFont = helpers.fontString(fontSize, fontStyle, fontFamily);
if (opts.display) {
var fontSize = valueOrDefault(opts.fontSize, globalDefaults.defaultFontSize),
fontStyle = valueOrDefault(opts.fontStyle, globalDefaults.defaultFontStyle),
fontFamily = valueOrDefault(opts.fontFamily, globalDefaults.defaultFontFamily),
titleFont = helpers.fontString(fontSize, fontStyle, fontFamily),
rotation = 0,
titleX,
titleY;
ctx.fillStyle = fontColor; // render in correct colour
ctx.fillStyle = valueOrDefault(opts.fontColor, globalDefaults.defaultFontColor); // render in correct colour
ctx.font = titleFont;
// Horizontal
if (this.isHorizontal()) {
// Title
ctx.textAlign = "center";
ctx.textBaseline = 'middle';
titleX = this.left + ((this.right - this.left) / 2); // midpoint of the width
titleY = this.top + ((this.bottom - this.top) / 2); // midpoint of the height
ctx.fillText(this.options.text, titleX, titleY);
} else {
// Title
titleX = this.options.position === 'left' ? this.left + (fontSize / 2) : this.right - (fontSize / 2);
titleX = opts.position === 'left' ? this.left + (fontSize / 2) : this.right - (fontSize / 2);
titleY = this.top + ((this.bottom - this.top) / 2);
var rotation = this.options.position === 'left' ? -0.5 * Math.PI : 0.5 * Math.PI;
ctx.save();
ctx.translate(titleX, titleY);
ctx.rotate(rotation);
ctx.textAlign = "center";
ctx.textBaseline = 'middle';
ctx.fillText(this.options.text, 0, 0);
ctx.restore();
rotation = Math.PI * (opts.position === 'left' ? -0.5 : 0.5);
}
ctx.save();
ctx.translate(titleX, titleY);
ctx.rotate(rotation);
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillText(opts.text, 0, 0);
ctx.restore();
}
}
});

14
test/core.title.tests.js
View File

@ -107,9 +107,21 @@ describe('Title block tests', function() {
expect(context.getCalls()).toEqual([{
name: 'setFillStyle',
args: ['#666']
}, {
name: 'save',
args: []
}, {
name: 'translate',
args: [300, 66]
}, {
name: 'rotate',
args: [0]
}, {
name: 'fillText',
args: ['My title', 300, 66]
args: ['My title', 0, 0]
}, {
name: 'restore',
args: []
}]);
});