Skip to content

Chart: Tooltip legend#4371

Merged
redallen merged 1 commit intopatternfly:masterfrom
dlabrecq:3219-tooltip-legend
Jun 11, 2020
Merged

Chart: Tooltip legend#4371
redallen merged 1 commit intopatternfly:masterfrom
dlabrecq:3219-tooltip-legend

Conversation

@dlabrecq
Copy link
Member

@dlabrecq dlabrecq commented Jun 11, 2020

Added support for a legend tooltip. Reviewed the design with @nlcwong.

This uses the existing legend component so theme color scales and legend symbols are synced with the chart.

Created a few components and utilities to make this easier for others to implement. Although, I had to override Victory's flyout (aka the tooltip container) to get the pointer orientation working the way Natalie wanted in her mocks.

Fixes #3219

chrome-capture (2)

To help visualize the code, this is an abstract of my structure. I simply override label components to customize the tooltip and add the existing legend component inside the flyout. Although, I've wrapped this with new components to encapsulate functionality.

<ChartVoronoiContainer labelComponent={
    <ChartTooltip labelComponent={<ChartLegend labelComponent={<ChartLabel />}...

@dlabrecq dlabrecq requested review from ddonahue007 and redallen June 11, 2020 03:38
@patternfly-build
Copy link
Collaborator

patternfly-build commented Jun 11, 2020

This uses the existing legend component so theme color scales and legend symbols are synced with the chart.

Fixes patternfly#3219
@dlabrecq dlabrecq force-pushed the 3219-tooltip-legend branch from 63a6f9b to 4e9e122 Compare June 11, 2020 04:06
Copy link
Member

@ddonahue007 ddonahue007 left a comment

Choose a reason for hiding this comment

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

LGTM, nice job

@redallen redallen merged commit f9ec3b0 into patternfly:master Jun 11, 2020
@patternfly-build
Copy link
Collaborator

Your changes have been released in:

  • @patternfly/react-charts@6.4.0
  • @patternfly/react-docs@5.3.30

Thanks for your contribution! 🎉

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.

Chart tooltip with colored legend

4 participants

Comments