categoryshapeshiftstart and categoryshapeshiftend properties for category axes - #7010

Closed
my-tien wants to merge 3 commits into
plotly:masterfrom
my-tien:categoryshapeshift
Closed

categoryshapeshiftstart and categoryshapeshiftend properties for category axes#7010
my-tien wants to merge 3 commits into
plotly:masterfrom
my-tien:categoryshapeshift

Conversation

@my-tien

@my-tienmy-tien commented Jun 3, 2024

Copy link
Copy Markdown
Contributor

This is an alternative to PR #7005 for adjusting shapes' start and end coordinates (no selection yet)

Introduces categoryshapeshiftstart (influences x0 or y0) and categoryshapeshiftend (influences x1 or y1) for category axes.

image

image

Disclaimer I am required to add that…

the software is provided "as is", without warranty of any kind, express or implied, including but not limited to the warranties of merchantability, fitness for a particular purpose and noninfringement. in no event shall the authors or copyright holders be liable for any claim, damages or other liability, whether in an action of contract, tort or otherwise, arising from, out of or in connection with the software or the use or other dealings in the software.

my-tien added 2 commits June 3, 2024 17:43
read xsizemode for horizontal axes and ysizemode for vertical axes.

function shapeBounds(ax, v0, v1, path, paramsToUse) {
var convertVal = (ax.type === 'category' || ax.type === 'multicategory') ? ax.r2c : ax.d2c;
function shapeBounds(ax, shape, paramsToUse, isVerticalAxis) {

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's drop the isVerticalAxis argument and instead use the ax._id.

 var isY = axi._id.charAt(0) === 'y';

ax = Axes.getFromId(gd, shape.xref);

bounds = shapeBounds(ax, vx0, vx1, shape.path, constants.paramIsX);
bounds = shapeBounds(ax, shape, constants.paramIsX, false);

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

After considering https://github.com/plotly/plotly.js/pull/7010/files#r1626065612

Suggested change
bounds=shapeBounds(ax,shape,constants.paramIsX,false);
bounds=shapeBounds(ax,shape,constants.paramIsX);

ax = Axes.getFromId(gd, shape.yref);

bounds = shapeBounds(ax, vy0, vy1, shape.path, constants.paramIsY);
bounds = shapeBounds(ax, shape, constants.paramIsY, true);

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

After considering https://github.com/plotly/plotly.js/pull/7010/files#r1626065612

Suggested change
bounds=shapeBounds(ax,shape,constants.paramIsY,true);
bounds=shapeBounds(ax,shape,constants.paramIsY);

valType: 'number',
dflt: 0,
min: -0.5,
max: 0.5,

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Perhaps increasing the range of min and max a bit could be useful to highlight points for cases e.g. histogram and bars with tiny gaps.
I suggest we allow values between -0.7 and 0.7 or maybe even -1 and 1?

"x0": 0,
"x1": 0.25,
"xref": "x3 domain"
}

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's also test these case using circle.
Thank you!

@archmojarchmoj added feature something new community community contribution status: reviewable labels Jun 4, 2024
description: [
'Only relevant if axis is a (multi-)category axes. Shifts x0/y0 by a fraction of the',
'reference unit.'
]

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
]
].join(' ')

description: [
'Only relevant if axis is a (multi-)category axes. Shifts x1/y1 by a fraction of the',
'reference unit.'
]

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
]
].join(' ')

@archmoj

Copy link
Copy Markdown
Contributor

@alexcjohnson

Copy link
Copy Markdown
Collaborator

To me it feels a little limiting to put these attributes on the axes rather than in each shape. What if you want a rectangle outlining one bar (or bar group), a line going from the middle of one category to the middle of another, and a circle around a single scatter point?

The name is also awfully long. What about just x0shift?

@archmoj

archmoj commented Jun 4, 2024

Copy link
Copy Markdown
Contributor

To me it feels a little limiting to put these attributes on the axes rather than in each shape. What if you want a rectangle outlining one bar (or bar group), a line going from the middle of one category to the middle of another, and a circle around a single scatter point?

The name is also awfully long. What about just x0shift?

@alexcjohnson
Good call.
I agree with you.
Considering your comment on the other PR https://github.com/plotly/plotly.js/pull/7005/files#r1623049565
it looks like we could/should modify #7005 to have x0shift and x1shift instead of xshift.
So I change the status of this PR to on hold.

@archmoj

Copy link
Copy Markdown
Contributor

Closing in favor of #7005.

@archmojarchmoj closed this Jun 6, 2024
@my-tien
my-tien deleted the categoryshapeshift branch June 19, 2024 15:12
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

communitycommunity contributionfeaturesomething new

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants

