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

feat(color): support analogous colors to prevent color conflict #19325

Merged
merged 5 commits into from
Apr 1, 2022

Conversation

stephenLYZ
Copy link
Member

@stephenLYZ stephenLYZ commented Mar 23, 2022

SUMMARY

Currently we have a series of color schemes (aribnb, d3, superset...) Since we use recycle colors when number of items exceed available colors, the color conflict is easy to occur. For this case we use tinycolor.analogous API to get analogous colors to prevent color conflict and the color generation algorithm comes from color consistency.

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

before

image

after

image

TESTING INSTRUCTIONS

ADDITIONAL INFORMATION

cc @rusackas @geido

@codecov
Copy link

codecov bot commented Mar 23, 2022

Codecov Report

Merging #19325 (5eb792c) into master (b0397be) will decrease coverage by 0.05%.
The diff coverage is 100.00%.

@@            Coverage Diff             @@
##           master   #19325      +/-   ##
==========================================
- Coverage   66.65%   66.59%   -0.06%     
==========================================
  Files        1674     1676       +2     
  Lines       64603    64714     +111     
  Branches     6500     6520      +20     
==========================================
+ Hits        43058    43099      +41     
- Misses      19862    19924      +62     
- Partials     1683     1691       +8     
Flag Coverage Δ
javascript 51.27% <100.00%> (-0.05%) ⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

Impacted Files Coverage Δ
...uperset-ui-core/src/color/CategoricalColorScale.ts 100.00% <100.00%> (ø)
...set-ui-core/src/color/SharedLabelColorSingleton.ts 100.00% <100.00%> (ø)
...ntend/packages/superset-ui-core/src/color/utils.ts 100.00% <100.00%> (ø)
.../components/Header/HeaderActionsDropdown/index.jsx 67.79% <0.00%> (-3.64%) ⬇️
...rset-frontend/src/components/ReportModal/index.tsx 82.08% <0.00%> (-3.63%) ⬇️
.../src/explore/components/DataTableControl/index.tsx 71.62% <0.00%> (-2.67%) ⬇️
...ontend/src/dashboard/components/dnd/DragHandle.tsx 83.33% <0.00%> (-2.39%) ⬇️
...tend/src/components/Datasource/DatasourceModal.tsx 69.04% <0.00%> (-1.69%) ⬇️
superset-frontend/src/components/Chart/Chart.jsx 52.45% <0.00%> (-1.64%) ⬇️
...-frontend/src/dashboard/reducers/dashboardState.js 72.34% <0.00%> (-1.58%) ⬇️
... and 41 more

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update b0397be...5eb792c. Read the comment docs.

@rusackas rusackas requested review from geido and rusackas March 25, 2022 21:55

export function getAnalogousColors(colors: string[], results: number) {
const generatedColors: string[] = [];
const ext = 3;
Copy link
Member

Choose a reason for hiding this comment

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

I'm curious how we landed on 3 for this?

Copy link
Member

Choose a reason for hiding this comment

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

A comment might be useful for future readers.

Copy link
Member Author

Choose a reason for hiding this comment

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

Good catch! This is to solve the problem that the first three values generated by tinycolor.analogous may have the same or very close colors. You can see my local test:
image
Let me add some comments here.

return result.slice(ext);
});

// [[A, AA, AAA], [B, BB, BBB]] => [A, B, AA, BB, AAA, BBB]
Copy link
Member

Choose a reason for hiding this comment

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

I appreciate the explanation of this interleaving. This is one of those little bits of code where there are 90 ways to do it. We might be able to squeeze some performance here, but I don't think anyone's palette will be big enough to cause a perceivable performance problem anway.

Copy link
Member

@rusackas rusackas left a comment

Choose a reason for hiding this comment

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

LGTM! Seems pretty clean... left one question on the thread about the 3 value that has me a little confused. I'll also spin up an environment to test it further for anyone interested, e.g. @jinghua-qa or @geido :)

@rusackas
Copy link
Member

/testenv up

@github-actions
Copy link
Contributor

@rusackas Ephemeral environment spinning up at http://34.221.229.151:8080. Credentials are admin/admin. Please allow several minutes for bootstrapping and startup.

Copy link
Member

@geido geido left a comment

Choose a reason for hiding this comment

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

LGTM!

@geido geido merged commit 90c9dae into apache:master Apr 1, 2022
@github-actions
Copy link
Contributor

github-actions bot commented Apr 1, 2022

Ephemeral environment shutdown and build artifacts deleted.

sadpandajoe pushed a commit to preset-io/superset that referenced this pull request Apr 6, 2022
…he#19325)

* feat(color): support analogous colors

* fix test

* fix range

* add some comment

(cherry picked from commit 90c9dae)
@sadpandajoe
Copy link
Member

🏷️ preset:2022.13

philipher29 pushed a commit to ValtechMobility/superset that referenced this pull request Jun 9, 2022
…he#19325)

* feat(color): support analogous colors

* fix test

* fix range

* add some comment
@mistercrunch mistercrunch added 🏷️ bot A label used by `supersetbot` to keep track of which PR where auto-tagged with release labels 🚢 2.0.0 labels Mar 13, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🏷️ bot A label used by `supersetbot` to keep track of which PR where auto-tagged with release labels preset:2022.13 size/M 🚢 2.0.0
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants