Add graph visualization for selected cells in data browser

[mtrezza]

New Feature / Enhancement Checklist

• [x] I am not disclosing a vulnerability.
• [x] I am not just asking a question.
• [x] I have searched through existing issues.

Current Limitation

Descriptive statistics were introduced with https://github.com/parse-community/parse-dashboard/pull/2529 to calculate a single metric from a selected set of numbers. It is currently not possible to show how the selected values relate to each other.

Feature / Enhancement Description

Add a graph visualization for the selected set of numbers.

Visualizations:

• a) Number series: values selected from one or more columns where each column contains a number:

• b) Time series: values selected from multiple columns where column 1 contains date values and subsequent columns contain numbers:

  

Features:

• When selecting cells, next to the descriptive statistics drop-down, a button to show/hide the visualization should appear.
• The graph should not cover the data browser, but be displayed in a side-panel that can be resized, which will also dynamically resize the graph. This allows the user to scroll the data browser and see the values which the graph is based on, while looking at the graph side-by-side.
• When the selection is changed, the graph should change dynamically. When selecting a single cell, the side panel should disappear and automatically re-appear when multiple values are selected.

[parse-github-assistant[bot]]

Thanks for opening this issue!

• 🎉 We are excited about your ideas for improvement!

[mtrezza]

@AshishBarvaliya maybe interesting for you

[syedbarimanjan]

@mtrezza i would like to work on this, anything i should keep in mind while working on it.

I am thinking of using pure canvas to create the graphs or if that is too much code to maintain then i will just simply use d3 for it. I couldnt find a side-panel in the components is it also to be created?

[mtrezza]

@syedbarimanjan regarding the side panel, maybe take a look at https://github.com/parse-community/parse-dashboard/pull/2584#issuecomment-2284491339; it also adds a side panel. We'd want to use a lightweight lib for the graph rendering, with an active community and well maintained, i.e. frequent and recent commits and releases.

[syedbarimanjan]

waiting for #2584 to get merged so i can use the same side panel and not create a new one.

[mtrezza]

@syedbarimanjan The PR has been merged.

[syedbarimanjan]

@syedbarimanjan The PR has been merged.

I will start working on it.

[weinStag]

Hey guys, i've implemented a solution and it has already passed on the CodeRabbit review, if anyone wants to review it, i think it would be a pretty strong feature to add to the application!

here is the link if you want to review: Pull Request

if you want to contact me: [REDACTED] or via my discord: [REDACTED]

[mtrezza]

HI @weinStag, thanks for the PR, I've updated your PR description to link it to this issue.