From: Ben McCann <322311+benmccann@users.noreply.github.com> Date: Thu, 6 Feb 2020 12:33:00 +0000 (-0800) Subject: Convert controllers to ES6 classes (#7061) X-Git-Tag: v3.0.0-alpha~73 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=6affaa2a73429da1a1b990ff1c726dc317148931;p=thirdparty%2FChart.js.git Convert controllers to ES6 classes (#7061) --- diff --git a/src/controllers/controller.bar.js b/src/controllers/controller.bar.js index 1d0f0af39..2652191cb 100644 --- a/src/controllers/controller.bar.js +++ b/src/controllers/controller.bar.js @@ -182,49 +182,36 @@ function isFloatBar(custom) { return custom && custom.barStart !== undefined && custom.barEnd !== undefined; } -export default DatasetController.extend({ +class BarController extends DatasetController { - dataElementType: Rectangle, - - /** - * @private - */ - _dataElementOptions: [ - 'backgroundColor', - 'borderColor', - 'borderSkipped', - 'borderWidth', - 'barPercentage', - 'barThickness', - 'categoryPercentage', - 'maxBarThickness', - 'minBarLength' - ], + constructor(chart, datasetIndex) { + super(chart, datasetIndex); + } /** * Overriding primitive data parsing since we support mixed primitive/array * data for float bars * @private */ - _parsePrimitiveData: function() { + _parsePrimitiveData() { return parseArrayOrPrimitive.apply(this, arguments); - }, + } /** * Overriding array data parsing since we support mixed primitive/array * data for float bars * @private */ - _parseArrayData: function() { + _parseArrayData() { return parseArrayOrPrimitive.apply(this, arguments); - }, + } /** * Overriding object data parsing since we support mixed primitive/array * value-scale data for float bars * @private */ - _parseObjectData: function(meta, data, start, count) { + _parseObjectData(meta, data, start, count) { const {iScale, vScale} = meta; const vProp = vScale.axis; const parsed = []; @@ -242,12 +229,12 @@ export default DatasetController.extend({ parsed.push(item); } return parsed; - }, + } /** * @private */ - _getLabelAndValue: function(index) { + _getLabelAndValue(index) { const me = this; const meta = me._cachedMeta; const {iScale, vScale} = meta; @@ -261,9 +248,9 @@ export default DatasetController.extend({ label: '' + iScale.getLabelForValue(parsed[iScale.axis]), value: value }; - }, + } - initialize: function() { + initialize() { var me = this; var meta; @@ -272,16 +259,16 @@ export default DatasetController.extend({ meta = me._cachedMeta; meta.stack = me.getDataset().stack; meta.bar = true; - }, + } - update: function(mode) { + update(mode) { const me = this; const rects = me._cachedMeta.data; me.updateElements(rects, 0, mode); - }, + } - updateElements: function(rectangles, start, mode) { + updateElements(rectangles, start, mode) { const me = this; const reset = mode === 'reset'; const vscale = me._cachedMeta.vScale; @@ -322,7 +309,7 @@ export default DatasetController.extend({ } me._updateSharedOptions(sharedOptions, mode); - }, + } /** * Returns the stacks based on groups and bar visibility. @@ -330,7 +317,7 @@ export default DatasetController.extend({ * @returns {string[]} The list of stack IDs * @private */ - _getStacks: function(last) { + _getStacks(last) { const me = this; const meta = me._cachedMeta; const iScale = meta.iScale; @@ -364,15 +351,15 @@ export default DatasetController.extend({ } return stacks; - }, + } /** * Returns the effective number of stacks based on groups and bar visibility. * @private */ - getStackCount: function() { + getStackCount() { return this._getStacks().length; - }, + } /** * Returns the stack index for the given dataset based on groups and bar visibility. @@ -381,7 +368,7 @@ export default DatasetController.extend({ * @returns {number} The stack index * @private */ - getStackIndex: function(datasetIndex, name) { + getStackIndex(datasetIndex, name) { var stacks = this._getStacks(datasetIndex); var index = (name !== undefined) ? stacks.indexOf(name) @@ -390,12 +377,12 @@ export default DatasetController.extend({ return (index === -1) ? stacks.length - 1 : index; - }, + } /** * @private */ - getRuler: function() { + getRuler() { const me = this; const meta = me._cachedMeta; const iScale = meta.iScale; @@ -413,13 +400,13 @@ export default DatasetController.extend({ stackCount: me.getStackCount(), scale: iScale }; - }, + } /** * Note: pixel values are not clamped to the scale area. * @private */ - calculateBarValuePixels: function(index, options) { + calculateBarValuePixels(index, options) { const me = this; const meta = me._cachedMeta; const vScale = meta.vScale; @@ -468,12 +455,12 @@ export default DatasetController.extend({ head: head, center: head + size / 2 }; - }, + } /** * @private */ - calculateBarIndexPixels: function(index, ruler, options) { + calculateBarIndexPixels(index, ruler, options) { var me = this; var range = options.barThickness === 'flex' ? computeFlexCategoryTraits(index, ruler, options) @@ -491,9 +478,9 @@ export default DatasetController.extend({ center: center, size: size }; - }, + } - draw: function() { + draw() { const me = this; const chart = me.chart; const meta = me._cachedMeta; @@ -513,4 +500,23 @@ export default DatasetController.extend({ unclipArea(chart.ctx); } -}); +} + +BarController.prototype.dataElementType = Rectangle; + +/** + * @private + */ +BarController.prototype._dataElementOptions = [ + 'backgroundColor', + 'borderColor', + 'borderSkipped', + 'borderWidth', + 'barPercentage', + 'barThickness', + 'categoryPercentage', + 'maxBarThickness', + 'minBarLength' +]; + +export default BarController; diff --git a/src/controllers/controller.bubble.js b/src/controllers/controller.bubble.js index 400e803b5..2a08f7e66 100644 --- a/src/controllers/controller.bubble.js +++ b/src/controllers/controller.bubble.js @@ -33,30 +33,17 @@ defaults._set('bubble', { } }); -export default DatasetController.extend({ - /** - * @protected - */ - dataElementType: Point, +class BubbleController extends DatasetController { - /** - * @private - */ - _dataElementOptions: [ - 'backgroundColor', - 'borderColor', - 'borderWidth', - 'hitRadius', - 'radius', - 'pointStyle', - 'rotation' - ], + constructor(chart, datasetIndex) { + super(chart, datasetIndex); + } /** * Parse array of objects * @private */ - _parseObjectData: function(meta, data, start, count) { + _parseObjectData(meta, data, start, count) { const {xScale, yScale} = meta; const parsed = []; let i, ilen, item; @@ -69,12 +56,12 @@ export default DatasetController.extend({ }); } return parsed; - }, + } /** * @private */ - _getMaxOverflow: function() { + _getMaxOverflow() { const me = this; const meta = me._cachedMeta; let i = (meta.data || []).length - 1; @@ -83,12 +70,12 @@ export default DatasetController.extend({ max = Math.max(max, me.getStyle(i, true).radius); } return max > 0 && max; - }, + } /** * @private */ - _getLabelAndValue: function(index) { + _getLabelAndValue(index) { const me = this; const meta = me._cachedMeta; const {xScale, yScale} = meta; @@ -101,23 +88,23 @@ export default DatasetController.extend({ label: meta.label, value: '(' + x + ', ' + y + (r ? ', ' + r : '') + ')' }; - }, + } /** * @protected */ - update: function(mode) { + update(mode) { const me = this; const points = me._cachedMeta.data; // Update Points me.updateElements(points, 0, mode); - }, + } /** * @protected */ - updateElements: function(points, start, mode) { + updateElements(points, start, mode) { const me = this; const reset = mode === 'reset'; const {xScale, yScale} = me._cachedMeta; @@ -149,12 +136,12 @@ export default DatasetController.extend({ } me._updateSharedOptions(sharedOptions, mode); - }, + } /** * @private */ - _resolveDataElementOptions: function(index, mode) { + _resolveDataElementOptions(index, mode) { var me = this; var chart = me.chart; var dataset = me.getDataset(); @@ -187,4 +174,25 @@ export default DatasetController.extend({ return values; } -}); +} + +/** + * @protected + */ +BubbleController.prototype.dataElementType = Point; + +/** + * @private + */ +BubbleController.prototype._dataElementOptions = [ + 'backgroundColor', + 'borderColor', + 'borderWidth', + 'hitRadius', + 'radius', + 'pointStyle', + 'rotation' +]; + + +export default BubbleController; diff --git a/src/controllers/controller.doughnut.js b/src/controllers/controller.doughnut.js index 053fc5a54..4ee40f147 100644 --- a/src/controllers/controller.doughnut.js +++ b/src/controllers/controller.doughnut.js @@ -3,7 +3,7 @@ import DatasetController from '../core/core.datasetController'; import defaults from '../core/core.defaults'; import Arc from '../elements/element.arc'; -import {isArray, noop, valueOrDefault} from '../helpers/helpers.core'; +import {isArray, valueOrDefault} from '../helpers/helpers.core'; const PI = Math.PI; const DOUBLE_PI = PI * 2; @@ -96,40 +96,29 @@ defaults._set('doughnut', { } }); -export default DatasetController.extend({ +class DoughnutController extends DatasetController { - dataElementType: Arc, - - linkScales: noop, + constructor(chart, datasetIndex) { + super(chart, datasetIndex); + } - /** - * @private - */ - _dataElementOptions: [ - 'backgroundColor', - 'borderColor', - 'borderWidth', - 'borderAlign', - 'hoverBackgroundColor', - 'hoverBorderColor', - 'hoverBorderWidth', - ], + linkScales() {} /** * Override data parsing, since we are not using scales * @private */ - _parse: function(start, count) { + _parse(start, count) { var data = this.getDataset().data; var meta = this._cachedMeta; var i, ilen; for (i = start, ilen = start + count; i < ilen; ++i) { meta._parsed[i] = +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) { + getRingIndex(datasetIndex) { var ringIndex = 0; for (var j = 0; j < datasetIndex; ++j) { @@ -139,9 +128,9 @@ export default DatasetController.extend({ } return ringIndex; - }, + } - update: function(mode) { + update(mode) { var me = this; var chart = me.chart; var chartArea = chart.chartArea; @@ -199,19 +188,19 @@ export default DatasetController.extend({ me.innerRadius = Math.max(me.outerRadius - chart.radiusLength * chartWeight, 0); me.updateElements(arcs, 0, mode); - }, + } /** * @private */ - _circumference: function(i, reset) { + _circumference(i, reset) { const me = this; const opts = me.chart.options; const meta = me._cachedMeta; return reset && opts.animation.animateRotate ? 0 : meta.data[i].hidden ? 0 : me.calculateCircumference(meta._parsed[i] * opts.circumference / DOUBLE_PI); - }, + } - updateElements: function(arcs, start, mode) { + updateElements(arcs, start, mode) { const me = this; const reset = mode === 'reset'; const chart = me.chart; @@ -248,9 +237,9 @@ export default DatasetController.extend({ me._updateElement(arc, index, properties, mode); } - }, + } - calculateTotal: function() { + calculateTotal() { const meta = this._cachedMeta; const metaData = meta.data; let total = 0; @@ -268,18 +257,18 @@ export default DatasetController.extend({ }*/ return total; - }, + } - calculateCircumference: function(value) { + calculateCircumference(value) { var total = this._cachedMeta.total; if (total > 0 && !isNaN(value)) { return DOUBLE_PI * (Math.abs(value) / total); } return 0; - }, + } // gets the max border or hover width to properly scale pie charts - getMaxBorderWidth: function(arcs) { + getMaxBorderWidth(arcs) { var me = this; var max = 0; var chart = me.chart; @@ -311,13 +300,13 @@ export default DatasetController.extend({ } } return max; - }, + } /** * Get radius length offset of the dataset in relation to the visible datasets weights. This allows determining the inner and outer radius correctly * @private */ - _getRingWeightOffset: function(datasetIndex) { + _getRingWeightOffset(datasetIndex) { var ringWeightOffset = 0; for (var i = 0; i < datasetIndex; ++i) { @@ -327,20 +316,38 @@ export default DatasetController.extend({ } return ringWeightOffset; - }, + } /** * @private */ - _getRingWeight: function(dataSetIndex) { + _getRingWeight(dataSetIndex) { return Math.max(valueOrDefault(this.chart.data.datasets[dataSetIndex].weight, 1), 0); - }, + } /** * Returns the sum of all visibile data set weights. This value can be 0. * @private */ - _getVisibleDatasetWeightTotal: function() { + _getVisibleDatasetWeightTotal() { return this._getRingWeightOffset(this.chart.data.datasets.length); } -}); +} + +DoughnutController.prototype.dataElementType = Arc; + + +/** + * @private + */ +DoughnutController.prototype._dataElementOptions = [ + 'backgroundColor', + 'borderColor', + 'borderWidth', + 'borderAlign', + 'hoverBackgroundColor', + 'hoverBorderColor', + 'hoverBorderWidth', +]; + +export default DoughnutController; diff --git a/src/controllers/controller.horizontalBar.js b/src/controllers/controller.horizontalBar.js index 3463eb72a..027000d90 100644 --- a/src/controllers/controller.horizontalBar.js +++ b/src/controllers/controller.horizontalBar.js @@ -42,18 +42,25 @@ defaults._set('horizontalBar', { } }); -export default BarController.extend({ +class HorizontalBarController extends BarController { + + constructor(chart, datasetIndex) { + super(chart, datasetIndex); + } + /** * @private */ - _getValueScaleId: function() { + _getValueScaleId() { return this._cachedMeta.xAxisID; - }, + } /** * @private */ - _getIndexScaleId: function() { + _getIndexScaleId() { return this._cachedMeta.yAxisID; } -}); +} + +export default HorizontalBarController; diff --git a/src/controllers/controller.line.js b/src/controllers/controller.line.js index ec9188ab4..5bbd97009 100644 --- a/src/controllers/controller.line.js +++ b/src/controllers/controller.line.js @@ -26,47 +26,13 @@ defaults._set('line', { } }); -export default DatasetController.extend({ +class LineController extends DatasetController { - datasetElementType: Line, - - dataElementType: Point, - - /** - * @private - */ - _datasetElementOptions: [ - 'backgroundColor', - 'borderCapStyle', - 'borderColor', - 'borderDash', - 'borderDashOffset', - 'borderJoinStyle', - 'borderWidth', - 'capBezierPoints', - 'cubicInterpolationMode', - 'fill' - ], - - /** - * @private - */ - _dataElementOptions: { - backgroundColor: 'pointBackgroundColor', - borderColor: 'pointBorderColor', - borderWidth: 'pointBorderWidth', - hitRadius: 'pointHitRadius', - hoverHitRadius: 'pointHitRadius', - hoverBackgroundColor: 'pointHoverBackgroundColor', - hoverBorderColor: 'pointHoverBorderColor', - hoverBorderWidth: 'pointHoverBorderWidth', - hoverRadius: 'pointHoverRadius', - pointStyle: 'pointStyle', - radius: 'pointRadius', - rotation: 'pointRotation' - }, + constructor(chart, datasetIndex) { + super(chart, datasetIndex); + } - update: function(mode) { + update(mode) { const me = this; const meta = me._cachedMeta; const line = meta.dataset; @@ -89,9 +55,9 @@ export default DatasetController.extend({ if (meta.visible) { me.updateElements(points, 0, mode); } - }, + } - updateElements: function(points, start, mode) { + updateElements(points, start, mode) { const me = this; const reset = mode === 'reset'; const {xScale, yScale, _stacked} = me._cachedMeta; @@ -125,12 +91,12 @@ export default DatasetController.extend({ } me._updateSharedOptions(sharedOptions, mode); - }, + } /** * @private */ - _resolveDatasetElementOptions: function() { + _resolveDatasetElementOptions() { const me = this; const config = me._config; const options = me.chart.options; @@ -145,12 +111,12 @@ export default DatasetController.extend({ values.steppedLine = resolve([config.steppedLine, lineOptions.stepped]); return values; - }, + } /** * @private */ - _getMaxOverflow: function() { + _getMaxOverflow() { const me = this; const meta = me._cachedMeta; const border = me._showLine && meta.dataset.options.borderWidth || 0; @@ -161,9 +127,9 @@ export default DatasetController.extend({ const firstPoint = data[0].size(); const lastPoint = data[data.length - 1].size(); return Math.max(border, firstPoint, lastPoint) / 2; - }, + } - draw: function() { + draw() { const me = this; const ctx = me._ctx; const chart = me.chart; @@ -191,5 +157,45 @@ export default DatasetController.extend({ for (i = 0, ilen = active.length; i < ilen; ++i) { active[i].draw(ctx, area); } - }, -}); + } +} + +LineController.prototype.datasetElementType = Line; + +LineController.prototype.dataElementType = Point; + +/** + * @private + */ +LineController.prototype._datasetElementOptions = [ + 'backgroundColor', + 'borderCapStyle', + 'borderColor', + 'borderDash', + 'borderDashOffset', + 'borderJoinStyle', + 'borderWidth', + 'capBezierPoints', + 'cubicInterpolationMode', + 'fill' +]; + +/** + * @private + */ +LineController.prototype._dataElementOptions = { + backgroundColor: 'pointBackgroundColor', + borderColor: 'pointBorderColor', + borderWidth: 'pointBorderWidth', + hitRadius: 'pointHitRadius', + hoverHitRadius: 'pointHitRadius', + hoverBackgroundColor: 'pointHoverBackgroundColor', + hoverBorderColor: 'pointHoverBorderColor', + hoverBorderWidth: 'pointHoverBorderWidth', + hoverRadius: 'pointHoverRadius', + pointStyle: 'pointStyle', + radius: 'pointRadius', + rotation: 'pointRotation' +}; + +export default LineController; diff --git a/src/controllers/controller.polarArea.js b/src/controllers/controller.polarArea.js index 6b2d2a5d5..41818b9a6 100644 --- a/src/controllers/controller.polarArea.js +++ b/src/controllers/controller.polarArea.js @@ -90,48 +90,37 @@ function getStartAngleRadians(deg) { return toRadians(deg) - 0.5 * Math.PI; } -export default DatasetController.extend({ +class PolarAreaController extends DatasetController { - dataElementType: Arc, - - /** - * @private - */ - _dataElementOptions: [ - 'backgroundColor', - 'borderColor', - 'borderWidth', - 'borderAlign', - 'hoverBackgroundColor', - 'hoverBorderColor', - 'hoverBorderWidth', - ], + constructor(chart, datasetIndex) { + super(chart, datasetIndex); + } /** * @private */ - _getIndexScaleId: function() { + _getIndexScaleId() { return this._cachedMeta.rAxisID; - }, + } /** * @private */ - _getValueScaleId: function() { + _getValueScaleId() { return this._cachedMeta.rAxisID; - }, + } - update: function(mode) { + update(mode) { const arcs = this._cachedMeta.data; this._updateRadius(); this.updateElements(arcs, 0, mode); - }, + } /** * @private */ - _updateRadius: function() { + _updateRadius() { var me = this; var chart = me.chart; var chartArea = chart.chartArea; @@ -144,9 +133,9 @@ export default DatasetController.extend({ me.outerRadius = chart.outerRadius - (chart.radiusLength * me.index); me.innerRadius = me.outerRadius - chart.radiusLength; - }, + } - updateElements: function(arcs, start, mode) { + updateElements(arcs, start, mode) { const me = this; const reset = mode === 'reset'; const chart = me.chart; @@ -195,9 +184,9 @@ export default DatasetController.extend({ me._updateElement(arc, index, properties, mode); } - }, + } - countVisibleElements: function() { + countVisibleElements() { var dataset = this.getDataset(); var meta = this._cachedMeta; var count = 0; @@ -209,12 +198,12 @@ export default DatasetController.extend({ }); return count; - }, + } /** * @private */ - _computeAngle: function(index) { + _computeAngle(index) { var me = this; var meta = me._cachedMeta; var count = meta.count; @@ -237,4 +226,21 @@ export default DatasetController.extend({ (2 * Math.PI) / count ], context, index); } -}); +} + +PolarAreaController.prototype.dataElementType = Arc; + +/** + * @private + */ +PolarAreaController.prototype._dataElementOptions = [ + 'backgroundColor', + 'borderColor', + 'borderWidth', + 'borderAlign', + 'hoverBackgroundColor', + 'hoverBorderColor', + 'hoverBorderWidth' +]; + +export default PolarAreaController; diff --git a/src/controllers/controller.radar.js b/src/controllers/controller.radar.js index 6dc68d054..5eebe77bb 100644 --- a/src/controllers/controller.radar.js +++ b/src/controllers/controller.radar.js @@ -20,60 +20,30 @@ defaults._set('radar', { } }); -export default DatasetController.extend({ - datasetElementType: Line, +class RadarController extends DatasetController { - dataElementType: Point, - - /** - * @private - */ - _datasetElementOptions: [ - 'backgroundColor', - 'borderWidth', - 'borderColor', - 'borderCapStyle', - 'borderDash', - 'borderDashOffset', - 'borderJoinStyle', - 'fill' - ], - - /** - * @private - */ - _dataElementOptions: { - backgroundColor: 'pointBackgroundColor', - borderColor: 'pointBorderColor', - borderWidth: 'pointBorderWidth', - hitRadius: 'pointHitRadius', - hoverBackgroundColor: 'pointHoverBackgroundColor', - hoverBorderColor: 'pointHoverBorderColor', - hoverBorderWidth: 'pointHoverBorderWidth', - hoverRadius: 'pointHoverRadius', - pointStyle: 'pointStyle', - radius: 'pointRadius', - rotation: 'pointRotation' - }, + constructor(chart, datasetIndex) { + super(chart, datasetIndex); + } /** * @private */ - _getIndexScaleId: function() { + _getIndexScaleId() { return this._cachedMeta.rAxisID; - }, + } /** * @private */ - _getValueScaleId: function() { + _getValueScaleId() { return this._cachedMeta.rAxisID; - }, + } /** * @private */ - _getLabelAndValue: function(index) { + _getLabelAndValue(index) { const me = this; const vScale = me._cachedMeta.vScale; const parsed = me._getParsed(index); @@ -82,9 +52,9 @@ export default DatasetController.extend({ label: vScale._getLabels()[index], value: '' + vScale.getLabelForValue(parsed[vScale.axis]) }; - }, + } - update: function(mode) { + update(mode) { const me = this; const meta = me._cachedMeta; const line = meta.dataset; @@ -103,9 +73,9 @@ export default DatasetController.extend({ me.updateElements(points, 0, mode); line.updateControlPoints(me.chart.chartArea); - }, + } - updateElements: function(points, start, mode) { + updateElements(points, start, mode) { const me = this; const dataset = me.getDataset(); const scale = me.chart.scales.r; @@ -131,12 +101,12 @@ export default DatasetController.extend({ me._updateElement(point, index, properties, mode); } - }, + } /** * @private */ - _resolveDatasetElementOptions: function() { + _resolveDatasetElementOptions() { const me = this; const config = me._config; const options = me.chart.options; @@ -147,4 +117,41 @@ export default DatasetController.extend({ return values; } -}); +} + +RadarController.prototype.datasetElementType = Line; + +RadarController.prototype.dataElementType = Point; + +/** + * @private + */ +RadarController.prototype._datasetElementOptions = [ + 'backgroundColor', + 'borderWidth', + 'borderColor', + 'borderCapStyle', + 'borderDash', + 'borderDashOffset', + 'borderJoinStyle', + 'fill' +]; + +/** + * @private + */ +RadarController.prototype._dataElementOptions = { + backgroundColor: 'pointBackgroundColor', + borderColor: 'pointBorderColor', + borderWidth: 'pointBorderWidth', + hitRadius: 'pointHitRadius', + hoverBackgroundColor: 'pointHoverBackgroundColor', + hoverBorderColor: 'pointHoverBorderColor', + hoverBorderWidth: 'pointHoverBorderWidth', + hoverRadius: 'pointHoverRadius', + pointStyle: 'pointStyle', + radius: 'pointRadius', + rotation: 'pointRotation' +}; + +export default RadarController;