cengage
Carbon Charts: Simple bar, Grouped bar, Floating bar, Lollipop
This is a placeholder ticket for specific requirements regarding our customization of Carbon Charts.
Let's find a balance of customizing the styles to fit Magma so they look cohesive together, without changing so much that we lose the value of using this library to begin with.
Figma: https://www.figma.com/file/0tifcLtTm7TodIoR5gJsrX/Magma-Data-Visualization?type=design&node-id=101%3A3535&mode=design&t=hnGgDZwMGIOHDTED-1
Here's a list of customizations I'd like us to try to do:
- I’d like to increase the font size and change color of the text in the little popovers.
- I'd like to increase the size of the boxes/checkboxes in the legend to 16px.
- On the modal that opens for the table view, round the corners of the modal to 8px.
- Let's try to make sure the focus outline matches our blue color everywhere it appears. This is an example of the wrong blue.
- Work with the styles of the button at the bottom of the modal
- Work with the CSS so that the dark mode doesn't have a black background behind the chart
Updated color palette and order:
- #009AF3
- #E0004D
- #1EA746
- #FA6600
- #B12FAD
- #00A393
- #005F96
- #8F0033
- #136A2D
- #B84900
- #711E6E
- #005249
Dark mode
- #1FB0FF
- #FF337A
- #65E000
- #FF9147
- #D45ED0
- #00E0CA
- #85D4FF
- #FF99BD
- #FFB685
- #C7FF99
- #E9AFE7
- #99FFF5
Feedback:
- Title text needs to be updated to #454545
- The squares are supposed to be 16px square.
- The text inside the popovers is supposed to be #454545. This looks darker.
- All of the text in this modal is supposed to be #454545
- Make all text in the dark mode = white
-
Need to update colors of the tabular representation modal. I'll add that to a separate comment.
-
In dark mode, the lines on the graph background are almost impossible to see. Let's try making the x and y axis white, and then the grid lines white at 50% opacity.
-
Can we try removing the black border on those squares in dark mode?
- Can we try updating the focus color to use our inverse focus color?
- On the dark mode loading skeleton, we need the background to not be black.
Here is a guide to styling the modal
https://www.figma.com/file/0tifcLtTm7TodIoR5gJsrX/Magma-Data-Visualization?type=design&node-id=326%3A1741&mode=design&t=t2g3yABCz0g2OVWI-1
As far as adding charts to docs, let's make sure:
- we are very clear we are re-skinning Carbon Charts (link to https://carbondesignsystem.com/data-visualization/chart-types/)
- we will not have a design docs page, we will combine this kind of information within the dev page. if we decide it's too much info, we could break it out to explain things like color choices, axis, etc.
- recommendations for what type of chart for what kind of data (carbon does this)
- should we link to storybook or codesandbox? how many examples of each type do we need?
- update LineChart component to link to new charts
- give example of expected data structure