[Interactive Chart] - Support Drawing Tools

[Costa769]

Overview

Offer users basic drawing tools like lines, squares, triangles, and channels to mark patterns on the price chart, assisting them in making informed decisions about which strategy to use and how to configure its parameters. TradingView can be used as a reference, as it offers all the drawing tools we plan to implement, and the functionality of these tools is similar to the behavior we aim to achieve.

Designs

Drawing tools

Implementation

Add the charting menu with the following options to the interactive chart in the following order:

1. Cross (default selection)
2. Trend Line
3. Extended Line
4. Parallel Channel
5. Triangle
6. Rectangle
7. Trash

Cross Option
The Cross option is the default selection in the drawing tools menu. When selected, it does not allow the user to draw on the interactive chart but enables chart interaction, such as zooming in/out and horizontal scrolling. The chart will display corresponding date and price values on the axes based on the mouse pointer’s position.

Trash Option

• The Trash icon cannot be selected, only clicked.
• Clicking the Trash icon deletes all drawings from the interactive chart.

Drawing Tools Behavior

When the user selects one of the drawing tools like Trend Line, Extended Line, Parallel Channel, Triangle, or Rectangle:

Befor user start to draw:

• The mouse pointer will appear the same as with the Cross option.
• Date and price values corresponding to the pointer’s position will be displayed on the axes.
• Users can zoom in/out but cannot scroll horizontally while the drawing is in progress.

Once the drawing is completed:

• The selection will automatically switch back to the Cross option.
• Focus will remain on the last drawn shape.

General Features for all Drawings on the Interactive Chart:

• Move & Adjust: After drawing, users should be able to click on any shape and drag it to adjust its position or reshape it (e.g., move endpoints for lines, resize squares/triangles, adjust the slope of channels).
• Support for multiple drawings: Users can draw multiple shapes on the chart, whether of the same type or different types.
• Display shape parameters on the axes: When a shape is selected, the corresponding values should be highlighted on both the time and price axes.
  -- If the shape is unselected, no parameters should be shown on the axes
• Delete option: Users should be able to remove any drawn shape by selecting it and pressing the delete button on their keyboard or click on the Trash icon in the drawing tools and delete all the drawings on the chart at once

Tooltips

Hovering over each charting tool option will display a tooltip with the tool's name. The tooltip will reflect the corresponding option name, such as showing "Cross" for the Cross option, and so on for the others.