-
Notifications
You must be signed in to change notification settings - Fork 1.7k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
update hovered source on all crosshair changes (#1727)
* feature: set hovered source on all crosshair changes * add interaction test * remove comment
- Loading branch information
Showing
6 changed files
with
259 additions
and
14 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
102 changes: 102 additions & 0 deletions
102
tests/e2e/interactions/test-cases/markers/hit-test-after-timescale-change.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,102 @@ | ||
| function generateData() { | ||
| const res = []; | ||
| const time = new Date(Date.UTC(2018, 0, 1, 0, 0, 0, 0)); | ||
| for (let i = 0; i < 500; ++i) { | ||
| res.push({ | ||
| time: time.getTime() / 1000, | ||
| value: i, | ||
| }); | ||
|
|
||
| time.setUTCDate(time.getUTCDate() + 1); | ||
| } | ||
| return res; | ||
| } | ||
|
|
||
| function initialInteractionsToPerform() { | ||
| return []; | ||
| } | ||
|
|
||
| let markerX = 0; | ||
| let markerY = 0; | ||
| function finalInteractionsToPerform() { | ||
| return [{ | ||
| action: 'clickXY', | ||
| options: { | ||
| // set the cursor aside from the marker | ||
| x: markerX - 30, | ||
| y: markerY + 5, | ||
| }, | ||
| }]; | ||
| } | ||
|
|
||
| let chart; | ||
| let lastHoveredObjectId = null; | ||
| function beforeInteractions(container) { | ||
| chart = LightweightCharts.createChart(container); | ||
|
|
||
| const mainSeries = chart.addSeries(LightweightCharts.LineSeries); | ||
|
|
||
| const mainSeriesData = generateData(); | ||
| const markerTime = mainSeriesData[450].time; | ||
| const price = mainSeriesData[450].value; | ||
|
|
||
| mainSeries.setData(mainSeriesData); | ||
| LightweightCharts.createSeriesMarkers( | ||
| mainSeries, | ||
| [ | ||
| { | ||
| time: markerTime, | ||
| position: 'inBar', | ||
| color: '#2196F3', | ||
| size: 3, | ||
| shape: 'circle', | ||
| text: '', | ||
| id: 'TEST', | ||
| }, | ||
| ] | ||
| ); | ||
| mainSeries.createPriceLine({ | ||
| price: price, | ||
| color: '#000', | ||
| lineWidth: 2, | ||
| lineStyle: 2, | ||
| axisLabelVisible: false, | ||
| title: '', | ||
| id: 'LINE', | ||
| }); | ||
| chart.subscribeCrosshairMove(params => { | ||
| if (!params) { | ||
| return; | ||
| } | ||
| lastHoveredObjectId = params.hoveredObjectId; | ||
| }); | ||
| return new Promise(resolve => { | ||
| requestAnimationFrame(() => { | ||
| // get coordinates for marker bar | ||
| markerX = chart.timeScale().timeToCoordinate(markerTime); | ||
| markerY = mainSeries.priceToCoordinate(price); | ||
|
|
||
| resolve(); | ||
| }); | ||
| }); | ||
| } | ||
|
|
||
| function afterInitialInteractions() { | ||
| return new Promise(resolve => { | ||
| requestAnimationFrame(resolve); | ||
| }); | ||
| } | ||
|
|
||
| function afterFinalInteractions() { | ||
| // scroll to the marker | ||
| chart.timeScale().scrollToPosition(chart.timeScale().scrollPosition() + 5, false); | ||
| return new Promise(resolve => { | ||
| requestAnimationFrame(() => { | ||
| const pass = lastHoveredObjectId === 'TEST'; | ||
| if (!pass) { | ||
| throw new Error("Expected hoveredObjectId to be equal to 'TEST'."); | ||
| } | ||
| resolve(); | ||
| }); | ||
| }); | ||
| } |
98 changes: 98 additions & 0 deletions
98
tests/e2e/interactions/test-cases/markers/hit-test-priceline-overlap.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,98 @@ | ||
| function generateData() { | ||
| const res = []; | ||
| const time = new Date(Date.UTC(2018, 0, 1, 0, 0, 0, 0)); | ||
| for (let i = 0; i < 500; ++i) { | ||
| res.push({ | ||
| time: time.getTime() / 1000, | ||
| value: i, | ||
| }); | ||
|
|
||
| time.setUTCDate(time.getUTCDate() + 1); | ||
| } | ||
| return res; | ||
| } | ||
|
|
||
| function initialInteractionsToPerform() { | ||
| return []; | ||
| } | ||
|
|
||
| let markerX = 0; | ||
| let markerY = 0; | ||
| function finalInteractionsToPerform() { | ||
| return [ | ||
| { | ||
| action: 'clickXY', | ||
| options: { | ||
| x: markerX, | ||
| y: markerY + 5, | ||
| }, | ||
| }, | ||
| ]; | ||
| } | ||
|
|
||
| let chart; | ||
| let lastHoveredObjectId = null; | ||
| function beforeInteractions(container) { | ||
| chart = LightweightCharts.createChart(container); | ||
|
|
||
| const mainSeries = chart.addSeries(LightweightCharts.LineSeries); | ||
|
|
||
| const mainSeriesData = generateData(); | ||
| const markerTime = mainSeriesData[450].time; | ||
| const price = mainSeriesData[450].value; | ||
|
|
||
| mainSeries.setData(mainSeriesData); | ||
| LightweightCharts.createSeriesMarkers( | ||
| mainSeries, | ||
| [ | ||
| { | ||
| time: markerTime, | ||
| position: 'inBar', | ||
| color: '#2196F3', | ||
| size: 3, | ||
| shape: 'circle', | ||
| text: '', | ||
| id: 'TEST', | ||
| }, | ||
| ] | ||
| ); | ||
| mainSeries.createPriceLine({ | ||
| price: price, | ||
| color: '#000', | ||
| lineWidth: 2, | ||
| lineStyle: 2, | ||
| axisLabelVisible: false, | ||
| title: '', | ||
| id: 'LINE', | ||
| }); | ||
| chart.subscribeClick(mouseParams => { | ||
| if (!mouseParams) { | ||
| return; | ||
| } | ||
| lastHoveredObjectId = mouseParams.hoveredObjectId; | ||
| }); | ||
|
|
||
| return new Promise(resolve => { | ||
| requestAnimationFrame(() => { | ||
| // get coordinates for marker bar | ||
| markerX = chart.timeScale().timeToCoordinate(markerTime); | ||
| markerY = mainSeries.priceToCoordinate(price); | ||
| resolve(); | ||
| }); | ||
| }); | ||
| } | ||
|
|
||
| function afterInitialInteractions() { | ||
| return new Promise(resolve => { | ||
| requestAnimationFrame(resolve); | ||
| }); | ||
| } | ||
|
|
||
| function afterFinalInteractions() { | ||
| const pass = lastHoveredObjectId === 'TEST'; | ||
| if (!pass) { | ||
| throw new Error("Expected hoveredObjectId to be equal to 'TEST'."); | ||
| } | ||
|
|
||
| return Promise.resolve(); | ||
| } |