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

Early data parsing, stacking by value and support object data #6576

Merged
merged 7 commits into from
Nov 4, 2019
Merged

Early data parsing, stacking by value and support object data #6576

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
0d4e841
Early data parsing + stacking by value
kurkle Oct 16, 2019
2781f3a
Review comments
kurkle Oct 28, 2019
163f813
review comments
kurkle Oct 30, 2019
9ea67ce
Remove reduntant parsing
kurkle Nov 3, 2019
d12b00b
Couple CC warnings
kurkle Nov 3, 2019
2e7d65e
Optimize filterBetween
kurkle Nov 3, 2019
227b8f9
More migration info
kurkle Nov 4, 2019
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
4 changes: 2 additions & 2 deletions docs/developers/axes.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,8 +73,8 @@ To work with Chart.js, custom scale types must implement the following interface
// buildTicks() should create a ticks array on the axis instance, if you intend to use any of the implementations from the base class
buildTicks: function() {},

// Get the value to show for the data at the given index of the the given dataset, ie this.chart.data.datasets[datasetIndex].data[index]
getLabelForIndex: function(index, datasetIndex) {},
// Get the label to show for the given value
getLabelForValue: function(value) {},
kurkle marked this conversation as resolved.
Show resolved Hide resolved

// Get the pixel (x coordinate for horizontal axis, y coordinate for vertical axis) for a given value
// @param index: index into the ticks array
Expand Down
11 changes: 9 additions & 2 deletions docs/getting-started/v3-migration.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,11 +52,13 @@ Chart.js is no longer providing the `Chart.bundle.js` and `Chart.bundle.min.js`.
* `helpers.numberOfLabelLines`
* `helpers.removeEvent`
* `helpers.scaleMerge`
* `scale.getRightValue`
* `scale.mergeTicksOptions`
* `scale.ticksAsNumbers`
* `Chart.Controller`
* `Chart.chart.chart`
* `Chart.types`
* `Line.calculatePointY`
* Made `scale.handleDirectionalChanges` private
* Made `scale.tickValues` private

Expand All @@ -74,13 +76,18 @@ Chart.js is no longer providing the `Chart.bundle.js` and `Chart.bundle.min.js`.

### Changed

#### Ticks
#### Scales

* `scale.getLabelForIndex` was replaced by `scale.getLabelForValue`
* `scale.getPixelForValue` now has only one parameter

##### Ticks

* `scale.ticks` now contains objects instead of strings
* `buildTicks` is now expected to return tick objects
* `afterBuildTicks` now has no parameters like the other callbacks
* `convertTicksToLabels` was renamed to `generateTickLabels`. It is now expected to set the label property on the ticks given as input

#### Time Scale
##### Time Scale

* `getValueForPixel` now returns milliseconds since the epoch
147 changes: 101 additions & 46 deletions src/controllers/controller.bar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -125,6 +125,57 @@ function computeFlexCategoryTraits(index, ruler, options) {
};
}

function parseFloatBar(arr, item, vScale, i) {
var startValue = vScale._parse(arr[0], i);
var endValue = vScale._parse(arr[1], i);
var min = Math.min(startValue, endValue);
var max = Math.max(startValue, endValue);
var barStart = min;
var barEnd = max;

if (Math.abs(min) > Math.abs(max)) {
barStart = max;
barEnd = min;
}

// Store `barEnd` (furthest away from origin) as parsed value,
// to make stacking straight forward
item[vScale.id] = barEnd;

item._custom = {
Copy link
Contributor

Choose a reason for hiding this comment

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

Maybe we could compute this at runtime or store in a separate datastructure in the controller so that we don't need to modify by adding _custom? In the case that the user passes in data in format we prefer, it'd be nice not to modify their data

Copy link
Member Author

Choose a reason for hiding this comment

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

At the moment, this is internal data - but I see your point.

barStart: barStart,
barEnd: barEnd,
start: startValue,
end: endValue,
min: min,
max: max
};
}

