import defaults from '../core/core.defaults';
import {_longestText, renderText} from '../helpers/helpers.canvas';
-import {HALF_PI, isNumber, TAU, toDegrees, toRadians, _normalizeAngle, PI} from '../helpers/helpers.math';
+import {HALF_PI, TAU, toDegrees, toRadians, _normalizeAngle, PI} from '../helpers/helpers.math';
import LinearScaleBase from './scale.linearbase';
import Ticks from '../core/core.ticks';
import {valueOrDefault, isArray, isFinite, callback as callCallback, isNullOrUndef} from '../helpers/helpers.core';
// Get maximum radius of the polygon. Either half the height (minus the text width) or half the width.
// Use this to calculate the offset + change. - Make sure L/R protrusion is at least 0 to stop issues with centre points
- const furthestLimits = {
- l: 0,
- r: scale.width,
- t: 0,
- b: scale.height - scale.paddingTop
+ const orig = {
+ l: scale.left + scale._padding.left,
+ r: scale.right - scale._padding.right,
+ t: scale.top + scale._padding.top,
+ b: scale.bottom - scale._padding.bottom
};
- const furthestAngles = {};
+ const limits = Object.assign({}, orig);
const labelSizes = [];
const padding = [];
-
const valueCount = scale._pointLabels.length;
+ const pointLabelOpts = scale.options.pointLabels;
+ const additionalAngle = pointLabelOpts.centerPointLabels ? PI / valueCount : 0;
+
for (let i = 0; i < valueCount; i++) {
- const opts = scale.options.pointLabels.setContext(scale.getPointLabelContext(i));
+ const opts = pointLabelOpts.setContext(scale.getPointLabelContext(i));
padding[i] = opts.padding;
- const pointPosition = scale.getPointPosition(i, scale.drawingArea + padding[i]);
+ const pointPosition = scale.getPointPosition(i, scale.drawingArea + padding[i], additionalAngle);
const plFont = toFont(opts.font);
const textSize = measureLabelSize(scale.ctx, plFont, scale._pointLabels[i]);
labelSizes[i] = textSize;
- const angleRadians = scale.getIndexAngle(i);
- const angle = toDegrees(angleRadians);
+ const angleRadians = _normalizeAngle(scale.getIndexAngle(i) + additionalAngle);
+ const angle = Math.round(toDegrees(angleRadians));
const hLimits = determineLimits(angle, pointPosition.x, textSize.w, 0, 180);
const vLimits = determineLimits(angle, pointPosition.y, textSize.h, 90, 270);
-
- if (hLimits.start < furthestLimits.l) {
- furthestLimits.l = hLimits.start;
- furthestAngles.l = angleRadians;
- }
-
- if (hLimits.end > furthestLimits.r) {
- furthestLimits.r = hLimits.end;
- furthestAngles.r = angleRadians;
- }
-
- if (vLimits.start < furthestLimits.t) {
- furthestLimits.t = vLimits.start;
- furthestAngles.t = angleRadians;
- }
-
- if (vLimits.end > furthestLimits.b) {
- furthestLimits.b = vLimits.end;
- furthestAngles.b = angleRadians;
- }
+ updateLimits(limits, orig, angleRadians, hLimits, vLimits);
}
- scale._setReductions(scale.drawingArea, furthestLimits, furthestAngles);
+ scale.setCenterPoint(
+ orig.l - limits.l,
+ limits.r - orig.r,
+ orig.t - limits.t,
+ limits.b - orig.b
+ );
// Now that text size is determined, compute the full positions
scale._pointLabelItems = buildPointLabelItems(scale, labelSizes, padding);
}
+function updateLimits(limits, orig, angle, hLimits, vLimits) {
+ const sin = Math.abs(Math.sin(angle));
+ const cos = Math.abs(Math.cos(angle));
+ let x = 0;
+ let y = 0;
+ if (hLimits.start < orig.l) {
+ x = (orig.l - hLimits.start) / sin;
+ limits.l = Math.min(limits.l, orig.l - x);
+ } else if (hLimits.end > orig.r) {
+ x = (hLimits.end - orig.r) / sin;
+ limits.r = Math.max(limits.r, orig.r + x);
+ }
+ if (vLimits.start < orig.t) {
+ y = (orig.t - vLimits.start) / cos;
+ limits.t = Math.min(limits.t, orig.t - y);
+ } else if (vLimits.end > orig.b) {
+ y = (vLimits.end - orig.b) / cos;
+ limits.b = Math.max(limits.b, orig.b + y);
+ }
+}
+
function buildPointLabelItems(scale, labelSizes, padding) {
const items = [];
const valueCount = scale._pointLabels.length;
const opts = scale.options;
- const tickBackdropHeight = getTickBackdropHeight(opts);
- const outerDistance = scale.getDistanceFromCenterForValue(opts.ticks.reverse ? scale.min : scale.max);
+ const extra = getTickBackdropHeight(opts) / 2;
+ const outerDistance = scale.drawingArea;
const additionalAngle = opts.pointLabels.centerPointLabels ? PI / valueCount : 0;
for (let i = 0; i < valueCount; i++) {
- // Extra pixels out for some label spacing
- const extra = (i === 0 ? tickBackdropHeight / 2 : 0);
const pointLabelPosition = scale.getPointPosition(i, outerDistance + extra + padding[i], additionalAngle);
- const angle = toDegrees(pointLabelPosition.angle + HALF_PI);
+ const angle = Math.round(toDegrees(_normalizeAngle(pointLabelPosition.angle + HALF_PI)));
const size = labelSizes[i];
const y = yForAngle(pointLabelPosition.y, size.h, angle);
const textAlign = getTextAlignForAngle(angle);
ctx.restore();
}
-function numberOrZero(param) {
- return isNumber(param) ? param : 0;
-}
-
function createPointLabelContext(parent, index, label) {
return createContext(parent, {
label,
setDimensions() {
// Set the unconstrained dimension before label rotation
- this.width = this.maxWidth;
- this.height = this.maxHeight;
- this.paddingTop = getTickBackdropHeight(this.options) / 2;
- this.xCenter = Math.floor(this.width / 2);
- this.yCenter = Math.floor((this.height - this.paddingTop) / 2);
- this.drawingArea = Math.min(this.height - this.paddingTop, this.width) / 2;
+ const padding = this._padding = toPadding(getTickBackdropHeight(this.options) / 2);
+ const w = this.width = this.maxWidth - padding.width;
+ const h = this.height = this.maxHeight - padding.height;
+ this.xCenter = Math.floor(this.left + w / 2 + padding.left);
+ this.yCenter = Math.floor(this.top + h / 2 + padding.top);
+ this.drawingArea = Math.floor(Math.min(w, h) / 2);
}
determineDataLimits() {
}
}
- /**
- * Set radius reductions and determine new radius and center point
- * @private
- */
- _setReductions(largestPossibleRadius, furthestLimits, furthestAngles) {
- let radiusReductionLeft = furthestLimits.l / Math.sin(furthestAngles.l);
- let radiusReductionRight = Math.max(furthestLimits.r - this.width, 0) / Math.sin(furthestAngles.r);
- let radiusReductionTop = -furthestLimits.t / Math.cos(furthestAngles.t);
- let radiusReductionBottom = -Math.max(furthestLimits.b - (this.height - this.paddingTop), 0) / Math.cos(furthestAngles.b);
-
- radiusReductionLeft = numberOrZero(radiusReductionLeft);
- radiusReductionRight = numberOrZero(radiusReductionRight);
- radiusReductionTop = numberOrZero(radiusReductionTop);
- radiusReductionBottom = numberOrZero(radiusReductionBottom);
-
- this.drawingArea = Math.max(largestPossibleRadius / 2, Math.min(
- Math.floor(largestPossibleRadius - (radiusReductionLeft + radiusReductionRight) / 2),
- Math.floor(largestPossibleRadius - (radiusReductionTop + radiusReductionBottom) / 2)));
- this.setCenterPoint(radiusReductionLeft, radiusReductionRight, radiusReductionTop, radiusReductionBottom);
- }
-
setCenterPoint(leftMovement, rightMovement, topMovement, bottomMovement) {
- const maxRight = this.width - rightMovement - this.drawingArea;
- const maxLeft = leftMovement + this.drawingArea;
- const maxTop = topMovement + this.drawingArea;
- const maxBottom = (this.height - this.paddingTop) - bottomMovement - this.drawingArea;
-
- this.xCenter = Math.floor(((maxLeft + maxRight) / 2) + this.left);
- this.yCenter = Math.floor(((maxTop + maxBottom) / 2) + this.top + this.paddingTop);
+ this.xCenter += Math.floor((leftMovement - rightMovement) / 2);
+ this.yCenter += Math.floor((topMovement - bottomMovement) / 2);
+ this.drawingArea -= Math.min(this.drawingArea / 2, Math.max(leftMovement, rightMovement, topMovement, bottomMovement));
}
getIndexAngle(index) {
--- /dev/null
+module.exports = {
+ config: {
+ type: 'polarArea',
+ data: {
+ datasets: [{
+ data: [1, 2, 3, 4],
+ backgroundColor: ['#f003', '#0f03', '#00f3', '#0003']
+ }],
+ labels: [['label 1', 'line 2'], ['label 2', 'line 2'], ['label 3', 'line 2'], ['label 4', 'line 2']]
+ },
+ options: {
+ scales: {
+ r: {
+ startAngle: 180,
+ pointLabels: {
+ display: true,
+ centerPointLabels: true
+ }
+ }
+ }
+ }
+ },
+ options: {
+ spriteText: true
+ }
+};
--- /dev/null
+module.exports = {
+ config: {
+ type: 'polarArea',
+ data: {
+ datasets: [{
+ data: [1, 2, 3, 4],
+ backgroundColor: ['#f003', '#0f03', '#00f3', '#0003']
+ }],
+ labels: [['label 1', 'line 2'], ['label 2', 'line 2'], ['label 3', 'line 2'], ['label 4', 'line 2']]
+ },
+ options: {
+ scales: {
+ r: {
+ startAngle: 45,
+ pointLabels: {
+ display: true,
+ centerPointLabels: true
+ }
+ }
+ }
+ }
+ },
+ options: {
+ spriteText: true
+ }
+};
--- /dev/null
+module.exports = {
+ config: {
+ type: 'polarArea',
+ data: {
+ datasets: [{
+ data: [1, 2, 3, 4],
+ backgroundColor: ['#f003', '#0f03', '#00f3', '#0003']
+ }],
+ labels: [['label 1', 'line 2'], ['label 2', 'line 2'], ['label 3', 'line 2'], ['label 4', 'line 2']]
+ },
+ options: {
+ scales: {
+ r: {
+ pointLabels: {
+ display: true,
+ centerPointLabels: true
+ }
+ }
+ }
+ }
+ },
+ options: {
+ spriteText: true
+ }
+};
--- /dev/null
+module.exports = {
+ config: {
+ type: 'polarArea',
+ data: {
+ datasets: [{
+ data: [1, 2, 3, 4],
+ backgroundColor: ['#f003', '#0f03', '#00f3', '#0003']
+ }],
+ labels: [['label 1', 'line 2'], ['label 2', 'line 2'], ['label 3', 'line 2'], ['label 4', 'line 2']]
+ },
+ options: {
+ scales: {
+ r: {
+ startAngle: 180,
+ pointLabels: {
+ display: true,
+ }
+ }
+ }
+ }
+ },
+ options: {
+ spriteText: true
+ }
+};
--- /dev/null
+module.exports = {
+ config: {
+ type: 'polarArea',
+ data: {
+ datasets: [{
+ data: [1, 2, 3, 4],
+ backgroundColor: ['#f003', '#0f03', '#00f3', '#0003']
+ }],
+ labels: [['label 1', 'line 2'], ['label 2', 'line 2'], ['label 3', 'line 2'], ['label 4', 'line 2']]
+ },
+ options: {
+ scales: {
+ r: {
+ startAngle: 45,
+ pointLabels: {
+ display: true
+ }
+ }
+ }
+ }
+ },
+ options: {
+ spriteText: true
+ }
+};
--- /dev/null
+module.exports = {
+ config: {
+ type: 'polarArea',
+ data: {
+ datasets: [{
+ data: [1, 2, 3, 4],
+ backgroundColor: ['#f003', '#0f03', '#00f3', '#0003']
+ }],
+ labels: [['label 1', 'line 2'], ['label 2', 'line 2'], ['label 3', 'line 2'], ['label 4', 'line 2']]
+ },
+ options: {
+ scales: {
+ r: {
+ pointLabels: {
+ display: true,
+ }
+ }
+ }
+ }
+ },
+ options: {
+ spriteText: true
+ }
+};
--- /dev/null
+module.exports = {
+ config: {
+ type: 'polarArea',
+ data: {
+ datasets: [{
+ data: [1, 2, 3, 4],
+ backgroundColor: ['#f003', '#0f03', '#00f3', '#0003']
+ }],
+ labels: [['label 1', 'line 2'], ['label 2', 'line 2'], ['label 3', 'line 2'], ['label 4', 'line 2']]
+ },
+ options: {
+ plugins: {
+ title: {
+ display: true,
+ position: 'bottom',
+ text: 'Chart Title'
+ },
+ legend: false
+ },
+ scales: {
+ r: {
+ startAngle: 45,
+ pointLabels: {
+ display: true,
+ centerPointLabels: true
+ }
+ }
+ }
+ }
+ },
+ options: {
+ spriteText: true
+ }
+};
--- /dev/null
+module.exports = {
+ config: {
+ type: 'polarArea',
+ data: {
+ datasets: [{
+ data: [1, 2, 3, 4],
+ backgroundColor: ['#f003', '#0f03', '#00f3', '#0003']
+ }],
+ labels: [['label 1', 'line 2'], ['label 2', 'line 2'], ['label 3', 'line 2'], ['label 4', 'line 2']]
+ },
+ options: {
+ plugins: {
+ title: {
+ display: true,
+ position: 'bottom',
+ text: 'Chart Title'
+ },
+ legend: false
+ },
+ scales: {
+ r: {
+ pointLabels: {
+ display: true,
+ centerPointLabels: true
+ }
+ }
+ }
+ }
+ },
+ options: {
+ spriteText: true
+ }
+};
--- /dev/null
+module.exports = {
+ config: {
+ type: 'polarArea',
+ data: {
+ datasets: [{
+ data: [1, 2, 3, 4],
+ backgroundColor: ['#f003', '#0f03', '#00f3', '#0003']
+ }],
+ labels: [['label 1', 'line 2'], ['label 2', 'line 2'], ['label 3', 'line 2'], ['label 4', 'line 2']]
+ },
+ options: {
+ plugins: {
+ title: {
+ display: true,
+ position: 'left',
+ text: 'Chart Title'
+ },
+ legend: false
+ },
+ scales: {
+ r: {
+ startAngle: 45,
+ pointLabels: {
+ display: true,
+ centerPointLabels: true
+ }
+ }
+ }
+ }
+ },
+ options: {
+ spriteText: true
+ }
+};
--- /dev/null
+module.exports = {
+ config: {
+ type: 'polarArea',
+ data: {
+ datasets: [{
+ data: [1, 2, 3, 4],
+ backgroundColor: ['#f003', '#0f03', '#00f3', '#0003']
+ }],
+ labels: [['label 1', 'line 2'], ['label 2', 'line 2'], ['label 3', 'line 2'], ['label 4', 'line 2']]
+ },
+ options: {
+ plugins: {
+ title: {
+ display: true,
+ position: 'left',
+ text: 'Chart Title'
+ },
+ legend: false
+ },
+ scales: {
+ r: {
+ pointLabels: {
+ display: true,
+ centerPointLabels: true
+ }
+ }
+ }
+ }
+ },
+ options: {
+ spriteText: true
+ }
+};
--- /dev/null
+module.exports = {
+ config: {
+ type: 'polarArea',
+ data: {
+ datasets: [{
+ data: [1, 2, 3, 4],
+ backgroundColor: ['#f003', '#0f03', '#00f3', '#0003']
+ }],
+ labels: [['label 1', 'line 2'], ['label 2', 'line 2'], ['label 3', 'line 2'], ['label 4', 'line 2']]
+ },
+ options: {
+ plugins: {
+ title: {
+ display: true,
+ position: 'right',
+ text: 'Chart Title'
+ },
+ legend: false
+ },
+ scales: {
+ r: {
+ startAngle: 45,
+ pointLabels: {
+ display: true,
+ centerPointLabels: true
+ }
+ }
+ }
+ }
+ },
+ options: {
+ spriteText: true
+ }
+};
--- /dev/null
+module.exports = {
+ config: {
+ type: 'polarArea',
+ data: {
+ datasets: [{
+ data: [1, 2, 3, 4],
+ backgroundColor: ['#f003', '#0f03', '#00f3', '#0003']
+ }],
+ labels: [['label 1', 'line 2'], ['label 2', 'line 2'], ['label 3', 'line 2'], ['label 4', 'line 2']]
+ },
+ options: {
+ plugins: {
+ title: {
+ display: true,
+ position: 'right',
+ text: 'Chart Title'
+ },
+ legend: false
+ },
+ scales: {
+ r: {
+ pointLabels: {
+ display: true,
+ centerPointLabels: true
+ }
+ }
+ }
+ }
+ },
+ options: {
+ spriteText: true
+ }
+};
--- /dev/null
+module.exports = {
+ config: {
+ type: 'polarArea',
+ data: {
+ datasets: [{
+ data: [1, 2, 3, 4],
+ backgroundColor: ['#f003', '#0f03', '#00f3', '#0003']
+ }],
+ labels: [['label 1', 'line 2'], ['label 2', 'line 2'], ['label 3', 'line 2'], ['label 4', 'line 2']]
+ },
+ options: {
+ plugins: {
+ title: {
+ display: true,
+ text: 'Chart Title'
+ },
+ legend: false
+ },
+ scales: {
+ r: {
+ startAngle: 45,
+ pointLabels: {
+ display: true,
+ centerPointLabels: true
+ }
+ }
+ }
+ }
+ },
+ options: {
+ spriteText: true
+ }
+};
--- /dev/null
+module.exports = {
+ config: {
+ type: 'polarArea',
+ data: {
+ datasets: [{
+ data: [1, 2, 3, 4],
+ backgroundColor: ['#f003', '#0f03', '#00f3', '#0003']
+ }],
+ labels: [['label 1', 'line 2'], ['label 2', 'line 2'], ['label 3', 'line 2'], ['label 4', 'line 2']]
+ },
+ options: {
+ plugins: {
+ title: {
+ display: true,
+ text: 'Chart Title'
+ },
+ legend: false
+ },
+ scales: {
+ r: {
+ pointLabels: {
+ display: true,
+ centerPointLabels: true
+ }
+ }
+ }
+ }
+ },
+ options: {
+ spriteText: true
+ }
+};
--- /dev/null
+module.exports = {
+ config: {
+ type: 'polarArea',
+ data: {
+ datasets: [{
+ data: [1, 2, 3, 4],
+ backgroundColor: ['#f003', '#0f03', '#00f3', '#0003']
+ }],
+ labels: [['label 1', 'line 2'], ['label 2', 'line 2'], ['label 3', 'line 2'], ['label 4', 'line 2']]
+ },
+ options: {
+ plugins: {
+ title: {
+ display: true,
+ text: 'Chart Title'
+ },
+ legend: false
+ },
+ scales: {
+ r: {
+ startAngle: 45,
+ pointLabels: {
+ display: true
+ }
+ }
+ }
+ }
+ },
+ options: {
+ spriteText: true
+ }
+};
--- /dev/null
+module.exports = {
+ config: {
+ type: 'polarArea',
+ data: {
+ datasets: [{
+ data: [1, 2, 3, 4],
+ backgroundColor: ['#f003', '#0f03', '#00f3', '#0003']
+ }],
+ labels: [['label 1', 'line 2'], ['label 2', 'line 2'], ['label 3', 'line 2'], ['label 4', 'line 2']]
+ },
+ options: {
+ plugins: {
+ title: {
+ display: true,
+ text: 'Chart Title'
+ },
+ legend: false
+ },
+ scales: {
+ r: {
+ pointLabels: {
+ display: true
+ }
+ }
+ }
+ }
+ },
+ options: {
+ spriteText: true
+ }
+};
--- /dev/null
+module.exports = {
+ config: {
+ type: 'radar',
+ data: {
+ datasets: [{
+ data: [6, 3, 2, 3],
+ borderWidth: 3,
+ borderColor: 'blue'
+ }],
+ labels: [['label 1', 'line 2'], ['label 2', 'line 2'], ['label 3', 'line 2'], ['label 4', 'line 2']]
+ },
+ options: {
+ scales: {
+ r: {
+ min: 0,
+ startAngle: 135,
+ pointLabels: {
+ display: true
+ },
+ grid: {
+ circular: true
+ }
+ }
+ }
+ }
+ },
+ options: {
+ spriteText: true
+ }
+};
--- /dev/null
+module.exports = {
+ config: {
+ type: 'radar',
+ data: {
+ datasets: [{
+ data: [6, 3, 2, 3],
+ borderWidth: 3,
+ borderColor: 'blue'
+ }],
+ labels: [['label 1', 'line 2'], ['label 2', 'line 2'], ['label 3', 'line 2'], ['label 4', 'line 2']]
+ },
+ options: {
+ scales: {
+ r: {
+ min: 0,
+ startAngle: 180,
+ pointLabels: {
+ display: true
+ },
+ grid: {
+ circular: true
+ }
+ }
+ }
+ }
+ },
+ options: {
+ spriteText: true
+ }
+};
--- /dev/null
+module.exports = {
+ config: {
+ type: 'radar',
+ data: {
+ datasets: [{
+ data: [6, 3, 2, 3],
+ borderWidth: 3,
+ borderColor: 'blue'
+ }],
+ labels: [['label 1', 'line 2'], ['label 2', 'line 2'], ['label 3', 'line 2'], ['label 4', 'line 2']]
+ },
+ options: {
+ scales: {
+ r: {
+ min: 0,
+ startAngle: 225,
+ pointLabels: {
+ display: true
+ },
+ grid: {
+ circular: true
+ }
+ }
+ }
+ }
+ },
+ options: {
+ spriteText: true
+ }
+};
--- /dev/null
+module.exports = {
+ config: {
+ type: 'radar',
+ data: {
+ datasets: [{
+ data: [6, 3, 2, 3],
+ borderWidth: 3,
+ borderColor: 'blue'
+ }],
+ labels: [['label 1', 'line 2'], ['label 2', 'line 2'], ['label 3', 'line 2'], ['label 4', 'line 2']]
+ },
+ options: {
+ scales: {
+ r: {
+ min: 0,
+ startAngle: 270,
+ pointLabels: {
+ display: true
+ },
+ grid: {
+ circular: true
+ }
+ }
+ }
+ }
+ },
+ options: {
+ spriteText: true
+ }
+};
--- /dev/null
+module.exports = {
+ config: {
+ type: 'radar',
+ data: {
+ datasets: [{
+ data: [6, 3, 2, 3],
+ borderWidth: 3,
+ borderColor: 'blue'
+ }],
+ labels: [['label 1', 'line 2'], ['label 2', 'line 2'], ['label 3', 'line 2'], ['label 4', 'line 2']]
+ },
+ options: {
+ scales: {
+ r: {
+ min: 0,
+ startAngle: 315,
+ pointLabels: {
+ display: true
+ },
+ grid: {
+ circular: true
+ }
+ }
+ }
+ }
+ },
+ options: {
+ spriteText: true
+ }
+};
--- /dev/null
+module.exports = {
+ config: {
+ type: 'radar',
+ data: {
+ datasets: [{
+ data: [6, 3, 2, 3],
+ borderWidth: 3,
+ borderColor: 'blue'
+ }],
+ labels: [['label 1', 'line 2'], ['label 2', 'line 2'], ['label 3', 'line 2'], ['label 4', 'line 2']]
+ },
+ options: {
+ scales: {
+ r: {
+ min: 0,
+ startAngle: 45,
+ pointLabels: {
+ display: true
+ },
+ grid: {
+ circular: true
+ }
+ }
+ }
+ }
+ },
+ options: {
+ spriteText: true
+ }
+};
--- /dev/null
+module.exports = {
+ config: {
+ type: 'radar',
+ data: {
+ datasets: [{
+ data: [6, 3, 2, 3],
+ borderWidth: 3,
+ borderColor: 'blue'
+ }],
+ labels: [['label 1', 'line 2'], ['label 2', 'line 2'], ['label 3', 'line 2'], ['label 4', 'line 2']]
+ },
+ options: {
+ scales: {
+ r: {
+ min: 0,
+ startAngle: 90,
+ pointLabels: {
+ display: true
+ },
+ grid: {
+ circular: true
+ }
+ }
+ }
+ }
+ },
+ options: {
+ spriteText: true
+ }
+};
--- /dev/null
+module.exports = {
+ config: {
+ type: 'radar',
+ data: {
+ datasets: [{
+ data: [6, 3, 2, 3],
+ borderWidth: 3,
+ borderColor: 'blue'
+ }],
+ labels: [['label 1', 'line 2'], ['label 2', 'line 2'], ['label 3', 'line 2'], ['label 4', 'line 2']]
+ },
+ options: {
+ scales: {
+ r: {
+ min: 0,
+ pointLabels: {
+ display: true
+ },
+ grid: {
+ circular: true
+ }
+ }
+ }
+ }
+ },
+ options: {
+ spriteText: true
+ }
+};
expect(meta.data.length).toBe(4);
[
- {o: 177, s: -0.5 * Math.PI, e: 0},
- {o: 240, s: 0, e: 0.5 * Math.PI},
+ {o: 174, s: -0.5 * Math.PI, e: 0},
+ {o: 236, s: 0, e: 0.5 * Math.PI},
{o: 51, s: 0.5 * Math.PI, e: Math.PI},
{o: 0, s: Math.PI, e: 1.5 * Math.PI}
].forEach(function(expected, i) {
- expect(meta.data[i].x).toBeCloseToPixel(256);
- expect(meta.data[i].y).toBeCloseToPixel(259);
- expect(meta.data[i].innerRadius).toBeCloseToPixel(0);
- expect(meta.data[i].outerRadius).toBeCloseToPixel(expected.o);
- expect(meta.data[i].startAngle).toBe(expected.s);
- expect(meta.data[i].endAngle).toBe(expected.e);
- expect(meta.data[i].options).toEqual(jasmine.objectContaining({
+ expect(meta.data[i].x).withContext(i).toBeCloseToPixel(256);
+ expect(meta.data[i].y).withContext(i).toBeCloseToPixel(256);
+ expect(meta.data[i].innerRadius).withContext(i).toBeCloseToPixel(0);
+ expect(meta.data[i].outerRadius).withContext(i).toBeCloseToPixel(expected.o);
+ expect(meta.data[i].startAngle).withContext(i).toBe(expected.s);
+ expect(meta.data[i].endAngle).withContext(i).toBe(expected.e);
+ expect(meta.data[i].options).withContext(i).toEqual(jasmine.objectContaining({
backgroundColor: 'rgb(255, 0, 0)',
borderColor: 'rgb(0, 255, 0)',
borderWidth: 1.2
chart.update();
expect(meta.data[0].x).toBeCloseToPixel(256);
- expect(meta.data[0].y).toBeCloseToPixel(259);
+ expect(meta.data[0].y).toBeCloseToPixel(256);
expect(meta.data[0].innerRadius).toBeCloseToPixel(0);
- expect(meta.data[0].outerRadius).toBeCloseToPixel(177);
+ expect(meta.data[0].outerRadius).toBeCloseToPixel(174);
});
it('should update elements with start angle from options', function() {
expect(meta.data.length).toBe(4);
[
- {o: 177, s: 0, e: 0.5 * Math.PI},
- {o: 240, s: 0.5 * Math.PI, e: Math.PI},
+ {o: 174, s: 0, e: 0.5 * Math.PI},
+ {o: 236, s: 0.5 * Math.PI, e: Math.PI},
{o: 51, s: Math.PI, e: 1.5 * Math.PI},
{o: 0, s: 1.5 * Math.PI, e: 2.0 * Math.PI}
].forEach(function(expected, i) {
- expect(meta.data[i].x).toBeCloseToPixel(256);
- expect(meta.data[i].y).toBeCloseToPixel(259);
- expect(meta.data[i].innerRadius).toBeCloseToPixel(0);
- expect(meta.data[i].outerRadius).toBeCloseToPixel(expected.o);
- expect(meta.data[i].startAngle).toBe(expected.s);
- expect(meta.data[i].endAngle).toBe(expected.e);
- expect(meta.data[i].options).toEqual(jasmine.objectContaining({
+ expect(meta.data[i].x).withContext(i).toBeCloseToPixel(256);
+ expect(meta.data[i].y).withContext(i).toBeCloseToPixel(256);
+ expect(meta.data[i].innerRadius).withContext(i).toBeCloseToPixel(0);
+ expect(meta.data[i].outerRadius).withContext(i).toBeCloseToPixel(expected.o);
+ expect(meta.data[i].startAngle).withContext(i).toBe(expected.s);
+ expect(meta.data[i].endAngle).withContext(i).toBe(expected.e);
+ expect(meta.data[i].options).withContext(i).toEqual(jasmine.objectContaining({
backgroundColor: 'rgb(255, 0, 0)',
borderColor: 'rgb(0, 255, 0)',
borderWidth: 1.2
}));
[
- {x: 256, y: 260},
- {x: 256, y: 260},
- {x: 256, y: 260},
- {x: 256, y: 260},
+ {x: 256, y: 256},
+ {x: 256, y: 256},
+ {x: 256, y: 256},
+ {x: 256, y: 256},
].forEach(function(expected, i) {
- expect(meta.data[i].x).toBeCloseToPixel(expected.x);
- expect(meta.data[i].y).toBeCloseToPixel(expected.y);
- expect(meta.data[i].options).toEqual(jasmine.objectContaining({
+ expect(meta.data[i].x).withContext(i).toBeCloseToPixel(expected.x);
+ expect(meta.data[i].y).withContext(i).toBeCloseToPixel(expected.y);
+ expect(meta.data[i].options).withContext(i).toEqual(jasmine.objectContaining({
backgroundColor: Chart.defaults.backgroundColor,
borderWidth: 1,
borderColor: Chart.defaults.borderColor,
chart.update();
[
- {x: 256, y: 120, cppx: 246, cppy: 120, cpnx: 272, cpny: 120},
- {x: 464, y: 260, cppx: 464, cppy: 252, cpnx: 464, cpny: 266},
- {x: 256, y: 260, cppx: 277, cppy: 260, cpnx: 250, cpny: 260},
- {x: 200, y: 260, cppx: 200, cppy: 264, cpnx: 200, cpny: 250},
+ {x: 256, y: 122, cppx: 246, cppy: 122, cpnx: 272, cpny: 122},
+ {x: 457, y: 256, cppx: 457, cppy: 249, cpnx: 457, cpny: 262},
+ {x: 256, y: 256, cppx: 277, cppy: 256, cpnx: 250, cpny: 256},
+ {x: 202, y: 256, cppx: 202, cppy: 260, cpnx: 202, cpny: 246},
].forEach(function(expected, i) {
- expect(meta.data[i].x).toBeCloseToPixel(expected.x);
- expect(meta.data[i].y).toBeCloseToPixel(expected.y);
- expect(meta.data[i].cp1x).toBeCloseToPixel(expected.cppx);
- expect(meta.data[i].cp1y).toBeCloseToPixel(expected.cppy);
- expect(meta.data[i].cp2x).toBeCloseToPixel(expected.cpnx);
- expect(meta.data[i].cp2y).toBeCloseToPixel(expected.cpny);
- expect(meta.data[i].options).toEqual(jasmine.objectContaining({
+ expect(meta.data[i].x).withContext(i).toBeCloseToPixel(expected.x);
+ expect(meta.data[i].y).withContext(i).toBeCloseToPixel(expected.y);
+ expect(meta.data[i].cp1x).withContext(i).toBeCloseToPixel(expected.cppx);
+ expect(meta.data[i].cp1y).withContext(i).toBeCloseToPixel(expected.cppy);
+ expect(meta.data[i].cp2x).withContext(i).toBeCloseToPixel(expected.cpnx);
+ expect(meta.data[i].cp2y).withContext(i).toBeCloseToPixel(expected.cpny);
+ expect(meta.data[i].options).withContext(i).toEqual(jasmine.objectContaining({
backgroundColor: Chart.defaults.backgroundColor,
borderWidth: 1,
borderColor: Chart.defaults.borderColor,
// Since tension is now 0, we don't care about the control points
[
- {x: 256, y: 120},
- {x: 464, y: 260},
- {x: 256, y: 260},
- {x: 200, y: 260},
+ {x: 256, y: 122},
+ {x: 457, y: 256},
+ {x: 256, y: 256},
+ {x: 202, y: 256},
].forEach(function(expected, i) {
- expect(meta.data[i].x).toBeCloseToPixel(expected.x);
- expect(meta.data[i].y).toBeCloseToPixel(expected.y);
- expect(meta.data[i].options).toEqual(jasmine.objectContaining({
+ expect(meta.data[i].x).withContext(i).toBeCloseToPixel(expected.x);
+ expect(meta.data[i].y).withContext(i).toBeCloseToPixel(expected.y);
+ expect(meta.data[i].options).withContext(i).toEqual(jasmine.objectContaining({
backgroundColor: 'rgb(128, 129, 130)',
borderWidth: 1.123,
borderColor: 'rgb(56, 57, 58)',
expect(scale.left).toBeCloseToPixel(0);
expect(scale.right).toBeCloseToPixel(512);
expect(scale.top).toBeCloseToPixel(32);
- expect(scale.width).toBeCloseToPixel(512);
- expect(scale.height).toBeCloseToPixel(480);
+ expect(scale.width).toBeCloseToPixel(496);
+ expect(scale.height).toBeCloseToPixel(464);
});
it('should fit multiple axes in the same position', function() {
}
});
- expect(chart.scales.r.drawingArea).toBe(227);
+ expect(chart.scales.r.drawingArea).toBe(215);
expect(chart.scales.r.xCenter).toBe(256);
- expect(chart.scales.r.yCenter).toBe(284);
+ expect(chart.scales.r.yCenter).toBe(280);
});
it('should correctly get the label for a given data index', function() {
});
expect(chart.scales.r.getDistanceFromCenterForValue(chart.scales.r.min)).toBe(0);
- expect(chart.scales.r.getDistanceFromCenterForValue(chart.scales.r.max)).toBe(227);
+ expect(chart.scales.r.getDistanceFromCenterForValue(chart.scales.r.max)).toBe(215);
var position = chart.scales.r.getPointPositionForValue(1, 5);
- expect(position.x).toBeCloseToPixel(270);
- expect(position.y).toBeCloseToPixel(278);
+ expect(position.x).toBeCloseToPixel(269);
+ expect(position.y).toBeCloseToPixel(276);
chart.scales.r.options.reverse = true;
chart.update();
- expect(chart.scales.r.getDistanceFromCenterForValue(chart.scales.r.min)).toBe(227);
+ expect(chart.scales.r.getDistanceFromCenterForValue(chart.scales.r.min)).toBe(215);
expect(chart.scales.r.getDistanceFromCenterForValue(chart.scales.r.max)).toBe(0);
});
});
expect(chart.scales.r.getValueForDistanceFromCenter(0)).toBe(chart.scales.r.min);
- expect(chart.scales.r.getValueForDistanceFromCenter(227)).toBe(chart.scales.r.max);
+ expect(chart.scales.r.getValueForDistanceFromCenter(215)).toBe(chart.scales.r.max);
var dist = chart.scales.r.getDistanceFromCenterForValue(5);
expect(chart.scales.r.getValueForDistanceFromCenter(dist)).toBe(5);
chart.update();
expect(chart.scales.r.getValueForDistanceFromCenter(0)).toBe(chart.scales.r.max);
- expect(chart.scales.r.getValueForDistanceFromCenter(227)).toBe(chart.scales.r.min);
+ expect(chart.scales.r.getValueForDistanceFromCenter(215)).toBe(chart.scales.r.min);
});
it('should correctly get angles for all points', function() {
[{
startAngle: 30,
textAlign: ['right', 'right', 'left', 'left', 'left'],
- y: [82, 366, 506, 319, 53]
}, {
startAngle: -30,
textAlign: ['right', 'right', 'left', 'left', 'right'],
- y: [319, 506, 366, 82, 53]
}, {
startAngle: 750,
textAlign: ['right', 'right', 'left', 'left', 'left'],
- y: [82, 366, 506, 319, 53]
}].forEach(function(expected) {
scale.options.startAngle = expected.startAngle;
chart.update();
}).forEach(function(x, i) {
expect(x.args[0]).withContext('startAngle: ' + expected.startAngle + ', tick: ' + i).toBe(expected.textAlign[i]);
});
-
- scale.ctx.getCalls().filter(function(x) {
- return x.name === 'fillText';
- }).map(function(x, i) {
- expect(x.args[2]).toBeCloseToPixel(expected.y[i]);
- });
});
});
projects / thirdparty / Chart.js.git / commitdiff
