Skip to content

Commit 1e81039

Browse files
etpinardetpinard
committed
large commit of attribute name & dflt changes
- radialaxis.position -> radialaxis.angle - angularaxis.position -> angularaxis.rotation - radialaxis.side ('left','right') -> ('counterclockwise', 'clockwise') - scatterpolar mode dflt -> same as scatter - scatterpolar cliponaxis dflt -> false (unlike other scatter-like traces)
1 parent 25b4e7b commit 1e81039

File tree

14 files changed

+96
-188
lines changed

14 files changed

+96
-188
lines changed

‎src/plots/polar/helpers.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ var Lib = require('../../lib');
1212

1313
exports.setConvertAngular = function setConvertAngular(ax) {
1414
var dir = {clockwise: -1, counterclockwise: 1}[ax.direction];
15-
var pos = Lib.deg2rad(ax.position);
15+
var rot = Lib.deg2rad(ax.rotation);
1616
var _c2rad;
1717
var _rad2c;
1818

@@ -45,11 +45,11 @@ exports.setConvertAngular = function setConvertAngular(ax) {
4545
};
4646
}
4747

48-
function transformRad(v) { return dir * v + pos; }
49-
function unTransformRad(v) { return (v - pos) / dir; }
48+
function transformRad(v) { return dir * v + rot; }
49+
function unTransformRad(v) { return (v - rot) / dir; }
5050

5151
// use the shift 'sector' to get right tick labels for non-default
52-
// angularaxis 'position' and/or 'direction'
52+
// angularaxis 'rotation' and/or 'direction'
5353
ax.unTransformRad = unTransformRad;
5454

5555
// this version is used on hover

‎src/plots/polar/layout_attributes.js‎

Lines changed: 21 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -23,22 +23,19 @@ var axisLineGridAttr = overrideAll({
2323
gridcolor: axesAttrs.gridcolor,
2424
gridwidth: axesAttrs.gridwidth
2525

26+
// TODO add spike* attributes down the road
27+
2628
// should we add zeroline* attributes?
27-
// might be useful on radial axes where range is negative and positive
2829

29-
// we could add spike* attributes down the road
3030
}, 'plot', 'from-root');
3131