function parseArrayOrPrimitive(meta, data, start, count) {
var iScale = this._getIndexScale();
var vScale = this._getValueScale();
var labels = iScale._getLabels();
var singleScale = iScale === vScale;
var parsed = [];
var i, ilen, item, entry;

for (i = start, ilen = start + count; i < ilen; ++i) {
entry = data[i];
item = {};
item[iScale.id] = singleScale || iScale._parse(labels[i], i);

if (helpers.isArray(entry)) {
parseFloatBar(entry, item, vScale, i);
} else {
item[vScale.id] = vScale._parse(entry, i);
}

parsed.push(item);
}
return parsed;
}

module.exports = DatasetController.extend({

dataElementType: elements.Rectangle,
Expand All @@ -144,6 +195,24 @@ module.exports = DatasetController.extend({
'minBarLength'
],

/**
* Overriding primitive data parsing since we support mixed primitive/array
* data for float bars
* @private
*/
_parsePrimitiveData: function() {
return parseArrayOrPrimitive.apply(this, arguments);
},

/**
* Overriding array data parsing since we support mixed primitive/array
* data for float bars
* @private
*/
_parseArrayData: function() {
return parseArrayOrPrimitive.apply(this, arguments);
},

initialize: function() {
var me = this;
var meta;
Expand Down Expand Up @@ -183,7 +252,8 @@ module.exports = DatasetController.extend({
label: me.chart.data.labels[index]
};

if (helpers.isArray(dataset.data[index])) {
// all borders are drawn for floating bar
if (me._getParsed(index)._custom) {
rectangle._model.borderSkipped = null;
}

Expand All @@ -202,8 +272,8 @@ module.exports = DatasetController.extend({
var base = vscale.getBasePixel();
var horizontal = vscale.isHorizontal();
var ruler = me._ruler || me.getRuler();
var vpixels = me.calculateBarValuePixels(me.index, index, options);
var ipixels = me.calculateBarIndexPixels(me.index, index, ruler, options);
var vpixels = me.calculateBarValuePixels(index, options);
var ipixels = me.calculateBarIndexPixels(index, ruler, options);

model.horizontal = horizontal;
model.base = reset ? base : vpixels.base;
Expand Down Expand Up @@ -283,7 +353,7 @@ module.exports = DatasetController.extend({
var i, ilen;

for (i = 0, ilen = me.getMeta().data.length; i < ilen; ++i) {
pixels.push(scale.getPixelForValue(null, i, me.index));
pixels.push(scale.getPixelForValue(me._getParsed(i)[scale.id]));
}

return {
Expand All @@ -299,52 +369,39 @@ module.exports = DatasetController.extend({
* Note: pixel values are not clamped to the scale area.
* @private
*/
calculateBarValuePixels: function(datasetIndex, index, options) {
calculateBarValuePixels: function(index, options) {
var me = this;
var chart = me.chart;
var scale = me._getValueScale();
var isHorizontal = scale.isHorizontal();
var datasets = chart.data.datasets;
var metasets = scale._getMatchingVisibleMetas(me._type);
var value = scale._parseValue(datasets[datasetIndex].data[index]);
var valueScale = me._getValueScale();
var minBarLength = options.minBarLength;
var stacked = scale.options.stacked;
var stack = me.getMeta().stack;
var start = value.start === undefined ? 0 : value.max >= 0 && value.min >= 0 ? value.min : value.max;
var length = value.start === undefined ? value.end : value.max >= 0 && value.min >= 0 ? value.max - value.min : value.min - value.max;
var ilen = metasets.length;
var i, imeta, ivalue, base, head, size, stackLength;

if (stacked || (stacked === undefined && stack !== undefined)) {
for (i = 0; i < ilen; ++i) {
imeta = metasets[i];

if (imeta.index === datasetIndex) {
break;
}

if (imeta.stack === stack) {
stackLength = scale._parseValue(datasets[imeta.index].data[index]);
ivalue = stackLength.start === undefined ? stackLength.end : stackLength.min >= 0 && stackLength.max >= 0 ? stackLength.max : stackLength.min;
var start = 0;
var parsed = me._getParsed(index);
var value = parsed[valueScale.id];
var custom = parsed._custom;
var length = me._cachedMeta._stacked ? me._applyStack(valueScale, parsed) : parsed[valueScale.id];
var base, head, size;

if (length !== value) {
start = length - value;
length = value;
}

if ((value.min < 0 && ivalue < 0) || (value.max >= 0 && ivalue > 0)) {
start += ivalue;
}
}
if (custom && custom.barStart !== undefined && custom.barEnd !== undefined) {
value = custom.barStart;
length = custom.barEnd - custom.barStart;
// bars crossing origin are not stacked
if (value !== 0 && Math.sign(value) !== Math.sign(custom.barEnd)) {
start = 0;
}
start += value;
}

base = scale.getPixelForValue(start);
head = scale.getPixelForValue(start + length);
base = valueScale.getPixelForValue(start);
head = valueScale.getPixelForValue(start + length);
size = head - base;

if (minBarLength !== undefined && Math.abs(size) < minBarLength) {
size = minBarLength;
if (length >= 0 && !isHorizontal || length < 0 && isHorizontal) {
head = base - minBarLength;
} else {
head = base + minBarLength;
}
size = size < 0 ? -minBarLength : minBarLength;
head = base + size;
}

return {
Expand All @@ -358,13 +415,13 @@ module.exports = DatasetController.extend({
/**
* @private
*/
calculateBarIndexPixels: function(datasetIndex, index, ruler, options) {
calculateBarIndexPixels: function(index, ruler, options) {
var me = this;
var range = options.barThickness === 'flex'
? computeFlexCategoryTraits(index, ruler, options)
: computeFitCategoryTraits(index, ruler, options);

var stackIndex = me.getStackIndex(datasetIndex, me.getMeta().stack);
var stackIndex = me.getStackIndex(me.index, me.getMeta().stack);
var center = range.start + (range.chunk * stackIndex) + (range.chunk / 2);
var size = Math.min(
valueOrDefault(options.maxBarThickness, Infinity),
Expand All @@ -383,15 +440,13 @@ module.exports = DatasetController.extend({
var chart = me.chart;
var scale = me._getValueScale();
var rects = me.getMeta().data;
var dataset = me.getDataset();
var ilen = rects.length;
var i = 0;

helpers.canvas.clipArea(chart.ctx, chart.chartArea);

for (; i < ilen; ++i) {
var val = scale._parseValue(dataset.data[i]);
if (!isNaN(val.min) && !isNaN(val.max)) {
if (!isNaN(me._getParsed(i)[scale.id])) {
rects[i].draw();
}
}
Expand Down
36 changes: 27 additions & 9 deletions src/controllers/controller.bubble.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ defaults._set('bubble', {
},
label: function(item, data) {
var datasetLabel = data.datasets[item.datasetIndex].label || '';
var dataPoint = data.datasets[item.datasetIndex].data[item.index];
var dataPoint = data.datasets[item.datasetIndex].data[item.index] || {r: '?'};
return datasetLabel + ': (' + item.label + ', ' + item.value + ', ' + dataPoint.r + ')';
}
}
Expand Down Expand Up @@ -59,6 +59,26 @@ module.exports = DatasetController.extend({
'rotation'
],

/**
* Parse array of objects
* @private
*/
_parseObjectData: function(meta, data, start, count) {
var xScale = this.getScaleForId(meta.xAxisID);
var yScale = this.getScaleForId(meta.yAxisID);
var parsed = [];
var i, ilen, item, obj;
for (i = start, ilen = start + count; i < ilen; ++i) {
obj = data[i];
item = {};
item[xScale.id] = xScale._parseObject(obj, 'x', i);
item[yScale.id] = yScale._parseObject(obj, 'y', i);
item._custom = obj && obj.r && +obj.r;
parsed.push(item);
}
return parsed;
},

/**
* @protected
*/
Expand All @@ -82,14 +102,12 @@ module.exports = DatasetController.extend({
var xScale = me.getScaleForId(meta.xAxisID);
var yScale = me.getScaleForId(meta.yAxisID);
var options = me._resolveDataElementOptions(index);
var data = me.getDataset().data[index];
var dsIndex = me.index;

var x = reset ? xScale.getPixelForDecimal(0.5) : xScale.getPixelForValue(typeof data === 'object' ? data : NaN, index, dsIndex);
var y = reset ? yScale.getBasePixel() : yScale.getPixelForValue(data, index, dsIndex);
var parsed = !reset && me._getParsed(index);
var x = reset ? xScale.getPixelForDecimal(0.5) : xScale.getPixelForValue(parsed[xScale.id]);
var y = reset ? yScale.getBasePixel() : yScale.getPixelForValue(parsed[yScale.id]);

point._options = options;
point._datasetIndex = dsIndex;
point._datasetIndex = me.index;
point._index = index;
point._model = {
backgroundColor: options.backgroundColor,
Expand Down Expand Up @@ -135,7 +153,7 @@ module.exports = DatasetController.extend({
var me = this;
var chart = me.chart;
var dataset = me.getDataset();
var data = dataset.data[index] || {};
var parsed = me._getParsed(index);
var values = DatasetController.prototype._resolveDataElementOptions.apply(me, arguments);

// Scriptable options
Expand All @@ -153,7 +171,7 @@ module.exports = DatasetController.extend({

// Custom radius resolution
values.radius = resolve([
data.r,
parsed && parsed._custom,
me._config.radius,
chart.options.elements.point.radius
], context, index);
Expand Down
24 changes: 18 additions & 6 deletions src/controllers/controller.doughnut.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -134,6 +134,19 @@ module.exports = DatasetController.extend({
'hoverBorderWidth',
],

/**
* Override data parsing, since we are not using scales
* @private
*/
_parse: function(start, count) {
var data = this.getDataset().data;
var metaData = this.getMeta().data;
var i, ilen;
for (i = start, ilen = start + count; i < ilen; ++i) {
metaData[i]._val = +data[i];
}
},

// Get index of the dataset in relation to the visible datasets. This allows determining the inner and outer radius correctly
getRingIndex: function(datasetIndex) {
var ringIndex = 0;
Expand Down Expand Up @@ -220,7 +233,7 @@ module.exports = DatasetController.extend({
var startAngle = opts.rotation; // non reset case handled later
var endAngle = opts.rotation; // non reset case handled later
var dataset = me.getDataset();
var circumference = reset && animationOpts.animateRotate ? 0 : arc.hidden ? 0 : me.calculateCircumference(dataset.data[index]) * (opts.circumference / DOUBLE_PI);
var circumference = reset && animationOpts.animateRotate ? 0 : arc.hidden ? 0 : me.calculateCircumference(arc._val * opts.circumference / DOUBLE_PI);
var innerRadius = reset && animationOpts.animateScale ? 0 : me.innerRadius;
var outerRadius = reset && animationOpts.animateScale ? 0 : me.outerRadius;
var options = arc._options || {};
Expand Down Expand Up @@ -264,14 +277,13 @@ module.exports = DatasetController.extend({
},

calculateTotal: function() {
var dataset = this.getDataset();
var meta = this.getMeta();
var metaData = this.getMeta().data;
var total = 0;
var value;

helpers.each(meta.data, function(element, index) {
value = dataset.data[index];
if (!isNaN(value) && !element.hidden) {
helpers.each(metaData, function(arc) {
value = arc ? arc._val : NaN;
if (!isNaN(value) && !arc.hidden) {
total += Math.abs(value);
}
});
Expand Down
Loading