From: Evert Timberg Date: Tue, 20 Oct 2020 12:18:56 +0000 (-0400) Subject: Rename elements to mark as elements, i.e. Arc -> ArcElement (#7924) X-Git-Tag: v3.0.0-beta.5~25 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=bc11f1021678afc30510f5a8527deac3c0c9c416;p=thirdparty%2FChart.js.git Rename elements to mark as elements, i.e. Arc -> ArcElement (#7924) * Rename elements to mark as elements, i.e. Arc -> ArcElement * Rename RectangleElement to BarElement * Also updates options.elements.rectangle to options.elements.bar --- diff --git a/docs/docs/charts/bar.mdx b/docs/docs/charts/bar.mdx index 6fefb7f84..eeb39d928 100644 --- a/docs/docs/charts/bar.mdx +++ b/docs/docs/charts/bar.mdx @@ -118,7 +118,7 @@ The style of each bar can be controlled with the following properties: | [`borderWidth`](#borderwidth) | The bar border width (in pixels). | `clip` | How to clip relative to chartArea. Positive value allows overflow, negative value clips that many pixels inside chartArea. `0` = clip at chartArea. Clipping can also be configured per side: `clip: {left: 5, top: false, right: -2, bottom: 0}` -All these values, if `undefined`, fallback to the associated [`elements.rectangle.*`](../configuration/elements.md#rectangle-configuration) options. +All these values, if `undefined`, fallback to the associated [`elements.bar.*`](../configuration/elements.md#bar-configuration) options. #### borderSkipped @@ -152,7 +152,7 @@ The interaction with each bar can be controlled with the following properties: | `hoverBorderColor` | The bar border color when hovered. | `hoverBorderWidth` | The bar border width when hovered (in pixels). -All these values, if `undefined`, fallback to the associated [`elements.rectangle.*`](../configuration/elements.md#rectangle-configuration) options. +All these values, if `undefined`, fallback to the associated [`elements.bar.*`](../configuration/elements.md#bar-configuration) options. ## Dataset Configuration diff --git a/docs/docs/configuration/elements.md b/docs/docs/configuration/elements.md index bb07b7433..4cc3e6b07 100644 --- a/docs/docs/configuration/elements.md +++ b/docs/docs/configuration/elements.md @@ -2,14 +2,14 @@ title: Elements --- -While chart types provide settings to configure the styling of each dataset, you sometimes want to style **all datasets the same way**. A common example would be to stroke all of the bars in a bar chart with the same colour but change the fill per dataset. Options can be configured for four different types of elements: **[arc](#arc-configuration)**, **[lines](#line-configuration)**, **[points](#point-configuration)**, and **[rectangles](#rectangle-configuration)**. When set, these options apply to all objects of that type unless specifically overridden by the configuration attached to a dataset. +While chart types provide settings to configure the styling of each dataset, you sometimes want to style **all datasets the same way**. A common example would be to stroke all of the bars in a bar chart with the same colour but change the fill per dataset. Options can be configured for four different types of elements: **[arc](#arc-configuration)**, **[lines](#line-configuration)**, **[points](#point-configuration)**, and **[bars](#bar-configuration)**. When set, these options apply to all objects of that type unless specifically overridden by the configuration attached to a dataset. ## Global Configuration The element options can be specified per chart or globally. The global options for elements are defined in `Chart.defaults.elements`. For example, to set the border width of all bar charts globally you would do: ```javascript -Chart.defaults.elements.rectangle.borderWidth = 2; +Chart.defaults.elements.bar.borderWidth = 2; ``` ## Point Configuration @@ -68,11 +68,11 @@ Global line options: `Chart.defaults.elements.line`. | `fill` | `boolean`\|`string` | `true` | How to fill the area under the line. See [area charts](../charts/area.md#filling-modes). | `stepped` | `boolean` | `false` | `true` to show the line as a stepped line (`tension` will be ignored). -## Rectangle Configuration +## Bar Configuration -Rectangle elements are used to represent the bars in a bar chart. +Bar elements are used to represent the bars in a bar chart. -Global rectangle options: `Chart.defaults.elements.rectangle`. +Global bar options: `Chart.defaults.elements.bar`. | Name | Type | Default | Description | ---- | ---- | ------- | ----------- diff --git a/docs/docs/developers/api.md b/docs/docs/developers/api.md index 772857cfd..1846c3002 100644 --- a/docs/docs/developers/api.md +++ b/docs/docs/developers/api.md @@ -113,7 +113,7 @@ function clickHandler(evt) { Looks for the dataset that matches the current index and returns that metadata. This returned data has all of the metadata that is used to construct the chart. -The `data` property of the metadata will contain information about each point, rectangle, etc. depending on the chart type. +The `data` property of the metadata will contain information about each point, bar, etc. depending on the chart type. Extensive examples of usage are available in the [Chart.js tests](https://github.com/chartjs/Chart.js/tree/master/test). diff --git a/docs/docs/getting-started/v3-migration.md b/docs/docs/getting-started/v3-migration.md index 30105d699..085a246db 100644 --- a/docs/docs/getting-started/v3-migration.md +++ b/docs/docs/getting-started/v3-migration.md @@ -64,6 +64,7 @@ A number of changes were made to the configuration options passed to the `Chart` #### Specific changes +* `elements.rectangle` is now `elements.bar` * `hover.animationDuration` is now configured in `animation.active.duration` * `responsiveAnimationDuration` is now configured in `animation.resize.duration` * Polar area `elements.arc.angle` is now configured in degrees instead of radians. @@ -384,6 +385,10 @@ The following properties were renamed during v3 development: * `Chart.Animation.animationObject` was renamed to `Chart.Animation` * `Chart.Animation.chartInstance` was renamed to `Chart.Animation.chart` * `Chart.canvasHelpers` was merged with `Chart.helpers` +* `Chart.elements.Arc` was renamed to `Chart.elements.ArcElement` +* `Chart.elements.Line` was renamed to `Chart.elements.LineElement` +* `Chart.elements.Point` was renamed to `Chart.elements.PointElement` +* `Chart.elements.Rectangle` was renamed to `Chart.elements.BarElement` * `Chart.layoutService` was renamed to `Chart.layouts` * `Chart.pluginService` was renamed to `Chart.plugins` * `helpers.callCallback` was renamed to `helpers.callback` diff --git a/samples/charts/bar/horizontal.html b/samples/charts/bar/horizontal.html index a6a561fbe..35b9c965f 100644 --- a/samples/charts/bar/horizontal.html +++ b/samples/charts/bar/horizontal.html @@ -69,7 +69,7 @@ // Elements options apply to all of the options unless overridden in a dataset // In this case, we are setting the border of each horizontal bar to be 2px wide elements: { - rectangle: { + bar: { borderWidth: 2, } }, diff --git a/samples/scriptable/bar.html b/samples/scriptable/bar.html index d7504f97b..3cd2fe4fb 100644 --- a/samples/scriptable/bar.html +++ b/samples/scriptable/bar.html @@ -55,7 +55,7 @@ legend: false, tooltips: false, elements: { - rectangle: { + bar: { backgroundColor: colorize.bind(null, false), borderColor: colorize.bind(null, true), borderWidth: 2 diff --git a/src/controllers/controller.bar.js b/src/controllers/controller.bar.js index cd02a2656..6ca1e4f67 100644 --- a/src/controllers/controller.bar.js +++ b/src/controllers/controller.bar.js @@ -252,7 +252,7 @@ export default class BarController extends DatasetController { me.updateElements(meta.data, 0, meta.data.length, mode); } - updateElements(rectangles, start, count, mode) { + updateElements(bars, start, count, mode) { const me = this; const reset = mode === 'reset'; const vscale = me._cachedMeta.vScale; @@ -282,7 +282,7 @@ export default class BarController extends DatasetController { if (includeOptions) { properties.options = options; } - me.updateElement(rectangles[i], i, properties, mode); + me.updateElement(bars[i], i, properties, mode); } } @@ -515,7 +515,7 @@ BarController.id = 'bar'; */ BarController.defaults = { datasetElementType: false, - dataElementType: 'rectangle', + dataElementType: 'bar', dataElementOptions: [ 'backgroundColor', 'borderColor', diff --git a/src/core/core.datasetController.js b/src/core/core.datasetController.js index c57c3ffe1..58a3d6ad5 100644 --- a/src/core/core.datasetController.js +++ b/src/core/core.datasetController.js @@ -996,12 +996,12 @@ export default class DatasetController { DatasetController.defaults = {}; /** - * Element type used to generate a meta dataset (e.g. Chart.element.Line). + * Element type used to generate a meta dataset (e.g. Chart.element.LineElement). */ DatasetController.prototype.datasetElementType = null; /** - * Element type used to generate a meta data (e.g. Chart.element.Point). + * Element type used to generate a meta data (e.g. Chart.element.PointElement). */ DatasetController.prototype.dataElementType = null; diff --git a/src/elements/element.arc.js b/src/elements/element.arc.js index c199cf107..780203512 100644 --- a/src/elements/element.arc.js +++ b/src/elements/element.arc.js @@ -110,7 +110,7 @@ function drawBorder(ctx, element) { ctx.stroke(); } -export default class Arc extends Element { +export default class ArcElement extends Element { constructor(cfg) { super(); @@ -205,12 +205,12 @@ export default class Arc extends Element { } } -Arc.id = 'arc'; +ArcElement.id = 'arc'; /** * @type {any} */ -Arc.defaults = { +ArcElement.defaults = { borderAlign: 'center', borderColor: '#fff', borderWidth: 2, @@ -220,6 +220,6 @@ Arc.defaults = { /** * @type {any} */ -Arc.defaultRoutes = { +ArcElement.defaultRoutes = { backgroundColor: 'color' }; diff --git a/src/elements/element.rectangle.js b/src/elements/element.bar.js similarity index 96% rename from src/elements/element.rectangle.js rename to src/elements/element.bar.js index 990a28c20..5e4f04ab2 100644 --- a/src/elements/element.rectangle.js +++ b/src/elements/element.bar.js @@ -3,7 +3,7 @@ import {toTRBL} from '../helpers/helpers.options'; /** * Helper function to get the bounds of the bar regardless of the orientation - * @param {Rectangle} bar the bar + * @param {BarElement} bar the bar * @param {boolean} [useFinalPosition] * @return {object} bounds of the bar * @private @@ -114,7 +114,7 @@ function inRange(bar, x, y, useFinalPosition) { && (skipY || y >= bounds.top && y <= bounds.bottom); } -export default class Rectangle extends Element { +export default class BarElement extends Element { constructor(cfg) { super(); @@ -176,12 +176,12 @@ export default class Rectangle extends Element { } } -Rectangle.id = 'rectangle'; +BarElement.id = 'bar'; /** * @type {any} */ -Rectangle.defaults = { +BarElement.defaults = { borderSkipped: 'start', borderWidth: 0 }; @@ -189,7 +189,7 @@ Rectangle.defaults = { /** * @type {any} */ -Rectangle.defaultRoutes = { +BarElement.defaultRoutes = { backgroundColor: 'color', borderColor: 'color' }; diff --git a/src/elements/element.line.js b/src/elements/element.line.js index 778aeab57..d9691741f 100644 --- a/src/elements/element.line.js +++ b/src/elements/element.line.js @@ -5,7 +5,7 @@ import {_steppedLineTo, _bezierCurveTo} from '../helpers/helpers.canvas'; import {_updateBezierControlPoints} from '../helpers/helpers.curve'; /** - * @typedef { import("./element.point").default } Point + * @typedef { import("./element.point").default } PointElement */ function setStyle(ctx, vm) { @@ -51,7 +51,7 @@ function pathVars(points, segment, params) { * Create path from points, grouping by truncated x-coordinate * Points need to be in order by x-coordinate for this to work efficiently * @param {CanvasRenderingContext2D} ctx - Context - * @param {Line} line + * @param {LineElement} line * @param {object} segment * @param {number} segment.start - start index of the segment, referring the points array * @param {number} segment.end - end index of the segment, referring the points array @@ -98,7 +98,7 @@ function pathSegment(ctx, line, segment, params) { * Create path from points, grouping by truncated x-coordinate * Points need to be in order by x-coordinate for this to work efficiently * @param {CanvasRenderingContext2D} ctx - Context - * @param {Line} line + * @param {LineElement} line * @param {object} segment * @param {number} segment.start - start index of the segment, referring the points array * @param {number} segment.end - end index of the segment, referring the points array @@ -172,7 +172,7 @@ function fastPathSegment(ctx, line, segment, params) { } /** - * @param {Line} line - the line + * @param {LineElement} line - the line * @returns {function} * @private */ @@ -198,7 +198,7 @@ function _getInterpolationMethod(options) { return _pointInLine; } -export default class Line extends Element { +export default class LineElement extends Element { constructor(cfg) { super(); @@ -240,7 +240,7 @@ export default class Line extends Element { /** * First non-skipped point on this line - * @returns {Point|undefined} + * @returns {PointElement|undefined} */ first() { const segments = this.segments; @@ -250,7 +250,7 @@ export default class Line extends Element { /** * Last non-skipped point on this line - * @returns {Point|undefined} + * @returns {PointElement|undefined} */ last() { const segments = this.segments; @@ -262,9 +262,9 @@ export default class Line extends Element { /** * Interpolate a point in this line at the same value on `property` as * the reference `point` provided - * @param {Point} point - the reference point + * @param {PointElement} point - the reference point * @param {string} property - the property to match on - * @returns {Point|undefined} + * @returns {PointElement|undefined} */ interpolate(point, property) { const me = this; @@ -370,12 +370,12 @@ export default class Line extends Element { } } -Line.id = 'line'; +LineElement.id = 'line'; /** * @type {any} */ -Line.defaults = { +LineElement.defaults = { borderCapStyle: 'butt', borderDash: [], borderDashOffset: 0, @@ -389,7 +389,7 @@ Line.defaults = { /** * @type {any} */ -Line.defaultRoutes = { +LineElement.defaultRoutes = { backgroundColor: 'color', borderColor: 'color' }; diff --git a/src/elements/element.point.js b/src/elements/element.point.js index 57c845743..70b0e205c 100644 --- a/src/elements/element.point.js +++ b/src/elements/element.point.js @@ -1,7 +1,7 @@ import Element from '../core/core.element'; import {drawPoint} from '../helpers/helpers.canvas'; -export default class Point extends Element { +export default class PointElement extends Element { constructor(cfg) { super(); @@ -66,12 +66,12 @@ export default class Point extends Element { } } -Point.id = 'point'; +PointElement.id = 'point'; /** * @type {any} */ -Point.defaults = { +PointElement.defaults = { borderWidth: 1, hitRadius: 1, hoverBorderWidth: 1, @@ -83,7 +83,7 @@ Point.defaults = { /** * @type {any} */ -Point.defaultRoutes = { +PointElement.defaultRoutes = { backgroundColor: 'color', borderColor: 'color' }; diff --git a/src/elements/index.js b/src/elements/index.js index df91b3edf..53378f2a2 100644 --- a/src/elements/index.js +++ b/src/elements/index.js @@ -1,4 +1,4 @@ -export {default as Arc} from './element.arc'; -export {default as Line} from './element.line'; -export {default as Point} from './element.point'; -export {default as Rectangle} from './element.rectangle'; +export {default as ArcElement} from './element.arc'; +export {default as LineElement} from './element.line'; +export {default as PointElement} from './element.point'; +export {default as BarElement} from './element.bar'; diff --git a/src/helpers/helpers.segment.js b/src/helpers/helpers.segment.js index 642139664..632c1e9d7 100644 --- a/src/helpers/helpers.segment.js +++ b/src/helpers/helpers.segment.js @@ -1,8 +1,8 @@ import {_angleBetween, _angleDiff, _normalizeAngle} from './helpers.math'; /** - * @typedef { import("../elements/element.line").default } Line - * @typedef { import("../elements/element.point").default } Point + * @typedef { import("../elements/element.line").default } LineElement + * @typedef { import("../elements/element.point").default } PointElement */ function propertyFn(property) { @@ -62,9 +62,9 @@ function getSegment(segment, points, bounds) { * @param {number} segment.start - start index of the segment, referring the points array * @param {number} segment.end - end index of the segment, referring the points array * @param {boolean} segment.loop - indicates that the segment is a loop - * @param {Point[]} points - the points that this segment refers to + * @param {PointElement[]} points - the points that this segment refers to * @param {object} [bounds] - * @param {string} bounds.property - the property of a `Point` we are bounding. `x`, `y` or `angle`. + * @param {string} bounds.property - the property of a `PointElement` we are bounding. `x`, `y` or `angle`. * @param {number} bounds.start - start value of the property * @param {number} bounds.end - end value of the property * @private @@ -121,7 +121,7 @@ export function _boundSegment(segment, points, bounds) { /** * Returns the segments of the line that are inside given bounds - * @param {Line} line + * @param {LineElement} line * @param {object} [bounds] * @param {string} bounds.property - the property we are bounding with. `x`, `y` or `angle`. * @param {number} bounds.start - start value of the `property` @@ -180,7 +180,7 @@ function findStartAndEnd(points, count, loop, spanGaps) { /** * Compute solid segments from Points, when spanGaps === false - * @param {Point[]} points - the points + * @param {PointElement[]} points - the points * @param {number} start - start index * @param {number} max - max index (can go past count on a loop) * @param {boolean} loop - boolean indicating that this would be a loop if no gaps are found @@ -220,7 +220,7 @@ function solidSegments(points, start, max, loop) { /** * Compute the continuous segments that define the whole line * There can be skipped points within a segment, if spanGaps is true. - * @param {Line} line + * @param {LineElement} line * @private */ export function _computeSegments(line) { diff --git a/src/plugins/plugin.filler.js b/src/plugins/plugin.filler.js index b70ae53c3..15740b869 100644 --- a/src/plugins/plugin.filler.js +++ b/src/plugins/plugin.filler.js @@ -4,7 +4,7 @@ * @see https://github.com/chartjs/Chart.js/issues/2440#issuecomment-256461897 */ -import Line from '../elements/element.line'; +import LineElement from '../elements/element.line'; import {_boundSegment, _boundSegments} from '../helpers/helpers.segment'; import {clipArea, unclipArea} from '../helpers/helpers.canvas'; import {isArray, isFinite, isObject, valueOrDefault} from '../helpers/helpers.core'; @@ -13,7 +13,7 @@ import {TAU, _normalizeAngle} from '../helpers/helpers.math'; /** * @typedef { import('../core/core.controller').default } Chart * @typedef { import('../core/core.scale').default } Scale - * @typedef { import("../elements/element.point").default } Point + * @typedef { import("../elements/element.point").default } PointElement */ /** @@ -27,7 +27,7 @@ function getLineByIndex(chart, index) { } /** - * @param {Line} line + * @param {LineElement} line */ function parseFillOption(line) { const options = line.options; @@ -49,7 +49,7 @@ function parseFillOption(line) { } /** - * @param {Line} line + * @param {LineElement} line * @param {number} index * @param {number} count */ @@ -103,7 +103,7 @@ function computeLinearBoundary(source) { return null; } -// TODO: use elements.Arc instead +// TODO: use elements.ArcElement instead class simpleArc { constructor(opts) { this.x = opts.x; @@ -197,8 +197,8 @@ function pointsFromSegments(boundary, line) { } /** - * @param {{ chart: Chart; scale: Scale; index: number; line: Line; }} source - * @return {Line} + * @param {{ chart: Chart; scale: Scale; index: number; line: LineElement; }} source + * @return {LineElement} */ function buildStackLine(source) { const {chart, scale, index, line} = source; @@ -214,7 +214,7 @@ function buildStackLine(source) { addPointsBelow(points, sourcePoints[j], linesBelow); } } - return new Line({points, options: {}}); + return new LineElement({points, options: {}}); } const isLineAndNotInHideAnimation = (meta) => meta.type === 'line' && !meta.hidden; @@ -222,7 +222,7 @@ const isLineAndNotInHideAnimation = (meta) => meta.type === 'line' && !meta.hidd /** * @param {Chart} chart * @param {number} index - * @return {Line[]} + * @return {LineElement[]} */ function getLinesBelow(chart, index) { const below = []; @@ -241,9 +241,9 @@ function getLinesBelow(chart, index) { } /** - * @param {Point[]} points - * @param {Point} sourcePoint - * @param {Line[]} linesBelow + * @param {PointElement[]} points + * @param {PointElement} sourcePoint + * @param {LineElement[]} linesBelow */ function addPointsBelow(points, sourcePoint, linesBelow) { const postponed = []; @@ -270,10 +270,10 @@ function addPointsBelow(points, sourcePoint, linesBelow) { } /** - * @param {Line} line - * @param {Point} sourcePoint + * @param {LineElement} line + * @param {PointElement} sourcePoint * @param {string} property - * @returns {{point?: Point, first?: boolean, last?: boolean}} + * @returns {{point?: PointElement, first?: boolean, last?: boolean}} */ function findPoint(line, sourcePoint, property) { const point = line.interpolate(sourcePoint, property); @@ -320,9 +320,9 @@ function getTarget(source) { } /** - * @param {Point[] | { x: number; y: number; }} boundary - * @param {Line} line - * @return {Line?} + * @param {PointElement[] | { x: number; y: number; }} boundary + * @param {LineElement} line + * @return {LineElement?} */ function createBoundaryLine(boundary, line) { let points = []; @@ -336,7 +336,7 @@ function createBoundaryLine(boundary, line) { points = pointsFromSegments(boundary, line); } - return points.length ? new Line({ + return points.length ? new LineElement({ points, options: {tension: 0}, _loop, @@ -536,7 +536,7 @@ export default { line = meta.dataset; source = null; - if (line && line.options && line instanceof Line) { + if (line && line.options && line instanceof LineElement) { source = { visible: chart.isDatasetVisible(i), index: i, diff --git a/test/fixtures/controller.bar/backgroundColor/indexable.js b/test/fixtures/controller.bar/backgroundColor/indexable.js index 9c8d735fb..b686f8411 100644 --- a/test/fixtures/controller.bar/backgroundColor/indexable.js +++ b/test/fixtures/controller.bar/backgroundColor/indexable.js @@ -26,7 +26,7 @@ module.exports = { legend: false, title: false, elements: { - rectangle: { + bar: { backgroundColor: [ '#ff88ff', '#888888', diff --git a/test/fixtures/controller.bar/backgroundColor/loopable.js b/test/fixtures/controller.bar/backgroundColor/loopable.js index 1e6ff1ee8..685a0c126 100644 --- a/test/fixtures/controller.bar/backgroundColor/loopable.js +++ b/test/fixtures/controller.bar/backgroundColor/loopable.js @@ -23,7 +23,7 @@ module.exports = { legend: false, title: false, elements: { - rectangle: { + bar: { backgroundColor: [ '#000000', '#888888' diff --git a/test/fixtures/controller.bar/backgroundColor/scriptable.js b/test/fixtures/controller.bar/backgroundColor/scriptable.js index 171e7a63f..9e2cbe5fc 100644 --- a/test/fixtures/controller.bar/backgroundColor/scriptable.js +++ b/test/fixtures/controller.bar/backgroundColor/scriptable.js @@ -25,7 +25,7 @@ module.exports = { legend: false, title: false, elements: { - rectangle: { + bar: { backgroundColor: function(ctx) { var value = ctx.dataset.data[ctx.dataIndex] || 0; return value > 8 ? '#ff00ff' diff --git a/test/fixtures/controller.bar/backgroundColor/value.js b/test/fixtures/controller.bar/backgroundColor/value.js index ad004b169..b6d41aa39 100644 --- a/test/fixtures/controller.bar/backgroundColor/value.js +++ b/test/fixtures/controller.bar/backgroundColor/value.js @@ -19,7 +19,7 @@ module.exports = { legend: false, title: false, elements: { - rectangle: { + bar: { backgroundColor: '#00ff00' } }, diff --git a/test/fixtures/controller.bar/borderColor/indexable.js b/test/fixtures/controller.bar/borderColor/indexable.js index 7c058f0b4..84a6737be 100644 --- a/test/fixtures/controller.bar/borderColor/indexable.js +++ b/test/fixtures/controller.bar/borderColor/indexable.js @@ -26,7 +26,7 @@ module.exports = { legend: false, title: false, elements: { - rectangle: { + bar: { backgroundColor: 'transparent', borderColor: [ '#ff88ff', diff --git a/test/fixtures/controller.bar/borderColor/scriptable.js b/test/fixtures/controller.bar/borderColor/scriptable.js index fb54196e5..cb090e715 100644 --- a/test/fixtures/controller.bar/borderColor/scriptable.js +++ b/test/fixtures/controller.bar/borderColor/scriptable.js @@ -25,7 +25,7 @@ module.exports = { legend: false, title: false, elements: { - rectangle: { + bar: { backgroundColor: 'transparent', borderColor: function(ctx) { var value = ctx.dataset.data[ctx.dataIndex] || 0; diff --git a/test/fixtures/controller.bar/borderColor/value.js b/test/fixtures/controller.bar/borderColor/value.js index d6f67c864..634611391 100644 --- a/test/fixtures/controller.bar/borderColor/value.js +++ b/test/fixtures/controller.bar/borderColor/value.js @@ -19,7 +19,7 @@ module.exports = { legend: false, title: false, elements: { - rectangle: { + bar: { backgroundColor: 'transparent', borderColor: '#00ff00', borderWidth: 8 diff --git a/test/fixtures/controller.bar/borderSkipped/indexable.js b/test/fixtures/controller.bar/borderSkipped/indexable.js index 70fdb01ab..1f646854e 100644 --- a/test/fixtures/controller.bar/borderSkipped/indexable.js +++ b/test/fixtures/controller.bar/borderSkipped/indexable.js @@ -26,7 +26,7 @@ module.exports = { legend: false, title: false, elements: { - rectangle: { + bar: { backgroundColor: 'transparent', borderColor: '#888', borderWidth: 8, diff --git a/test/fixtures/controller.bar/borderSkipped/scriptable.js b/test/fixtures/controller.bar/borderSkipped/scriptable.js index 66387faa0..0f04955d6 100644 --- a/test/fixtures/controller.bar/borderSkipped/scriptable.js +++ b/test/fixtures/controller.bar/borderSkipped/scriptable.js @@ -25,7 +25,7 @@ module.exports = { legend: false, title: false, elements: { - rectangle: { + bar: { backgroundColor: 'transparent', borderColor: '#888', borderSkipped: function(ctx) { diff --git a/test/fixtures/controller.bar/borderSkipped/value.js b/test/fixtures/controller.bar/borderSkipped/value.js index 5573bdc05..80f1ccffc 100644 --- a/test/fixtures/controller.bar/borderSkipped/value.js +++ b/test/fixtures/controller.bar/borderSkipped/value.js @@ -34,7 +34,7 @@ module.exports = { legend: false, title: false, elements: { - rectangle: { + bar: { backgroundColor: 'transparent', borderColor: '#888', borderSkipped: 'left', diff --git a/test/fixtures/controller.bar/borderWidth/indexable-object.js b/test/fixtures/controller.bar/borderWidth/indexable-object.js index 74c155022..022a4a45b 100644 --- a/test/fixtures/controller.bar/borderWidth/indexable-object.js +++ b/test/fixtures/controller.bar/borderWidth/indexable-object.js @@ -27,7 +27,7 @@ module.exports = { legend: false, title: false, elements: { - rectangle: { + bar: { backgroundColor: 'transparent', borderColor: '#80808080', borderSkipped: false, diff --git a/test/fixtures/controller.bar/borderWidth/indexable.js b/test/fixtures/controller.bar/borderWidth/indexable.js index 71101cffb..bb2bf5a46 100644 --- a/test/fixtures/controller.bar/borderWidth/indexable.js +++ b/test/fixtures/controller.bar/borderWidth/indexable.js @@ -26,7 +26,7 @@ module.exports = { legend: false, title: false, elements: { - rectangle: { + bar: { backgroundColor: 'transparent', borderColor: '#888', borderWidth: [ diff --git a/test/fixtures/controller.bar/borderWidth/negative.js b/test/fixtures/controller.bar/borderWidth/negative.js index 6c504719b..6c2d1673e 100644 --- a/test/fixtures/controller.bar/borderWidth/negative.js +++ b/test/fixtures/controller.bar/borderWidth/negative.js @@ -28,7 +28,7 @@ module.exports = { legend: false, title: false, elements: { - rectangle: { + bar: { backgroundColor: '#888', borderColor: '#f00', borderWidth: -4 diff --git a/test/fixtures/controller.bar/borderWidth/object.js b/test/fixtures/controller.bar/borderWidth/object.js index 0d6d7fe53..f88fd6670 100644 --- a/test/fixtures/controller.bar/borderWidth/object.js +++ b/test/fixtures/controller.bar/borderWidth/object.js @@ -20,7 +20,7 @@ module.exports = { legend: false, title: false, elements: { - rectangle: { + bar: { backgroundColor: 'transparent', borderColor: '#888', borderSkipped: false, diff --git a/test/fixtures/controller.bar/borderWidth/scriptable-object.js b/test/fixtures/controller.bar/borderWidth/scriptable-object.js index 407c53c09..b98acbf82 100644 --- a/test/fixtures/controller.bar/borderWidth/scriptable-object.js +++ b/test/fixtures/controller.bar/borderWidth/scriptable-object.js @@ -23,7 +23,7 @@ module.exports = { legend: false, title: false, elements: { - rectangle: { + bar: { backgroundColor: 'transparent', borderColor: '#80808080', borderSkipped: false, diff --git a/test/fixtures/controller.bar/borderWidth/scriptable.js b/test/fixtures/controller.bar/borderWidth/scriptable.js index 4f301a04a..8897b386d 100644 --- a/test/fixtures/controller.bar/borderWidth/scriptable.js +++ b/test/fixtures/controller.bar/borderWidth/scriptable.js @@ -22,7 +22,7 @@ module.exports = { legend: false, title: false, elements: { - rectangle: { + bar: { backgroundColor: 'transparent', borderColor: '#888', borderWidth: function(ctx) { diff --git a/test/fixtures/controller.bar/borderWidth/value.js b/test/fixtures/controller.bar/borderWidth/value.js index ee36c8636..a3b0e0db6 100644 --- a/test/fixtures/controller.bar/borderWidth/value.js +++ b/test/fixtures/controller.bar/borderWidth/value.js @@ -19,7 +19,7 @@ module.exports = { legend: false, title: false, elements: { - rectangle: { + bar: { backgroundColor: 'transparent', borderColor: '#888', borderWidth: 4 diff --git a/test/fixtures/controller.bar/chart-area-clip.js b/test/fixtures/controller.bar/chart-area-clip.js index 0c1984a41..9d255fa49 100644 --- a/test/fixtures/controller.bar/chart-area-clip.js +++ b/test/fixtures/controller.bar/chart-area-clip.js @@ -22,7 +22,7 @@ module.exports = { } }, elements: { - rectangle: { + bar: { backgroundColor: '#00ff00', borderWidth: 8 } diff --git a/test/fixtures/controller.bar/horizontal-borders.js b/test/fixtures/controller.bar/horizontal-borders.js index b1e9b0d7a..5d9d23b1f 100644 --- a/test/fixtures/controller.bar/horizontal-borders.js +++ b/test/fixtures/controller.bar/horizontal-borders.js @@ -22,7 +22,7 @@ module.exports = { title: false, indexAxis: 'y', elements: { - rectangle: { + bar: { backgroundColor: '#AAAAAA80', borderColor: '#80808080', borderWidth: {bottom: 6, left: 15, top: 6, right: 15} diff --git a/test/fixtures/scale.category/ticks-from-data.js b/test/fixtures/scale.category/ticks-from-data.js index ef63f5a43..47c643ecc 100644 --- a/test/fixtures/scale.category/ticks-from-data.js +++ b/test/fixtures/scale.category/ticks-from-data.js @@ -13,7 +13,7 @@ module.exports = { legend: false, title: false, elements: { - rectangle: { + bar: { backgroundColor: '#AAAAAA80', borderColor: '#80808080', borderWidth: {bottom: 6, left: 15, top: 6, right: 15} diff --git a/test/specs/controller.bar.tests.js b/test/specs/controller.bar.tests.js index e898badbe..1f5d18909 100644 --- a/test/specs/controller.bar.tests.js +++ b/test/specs/controller.bar.tests.js @@ -555,7 +555,7 @@ describe('Chart.controllers.bar', function() { expect(meta.controller._getStackIndex(3)).toBe(3); }); - it('should create rectangle elements for each data item during initialization', function() { + it('should create bar elements for each data item during initialization', function() { var chart = window.acquireChart({ type: 'bar', data: { @@ -568,11 +568,11 @@ describe('Chart.controllers.bar', function() { }); var meta = chart.getDatasetMeta(1); - expect(meta.data.length).toBe(4); // 4 rectangles created - expect(meta.data[0] instanceof Chart.elements.Rectangle).toBe(true); - expect(meta.data[1] instanceof Chart.elements.Rectangle).toBe(true); - expect(meta.data[2] instanceof Chart.elements.Rectangle).toBe(true); - expect(meta.data[3] instanceof Chart.elements.Rectangle).toBe(true); + expect(meta.data.length).toBe(4); // 4 bars created + expect(meta.data[0] instanceof Chart.elements.BarElement).toBe(true); + expect(meta.data[1] instanceof Chart.elements.BarElement).toBe(true); + expect(meta.data[2] instanceof Chart.elements.BarElement).toBe(true); + expect(meta.data[3] instanceof Chart.elements.BarElement).toBe(true); }); it('should update elements when modifying data', function() { @@ -593,7 +593,7 @@ describe('Chart.controllers.bar', function() { legend: false, title: false, elements: { - rectangle: { + bar: { backgroundColor: 'red', borderSkipped: 'top', borderColor: 'green', @@ -1151,7 +1151,7 @@ describe('Chart.controllers.bar', function() { expect(meta.data[3].draw.calls.count()).toBe(1); }); - it('should set hover styles on rectangles', function() { + it('should set hover styles on bars', function() { var chart = window.acquireChart({ type: 'bar', data: { @@ -1165,7 +1165,7 @@ describe('Chart.controllers.bar', function() { }, options: { elements: { - rectangle: { + bar: { backgroundColor: 'rgb(255, 0, 0)', borderColor: 'rgb(0, 0, 255)', borderWidth: 2, @@ -1219,7 +1219,7 @@ describe('Chart.controllers.bar', function() { }, options: { elements: { - rectangle: { + bars: { backgroundColor: 'rgb(255, 0, 0)', borderColor: 'rgb(0, 0, 255)', borderWidth: 2, @@ -1233,9 +1233,9 @@ describe('Chart.controllers.bar', function() { var helpers = window.Chart.helpers; // Change default - chart.options.elements.rectangle.backgroundColor = 'rgb(128, 128, 128)'; - chart.options.elements.rectangle.borderColor = 'rgb(15, 15, 15)'; - chart.options.elements.rectangle.borderWidth = 3.14; + chart.options.elements.bar.backgroundColor = 'rgb(128, 128, 128)'; + chart.options.elements.bar.borderColor = 'rgb(15, 15, 15)'; + chart.options.elements.bar.borderWidth = 3.14; chart.update(); expect(bar.options.backgroundColor).toBe('rgb(128, 128, 128)'); diff --git a/test/specs/controller.bubble.tests.js b/test/specs/controller.bubble.tests.js index 3682e40b8..b0ce9723b 100644 --- a/test/specs/controller.bubble.tests.js +++ b/test/specs/controller.bubble.tests.js @@ -54,10 +54,10 @@ describe('Chart.controllers.bubble', function() { var meta = chart.getDatasetMeta(0); expect(meta.data.length).toBe(4); // 4 points created - expect(meta.data[0] instanceof Chart.elements.Point).toBe(true); - expect(meta.data[1] instanceof Chart.elements.Point).toBe(true); - expect(meta.data[2] instanceof Chart.elements.Point).toBe(true); - expect(meta.data[3] instanceof Chart.elements.Point).toBe(true); + expect(meta.data[0] instanceof Chart.elements.PointElement).toBe(true); + expect(meta.data[1] instanceof Chart.elements.PointElement).toBe(true); + expect(meta.data[2] instanceof Chart.elements.PointElement).toBe(true); + expect(meta.data[3] instanceof Chart.elements.PointElement).toBe(true); }); it('should draw all elements', function() { @@ -214,8 +214,8 @@ describe('Chart.controllers.bubble', function() { chart.update(); expect(meta.data.length).toBe(2); - expect(meta.data[0] instanceof Chart.elements.Point).toBe(true); - expect(meta.data[1] instanceof Chart.elements.Point).toBe(true); + expect(meta.data[0] instanceof Chart.elements.PointElement).toBe(true); + expect(meta.data[1] instanceof Chart.elements.PointElement).toBe(true); chart.data.datasets[0].data = [{ x: 10, @@ -242,11 +242,11 @@ describe('Chart.controllers.bubble', function() { chart.update(); expect(meta.data.length).toBe(5); - expect(meta.data[0] instanceof Chart.elements.Point).toBe(true); - expect(meta.data[1] instanceof Chart.elements.Point).toBe(true); - expect(meta.data[2] instanceof Chart.elements.Point).toBe(true); - expect(meta.data[3] instanceof Chart.elements.Point).toBe(true); - expect(meta.data[4] instanceof Chart.elements.Point).toBe(true); + expect(meta.data[0] instanceof Chart.elements.PointElement).toBe(true); + expect(meta.data[1] instanceof Chart.elements.PointElement).toBe(true); + expect(meta.data[2] instanceof Chart.elements.PointElement).toBe(true); + expect(meta.data[3] instanceof Chart.elements.PointElement).toBe(true); + expect(meta.data[4] instanceof Chart.elements.PointElement).toBe(true); }); describe('Interactions', function() { diff --git a/test/specs/controller.doughnut.tests.js b/test/specs/controller.doughnut.tests.js index c6bd73ab7..b6cd2b2fd 100644 --- a/test/specs/controller.doughnut.tests.js +++ b/test/specs/controller.doughnut.tests.js @@ -39,11 +39,11 @@ describe('Chart.controllers.doughnut', function() { }); var meta = chart.getDatasetMeta(0); - expect(meta.data.length).toBe(4); // 4 rectangles created - expect(meta.data[0] instanceof Chart.elements.Arc).toBe(true); - expect(meta.data[1] instanceof Chart.elements.Arc).toBe(true); - expect(meta.data[2] instanceof Chart.elements.Arc).toBe(true); - expect(meta.data[3] instanceof Chart.elements.Arc).toBe(true); + expect(meta.data.length).toBe(4); // 4 arcs created + expect(meta.data[0] instanceof Chart.elements.ArcElement).toBe(true); + expect(meta.data[1] instanceof Chart.elements.ArcElement).toBe(true); + expect(meta.data[2] instanceof Chart.elements.ArcElement).toBe(true); + expect(meta.data[3] instanceof Chart.elements.ArcElement).toBe(true); }); it ('should reset and update elements', function() { @@ -134,18 +134,18 @@ describe('Chart.controllers.doughnut', function() { chart.update(); expect(meta.data.length).toBe(2); - expect(meta.data[0] instanceof Chart.elements.Arc).toBe(true); - expect(meta.data[1] instanceof Chart.elements.Arc).toBe(true); + expect(meta.data[0] instanceof Chart.elements.ArcElement).toBe(true); + expect(meta.data[1] instanceof Chart.elements.ArcElement).toBe(true); // Add data chart.data.datasets[1].data = [1, 2, 3, 4]; chart.update(); expect(meta.data.length).toBe(4); - expect(meta.data[0] instanceof Chart.elements.Arc).toBe(true); - expect(meta.data[1] instanceof Chart.elements.Arc).toBe(true); - expect(meta.data[2] instanceof Chart.elements.Arc).toBe(true); - expect(meta.data[3] instanceof Chart.elements.Arc).toBe(true); + expect(meta.data[0] instanceof Chart.elements.ArcElement).toBe(true); + expect(meta.data[1] instanceof Chart.elements.ArcElement).toBe(true); + expect(meta.data[2] instanceof Chart.elements.ArcElement).toBe(true); + expect(meta.data[3] instanceof Chart.elements.ArcElement).toBe(true); }); it ('should rotate and limit circumference', function() { diff --git a/test/specs/controller.line.tests.js b/test/specs/controller.line.tests.js index b709d6d45..fbc7c75bd 100644 --- a/test/specs/controller.line.tests.js +++ b/test/specs/controller.line.tests.js @@ -56,11 +56,11 @@ describe('Chart.controllers.line', function() { var meta = chart.getDatasetMeta(0); expect(meta.data.length).toBe(4); // 4 points created - expect(meta.data[0] instanceof Chart.elements.Point).toBe(true); - expect(meta.data[1] instanceof Chart.elements.Point).toBe(true); - expect(meta.data[2] instanceof Chart.elements.Point).toBe(true); - expect(meta.data[3] instanceof Chart.elements.Point).toBe(true); - expect(meta.dataset instanceof Chart.elements.Line).toBe(true); // 1 line element + expect(meta.data[0] instanceof Chart.elements.PointElement).toBe(true); + expect(meta.data[1] instanceof Chart.elements.PointElement).toBe(true); + expect(meta.data[2] instanceof Chart.elements.PointElement).toBe(true); + expect(meta.data[3] instanceof Chart.elements.PointElement).toBe(true); + expect(meta.dataset instanceof Chart.elements.LineElement).toBe(true); // 1 line element }); it('should draw all elements', function() { @@ -689,17 +689,17 @@ describe('Chart.controllers.line', function() { chart.data.datasets[0].data = [1, 2]; // remove 2 items chart.update(); expect(meta.data.length).toBe(2); - expect(meta.data[0] instanceof Chart.elements.Point).toBe(true); - expect(meta.data[1] instanceof Chart.elements.Point).toBe(true); + expect(meta.data[0] instanceof Chart.elements.PointElement).toBe(true); + expect(meta.data[1] instanceof Chart.elements.PointElement).toBe(true); chart.data.datasets[0].data = [1, 2, 3, 4, 5]; // add 3 items chart.update(); expect(meta.data.length).toBe(5); - expect(meta.data[0] instanceof Chart.elements.Point).toBe(true); - expect(meta.data[1] instanceof Chart.elements.Point).toBe(true); - expect(meta.data[2] instanceof Chart.elements.Point).toBe(true); - expect(meta.data[3] instanceof Chart.elements.Point).toBe(true); - expect(meta.data[4] instanceof Chart.elements.Point).toBe(true); + expect(meta.data[0] instanceof Chart.elements.PointElement).toBe(true); + expect(meta.data[1] instanceof Chart.elements.PointElement).toBe(true); + expect(meta.data[2] instanceof Chart.elements.PointElement).toBe(true); + expect(meta.data[3] instanceof Chart.elements.PointElement).toBe(true); + expect(meta.data[4] instanceof Chart.elements.PointElement).toBe(true); }); describe('Interactions', function() { diff --git a/test/specs/controller.polarArea.tests.js b/test/specs/controller.polarArea.tests.js index f74cb13b6..3a5991b41 100644 --- a/test/specs/controller.polarArea.tests.js +++ b/test/specs/controller.polarArea.tests.js @@ -42,10 +42,10 @@ describe('Chart.controllers.polarArea', function() { var meta = chart.getDatasetMeta(1); expect(meta.data.length).toBe(4); // 4 arcs created - expect(meta.data[0] instanceof Chart.elements.Arc).toBe(true); - expect(meta.data[1] instanceof Chart.elements.Arc).toBe(true); - expect(meta.data[2] instanceof Chart.elements.Arc).toBe(true); - expect(meta.data[3] instanceof Chart.elements.Arc).toBe(true); + expect(meta.data[0] instanceof Chart.elements.ArcElement).toBe(true); + expect(meta.data[1] instanceof Chart.elements.ArcElement).toBe(true); + expect(meta.data[2] instanceof Chart.elements.ArcElement).toBe(true); + expect(meta.data[3] instanceof Chart.elements.ArcElement).toBe(true); }); it('should draw all elements', function() { @@ -221,8 +221,8 @@ describe('Chart.controllers.polarArea', function() { chart.update(); expect(meta.data.length).toBe(2); - expect(meta.data[0] instanceof Chart.elements.Arc).toBe(true); - expect(meta.data[1] instanceof Chart.elements.Arc).toBe(true); + expect(meta.data[0] instanceof Chart.elements.ArcElement).toBe(true); + expect(meta.data[1] instanceof Chart.elements.ArcElement).toBe(true); // add 3 items chart.data.labels = ['label1', 'label2', 'label3', 'label4', 'label5']; @@ -230,11 +230,11 @@ describe('Chart.controllers.polarArea', function() { chart.update(); expect(meta.data.length).toBe(5); - expect(meta.data[0] instanceof Chart.elements.Arc).toBe(true); - expect(meta.data[1] instanceof Chart.elements.Arc).toBe(true); - expect(meta.data[2] instanceof Chart.elements.Arc).toBe(true); - expect(meta.data[3] instanceof Chart.elements.Arc).toBe(true); - expect(meta.data[4] instanceof Chart.elements.Arc).toBe(true); + expect(meta.data[0] instanceof Chart.elements.ArcElement).toBe(true); + expect(meta.data[1] instanceof Chart.elements.ArcElement).toBe(true); + expect(meta.data[2] instanceof Chart.elements.ArcElement).toBe(true); + expect(meta.data[3] instanceof Chart.elements.ArcElement).toBe(true); + expect(meta.data[4] instanceof Chart.elements.ArcElement).toBe(true); }); describe('Interactions', function() { diff --git a/test/specs/controller.radar.tests.js b/test/specs/controller.radar.tests.js index 10a08e6a0..235d820ea 100644 --- a/test/specs/controller.radar.tests.js +++ b/test/specs/controller.radar.tests.js @@ -38,12 +38,12 @@ describe('Chart.controllers.radar', function() { }); var meta = chart.getDatasetMeta(0); - expect(meta.dataset instanceof Chart.elements.Line).toBe(true); // line element + expect(meta.dataset instanceof Chart.elements.LineElement).toBe(true); // line element expect(meta.data.length).toBe(4); // 4 points created - expect(meta.data[0] instanceof Chart.elements.Point).toBe(true); - expect(meta.data[1] instanceof Chart.elements.Point).toBe(true); - expect(meta.data[2] instanceof Chart.elements.Point).toBe(true); - expect(meta.data[3] instanceof Chart.elements.Point).toBe(true); + expect(meta.data[0] instanceof Chart.elements.PointElement).toBe(true); + expect(meta.data[1] instanceof Chart.elements.PointElement).toBe(true); + expect(meta.data[2] instanceof Chart.elements.PointElement).toBe(true); + expect(meta.data[3] instanceof Chart.elements.PointElement).toBe(true); }); it('should draw all elements', function() { diff --git a/test/specs/element.arc.tests.js b/test/specs/element.arc.tests.js index 78b626a88..3a744e266 100644 --- a/test/specs/element.arc.tests.js +++ b/test/specs/element.arc.tests.js @@ -3,7 +3,7 @@ describe('Arc element tests', function() { it ('should determine if in range', function() { // Mock out the arc as if the controller put it there - var arc = new Chart.elements.Arc({ + var arc = new Chart.elements.ArcElement({ startAngle: 0, endAngle: Math.PI / 2, x: 0, @@ -21,7 +21,7 @@ describe('Arc element tests', function() { it ('should determine if in range, when full circle', function() { // Mock out the arc as if the controller put it there - var arc = new Chart.elements.Arc({ + var arc = new Chart.elements.ArcElement({ startAngle: -Math.PI, endAngle: Math.PI * 1.5, x: 0, @@ -36,7 +36,7 @@ describe('Arc element tests', function() { it ('should get the tooltip position', function() { // Mock out the arc as if the controller put it there - var arc = new Chart.elements.Arc({ + var arc = new Chart.elements.ArcElement({ startAngle: 0, endAngle: Math.PI / 2, x: 0, @@ -52,7 +52,7 @@ describe('Arc element tests', function() { it ('should get the center', function() { // Mock out the arc as if the controller put it there - var arc = new Chart.elements.Arc({ + var arc = new Chart.elements.ArcElement({ startAngle: 0, endAngle: Math.PI / 2, x: 0, diff --git a/test/specs/element.bar.tests.js b/test/specs/element.bar.tests.js new file mode 100644 index 000000000..79e4b7967 --- /dev/null +++ b/test/specs/element.bar.tests.js @@ -0,0 +1,67 @@ +// Test the bar element + +describe('Bar element tests', function() { + it('Should correctly identify as in range', function() { + var bar = new Chart.elements.BarElement({ + base: 0, + width: 4, + x: 10, + y: 15 + }); + + expect(bar.inRange(10, 15)).toBe(true); + expect(bar.inRange(10, 10)).toBe(true); + expect(bar.inRange(10, 16)).toBe(false); + expect(bar.inRange(5, 5)).toBe(false); + + // Test when the y is below the base (negative bar) + var negativeBar = new Chart.elements.BarElement({ + base: 0, + width: 4, + x: 10, + y: -15 + }); + + expect(negativeBar.inRange(10, -16)).toBe(false); + expect(negativeBar.inRange(10, 1)).toBe(false); + expect(negativeBar.inRange(10, -5)).toBe(true); + }); + + it('should get the correct tooltip position', function() { + var bar = new Chart.elements.BarElement({ + base: 0, + width: 4, + x: 10, + y: 15 + }); + + expect(bar.tooltipPosition()).toEqual({ + x: 10, + y: 15, + }); + + // Test when the y is below the base (negative bar) + var negativeBar = new Chart.elements.BarElement({ + base: -10, + width: 4, + x: 10, + y: -15 + }); + + expect(negativeBar.tooltipPosition()).toEqual({ + x: 10, + y: -15, + }); + }); + + it('should get the center', function() { + var bar = new Chart.elements.BarElement({ + base: 0, + width: 4, + x: 10, + y: 15 + }); + + expect(bar.getCenterPoint()).toEqual({x: 10, y: 7.5}); + }); +}); diff --git a/test/specs/element.line.tests.js b/test/specs/element.line.tests.js index 8e8b3c907..2299de219 100644 --- a/test/specs/element.line.tests.js +++ b/test/specs/element.line.tests.js @@ -1,9 +1,9 @@ // Tests for the line element -describe('Chart.elements.Line', function() { +describe('Chart.elements.LineElement', function() { describe('auto', jasmine.fixture.specs('element.line')); it('should be constructed', function() { - var line = new Chart.elements.Line({ + var line = new Chart.elements.LineElement({ points: [1, 2, 3, 4] }); diff --git a/test/specs/element.point.tests.js b/test/specs/element.point.tests.js index 4de4d6eb2..c73c6192c 100644 --- a/test/specs/element.point.tests.js +++ b/test/specs/element.point.tests.js @@ -1,9 +1,9 @@ -describe('Chart.elements.Point', function() { +describe('Chart.elements.PointElement', function() { describe('auto', jasmine.fixture.specs('element.point')); it ('Should correctly identify as in range', function() { // Mock out the point as if we were made by the controller - var point = new Chart.elements.Point({ + var point = new Chart.elements.PointElement({ options: { radius: 2, hitRadius: 3, @@ -20,7 +20,7 @@ describe('Chart.elements.Point', function() { it ('should get the correct tooltip position', function() { // Mock out the point as if we were made by the controller - var point = new Chart.elements.Point({ + var point = new Chart.elements.PointElement({ options: { radius: 2, borderWidth: 6, @@ -37,7 +37,7 @@ describe('Chart.elements.Point', function() { it('should get the correct center point', function() { // Mock out the point as if we were made by the controller - var point = new Chart.elements.Point({ + var point = new Chart.elements.PointElement({ options: { radius: 2, }, @@ -52,7 +52,7 @@ describe('Chart.elements.Point', function() { var mockContext = window.createMockContext(); // Mock out the point as if we were made by the controller - var point = new Chart.elements.Point({ + var point = new Chart.elements.PointElement({ options: { radius: 2, hitRadius: 3, diff --git a/test/specs/element.rectangle.tests.js b/test/specs/element.rectangle.tests.js deleted file mode 100644 index 571c1cd47..000000000 --- a/test/specs/element.rectangle.tests.js +++ /dev/null @@ -1,67 +0,0 @@ -// Test the rectangle element - -describe('Rectangle element tests', function() { - it('Should correctly identify as in range', function() { - var rectangle = new Chart.elements.Rectangle({ - base: 0, - width: 4, - x: 10, - y: 15 - }); - - expect(rectangle.inRange(10, 15)).toBe(true); - expect(rectangle.inRange(10, 10)).toBe(true); - expect(rectangle.inRange(10, 16)).toBe(false); - expect(rectangle.inRange(5, 5)).toBe(false); - - // Test when the y is below the base (negative bar) - var negativeRectangle = new Chart.elements.Rectangle({ - base: 0, - width: 4, - x: 10, - y: -15 - }); - - expect(negativeRectangle.inRange(10, -16)).toBe(false); - expect(negativeRectangle.inRange(10, 1)).toBe(false); - expect(negativeRectangle.inRange(10, -5)).toBe(true); - }); - - it('should get the correct tooltip position', function() { - var rectangle = new Chart.elements.Rectangle({ - base: 0, - width: 4, - x: 10, - y: 15 - }); - - expect(rectangle.tooltipPosition()).toEqual({ - x: 10, - y: 15, - }); - - // Test when the y is below the base (negative bar) - var negativeRectangle = new Chart.elements.Rectangle({ - base: -10, - width: 4, - x: 10, - y: -15 - }); - - expect(negativeRectangle.tooltipPosition()).toEqual({ - x: 10, - y: -15, - }); - }); - - it('should get the center', function() { - var rectangle = new Chart.elements.Rectangle({ - base: 0, - width: 4, - x: 10, - y: 15 - }); - - expect(rectangle.getCenterPoint()).toEqual({x: 10, y: 7.5}); - }); -}); diff --git a/test/specs/global.namespace.tests.js b/test/specs/global.namespace.tests.js index 2c8c6bb42..1dca63dc0 100644 --- a/test/specs/global.namespace.tests.js +++ b/test/specs/global.namespace.tests.js @@ -24,10 +24,10 @@ describe('Chart namespace', function() { describe('Chart.elements', function() { it('should contains "elements" classes', function() { - expect(Chart.elements.Arc instanceof Function).toBeTruthy(); - expect(Chart.elements.Line instanceof Function).toBeTruthy(); - expect(Chart.elements.Point instanceof Function).toBeTruthy(); - expect(Chart.elements.Rectangle instanceof Function).toBeTruthy(); + expect(Chart.elements.ArcElement instanceof Function).toBeTruthy(); + expect(Chart.elements.BarElement instanceof Function).toBeTruthy(); + expect(Chart.elements.LineElement instanceof Function).toBeTruthy(); + expect(Chart.elements.PointElement instanceof Function).toBeTruthy(); }); }); diff --git a/types/controllers/index.d.ts b/types/controllers/index.d.ts index 02265071c..0dde84bbc 100644 --- a/types/controllers/index.d.ts +++ b/types/controllers/index.d.ts @@ -10,7 +10,7 @@ import { IPointOptions, IPointPrefixedHoverOptions, IPointPrefixedOptions, - IRectangleOptions, + IBarOptions, } from '../elements'; export interface IControllerDatasetOptions { @@ -30,7 +30,7 @@ export interface IControllerDatasetOptions { export interface IBarControllerDatasetOptions extends IControllerDatasetOptions, - ScriptableAndArrayOptions, + ScriptableAndArrayOptions, ScriptableAndArrayOptions { /** * The base axis of the dataset. 'x' for vertical bars and 'y' for horizontal bars. diff --git a/types/elements/index.d.ts b/types/elements/index.d.ts index 7ca94de02..ce3c200a5 100644 --- a/types/elements/index.d.ts +++ b/types/elements/index.d.ts @@ -53,13 +53,13 @@ export interface IArcHoverOptions extends ICommonHoverOptions { hoverOffset: number; } -export interface Arc +export interface ArcElement extends Element, IVisualElement {} -export const Arc: IChartComponent & { - prototype: Arc; - new (cfg: any): Arc; +export const ArcElement: IChartComponent & { + prototype: ArcElement; + new (cfg: any): ArcElement; }; export interface ILineProps {} @@ -114,7 +114,7 @@ export interface ILineHoverOptions extends ICommonHoverOptions { hoverBorderJoinStyle: CanvasLineJoin; } -export interface Line +export interface LineElement extends Element, IVisualElement { updateControlPoints(chartArea: IChartArea): void; @@ -127,9 +127,9 @@ export interface Line +export interface PointElement extends Element, IVisualElement { readonly skip: boolean; } -export const Point: IChartComponent & { - prototype: Point; - new (cfg: any): Point; +export const PointElement: IChartComponent & { + prototype: PointElement; + new (cfg: any): PointElement; }; -export interface IRectangleProps { +export interface IBarProps { x: number; y: number; base: number; @@ -252,7 +252,7 @@ export interface IRectangleProps { height: number; } -export interface IRectangleOptions extends ICommonOptions { +export interface IBarOptions extends ICommonOptions { /** * The base value for the bar in data units along the value axis. */ @@ -265,22 +265,22 @@ export interface IRectangleOptions extends ICommonOptions { borderSkipped: 'start' | 'end' | 'left' | 'right' | 'bottom' | 'top'; } -export interface IRectangleHoverOptions extends ICommonHoverOptions {} +export interface IBarHoverOptions extends ICommonHoverOptions {} -export interface Rectangle< - T extends IRectangleProps = IRectangleProps, - O extends IRectangleOptions = IRectangleOptions +export interface BarElement< + T extends IBarProps = IBarProps, + O extends IBarOptions = IBarOptions > extends Element, IVisualElement {} -export const Rectangle: IChartComponent & { - prototype: Rectangle; - new (cfg: any): Rectangle; +export const BarElement: IChartComponent & { + prototype: BarElement; + new (cfg: any): BarElement; }; export interface IElementChartOptions { elements: { arc: IArcOptions & IArcHoverOptions; - rectangle: IRectangleOptions & IRectangleHoverOptions; + bar: IBarOptions & IBarHoverOptions; line: ILineOptions & ILineHoverOptions; point: IPointOptions & IPointHoverOptions; };