Implement zoom functionality for graphs

[bryanlundberg]

Implement zoom functionality for graphs

[KriteshTimsina]

Would like to work on this issue . Could you explain the issue or share some screen recordings or photos of what you're trying to achieve?

[bryanlundberg]

I have something similar in mind to this example https://recharts.org/en-US/examples/HighlightAndZoomLineChart, but instead of selecting with the mouse, you would use the mouse to zoom in and out by scrolling the mouse wheel.

[bryanlundberg]

Just in case, I refer to this graph.

[KriteshTimsina]

Sure! Working on it

[KriteshTimsina]

I have a few concerns here.

1. Scrolling it down takes me to the table. So achieving onMouseScrollDown event may be difficult. Could you give me any idea on overcoming that issue?
2. I have no data on charts. How can i obtain that?
   

Wouldn't range slider be good idea to implement zoom in and out functionality.

[bryanlundberg]

1. Scrolling it down takes me to the table. So achieving onMouseScrollDown event may be difficult. Could you give me any idea on overcoming that issue?

I havent had the chance to explore how to achieve that effect yet, but Im aware we are discussing a rather advanced feature.

2. I have no data on charts. How can i obtain that?
   

The data starts with the raw data saved in localStorage under the key "cubes"

1. Create a cube
2. Go to the timer
3. Select the created cube
4. Spam some solves using key "Space", need hold 0.5s before start, press "Space" to stop it.
5. Done, data generated

This data is then processed in a variable called "data." CategoryStatistics.tsx

is passed as a prop to the chart component at the same time.

This process transforms "cubes" into an organized array exclusively of solves sorted by date. The result is structured as follows:

cubeAll: an array containing all-time solves for the selected cube.
cubeSession: an array comprising solves from the current session for the selected cube.
global: an array containing all-time solves for all cubes within the same category.
session: an array consisting of solves from the current session for all cubes within the same category.

With these arrays at your disposal, you have the flexibility to generate and showcase a wide range of content.

In fact, as you may have already noticed, the current chart is not fully realized, as it presently only displays global statistics in a single line. However, my intention was to set it up for showcasing more diverse content, allowing for the inclusion of multiple lines on the same chart.

Objective is here: LineCharter.tsx

The data originates from the {data} parameter within the function and is subsequently processed through a transform function. This transform function serves to convert the array of solves, into a format suitable for display using the Recharter npm library, while converting milliseconds into seconds too.

Wouldn't range slider be good idea to implement zoom in and out functionality.

You require the mouse interaction to enable precise zooming in and out. Additionally, Im aiming for a modern design.

Quick draw 🦕

Another essential feature to implement is the ability to navigate between data points by dragging the mouse either to the right or to the left.

Overall, this project represents a significant work.

[bryanlundberg]

I have come across a library that already has all the required functionality implemented 😮. If you'd like, you can consider replacing the current one with this library. Here's the link to the docs:
https://tradingview.github.io/lightweight-charts/docs/series-types#line