feat: add donut-chart, data-viz-colors and chart-legend

[martin-ebay]

Fixes #

• [x] This PR contains CSS changes
• [ ] This PR does not contain CSS changes

Description

adding the donut-chart, chart-legend, and data-viz-colors to support the new donut-chart and chart-legend compnents in ebayui-core

Notes

this is to support a PR that will be opened soon to ebayui-core to add the donut-chart and chart-legend components

Screenshots

Checklist

• [x] I verify the build is in a non-broken state
• [x] I verify all changes are within scope of the linked issue

• [x] I regenerated all CSS files under dist folder
• [x] I tested the UI in all supported browsers
• [x] I tested the UI in dark mode and RTL mode
• [ ] I added/updated/removed Storybook coverage as appropriate

[ianmcburnie]

Thanks @martin-ebay . This is going to need a bit of work in order to get it fully BEM compliant. We'll probably need to rename and move a few things round too. Might be quickest if somebody from our side just does that. I'll add a couple of very quick comments now, and we can do a more thorough review later.

[martin-ebay]

@ianmcburnie I've created an evo-data-viz-tokens file, removed the data-viz-colors and moved the styling for the colors into the chart-legend and donut-chart style files as well

[martin-ebay]

@ianmcburnie I've made changes based on your feedback, including updating the colors for the dark tokens, and added a stories file for the chart-legend as well. Let me know if you see any other issues.

[ArtBlue]

@ianmcburnie , do we need some documentation on the Skin site to detail usage, at least for the abstracted pieces?

[ianmcburnie]

@ArtBlue Yes, definitely.

[martin-ebay]

@ianmcburnie and @ArtBlue I'll get the docs updated today

[martin-ebay]

@ianmcburnie @ArtBlue I've added documentation, I'm working on setting up a working svg generator sample page to reference in the docs

[ArtBlue]

Hmm...why can I not pull down the branch?

git fetch

git co martin-ebay:donut-chart

error: pathspec 'martin-ebay:donut-chart' did not match any file(s) known to git

[agliga]

Hmm...why can I not pull down the branch?

git fetch

git co martin-ebay:donut-chart

error: pathspec 'martin-ebay:donut-chart' did not match any file(s) known to git

You need to add his fork using git remote add martin path-to-fork (ssh clone path) Then do a git fetch —all And then checkout using martin or whatever name you added the fork with in remote add.

[ArtBlue]

You need to add his fork using git remote add martin path-to-fork (ssh clone path) Then do a git fetch —all And then checkout using martin or whatever name you added the fork with in remote add.

Thanks! I didn't realize it was in a different repo. I actually found an easier way; just check out the pr branch. I never knew this existed. Very slick.

gh pr checkout 1837

[martin-ebay]

that's cool, I didn't know you could checkout a PR from a fork like that

[martin-ebay]

@agliga I do think it will change based on the new colors / patterns in the updated design. I'm thinking I might shift focus later today and start updating the donut chart to match.

As far as will the code change with Highcharts I wasn't planning on it. But we could always revisit it after.

[agliga]

Closing for now as per Martin.

With highcharts this might change so we will revisit later.

Possibly might create a new repo for charts.