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

Sensor chart ux improvements #447

Merged
merged 34 commits into from Jun 25, 2022
Merged

Sensor chart ux improvements #447

merged 34 commits into from Jun 25, 2022

Conversation

Flix6x
Copy link
Contributor

@Flix6x Flix6x commented Jun 23, 2022

This PR introduces a collapsible sidepanel on the left of the sensor page, activated by hover or swipe, depending on the device. Also implements many smaller UX improvements: see the list below.

->

  • Show spinner while fetching new data
  • Show single month and fewer custom ranges
  • Rotate y-axis labels to improve legibility (addresses Long sensor names reveal a need to model how sensors are grouped within assets #442)
  • Update sensor data and annotations together instead of first come first serve
  • Streamline calendar styling
  • Streamline use of box shadows
  • Fix positioning of chart actions button
  • Move units to right side of tooltip
  • Cancel previous request upon a new calendar selection
  • Style navbar logo to have a consistent height and adjust the width of the navbar-header accordingly
  • Actually load the font intended to be used in 0.10
  • Make sure time axis labels aren't too close to each other

Flix6x added 30 commits June 23, 2022 16:19
Signed-off-by: F.N. Claessen <felix@seita.nl>
Signed-off-by: F.N. Claessen <felix@seita.nl>
Signed-off-by: F.N. Claessen <felix@seita.nl>
Signed-off-by: F.N. Claessen <felix@seita.nl>
Signed-off-by: F.N. Claessen <felix@seita.nl>
Signed-off-by: F.N. Claessen <felix@seita.nl>
Signed-off-by: F.N. Claessen <felix@seita.nl>
…at the bottom of the calendar

Signed-off-by: F.N. Claessen <felix@seita.nl>
Signed-off-by: F.N. Claessen <felix@seita.nl>
Signed-off-by: F.N. Claessen <felix@seita.nl>
Signed-off-by: F.N. Claessen <felix@seita.nl>
Signed-off-by: F.N. Claessen <felix@seita.nl>
Signed-off-by: F.N. Claessen <felix@seita.nl>
Signed-off-by: F.N. Claessen <felix@seita.nl>
Signed-off-by: F.N. Claessen <felix@seita.nl>
…d in the y-axis label

Signed-off-by: F.N. Claessen <felix@seita.nl>
Signed-off-by: F.N. Claessen <felix@seita.nl>
Signed-off-by: F.N. Claessen <felix@seita.nl>
Signed-off-by: F.N. Claessen <felix@seita.nl>
… being on the left

Signed-off-by: F.N. Claessen <felix@seita.nl>
Signed-off-by: F.N. Claessen <felix@seita.nl>
Signed-off-by: F.N. Claessen <felix@seita.nl>
…vigation can still be used

Signed-off-by: F.N. Claessen <felix@seita.nl>
…st the sidepanel background

Signed-off-by: F.N. Claessen <felix@seita.nl>
… the navbar-header accordingly

Signed-off-by: F.N. Claessen <felix@seita.nl>
Signed-off-by: F.N. Claessen <felix@seita.nl>
Signed-off-by: F.N. Claessen <felix@seita.nl>
…a dictionary with vega-lite specs

Signed-off-by: F.N. Claessen <felix@seita.nl>
…st of years with the pointer. This stops the side panel from collapsing and reopening.

Signed-off-by: F.N. Claessen <felix@seita.nl>
Signed-off-by: F.N. Claessen <felix@seita.nl>
…ar styling

Signed-off-by: F.N. Claessen <felix@seita.nl>
Signed-off-by: F.N. Claessen <felix@seita.nl>
Signed-off-by: F.N. Claessen <felix@seita.nl>
@Flix6x Flix6x added this to the 0.11.0 milestone Jun 23, 2022
@nhoening
Copy link
Contributor

Thanks for the screenshots!

Shouldn't the data plot move to the left if the date picker is collapsed?

@Flix6x
Copy link
Contributor Author

Flix6x commented Jun 23, 2022

You're welcome. The position of the data plot is meant to be fixed, like so:

Peek 2022-06-23 17-15
.

@Flix6x Flix6x requested a review from nhoening June 23, 2022 15:18
@coveralls
Copy link
Collaborator

Pull Request Test Coverage Report for Build 2550022510

  • 1 of 3 (33.33%) changed or added relevant lines in 3 files are covered.
  • 1 unchanged line in 1 file lost coverage.
  • Overall coverage remained the same at 68.377%

Changes Missing Coverage Covered Lines Changed/Added Lines %
flexmeasures/data/models/charts/defaults.py 0 1 0.0%
flexmeasures/data/models/time_series.py 0 1 0.0%
Files with Coverage Reduction New Missed Lines %
flexmeasures/data/models/time_series.py 1 75.09%
Totals Coverage Status
Change from base Build 2507541616: 0.0%
Covered Lines: 7093
Relevant Lines: 9838

💛 - Coveralls

@Flix6x Flix6x marked this pull request as ready for review June 23, 2022 15:24
@nhoening
Copy link
Contributor

nhoening commented Jun 23, 2022 via email

@Flix6x
Copy link
Contributor Author

Flix6x commented Jun 23, 2022

The expanding sidepanel will overlap the chart. For the smallest screen sizes, the sidepanel disappears, and its contents are shown above the chart (like we had before).

@Flix6x Flix6x merged commit 43aa25d into main Jun 25, 2022
@Flix6x Flix6x deleted the sensor-chart-ux-improvements branch June 25, 2022 12:05
@nhoening
Copy link
Contributor

nhoening commented Oct 11, 2022 via email

@Flix6x
Copy link
Contributor Author

Flix6x commented Nov 9, 2022

I don't see the data plot moving into the free space. What is the fix?

No no, I didn't mean that anything is meant to be fixed—as in, resolving a problem. I meant that the plot area is meant to be fixed—as in, not moving.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants