archive-gh-me/Chart.js
1
0
Fork 0
mirror of https://github.com/chartjs/Chart.js.git synced 2025-12-08 20:36:08 +00:00
Code Issues Projects Releases Wiki Activity

Point cleanup (#6755)

Browse Source 
* remove steppedLine from Point
* Remove tension from Point
* Migration guide, private
This commit is contained in:
Jukka Kurkela 2019-11-18 03:28:13 +02:00 committed by Evert Timberg
parent f5b2b8db64
commit eb0751c6d0
7 changed files with 69 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
docs/getting-started/v3-migration.md
View File

@ -57,6 +57,7 @@ Chart.js 3.0 introduces a number of breaking changes. Chart.js 2.0 was released
* `helpers.aliasPixel`
* `helpers.configMerge`
* `helpers.indexOf`
* `helpers.lineTo`
* `helpers.min`
* `helpers.max`
* `helpers.nextItem`
@ -83,6 +84,8 @@ Chart.js 3.0 introduces a number of breaking changes. Chart.js 2.0 was released
* `_model.datasetLabel`
* `_model.label`
* `Point._model.tension`
* `Point._model.steppedLine`
* `TimeScale.getLabelWidth`
### Renamed

3
src/controllers/controller.line.js
View File

@ -110,7 +110,6 @@ module.exports = DatasetController.extend({
var meta = me.getMeta();
var xScale = me._xScale;
var yScale = me._yScale;
var lineModel = meta.dataset._model;
var stacked = meta._stacked;
var parsed = me._getParsed(index);
var options = me._resolveDataElementOptions(index);
@ -132,8 +131,6 @@ module.exports = DatasetController.extend({
backgroundColor: options.backgroundColor,
borderColor: options.borderColor,
borderWidth: options.borderWidth,
tension: lineModel ? lineModel.tension : 0,
steppedLine: lineModel ? lineModel.steppedLine : false,
// Tooltip
hitRadius: options.hitRadius
};

11
src/controllers/controller.radar.js
View File

@ -96,15 +96,9 @@ module.exports = DatasetController.extend({
var meta = me.getMeta();
var line = meta.dataset;
var points = meta.data || [];
var config = me._config;
var animationsDisabled = me.chart._animationsDisabled;
var i, ilen;
// Compatibility: If the properties are defined with only the old name, use those values
if (config.tension !== undefined && config.lineTension === undefined) {
config.lineTension = config.tension;
}
// Data
line._children = points;
line._loop = true;
@ -133,7 +127,6 @@ module.exports = DatasetController.extend({
var scale = me.chart.scale;
var pointPosition = scale.getPointPositionForValue(index, dataset.data[index]);
var options = me._resolveDataElementOptions(index);
var lineModel = me.getMeta().dataset._model;
var x = reset ? scale.xCenter : pointPosition.x;
var y = reset ? scale.yCenter : pointPosition.y;
@ -152,7 +145,6 @@ module.exports = DatasetController.extend({
backgroundColor: options.backgroundColor,
borderColor: options.borderColor,
borderWidth: options.borderWidth,
tension: lineModel ? lineModel.tension : 0,
// Tooltip
hitRadius: options.hitRadius
@ -177,6 +169,7 @@ module.exports = DatasetController.extend({
updateBezierControlPoints: function() {
var me = this;
var meta = me.getMeta();
var lineModel = meta.dataset._model;
var area = me.chart.chartArea;
var points = meta.data || [];
var i, ilen, model, controlPoints;
@ -198,7 +191,7 @@ module.exports = DatasetController.extend({
previousItem(points, i)._model,
model,
nextItem(points, i)._model,
model.tension
lineModel.tension
);
// Prevent the bezier going outside of the bounds of the graph

10
src/elements/element.line.js
View File

@ -52,7 +52,9 @@ function setStyle(ctx, vm) {
ctx.strokeStyle = vm.borderColor;
}
function normalPath(ctx, points, spanGaps) {
function normalPath(ctx, points, spanGaps, vm) {
const steppedLine = vm.steppedLine;
const lineMethod = steppedLine ? helpers.canvas._steppedLineTo : helpers.canvas._bezierCurveTo;
let move = true;
let index, currentVM, previousVM;
@ -66,8 +68,10 @@ function normalPath(ctx, points, spanGaps) {
if (move) {
ctx.moveTo(currentVM.x, currentVM.y);
move = false;
} else if (vm.tension || steppedLine) {
lineMethod(ctx, previousVM, currentVM, false, steppedLine);
} else {
helpers.canvas.lineTo(ctx, previousVM, currentVM);
ctx.lineTo(currentVM.x, currentVM.y);
}
previousVM = currentVM;
}
@ -167,7 +171,7 @@ class Line extends Element {
if (useFastPath(vm)) {
fastPath(ctx, points, spanGaps);
} else {
normalPath(ctx, points, spanGaps);
normalPath(ctx, points, spanGaps, vm);
}
if (closePath) {

37
src/helpers/helpers.canvas.js
View File

@ -171,27 +171,26 @@ module.exports = {
ctx.restore();
},
lineTo: function(ctx, previous, target, flip) {
var stepped = target.steppedLine;
if (stepped) {
if (stepped === 'middle') {
var midpoint = (previous.x + target.x) / 2.0;
ctx.lineTo(midpoint, flip ? target.y : previous.y);
ctx.lineTo(midpoint, flip ? previous.y : target.y);
} else if ((stepped === 'after' && !flip) || (stepped !== 'after' && flip)) {
ctx.lineTo(previous.x, target.y);
} else {
ctx.lineTo(target.x, previous.y);
}
ctx.lineTo(target.x, target.y);
return;
}
if (!target.tension) {
ctx.lineTo(target.x, target.y);
return;
/**
* @private
*/
_steppedLineTo: function(ctx, previous, target, flip, mode) {
if (mode === 'middle') {
const midpoint = (previous.x + target.x) / 2.0;
ctx.lineTo(midpoint, flip ? target.y : previous.y);
ctx.lineTo(midpoint, flip ? previous.y : target.y);
} else if ((mode === 'after' && !flip) || (mode !== 'after' && flip)) {
ctx.lineTo(previous.x, target.y);
} else {
ctx.lineTo(target.x, previous.y);
}
ctx.lineTo(target.x, target.y);
},
/**
* @private
*/
_bezierCurveTo: function(ctx, previous, target, flip) {
ctx.bezierCurveTo(
flip ? previous.controlPointPreviousX : previous.controlPointNextX,
flip ? previous.controlPointPreviousY : previous.controlPointNextY,

58
src/plugins/plugin.filler.js
View File

@ -47,6 +47,7 @@ var mappers = {
return {
x: x === null ? point.x : x,
y: y === null ? point.y : y,
boundary: true
};
};
}
@ -136,7 +137,8 @@ function computeLinearBoundary(source) {
horizontal = scale.isHorizontal();
return {
x: horizontal ? target : null,
y: horizontal ? null : target
y: horizontal ? null : target,
boundary: true
};
}
}
@ -168,6 +170,7 @@ function computeCircularBoundary(source) {
point.cy = center.y;
point.angle = scale.getIndexAngle(i) - Math.PI / 2;
}
point.boundary = true;
target.push(point);
}
return target;
@ -232,8 +235,9 @@ function isDrawable(point) {
return point && !point.skip;
}
function drawArea(ctx, curve0, curve1, len0, len1) {
var i, cx, cy, r;
function drawArea(ctx, curve0, curve1, len0, len1, stepped, tension) {
const lineTo = stepped ? helpers.canvas._steppedLineTo : helpers.canvas._bezierCurveTo;
let i, cx, cy, r, target;
if (!len0 || !len1) {
return;
@ -242,7 +246,12 @@ function drawArea(ctx, curve0, curve1, len0, len1) {
// building first area curve (normal)
ctx.moveTo(curve0[0].x, curve0[0].y);
for (i = 1; i < len0; ++i) {
helpers.canvas.lineTo(ctx, curve0[i - 1], curve0[i]);
target = curve0[i];
if (!target.boundary && (tension || stepped)) {
lineTo(ctx, curve0[i - 1], target, false, stepped);
} else {
ctx.lineTo(target.x, target.y);
}
}
if (curve1[0].angle !== undefined) {
@ -260,18 +269,27 @@ function drawArea(ctx, curve0, curve1, len0, len1) {
// building opposite area curve (reverse)
for (i = len1 - 1; i > 0; --i) {
helpers.canvas.lineTo(ctx, curve1[i], curve1[i - 1], true);
target = curve1[i - 1];
if (!target.boundary && (tension || stepped)) {
lineTo(ctx, curve1[i], target, true, stepped);
} else {
ctx.lineTo(target.x, target.y);
}
}
}
function doFill(ctx, points, mapper, view, color, loop) {
var count = points.length;
var span = view.spanGaps;
var curve0 = [];
var curve1 = [];
var len0 = 0;
var len1 = 0;
var i, ilen, index, p0, p1, d0, d1, loopOffset;
function doFill(ctx, points, mapper, el) {
const count = points.length;
const view = el._view;
const loop = el._loop;
const span = view.spanGaps;
const stepped = view.steppedLine;
const tension = view.tension;
let curve0 = [];
let curve1 = [];
let len0 = 0;
let len1 = 0;
let i, ilen, index, p0, p1, d0, d1, loopOffset;
ctx.beginPath();
@ -292,7 +310,7 @@ function doFill(ctx, points, mapper, view, color, loop) {
len1 = curve1.push(p1);
} else if (len0 && len1) {
if (!span) {
drawArea(ctx, curve0, curve1, len0, len1);
drawArea(ctx, curve0, curve1, len0, len1, stepped, tension);
len0 = len1 = 0;
curve0 = [];
curve1 = [];
@ -307,10 +325,10 @@ function doFill(ctx, points, mapper, view, color, loop) {
}
}
drawArea(ctx, curve0, curve1, len0, len1);
drawArea(ctx, curve0, curve1, len0, len1, stepped, tension);
ctx.closePath();
ctx.fillStyle = color;
ctx.fillStyle = view.backgroundColor;
ctx.fill();
}
@ -357,7 +375,7 @@ module.exports = {
beforeDatasetsDraw: function(chart) {
var metasets = chart._getSortedVisibleDatasetMetas();
var ctx = chart.ctx;
var meta, i, el, view, points, mapper, color;
var meta, i, el, points, mapper;
for (i = metasets.length - 1; i >= 0; --i) {
meta = metasets[i].$filler;
@ -367,14 +385,12 @@ module.exports = {
}
el = meta.el;
view = el._view;
points = el._children || [];
mapper = meta.mapper;
color = view.backgroundColor || defaults.global.defaultColor;
if (mapper && color && points.length) {
if (mapper && points.length) {
helpers.canvas.clipArea(ctx, chart.chartArea);
doFill(ctx, points, mapper, view, color, el._loop);
doFill(ctx, points, mapper, el);
helpers.canvas.unclipArea(ctx);
}
}

5
test/specs/controller.radar.tests.js
View File

@ -127,6 +127,7 @@ describe('Chart.controllers.radar', function() {
borderJoinStyle: 'bevel',
borderWidth: 1.2,
fill: true,
tension: 0.1,
}));
[
@ -149,7 +150,6 @@ describe('Chart.controllers.radar', function() {
radius: 3,
pointStyle: 'circle',
skip: false,
tension: 0.1,
}));
});
@ -176,7 +176,6 @@ describe('Chart.controllers.radar', function() {
radius: 3,
pointStyle: 'circle',
skip: false,
tension: 0.1,
}));
});
@ -209,6 +208,7 @@ describe('Chart.controllers.radar', function() {
borderJoinStyle: 'miter',
borderWidth: 0.55,
fill: false,
tension: 0,
}));
// Since tension is now 0, we don't care about the control points
@ -228,7 +228,6 @@ describe('Chart.controllers.radar', function() {
radius: 22,
pointStyle: 'circle',
skip: false,
tension: 0,
}));
});
});