@my-tien@archmoj@alexcjohnson
, 'i'); if (__m === '*' || __re.test(location.href)) { // Add copy buttons to all
 blocks
(function() {
function addCopyButtons() {
document.querySelectorAll('pre code').forEach(function(codeBlock) {
if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;
codeBlock.parentElement.setAttribute('data-copy-added', 'true');
var btn = document.createElement('button');
btn.textContent = 'Copy';
btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';
btn.onmouseover = function() { this.style.opacity = '1'; };
btn.onmouseout = function() { this.style.opacity = '0.7'; };
btn.onclick = function() {
navigator.clipboard.writeText(codeBlock.textContent).then(function() {
btn.textContent = 'Copied!';
setTimeout(function() { btn.textContent = 'Copy'; }, 1500);
});
};
codeBlock.parentElement.style.position = 'relative';
codeBlock.parentElement.appendChild(btn);
});
}
addCopyButtons();
// Re-run on dynamic content
var observer = new MutationObserver(addCopyButtons);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '
Skip to content

categoryshapeshiftstart and categoryshapeshiftend properties for category axes - #7010

Closed
my-tien wants to merge 3 commits into
plotly:masterfrom
my-tien:categoryshapeshift
Closed

categoryshapeshiftstart and categoryshapeshiftend properties for category axes#7010
my-tien wants to merge 3 commits into
plotly:masterfrom
my-tien:categoryshapeshift

Conversation

@my-tien

@my-tienmy-tien commented Jun 3, 2024

Copy link
Copy Markdown
Contributor

This is an alternative to PR #7005 for adjusting shapes' start and end coordinates (no selection yet)

Introduces categoryshapeshiftstart (influences x0 or y0) and categoryshapeshiftend (influences x1 or y1) for category axes.

image

image

Disclaimer I am required to add that…

the software is provided "as is", without warranty of any kind, express or implied, including but not limited to the warranties of merchantability, fitness for a particular purpose and noninfringement. in no event shall the authors or copyright holders be liable for any claim, damages or other liability, whether in an action of contract, tort or otherwise, arising from, out of or in connection with the software or the use or other dealings in the software.

my-tien added 2 commits June 3, 2024 17:43
read xsizemode for horizontal axes and ysizemode for vertical axes.

function shapeBounds(ax, v0, v1, path, paramsToUse) {
var convertVal = (ax.type === 'category' || ax.type === 'multicategory') ? ax.r2c : ax.d2c;
function shapeBounds(ax, shape, paramsToUse, isVerticalAxis) {

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's drop the isVerticalAxis argument and instead use the ax._id.

 var isY = axi._id.charAt(0) === 'y';

ax = Axes.getFromId(gd, shape.xref);

bounds = shapeBounds(ax, vx0, vx1, shape.path, constants.paramIsX);
bounds = shapeBounds(ax, shape, constants.paramIsX, false);

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

After considering https://github.com/plotly/plotly.js/pull/7010/files#r1626065612

Suggested change
bounds=shapeBounds(ax,shape,constants.paramIsX,false);
bounds=shapeBounds(ax,shape,constants.paramIsX);

ax = Axes.getFromId(gd, shape.yref);

bounds = shapeBounds(ax, vy0, vy1, shape.path, constants.paramIsY);
bounds = shapeBounds(ax, shape, constants.paramIsY, true);

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

After considering https://github.com/plotly/plotly.js/pull/7010/files#r1626065612

Suggested change
bounds=shapeBounds(ax,shape,constants.paramIsY,true);
bounds=shapeBounds(ax,shape,constants.paramIsY);

valType: 'number',
dflt: 0,
min: -0.5,
max: 0.5,

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Perhaps increasing the range of min and max a bit could be useful to highlight points for cases e.g. histogram and bars with tiny gaps.
I suggest we allow values between -0.7 and 0.7 or maybe even -1 and 1?

"x0": 0,
"x1": 0.25,
"xref": "x3 domain"
}

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's also test these case using circle.
Thank you!

@archmojarchmoj added feature something new community community contribution status: reviewable labels Jun 4, 2024
description: [
'Only relevant if axis is a (multi-)category axes. Shifts x0/y0 by a fraction of the',
'reference unit.'
]

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
]
].join(' ')

description: [
'Only relevant if axis is a (multi-)category axes. Shifts x1/y1 by a fraction of the',
'reference unit.'
]

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
]
].join(' ')

@archmoj

Copy link
Copy Markdown
Contributor

@alexcjohnson

Copy link
Copy Markdown
Collaborator

To me it feels a little limiting to put these attributes on the axes rather than in each shape. What if you want a rectangle outlining one bar (or bar group), a line going from the middle of one category to the middle of another, and a circle around a single scatter point?

The name is also awfully long. What about just x0shift?

@archmoj

archmoj commented Jun 4, 2024

Copy link
Copy Markdown
Contributor

To me it feels a little limiting to put these attributes on the axes rather than in each shape. What if you want a rectangle outlining one bar (or bar group), a line going from the middle of one category to the middle of another, and a circle around a single scatter point?

The name is also awfully long. What about just x0shift?

@alexcjohnson
Good call.
I agree with you.
Considering your comment on the other PR https://github.com/plotly/plotly.js/pull/7005/files#r1623049565
it looks like we could/should modify #7005 to have x0shift and x1shift instead of xshift.
So I change the status of this PR to on hold.

@archmoj

Copy link
Copy Markdown
Contributor

Closing in favor of #7005.

@archmojarchmoj closed this Jun 6, 2024
@my-tien
my-tien deleted the categoryshapeshift branch June 19, 2024 15:12
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

communitycommunity contributionfeaturesomething new

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants

@my-tien@archmoj@alexcjohnson
, 'i'); if (__m === '*' || __re.test(location.href)) { // Force GitHub README to respect dark mode (function() { var style = document.createElement('style'); style.textContent = ' .markdown-body { color-scheme: dark light; } .markdown-body pre { background: #161b22 !important; } .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; } .markdown-body table th, .markdown-body table td { border-color: #30363d !important; } .markdown-body img { background: #0d1117; } .markdown-body blockquote { border-left-color: #8b949e; } .markdown-body hr { border-color: #30363d; } '; document.head.appendChild(style); })(); } } catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

categoryshapeshiftstart and categoryshapeshiftend properties for category axes - #7010

Closed
my-tien wants to merge 3 commits into
plotly:masterfrom
my-tien:categoryshapeshift
Closed

categoryshapeshiftstart and categoryshapeshiftend properties for category axes#7010
my-tien wants to merge 3 commits into
plotly:masterfrom
my-tien:categoryshapeshift

Conversation

@my-tien

@my-tienmy-tien commented Jun 3, 2024

Copy link
Copy Markdown
Contributor

This is an alternative to PR #7005 for adjusting shapes' start and end coordinates (no selection yet)

Introduces categoryshapeshiftstart (influences x0 or y0) and categoryshapeshiftend (influences x1 or y1) for category axes.

image

image

Disclaimer I am required to add that…

the software is provided "as is", without warranty of any kind, express or implied, including but not limited to the warranties of merchantability, fitness for a particular purpose and noninfringement. in no event shall the authors or copyright holders be liable for any claim, damages or other liability, whether in an action of contract, tort or otherwise, arising from, out of or in connection with the software or the use or other dealings in the software.

my-tien added 2 commits June 3, 2024 17:43
read xsizemode for horizontal axes and ysizemode for vertical axes.

function shapeBounds(ax, v0, v1, path, paramsToUse) {
var convertVal = (ax.type === 'category' || ax.type === 'multicategory') ? ax.r2c : ax.d2c;
function shapeBounds(ax, shape, paramsToUse, isVerticalAxis) {

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's drop the isVerticalAxis argument and instead use the ax._id.

 var isY = axi._id.charAt(0) === 'y';

ax = Axes.getFromId(gd, shape.xref);

bounds = shapeBounds(ax, vx0, vx1, shape.path, constants.paramIsX);
bounds = shapeBounds(ax, shape, constants.paramIsX, false);

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

After considering https://github.com/plotly/plotly.js/pull/7010/files#r1626065612

Suggested change
bounds=shapeBounds(ax,shape,constants.paramIsX,false);
bounds=shapeBounds(ax,shape,constants.paramIsX);

ax = Axes.getFromId(gd, shape.yref);

bounds = shapeBounds(ax, vy0, vy1, shape.path, constants.paramIsY);
bounds = shapeBounds(ax, shape, constants.paramIsY, true);

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

After considering https://github.com/plotly/plotly.js/pull/7010/files#r1626065612

Suggested change
bounds=shapeBounds(ax,shape,constants.paramIsY,true);
bounds=shapeBounds(ax,shape,constants.paramIsY);

valType: 'number',
dflt: 0,
min: -0.5,
max: 0.5,

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Perhaps increasing the range of min and max a bit could be useful to highlight points for cases e.g. histogram and bars with tiny gaps.
I suggest we allow values between -0.7 and 0.7 or maybe even -1 and 1?

"x0": 0,
"x1": 0.25,
"xref": "x3 domain"
}

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's also test these case using circle.
Thank you!

@archmojarchmoj added feature something new community community contribution status: reviewable labels Jun 4, 2024
description: [
'Only relevant if axis is a (multi-)category axes. Shifts x0/y0 by a fraction of the',
'reference unit.'
]

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
]
].join(' ')

description: [
'Only relevant if axis is a (multi-)category axes. Shifts x1/y1 by a fraction of the',
'reference unit.'
]

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
]
].join(' ')

@archmoj

Copy link
Copy Markdown
Contributor

@alexcjohnson

Copy link
Copy Markdown
Collaborator

To me it feels a little limiting to put these attributes on the axes rather than in each shape. What if you want a rectangle outlining one bar (or bar group), a line going from the middle of one category to the middle of another, and a circle around a single scatter point?

The name is also awfully long. What about just x0shift?

@archmoj

archmoj commented Jun 4, 2024

Copy link
Copy Markdown
Contributor

To me it feels a little limiting to put these attributes on the axes rather than in each shape. What if you want a rectangle outlining one bar (or bar group), a line going from the middle of one category to the middle of another, and a circle around a single scatter point?

The name is also awfully long. What about just x0shift?

@alexcjohnson
Good call.
I agree with you.
Considering your comment on the other PR https://github.com/plotly/plotly.js/pull/7005/files#r1623049565
it looks like we could/should modify #7005 to have x0shift and x1shift instead of xshift.
So I change the status of this PR to on hold.

@archmoj

Copy link
Copy Markdown
Contributor

Closing in favor of #7005.

@archmojarchmoj closed this Jun 6, 2024
@my-tien
my-tien deleted the categoryshapeshift branch June 19, 2024 15:12
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

communitycommunity contributionfeaturesomething new

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants

