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(core): add support for horizontal bar charts #415

Merged

Conversation

natashadecoste
Copy link
Contributor

Updates

  • change horizontal-zero-line to be vertical or horizontal (depending on bar chart orientation)
  • added options for bar chart to be horizontal or vertical orientation
  • updated bar-simple, bar-grouped and bar-stacked to support horizontal bars

Demo screenshots or recording

Horizontal Simple Bar
image

Horizontal Stacked Bar
image

Update the multipoint ordering on tooltip for horizontal stacked bar
image

To-do

  • make sure domains get padded more so that bars dont overlap the axis lines ever
  • group bar chart horizontal
  • stacked bar chart horizontal
  • reverse order of the tooltip for the stacked bar (values will be top-down in order that bars are left to right)
  • add demos for all horizontal bar charts

Review checklist (for reviewers only)

  • Demos all features
  • Documented/annotated
  • Matches UI/UX specs
  • Meets the code style guide
  • Accessible
  • Mobile first (responsive)
  • RTL support (bidirectional text)
  • Performant (limited bloat)

@natashadecoste
Copy link
Contributor Author

Closes #133

@netlify
Copy link

netlify bot commented Dec 2, 2019

Deploy preview for carbon-charts-vue ready!

Built with commit 08cc59c

https://deploy-preview-415--carbon-charts-vue.netlify.com

@netlify
Copy link

netlify bot commented Dec 2, 2019

Deploy preview for carbon-charts-angular ready!

Built with commit 08cc59c

https://deploy-preview-415--carbon-charts-angular.netlify.com

@netlify
Copy link

netlify bot commented Dec 2, 2019

Deploy preview for carbon-charts-react ready!

Built with commit 08cc59c

https://deploy-preview-415--carbon-charts-react.netlify.com

@netlify
Copy link

netlify bot commented Dec 2, 2019

Deploy preview for carbon-charts-core ready!

Built with commit 6150d52

https://deploy-preview-415--carbon-charts-core.netlify.com

cameroncalder
cameroncalder previously approved these changes Dec 10, 2019
@natashadecoste natashadecoste requested a review from a team as a code owner December 18, 2019 16:12
@natashadecoste natashadecoste self-assigned this Dec 19, 2019
Copy link
Contributor

@cal-smith cal-smith left a comment

Choose a reason for hiding this comment

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

Looks good! The Cartesian scales service is a great solution to the horizontal/vertical bar problem ... The animations look sweet too (The core netlify preview is working again 🙌)

packages/core/src/components/graphs/bar.ts Outdated Show resolved Hide resolved
packages/core/demo/demo-data/bar.ts Outdated Show resolved Hide resolved
Copy link
Member

@zvonimirfras zvonimirfras left a comment

Choose a reason for hiding this comment

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

It was a delight to read some parts of this PR

packages/core/demo/demo-data/bar.ts Outdated Show resolved Hide resolved
packages/core/src/components/axes/zero-line.ts Outdated Show resolved Hide resolved
packages/core/src/components/axes/zero-line.ts Outdated Show resolved Hide resolved
packages/core/src/components/graphs/bar-grouped.ts Outdated Show resolved Hide resolved
packages/core/src/components/graphs/bar-stacked.ts Outdated Show resolved Hide resolved
packages/core/src/components/graphs/bar-stacked.ts Outdated Show resolved Hide resolved
packages/core/src/services/scales-cartesian.ts Outdated Show resolved Hide resolved
packages/core/src/services/scales-cartesian.ts Outdated Show resolved Hide resolved
cal-smith
cal-smith previously approved these changes Jan 21, 2020
Copy link
Contributor

@cal-smith cal-smith left a comment

Choose a reason for hiding this comment

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

LGTM!

cal-smith
cal-smith previously approved these changes Jan 21, 2020
packages/core/demo/demo-data/bar.ts Outdated Show resolved Hide resolved
packages/core/demo/demo-data/bar.ts Outdated Show resolved Hide resolved
packages/core/demo/demo-data/bar.ts Outdated Show resolved Hide resolved
@theiliad theiliad merged commit 6a480f0 into carbon-design-system:master Jan 21, 2020
theiliad added a commit to theiliad/carbon-charts that referenced this pull request May 17, 2021
…em#415)

* feat(core): add support for horizontal bar charts

* add stories for horizontal bar

* add horizontal discrete bar chart

* add vue and angular stories

* update zero-line transition

* Update packages/core/src/components/graphs/bar-stacked.ts

Co-Authored-By: Cal Smith <[email protected]>

* enable switching orientations for grouped bar without duplicating draw logic

* fix lint errors

* draw simple bars in horizontal & vertical orientations

* draw stacked bars regardless of 2D orientation

* add orientation support for time-series stacked bar charts

* use the calculated bar width in all 3 bar types

* add requested PR changes

* fix lint error

* fix lint error

* fix tests

* fix lint error

* fix tests tsconfig issue

* add knobs to all stories

* add requested PR changes

* code style changes

* code style fixes

Co-authored-by: Eliad Moosavi <[email protected]>
Co-authored-by: Cal Smith <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants