From: Ben McCann <322311+benmccann@users.noreply.github.com> Date: Fri, 8 Nov 2019 00:51:26 +0000 (-0800) Subject: Use ES6 classes for elements (#6702) X-Git-Tag: v3.0.0-alpha~260 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=4a8a7ee8247c7c69e7e5f0a9388cdeb07e4fc197;p=thirdparty%2FChart.js.git Use ES6 classes for elements (#6702) * Use ES6 classes for elements * Add additional elements --- diff --git a/src/core/core.animation.js b/src/core/core.animation.js index 236e923a1..ce47f6d73 100644 --- a/src/core/core.animation.js +++ b/src/core/core.animation.js @@ -1,16 +1,24 @@ 'use strict'; -var Element = require('./core.element'); +const Element = require('./core.element'); +const helpers = require('../helpers/index'); -var exports = Element.extend({ - chart: null, // the animation associated chart instance - currentStep: 0, // the current animation step - numSteps: 60, // default number of steps - easing: '', // the easing to use for this animation - render: null, // render function used by the animation service +class Animation extends Element { - onAnimationProgress: null, // user specified callback to fire on each step of the animation - onAnimationComplete: null, // user specified callback to fire when the animation finishes -}); + constructor(props) { + super({ + chart: null, // the animation associated chart instance + currentStep: 0, // the current animation step + numSteps: 60, // default number of steps + easing: '', // the easing to use for this animation + render: null, // render function used by the animation service -module.exports = exports; + onAnimationProgress: null, // user specified callback to fire on each step of the animation + onAnimationComplete: null, // user specified callback to fire when the animation finishes + }); + helpers.extend(this, props); + } + +} + +module.exports = Animation; diff --git a/src/core/core.element.js b/src/core/core.element.js index c489985fb..89bbc59d0 100644 --- a/src/core/core.element.js +++ b/src/core/core.element.js @@ -1,7 +1,7 @@ 'use strict'; -var color = require('chartjs-color'); -var helpers = require('../helpers/index'); +const color = require('chartjs-color'); +const helpers = require('../helpers/index'); function interpolate(start, view, model, ease) { var keys = Object.keys(model); @@ -52,28 +52,27 @@ function interpolate(start, view, model, ease) { } } -var Element = function(configuration) { - helpers.extend(this, configuration); - this.initialize.apply(this, arguments); -}; +class Element { -helpers.extend(Element.prototype, { - _type: undefined, + constructor(configuration) { + helpers.extend(this, configuration); + this.initialize.apply(this, arguments); + } - initialize: function() { + initialize() { this.hidden = false; - }, + } - pivot: function() { + pivot() { var me = this; if (!me._view) { me._view = helpers.extend({}, me._model); } me._start = {}; return me; - }, + } - transition: function(ease) { + transition(ease) { var me = this; var model = me._model; var start = me._start; @@ -99,19 +98,19 @@ helpers.extend(Element.prototype, { interpolate(start, view, model, ease); return me; - }, + } - tooltipPosition: function() { + tooltipPosition() { return { x: this._model.x, y: this._model.y }; - }, + } - hasValue: function() { + hasValue() { return helpers.isNumber(this._model.x) && helpers.isNumber(this._model.y); } -}); +} Element.extend = helpers.inherits; diff --git a/src/core/core.scale.js b/src/core/core.scale.js index df0b7bf40..82bd4a2a5 100644 --- a/src/core/core.scale.js +++ b/src/core/core.scale.js @@ -1,14 +1,14 @@ 'use strict'; -var defaults = require('./core.defaults'); -var Element = require('./core.element'); -var helpers = require('../helpers/index'); -var Ticks = require('./core.ticks'); +const defaults = require('./core.defaults'); +const Element = require('./core.element'); +const helpers = require('../helpers/index'); +const Ticks = require('./core.ticks'); -var isArray = helpers.isArray; -var isNullOrUndef = helpers.isNullOrUndef; -var valueOrDefault = helpers.valueOrDefault; -var valueAtIndexOrDefault = helpers.valueAtIndexOrDefault; +const isArray = helpers.isArray; +const isNullOrUndef = helpers.isNullOrUndef; +const valueOrDefault = helpers.valueOrDefault; +const valueAtIndexOrDefault = helpers.valueAtIndexOrDefault; defaults._set('scale', { display: true, @@ -319,7 +319,8 @@ function skip(ticks, spacing, majorStart, majorEnd) { } } -var Scale = Element.extend({ +class Scale extends Element { + /** * Parse a supported input value to internal representation. * @param {*} raw @@ -327,9 +328,9 @@ var Scale = Element.extend({ * @private * @since 3.0 */ - _parse: function(raw, index) { // eslint-disable-line no-unused-vars + _parse(raw, index) { // eslint-disable-line no-unused-vars return raw; - }, + } /** * Parse an object for axis to internal representation. @@ -339,14 +340,14 @@ var Scale = Element.extend({ * @private * @since 3.0 */ - _parseObject: function(obj, axis, index) { + _parseObject(obj, axis, index) { if (obj[axis] !== undefined) { return this._parse(obj[axis], index); } return null; - }, + } - _getMinMax: function(canStack) { + _getMinMax(canStack) { var me = this; var metas = me._getMatchingVisibleMetas(); var min = Number.POSITIVE_INFINITY; @@ -366,9 +367,9 @@ var Scale = Element.extend({ max: max, minPositive: minPositive }; - }, + } - _invalidateCaches: helpers.noop, + _invalidateCaches() {} /** * Get the padding needed for the scale @@ -376,7 +377,7 @@ var Scale = Element.extend({ * @private * @returns {Padding} the necessary padding */ - getPadding: function() { + getPadding() { var me = this; return { left: me.paddingLeft || 0, @@ -384,31 +385,31 @@ var Scale = Element.extend({ right: me.paddingRight || 0, bottom: me.paddingBottom || 0 }; - }, + } /** * Returns the scale tick objects ({label, major}) * @since 2.7 */ - getTicks: function() { + getTicks() { return this.ticks; - }, + } /** * @private */ - _getLabels: function() { + _getLabels() { var data = this.chart.data; return this.options.labels || (this.isHorizontal() ? data.xLabels : data.yLabels) || data.labels; - }, + } // These methods are ordered by lifecyle. Utilities then follow. // Any function defined here is inherited by all scale types. // Any function can be extended by the scale type - beforeUpdate: function() { + beforeUpdate() { helpers.callback(this.options.beforeUpdate, [this]); - }, + } /** * @param {number} maxWidth - the max width in pixels @@ -418,7 +419,7 @@ var Scale = Element.extend({ * - padding - space that's required to show the labels at the edges of the scale * - thickness of scales or legends in another orientation */ - update: function(maxWidth, maxHeight, margins) { + update(maxWidth, maxHeight, margins) { var me = this; var tickOpts = me.options.ticks; var sampleSize = tickOpts.sampleSize; @@ -497,12 +498,12 @@ var Scale = Element.extend({ // TODO(v3): remove minSize as a public property and return value from all layout boxes. It is unused // make maxWidth and maxHeight private return me.minSize; - }, + } /** * @private */ - _configure: function() { + _configure() { var me = this; var reversePixels = me.options.ticks.reverse; var startPixel, endPixel; @@ -520,18 +521,18 @@ var Scale = Element.extend({ me._endPixel = endPixel; me._reversePixels = reversePixels; me._length = endPixel - startPixel; - }, + } - afterUpdate: function() { + afterUpdate() { helpers.callback(this.options.afterUpdate, [this]); - }, + } // - beforeSetDimensions: function() { + beforeSetDimensions() { helpers.callback(this.options.beforeSetDimensions, [this]); - }, - setDimensions: function() { + } + setDimensions() { var me = this; // Set the unconstrained dimension before label rotation if (me.isHorizontal()) { @@ -552,36 +553,36 @@ var Scale = Element.extend({ me.paddingTop = 0; me.paddingRight = 0; me.paddingBottom = 0; - }, - afterSetDimensions: function() { + } + afterSetDimensions() { helpers.callback(this.options.afterSetDimensions, [this]); - }, + } // Data limits - beforeDataLimits: function() { + beforeDataLimits() { helpers.callback(this.options.beforeDataLimits, [this]); - }, - determineDataLimits: helpers.noop, - afterDataLimits: function() { + } + determineDataLimits() {} + afterDataLimits() { helpers.callback(this.options.afterDataLimits, [this]); - }, + } // - beforeBuildTicks: function() { + beforeBuildTicks() { helpers.callback(this.options.beforeBuildTicks, [this]); - }, - buildTicks: helpers.noop, - afterBuildTicks: function() { + } + buildTicks() {} + afterBuildTicks() { helpers.callback(this.options.afterBuildTicks, [this]); - }, + } - beforeTickToLabelConversion: function() { + beforeTickToLabelConversion() { helpers.callback(this.options.beforeTickToLabelConversion, [this]); - }, + } /** * Convert ticks to label strings */ - generateTickLabels: function(ticks) { + generateTickLabels(ticks) { var me = this; var tickOpts = me.options.ticks; var i, ilen, tick; @@ -589,17 +590,17 @@ var Scale = Element.extend({ tick = ticks[i]; tick.label = helpers.callback(tickOpts.callback, [tick.value, i, ticks], me); } - }, - afterTickToLabelConversion: function() { + } + afterTickToLabelConversion() { helpers.callback(this.options.afterTickToLabelConversion, [this]); - }, + } // - beforeCalculateTickRotation: function() { + beforeCalculateTickRotation() { helpers.callback(this.options.beforeCalculateTickRotation, [this]); - }, - calculateTickRotation: function() { + } + calculateTickRotation() { var me = this; var options = me.options; var tickOpts = options.ticks; @@ -637,17 +638,17 @@ var Scale = Element.extend({ } me.labelRotation = labelRotation; - }, - afterCalculateTickRotation: function() { + } + afterCalculateTickRotation() { helpers.callback(this.options.afterCalculateTickRotation, [this]); - }, + } // - beforeFit: function() { + beforeFit() { helpers.callback(this.options.beforeFit, [this]); - }, - fit: function() { + } + fit() { var me = this; // Reset var minSize = me.minSize = { @@ -748,13 +749,13 @@ var Scale = Element.extend({ me.width = minSize.width; me.height = me._length = chart.height - me.margins.top - me.margins.bottom; } - }, + } /** * Handle margins and padding interactions * @private */ - handleMargins: function() { + handleMargins() { var me = this; if (me.margins) { me.margins.left = Math.max(me.paddingLeft, me.margins.left); @@ -762,22 +763,22 @@ var Scale = Element.extend({ me.margins.right = Math.max(me.paddingRight, me.margins.right); me.margins.bottom = Math.max(me.paddingBottom, me.margins.bottom); } - }, + } - afterFit: function() { + afterFit() { helpers.callback(this.options.afterFit, [this]); - }, + } // Shared Methods - isHorizontal: function() { + isHorizontal() { var pos = this.options.position; return pos === 'top' || pos === 'bottom'; - }, - isFullWidth: function() { + } + isFullWidth() { return this.options.fullWidth; - }, + } - _convertTicksToLabels: function(ticks) { + _convertTicksToLabels(ticks) { var me = this; me.beforeTickToLabelConversion(); @@ -785,12 +786,12 @@ var Scale = Element.extend({ me.generateTickLabels(ticks); me.afterTickToLabelConversion(); - }, + } /** * @private */ - _getLabelSizes: function() { + _getLabelSizes() { var me = this; var labelSizes = me._labelSizes; @@ -800,15 +801,15 @@ var Scale = Element.extend({ } return labelSizes; - }, + } /** * Used to get the label to display in the tooltip for the given value * @param value */ - getLabelForValue: function(value) { + getLabelForValue(value) { return value; - }, + } /** * Returns the location of the given data point. Value can either be an index or a numerical value @@ -817,20 +818,20 @@ var Scale = Element.extend({ * @param index * @param datasetIndex */ - getPixelForValue: helpers.noop, + getPixelForValue() {} /** * Used to get the data value from a given pixel. This is the inverse of getPixelForValue * The coordinate (0, 0) is at the upper-left corner of the canvas * @param pixel */ - getValueForPixel: helpers.noop, + getValueForPixel() {} /** * Returns the location of the tick at the given index * The coordinate (0, 0) is at the upper-left corner of the canvas */ - getPixelForTick: function(index) { + getPixelForTick(index) { var me = this; var offset = me.options.offset; var numTicks = me.ticks.length; @@ -839,13 +840,13 @@ var Scale = Element.extend({ return index < 0 || index > numTicks - 1 ? null : me.getPixelForDecimal(index * tickWidth + (offset ? tickWidth / 2 : 0)); - }, + } /** * Utility for getting the pixel location of a percentage of scale * The coordinate (0, 0) is at the upper-left corner of the canvas */ - getPixelForDecimal: function(decimal) { + getPixelForDecimal(decimal) { var me = this; if (me._reversePixels) { @@ -853,22 +854,22 @@ var Scale = Element.extend({ } return me._startPixel + decimal * me._length; - }, + } - getDecimalForPixel: function(pixel) { + getDecimalForPixel(pixel) { var decimal = (pixel - this._startPixel) / this._length; return this._reversePixels ? 1 - decimal : decimal; - }, + } /** * Returns the pixel for the minimum chart value * The coordinate (0, 0) is at the upper-left corner of the canvas */ - getBasePixel: function() { + getBasePixel() { return this.getPixelForValue(this.getBaseValue()); - }, + } - getBaseValue: function() { + getBaseValue() { var me = this; var min = me.min; var max = me.max; @@ -877,13 +878,13 @@ var Scale = Element.extend({ min < 0 && max < 0 ? max : min > 0 && max > 0 ? min : 0; - }, + } /** * Returns a subset of ticks to be plotted to avoid overlapping labels. * @private */ - _autoSkip: function(ticks) { + _autoSkip(ticks) { var me = this; var tickOpts = me.options.ticks; var axisLength = me._length; @@ -913,12 +914,12 @@ var Scale = Element.extend({ } skip(ticks, spacing); return nonSkipped(ticks); - }, + } /** * @private */ - _tickSize: function() { + _tickSize() { var me = this; var optionTicks = me.options.ticks; @@ -936,12 +937,12 @@ var Scale = Element.extend({ return me.isHorizontal() ? h * cos > w * sin ? w / cos : h / sin : h * sin < w * cos ? h / cos : w / sin; - }, + } /** * @private */ - _isVisible: function() { + _isVisible() { var display = this.options.display; if (display !== 'auto') { @@ -949,12 +950,12 @@ var Scale = Element.extend({ } return this._getMatchingVisibleMetas().length > 0; - }, + } /** * @private */ - _computeGridLineItems: function(chartArea) { + _computeGridLineItems(chartArea) { var me = this; var chart = me.chart; var options = me.options; @@ -1045,12 +1046,12 @@ var Scale = Element.extend({ items.borderValue = borderValue; return items; - }, + } /** * @private */ - _computeLabelItems: function() { + _computeLabelItems() { var me = this; var options = me.options; var optionTicks = options.ticks; @@ -1110,12 +1111,12 @@ var Scale = Element.extend({ } return items; - }, + } /** * @private */ - _drawGrid: function(chartArea) { + _drawGrid(chartArea) { var me = this; var gridLines = me.options.gridLines; @@ -1185,12 +1186,12 @@ var Scale = Element.extend({ ctx.lineTo(x2, y2); ctx.stroke(); } - }, + } /** * @private */ - _drawLabels: function() { + _drawLabels() { var me = this; var optionTicks = me.options.ticks; @@ -1228,12 +1229,12 @@ var Scale = Element.extend({ } ctx.restore(); } - }, + } /** * @private */ - _drawTitle: function() { + _drawTitle() { var me = this; var ctx = me.ctx; var options = me.options; @@ -1300,9 +1301,9 @@ var Scale = Element.extend({ ctx.font = scaleLabelFont.string; ctx.fillText(scaleLabel.labelString, 0, 0); ctx.restore(); - }, + } - draw: function(chartArea) { + draw(chartArea) { var me = this; if (!me._isVisible()) { @@ -1312,12 +1313,12 @@ var Scale = Element.extend({ me._drawGrid(chartArea); me._drawTitle(); me._drawLabels(); - }, + } /** * @private */ - _layers: function() { + _layers() { var me = this; var opts = me.options; var tz = opts.ticks && opts.ticks.z || 0; @@ -1345,21 +1346,21 @@ var Scale = Element.extend({ me._drawLabels.apply(me, arguments); } }]; - }, + } /** * @private */ - _getAxisID: function() { + _getAxisID() { return this.isHorizontal() ? 'xAxisID' : 'yAxisID'; - }, + } /** * Returns visible dataset metas that are attached to this scale * @param {string} [type] - if specified, also filter by dataset type * @private */ - _getMatchingVisibleMetas: function(type) { + _getMatchingVisibleMetas(type) { var me = this; var metas = me.chart._getSortedVisibleDatasetMetas(); var axisID = me._getAxisID(); @@ -1374,7 +1375,7 @@ var Scale = Element.extend({ } return result; } -}); +} Scale.prototype._draw = Scale.prototype.draw; diff --git a/src/core/core.tooltip.js b/src/core/core.tooltip.js index 38d4e990d..cea6d93cd 100644 --- a/src/core/core.tooltip.js +++ b/src/core/core.tooltip.js @@ -1,11 +1,11 @@ 'use strict'; -var defaults = require('./core.defaults'); -var Element = require('./core.element'); -var helpers = require('../helpers/index'); +const defaults = require('./core.defaults'); +const Element = require('./core.element'); +const helpers = require('../helpers/index'); -var valueOrDefault = helpers.valueOrDefault; -var getRtlHelper = helpers.rtl.getRtlAdapter; +const valueOrDefault = helpers.valueOrDefault; +const getRtlHelper = helpers.rtl.getRtlAdapter; defaults._set('global', { tooltips: { @@ -488,15 +488,15 @@ function getBeforeAfterBodyLines(callback) { return pushOrConcat([], splitNewlines(callback)); } -var exports = Element.extend({ - initialize: function() { +class Tooltip extends Element { + initialize() { var me = this; me._model = getBaseModel(me._options); me._view = {}; me._lastActive = []; - }, + } - transition: function(easingValue) { + transition(easingValue) { var me = this; var options = me._options; @@ -509,11 +509,11 @@ var exports = Element.extend({ } Element.prototype.transition.call(me, easingValue); - }, + } // Get the title // Args are: (tooltipItem, data) - getTitle: function() { + getTitle() { var me = this; var opts = me._options; var callbacks = opts.callbacks; @@ -528,15 +528,15 @@ var exports = Element.extend({ lines = pushOrConcat(lines, splitNewlines(afterTitle)); return lines; - }, + } // Args are: (tooltipItem, data) - getBeforeBody: function() { + getBeforeBody() { return getBeforeAfterBodyLines(this._options.callbacks.beforeBody.apply(this, arguments)); - }, + } // Args are: (tooltipItem, data) - getBody: function(tooltipItems, data) { + getBody(tooltipItems, data) { var me = this; var callbacks = me._options.callbacks; var bodyItems = []; @@ -555,16 +555,16 @@ var exports = Element.extend({ }); return bodyItems; - }, + } // Args are: (tooltipItem, data) - getAfterBody: function() { + getAfterBody() { return getBeforeAfterBodyLines(this._options.callbacks.afterBody.apply(this, arguments)); - }, + } // Get the footer and beforeFooter and afterFooter lines // Args are: (tooltipItem, data) - getFooter: function() { + getFooter() { var me = this; var callbacks = me._options.callbacks; @@ -578,9 +578,9 @@ var exports = Element.extend({ lines = pushOrConcat(lines, splitNewlines(afterFooter)); return lines; - }, + } - update: function(changed) { + update(changed) { var me = this; var opts = me._options; @@ -690,9 +690,9 @@ var exports = Element.extend({ } return me; - }, + } - drawCaret: function(tooltipPoint, size) { + drawCaret(tooltipPoint, size) { var ctx = this._chart.ctx; var vm = this._view; var caretPosition = this.getCaretPosition(tooltipPoint, size, vm); @@ -700,8 +700,9 @@ var exports = Element.extend({ ctx.lineTo(caretPosition.x1, caretPosition.y1); ctx.lineTo(caretPosition.x2, caretPosition.y2); ctx.lineTo(caretPosition.x3, caretPosition.y3); - }, - getCaretPosition: function(tooltipPoint, size, vm) { + } + + getCaretPosition(tooltipPoint, size, vm) { var x1, x2, x3, y1, y2, y3; var caretSize = vm.caretSize; var cornerRadius = vm.cornerRadius; @@ -759,9 +760,9 @@ var exports = Element.extend({ } } return {x1: x1, x2: x2, x3: x3, y1: y1, y2: y2, y3: y3}; - }, + } - drawTitle: function(pt, vm, ctx) { + drawTitle(pt, vm, ctx) { var title = vm.title; var length = title.length; var titleFontSize, titleSpacing, i; @@ -789,9 +790,9 @@ var exports = Element.extend({ } } } - }, + } - drawBody: function(pt, vm, ctx) { + drawBody(pt, vm, ctx) { var bodyFontSize = vm.bodyFontSize; var bodySpacing = vm.bodySpacing; var bodyAlign = vm._bodyAlign; @@ -866,9 +867,9 @@ var exports = Element.extend({ // After body lines helpers.each(vm.afterBody, fillLineOfText); pt.y -= bodySpacing; // Remove last body spacing - }, + } - drawFooter: function(pt, vm, ctx) { + drawFooter(pt, vm, ctx) { var footer = vm.footer; var length = footer.length; var footerFontSize, i; @@ -892,9 +893,9 @@ var exports = Element.extend({ pt.y += footerFontSize + vm.footerSpacing; } } - }, + } - drawBackground: function(pt, vm, ctx, tooltipSize) { + drawBackground(pt, vm, ctx, tooltipSize) { ctx.fillStyle = vm.backgroundColor; ctx.strokeStyle = vm.borderColor; ctx.lineWidth = vm.borderWidth; @@ -935,9 +936,9 @@ var exports = Element.extend({ if (vm.borderWidth > 0) { ctx.stroke(); } - }, + } - draw: function() { + draw() { var ctx = this._chart.ctx; var vm = this._view; @@ -985,7 +986,7 @@ var exports = Element.extend({ ctx.restore(); } - }, + } /** * Handle an event @@ -993,7 +994,7 @@ var exports = Element.extend({ * @param {IEvent} event - The event to handle * @returns {boolean} true if the tooltip changed */ - handleEvent: function(e) { + handleEvent(e) { var me = this; var options = me._options; var changed = false; @@ -1034,11 +1035,11 @@ var exports = Element.extend({ return changed; } -}); +} /** * @namespace Chart.Tooltip.positioners */ -exports.positioners = positioners; +Tooltip.positioners = positioners; -module.exports = exports; +module.exports = Tooltip; diff --git a/src/elements/element.arc.js b/src/elements/element.arc.js index d5d9fbf15..7ab475506 100644 --- a/src/elements/element.arc.js +++ b/src/elements/element.arc.js @@ -1,9 +1,9 @@ 'use strict'; -var defaults = require('../core/core.defaults'); -var Element = require('../core/core.element'); -var helpers = require('../helpers/index'); -var TAU = Math.PI * 2; +const defaults = require('../core/core.defaults'); +const Element = require('../core/core.element'); +const helpers = require('../helpers/index'); +const TAU = Math.PI * 2; defaults._set('global', { elements: { @@ -91,10 +91,13 @@ function drawBorder(ctx, vm, arc) { ctx.stroke(); } -module.exports = Element.extend({ - _type: 'arc', +class Arc extends Element { - inRange: function(chartX, chartY) { + constructor(props) { + super(props); + } + + inRange(chartX, chartY) { var vm = this._view; if (vm) { @@ -122,9 +125,9 @@ module.exports = Element.extend({ return (betweenAngles && withinRadius); } return false; - }, + } - getCenterPoint: function() { + getCenterPoint() { var vm = this._view; var halfAngle = (vm.startAngle + vm.endAngle) / 2; var halfRadius = (vm.innerRadius + vm.outerRadius) / 2; @@ -132,9 +135,9 @@ module.exports = Element.extend({ x: vm.x + Math.cos(halfAngle) * halfRadius, y: vm.y + Math.sin(halfAngle) * halfRadius }; - }, + } - tooltipPosition: function() { + tooltipPosition() { var vm = this._view; var centreAngle = vm.startAngle + ((vm.endAngle - vm.startAngle) / 2); var rangeFromCentre = (vm.outerRadius - vm.innerRadius) / 2 + vm.innerRadius; @@ -143,9 +146,9 @@ module.exports = Element.extend({ x: vm.x + (Math.cos(centreAngle) * rangeFromCentre), y: vm.y + (Math.sin(centreAngle) * rangeFromCentre) }; - }, + } - draw: function() { + draw() { var ctx = this._ctx; var vm = this._view; var pixelMargin = (vm.borderAlign === 'inner') ? 0.33 : 0; @@ -190,4 +193,8 @@ module.exports = Element.extend({ ctx.restore(); } -}); +} + +Arc.prototype._type = 'arc'; + +module.exports = Arc; diff --git a/src/elements/element.line.js b/src/elements/element.line.js index 98bb48c40..c8873aea3 100644 --- a/src/elements/element.line.js +++ b/src/elements/element.line.js @@ -1,12 +1,12 @@ 'use strict'; -var defaults = require('../core/core.defaults'); -var Element = require('../core/core.element'); -var helpers = require('../helpers/index'); +const defaults = require('../core/core.defaults'); +const Element = require('../core/core.element'); +const helpers = require('../helpers/index'); -var valueOrDefault = helpers.valueOrDefault; +const valueOrDefault = helpers.valueOrDefault; -var defaultColor = defaults.global.defaultColor; +const defaultColor = defaults.global.defaultColor; defaults._set('global', { elements: { @@ -25,10 +25,13 @@ defaults._set('global', { } }); -module.exports = Element.extend({ - _type: 'line', +class Line extends Element { - draw: function() { + constructor(props) { + super(props); + } + + draw() { var me = this; var vm = me._view; var ctx = me._ctx; @@ -108,4 +111,8 @@ module.exports = Element.extend({ ctx.stroke(); ctx.restore(); } -}); +} + +Line.prototype._type = 'line'; + +module.exports = Line; diff --git a/src/elements/element.point.js b/src/elements/element.point.js index 226ed06c0..d985094dd 100644 --- a/src/elements/element.point.js +++ b/src/elements/element.point.js @@ -1,12 +1,12 @@ 'use strict'; -var defaults = require('../core/core.defaults'); -var Element = require('../core/core.element'); -var helpers = require('../helpers/index'); +const defaults = require('../core/core.defaults'); +const Element = require('../core/core.element'); +const helpers = require('../helpers/index'); -var valueOrDefault = helpers.valueOrDefault; +const valueOrDefault = helpers.valueOrDefault; -var defaultColor = defaults.global.defaultColor; +const defaultColor = defaults.global.defaultColor; defaults._set('global', { elements: { @@ -24,45 +24,45 @@ defaults._set('global', { } }); -function xRange(mouseX) { - var vm = this._view; - return vm ? (Math.abs(mouseX - vm.x) < vm.radius + vm.hitRadius) : false; -} - -function yRange(mouseY) { - var vm = this._view; - return vm ? (Math.abs(mouseY - vm.y) < vm.radius + vm.hitRadius) : false; -} +class Point extends Element { -module.exports = Element.extend({ - _type: 'point', + constructor(props) { + super(props); + } - inRange: function(mouseX, mouseY) { + inRange(mouseX, mouseY) { var vm = this._view; return vm ? ((Math.pow(mouseX - vm.x, 2) + Math.pow(mouseY - vm.y, 2)) < Math.pow(vm.hitRadius + vm.radius, 2)) : false; - }, + } + + inXRange(mouseX) { + var vm = this._view; + return vm ? (Math.abs(mouseX - vm.x) < vm.radius + vm.hitRadius) : false; + } - inXRange: xRange, - inYRange: yRange, + inYRange(mouseY) { + var vm = this._view; + return vm ? (Math.abs(mouseY - vm.y) < vm.radius + vm.hitRadius) : false; + } - getCenterPoint: function() { + getCenterPoint() { var vm = this._view; return { x: vm.x, y: vm.y }; - }, + } - tooltipPosition: function() { + tooltipPosition() { var vm = this._view; return { x: vm.x, y: vm.y, padding: vm.radius + vm.borderWidth }; - }, + } - draw: function(chartArea) { + draw(chartArea) { var vm = this._view; var ctx = this._ctx; var pointStyle = vm.pointStyle; @@ -85,4 +85,8 @@ module.exports = Element.extend({ helpers.canvas.drawPoint(ctx, pointStyle, radius, x, y, rotation); } } -}); +} + +Point.prototype._type = 'point'; + +module.exports = Point; diff --git a/src/elements/element.rectangle.js b/src/elements/element.rectangle.js index 1e08df12c..1bbde1e12 100644 --- a/src/elements/element.rectangle.js +++ b/src/elements/element.rectangle.js @@ -1,10 +1,10 @@ 'use strict'; -var defaults = require('../core/core.defaults'); -var Element = require('../core/core.element'); -var helpers = require('../helpers/index'); +const defaults = require('../core/core.defaults'); +const Element = require('../core/core.element'); +const helpers = require('../helpers/index'); -var defaultColor = defaults.global.defaultColor; +const defaultColor = defaults.global.defaultColor; defaults._set('global', { elements: { @@ -130,10 +130,13 @@ function inRange(vm, x, y) { && (skipY || y >= bounds.top && y <= bounds.bottom); } -module.exports = Element.extend({ - _type: 'rectangle', +class Rectangle extends Element { - draw: function() { + constructor(props) { + super(props); + } + + draw() { var ctx = this._ctx; var vm = this._view; var rects = boundingRects(vm); @@ -155,21 +158,21 @@ module.exports = Element.extend({ ctx.rect(inner.x, inner.y, inner.w, inner.h); ctx.fill('evenodd'); ctx.restore(); - }, + } - inRange: function(mouseX, mouseY) { + inRange(mouseX, mouseY) { return inRange(this._view, mouseX, mouseY); - }, + } - inXRange: function(mouseX) { + inXRange(mouseX) { return inRange(this._view, mouseX, null); - }, + } - inYRange: function(mouseY) { + inYRange(mouseY) { return inRange(this._view, null, mouseY); - }, + } - getCenterPoint: function() { + getCenterPoint() { var vm = this._view; var x, y; if (isVertical(vm)) { @@ -181,13 +184,17 @@ module.exports = Element.extend({ } return {x: x, y: y}; - }, + } - tooltipPosition: function() { + tooltipPosition() { var vm = this._view; return { x: vm.x, y: vm.y }; } -}); +} + +Rectangle.prototype._type = 'rectangle'; + +module.exports = Rectangle; diff --git a/src/plugins/plugin.legend.js b/src/plugins/plugin.legend.js index e790e9ba4..83f1cf3d9 100644 --- a/src/plugins/plugin.legend.js +++ b/src/plugins/plugin.legend.js @@ -1,13 +1,12 @@ 'use strict'; -var defaults = require('../core/core.defaults'); -var Element = require('../core/core.element'); -var helpers = require('../helpers/index'); -var layouts = require('../core/core.layouts'); +const defaults = require('../core/core.defaults'); +const Element = require('../core/core.element'); +const helpers = require('../helpers/index'); +const layouts = require('../core/core.layouts'); -var getRtlHelper = helpers.rtl.getRtlAdapter; -var noop = helpers.noop; -var valueOrDefault = helpers.valueOrDefault; +const getRtlHelper = helpers.rtl.getRtlAdapter; +const valueOrDefault = helpers.valueOrDefault; defaults._set('global', { legend: { @@ -112,9 +111,9 @@ function getBoxWidth(labelOpts, fontSize) { /** * IMPORTANT: this class is exposed publicly as Chart.Legend, backward compatibility required! */ -var Legend = Element.extend({ +class Legend extends Element { - initialize: function(config) { + initialize(config) { var me = this; helpers.extend(me, config); @@ -128,14 +127,15 @@ var Legend = Element.extend({ // Are we in doughnut mode which has a different data type me.doughnutMode = false; - }, + } // These methods are ordered by lifecycle. Utilities then follow. // Any function defined here is inherited by all legend types. // Any function can be extended by the legend type - beforeUpdate: noop, - update: function(maxWidth, maxHeight, margins) { + beforeUpdate() {} + + update(maxWidth, maxHeight, margins) { var me = this; // Update Lifecycle - Probably don't want to ever extend or overwrite this function ;) @@ -163,13 +163,15 @@ var Legend = Element.extend({ me.afterUpdate(); return me.minSize; - }, - afterUpdate: noop, + } + + afterUpdate() {} // - beforeSetDimensions: noop, - setDimensions: function() { + beforeSetDimensions() {} + + setDimensions() { var me = this; // Set the unconstrained dimension before label rotation if (me.isHorizontal()) { @@ -196,13 +198,15 @@ var Legend = Element.extend({ width: 0, height: 0 }; - }, - afterSetDimensions: noop, + } + + afterSetDimensions() {} // - beforeBuildLabels: noop, - buildLabels: function() { + beforeBuildLabels() {} + + buildLabels() { var me = this; var labelOpts = me.options.labels || {}; var legendItems = helpers.callback(labelOpts.generateLabels, [me.chart], me) || []; @@ -218,13 +222,15 @@ var Legend = Element.extend({ } me.legendItems = legendItems; - }, - afterBuildLabels: noop, + } + + afterBuildLabels() {} // - beforeFit: noop, - fit: function() { + beforeFit() {} + + fit() { var me = this; var opts = me.options; var labelOpts = opts.labels; @@ -330,16 +336,17 @@ var Legend = Element.extend({ me.width = minSize.width; me.height = minSize.height; - }, - afterFit: noop, + } + + afterFit() {} // Shared Methods - isHorizontal: function() { + isHorizontal() { return this.options.position === 'top' || this.options.position === 'bottom'; - }, + } // Actually draw the legend on the canvas - draw: function() { + draw() { var me = this; var opts = me.options; var labelOpts = opts.labels; @@ -503,12 +510,12 @@ var Legend = Element.extend({ }); helpers.rtl.restoreTextDirection(me.ctx, opts.textDirection); - }, + } /** * @private */ - _getLegendItemAt: function(x, y) { + _getLegendItemAt(x, y) { var me = this; var i, hitBox, lh; @@ -526,14 +533,14 @@ var Legend = Element.extend({ } return null; - }, + } /** * Handle an event * @private * @param {IEvent} event - The event to handle */ - handleEvent: function(e) { + handleEvent(e) { var me = this; var opts = me.options; var type = e.type === 'mouseup' ? 'click' : e.type; @@ -573,7 +580,7 @@ var Legend = Element.extend({ } } } -}); +} function createNewLegendAndAttach(chart, legendOpts) { var legend = new Legend({ diff --git a/src/plugins/plugin.title.js b/src/plugins/plugin.title.js index 977217309..fd64c3d5b 100644 --- a/src/plugins/plugin.title.js +++ b/src/plugins/plugin.title.js @@ -1,11 +1,9 @@ 'use strict'; -var defaults = require('../core/core.defaults'); -var Element = require('../core/core.element'); -var helpers = require('../helpers/index'); -var layouts = require('../core/core.layouts'); - -var noop = helpers.noop; +const defaults = require('../core/core.defaults'); +const Element = require('../core/core.element'); +const helpers = require('../helpers/index'); +const layouts = require('../core/core.layouts'); defaults._set('global', { title: { @@ -22,19 +20,19 @@ defaults._set('global', { /** * IMPORTANT: this class is exposed publicly as Chart.Legend, backward compatibility required! */ -var Title = Element.extend({ - initialize: function(config) { +class Title extends Element { + initialize(config) { var me = this; helpers.extend(me, config); // Contains hit boxes for each dataset (in dataset order) me.legendHitBoxes = []; - }, + } // These methods are ordered by lifecycle. Utilities then follow. - beforeUpdate: noop, - update: function(maxWidth, maxHeight, margins) { + beforeUpdate() {} + update(maxWidth, maxHeight, margins) { var me = this; // Update Lifecycle - Probably don't want to ever extend or overwrite this function ;) @@ -63,13 +61,13 @@ var Title = Element.extend({ return me.minSize; - }, - afterUpdate: noop, + } + afterUpdate() {} // - beforeSetDimensions: noop, - setDimensions: function() { + beforeSetDimensions() {} + setDimensions() { var me = this; // Set the unconstrained dimension before label rotation if (me.isHorizontal()) { @@ -96,19 +94,19 @@ var Title = Element.extend({ width: 0, height: 0 }; - }, - afterSetDimensions: noop, + } + afterSetDimensions() {} // - beforeBuildLabels: noop, - buildLabels: noop, - afterBuildLabels: noop, + beforeBuildLabels() {} + buildLabels() {} + afterBuildLabels() {} // - beforeFit: noop, - fit: function() { + beforeFit() {} + fit() { var me = this; var opts = me.options; var minSize = me.minSize = {}; @@ -125,17 +123,17 @@ var Title = Element.extend({ me.width = minSize.width = isHorizontal ? me.maxWidth : textSize; me.height = minSize.height = isHorizontal ? textSize : me.maxHeight; - }, - afterFit: noop, + } + afterFit() {} // Shared Methods - isHorizontal: function() { + isHorizontal() { var pos = this.options.position; return pos === 'top' || pos === 'bottom'; - }, + } // Actually draw the title block on the canvas - draw: function() { + draw() { var me = this; var ctx = me.ctx; var opts = me.options; @@ -188,7 +186,7 @@ var Title = Element.extend({ ctx.restore(); } -}); +} function createNewTitleBlockAndAttach(chart, titleOpts) { var title = new Title({