-
-
Notifications
You must be signed in to change notification settings - Fork 1.9k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add option for rounded corners on bar charts #6761
Conversation
plotly.js/src/traces/bar/style.js Line 34 in 17f7013
Using shape-rendering: 'crispEdges' the rounded bars do not look great inside the browser.I suggest we do not add it when there is a rounded bar that position. |
// across all bars sharing the same position as that bar. These values are used for rounded | ||
// bar corners, to carry rounding down to lower bars in the stack as needed. | ||
function setHelperValuesForRoundedCorners(calcTraces, sMinByPos, sMaxByPos) { | ||
// Set `_sMin` and `_sMax` value for each bar |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We only need these when having bars with rounded corners.
This function is pretty slow and it should not be called when it is not really needed.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@archmoj Yes good point. Would it make sense then to check whether any of the traces in calcTraces
have a cornerradius
value, and skip this function if not?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yes that's a good idea.
src/traces/bar/plot.js
Outdated
var rPx; | ||
if(!radiusParam) { | ||
return 0; | ||
} else if(typeof radiusParam === 'string') { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We shouldn't get into this if statement, if the value is presented in a string but not having a percentage at the end.
Also we may replace parseFloat
by unary plus operator to get NaN
when the remaining string is not a number.
Something like:
} else if(typeof radiusParam === 'string' && radiusParam.slice(-1) === '%') {
// If radius is given as a percentage string, convert to number of pixels
var rPercent = Math.min(50, +radiusParam.slice(0, -1));
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Better to use isNumeric
to find if the value is a number, it's our standard method of finding either number type or numeric string:
if(!radiusParam) {
return 0;
else if(isNumeric(radiusParam)) {
rPx = +radiusParam;
else {
var rPercent = ...
}
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
If cornerradius
value is invalid (e.g. string not ending in %) should we log an error message or just ignore?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Ignore if it’s invalid. Plotlyjs has a separate validation utility that will alert you if any attributes you provide were not accepted, but if you don’t explicitly call that our convention is to silently ignore invalid items.
test/plot-schema.json
Outdated
@@ -15632,6 +15644,12 @@ | |||
"editType": "none", | |||
"valType": "string" | |||
}, | |||
"cornerradius": { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This one shouldn't be added to barpolar
.
|
[![Mend Renovate](https://app.renovatebot.com/images/banner.svg)](https://renovatebot.com) This PR contains the following updates: | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | [plotly.js](https://togithub.com/plotly/plotly.js) | [`2.28.0` -> `2.29.0`](https://renovatebot.com/diffs/npm/plotly.js/2.28.0/2.29.0) | [![age](https://developer.mend.io/api/mc/badges/age/npm/plotly.js/2.29.0?slim=true)](https://docs.renovatebot.com/merge-confidence/) | [![adoption](https://developer.mend.io/api/mc/badges/adoption/npm/plotly.js/2.29.0?slim=true)](https://docs.renovatebot.com/merge-confidence/) | [![passing](https://developer.mend.io/api/mc/badges/compatibility/npm/plotly.js/2.28.0/2.29.0?slim=true)](https://docs.renovatebot.com/merge-confidence/) | [![confidence](https://developer.mend.io/api/mc/badges/confidence/npm/plotly.js/2.28.0/2.29.0?slim=true)](https://docs.renovatebot.com/merge-confidence/) | --- ### Release Notes <details> <summary>plotly/plotly.js (plotly.js)</summary> ### [`v2.29.0`](https://togithub.com/plotly/plotly.js/blob/HEAD/CHANGELOG.md#2290----2024-02-01) [Compare Source](https://togithub.com/plotly/plotly.js/compare/v2.28.0...v2.29.0) ##### Added - Add `layout.barcornerradius` and `trace.marker.cornerradius` properties to support rounding the corners of bar traces \[\[[#​6761](https://togithub.com/plotly/plotly.js/issues/6761)]\(https://github.com/ plotly/plotly.js/pull/6761)], with thanks to [Displayr](https://www.displayr.com) for sponsoring development! - Add `autotickangles` to cartesian and radial axes \[[#​6790](https://togithub.com/plotly/plotly.js/pull/6790)], with thanks to [@​my-tien](https://togithub.com/my-tien) for the contribution! ##### Changed - Improve hover detection for for scatter plot fill tonext\* \[[#​6865](https://togithub.com/plotly/plotly.js/pull/6865)], with thanks to [@​lumip](https://togithub.com/lumip) for the contribution! - Improve rendering of heatmap bricks for log-scale axes \[[#​5991](https://togithub.com/plotly/plotly.js/issues/5991)], with thanks to [@​andrew-matteson](https://togithub.com/andrew-matteson) for the contribution! - Adjust Sankey trace to allow user-defined link hover style override \[[#​6864](https://togithub.com/plotly/plotly.js/pull/6864)], with thanks to [@​TortoiseHam](https://togithub.com/TortoiseHam) for the contribution! - Adjust 'decimal' and 'thousands' formats for Brazilian Portuguese locale file \[[#​6866](https://togithub.com/plotly/plotly.js/pull/6866)], with thanks to [@​pazuza](https://togithub.com/pazuza) for the contribution! ##### Fixed - Fix modifying selections on traces on overlaying axes \[[#​6870](https://togithub.com/plotly/plotly.js/pull/6870)] </details> --- ### Configuration 📅 **Schedule**: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined). 🚦 **Automerge**: Enabled. ♻ **Rebasing**: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox. 🔕 **Ignore**: Close this PR and you won't be reminded about this update again. --- - [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check this box --- This PR has been generated by [Mend Renovate](https://www.mend.io/free-developer-tools/renovate/). View repository job log [here](https://developer.mend.io/github/rparini/cxroots-app). <!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiIzNy4xNTMuMiIsInVwZGF0ZWRJblZlciI6IjM3LjE1My4yIiwidGFyZ2V0QnJhbmNoIjoibWFzdGVyIn0=--> Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Resolves #2196 😎
Description
Adds the option to round the corners of bar traces.
cornerradius
todata.marker
for bar tracescornerradius
may be either a numeric pixel value, or a string specifying a percentage of bar widthbarcornerradius
tolayout
, which sets default corner radius for all bar traces — easiest approach when all bars in all traces should have the same roundingChecklist
data.marker.cornerradius
layout.barcornerradius
draftlogs/6761_add.md
and mention the sponsorPartnership
Development of this feature is sponsored by Displayr.