@my-tien@archmoj@alexcjohnson
, 'i'); if (__m === '*' || __re.test(location.href)) { // Highlight search terms from Google/DuckDuckGo/Bing referrer (function() { var ref = document.referrer; var terms = []; if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) { var url = new URL(ref); var q = url.searchParams.get('q') || url.searchParams.get('p'); if (q) { terms = q.split(/\s+/).filter(function(t) { return t.length > 2; }); } } if (terms.length === 0) return; var style = document.createElement('style'); style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }'; document.head.appendChild(style); function highlight(node) { if (node.nodeType === 3) { // text node var text = node.textContent; var found = false; terms.forEach(function(term) { var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\]\\]/g, '\\') + ')', 'gi'); if (regex.test(text)) { found = true; var frag = document.createDocumentFragment(); var parts = text.split(regex); parts.forEach(function(part, i) { if (i % 2 === 0) { frag.appendChild(document.createTextNode(part)); } else { var span = document.createElement('span'); span.className = 'userscript-highlight'; span.textContent = part; frag.appendChild(span); } }); node.parentNode.replaceChild(frag, node); } }); } else if (node.nodeType === 1 && node.childNodes) { // element var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT']; if (!skipTags.includes(node.tagName)) { Array.from(node.childNodes).forEach(highlight); } } } highlight(document.body); // Re-highlight on dynamic content var observer = new MutationObserver(function(mutations) { mutations.forEach(function(m) { m.addedNodes.forEach(function(node) { if (node.nodeType === 1 || node.nodeType === 3) highlight(node); }); }); }); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

categoryshapeshiftstart and categoryshapeshiftend properties for category axes - #7010

Closed
my-tien wants to merge 3 commits into
plotly:masterfrom
my-tien:categoryshapeshift
Closed

categoryshapeshiftstart and categoryshapeshiftend properties for category axes#7010
my-tien wants to merge 3 commits into
plotly:masterfrom
my-tien:categoryshapeshift

Conversation

@my-tien

@my-tienmy-tien commented Jun 3, 2024

Copy link
Copy Markdown
Contributor

This is an alternative to PR #7005 for adjusting shapes' start and end coordinates (no selection yet)

Introduces categoryshapeshiftstart (influences x0 or y0) and categoryshapeshiftend (influences x1 or y1) for category axes.

image

image

Disclaimer I am required to add that…

the software is provided "as is", without warranty of any kind, express or implied, including but not limited to the warranties of merchantability, fitness for a particular purpose and noninfringement. in no event shall the authors or copyright holders be liable for any claim, damages or other liability, whether in an action of contract, tort or otherwise, arising from, out of or in connection with the software or the use or other dealings in the software.

my-tien added 2 commits June 3, 2024 17:43
read xsizemode for horizontal axes and ysizemode for vertical axes.

function shapeBounds(ax, v0, v1, path, paramsToUse) {
var convertVal = (ax.type === 'category' || ax.type === 'multicategory') ? ax.r2c : ax.d2c;
function shapeBounds(ax, shape, paramsToUse, isVerticalAxis) {

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's drop the isVerticalAxis argument and instead use the ax._id.

 var isY = axi._id.charAt(0) === 'y';

ax = Axes.getFromId(gd, shape.xref);

bounds = shapeBounds(ax, vx0, vx1, shape.path, constants.paramIsX);
bounds = shapeBounds(ax, shape, constants.paramIsX, false);

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

After considering https://github.com/plotly/plotly.js/pull/7010/files#r1626065612

Suggested change
bounds=shapeBounds(ax,shape,constants.paramIsX,false);
bounds=shapeBounds(ax,shape,constants.paramIsX);

ax = Axes.getFromId(gd, shape.yref);

bounds = shapeBounds(ax, vy0, vy1, shape.path, constants.paramIsY);
bounds = shapeBounds(ax, shape, constants.paramIsY, true);

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

After considering https://github.com/plotly/plotly.js/pull/7010/files#r1626065612

Suggested change
bounds=shapeBounds(ax,shape,constants.paramIsY,true);
bounds=shapeBounds(ax,shape,constants.paramIsY);

valType: 'number',
dflt: 0,
min: -0.5,
max: 0.5,

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Perhaps increasing the range of min and max a bit could be useful to highlight points for cases e.g. histogram and bars with tiny gaps.
I suggest we allow values between -0.7 and 0.7 or maybe even -1 and 1?

"x0": 0,
"x1": 0.25,
"xref": "x3 domain"
}

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's also test these case using circle.
Thank you!

@archmojarchmoj added feature something new community community contribution status: reviewable labels Jun 4, 2024
description: [
'Only relevant if axis is a (multi-)category axes. Shifts x0/y0 by a fraction of the',
'reference unit.'
]

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
]
].join(' ')

description: [
'Only relevant if axis is a (multi-)category axes. Shifts x1/y1 by a fraction of the',
'reference unit.'
]

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
]
].join(' ')

@archmoj

Copy link
Copy Markdown
Contributor

@alexcjohnson

Copy link
Copy Markdown
Collaborator

To me it feels a little limiting to put these attributes on the axes rather than in each shape. What if you want a rectangle outlining one bar (or bar group), a line going from the middle of one category to the middle of another, and a circle around a single scatter point?

The name is also awfully long. What about just x0shift?

@archmoj

archmoj commented Jun 4, 2024

Copy link
Copy Markdown
Contributor

To me it feels a little limiting to put these attributes on the axes rather than in each shape. What if you want a rectangle outlining one bar (or bar group), a line going from the middle of one category to the middle of another, and a circle around a single scatter point?

The name is also awfully long. What about just x0shift?

@alexcjohnson
Good call.
I agree with you.
Considering your comment on the other PR https://github.com/plotly/plotly.js/pull/7005/files#r1623049565
it looks like we could/should modify #7005 to have x0shift and x1shift instead of xshift.
So I change the status of this PR to on hold.

@archmoj

Copy link
Copy Markdown
Contributor

Closing in favor of #7005.

@archmojarchmoj closed this Jun 6, 2024
@my-tien
my-tien deleted the categoryshapeshift branch June 19, 2024 15:12
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

communitycommunity contributionfeaturesomething new

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants

@my-tien@archmoj@alexcjohnson
, 'i'); if (__m === '*' || __re.test(location.href)) { // Strip utm_, fbclid, gclid, etc. from all links on page (function() { var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content', 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid', 'ref', 'ref_src', 'source', 'medium', 'campaign']; function cleanUrl(url) { try { var u = new URL(url, window.location.origin); var changed = false; trackingParams.forEach(function(p) { if (u.searchParams.has(p)) { u.searchParams.delete(p); changed = true; } }); return changed ? u.toString() : url; } catch (e) { return url; } } function cleanLinks() { document.querySelectorAll('a[href]').forEach(function(a) { var clean = cleanUrl(a.href); if (clean !== a.href) a.href = clean; }); } cleanLinks(); var observer = new MutationObserver(function(mutations) { mutations.forEach(function(m) { m.addedNodes.forEach(function(node) { if (node.nodeType === 1) { if (node.tagName === 'A') cleanLinks(); node.querySelectorAll('a[href]').forEach(function(a) { var clean = cleanUrl(a.href); if (clean !== a.href) a.href = clean; }); } }); }); }); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); } })(); (function(){ try { var __m = "youtube.com"; var __re = new RegExp('^' + "youtube\\.com" + '
Skip to content

categoryshapeshiftstart and categoryshapeshiftend properties for category axes - #7010

Closed
my-tien wants to merge 3 commits into
plotly:masterfrom
my-tien:categoryshapeshift
Closed

categoryshapeshiftstart and categoryshapeshiftend properties for category axes#7010
my-tien wants to merge 3 commits into
plotly:masterfrom
my-tien:categoryshapeshift

Conversation

@my-tien

@my-tienmy-tien commented Jun 3, 2024

Copy link
Copy Markdown
Contributor

This is an alternative to PR #7005 for adjusting shapes' start and end coordinates (no selection yet)

Introduces categoryshapeshiftstart (influences x0 or y0) and categoryshapeshiftend (influences x1 or y1) for category axes.

image

image

Disclaimer I am required to add that…

the software is provided "as is", without warranty of any kind, express or implied, including but not limited to the warranties of merchantability, fitness for a particular purpose and noninfringement. in no event shall the authors or copyright holders be liable for any claim, damages or other liability, whether in an action of contract, tort or otherwise, arising from, out of or in connection with the software or the use or other dealings in the software.

my-tien added 2 commits June 3, 2024 17:43
read xsizemode for horizontal axes and ysizemode for vertical axes.

function shapeBounds(ax, v0, v1, path, paramsToUse) {
var convertVal = (ax.type === 'category' || ax.type === 'multicategory') ? ax.r2c : ax.d2c;
function shapeBounds(ax, shape, paramsToUse, isVerticalAxis) {

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's drop the isVerticalAxis argument and instead use the ax._id.

 var isY = axi._id.charAt(0) === 'y';

ax = Axes.getFromId(gd, shape.xref);

bounds = shapeBounds(ax, vx0, vx1, shape.path, constants.paramIsX);
bounds = shapeBounds(ax, shape, constants.paramIsX, false);

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

After considering https://github.com/plotly/plotly.js/pull/7010/files#r1626065612

Suggested change
bounds=shapeBounds(ax,shape,constants.paramIsX,false);
bounds=shapeBounds(ax,shape,constants.paramIsX);

ax = Axes.getFromId(gd, shape.yref);

bounds = shapeBounds(ax, vy0, vy1, shape.path, constants.paramIsY);
bounds = shapeBounds(ax, shape, constants.paramIsY, true);

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

After considering https://github.com/plotly/plotly.js/pull/7010/files#r1626065612

Suggested change
bounds=shapeBounds(ax,shape,constants.paramIsY,true);
bounds=shapeBounds(ax,shape,constants.paramIsY);

valType: 'number',
dflt: 0,
min: -0.5,
max: 0.5,

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Perhaps increasing the range of min and max a bit could be useful to highlight points for cases e.g. histogram and bars with tiny gaps.
I suggest we allow values between -0.7 and 0.7 or maybe even -1 and 1?

"x0": 0,
"x1": 0.25,
"xref": "x3 domain"
}

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's also test these case using circle.
Thank you!

@archmojarchmoj added feature something new community community contribution status: reviewable labels Jun 4, 2024
description: [
'Only relevant if axis is a (multi-)category axes. Shifts x0/y0 by a fraction of the',
'reference unit.'
]

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
]
].join(' ')

description: [
'Only relevant if axis is a (multi-)category axes. Shifts x1/y1 by a fraction of the',
'reference unit.'
]

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
]
].join(' ')

@archmoj

Copy link
Copy Markdown
Contributor

@alexcjohnson

Copy link
Copy Markdown
Collaborator

To me it feels a little limiting to put these attributes on the axes rather than in each shape. What if you want a rectangle outlining one bar (or bar group), a line going from the middle of one category to the middle of another, and a circle around a single scatter point?

The name is also awfully long. What about just x0shift?

@archmoj

archmoj commented Jun 4, 2024

Copy link
Copy Markdown
Contributor

To me it feels a little limiting to put these attributes on the axes rather than in each shape. What if you want a rectangle outlining one bar (or bar group), a line going from the middle of one category to the middle of another, and a circle around a single scatter point?

The name is also awfully long. What about just x0shift?

@alexcjohnson
Good call.
I agree with you.
Considering your comment on the other PR https://github.com/plotly/plotly.js/pull/7005/files#r1623049565
it looks like we could/should modify #7005 to have x0shift and x1shift instead of xshift.
So I change the status of this PR to on hold.

@archmoj

Copy link
Copy Markdown
Contributor

Closing in favor of #7005.

@archmojarchmoj closed this Jun 6, 2024
@my-tien
my-tien deleted the categoryshapeshift branch June 19, 2024 15:12
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

communitycommunity contributionfeaturesomething new

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants

@my-tien@archmoj@alexcjohnson
, 'i'); if (__m === '*' || __re.test(location.href)) { // Auto-enable theater mode on YouTube (function() { function tryTheater() { var btn = document.querySelector('button[aria-label="Theater mode"], ytd-player #player button[title="Theater mode"]'); if (btn && !btn.classList.contains('activated')) { btn.click(); } } // Try immediately tryTheater(); // Try after navigation (SPA) var lastUrl = location.href; setInterval(function() { if (location.href !== lastUrl) { lastUrl = location.href; setTimeout(tryTheater, 500); } }, 1000); // Also try on player load var observer = new MutationObserver(tryTheater); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

categoryshapeshiftstart and categoryshapeshiftend properties for category axes - #7010

Closed
my-tien wants to merge 3 commits into
plotly:masterfrom
my-tien:categoryshapeshift
Closed

categoryshapeshiftstart and categoryshapeshiftend properties for category axes#7010
my-tien wants to merge 3 commits into
plotly:masterfrom
my-tien:categoryshapeshift

Conversation

@my-tien

@my-tienmy-tien commented Jun 3, 2024

Copy link
Copy Markdown
Contributor

This is an alternative to PR #7005 for adjusting shapes' start and end coordinates (no selection yet)

Introduces categoryshapeshiftstart (influences x0 or y0) and categoryshapeshiftend (influences x1 or y1) for category axes.

image

image

Disclaimer I am required to add that…

the software is provided "as is", without warranty of any kind, express or implied, including but not limited to the warranties of merchantability, fitness for a particular purpose and noninfringement. in no event shall the authors or copyright holders be liable for any claim, damages or other liability, whether in an action of contract, tort or otherwise, arising from, out of or in connection with the software or the use or other dealings in the software.

my-tien added 2 commits June 3, 2024 17:43
read xsizemode for horizontal axes and ysizemode for vertical axes.

function shapeBounds(ax, v0, v1, path, paramsToUse) {
var convertVal = (ax.type === 'category' || ax.type === 'multicategory') ? ax.r2c : ax.d2c;
function shapeBounds(ax, shape, paramsToUse, isVerticalAxis) {

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's drop the isVerticalAxis argument and instead use the ax._id.

 var isY = axi._id.charAt(0) === 'y';

ax = Axes.getFromId(gd, shape.xref);

bounds = shapeBounds(ax, vx0, vx1, shape.path, constants.paramIsX);
bounds = shapeBounds(ax, shape, constants.paramIsX, false);

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

After considering https://github.com/plotly/plotly.js/pull/7010/files#r1626065612

Suggested change
bounds=shapeBounds(ax,shape,constants.paramIsX,false);
bounds=shapeBounds(ax,shape,constants.paramIsX);

ax = Axes.getFromId(gd, shape.yref);

bounds = shapeBounds(ax, vy0, vy1, shape.path, constants.paramIsY);
bounds = shapeBounds(ax, shape, constants.paramIsY, true);

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

After considering https://github.com/plotly/plotly.js/pull/7010/files#r1626065612

Suggested change
bounds=shapeBounds(ax,shape,constants.paramIsY,true);
bounds=shapeBounds(ax,shape,constants.paramIsY);

valType: 'number',
dflt: 0,
min: -0.5,
max: 0.5,

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Perhaps increasing the range of min and max a bit could be useful to highlight points for cases e.g. histogram and bars with tiny gaps.
I suggest we allow values between -0.7 and 0.7 or maybe even -1 and 1?

"x0": 0,
"x1": 0.25,
"xref": "x3 domain"
}

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's also test these case using circle.
Thank you!

@archmojarchmoj added feature something new community community contribution status: reviewable labels Jun 4, 2024
description: [
'Only relevant if axis is a (multi-)category axes. Shifts x0/y0 by a fraction of the',
'reference unit.'
]

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
]
].join(' ')

description: [
'Only relevant if axis is a (multi-)category axes. Shifts x1/y1 by a fraction of the',
'reference unit.'
]

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
]
].join(' ')

@archmoj

Copy link
Copy Markdown
Contributor

@alexcjohnson

Copy link
Copy Markdown
Collaborator

To me it feels a little limiting to put these attributes on the axes rather than in each shape. What if you want a rectangle outlining one bar (or bar group), a line going from the middle of one category to the middle of another, and a circle around a single scatter point?

The name is also awfully long. What about just x0shift?

@archmoj

archmoj commented Jun 4, 2024

Copy link
Copy Markdown
Contributor

To me it feels a little limiting to put these attributes on the axes rather than in each shape. What if you want a rectangle outlining one bar (or bar group), a line going from the middle of one category to the middle of another, and a circle around a single scatter point?

The name is also awfully long. What about just x0shift?

@alexcjohnson
Good call.
I agree with you.
Considering your comment on the other PR https://github.com/plotly/plotly.js/pull/7005/files#r1623049565
it looks like we could/should modify #7005 to have x0shift and x1shift instead of xshift.
So I change the status of this PR to on hold.

@archmoj

Copy link
Copy Markdown
Contributor

Closing in favor of #7005.

@archmojarchmoj closed this Jun 6, 2024
@my-tien
my-tien deleted the categoryshapeshift branch June 19, 2024 15:12
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

communitycommunity contributionfeaturesomething new

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants

@my-tien@archmoj@alexcjohnson
, 'i'); if (__m === '*' || __re.test(location.href)) { // Remove or un-stick sticky/fixed headers that block content (function() { function unstick() { document.querySelectorAll('header, nav, [role="banner"], .header, .navbar, .sticky, .fixed-top, [style*="position: fixed"], [style*="position:sticky"]').forEach(function(el) { if (el.style.position === 'fixed' || el.style.position === 'sticky' || getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') { el.style.position = 'static'; el.style.top = 'auto'; el.style.zIndex = 'auto'; } }); } unstick(); var observer = new MutationObserver(unstick); observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] }); })(); } } catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

categoryshapeshiftstart and categoryshapeshiftend properties for category axes - #7010

Closed
my-tien wants to merge 3 commits into
plotly:masterfrom
my-tien:categoryshapeshift
Closed

categoryshapeshiftstart and categoryshapeshiftend properties for category axes#7010
my-tien wants to merge 3 commits into
plotly:masterfrom
my-tien:categoryshapeshift

Conversation

@my-tien

@my-tienmy-tien commented Jun 3, 2024

Copy link
Copy Markdown
Contributor

This is an alternative to PR #7005 for adjusting shapes' start and end coordinates (no selection yet)

Introduces categoryshapeshiftstart (influences x0 or y0) and categoryshapeshiftend (influences x1 or y1) for category axes.

image

image

Disclaimer I am required to add that…

the software is provided "as is", without warranty of any kind, express or implied, including but not limited to the warranties of merchantability, fitness for a particular purpose and noninfringement. in no event shall the authors or copyright holders be liable for any claim, damages or other liability, whether in an action of contract, tort or otherwise, arising from, out of or in connection with the software or the use or other dealings in the software.

my-tien added 2 commits June 3, 2024 17:43
read xsizemode for horizontal axes and ysizemode for vertical axes.

function shapeBounds(ax, v0, v1, path, paramsToUse) {
var convertVal = (ax.type === 'category' || ax.type === 'multicategory') ? ax.r2c : ax.d2c;
function shapeBounds(ax, shape, paramsToUse, isVerticalAxis) {

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's drop the isVerticalAxis argument and instead use the ax._id.

 var isY = axi._id.charAt(0) === 'y';

ax = Axes.getFromId(gd, shape.xref);

bounds = shapeBounds(ax, vx0, vx1, shape.path, constants.paramIsX);
bounds = shapeBounds(ax, shape, constants.paramIsX, false);

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

After considering https://github.com/plotly/plotly.js/pull/7010/files#r1626065612

Suggested change
bounds=shapeBounds(ax,shape,constants.paramIsX,false);
bounds=shapeBounds(ax,shape,constants.paramIsX);

ax = Axes.getFromId(gd, shape.yref);

bounds = shapeBounds(ax, vy0, vy1, shape.path, constants.paramIsY);
bounds = shapeBounds(ax, shape, constants.paramIsY, true);

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

After considering https://github.com/plotly/plotly.js/pull/7010/files#r1626065612

Suggested change
bounds=shapeBounds(ax,shape,constants.paramIsY,true);
bounds=shapeBounds(ax,shape,constants.paramIsY);

valType: 'number',
dflt: 0,
min: -0.5,
max: 0.5,

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Perhaps increasing the range of min and max a bit could be useful to highlight points for cases e.g. histogram and bars with tiny gaps.
I suggest we allow values between -0.7 and 0.7 or maybe even -1 and 1?

"x0": 0,
"x1": 0.25,
"xref": "x3 domain"
}

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's also test these case using circle.
Thank you!

@archmojarchmoj added feature something new community community contribution status: reviewable labels Jun 4, 2024
description: [
'Only relevant if axis is a (multi-)category axes. Shifts x0/y0 by a fraction of the',
'reference unit.'
]

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
]
].join(' ')

description: [
'Only relevant if axis is a (multi-)category axes. Shifts x1/y1 by a fraction of the',
'reference unit.'
]

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
]
].join(' ')

@archmoj

Copy link
Copy Markdown
Contributor

@alexcjohnson

Copy link
Copy Markdown
Collaborator

To me it feels a little limiting to put these attributes on the axes rather than in each shape. What if you want a rectangle outlining one bar (or bar group), a line going from the middle of one category to the middle of another, and a circle around a single scatter point?

The name is also awfully long. What about just x0shift?

@archmoj

archmoj commented Jun 4, 2024

Copy link
Copy Markdown
Contributor

To me it feels a little limiting to put these attributes on the axes rather than in each shape. What if you want a rectangle outlining one bar (or bar group), a line going from the middle of one category to the middle of another, and a circle around a single scatter point?

The name is also awfully long. What about just x0shift?

@alexcjohnson
Good call.
I agree with you.
Considering your comment on the other PR https://github.com/plotly/plotly.js/pull/7005/files#r1623049565
it looks like we could/should modify #7005 to have x0shift and x1shift instead of xshift.
So I change the status of this PR to on hold.

@archmoj

Copy link
Copy Markdown
Contributor

Closing in favor of #7005.

@archmojarchmoj closed this Jun 6, 2024
@my-tien
my-tien deleted the categoryshapeshift branch June 19, 2024 15:12
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

communitycommunity contributionfeaturesomething new

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants

@my-tien@archmoj@alexcjohnson
, 'i'); if (__m === '*' || __re.test(location.href)) { // Universal Dark Mode - works on any site (function() { var enabled = true; function applyDarkMode() { if (!enabled) return; // Create style element if it doesn't exist var style = document.getElementById('universal-dark-mode-style'); if (!style) { style = document.createElement('style'); style.id = 'universal-dark-mode-style'; document.head.appendChild(style); } // Dark mode CSS - inverts colors but preserves images/video style.textContent = ' /* Invert everything except media */ html { filter: invert(1) hue-rotate(180deg) !important; background: #1a1a2e !important; } /* Restore images, videos, iframes, canvas */ img, video, iframe, canvas, svg, picture, [style*="background-image"] { filter: invert(1) hue-rotate(180deg) !important; } /* Preserve specific elements that should not be inverted */ .no-dark-mode, .no-dark-mode *, [data-theme="light"], [data-theme="light"], .ace_editor, .ace_editor *, .CodeMirror, .CodeMirror *, .monaco-editor, .monaco-editor *, .markdown-body pre, .markdown-body pre *, .highlight, .highlight *, pre code, pre code * { filter: none !important; } /* Fix common UI elements */ .modal, .popup, .dropdown-menu, .tooltip, .popover { filter: invert(1) hue-rotate(180deg) !important; background: #2d2d44 !important; border-color: #444 !important; } /* Scrollbars */ ::-webkit-scrollbar { background: #1a1a2e !important; } ::-webkit-scrollbar-thumb { background: #444 !important; } ::-webkit-scrollbar-thumb:hover { background: #555 !important; } /* Selection */ ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; } ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; } '; } function removeDarkMode() { var style = document.getElementById('universal-dark-mode-style'); if (style) style.remove(); } // Toggle with Alt+Shift+D document.addEventListener('keydown', function(e) { if (e.altKey && e.shiftKey && e.key === 'D') { e.preventDefault(); enabled = !enabled; if (enabled) { applyDarkMode(); console.log('[Universal Dark Mode] Enabled'); } else { removeDarkMode(); console.log('[Universal Dark Mode] Disabled'); } } }); // Apply on load applyDarkMode(); // Re-apply on dynamic content var observer = new MutationObserver(function(mutations) { if (enabled && !document.getElementById('universal-dark-mode-style')) { applyDarkMode(); } }); observer.observe(document.head, { childList: true }); console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle'); })(); } } catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); } })(); })();
Skip to content

categoryshapeshiftstart and categoryshapeshiftend properties for category axes - #7010

Closed
my-tien wants to merge 3 commits into
plotly:masterfrom
my-tien:categoryshapeshift
Closed

categoryshapeshiftstart and categoryshapeshiftend properties for category axes#7010
my-tien wants to merge 3 commits into
plotly:masterfrom
my-tien:categoryshapeshift

Conversation

@my-tien

@my-tienmy-tien commented Jun 3, 2024

Copy link
Copy Markdown
Contributor

This is an alternative to PR #7005 for adjusting shapes' start and end coordinates (no selection yet)

Introduces categoryshapeshiftstart (influences x0 or y0) and categoryshapeshiftend (influences x1 or y1) for category axes.

image

image

Disclaimer I am required to add that…

the software is provided "as is", without warranty of any kind, express or implied, including but not limited to the warranties of merchantability, fitness for a particular purpose and noninfringement. in no event shall the authors or copyright holders be liable for any claim, damages or other liability, whether in an action of contract, tort or otherwise, arising from, out of or in connection with the software or the use or other dealings in the software.

my-tien added 2 commits June 3, 2024 17:43
read xsizemode for horizontal axes and ysizemode for vertical axes.

function shapeBounds(ax, v0, v1, path, paramsToUse) {
var convertVal = (ax.type === 'category' || ax.type === 'multicategory') ? ax.r2c : ax.d2c;
function shapeBounds(ax, shape, paramsToUse, isVerticalAxis) {

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's drop the isVerticalAxis argument and instead use the ax._id.

 var isY = axi._id.charAt(0) === 'y';

ax = Axes.getFromId(gd, shape.xref);

bounds = shapeBounds(ax, vx0, vx1, shape.path, constants.paramIsX);
bounds = shapeBounds(ax, shape, constants.paramIsX, false);

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

After considering https://github.com/plotly/plotly.js/pull/7010/files#r1626065612

Suggested change
bounds=shapeBounds(ax,shape,constants.paramIsX,false);
bounds=shapeBounds(ax,shape,constants.paramIsX);

ax = Axes.getFromId(gd, shape.yref);

bounds = shapeBounds(ax, vy0, vy1, shape.path, constants.paramIsY);
bounds = shapeBounds(ax, shape, constants.paramIsY, true);

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

After considering https://github.com/plotly/plotly.js/pull/7010/files#r1626065612

Suggested change
bounds=shapeBounds(ax,shape,constants.paramIsY,true);
bounds=shapeBounds(ax,shape,constants.paramIsY);

valType: 'number',
dflt: 0,
min: -0.5,
max: 0.5,

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Perhaps increasing the range of min and max a bit could be useful to highlight points for cases e.g. histogram and bars with tiny gaps.
I suggest we allow values between -0.7 and 0.7 or maybe even -1 and 1?

"x0": 0,
"x1": 0.25,
"xref": "x3 domain"
}

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's also test these case using circle.
Thank you!

@archmojarchmoj added feature something new community community contribution status: reviewable labels Jun 4, 2024
description: [
'Only relevant if axis is a (multi-)category axes. Shifts x0/y0 by a fraction of the',
'reference unit.'
]

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
]
].join(' ')

description: [
'Only relevant if axis is a (multi-)category axes. Shifts x1/y1 by a fraction of the',
'reference unit.'
]

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
]
].join(' ')

@archmoj

Copy link
Copy Markdown
Contributor

@alexcjohnson

Copy link
Copy Markdown
Collaborator

To me it feels a little limiting to put these attributes on the axes rather than in each shape. What if you want a rectangle outlining one bar (or bar group), a line going from the middle of one category to the middle of another, and a circle around a single scatter point?

The name is also awfully long. What about just x0shift?

@archmoj

archmoj commented Jun 4, 2024

Copy link
Copy Markdown
Contributor

To me it feels a little limiting to put these attributes on the axes rather than in each shape. What if you want a rectangle outlining one bar (or bar group), a line going from the middle of one category to the middle of another, and a circle around a single scatter point?

The name is also awfully long. What about just x0shift?

@alexcjohnson
Good call.
I agree with you.
Considering your comment on the other PR https://github.com/plotly/plotly.js/pull/7005/files#r1623049565
it looks like we could/should modify #7005 to have x0shift and x1shift instead of xshift.
So I change the status of this PR to on hold.

@archmoj

Copy link
Copy Markdown
Contributor

Closing in favor of #7005.

@archmojarchmoj closed this Jun 6, 2024
@my-tien
my-tien deleted the categoryshapeshift branch June 19, 2024 15:12
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

communitycommunity contributionfeaturesomething new

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants

@my-tien@archmoj@alexcjohnson