This repository has been archived by the owner on Sep 11, 2024. It is now read-only.
feat: Add animations to chart tooltip/heatfield/selection-area overlay to improve user experience. #476
Labels
Comments
peter-affenzeller
added a commit
to peter-affenzeller/barista
that referenced
this issue
Feb 13, 2020
Part of dynatrace-oss#476 Fade in heatfield overlay Animate scale of heatfield marker and heatfield backdrop
4 tasks
4 tasks
peter-affenzeller
added a commit
to peter-affenzeller/barista
that referenced
this issue
Feb 14, 2020
Part of dynatrace-oss#476 Create reusable fade animation Fade in heatfield overlay Animate scale of heatfield marker and heatfield backdrop
peter-affenzeller
added a commit
to peter-affenzeller/barista
that referenced
this issue
Feb 14, 2020
Part of dynatrace-oss#476 Create reusable fade animation Fade in heatfield overlay Animate scale of heatfield marker and heatfield backdrop
peter-affenzeller
added a commit
to peter-affenzeller/barista
that referenced
this issue
Feb 14, 2020
Part of dynatrace-oss#476 Create reusable fade animation Fade in heatfield overlay Animate scale of heatfield marker and heatfield backdrop
peter-affenzeller
added a commit
to peter-affenzeller/barista
that referenced
this issue
Feb 14, 2020
Part of dynatrace-oss#476 Depends on dynatrace-oss#594 Fade in/out timestamp and range overlay. Added state to the reusable fade animation to set the opacity to 1 if the state is not void. Else the selection area overlay would not be visible after fading out once (e.g. when switching from a range to a timestamp)
|
@peter-affenzeller Have you already aligned the animation speed and style with our UX department? If you have to could you be so kind and comment or write the UX feedback to this issue? Since we are the open-source we try to communicate decisions transparent for everybody. So a quick clarification would be great for your PR #594 |
lukasholzer
added
the
pr: needs-issue-update
|
@lukasholzer yes, I did, sry, forgot to add that as a comment to the PR itself. |
peter-affenzeller
added a commit
to peter-affenzeller/barista
that referenced
this issue
Mar 9, 2020
Part of dynatrace-oss#476 Create reusable fade animation Fade in heatfield overlay Animate scale of heatfield marker and heatfield backdrop
peter-affenzeller
added a commit
to peter-affenzeller/barista
that referenced
this issue
Mar 9, 2020
Part of dynatrace-oss#476 Create reusable fade animation Fade in heatfield overlay Animate scale of heatfield marker and heatfield backdrop
peter-affenzeller
added a commit
to peter-affenzeller/barista
that referenced
this issue
Mar 9, 2020
Part of dynatrace-oss#476 Depends on dynatrace-oss#594 Fade in/out timestamp and range overlay. Added state to the reusable fade animation to set the opacity to 1 if the state is not void. Else the selection area overlay would not be visible after fading out once (e.g. when switching from a range to a timestamp)
lukasholzer
removed
the
pr: needs-issue-update
ffriedl89
pushed a commit
that referenced
this issue
Mar 31, 2020
Part of #476 Create reusable fade animation Fade in heatfield overlay Animate scale of heatfield marker and heatfield backdrop
ffriedl89
pushed a commit
that referenced
this issue
Mar 31, 2020
Part of #476 Create reusable fade animation Fade in heatfield overlay Animate scale of heatfield marker and heatfield backdrop
peter-affenzeller
added a commit
to peter-affenzeller/barista
that referenced
this issue
Mar 31, 2020
Part of dynatrace-oss#476 Depends on dynatrace-oss#594 Fade in/out timestamp and range overlay. Added state to the reusable fade animation to set the opacity to 1 if the state is not void. Else the selection area overlay would not be visible after fading out once (e.g. when switching from a range to a timestamp)
peter-affenzeller
added a commit
to peter-affenzeller/barista
that referenced
this issue
Apr 7, 2020
Part of dynatrace-oss#476 Fade in/out timestamp and range overlay. Added state to the reusable fade animation to set the opacity to 1 if the state is not void. Else the selection area overlay would not be visible after fading out once (e.g. when switching from a range to a timestamp)
peter-affenzeller
added a commit
to peter-affenzeller/barista
that referenced
this issue
May 6, 2020
Part of dynatrace-oss#476 Fade in/out timestamp and range overlay. Added state to the reusable fade animation to set the opacity to 1 if the state is not void. Else the selection area overlay would not be visible after fading out once (e.g. when switching from a range to a timestamp)
yngrdyn
pushed a commit
to yngrdyn/barista
that referenced
this issue
Nov 9, 2020
Part of dynatrace-oss#476 Create reusable fade animation Fade in heatfield overlay Animate scale of heatfield marker and heatfield backdrop
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Feature Request
Summary
Add some basic animations to improve the user experience when interacting with the chart. E.g. fade in and fade out for the selection area overlay to make it clearer that an overlay at a previously selected timestamp has been closed and a new overlay opened at the currently selected position.
Feature Description
Previously, chart overlays popped up right after hovering, opening a heatfield or selecting a timestamp/range. When selecting a new timestamp, the overlay instantly changed position to the updated selection and the data updated. By adding some basic animations, the user experience can be enhanced and the animations can help guide the focus of the user.
There already is an open PR (#450), I will split this into separate PRs for each animated part of the chart as discussed with @lukasholzer after working on the PR comments.
The text was updated successfully, but these errors were encountered: