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

✨(frontend) Filter video views #17

Merged
merged 8 commits into from
Jul 21, 2023
Merged

✨(frontend) Filter video views #17

merged 8 commits into from
Jul 21, 2023

Conversation

lebaudantoine
Copy link
Collaborator

@lebaudantoine lebaudantoine commented Jun 12, 2023

Purpose

Implement the initial filtering tools for our web dashboard app

Proposal

This PR introduces a shared filters state that updates the video views chart component.

Capture d’écran 2023-07-20 à 23 48 43

Current filters are:

  • Date range.
  • Multi-select video IDs.

Some echarts animation might feel buggy, we are constrained by this issue. Plus, recent API refactoring by @cyrillay modified the way we handle null-view day. It should be fixed in the API soon.

Subsequent PRs will address the refactoring of the UI packages to further enhance the project's structure and maintainability.

Note, that DateRangePicker gonna evolved when this PR is merged.

Urgent: We need to discuss time management in Warren (both frontend and backend) as soon as possible. This crucial conversation will help ensure a successful implementation.

New release of Cunningham offers components
such as DatePicker or DateRangePicker, which
are necessary to filter our data.
Generated design tokens were breaking the
default Roboto font. These new values are
copied from the Cunningham demo app.
Introduce a new component responsible to inject all
the required providers to make warren web app works.
To manage and share filters' state across multiple components,
we adopted a basic workaround by using React context.
This approach allows us to store and provide the filters state
efficiently to all subscribers in our app.
Factorize Axios instanciation and configuration
in a dedicated file, along the react-query.
We would avoid dupplicating these lines.
This component would be responsible to render the
filters bar in our dashboarding web app.
Component is now subscribing to filters state.
Note: Time management in the current version of
the frontend and the API is still bulky. A lot
of work need to be done.
@lebaudantoine lebaudantoine marked this pull request as ready for review July 20, 2023 22:02
@lebaudantoine lebaudantoine changed the title [WIP] ✨(frontend) filter views on date ✨(frontend) Filter video views Jul 20, 2023
Copy link
Contributor

@jmaupetit jmaupetit left a comment

Choose a reason for hiding this comment

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

Amazing! We need to discuss few improvements such as:

  • being able to select all videos
  • toggle stacked (cumulative) views

src/frontend/packages/ui/video/Views.tsx Show resolved Hide resolved
src/frontend/packages/ui/video/Views.tsx Show resolved Hide resolved
Copy link
Contributor

@jmaupetit jmaupetit left a comment

Choose a reason for hiding this comment

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

I think we can merge this as is and iterate later 💪

Documentation misled me to think only UTC timezone was allowed.
This add an example of handling queries in a non-UTC timezone
using an ISO format.
@lebaudantoine lebaudantoine merged commit 107762b into main Jul 21, 2023
25 checks passed
@lebaudantoine lebaudantoine deleted the feature/date-picker branch July 21, 2023 17:30
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants