"@babel/preset-env"
],
"plugins": [
- "@babel/plugin-proposal-class-properties",
"@babel/plugin-transform-object-assign"
],
"env": {
- "es6": {
- "presets": [
- [
- "@babel/preset-env",
- {
- "targets": {
- "esmodules": true
- },
- "modules": false,
- "useBuiltIns": false
- }
- ]
- ],
- "plugins": [
- "@babel/plugin-proposal-class-properties"
- ]
- },
"test": {
"plugins": [
"istanbul"
Axes in Chart.js can be individually extended. Axes should always derive from `Chart.Scale` but this is not a mandatory requirement.
```javascript
-let MyScale = Chart.Scale.extend({
+class MyScale extends Chart.Scale{
/* extensions ... */
-});
+}
MyScale.id = 'myScale';
MyScale.defaults = defaultConfigObject;
Chart.js 2.0 introduces the concept of controllers for each dataset. Like scales, new controllers can be written as needed.
```javascript
-Chart.controllers.MyType = Chart.DatasetController.extend({
+class MyType extends Chart.DatasetController {
-});
+}
+Chart.controllers.MyType = MyType;
// Now we can create a new instance of our chart, using the Chart.js API
new Chart(ctx, {
Extending or replacing an existing controller type is easy. Simply replace the constructor for one of the built in types with your own.
The built in controller types are:
+
* `Chart.controllers.line`
* `Chart.controllers.bar`
* `Chart.controllers.horizontalBar`
Chart.defaults.derivedBubble = Chart.defaults.bubble;
// I think the recommend using Chart.controllers.bubble.extend({ extensions here });
-var custom = Chart.controllers.bubble.extend({
- draw: function(ease) {
+class Custom extends Chart.controllers.bubble {
+ draw() {
// Call super method first
- Chart.controllers.bubble.prototype.draw.call(this, ease);
+ super.draw(arguments);
// Now we can do some custom drawing for this dataset. Here we'll draw a red box around the first point in each dataset
var meta = this.getMeta();
// Stores the controller so that the chart initialization routine can look it up with
// Chart.controllers[type]
-Chart.controllers.derivedBubble = custom;
+Chart.controllers.derivedBubble = Custom;
// Now we can create and use our new chart type
new Chart(ctx, {
"semver": "^5.5.0"
}
},
- "@babel/helper-create-class-features-plugin": {
- "version": "7.9.6",
- "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.9.6.tgz",
- "integrity": "sha512-6N9IeuyHvMBRyjNYOMJHrhwtu4WJMrYf8hVbEHD3pbbbmNOk1kmXSQs7bA4dYDUaIx4ZEzdnvo6NwC3WHd/Qow==",
- "dev": true,
- "requires": {
- "@babel/helper-function-name": "^7.9.5",
- "@babel/helper-member-expression-to-functions": "^7.8.3",
- "@babel/helper-optimise-call-expression": "^7.8.3",
- "@babel/helper-plugin-utils": "^7.8.3",
- "@babel/helper-replace-supers": "^7.9.6",
- "@babel/helper-split-export-declaration": "^7.8.3"
- }
- },
"@babel/helper-create-regexp-features-plugin": {
"version": "7.8.8",
"resolved": "https://registry.npmjs.org/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.8.8.tgz",
"@babel/plugin-syntax-async-generators": "^7.8.0"
}
},
- "@babel/plugin-proposal-class-properties": {
- "version": "7.8.3",
- "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.8.3.tgz",
- "integrity": "sha512-EqFhbo7IosdgPgZggHaNObkmO1kNUe3slaKu54d5OWvy+p9QIKOzK1GAEpAIsZtWVtPXUHSMcT4smvDrCfY4AA==",
- "dev": true,
- "requires": {
- "@babel/helper-create-class-features-plugin": "^7.8.3",
- "@babel/helper-plugin-utils": "^7.8.3"
- }
- },
"@babel/plugin-proposal-dynamic-import": {
"version": "7.8.3",
"resolved": "https://registry.npmjs.org/@babel/plugin-proposal-dynamic-import/-/plugin-proposal-dynamic-import-7.8.3.tgz",
},
"devDependencies": {
"@babel/core": "^7.9.6",
- "@babel/plugin-proposal-class-properties": "^7.8.3",
"@babel/plugin-transform-object-assign": "^7.8.3",
"@babel/preset-env": "^7.9.6",
"@rollup/plugin-commonjs": "^11.1.0",
plugins: [
json(),
resolve(),
- babel({envName: 'es6'}),
cleanup({
sourcemap: true
})
plugins: [
json(),
resolve(),
- babel({envName: 'es6'}),
terser({
output: {
preamble: banner
return item;
}
-export default class Chart {
-
- static version = version;
-
- /**
- * NOTE(SB) We actually don't use this container anymore but we need to keep it
- * for backward compatibility. Though, it can still be useful for plugins that
- * would need to work on multiple charts?!
- */
- static instances = {};
+class Chart {
constructor(item, config) {
const me = this;
return changed;
}
}
+
+Chart.version = version;
+
+/**
+ * NOTE(SB) We actually don't use this container anymore but we need to keep it
+ * for backward compatibility. Though, it can still be useful for plugins that
+ * would need to work on multiple charts?!
+ */
+Chart.instances = {};
+
+export default Chart;
import Animations from './core.animations';
-import {isObject, inherits, merge, _merger, isArray, valueOrDefault, mergeIf, arrayEquals} from '../helpers/helpers.core';
+import {isObject, merge, _merger, isArray, valueOrDefault, mergeIf, arrayEquals} from '../helpers/helpers.core';
import {resolve} from '../helpers/helpers.options';
import {getHoverColor} from '../helpers/helpers.color';
import {sign} from '../helpers/helpers.math';
export default class DatasetController {
- static extend = inherits;
-
/**
* @param {Chart} chart
* @param {number} datasetIndex
-import {inherits} from '../helpers/helpers.core';
import {isNumber} from '../helpers/helpers.math';
export default class Element {
- static extend = inherits;
-
constructor() {
this.x = undefined;
this.y = undefined;
ctx.stroke();
}
-export default class Arc extends Element {
-
- static _type = 'arc';
+class Arc extends Element {
constructor(cfg) {
super();
ctx.restore();
}
}
+
+Arc._type = 'arc';
+
+export default Arc;
return _pointInLine;
}
-export default class Line extends Element {
-
- static _type = 'line';
+class Line extends Element {
constructor(cfg) {
super();
ctx.restore();
}
}
+
+Line._type = 'line';
+
+export default Line;
}
});
-export default class Point extends Element {
-
- static _type = 'point';
+class Point extends Element {
constructor(cfg) {
super();
return options.radius + options.hitRadius;
}
}
+
+Point._type = 'point';
+
+export default Point;
&& (skipY || y >= bounds.top && y <= bounds.bottom);
}
-export default class Rectangle extends Element {
-
- static _type = 'rectangle';
+class Rectangle extends Element {
constructor(cfg) {
super();
return axis === 'x' ? this.width / 2 : this.height / 2;
}
}
+
+Rectangle._type = 'rectangle';
+
+export default Rectangle;
}
}
-/**
- * Basic javascript inheritance based on the model created in Backbone.js
- */
-export function inherits(extensions) {
- // eslint-disable-next-line no-invalid-this
- const me = this;
- const ChartElement = (extensions && Object.prototype.hasOwnProperty.call(extensions, 'constructor')) ? extensions.constructor : function() {
- // eslint-disable-next-line prefer-rest-params
- return me.apply(this, arguments);
- };
-
- const Surrogate = function() {
- this.constructor = ChartElement;
- };
-
- Surrogate.prototype = me.prototype;
- ChartElement.prototype = new Surrogate();
- ChartElement.extend = inherits;
-
- if (extensions) {
- Object.assign(ChartElement.prototype, extensions);
- }
-
- ChartElement.__super__ = me.prototype;
- return ChartElement;
-}
-
/**
* @private
*/
const defaultConfig = {
};
-export default class CategoryScale extends Scale {
-
- static id = 'category';
- // INTERNAL: static default options, registered in src/index.js
- static defaults = defaultConfig;
+class CategoryScale extends Scale {
constructor(cfg) {
super(cfg);
return this.bottom;
}
}
+
+CategoryScale.id = 'category';
+
+// INTERNAL: default options, registered in src/index.js
+CategoryScale.defaults = defaultConfig;
+
+export default CategoryScale;
}
};
-export default class LinearScale extends LinearScaleBase {
-
- static id = 'linear';
- // INTERNAL: static default options, registered in src/index.js
- static defaults = defaultConfig;
+class LinearScale extends LinearScaleBase {
determineDataLimits() {
const me = this;
return this._startValue + this.getDecimalForPixel(pixel) * this._valueRange;
}
}
+
+LinearScale.id = 'linear';
+
+// INTERNAL: default options, registered in src/index.js
+LinearScale.defaults = defaultConfig;
+
+export default LinearScale;
}
};
-export default class LogarithmicScale extends Scale {
-
- static id = 'logarithmic';
- // INTERNAL: static default options, registered in src/index.js
- static defaults = defaultConfig;
+class LogarithmicScale extends Scale {
constructor(cfg) {
super(cfg);
return Math.pow(10, me._startValue + decimal * me._valueRange);
}
}
+
+LogarithmicScale.id = 'logarithmic';
+
+// INTERNAL: default options, registered in src/index.js
+LogarithmicScale.defaults = defaultConfig;
+
+export default LogarithmicScale;
return isNumber(param) ? param : 0;
}
-export default class RadialLinearScale extends LinearScaleBase {
-
- static id = 'radialLinear';
- // INTERNAL: static default options, registered in src/index.js
- static defaults = defaultConfig;
+class RadialLinearScale extends LinearScaleBase {
constructor(cfg) {
super(cfg);
*/
drawTitle() {}
}
+
+RadialLinearScale.id = 'radialLinear';
+
+// INTERNAL: default options, registered in src/index.js
+RadialLinearScale.defaults = defaultConfig;
+
+export default RadialLinearScale;
}
};
-export default class TimeScale extends Scale {
-
- static id = 'time';
- // INTERNAL: static default options, registered in src/index.js
- static defaults = defaultConfig;
+class TimeScale extends Scale {
/**
* @param {object} props
return capacity > 0 ? capacity : 1;
}
}
+
+TimeScale.id = 'time';
+
+// INTERNAL: default options, registered in src/index.js
+TimeScale.defaults = defaultConfig;
+
+export default TimeScale;
});
it('should default to one layer for custom scales', function() {
- var customScale = Chart.Scale.extend({
- draw: function() {},
- convertTicksToLabels: function() {
+ class CustomScale extends Chart.Scale {
+ draw() {}
+ convertTicksToLabels() {
return ['tick'];
}
- });
- customScale.id = 'customScale';
- customScale.defaults = {};
- Chart.scaleService.registerScale(customScale);
+ }
+ CustomScale.id = 'customScale';
+ CustomScale.defaults = {};
+ Chart.scaleService.registerScale(CustomScale);
var chart = window.acquireChart({
type: 'line',
expect(output.o.a).not.toBe(a1);
});
});
-
- describe('extend', function() {
- it('should merge object properties in target and return target', function() {
- var target = {a: 'abc', b: 56};
- var object = {b: 0, c: [2, 5, 6]};
- var result = Object.assign(target, object);
-
- expect(result).toBe(target);
- expect(target).toEqual({a: 'abc', b: 0, c: [2, 5, 6]});
- });
- it('should merge multiple objects properties in target', function() {
- var target = {a: 0, b: 1};
- var o0 = {a: 2, c: 3, d: 4};
- var o1 = {a: 5, c: 6};
- var o2 = {a: 7, e: 8};
-
- Object.assign(target, o0, o1, o2);
-
- expect(target).toEqual({a: 7, b: 1, c: 6, d: 4, e: 8});
- });
- it('should not deeply merge object properties in target', function() {
- var target = {a: {b: 0, c: 1}};
- var object = {a: {b: 2, d: 3}};
-
- Object.assign(target, object);
-
- expect(target).toEqual({a: {b: 2, d: 3}});
- expect(target.a).toBe(object.a);
- });
- });
-
- describe('inherits', function() {
- it('should return a derived class', function() {
- var A = function() {};
- A.prototype.p0 = 41;
- A.prototype.p1 = function() {
- return '42';
- };
-
- A.inherits = helpers.inherits;
- var B = A.inherits({p0: 43, p2: [44]});
- var C = A.inherits({p3: 45, p4: [46]});
- var b = new B();
-
- expect(b instanceof A).toBeTruthy();
- expect(b instanceof B).toBeTruthy();
- expect(b instanceof C).toBeFalsy();
-
- expect(b.p0).toBe(43);
- expect(b.p1()).toBe('42');
- expect(b.p2).toEqual([44]);
- });
- });
});
projects / thirdparty / Chart.js.git / commitdiff