32-
var axisTickAttr = overrideAll({
32+
var axisTickAttrs = overrideAll({
3333
tickmode: axesAttrs.tickmode,
3434
nticks: axesAttrs.nticks,
3535
tick0: axesAttrs.tick0,
3636
dtick: axesAttrs.dtick,
3737
tickvals: axesAttrs.tickvals,
3838
ticktext: axesAttrs.ticktext,
39-
// TODO does not need 'inside' / 'outside' for radialaxis
40-
// or maybe cut 'side' and have
41-
// radialaxis.ticks: 'counterclockwise', 'clockwise', 'center', ''
4239
ticks: axesAttrs.ticks,
4340
ticklen: axesAttrs.ticklen,
4441
tickwidth: axesAttrs.tickwidth,
@@ -62,11 +59,6 @@ var radialAxisAttrs = {
6259
visible: extendFlat({}, axesAttrs.visible, {dflt: true}),
6360
type: axesAttrs.type,
6461

65-
// You thought maybe that range should only be a 'max' instead
66-
// as it always starts at 0? But, looks like off-zero cutout polar chart are
67-
// a thing:
68-
// -> mpl allow radial ranges to start off 0
69-
// -> same for matlab: https://www.mathworks.com/help/matlab/ref/rlim.html
7062
autorange: axesAttrs.autorange,
7163
rangemode: {
7264
valType: 'enumerated',
@@ -88,13 +80,7 @@ var radialAxisAttrs = {
8880
categoryorder: axesAttrs.categoryorder,
8981
categoryarray: axesAttrs.categoryarray,
9082

91-
// position (name analogous to xaxis.position),
92-
// or maybe something more specific e.g. angle angleoffset?
93-
//
94-
// (should this support any data coordinate system?)
95-
// I think it is more intuitive to set this as just an angle!
96-
// Thoughts?
97-
position: {
83+
angle: {
9884
valType: 'angle',
9985
editType: 'plot',
10086
role: 'info',
@@ -108,9 +94,9 @@ var radialAxisAttrs = {
10894

10995
side: {
11096
valType: 'enumerated',
111-
// maybe 'clockwise' and 'counterclockwise' would be best here
112-
values: ['left', 'right'],
113-
dflt: 'right',
97+
// TODO add 'center' for `showline: false` radial axes
98+
values: ['clockwise', 'counterclockwise'],
99+
dflt: 'clockwise',
114100
editType: 'plot',
115101
role: 'info',
116102
description: [
@@ -119,6 +105,7 @@ var radialAxisAttrs = {
119105
].join(' ')
120106
},
121107

108+
122109
title: extendFlat({}, axesAttrs.title, {editType: 'plot', dflt: ''}),
123110
titlefont: overrideAll(axesAttrs.titlefont, 'plot', 'from-root'),
124111
// might need a 'titleside' and even 'titledirection' down the road
@@ -146,10 +133,10 @@ var radialAxisAttrs = {
146133
extendFlat(
147134
radialAxisAttrs,
148135

149-
// N.B. the radialaxis grid lines are circular,
136+
// N.B. radialaxis grid lines are circular,
150137
// but radialaxis lines are straight from circle center to outer bound
151138
axisLineGridAttr,
152-
axisTickAttr
139+
axisTickAttrs
153140
);
154141

155142
var angularAxisAttrs = {
@@ -168,8 +155,8 @@ var angularAxisAttrs = {
168155
description: [
169156
'Sets the angular axis type.',
170157
'If *linear*, set `thetaunit` to determine the unit in which axis value are shown.',
171-
'If *date*, set `period` to determine the wrap around period.',
172-
'If *category, set `period` to determine the number of integer coordinates around polar axis.'
158+
'If *date*, use `period` to set the unit of time that determines a complete rotation',
159+
'If *category, use `period` to set the number of integer coordinates around polar axis.'
173160
].join(' ')
174161
},
175162

@@ -213,7 +200,7 @@ var angularAxisAttrs = {
213200
direction: {
214201
valType: 'enumerated',
215202
values: ['counterclockwise', 'clockwise'],
216-
// we could make the default 'clockwise' for date axes ...
203+
// we could make the default 'clockwise' for category and date angular axes
217204
dflt: 'counterclockwise',
218205
role: 'info',
219206
editType: 'calc',
@@ -222,14 +209,9 @@ var angularAxisAttrs = {
222209
].join(' ')
223210
},
224211

225-
// matlab uses thetaZeroLocation: 'North', 'West', 'East', 'South'
226-
// mpl uses set_theta_zero_location('W', offset=10)
227-
//
228-
// position is analogous to yaxis.position, but as an angle (going
229-
// counterclockwise about cartesian y=0.
230-
position: {
212+
rotation: {
231213
valType: 'angle',
232-
// we could maybe make `position: 90` by default for category and date angular axes.
214+
// we could maybe make `rotation: 90` by default for category and date angular axes
233215
dflt: 0,
234216
editType: 'calc',
235217
role: 'info',
@@ -238,7 +220,7 @@ var angularAxisAttrs = {
238220
'Note that by default, polar subplots are orientation such that the theta=0',
239221
'corresponds to a line pointing right (like what mathematicians prefer).',
240222
'For example to make the angular axis start from the North (like on a compass),',
241-
'set `angularaxis.position` to *90*.'
223+
'set `angularaxis.rotation` to *90*.'
242224
].join(' ')
243225
},
244226

@@ -250,39 +232,25 @@ var angularAxisAttrs = {
250232
extendFlat(
251233
angularAxisAttrs,
252234

253-
// N.B. the angular grid lines are straight lines from circle center to outer bound
235+
// N.B. angular grid lines are straight lines from circle center to outer bound
254236
// the angular line is circular bounding the polar plot area.
255237
axisLineGridAttr,
256-
// Note that ticksuffix defaults to '°' for angular axes with `thetaunit: 'degrees'`
257-
axisTickAttr
238+
239+
// N.B. ticksuffix defaults to '°' for angular axes with `thetaunit: 'degrees'`
240+
axisTickAttrs
258241
);
259242

260243
module.exports = {
261-
// AJ and I first thought about a x/y/zoom system for paper-based zooming
262-
// but I came to think that sector span + radial axis range
263-
// zooming will be better
264-
//
265-
// TODO confirm with team.
244+
// TODO for x/y/zoom system for paper-based zooming:
266245
// x: {},
267246
// y: {},
268247
// zoom: {},
269248

270249
domain: domainAttrs({name: 'polar', editType: 'plot'}),
271250

272-
// Maybe this should angularaxis.range correspond to
273-
// angular span of the drawing area?
274-
//
275-
// matlab's angular equivalent to 'range' bounds the drawing area
276-
// (partial circles as they call it)
277-
// https://www.mathworks.com/help/matlab/ref/thetalim.html
278-
//
279-
// as this attribute would be best set in (absolute) angles,
280-
// I think this should be set outside of angularaxis e.g
281-
// as polar.sector: [0, 180]
282251
sector: {
283252
valType: 'info_array',
284253
items: [
285-
// or be more strict -> `valType: 'angle' with `dflt: [0, 360]`
286254
{valType: 'number', editType: 'plot'},
287255
{valType: 'number', editType: 'plot'}
288256
],

‎src/plots/polar/layout_defaults.js‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,6 @@ function handleDefaults(contIn, contOut, coerce, opts) {
3232
var bgColor = coerce('bgcolor');
3333
opts.bgColor = Color.combine(bgColor, opts.paper_bgcolor);
3434

35-
// TODO sanitize sector similar to 'range'
3635
var sector = coerce('sector');
3736

3837
// could optimize, subplotData is not always needed!
@@ -102,7 +101,7 @@ function handleDefaults(contIn, contOut, coerce, opts) {
102101

103102
if(visible) {
104103
coerceAxis('side');
105-
coerceAxis('position', sector[0]);
104+
coerceAxis('angle', sector[0]);
106105

107106
coerceAxis('title');
108107
Lib.coerceFont(coerceAxis, 'titlefont', {
@@ -120,11 +119,10 @@ function handleDefaults(contIn, contOut, coerce, opts) {
120119
coerceAxis('period');
121120
}
122121

123-
// TODO maybe non-linear axis
124-
// should get direction: 'clockwise' + position: 90
125-
// by default??
122+
// TODO maybe by default: non-linear axis
123+
// should get direction: 'clockwise' + rotation: 90
126124
coerceAxis('direction');
127-
coerceAxis('position');
125+
coerceAxis('rotation');
128126

129127
setConvertAngular(axOut);
130128
break;

‎src/plots/polar/polar.js‎

Lines changed: 24 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -267,8 +267,8 @@ proto.updateRadialAxis = function(fullLayout, polarLayout) {
267267
_id: 'x',
268268
_pos: 0,
269269

270-
// radialaxis uses 'top'/'bottom' -> convert to 'x' axis equivalent
271-
side: {left: 'top', right: 'bottom'}[radialLayout.side],
270+
// convert to 'x' axis equivalent
271+
side: {counterclockwise: 'top', clockwise: 'bottom'}[radialLayout.side],
272272

273273
// spans length 1 radius
274274
domain: [0, radius / gs.w],
@@ -313,7 +313,7 @@ proto.updateRadialAxis = function(fullLayout, polarLayout) {
313313
Axes.doTicks(gd, ax, true);
314314

315315
updateElement(layers['radial-axis'], radialLayout.showticklabels || radialLayout.ticks, {
316-
transform: strTranslate(cx, cy) + strRotate(-radialLayout.position)
316+
transform: strTranslate(cx, cy) + strRotate(-radialLayout.angle)
317317
});
318318

319319
// move all grid paths to about circle center,
@@ -328,7 +328,7 @@ proto.updateRadialAxis = function(fullLayout, polarLayout) {
328328
y1: 0,
329329
x2: radius,
330330
y2: 0,
331-
transform: strTranslate(cx, cy) + strRotate(-radialLayout.position)
331+
transform: strTranslate(cx, cy) + strRotate(-radialLayout.angle)
332332
})
333333
.attr('stroke-width', radialLayout.linewidth)
334334
.call(Color.stroke, radialLayout.linecolor);
@@ -343,7 +343,7 @@ proto.updateRadialAxisTitle = function(fullLayout, polarLayout, _angle) {
343343
var radialLayout = polarLayout.radialaxis;
344344
var titleClass = _this.id + 'title';
345345

346-
var angle = _angle !== undefined ? _angle : radialLayout.position;
346+
var angle = _angle !== undefined ? _angle : radialLayout.angle;
347347
var angleRad = deg2rad(angle);
348348
var cosa = Math.cos(angleRad);
349349
var sina = Math.sin(angleRad);
@@ -352,7 +352,7 @@ proto.updateRadialAxisTitle = function(fullLayout, polarLayout, _angle) {
352352
if(radialLayout.title) {
353353
var h = Drawing.bBox(_this.layers['radial-axis'].node()).height;
354354
var ts = radialLayout.titlefont.size;
355-
pad = radialLayout.side === 'left' ?
355+
pad = radialLayout.side === 'counterclockwise' ?
356356
-h - ts * 0.4 :
357357
h + ts * 0.8;
358358
}
@@ -381,8 +381,8 @@ proto.updateAngularAxis = function(fullLayout, polarLayout) {
381381
var sector = polarLayout.sector;
382382
var sectorInRad = sector.map(deg2rad);
383383

384-
if(!('angularaxis.position' in _this.viewInitial)) {
385-
_this.viewInitial['angularaxis.position'] = angularLayout.position;
384+
if(!('angularaxis.rotation' in _this.viewInitial)) {
385+
_this.viewInitial['angularaxis.rotation'] = angularLayout.rotation;
386386
}
387387

388388
var ax = _this.angularAxis = Lib.extendFlat({}, angularLayout, {
@@ -406,7 +406,7 @@ proto.updateAngularAxis = function(fullLayout, polarLayout) {
406406
});
407407

408408
// Set the angular range in degrees to make auto-tick computation cleaner,
409-
// changing position/direction should not affect the angular tick labels.
409+
// changing rotation/direction should not affect the angular tick labels.
410410
if(ax.type === 'linear') {
411411
ax.autorange = false;
412412

@@ -572,8 +572,8 @@ proto.updateMainDrag = function(fullLayout, polarLayout) {
572572
var path0, dimmed, lum;
573573
// zoombox, corners elements
574574
var zb, corners;
575-
// angular axis angle offset at drag start (0), move (1)
576-
var angle0, angle1;
575+
// angular axis angle rotation at drag start (0), move (1)
576+
var rot0, rot1;
577577
// copy of polar sector value at drag start
578578
var sector0;
579579
// angle about circle center at drag start
@@ -692,28 +692,27 @@ proto.updateMainDrag = function(fullLayout, polarLayout) {
692692

693693
function panPrep() {
694694
sector0 = fullLayout[_this.id].sector.slice();
695-
angle0 = fullLayout[_this.id].angularaxis.position;
695+
rot0 = fullLayout[_this.id].angularaxis.rotation;
696696
a0 = xy2a(x0, y0);
697697
}
698698

699699
function panMove(dx, dy) {
700700
var x1 = x0 + dx;
701701
var y1 = y0 + dy;
702702
var a1 = xy2a(x1, y1);
703-
var dangle = rad2deg(a1 - a0);
704-
705-
angle1 = angle0 + dangle;
703+
var da = rad2deg(a1 - a0);
704+
rot1 = rot0 + da;
706705

707706
layers.frontplot.attr('transform',
708-
strTranslate(xOffset2, yOffset2) + strRotate([-dangle, cxx, cyy])
707+
strTranslate(xOffset2, yOffset2) + strRotate([-da, cxx, cyy])
709708
);
710709

711710
_this.clipPaths.circle.select('circle').attr('transform',
712-
strTranslate(cxx, cyy) + strRotate(dangle)
711+
strTranslate(cxx, cyy) + strRotate(da)
713712
);
714713

715714
var angularAxis = _this.angularAxis;
716-
angularAxis.position = wrap180(angle1);
715+
angularAxis.rotation = wrap180(rot1);
717716

718717
if(angularAxis.type === 'linear' && !isFullCircle(sector)) {
719718
angularAxis.range = sector0
@@ -727,7 +726,7 @@ proto.updateMainDrag = function(fullLayout, polarLayout) {
727726

728727
if(_this._hasClipOnAxisFalse && !isFullCircle(sector)) {
729728
// mutate sector to trick isPtWithinSector
730-
_this.sector = [sector0[0] - dangle, sector0[1] - dangle];
729+
_this.sector = [sector0[0] - da, sector0[1] - da];
731730

732731
layers.frontplot
733732
.select('.scatterlayer').selectAll('.trace')
@@ -749,7 +748,7 @@ proto.updateMainDrag = function(fullLayout, polarLayout) {
749748
function panDone(dragged, numClicks) {
750749
if(dragged) {
751750
var updateObj = {};
752-
updateObj[_this.id + '.angularaxis.position'] = angle1;
751+
updateObj[_this.id + '.angularaxis.rotation'] = rot1;
753752
Plotly.relayout(gd, updateObj);
754753
} else if(numClicks === 2) {
755754
doubleClick();
@@ -828,7 +827,7 @@ proto.updateRadialDrag = function(fullLayout, polarLayout) {
828827
var cy = _this.cy;
829828
var radialAxis = _this.radialAxis;
830829
var radialLayout = polarLayout.radialaxis;
831-
var angle0 = deg2rad(radialLayout.position);
830+
var angle0 = deg2rad(radialLayout.angle);
832831
var range0 = radialAxis.range.slice();
833832
var drange = range0[1] - range0[0];
834833

@@ -866,7 +865,7 @@ proto.updateRadialDrag = function(fullLayout, polarLayout) {
866865

867866
function doneFn() {
868867
if(angle1 !== null) {
869-
Plotly.relayout(gd, _this.id + '.radialaxis.position', angle1);
868+
Plotly.relayout(gd, _this.id + '.radialaxis.angle', angle1);
870869
} else if(rng1 !== null) {
871870
Plotly.relayout(gd, _this.id + '.radialaxis.range[1]', rng1);
872871
}
@@ -988,7 +987,9 @@ function setScale(ax, axLayout, fullLayout) {
988987
}
989988

990989
function strTickLayout(axLayout) {
991-
return axLayout.ticks + String(axLayout.ticklen) + String(axLayout.showticklabels);
990+
var out = axLayout.ticks + String(axLayout.ticklen) + String(axLayout.showticklabels);
991+
if('side' in axLayout) out += axLayout.side;
992+
return out;
992993
}
993994

994995
// Finds the bounding box of a given circle sector,

0 commit comments

Comments
 (0)