From 7ec99c38c1b41b16cf7cad433569af56c2544d63 Mon Sep 17 00:00:00 2001 From: Jukka Kurkela <jukka.kurkela@gmail.com> Date: Mon, 8 Mar 2021 20:36:54 +0200 Subject: [PATCH] Move startAngle to scale options (#8593) --- docs/docs/axes/radial/linear.mdx | 1 + docs/docs/charts/polar.mdx | 1 - docs/docs/getting-started/v3-migration.md | 1 + src/controllers/controller.polarArea.js | 11 +++-------- src/scales/scale.radialLinear.js | 9 ++++----- test/specs/controller.polarArea.tests.js | 6 +++++- test/specs/scale.radialLinear.tests.js | 8 +++++--- 7 files changed, 19 insertions(+), 18 deletions(-) diff --git a/docs/docs/axes/radial/linear.mdx b/docs/docs/axes/radial/linear.mdx index 47c57291f85..0dcd6caaada 100644 --- a/docs/docs/axes/radial/linear.mdx +++ b/docs/docs/axes/radial/linear.mdx @@ -21,6 +21,7 @@ Namespace: `options.scales[scaleId]` | `angleLines` | `object` | | Angle line configuration. [more...](#angle-line-options) | `beginAtZero` | `boolean` | `false` | if true, scale will include 0 if it is not already included. | `pointLabels` | `object` | | Point label configuration. [more...](#point-label-options) +| `startAngle` | `number` | `0` | Starting angle of the scale. In degrees, 0 is at top. <CommonAll /> diff --git a/docs/docs/charts/polar.mdx b/docs/docs/charts/polar.mdx index e1644fbd8e3..a640c882d73 100644 --- a/docs/docs/charts/polar.mdx +++ b/docs/docs/charts/polar.mdx @@ -112,7 +112,6 @@ These are the customisation options specific to Polar Area charts. These options | Name | Type | Default | Description | ---- | ---- | ------- | ----------- -| `startAngle` | `number` | `0` | Starting angle to draw arcs for the first item in a dataset. In degrees, 0 is at top. | `animation.animateRotate` | `boolean` | `true` | If true, the chart will animate in with a rotation animation. This property is in the `options.animation` object. | `animation.animateScale` | `boolean` | `true` | If true, will animate scaling the chart from the center outwards. diff --git a/docs/docs/getting-started/v3-migration.md b/docs/docs/getting-started/v3-migration.md index 8803957ad06..9068d9fe6e4 100644 --- a/docs/docs/getting-started/v3-migration.md +++ b/docs/docs/getting-started/v3-migration.md @@ -101,6 +101,7 @@ A number of changes were made to the configuration options passed to the `Chart` * `scales.[x/y]Axes.zeroLine*` options of axes were removed. Use scriptable scale options instead. * The dataset option `steppedLine` was removed. Use `stepped` * The chart option `showLines` was renamed to `showLine` to match the dataset option. +* The chart option `startAngle` was moved to `radial` scale options. * To override the platform class used in a chart instance, pass `platform: PlatformClass` in the config object. Note that the class should be passed, not an instance of the class. * `aspectRatio` defaults to 1 for doughnut, pie, polarArea, and radar charts * `TimeScale` does not read `t` from object data by default anymore. The default property is `x` or `y`, depending on the orientation. See [data structures](../general/data-structures.md) for details on how to change the default. diff --git a/src/controllers/controller.polarArea.js b/src/controllers/controller.polarArea.js index ec09716a830..408ca22aa44 100644 --- a/src/controllers/controller.polarArea.js +++ b/src/controllers/controller.polarArea.js @@ -1,12 +1,6 @@ import DatasetController from '../core/core.datasetController'; import {toRadians, PI} from '../helpers/index'; -function getStartAngleRadians(deg) { - // radialLinear scale draws angleLines using startAngle. 0 is expected to be at top. - // Here we adjust to standard unit circle used in drawing, where 0 is at right. - return toRadians(deg) - 0.5 * PI; -} - export default class PolarAreaController extends DatasetController { constructor(chart, datasetIndex) { @@ -51,7 +45,7 @@ export default class PolarAreaController extends DatasetController { const scale = me._cachedMeta.rScale; const centerX = scale.xCenter; const centerY = scale.yCenter; - const datasetStartAngle = getStartAngleRadians(opts.startAngle); + const datasetStartAngle = scale.getIndexAngle(0) - 0.5 * PI; let angle = datasetStartAngle; let i; @@ -198,7 +192,8 @@ PolarAreaController.overrides = { }, pointLabels: { display: false - } + }, + startAngle: 0 } } }; diff --git a/src/scales/scale.radialLinear.js b/src/scales/scale.radialLinear.js index 88034634e2f..cb1cdb63d8d 100644 --- a/src/scales/scale.radialLinear.js +++ b/src/scales/scale.radialLinear.js @@ -368,11 +368,8 @@ export default class RadialLinearScale extends LinearScaleBase { } getIndexAngle(index) { - const chart = this.chart; - const angleMultiplier = TAU / chart.data.labels.length; - const options = chart.options || {}; - const startAngle = options.startAngle || 0; - + const angleMultiplier = TAU / this.getLabels().length; + const startAngle = this.options.startAngle || 0; return _normalizeAngle(index * angleMultiplier + toRadians(startAngle)); } @@ -564,6 +561,8 @@ RadialLinearScale.defaults = { circular: false }, + startAngle: 0, + // label settings ticks: { // Boolean - Show a backdrop to the scale label diff --git a/test/specs/controller.polarArea.tests.js b/test/specs/controller.polarArea.tests.js index 46c9eb612b7..459d60e9696 100644 --- a/test/specs/controller.polarArea.tests.js +++ b/test/specs/controller.polarArea.tests.js @@ -160,7 +160,11 @@ describe('Chart.controllers.polarArea', function() { legend: false, title: false, }, - startAngle: 90, // default is 0 + scales: { + r: { + startAngle: 90, // default is 0 + } + }, elements: { arc: { backgroundColor: 'rgb(255, 0, 0)', diff --git a/test/specs/scale.radialLinear.tests.js b/test/specs/scale.radialLinear.tests.js index 955a0353a6d..68ed3224949 100644 --- a/test/specs/scale.radialLinear.tests.js +++ b/test/specs/scale.radialLinear.tests.js @@ -31,6 +31,8 @@ describe('Test the radial linear scale', function() { circular: false }, + startAngle: 0, + ticks: { color: Chart.defaults.color, showLabelBackdrop: true, @@ -500,6 +502,7 @@ describe('Test the radial linear scale', function() { options: { scales: { r: { + startAngle: 15, pointLabels: { callback: function(value, index) { return index.toString(); @@ -507,7 +510,6 @@ describe('Test the radial linear scale', function() { } } }, - startAngle: 15 } }); @@ -521,7 +523,7 @@ describe('Test the radial linear scale', function() { expect(radToNearestDegree(chart.scales.r.getIndexAngle(i))).toBe(15 + (slice * i)); } - chart.options.startAngle = 0; + chart.scales.r.options.startAngle = 0; chart.update(); for (var x = 0; x < 5; x++) { @@ -569,7 +571,7 @@ describe('Test the radial linear scale', function() { textAlign: ['right', 'right', 'left', 'left', 'left'], y: [82, 366, 506, 319, 53] }].forEach(function(expected) { - chart.options.startAngle = expected.startAngle; + scale.options.startAngle = expected.startAngle; chart.update(); scale.ctx = window.createMockContext();