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

fix(metric): background color for bar with interactions #2248

Merged
merged 5 commits into from
Nov 19, 2023

Conversation

nickofthyme
Copy link
Collaborator

@nickofthyme nickofthyme commented Nov 19, 2023

Summary

Fixes changes made in #2184 with the interaction hover coloring for metrics with progress bar.

Before

Screen Recording 2023-11-19 at 10 20 57 AM

After

Screen Recording 2023-11-19 at 10 18 21 AM

Details

When adding support for transparent colors in #2184 we used the default chartBackground component to supply the background and have the browser blend the colors. However, these changes removed the interaction lightening affect on metrics with bar charts because this would simply set no background on the .echMetric so the background would show through. But without any color we cannot lighten it to render the interaction affect.

closes #2246

Checklist

  • The proper chart type label has been added (e.g. :xy, :partition)
  • The proper feature labels have been added (e.g. :interactions, :axis)
  • Unit tests have been added or updated to match the most common scenarios
  • Visual changes have been tested with light and dark themes

@nickofthyme nickofthyme added bug Something isn't working :styling Styling related issue :metric Related to Metric chart labels Nov 19, 2023
@nickofthyme
Copy link
Collaborator Author

buildkite update screenshots

@nickofthyme
Copy link
Collaborator Author

buildkite update screenshots

@nickofthyme
Copy link
Collaborator Author

buildkite test this

@nickofthyme nickofthyme merged commit dcb56fa into elastic:main Nov 19, 2023
13 checks passed
@nickofthyme nickofthyme deleted the fix-metric-bar-coloring branch November 19, 2023 22:17
nickofthyme added a commit to nickofthyme/elastic-charts that referenced this pull request Nov 19, 2023
# Conflicts:
#	e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/bullet-as-metric-horizontal/bullet-as-metric/should-render-with-negative-values-chrome-linux.png
#	e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/bullet-as-metric-horizontal/bullet-as-metric/should-render-with-negative-values-reversed-chrome-linux.png
#	e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/bullet-as-metric-horizontal/bullet-as-metric/should-render-with-positive-negative-values-chrome-linux.png
#	e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/bullet-as-metric-horizontal/bullet-as-metric/should-render-with-positive-negative-values-reversed-chrome-linux.png
#	e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/bullet-as-metric-horizontal/bullet-as-metric/should-render-with-positive-values-chrome-linux.png
#	e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/bullet-as-metric-horizontal/bullet-as-metric/should-render-with-positive-values-reversed-chrome-linux.png
#	e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/bullet-as-metric-two-thirds-circle/bullet-as-metric/should-render-with-negative-values-chrome-linux.png
#	e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/bullet-as-metric-two-thirds-circle/bullet-as-metric/should-render-with-negative-values-reversed-chrome-linux.png
#	e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/bullet-as-metric-two-thirds-circle/bullet-as-metric/should-render-with-positive-negative-values-chrome-linux.png
#	e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/bullet-as-metric-two-thirds-circle/bullet-as-metric/should-render-with-positive-negative-values-reversed-chrome-linux.png
#	e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/bullet-as-metric-two-thirds-circle/bullet-as-metric/should-render-with-positive-values-chrome-linux.png
#	e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/bullet-as-metric-two-thirds-circle/bullet-as-metric/should-render-with-positive-values-reversed-chrome-linux.png
#	e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/bullet-as-metric-vertical/bullet-as-metric/should-render-with-negative-values-chrome-linux.png
#	e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/bullet-as-metric-vertical/bullet-as-metric/should-render-with-negative-values-reversed-chrome-linux.png
#	e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/bullet-as-metric-vertical/bullet-as-metric/should-render-with-positive-negative-values-chrome-linux.png
#	e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/bullet-as-metric-vertical/bullet-as-metric/should-render-with-positive-negative-values-reversed-chrome-linux.png
#	e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/bullet-as-metric-vertical/bullet-as-metric/should-render-with-positive-values-chrome-linux.png
#	e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/bullet-as-metric-vertical/bullet-as-metric/should-render-with-positive-values-reversed-chrome-linux.png
#	packages/charts/src/chart_types/metric/renderer/dom/metric.tsx
#	packages/charts/src/chart_types/metric/renderer/dom/progress.tsx
nickofthyme pushed a commit that referenced this pull request Nov 20, 2023
# [61.1.0](v61.0.0...v61.1.0) (2023-11-20)

### Bug Fixes

* **deps:** update dependency @elastic/eui to v91 ([#2233](#2233)) ([e89f623](e89f623))
* **metric:** add option to set empty cell background color ([#2247](#2247)) ([6a9fb86](6a9fb86))
* **metric:** background color for bar with interactions ([#2248](#2248)) ([dcb56fa](dcb56fa))

### Features

* **bullet:** improve header layout and positioning ([#2243](#2243)) ([b3a95d2](b3a95d2))
* **bullet:** new design style and implementation ([#2156](#2156)) ([fca6cdd](fca6cdd))
nickofthyme pushed a commit that referenced this pull request Nov 20, 2023
## [61.0.1](v61.0.0...v61.0.1) (2023-11-20)

### Bug Fixes

* **metric:** add option to set empty cell background color ([#2247](#2247)) [61.0.x] ([#2250](#2250)) ([fe3aefe](fe3aefe))
* **metric:** background color for bar with interactions ([#2248](#2248)) [61.0.x] ([#2249](#2249)) ([4483606](4483606))
nickofthyme added a commit to nickofthyme/elastic-charts that referenced this pull request Nov 20, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working :metric Related to Metric chart :styling Styling related issue
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Metric progress bar color should blend with background when transparent
1 participant