Skip to content
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

pie : add Pattern #6601

Merged
merged 11 commits into from
May 30, 2023
Merged

pie : add Pattern #6601

merged 11 commits into from
May 30, 2023

Conversation

thierryVergult
Copy link
Contributor

@thierryVergult thierryVergult commented May 12, 2023

Patterns were already added to a few trace types in Plotly, like bar & scatter.

Hereby a first version to do so for pie charts, cf. Feature request: ability to add pattern fills to pie chart #6134

example

image

previous PRs : #5520 & #6101

Patterns were already added to a few trace types in Plotly, like bar & scatter.

Hereby a first version to do so for pie charts, cf. Feature request: ability to add pattern fills to pie chart plotly#6134
only reference traceIn.marker.colors if traceIn.marker exists
@archmoj archmoj added feature something new community community contribution status: reviewable labels May 12, 2023
src/traces/pie/defaults.js Outdated Show resolved Hide resolved
@archmoj
Copy link
Contributor

archmoj commented May 12, 2023

Another very exciting PR! 🏁
Please run npm run schema and commit the schema changes.
For your new mocks please add zz- to the start of their names i.e. to avoid encountering a bug we have on CircleCI.
Thank you!

thierryVergult and others added 2 commits May 12, 2023 19:28
Co-authored-by: Mojtaba Samimi <33888540+archmoj@users.noreply.github.com>
+ plot-schema.json after running npm run schema
@thierryVergult
Copy link
Contributor Author

@archmoj : flaky-no-gl-jasmine failed, but I have no clue why, and I do not see the link with the code changes of this PR for the moment.

Then I will rework the StyleOne function.

@archmoj
Copy link
Contributor

archmoj commented May 12, 2023

@archmoj : flaky-no-gl-jasmine failed, but I have no clue why, and I do not see the link with the code changes of this PR for the moment.

Then I will rework the StyleOne function.

flaky and webgl containers sometimes fail. I just rerun and please don't worry about it.

fixes bug (trace.marker.shape) & logic.
The styleOne function is also used by the funnelarea trace type, which has no pattern in it's schema at the moment, so extra check if pattern exists, before checking if a shape exists within the pattern.
@thierryVergult
Copy link
Contributor Author

thierryVergult commented May 13, 2023

@archmoj : any idea how to transform / avoid the code below (from styleOne) into a more readable version? When styleOne is called for the legend, the i attribute is sitting a level deeper (probably since each slice of the pie is becoming a legend item)), so I brought it one level up, so it gets recognized in the Drawing.pointStyle function.

if(s[0][0].__data__.i === undefined) {
        // coming from a legend
        s[0][0].__data__.i = s[0][0].__data__[0].i;
    }

funnelarea pixel tests were broken, so use the point color in way more cases
@thierryVergult
Copy link
Contributor Author

@archmoj : Is there a way to run the mock tests (find visual differences) locally?

add 5 pie charts, spread over the x domain, with increasing pattern functionalities
@archmoj
Copy link
Contributor

archmoj commented May 16, 2023

Please replace the baseline with this file.

@archmoj
Copy link
Contributor

archmoj commented May 16, 2023

@archmoj : Is there a way to run the mock tests (find visual differences) locally?

Yes. Please see here.

@thierryVergult
Copy link
Contributor Author

Please replace the baseline with this file.

Getting an error

<Error>
<Code>AccessDenied</Code>
<Message>Request has expired</Message>
<X-Amz-Expires>60</X-Amz-Expires>

@archmoj
Copy link
Contributor

archmoj commented May 17, 2023

- take the index from the point in the styleOne function, instead of setting it before in the data structure
- zz-pie_pattern : height 500
@archmoj
Copy link
Contributor

archmoj commented May 17, 2023

Would you please investigate why pie_style_arrays mock renders differently?
You will find the diff here: https://app.circleci.com/pipelines/github/plotly/plotly.js/8665/workflows/be5e9dfa-6855-4109-8a70-9f13a88aeab1/jobs/191244/artifacts

@thierryVergult
Copy link
Contributor Author

thierryVergult commented May 17, 2023 via email

@archmoj
Copy link
Contributor

archmoj commented May 17, 2023

I reverted a change to fix it. Now a timezone test fails, on an Ubuntu file. No clue

On Wed, 17 May 2023, 16:44 Mojtaba Samimi, @.> wrote: Would you please investigate why pie_style_arrays mock renders differently? You will find the diff here: https://app.circleci.com/pipelines/github/plotly/plotly.js/8665/workflows/be5e9dfa-6855-4109-8a70-9f13a88aeab1/jobs/191244/artifacts — Reply to this email directly, view it on GitHub <#6601 (comment)>, or unsubscribe https://github.com/notifications/unsubscribe-auth/ACYGOP26L7WINVIE5FBPGDLXGTP3BANCNFSM6AAAAAAX7TJVTE . You are receiving this because you authored the thread.Message ID: @.>

No worries. That sometimes happens.
Everything passed on CircleCI when I rerun.

@archmoj archmoj requested a review from alexcjohnson May 23, 2023 13:58
"bgcolor": "lightgrey"
}
},
"textfont": { "color": ["black", "white", "black"]},
Copy link
Collaborator

Choose a reason for hiding this comment

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

I wonder if we can get this to be the default result for inside text? This would particularly help in the cases where we don't know whether the text will end up inside or outside. Maybe if the pattern solidity <0.5 we contrast with the bgcolor, >0.5 we contrast with the fgcolor? Here's where this auto color is chosen (Color.contrast picks either black or white, whichever is farther from the given color):

color: customColor || Color.contrast(pt.color),

Note I haven't looked but wonder if we want to do the same for bars:

color: Color.contrast(barColor),

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I checked similar cases for bar trace and scatter trace, see attached. Scatter trace with area filled with a pattern seems a special case anyway, but also the actual bar trace is deciding on the color of the text inside the bar by evaluating the base color of the bar, without taking into account pattern attributes.

And even flipping the text color to black inside the bar / slice will give a distortion effect, probably as bad as the actual situation. Patterns with text inside is probably never a very good idea ..

I would prefer to add a pattern to a few other trace types first (funnelarea, sunburst, ..) and to handle the color of the text inside a pattern eventually later via a separate PR.
zz-pattern_textfont_color
zz-pattern_textfont_color.json.txt

Copy link
Collaborator

Choose a reason for hiding this comment

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

Hmm OK - I guess it's not so clear that any color we choose here will actually be usable, for a lot of situations neither black nor white would really work and (given that this is often used in black&white contexts) we don't want to consider any other colors. So the recommendation I guess would be to use textposition='outside' when you have patterns.

Copy link
Collaborator

@alexcjohnson alexcjohnson left a comment

Choose a reason for hiding this comment

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

💃 LGTM!

@archmoj archmoj merged commit 23fc32b into plotly:master May 30, 2023
@thierryVergult thierryVergult deleted the piePattern branch June 1, 2023 09:16
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
community community contribution feature something new
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants