Skip to content
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.

Sign up for GitHub

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

Jump to bottom

(Rebase) Move drawing of gridLines into separate plugin and add border functionality #5480

Closed
wants to merge 5 commits into from
Closed

(Rebase) Move drawing of gridLines into separate plugin and add border functionality #5480

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
7f334bf
Create gridLines plugin
Zamaroth Aug 14, 2017
419b303
Refactor plugin.gridlines.js
Zamaroth Aug 13, 2017
6ac6498
Adress comments
Zamaroth Oct 21, 2017
7d343b8
Fix typos and add borderAliasPixel variable
Zamaroth Nov 2, 2017
c4eb8cb
Update plugin export
okcoker May 8, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
145 changes: 77 additions & 68 deletions src/core/core.scale.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,10 @@ defaults._set('scale', {
display: true,
position: 'left',
offset: false,
borderColor: 'rgba(0, 0, 0, 0.4)',
borderWidth: 0,
borderDash: [],
borderDashOffset: 0.0,

// grid line settings
gridLines: {
Expand Down Expand Up @@ -671,7 +675,7 @@ module.exports = Element.extend({
},

// Actually draw the scale on the canvas
// @param {rectangle} chartArea : the area of the chart to draw full grid lines on
// @param {rectangle} chartArea : the area of the chart to draw all ticks and labels on
draw: function(chartArea) {
var me = this;
var options = me.options;
Expand Down Expand Up @@ -732,7 +736,7 @@ module.exports = Element.extend({
}

// Common properties
var tx1, ty1, tx2, ty2, x1, y1, x2, y2, labelX, labelY;
var tx1, ty1, tx2, ty2, labelX, labelY;
var textAlign = 'middle';
var textBaseline = 'middle';
var tickPadding = optionTicks.padding;
Expand Down Expand Up @@ -760,11 +764,9 @@ module.exports = Element.extend({

labelX = me.getPixelForTick(index) + optionTicks.labelOffset; // x values for optionTicks (need to consider offsetLabel option)

tx1 = tx2 = x1 = x2 = xLineValue;
tx1 = tx2 = xLineValue;
ty1 = yTickStart;
ty2 = yTickEnd;
y1 = chartArea.top;
y2 = chartArea.bottom + axisWidth;
} else {
var isLeft = options.position === 'left';
var labelXOffset;
Expand All @@ -789,43 +791,53 @@ module.exports = Element.extend({

tx1 = xTickStart;
tx2 = xTickEnd;
x1 = chartArea.left;
x2 = chartArea.right + axisWidth;
ty1 = ty2 = y1 = y2 = yLineValue;
ty1 = ty2 = yLineValue;
}

itemsToDraw.push({
tx1: tx1,
ty1: ty1,
tx2: tx2,
ty2: ty2,
x1: x1,
y1: y1,
x2: x2,
y2: y2,
labelX: labelX,
labelY: labelY,
glWidth: lineWidth,
glColor: lineColor,
glBorderDash: borderDash,
glBorderDashOffset: borderDashOffset,
tmWidth: lineWidth,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It took me awhile to figure out, but I'm guessing tm stands for tick mark. I would just use tick instead since it's not much longer and is much clearer

tmColor: lineColor,
tmBorderDash: borderDash,
tmBorderDashOffset: borderDashOffset,
rotation: -1 * labelRotationRadians,
label: label,
label: '' + label,
major: tick.major,
textBaseline: textBaseline,
textAlign: textAlign
});
});

// Draw all of the tick labels, tick marks, and grid lines at the correct places
// When offsetGridLines is enabled, there should be one more tick mark than there
// are ticks in scale.ticks array, therefore the missing gridLine has to be manually added
if (gridLines.offsetGridLines) {
var aliasPixel = helpers.aliasPixel(gridLines.lineWidth);
itemsToDraw.push({
tx1: !isHorizontal ? xTickStart : chartArea.right + aliasPixel,
ty1: !isHorizontal ? chartArea.bottom + aliasPixel : yTickStart,
tx2: !isHorizontal ? xTickEnd : chartArea.right + aliasPixel,
ty2: !isHorizontal ? chartArea.bottom + aliasPixel : yTickEnd,
tmWidth: helpers.valueAtIndexOrDefault(gridLines.lineWidth, ticks.length),
tmColor: helpers.valueAtIndexOrDefault(gridLines.color, ticks.length),
tmBorderDash: gridLines.borderDash,
tmBorderDashOffset: gridLines.borderDashOffset
});
}

// Draw all of the tick labels and tick marks at the correct places
helpers.each(itemsToDraw, function(itemToDraw) {
if (gridLines.display) {
context.save();
context.lineWidth = itemToDraw.glWidth;
context.strokeStyle = itemToDraw.glColor;
context.lineWidth = itemToDraw.tmWidth;
context.strokeStyle = itemToDraw.tmColor;
if (context.setLineDash) {
context.setLineDash(itemToDraw.glBorderDash);
context.lineDashOffset = itemToDraw.glBorderDashOffset;
context.setLineDash(itemToDraw.tmBorderDash);
context.lineDashOffset = itemToDraw.tmBorderDashOffset;
}

context.beginPath();
Expand All @@ -835,41 +847,29 @@ module.exports = Element.extend({
context.lineTo(itemToDraw.tx2, itemToDraw.ty2);
}

if (gridLines.drawOnChartArea) {
context.moveTo(itemToDraw.x1, itemToDraw.y1);
context.lineTo(itemToDraw.x2, itemToDraw.y2);
}

context.stroke();
context.restore();
}

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 = itemToDraw.major ? majorTickFont.font : tickFont.font;
context.fillStyle = itemToDraw.major ? majorTickFontColor : tickFontColor;
context.textBaseline = itemToDraw.textBaseline;
context.textAlign = itemToDraw.textAlign;

var label = itemToDraw.label;
if (helpers.isArray(label)) {
var lineCount = label.length;
var lineHeight = tickFont.size * 1.5;
var y = me.isHorizontal() ? 0 : -lineHeight * (lineCount - 1) / 2;

for (var i = 0; i < lineCount; ++i) {
// We just make sure the multiline element is a string here..
context.fillText('' + label[i], 0, y);
// apply same lineSpacing as calculated @ L#320
y += lineHeight;
if (optionTicks.display && itemToDraw.label) {
// 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 = itemToDraw.major ? majorTickFont.font : tickFont.font;
context.fillStyle = itemToDraw.major ? majorTickFontColor : tickFontColor;
context.textBaseline = itemToDraw.textBaseline;
context.textAlign = itemToDraw.textAlign;

var label = itemToDraw.label;
if (helpers.isArray(label)) {
for (var i = 0, y = 0; i < label.length; ++i) {
// We just make sure the multiline element is a string here..
context.fillText('' + label[i], 0, y);
// apply same lineSpacing as calculated @ L#320
y += (tickFont.size * 1.5);
}
} else {
context.fillText(label, 0, 0);
}
} else {
context.fillText(label, 0, 0);
context.restore();
}
context.restore();
}
});

Expand Down Expand Up @@ -905,30 +905,39 @@ module.exports = Element.extend({
context.restore();
}

if (gridLines.drawBorder) {
// Draw the line at the edge of the axis
context.lineWidth = helpers.valueAtIndexOrDefault(gridLines.lineWidth, 0);
context.strokeStyle = helpers.valueAtIndexOrDefault(gridLines.color, 0);
var x1 = me.left;
var x2 = me.right + axisWidth;
var y1 = me.top;
var y2 = me.bottom + axisWidth;
// gridLines.drawBorder is deprecated
if (gridLines.drawBorder && options.borderColor && options.borderWidth) {
// Draw the scale border
context.lineWidth = options.borderWidth;
context.strokeStyle = options.borderColor;
if (context.setLineDash) {
context.setLineDash(helpers.getValueOrDefault(options.borderDash, globalDefaults.borderDash));
context.lineDashOffset = helpers.getValueOrDefault(options.borderDashOffset, globalDefaults.borderDashOffset);
}

var x1 = Math.round(me.left);
var x2 = Math.round(me.right);
var y1 = Math.round(me.top);
var y2 = Math.round(me.bottom);
var borderAliasPixel = helpers.aliasPixel(context.lineWidth);

var aliasPixel = helpers.aliasPixel(context.lineWidth);
if (isHorizontal) {
y1 = y2 = options.position === 'top' ? me.bottom : me.top;
y1 += aliasPixel;
y2 += aliasPixel;
y1 += borderAliasPixel;
y2 += borderAliasPixel;
} else {
x1 = x2 = options.position === 'left' ? me.right : me.left;
x1 += aliasPixel;
x2 += aliasPixel;
x1 += borderAliasPixel;
x2 += borderAliasPixel;
}

context.beginPath();

context.moveTo(x1, y1);
context.lineTo(x2, y2);

context.stroke();
context.restore();
}
}
});
1 change: 1 addition & 0 deletions src/plugins/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,5 +2,6 @@

module.exports = {};
module.exports.filler = require('./plugin.filler');
module.exports.gridlines = require('./plugin.gridlines');
module.exports.legend = require('./plugin.legend');
module.exports.title = require('./plugin.title');
Loading