Features/lightweight charts v5

[tran-thanh-phong]

No description provided.

[emma-uw]

Thank you for the migration. Maybe add resize and remove methods as well?

def resize_pane(self, pane_index: int, height: int):
        self.run_script(
            f"""
            if ({self.id}.chart.panes().length > {pane_index}) {{
                {self.id}.chart.panes()[{pane_index}].setHeight({height});
            }}
        """
        )

def remove_pane(self, pane_index: int):
   self.run_script(
       f"""
            {self.id}.chart.removePane({pane_index});
       """
   )

Seems like panes need to be in reverse order to autoresize correctly

chart.resize_pane(2, 100)
chart.resize_pane(1, 100)
chart.resize_pane(0, 800)

EDIT:
To keep old watermark functionality (background ticker) it needs to be something like this now

def watermark(self, text: str, font_size: int = 44, color: str = 'rgba(180, 180, 200, 0.5)'):
        """
        Adds a watermark to the chart.
        """
        self.run_script(f'''{self._chart.id}.createWatermark('{text}', {font_size}, '{color}')''')

public watermark: any;

createWatermark(text: string, fontSize: number, color: string) {
        if (!this.watermark) {
            this.watermark = createTextWatermark(this.chart.panes()[0], {
                horzAlign: 'center',
                vertAlign: 'center',
                lines: [{
                    text: text,
                    color: color,
                    fontSize: fontSize,
                }],
            });

            return;
        }

        this.watermark.applyOptions({
            lines: [{
                text: text,
                color: color,
                fontSize: fontSize,
            }]
        });
    }

And for markers

public seriesMarkers: any;

this.seriesMarkers = createSeriesMarkers(this.series, []);

def _update_markers(self):
        self.run_script(f'{self.id}.seriesMarkers.setMarkers({json.dumps(list(self.markers.values()))})')

[HEUDavid]

Awesome work! I tried lightweight-charts-v5, and it seems that chart.marker(**data) is incompatible.
The entire chart becomes unresponsive, with no clicking or scrolling. Switching back to lightweight-charts resolves the issue.
@tran-thanh-phong

[tran-thanh-phong]

Awesome work! I tried lightweight-charts-v5, and it seems that chart.marker(**data) is incompatible. The entire chart becomes unresponsive, with no clicking or scrolling. Switching back to lightweight-charts resolves the issue. @tran-thanh-phong

Thank you @HEUDavid for your feedback! Could you also attach error images, so I can better navigate the issue, please?

[tran-thanh-phong]

_update_markers

Hi @emma-uw, I have just updated the PR followed your comments. Please take a look again, thanks!

[jechaviz]

is this branch compatilble with latest python version?

[HEUDavid]

Awesome work! I tried lightweight-charts-v5, and it seems that chart.marker(**data) is incompatible. The entire chart becomes unresponsive, with no clicking or scrolling. Switching back to lightweight-charts resolves the issue. @tran-thanh-phong

Thank you @HEUDavid for your feedback! Could you also attach error images, so I can better navigate the issue, please?

I have tried your latest code branch[features/lightweight-charts-v5], and everything works great. It seems to run smoothly with no apparent bugs.

However, when drawing a vertical line, "No-text" label appears on the time axis. I looked into the code, and it seems to be controlled by the text() function in axis-view.tx, which returns "No-text".

When I draw a custom vertical line, I do not need the label. I have tried using labelVisible, axisLabelVisible, etc., but none of them work. (Apologies, I’m just a backend engineer...)

[tran-thanh-phong]

is this branch compatilble with latest python version?

I haven't test it with latest python version yet but I works fine on 3.11.6. Let's me also check with the latest one.

[One-sixth]

@tran-thanh-phong Very useful. I tried it out and it was very smooth. Found a small bug. The legend color is incorrect, everything else is fine.

[debegr92]

@louisnw01 can we merge this PR? Update to v5 would be really great!

[emma-uw]

Found out that line markers won't work anymore in the current variation. For my case I had to pass markers into createLineSeries for each line and createSeriesMarkers if said list wasn't empty. But maybe someone will come up with better solution for v5 implementation.

createLineSeries(name: string,
                     options: DeepPartial<LineStyleOptions & SeriesOptionsCommon>,
                     paneIndex?: number,
                     markerList?: any[]) {
        const line = this.chart.addSeries(LineSeries, { ...options }, paneIndex);
        if (markerList && markerList.length > 0) {
            createSeriesMarkers(line, markerList);
        }
        //this._seriesList.push(line);
        return {
            name: name,
            series: line,
        }
    }

[debegr92]

I did some tests today and this fork works perfectly in my application.
Screenshot was taken using the screenshot functions with my subcharts changed to panes.

The only minor issue is the text label for ray_lines. It always shows the price instead of the text ("RISK").

chart1.ray_line(self.riskTimestamp, self.riskPrice, round=True, color='#FF00FF', style='solid', text='RISK', width=2)

[Hardwaremind]

I did some tests too and it works fine for me too, but I see an error in the legend percentage due to the wrong calculation in bundle.js where the percentage is let defined as t=(s.close-s.open)/s.open*100 while it should use the previous candle closing value instead of s.open (current candle opening value).

[JuttDB]

in horizontal_line the title is not visible.