Enable pane support

[illetid]

Type of PR: enhancement

PR checklist:

• [ ] Addresses an existing issue: fixes #50
• [ ] Includes tests
• [ ] Documentation update

Overview of change: Based on community implementation https://github.com/tradingview/lightweight-charts/pull/824

[kirchet]

Also take a look at horizontal crosshair line visibility, it should be painted on the active pane only. The same logic should be applied for crosshair price label as well.

And for some reason vertical line is not painted on the first pane

[illetid]

Also take a look at horizontal crosshair line visibility, it should be painted on the active pane only. The same logic should be applied for crosshair price label as well.

And for some reason vertical line is not painted on the first pane

thanks for spotting this one, fixed crosshair in https://github.com/tradingview/lightweight-charts/pull/1557/commits/5fc37ee4450b9db08174c048ed61b045e0d63677

[kirchet]

It's something wrong here 🙂

[SlicedSilver]

It's something wrong here 🙂

'QA' testing coming soon. 😅 Been focused on the API design review first.

Agree that we should only have a single TV attribution logo (on the bottom pane). Also the price label is different. Is it the exact same data? or is it randomised a bit?

[illetid]

It's something wrong here 🙂

'QA' testing coming soon. 😅 Been focused on the API design review first.

Agree that we should only have a single TV attribution logo (on the bottom pane). Also the price label is different. Is it the exact same data? or is it randomised a bit?

fixed logo duplication in https://github.com/tradingview/lightweight-charts/pull/1557/commits/c391ec18accda43087f4bf3a345fe69a7b167f8e

[SlicedSilver]

1. After an error of using moveToPane(-1) then you can no longer move the pane.

// ...create a normal chart above...
volumeSeries = chart.addHistogramSeries(
    {
        priceFormat: {
            type: 'volume',
        },
    },
    1 // Pane index
);

volumeSeries.setData(generateLineData())

volumeSeries.moveToPane(2); // okay
volumeSeries.moveToPane(5); // okay
volumeSeries.moveToPane(-1); // error, but expected

volumeSeries.moveToPane(2); // error, but should work

---

2. Moving a series to a different price scale seems to also move the series to pane 0

// ...create a normal chart above...
volumeSeries = chart.addHistogramSeries(
    {
        priceFormat: {
            type: 'volume',
        },
    },
    1 // Pane index
);

volumeSeries.setData(generateLineData())

// make left price scale visible
chart.applyOptions({leftPriceScale: {visible: true}})

// move volume series to left price scale
volumeSeries.applyOptions({priceScaleId: 'left'})

// !! now appears in pane 0

volumeSeries.moveToPane(1) // does nothing since it thinks it is in pane 1

volumeSeries.moveToPane(0) // hides empty pane 1
volumeSeries.moveToPane(1) // now the volume is back into the correct position

---

3. Using the above bug, it is possible to get an empty pane within the middle of the chart

// ...create a normal chart above...
volumeSeries = chart.addHistogramSeries(
    {
        priceFormat: {
            type: 'volume',
        },
    },
    1 // Pane index
);

volumeSeries.setData(generateLineData())

// make left price scale visible
chart.applyOptions({leftPriceScale: {visible: true}})

// move volume series to left price scale
volumeSeries.applyOptions({priceScaleId: 'left'})

// !! now appears in pane 0

volumeSeries.moveToPane(2) // There is now an empty pane 1. Showing 3 panes

[SlicedSilver]

[Minor] When dragging the pane separator, the time scale width can change. Maybe we would want to 'fix' the time scale width while dragging?

Let's only do this if it is easy, and lightweight to implement.

https://github.com/tradingview/lightweight-charts/assets/3482679/39e30ada-f9eb-4c0e-8339-68ef59572bbd

[illetid]

1. After an error of using moveToPane(-1) then you can no longer move the pane.

// ...create a normal chart above...
volumeSeries = chart.addHistogramSeries(
    {
        priceFormat: {
            type: 'volume',
        },
    },
    1 // Pane index
);

volumeSeries.setData(generateLineData())

volumeSeries.moveToPane(2); // okay
volumeSeries.moveToPane(5); // okay
volumeSeries.moveToPane(-1); // error, but expected

volumeSeries.moveToPane(2); // error, but should work

2. Moving a series to a different price scale seems to also move the series to pane 0

// ...create a normal chart above...
volumeSeries = chart.addHistogramSeries(
    {
        priceFormat: {
            type: 'volume',
        },
    },
    1 // Pane index
);

volumeSeries.setData(generateLineData())

// make left price scale visible
chart.applyOptions({leftPriceScale: {visible: true}})

// move volume series to left price scale
volumeSeries.applyOptions({priceScaleId: 'left'})

// !! now appears in pane 0

volumeSeries.moveToPane(1) // does nothing since it thinks it is in pane 1

volumeSeries.moveToPane(0) // hides empty pane 1
volumeSeries.moveToPane(1) // now the volume is back into the correct position

3. Using the above bug, it is possible to get an empty pane within the middle of the chart

// ...create a normal chart above...
volumeSeries = chart.addHistogramSeries(
    {
        priceFormat: {
            type: 'volume',
        },
    },
    1 // Pane index
);

volumeSeries.setData(generateLineData())

// make left price scale visible
chart.applyOptions({leftPriceScale: {visible: true}})

// move volume series to left price scale
volumeSeries.applyOptions({priceScaleId: 'left'})

// !! now appears in pane 0

volumeSeries.moveToPane(2) // There is now an empty pane 1. Showing 3 panes

1. we are throwing an error and a developer who uses the library should handle the error
2. and 3 fixed in https://github.com/tradingview/lightweight-charts/pull/1557/commits/745e4bfac02cf29d62fa9bff43f962a4c79b954d

[illetid]

[Minor] When dragging the pane separator, the time scale width can change. Maybe we would want to 'fix' the time scale width while dragging?

Let's only do this if it is easy, and lightweight to implement.

time-scale-width-changing.mov

@SlicedSilver could we move this to future improvements

[SigmaU]

can't express how much I am waiting for this feature, guys! So grateful for everyones work ❤️