GeezerVisonThe World Wide Web, restored to 800 pixels of glory. | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Home|About|Gaming cabinet|Archives|How it works|Starter sites | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
GeezerVison is showing github.com — feat: Switch color processing library by camdecoster · Pull Request #7536 · plotly/plotly.js Conversation
|
| Before | After |
|---|---|
![]() |
![]() |
Auto inside-text color on default colorway
Plotly.newPlot(gd, { data: [ { type: 'bar', x: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], y: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1], marker: { color: [ '#1f77b4', '#ff7f0e', '#2ca02c', '#d62728', '#9467bd', '#8c564b', '#e377c2', '#7f7f7f', '#bcbd22', '#17becf' ] }, text: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'], textposition: 'inside', insidetextanchor: 'middle', textfont: { size: 32 }, hoverinfo: 'skip' } ], layout: { title: { text: 'Auto inside-text color on default colorway' }, showlegend: false, bargap: 0, xaxis: { visible: false }, yaxis: { visible: false }, width: 900, height: 220, margin: { l: 20, r: 20, t: 60, b: 20 } } });
| Before | After |
|---|---|
![]() |
![]() |
Pie with extended colorway (lighten/darken)
Plotly.newPlot( gd, [ { type: 'pie', values: [7, 6, 5, 4, 3, 2, 1] } ], { colorway: ['#777', '#F00'], width: 400, height: 400 } );
| Before | After |
|---|---|
![]() |
![]() |
Sorry, something went wrong.
There was an error while loading. Please reload this page.
|
I created a couple of PRs (#78 and #81) in a dependency used by color that will add some new features for parsing color strings that would bring it closer to parity with TinyColor. The maintainer recently merged one of these and will (hopefully) be merging the other soon. Once he publishes a new release, I'll be able to use it in plotly.js. |
Sorry, something went wrong.
There was an error while loading. Please reload this page.
fc905c7 to
6e83d8a
Compare
|
@camdecoster Looks good overall, but lightened/darkened colors seem much less distinct after this change, is there any way to adjust that? Maybe increase the degree of lightening/darkening?
(codepen) |
Sorry, something went wrong.
There was an error while loading. Please reload this page.
There was an error while loading. Please reload this page.
| }; | ||
|
|
||
| color.rgb = function(cstr) { return color.tinyRGB(tinycolor(cstr)); }; | ||
| const rgb = (cstr) => { |
There was a problem hiding this comment.
The reason will be displayed to describe this comment to others. Learn more.
Can you add a comment explaining that this is for returning a string which doesn't contain alpha? (Or whatever is the purpose of this function, I'm assuming it's that because of the comment in the old file.)
Sorry, something went wrong.
There was an error while loading. Please reload this page.
There was a problem hiding this comment.
The reason will be displayed to describe this comment to others. Learn more.
More generally if you could add a few docstrings for the most-commonly-used functions in that file it would be a big improvement
Sorry, something went wrong.
There was an error while loading. Please reload this page.
There was a problem hiding this comment.
The reason will be displayed to describe this comment to others. Learn more.
I'll add descriptions for all the functions in here.
Sorry, something went wrong.
There was an error while loading. Please reload this page.
There was an error while loading. Please reload this page.
There was an error while loading. Please reload this page.
| "- hex (e.g. '#d3d3d3', '#d3d3d3aa')", | ||
| "- rgb (e.g. 'rgb(255, 0, 0)', 'rgb(255 0 0)')", | ||
| "- rgba (e.g. 'rgba(255, 0, 0, 0.5)', 'rgba(255 0 0 / 0.5)')", | ||
| "- hsl (e.g. 'hsl(0, 100%, 50%)')", | ||
| "- hsla (e.g. 'hsla(0, 100%, 50%, 0.5)')", | ||
| "- hwb (e.g. 'hwb(0, 0%, 0%)')", |
There was a problem hiding this comment.
The reason will be displayed to describe this comment to others. Learn more.
Weirdly, I can't find this info in the docs anywhere, although I could be missing it. We should make sure the supported color formats are documented with the next release.
Sorry, something went wrong.
There was an error while loading. Please reload this page.
There was a problem hiding this comment.
The reason will be displayed to describe this comment to others. Learn more.
I agree. I'm prepping a migration guide for v4 that should include some of this info, but a follow up should be to update the docs for v4.
Sorry, something went wrong.
There was an error while loading. Please reload this page.
There was an error while loading. Please reload this page.
There was an error while loading. Please reload this page.
|
|
||
| for(i = 0; i < colorList.length; i++) { | ||
| colors.push(tinycolor(colorList[i]).lighten(20).toHexString()); | ||
| colors.push(Color.color(colorList[i]).lighten(0.2).hex()); |
There was an error while loading. Please reload this page.
There was a problem hiding this comment.
The reason will be displayed to describe this comment to others. Learn more.
Re: my comment about lightened/darkened colors being too similar, I assume you could just increase this value here to fix.
Sorry, something went wrong.
There was an error while loading. Please reload this page.
There was a problem hiding this comment.
The reason will be displayed to describe this comment to others. Learn more.
I reworked the lighten/darken code to better match what tinycolor did.
Sorry, something went wrong.
There was an error while loading. Please reload this page.
There was a problem hiding this comment.
The reason will be displayed to describe this comment to others. Learn more.
My only concern is the lighten/darken changes, everything else looks good
Sorry, something went wrong.
There was an error while loading. Please reload this page.
|
@camdecoster Nice, with your edits, the lightened/darkened colors look identical to
|
Sorry, something went wrong.
There was an error while loading. Please reload this page.
There was a problem hiding this comment.
The reason will be displayed to describe this comment to others. Learn more.
🌈
Sorry, something went wrong.
There was an error while loading. Please reload this page.
There was an error while loading. Please reload this page.
There was an error while loading. Please reload this page.
Successfully merging this pull request may close these issues.
Update color processing library to handle modern CSS color syntax
There was an error while loading. Please reload this page.