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

Change updateElement to updateElements (#6722)

Browse Source
This commit is contained in:
Ben McCann 2019-11-19 04:12:38 -08:00 committed by Evert Timberg
parent edbeaac29f
commit 34b93751db
8 changed files with 195 additions and 198 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -101,6 +101,7 @@ Chart.js 3.0 introduces a number of breaking changes. Chart.js 2.0 was released
* `Chart.Animation.animationObject` was renamed to `Chart.Animation`
* `Chart.Animation.chartInstance` was renamed to `Chart.Animation.chart`
* `DatasetController.createMetaData` and `DatasetController.createMetaDataset` were replaced with `DatasetController.createElement`
* `DatasetController.updateElement` was renamed to `DatasetController.updateElements`
* `TimeScale.getLabelCapacity` was renamed to `TimeScale._getLabelCapacity`
* `TimeScale.tickFormatFunction` was renamed to `TimeScale._tickFormatFunction`
* `TimeScale.getPixelForOffset` was renamed to `TimeScale._getPixelForOffset`

91
src/controllers/controller.bar.js
View File

@ -271,58 +271,49 @@ module.exports = DatasetController.extend({
},
update: function(reset) {
var me = this;
var rects = me._cachedMeta.data;
var i, ilen;
me._ruler = me.getRuler();
for (i = 0, ilen = rects.length; i < ilen; ++i) {
me.updateElement(rects[i], i, reset);
}
},
updateElement: function(rectangle, index, reset) {
var me = this;
var options = me._resolveDataElementOptions(index);
rectangle._model = {
backgroundColor: options.backgroundColor,
borderColor: options.borderColor,
borderSkipped: options.borderSkipped,
borderWidth: options.borderWidth
};
// all borders are drawn for floating bar
if (me._getParsed(index)._custom) {
rectangle._model.borderSkipped = null;
}
me._updateElementGeometry(rectangle, index, reset, options);
rectangle.pivot(me.chart._animationsDisabled);
},
/**
* @private
*/
_updateElementGeometry: function(rectangle, index, reset, options) {
const me = this;
const meta = me._cachedMeta;
const model = rectangle._model;
const vScale = meta.vScale;
const base = vScale.getBasePixel();
const horizontal = vScale.isHorizontal();
const ruler = me._ruler || me.getRuler();
const vpixels = me.calculateBarValuePixels(index, options);
const ipixels = me.calculateBarIndexPixels(index, ruler, options);
const rects = me._cachedMeta.data;
model.horizontal = horizontal;
model.base = reset ? base : vpixels.base;
model.x = horizontal ? reset ? base : vpixels.head : ipixels.center;
model.y = horizontal ? ipixels.center : reset ? base : vpixels.head;
model.height = horizontal ? ipixels.size : undefined;
model.width = horizontal ? undefined : ipixels.size;
me.updateElements(rects, 0, rects.length, reset);
},
updateElements: function(rectangles, start, count, reset) {
const me = this;
const vscale = me._cachedMeta.vScale;
const base = vscale.getBasePixel();
const horizontal = vscale.isHorizontal();
const ruler = me.getRuler();
let i;
for (i = 0; i < start + count; i++) {
const rectangle = rectangles[i];
const options = me._resolveDataElementOptions(i);
const vpixels = me.calculateBarValuePixels(i, options);
const ipixels = me.calculateBarIndexPixels(i, ruler, options);
rectangle._model = {
backgroundColor: options.backgroundColor,
borderColor: options.borderColor,
borderSkipped: options.borderSkipped,
borderWidth: options.borderWidth
};
const model = rectangle._model;
// all borders are drawn for floating bar
if (me._getParsed(i)._custom) {
model.borderSkipped = null;
}
model.horizontal = horizontal;
model.base = reset ? base : vpixels.base;
model.x = horizontal ? reset ? base : vpixels.head : ipixels.center;
model.y = horizontal ? ipixels.center : reset ? base : vpixels.head;
model.height = horizontal ? ipixels.size : undefined;
model.width = horizontal ? undefined : ipixels.size;
rectangle.pivot(me.chart._animationsDisabled);
}
},
/**

47
src/controllers/controller.bubble.js
View File

@ -116,39 +116,42 @@ module.exports = DatasetController.extend({
const points = me._cachedMeta.data;
// Update Points
helpers.each(points, function(point, index) {
me.updateElement(point, index, reset);
});
me.updateElements(points, 0, points.length, reset);
},
/**
* @protected
*/
updateElement: function(point, index, reset) {
updateElements: function(points, start, count, reset) {
const me = this;
const meta = me._cachedMeta;
const xScale = meta.xScale;
const yScale = meta.yScale;
const options = me._resolveDataElementOptions(index);
const parsed = !reset && me._getParsed(index);
const x = reset ? xScale.getPixelForDecimal(0.5) : xScale.getPixelForValue(parsed[xScale.id]);
const y = reset ? yScale.getBasePixel() : yScale.getPixelForValue(parsed[yScale.id]);
let i;
point._options = options;
point._model = {
backgroundColor: options.backgroundColor,
borderColor: options.borderColor,
borderWidth: options.borderWidth,
hitRadius: options.hitRadius,
pointStyle: options.pointStyle,
rotation: options.rotation,
radius: reset ? 0 : options.radius,
skip: isNaN(x) || isNaN(y),
x: x,
y: y,
};
for (i = start; i < start + count; i++) {
const point = points[i];
const options = me._resolveDataElementOptions(i);
const parsed = !reset && me._getParsed(i);
const x = reset ? xScale.getPixelForDecimal(0.5) : xScale.getPixelForValue(parsed[xScale.id]);
const y = reset ? yScale.getBasePixel() : yScale.getPixelForValue(parsed[yScale.id]);
point.pivot(me.chart._animationsDisabled);
point._options = options;
point._model = {
backgroundColor: options.backgroundColor,
borderColor: options.borderColor,
borderWidth: options.borderWidth,
hitRadius: options.hitRadius,
pointStyle: options.pointStyle,
rotation: options.rotation,
radius: reset ? 0 : options.radius,
skip: isNaN(x) || isNaN(y),
x: x,
y: y,
};
point.pivot(me.chart._animationsDisabled);
}
},
/**

65
src/controllers/controller.doughnut.js
View File

@ -217,29 +217,30 @@ module.exports = DatasetController.extend({
me.outerRadius = chart.outerRadius - chart.radiusLength * me._getRingWeightOffset(me.index);
me.innerRadius = Math.max(me.outerRadius - chart.radiusLength * chartWeight, 0);
for (i = 0, ilen = arcs.length; i < ilen; ++i) {
me.updateElement(arcs[i], i, reset);
}
me.updateElements(arcs, 0, arcs.length, reset);
},
updateElement: function(arc, index, reset) {
var me = this;
var chart = me.chart;
var chartArea = chart.chartArea;
var opts = chart.options;
var animationOpts = opts.animation;
var centerX = (chartArea.left + chartArea.right) / 2;
var centerY = (chartArea.top + chartArea.bottom) / 2;
var startAngle = opts.rotation; // non reset case handled later
var endAngle = opts.rotation; // non reset case handled later
var circumference = reset && animationOpts.animateRotate ? 0 : arc.hidden ? 0 : me.calculateCircumference(arc._parsed * opts.circumference / DOUBLE_PI);
var innerRadius = reset && animationOpts.animateScale ? 0 : me.innerRadius;
var outerRadius = reset && animationOpts.animateScale ? 0 : me.outerRadius;
var options = arc._options || {};
helpers.extend(arc, {
// Desired view properties
_model: {
updateElements: function(arcs, start, count, reset) {
const me = this;
const chart = me.chart;
const chartArea = chart.chartArea;
const opts = chart.options;
const animationOpts = opts.animation;
const centerX = (chartArea.left + chartArea.right) / 2;
const centerY = (chartArea.top + chartArea.bottom) / 2;
const startAngle = opts.rotation; // non reset case handled later
const endAngle = opts.rotation; // non reset case handled later
const innerRadius = reset && animationOpts.animateScale ? 0 : me.innerRadius;
const outerRadius = reset && animationOpts.animateScale ? 0 : me.outerRadius;
var i;
for (i = 0; i < start + count; ++i) {
const arc = arcs[i];
const circumference = reset && animationOpts.animateRotate ? 0 : arc.hidden ? 0 : me.calculateCircumference(arc._parsed * opts.circumference / DOUBLE_PI);
const options = arc._options || {};
const model = {
// Desired view properties
backgroundColor: options.backgroundColor,
borderColor: options.borderColor,
borderWidth: options.borderWidth,
@ -251,23 +252,23 @@ module.exports = DatasetController.extend({
circumference: circumference,
outerRadius: outerRadius,
innerRadius: innerRadius
}
});
};
var model = arc._model;
arc._model = model;
// Set correct angles if not resetting
if (!reset || !animationOpts.animateRotate) {
if (index === 0) {
model.startAngle = opts.rotation;
} else {
model.startAngle = me._cachedMeta.data[index - 1]._model.endAngle;
// Set correct angles if not resetting
if (!reset || !animationOpts.animateRotate) {
if (i === 0) {
model.startAngle = opts.rotation;
} else {
model.startAngle = me._cachedMeta.data[i - 1]._model.endAngle;
}
model.endAngle = model.startAngle + model.circumference;
}
model.endAngle = model.startAngle + model.circumference;
arc.pivot(chart._animationsDisabled);
}
arc.pivot(chart._animationsDisabled);
},
calculateTotal: function() {

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

@ -68,14 +68,14 @@ module.exports = DatasetController.extend({
},
update: function(reset) {
var me = this;
var meta = me._cachedMeta;
var line = meta.dataset;
var points = meta.data || [];
var options = me.chart.options;
var config = me._config;
var showLine = me._showLine = valueOrDefault(config.showLine, options.showLines);
var i, ilen;
const me = this;
const meta = me._cachedMeta;
const line = meta.dataset;
const points = meta.data || [];
const options = me.chart.options;
const config = me._config;
const showLine = me._showLine = valueOrDefault(config.showLine, options.showLines);
let i, ilen;
// Update Line
if (showLine) {
@ -88,9 +88,7 @@ module.exports = DatasetController.extend({
}
// Update Points
for (i = 0, ilen = points.length; i < ilen; ++i) {
me.updateElement(points[i], i, reset);
}
me.updateElements(points, 0, points.length, reset);
if (showLine && line._model.tension !== 0) {
me.updateBezierControlPoints();
@ -102,35 +100,40 @@ module.exports = DatasetController.extend({
}
},
updateElement: function(point, index, reset) {
updateElements: function(points, start, count, reset) {
const me = this;
const meta = me._cachedMeta;
const xScale = meta.xScale;
const yScale = meta.yScale;
const stacked = meta._stacked;
const parsed = me._getParsed(index);
const options = me._resolveDataElementOptions(index);
const x = xScale.getPixelForValue(parsed[xScale.id]);
const y = reset ? yScale.getBasePixel() : yScale.getPixelForValue(stacked ? me._applyStack(yScale, parsed) : parsed[yScale.id]);
var i;
// Utility
point._options = options;
for (i = start; i < start + count; ++i) {
const point = points[i];
const parsed = me._getParsed(i);
const options = me._resolveDataElementOptions(i);
const x = xScale.getPixelForValue(parsed[xScale.id]);
const y = reset ? yScale.getBasePixel() : yScale.getPixelForValue(stacked ? me._applyStack(yScale, parsed) : parsed[yScale.id]);
// Desired view properties
point._model = {
x: x,
y: y,
skip: isNaN(x) || isNaN(y),
// Appearance
radius: options.radius,
pointStyle: options.pointStyle,
rotation: options.rotation,
backgroundColor: options.backgroundColor,
borderColor: options.borderColor,
borderWidth: options.borderWidth,
// Tooltip
hitRadius: options.hitRadius
};
// Utility
point._options = options;
// Desired view properties
point._model = {
x: x,
y: y,
skip: isNaN(x) || isNaN(y),
// Appearance
radius: options.radius,
pointStyle: options.pointStyle,
rotation: options.rotation,
backgroundColor: options.backgroundColor,
borderColor: options.borderColor,
borderWidth: options.borderWidth,
// Tooltip
hitRadius: options.hitRadius
};
}
},
/**
@ -234,7 +237,6 @@ module.exports = DatasetController.extend({
var ilen = points.length;
if (me._showLine) {
meta.dataset.draw();
}

51
src/controllers/controller.polarArea.js
View File

@ -154,10 +154,7 @@ module.exports = DatasetController.extend({
start += angle;
}
for (i = 0, ilen = arcs.length; i < ilen; ++i) {
arcs[i]._options = me._resolveDataElementOptions(i);
me.updateElement(arcs[i], i, reset);
}
me.updateElements(arcs, 0, arcs.length, reset);
},
/**
@ -178,29 +175,29 @@ module.exports = DatasetController.extend({
me.innerRadius = me.outerRadius - chart.radiusLength;
},
updateElement: function(arc, index, reset) {
var me = this;
var chart = me.chart;
var dataset = me.getDataset();
var opts = chart.options;
var animationOpts = opts.animation;
var scale = chart.scale;
updateElements: function(arcs, start, count, reset) {
const me = this;
const chart = me.chart;
const dataset = me.getDataset();
const opts = chart.options;
const animationOpts = opts.animation;
const scale = chart.scale;
const centerX = scale.xCenter;
const centerY = scale.yCenter;
var i;
var centerX = scale.xCenter;
var centerY = scale.yCenter;
for (i = 0; i < start + count; i++) {
const arc = arcs[i];
// var negHalfPI = -0.5 * Math.PI;
const datasetStartAngle = opts.startAngle;
const distance = arc.hidden ? 0 : scale.getDistanceFromCenterForValue(dataset.data[i]);
const startAngle = me._starts[i];
const endAngle = startAngle + (arc.hidden ? 0 : me._angles[i]);
// var negHalfPI = -0.5 * Math.PI;
var datasetStartAngle = opts.startAngle;
var distance = arc.hidden ? 0 : scale.getDistanceFromCenterForValue(dataset.data[index]);
var startAngle = me._starts[index];
var endAngle = startAngle + (arc.hidden ? 0 : me._angles[index]);
const resetRadius = animationOpts.animateScale ? 0 : scale.getDistanceFromCenterForValue(dataset.data[i]);
const options = arc._options = me._resolveDataElementOptions(i);
var resetRadius = animationOpts.animateScale ? 0 : scale.getDistanceFromCenterForValue(dataset.data[index]);
var options = arc._options || {};
helpers.extend(arc, {
// Desired view properties
_model: {
arc._model = {
backgroundColor: options.backgroundColor,
borderColor: options.borderColor,
borderWidth: options.borderWidth,
@ -211,10 +208,10 @@ module.exports = DatasetController.extend({
outerRadius: reset ? resetRadius : distance,
startAngle: reset && animationOpts.animateRotate ? datasetStartAngle : startAngle,
endAngle: reset && animationOpts.animateRotate ? datasetStartAngle : endAngle
}
});
};
arc.pivot(chart._animationsDisabled);
arc.pivot(chart._animationsDisabled);
}
},
countVisibleElements: function() {

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

@ -108,9 +108,7 @@ module.exports = DatasetController.extend({
line.pivot(animationsDisabled);
// Update Points
for (i = 0, ilen = points.length; i < ilen; ++i) {
me.updateElement(points[i], i, reset);
}
me.updateElements(points, 0, points.length, reset);
// Update bezier control points
me.updateBezierControlPoints();
@ -121,34 +119,39 @@ module.exports = DatasetController.extend({
}
},
updateElement: function(point, index, reset) {
var me = this;
var dataset = me.getDataset();
var scale = me.chart.scale;
var pointPosition = scale.getPointPositionForValue(index, dataset.data[index]);
var options = me._resolveDataElementOptions(index);
var x = reset ? scale.xCenter : pointPosition.x;
var y = reset ? scale.yCenter : pointPosition.y;
updateElements: function(points, start, count, reset) {
const me = this;
const dataset = me.getDataset();
const scale = me.chart.scale;
var i;
// Utility
point._options = options;
for (i = start; i < start + count; i++) {
const point = points[i];
const pointPosition = scale.getPointPositionForValue(i, dataset.data[i]);
const options = me._resolveDataElementOptions(i);
const x = reset ? scale.xCenter : pointPosition.x;
const y = reset ? scale.yCenter : pointPosition.y;
// Desired view properties
point._model = {
x: x, // value not used in dataset scale, but we want a consistent API between scales
y: y,
skip: isNaN(x) || isNaN(y),
// Appearance
radius: options.radius,
pointStyle: options.pointStyle,
rotation: options.rotation,
backgroundColor: options.backgroundColor,
borderColor: options.borderColor,
borderWidth: options.borderWidth,
// Utility
point._options = options;
// Tooltip
hitRadius: options.hitRadius
};
// Desired view properties
point._model = {
x: x, // value not used in dataset scale, but we want a consistent API between scales
y: y,
skip: isNaN(x) || isNaN(y),
// Appearance
radius: options.radius,
pointStyle: options.pointStyle,
rotation: options.rotation,
backgroundColor: options.backgroundColor,
borderColor: options.borderColor,
borderWidth: options.borderWidth,
// Tooltip
hitRadius: options.hitRadius
};
}
},
/**

9
src/core/core.datasetController.js
View File

@ -48,7 +48,6 @@ function listenArrayEvents(array, listener) {
});
}
function scaleClip(scale, allowedOverflow) {
var opts = scale && scale.options || {};
var reverse = opts.reverse;
@ -972,15 +971,15 @@ helpers.extend(DatasetController.prototype, {
insertElements: function(start, count) {
const me = this;
const elements = [];
const data = me._cachedMeta.data;
let i;
for (i = start; i < start + count; ++i) {
elements.push(me.createElement(me.dataElementType));
}
me._cachedMeta.data.splice(start, 0, ...elements);
data.splice(start, 0, ...elements);
me._parse(start, count);
for (i = 0; i < count; ++i) {
me.updateElement(elements[i], start + i, true);
}
me.updateElements(data, start, count);
},
/**