Skip to content

Commit eb094f5

Browse files
ZamarothZamaroth
committed
Adress comments
1 parent 5598a8f commit eb094f5

File tree

2 files changed

+64
-48
lines changed

2 files changed

+64
-48
lines changed

‎src/core/core.scale.js‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -806,24 +806,24 @@ module.exports = function(Chart) {
806806
tmBorderDash: borderDash,
807807
tmBorderDashOffset: borderDashOffset,
808808
rotation: -1 * labelRotationRadians,
809-
label: label,
809+
label: '' + label,
810810
major: tick.major,
811811
textBaseline: textBaseline,
812812
textAlign: textAlign
813813
});
814814
});
815815

816816
// When offsetGridLines is enabled, there should be one more tick mark than there
817-
// are ticks in scale.ticks array, thefore the missing gridLine has to be manually added
817+
// are ticks in scale.ticks array, therefore the missing gridLine has to be manually added
818818
if (gridLines.offsetGridLines) {
819819
var aliasPixel = helpers.aliasPixel(gridLines.lineWidth);
820820
itemsToDraw.push({
821821
tx1: !isHorizontal ? xTickStart : chartArea.right + aliasPixel,
822822
ty1: !isHorizontal ? chartArea.bottom + aliasPixel : yTickStart,
823823
tx2: !isHorizontal ? xTickEnd : chartArea.right + aliasPixel,
824824
ty2: !isHorizontal ? chartArea.bottom + aliasPixel : yTickEnd,
825-
tmWidth: gridLines.lineWidth,
826-
tmColor: gridLines.color,
825+
tmWidth: helpers.valueAtIndexOrDefault(gridLines.lineWidth, ticks.length),
826+
tmColor: helpers.valueAtIndexOrDefault(gridLines.color, ticks.length),
827827
tmBorderDash: gridLines.borderDash,
828828
tmBorderDashOffset: gridLines.borderDashOffset
829829
});
@@ -851,7 +851,7 @@ module.exports = function(Chart) {
851851
context.restore();
852852
}
853853

854-
if (optionTicks.display && itemToDraw.label !== undefined && itemToDraw.label !== '') {
854+
if (optionTicks.display && itemToDraw.label) {
855855
// Make sure we draw text in the correct color and font
856856
context.save();
857857
context.translate(itemToDraw.labelX, itemToDraw.labelY);
@@ -909,7 +909,7 @@ module.exports = function(Chart) {
909909
}
910910

911911
// gridLines.drawBorder is deprecated
912-
if (gridLines.drawBorder && options.borderColor !== null && options.borderWidth !== 0 && options.borderWidth !== null) {
912+
if (gridLines.drawBorder && options.borderColor && options.borderWidth) {
913913
// Draw the scale border
914914
context.lineWidth = options.borderWidth;
915915
context.strokeStyle = options.borderColor;

‎src/plugins/plugin.gridlines.js‎

Lines changed: 58 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,41 @@
11
'use strict';
22

3-
module.exports = function(Chart) {
4-
var helpers = Chart.helpers;
5-
var globalDefaults = Chart.defaults.global;
3+
var defaults = require('../core/core.defaults');
4+
var helpers = require('../helpers/index');
5+
var MODEL_KEY = '$gridlines';
66

7-
// Stores all gridLines that should be displayed
8-
var lines = [];
7+
// This is copied from core.scale.js, which is also required here and im not sure where it should be placed for both of them to access it
8+
function getLineValue(scale, index, offsetGridLines) {
9+
var lineValue = scale.getPixelForTick(index);
910

11+
if (offsetGridLines) {
12+
if (index === 0) {
13+
lineValue -= (scale.getPixelForTick(1) - lineValue) / 2;
14+
} else {
15+
lineValue -= (lineValue - scale.getPixelForTick(index - 1)) / 2;
16+
}
17+
}
18+
return lineValue;
19+
}
20+
21+
module.exports = function() {
1022
function getGridLine(chart, scale, position, tickIndex) {
1123
var chartArea = chart.chartArea;
1224
var scaleOptions = scale.options;
1325
var gridLines = scaleOptions.gridLines;
1426

1527
var lineWidth, lineColor, borderDash, borderDashOffset;
1628

17-
if (tickIndex === (typeof scale.zeroLineIndex !== 'undefined' ? scale.zeroLineIndex : 0)) {
29+
if (tickIndex !== undefined && tickIndex === scale.zeroLineIndex) {
1830
lineWidth = gridLines.zeroLineWidth;
1931
lineColor = gridLines.zeroLineColor;
2032
borderDash = gridLines.zeroLineBorderDash;
2133
borderDashOffset = gridLines.zeroLineBorderDashOffset;
2234
} else {
2335
lineWidth = helpers.getValueAtIndexOrDefault(gridLines.lineWidth, tickIndex);
2436
lineColor = helpers.getValueAtIndexOrDefault(gridLines.color, tickIndex);
25-
borderDash = helpers.getValueOrDefault(gridLines.borderDash, globalDefaults.borderDash);
26-
borderDashOffset = helpers.getValueOrDefault(gridLines.borderDashOffset, globalDefaults.borderDashOffset);
37+
borderDash = helpers.getValueOrDefault(gridLines.borderDash, defaults.global.borderDash);
38+
borderDashOffset = helpers.getValueOrDefault(gridLines.borderDashOffset, defaults.global.borderDashOffset);
2739
}
2840

2941
var x1, x2, y1, y2;
@@ -51,9 +63,9 @@ module.exports = function(Chart) {
5163
}
5264

5365
function collectVisibleGridLines(chart) {
54-
lines = [];
66+
var lines = [];
5567

56-
// Temporary object that stores already collected gridLine positions to check and prevent gridLines from overlapping
68+
// Temporary object that stores already collected gridLine positions to prevent gridLines from overlapping
5769
var gridLinesHash = {
5870
horizontal: {},
5971
vertical: {}
@@ -62,12 +74,11 @@ module.exports = function(Chart) {
6274
// Marks scale border positions to prevent overlapping of gridLines and scale borders
6375
helpers.each(chart.scales, function(scale) {
6476
var scaleOptions = scale.options;
77+
var glHashByOrientantion = gridLinesHash[!scale.isHorizontal() ? 'horizontal' : 'vertical'];
78+
var borderPosition;
6579

6680
// gridLines.drawBorder is deprecated
6781
if (scaleOptions.gridLines.drawBorder && scaleOptions.borderColor !== null && scaleOptions.borderWidth !== 0 && scaleOptions.borderWidth !== null) {
68-
var glHashByOrientantion = gridLinesHash[!scale.isHorizontal() ? 'horizontal' : 'vertical'];
69-
var borderPosition;
70-
7182
if (scale.isHorizontal()) {
7283
borderPosition = scale.position === 'top' ? scale.bottom : scale.top;
7384
} else {
@@ -81,19 +92,16 @@ module.exports = function(Chart) {
8192
// Collects gridLines
8293
helpers.each(chart.scales, function(scale) {
8394
var scaleOptions = scale.options;
95+
var glHashByOrientantion = gridLinesHash[scale.isHorizontal() ? 'horizontal' : 'vertical'];
96+
var position;
8497

8598
if (scaleOptions.display && scaleOptions.gridLines.display && scaleOptions.gridLines.drawOnChartArea) {
86-
var glHashByOrientantion = gridLinesHash[scale.isHorizontal() ? 'horizontal' : 'vertical'];
87-
var position;
88-
89-
for (var tickIndex = 0; tickIndex < scale.ticks.length; tickIndex++) {
90-
var tick = scale.ticks[tickIndex];
91-
92-
if (tick === null || tick === undefined) {
99+
for (var tickIndex = 0, ticksCount = scale.ticks.length; tickIndex < ticksCount; tickIndex++) {
100+
if (helpers.isNullOrUndef(scale.ticks[tickIndex])) {
93101
continue;
94102
}
95103

96-
position = scale.getPixelForTick(tickIndex);
104+
position = getLineValue(scale, tickIndex, scaleOptions.gridLines.offsetGridLines && ticksCount > 1);
97105

98106
if (glHashByOrientantion[position] === undefined) {
99107
glHashByOrientantion[position] = true;
@@ -102,7 +110,7 @@ module.exports = function(Chart) {
102110
}
103111

104112
// When offsetGridLines is enabled, there should be one more gridLine than there
105-
// are ticks in scale.ticks array, thefore the missing gridLine has to be manually added
113+
// are ticks in scale.ticks array, therefore the missing gridLine has to be manually added
106114
if (scaleOptions.gridLines.offsetGridLines) {
107115
position = Math.round(!scale.isHorizontal() ? scale.bottom : scale.right);
108116

@@ -113,26 +121,29 @@ module.exports = function(Chart) {
113121
}
114122
}
115123
});
124+
125+
return lines;
116126
}
117127

118-
function drawGridLines(chart) {
119-
var context = chart.ctx;
128+
function drawGridLines(ctx, lines) {
129+
var aliasPixel;
130+
var x1, x2, y1, y2;
120131

121-
for (var i = 0; i < lines.length; i++) {
132+
for (var i = 0, ilen = lines.length; i < ilen; i++) {
122133
var line = lines[i];
123134

124-
context.lineWidth = line.width;
125-
context.strokeStyle = line.color;
126-
if (context.setLineDash) {
127-
context.setLineDash(line.borderDash);
128-
context.lineDashOffset = line.borderDashOffset;
135+
ctx.lineWidth = line.width;
136+
ctx.strokeStyle = line.color;
137+
if (ctx.setLineDash) {
138+
ctx.setLineDash(line.borderDash);
139+
ctx.lineDashOffset = line.borderDashOffset;
129140
}
130141

131-
var aliasPixel = helpers.aliasPixel(context.lineWidth);
132-
var x1 = line.x1;
133-
var x2 = line.x2;
134-
var y1 = line.y1;
135-
var y2 = line.y2;
142+
aliasPixel = helpers.aliasPixel(ctx.lineWidth);
143+
x1 = line.x1;
144+
x2 = line.x2;
145+
y1 = line.y1;
146+
y2 = line.y2;
136147

137148
if (y1 === y2) {
138149
y1 += aliasPixel;
@@ -142,25 +153,30 @@ module.exports = function(Chart) {
142153
x2 += aliasPixel;
143154
}
144155

145-
context.beginPath();
156+
ctx.beginPath();
146157

147-
context.moveTo(x1, y1);
148-
context.lineTo(x2, y2);
158+
ctx.moveTo(x1, y1);
159+
ctx.lineTo(x2, y2);
149160

150-
context.stroke();
151-
context.restore();
161+
ctx.stroke();
162+
ctx.restore();
152163
}
153164
}
154165

155166
return {
156167
id: 'gridlines',
157168

158169
afterUpdate: function(chart) {
159-
collectVisibleGridLines(chart);
170+
chart[MODEL_KEY] = {
171+
lines: collectVisibleGridLines(chart)
172+
};
160173
},
161174

162175
beforeDraw: function(chart) {
163-
drawGridLines(chart);
176+
var model = chart[MODEL_KEY];
177+
if (model) {
178+
drawGridLines(chart.ctx, model.lines);
179+
}
164180
}
165181
};
166182
};

0 commit comments

Comments
 (0)