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

Charts: Add support for legends and grids #2324

Merged
merged 4 commits into from Jun 25, 2019

Conversation

@dlabrecq
Copy link
Member

dlabrecq commented Jun 21, 2019

Similar to the new donut utilization charts, this adds legend support for charts like area, bar, donut, line, pie, & stack. This helps users by automatically centering the legend within the same SVG, both vertically and horizontally.

In addition, this adds support to show grid and ticks along one axis, per the PF4 design below.
https://drive.google.com/file/d/1jCxBH0niB78V0PJvzHDBr8Hm5wKmDlgH/view

Fixes:
#2075
#2323
#1692

Screen Shot 2019-06-21 at 12 41 11 PM

Screen Shot 2019-06-21 at 12 41 24 PM

Screen Shot 2019-06-21 at 12 41 34 PM

Screen Shot 2019-06-21 at 12 41 52 PM

Screen Shot 2019-06-21 at 12 42 12 PM

@patternfly-build

This comment has been minimized.

Copy link
Contributor

patternfly-build commented Jun 21, 2019

PatternFly-React preview: https://patternfly-react-pr-2324.surge.sh

@dlabrecq dlabrecq force-pushed the dlabrecq:2075-legend-support branch from e7bcfaa to 269f445 Jun 21, 2019
@dlabrecq dlabrecq mentioned this pull request Jun 21, 2019
@dlabrecq dlabrecq requested a review from TheRealJon Jun 21, 2019
@gdoyle1

This comment has been minimized.

Copy link

gdoyle1 commented Jun 21, 2019

@dlabrecq Those gridlines should be behind the chart fills if that's possible!

@dlabrecq dlabrecq force-pushed the dlabrecq:2075-legend-support branch from 269f445 to 67037a6 Jun 22, 2019
@dlabrecq

This comment has been minimized.

Copy link
Member Author

dlabrecq commented Jun 22, 2019

@gdoyle1 Updated the examples so the gird is rendered behind the charts.

Copy link
Contributor

redallen left a comment

This code is readable, makes a lot of sense, and works.

}: ChartVoronoiContainerProps) => {
// Note: theme is required by voronoiContainerMixin, but VictoryVoronoiContainer is missing a prop type

// @ts-ignore

This comment has been minimized.

Copy link
@redallen

redallen Jun 24, 2019

Contributor

That's neat.

@redallen

This comment has been minimized.

Copy link
Contributor

redallen commented Jun 25, 2019

Conflicts from merging #2341. If those are resolved and @TheRealJon approves, we can get this in today.

@dlabrecq dlabrecq force-pushed the dlabrecq:2075-legend-support branch from 12d74c6 to fc8f6f0 Jun 25, 2019
@TheRealJon

This comment has been minimized.

Copy link
Contributor

TheRealJon commented Jun 25, 2019

@dlabrecq Looks like you missed a conflict marker at ChartDonutUtilization.tsx:L15

@dlabrecq dlabrecq force-pushed the dlabrecq:2075-legend-support branch from fc8f6f0 to 6d0845d Jun 25, 2019
@dlabrecq

This comment has been minimized.

Copy link
Member Author

dlabrecq commented Jun 25, 2019

Fixed

@TheRealJon TheRealJon merged commit d6b03d8 into patternfly:master Jun 25, 2019
8 checks passed
8 checks passed
ci/circleci: build Your tests passed on CircleCI!
Details
ci/circleci: build_integration Your tests passed on CircleCI!
Details
ci/circleci: build_pf3_docs Your tests passed on CircleCI!
Details
ci/circleci: build_pf4_docs Your tests passed on CircleCI!
Details
ci/circleci: lint Your tests passed on CircleCI!
Details
ci/circleci: test_jest_other Your tests passed on CircleCI!
Details
ci/circleci: test_jest_pf4 Your tests passed on CircleCI!
Details
ci/circleci: upload_docs Your tests passed on CircleCI!
Details
@dlabrecq dlabrecq deleted the dlabrecq:2075-legend-support branch Jul 2, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
PF 4 Backlog
  
Awaiting triage
5 participants
You can’t perform that action at this time.