802 lines
39 KiB
JavaScript
802 lines
39 KiB
JavaScript
|
|
describe('InteractiveTimeSeriesChart', () => {
|
|
|
|
it('should change the unlocked indicator to the point closest to the last mouse move position', async () => {
|
|
const context = new BrowsingContext();
|
|
await ChartTest.importChartScripts(context);
|
|
|
|
const chart = ChartTest.createInteractiveChartWithSampleCluster(context);
|
|
|
|
chart.setDomain(ChartTest.sampleCluster.startTime, ChartTest.sampleCluster.endTime);
|
|
chart.fetchMeasurementSets();
|
|
ChartTest.respondWithSampleCluster(context.symbols.MockRemoteAPI.requests[0]);
|
|
|
|
const indicatorChangeCalls = [];
|
|
chart.listenToAction('indicatorChange', (...args) => indicatorChangeCalls.push(args));
|
|
|
|
let selectionChangeCount = 0;
|
|
chart.listenToAction('selectionChange', () => selectionChangeCount++);
|
|
|
|
await waitForComponentsToRender(context);
|
|
|
|
expect(chart.currentSelection()).to.be(null);
|
|
expect(chart.currentIndicator()).to.be(null);
|
|
expect(indicatorChangeCalls).to.be.eql([]);
|
|
|
|
const canvas = chart.content().querySelector('canvas');
|
|
const rect = canvas.getBoundingClientRect();
|
|
canvas.dispatchEvent(new MouseEvent('mousemove', {target: canvas, clientX: rect.right - 1, clientY: rect.top + rect.height / 2, composed: true, bubbles: true}));
|
|
|
|
CanvasTest.fillCanvasBeforeRedrawCheck(canvas);
|
|
await waitForComponentsToRender(context);
|
|
|
|
expect(CanvasTest.hasCanvasBeenRedrawn(canvas)).to.be(true);
|
|
|
|
expect(chart.currentSelection()).to.be(null);
|
|
const indicator = chart.currentIndicator();
|
|
expect(indicator).to.not.be(null);
|
|
const currentView = chart.sampledTimeSeriesData('current');
|
|
const lastPoint = currentView.lastPoint();
|
|
expect(indicator.view).to.be(currentView);
|
|
expect(indicator.point).to.be(lastPoint);
|
|
expect(indicator.isLocked).to.be(false);
|
|
expect(indicatorChangeCalls).to.be.eql([[lastPoint.id, false]]);
|
|
|
|
expect(selectionChangeCount).to.be(0);
|
|
});
|
|
|
|
it('should lock the indicator to the point closest to the clicked position', async () => {
|
|
const context = new BrowsingContext();
|
|
await ChartTest.importChartScripts(context);
|
|
|
|
const chart = ChartTest.createInteractiveChartWithSampleCluster(context);
|
|
|
|
chart.setDomain(ChartTest.sampleCluster.startTime, ChartTest.sampleCluster.endTime);
|
|
chart.fetchMeasurementSets();
|
|
ChartTest.respondWithSampleCluster(context.symbols.MockRemoteAPI.requests[0]);
|
|
|
|
const indicatorChangeCalls = [];
|
|
chart.listenToAction('indicatorChange', (...args) => indicatorChangeCalls.push(args));
|
|
|
|
let selectionChangeCount = 0;
|
|
chart.listenToAction('selectionChange', () => selectionChangeCount++);
|
|
|
|
await waitForComponentsToRender(context);
|
|
|
|
expect(chart.currentSelection()).to.be(null);
|
|
expect(chart.currentIndicator()).to.be(null);
|
|
expect(indicatorChangeCalls).to.be.eql([]);
|
|
const canvas = chart.content().querySelector('canvas');
|
|
const rect = canvas.getBoundingClientRect();
|
|
|
|
const x = rect.right - 1;
|
|
const y = rect.top + rect.height / 2;
|
|
canvas.dispatchEvent(new MouseEvent('mousemove', {target: canvas, clientX: x, clientY: y, composed: true, bubbles: true}));
|
|
canvas.dispatchEvent(new MouseEvent('mousedown', {target: canvas, clientX: x, clientY: y, composed: true, bubbles: true}));
|
|
canvas.dispatchEvent(new MouseEvent('mousemove', {target: canvas, clientX: x - 0.5, clientY: y + 0.5, composed: true, bubbles: true}));
|
|
canvas.dispatchEvent(new MouseEvent('mouseup', {target: canvas, clientX: x - 0.5, clientY: y + 0.5, composed: true, bubbles: true}));
|
|
canvas.dispatchEvent(new MouseEvent('click', {target: canvas, clientX: x - 0.5, clientY: y + 0.5, composed: true, bubbles: true}));
|
|
|
|
CanvasTest.fillCanvasBeforeRedrawCheck(canvas);
|
|
await waitForComponentsToRender(context);
|
|
|
|
expect(CanvasTest.hasCanvasBeenRedrawn(canvas)).to.be(true);
|
|
|
|
const currentView = chart.sampledTimeSeriesData('current');
|
|
const lastPoint = currentView.lastPoint();
|
|
expect(chart.currentSelection()).to.be(null);
|
|
const indicator = chart.currentIndicator();
|
|
expect(indicator.view).to.be(currentView);
|
|
expect(indicator.point).to.be(lastPoint);
|
|
expect(indicator.isLocked).to.be(true);
|
|
expect(indicatorChangeCalls).to.be.eql([[lastPoint.id, false], [lastPoint.id, true]]);
|
|
|
|
expect(selectionChangeCount).to.be(0);
|
|
});
|
|
|
|
it('should clear the unlocked indicator when the mouse cursor exits the chart', async () => {
|
|
const context = new BrowsingContext();
|
|
await ChartTest.importChartScripts(context);
|
|
|
|
const chart = ChartTest.createInteractiveChartWithSampleCluster(context);
|
|
|
|
chart.setDomain(ChartTest.sampleCluster.startTime, ChartTest.sampleCluster.endTime);
|
|
chart.fetchMeasurementSets();
|
|
ChartTest.respondWithSampleCluster(context.symbols.MockRemoteAPI.requests[0]);
|
|
|
|
const indicatorChangeCalls = [];
|
|
chart.listenToAction('indicatorChange', (...args) => indicatorChangeCalls.push(args));
|
|
|
|
let selectionChangeCount = 0;
|
|
chart.listenToAction('selectionChange', () => selectionChangeCount++);
|
|
|
|
await waitForComponentsToRender(context);
|
|
|
|
expect(chart.currentSelection()).to.be(null);
|
|
expect(chart.currentIndicator()).to.be(null);
|
|
expect(indicatorChangeCalls).to.be.eql([]);
|
|
|
|
const canvas = chart.content().querySelector('canvas');
|
|
const rect = canvas.getBoundingClientRect();
|
|
canvas.dispatchEvent(new MouseEvent('mousemove', {target: canvas, clientX: rect.right - 1, clientY: rect.top + rect.height / 2, composed: true, bubbles: true}));
|
|
|
|
CanvasTest.fillCanvasBeforeRedrawCheck(canvas);
|
|
await waitForComponentsToRender(context);
|
|
|
|
expect(CanvasTest.hasCanvasBeenRedrawn(canvas)).to.be(true);
|
|
|
|
const currentView = chart.sampledTimeSeriesData('current');
|
|
const lastPoint = currentView.lastPoint();
|
|
expect(chart.currentSelection()).to.be(null);
|
|
const indicator = chart.currentIndicator();
|
|
expect(indicator.view).to.be(currentView);
|
|
expect(indicator.point).to.be(lastPoint);
|
|
expect(indicator.isLocked).to.be(false);
|
|
expect(indicatorChangeCalls).to.be.eql([[lastPoint.id, false]]);
|
|
|
|
canvas.parentNode.dispatchEvent(new MouseEvent('mousemove', {target: canvas, clientX: rect.right + 50, clientY: rect.bottom + 50, composed: true, bubbles: true}));
|
|
canvas.dispatchEvent(new MouseEvent('mouseleave', {target: canvas, clientX: rect.right + 50, clientY: rect.bottom + 50, composed: true, bubbles: true}));
|
|
|
|
CanvasTest.fillCanvasBeforeRedrawCheck(canvas);
|
|
await waitForComponentsToRender(context);
|
|
|
|
expect(CanvasTest.hasCanvasBeenRedrawn(canvas)).to.be(true);
|
|
|
|
expect(chart.currentSelection()).to.be(null);
|
|
expect(chart.currentIndicator()).to.be(null);
|
|
expect(indicatorChangeCalls).to.be.eql([[lastPoint.id, false], [null, false]]);
|
|
|
|
expect(selectionChangeCount).to.be(0);
|
|
});
|
|
|
|
it('should not clear the locked indicator when the mouse cursor exits the chart', async () => {
|
|
const context = new BrowsingContext();
|
|
await ChartTest.importChartScripts(context);
|
|
const chart = ChartTest.createInteractiveChartWithSampleCluster(context);
|
|
|
|
chart.setDomain(ChartTest.sampleCluster.startTime, ChartTest.sampleCluster.endTime);
|
|
chart.fetchMeasurementSets();
|
|
ChartTest.respondWithSampleCluster(context.symbols.MockRemoteAPI.requests[0]);
|
|
|
|
const indicatorChangeCalls = [];
|
|
chart.listenToAction('indicatorChange', (...args) => indicatorChangeCalls.push(args));
|
|
|
|
let selectionChangeCount = 0;
|
|
chart.listenToAction('selectionChange', () => selectionChangeCount++);
|
|
|
|
await waitForComponentsToRender(context);
|
|
|
|
expect(chart.currentSelection()).to.be(null);
|
|
expect(chart.currentIndicator()).to.be(null);
|
|
expect(indicatorChangeCalls).to.be.eql([]);
|
|
|
|
const canvas = chart.content().querySelector('canvas');
|
|
const rect = canvas.getBoundingClientRect();
|
|
canvas.dispatchEvent(new MouseEvent('click', {target: canvas, clientX: rect.right - 1, clientY: rect.top + rect.height / 2, composed: true, bubbles: true}));
|
|
|
|
CanvasTest.fillCanvasBeforeRedrawCheck(canvas);
|
|
await waitForComponentsToRender(context);
|
|
|
|
expect(CanvasTest.hasCanvasBeenRedrawn(canvas)).to.be(true);
|
|
|
|
const currentView = chart.sampledTimeSeriesData('current');
|
|
const lastPoint = currentView.lastPoint();
|
|
expect(chart.currentSelection()).to.be(null);
|
|
let indicator = chart.currentIndicator();
|
|
expect(indicator.view).to.be(currentView);
|
|
expect(indicator.point).to.be(lastPoint);
|
|
expect(indicator.isLocked).to.be(true);
|
|
expect(indicatorChangeCalls).to.be.eql([[lastPoint.id, true]]);
|
|
|
|
canvas.parentNode.dispatchEvent(new MouseEvent('mousemove', {target: canvas, clientX: rect.right + 50, clientY: rect.bottom + 50, composed: true, bubbles: true}));
|
|
canvas.dispatchEvent(new MouseEvent('mouseleave', {target: canvas, clientX: rect.right + 50, clientY: rect.bottom + 50, composed: true, bubbles: true}));
|
|
|
|
CanvasTest.fillCanvasBeforeRedrawCheck(canvas);
|
|
await waitForComponentsToRender(context);
|
|
|
|
expect(CanvasTest.hasCanvasBeenRedrawn(canvas)).to.be(false);
|
|
|
|
expect(chart.currentSelection()).to.be(null);
|
|
indicator = chart.currentIndicator();
|
|
expect(indicator.view).to.be(currentView);
|
|
expect(indicator.point).to.be(lastPoint);
|
|
expect(indicator.isLocked).to.be(true);
|
|
expect(indicatorChangeCalls).to.be.eql([[lastPoint.id, true]]);
|
|
|
|
expect(selectionChangeCount).to.be(0);
|
|
});
|
|
|
|
it('should clear the locked indicator when clicked', async () => {
|
|
const context = new BrowsingContext();
|
|
await ChartTest.importChartScripts(context);
|
|
const chart = ChartTest.createInteractiveChartWithSampleCluster(context);
|
|
|
|
chart.setDomain(ChartTest.sampleCluster.startTime, ChartTest.sampleCluster.endTime);
|
|
chart.fetchMeasurementSets();
|
|
ChartTest.respondWithSampleCluster(context.symbols.MockRemoteAPI.requests[0]);
|
|
|
|
const indicatorChangeCalls = [];
|
|
chart.listenToAction('indicatorChange', (...args) => indicatorChangeCalls.push(args));
|
|
|
|
let selectionChangeCount = 0;
|
|
chart.listenToAction('selectionChange', () => selectionChangeCount++);
|
|
|
|
await waitForComponentsToRender(context);
|
|
|
|
expect(chart.currentSelection()).to.be(null);
|
|
expect(chart.currentIndicator()).to.be(null);
|
|
expect(indicatorChangeCalls).to.be.eql([]);
|
|
|
|
const canvas = chart.content().querySelector('canvas');
|
|
const rect = canvas.getBoundingClientRect();
|
|
const y = rect.top + rect.height / 2;
|
|
canvas.dispatchEvent(new MouseEvent('click', {target: canvas, clientX: rect.right - 1, clientY: y, composed: true, bubbles: true}));
|
|
|
|
CanvasTest.fillCanvasBeforeRedrawCheck(canvas);
|
|
await waitForComponentsToRender(context);
|
|
|
|
expect(CanvasTest.hasCanvasBeenRedrawn(canvas)).to.be(true);
|
|
|
|
const currentView = chart.sampledTimeSeriesData('current');
|
|
const lastPoint = currentView.lastPoint();
|
|
expect(chart.currentSelection()).to.be(null);
|
|
let indicator = chart.currentIndicator();
|
|
expect(indicator.view).to.be(currentView);
|
|
expect(indicator.point).to.be(lastPoint);
|
|
expect(indicator.isLocked).to.be(true);
|
|
expect(indicatorChangeCalls).to.be.eql([[lastPoint.id, true]]);
|
|
|
|
canvas.dispatchEvent(new MouseEvent('click', {target: canvas, clientX: rect.left + 1, clientY: y, composed: true, bubbles: true}));
|
|
|
|
CanvasTest.fillCanvasBeforeRedrawCheck(canvas);
|
|
await waitForComponentsToRender(context);
|
|
|
|
expect(CanvasTest.hasCanvasBeenRedrawn(canvas)).to.be(true);
|
|
|
|
expect(chart.currentSelection()).to.be(null);
|
|
const firstPoint = currentView.firstPoint();
|
|
indicator = chart.currentIndicator();
|
|
expect(indicator.view).to.be(currentView);
|
|
expect(indicator.point).to.be(firstPoint);
|
|
expect(indicator.isLocked).to.be(false);
|
|
expect(indicatorChangeCalls).to.be.eql([[lastPoint.id, true], [firstPoint.id, false]]);
|
|
|
|
expect(selectionChangeCount).to.be(0);
|
|
});
|
|
|
|
it('should change the selection when the mouse cursor is dragged', async () => {
|
|
const context = new BrowsingContext();
|
|
await ChartTest.importChartScripts(context);
|
|
const chart = ChartTest.createInteractiveChartWithSampleCluster(context, null, {selection: {lineStyle: '#f93', lineWidth: 2, fillStyle: '#ccc'}});
|
|
|
|
chart.setDomain(ChartTest.sampleCluster.startTime, ChartTest.sampleCluster.endTime);
|
|
chart.fetchMeasurementSets();
|
|
ChartTest.respondWithSampleCluster(context.symbols.MockRemoteAPI.requests[0]);
|
|
|
|
const indicatorChangeCalls = [];
|
|
chart.listenToAction('indicatorChange', (...args) => indicatorChangeCalls.push(args));
|
|
|
|
const selectionChangeCalls = [];
|
|
chart.listenToAction('selectionChange', (...args) => selectionChangeCalls.push(args));
|
|
|
|
const zoomButton = chart.content('zoom-button');
|
|
|
|
await waitForComponentsToRender(context);
|
|
|
|
expect(chart.currentSelection()).to.be(null);
|
|
expect(chart.currentIndicator()).to.be(null);
|
|
expect(selectionChangeCalls).to.be.eql([]);
|
|
|
|
const canvas = chart.content().querySelector('canvas');
|
|
const rect = canvas.getBoundingClientRect();
|
|
const y = rect.top + rect.height / 2;
|
|
canvas.dispatchEvent(new MouseEvent('mousemove', {target: canvas, clientX: rect.left + 5, clientY: y, composed: true, bubbles: true}));
|
|
|
|
CanvasTest.fillCanvasBeforeRedrawCheck(canvas);
|
|
await waitForComponentsToRender(context);
|
|
|
|
expect(CanvasTest.hasCanvasBeenRedrawn(canvas)).to.be(true);
|
|
|
|
const currentView = chart.sampledTimeSeriesData('current');
|
|
const firstPoint = currentView.firstPoint();
|
|
expect(chart.currentSelection()).to.be(null);
|
|
let indicator = chart.currentIndicator();
|
|
expect(indicator.view).to.be(currentView);
|
|
expect(indicator.point).to.be(firstPoint);
|
|
expect(indicator.isLocked).to.be(false);
|
|
expect(indicatorChangeCalls).to.be.eql([[firstPoint.id, false]]);
|
|
expect(zoomButton.offsetHeight).to.be(0);
|
|
|
|
canvas.dispatchEvent(new MouseEvent('mousedown', {target: canvas, clientX: rect.left + 5, clientY: y, composed: true, bubbles: true}));
|
|
|
|
CanvasTest.fillCanvasBeforeRedrawCheck(canvas);
|
|
await waitForComponentsToRender(context);
|
|
|
|
expect(CanvasTest.hasCanvasBeenRedrawn(canvas)).to.be(false);
|
|
|
|
expect(chart.currentSelection()).to.be(null);
|
|
indicator = chart.currentIndicator();
|
|
expect(indicator.view).to.be(currentView);
|
|
expect(indicator.point).to.be(firstPoint);
|
|
expect(indicator.isLocked).to.be(false);
|
|
expect(selectionChangeCalls).to.be.eql([]);
|
|
expect(indicatorChangeCalls).to.be.eql([[firstPoint.id, false]]);
|
|
expect(zoomButton.offsetHeight).to.be(0);
|
|
|
|
canvas.dispatchEvent(new MouseEvent('mousemove', {target: canvas, clientX: rect.left + 15, clientY: y + 5, composed: true, bubbles: true}));
|
|
|
|
CanvasTest.fillCanvasBeforeRedrawCheck(canvas);
|
|
await waitForComponentsToRender(context);
|
|
|
|
expect(CanvasTest.hasCanvasBeenRedrawn(canvas)).to.be(true);
|
|
|
|
expect(chart.currentSelection()).to.not.be(null);
|
|
expect(chart.currentIndicator()).to.be(null);
|
|
expect(selectionChangeCalls.length).to.be(1);
|
|
const oldRange = selectionChangeCalls[0][0];
|
|
expect(oldRange).to.be.eql(chart.currentSelection());
|
|
expect(selectionChangeCalls[0][1]).to.be(false);
|
|
expect(indicatorChangeCalls).to.be.eql([[firstPoint.id, false], [null, false]]);
|
|
expect(zoomButton.offsetHeight).to.be(0);
|
|
|
|
canvas.dispatchEvent(new MouseEvent('mousemove', {target: canvas, clientX: rect.right - 5, clientY: y + 5, composed: true, bubbles: true}));
|
|
|
|
CanvasTest.fillCanvasBeforeRedrawCheck(canvas);
|
|
|
|
await waitForComponentsToRender(context);
|
|
|
|
expect(CanvasTest.hasCanvasBeenRedrawn(canvas)).to.be(true);
|
|
|
|
expect(chart.currentSelection()).to.not.be(null);
|
|
expect(chart.currentIndicator()).to.be(null);
|
|
expect(selectionChangeCalls.length).to.be(2);
|
|
const newRange = selectionChangeCalls[1][0];
|
|
expect(newRange).to.be.eql(chart.currentSelection());
|
|
expect(newRange[0]).to.be(oldRange[0]);
|
|
expect(newRange[1]).to.be.greaterThan(oldRange[1]);
|
|
expect(selectionChangeCalls[1][1]).to.be(false);
|
|
expect(zoomButton.offsetHeight).to.be(0);
|
|
|
|
canvas.dispatchEvent(new MouseEvent('mouseup', {target: canvas, clientX: rect.right - 5, clientY: y + 5, composed: true, bubbles: true}));
|
|
canvas.dispatchEvent(new MouseEvent('click', {target: canvas, clientX: rect.right - 5, clientY: y + 5, composed: true, bubbles: true}));
|
|
|
|
CanvasTest.fillCanvasBeforeRedrawCheck(canvas);
|
|
await waitForComponentsToRender(context);
|
|
|
|
expect(CanvasTest.hasCanvasBeenRedrawn(canvas)).to.be(true);
|
|
|
|
expect(chart.currentSelection()).to.be.eql(newRange);
|
|
expect(chart.currentIndicator()).to.be(null);
|
|
expect(selectionChangeCalls.length).to.be(3);
|
|
expect(selectionChangeCalls[2][0]).to.be.eql(newRange);
|
|
expect(selectionChangeCalls[2][1]).to.be(true);
|
|
expect(zoomButton.offsetHeight).to.be(0);
|
|
});
|
|
|
|
it('should dispatch the "zoom" action when the zoom button is clicked', async () => {
|
|
const context = new BrowsingContext();
|
|
await ChartTest.importChartScripts(context);
|
|
|
|
const chart = ChartTest.createInteractiveChartWithSampleCluster(context, null, {selection: {lineStyle: '#f93', lineWidth: 2, fillStyle: '#ccc'}, zoomButton: true});
|
|
|
|
chart.setDomain(ChartTest.sampleCluster.startTime, ChartTest.sampleCluster.endTime);
|
|
chart.fetchMeasurementSets();
|
|
ChartTest.respondWithSampleCluster(context.symbols.MockRemoteAPI.requests[0]);
|
|
|
|
const zoomCalls = [];
|
|
chart.listenToAction('zoom', (...args) => zoomCalls.push(args));
|
|
const zoomButton = chart.content('zoom-button');
|
|
|
|
await waitForComponentsToRender(context);
|
|
|
|
expect(zoomButton.offsetHeight).to.be(0);
|
|
const canvas = chart.content().querySelector('canvas');
|
|
const rect = canvas.getBoundingClientRect();
|
|
const y = rect.top + rect.height / 2;
|
|
canvas.dispatchEvent(new MouseEvent('mousemove', {target: canvas, clientX: rect.left + 5, clientY: y, composed: true, bubbles: true}));
|
|
canvas.dispatchEvent(new MouseEvent('mousedown', {target: canvas, clientX: rect.left + 5, clientY: y, composed: true, bubbles: true}));
|
|
canvas.dispatchEvent(new MouseEvent('mousemove', {target: canvas, clientX: rect.right - 10, clientY: y + 5, composed: true, bubbles: true}));
|
|
canvas.dispatchEvent(new MouseEvent('mouseup', {target: canvas, clientX: rect.right - 10, clientY: y + 5, composed: true, bubbles: true}));
|
|
|
|
CanvasTest.fillCanvasBeforeRedrawCheck(canvas);
|
|
await waitForComponentsToRender(context);
|
|
|
|
expect(CanvasTest.hasCanvasBeenRedrawn(canvas)).to.be(true);
|
|
|
|
const selection = chart.currentSelection();
|
|
expect(selection).to.not.be(null);
|
|
expect(chart.currentIndicator()).to.be(null);
|
|
expect(zoomButton.offsetHeight).to.not.be(0);
|
|
expect(zoomCalls).to.be.eql([]);
|
|
zoomButton.click();
|
|
expect(zoomCalls).to.be.eql([[selection]]);
|
|
|
|
CanvasTest.fillCanvasBeforeRedrawCheck(canvas);
|
|
await waitForComponentsToRender(context);
|
|
|
|
expect(CanvasTest.hasCanvasBeenRedrawn(canvas)).to.be(false);
|
|
});
|
|
|
|
it('should clear the selection when clicked', async () => {
|
|
const context = new BrowsingContext();
|
|
await ChartTest.importChartScripts(context);
|
|
|
|
const chart = ChartTest.createInteractiveChartWithSampleCluster(context, null, {selection: {lineStyle: '#f93', lineWidth: 2, fillStyle: '#ccc'}});
|
|
|
|
chart.setDomain(ChartTest.sampleCluster.startTime, ChartTest.sampleCluster.endTime);
|
|
chart.fetchMeasurementSets();
|
|
ChartTest.respondWithSampleCluster(context.symbols.MockRemoteAPI.requests[0]);
|
|
|
|
await waitForComponentsToRender(context);
|
|
|
|
const canvas = chart.content().querySelector('canvas');
|
|
const rect = canvas.getBoundingClientRect();
|
|
const y = rect.top + rect.height / 2;
|
|
canvas.dispatchEvent(new MouseEvent('mousemove', {target: canvas, clientX: rect.left + 5, clientY: y, composed: true, bubbles: true}));
|
|
canvas.dispatchEvent(new MouseEvent('mousedown', {target: canvas, clientX: rect.left + 5, clientY: y, composed: true, bubbles: true}));
|
|
canvas.dispatchEvent(new MouseEvent('mousemove', {target: canvas, clientX: rect.right - 10, clientY: y + 5, composed: true, bubbles: true}));
|
|
canvas.dispatchEvent(new MouseEvent('mouseup', {target: canvas, clientX: rect.right - 10, clientY: y + 5, composed: true, bubbles: true}));
|
|
canvas.dispatchEvent(new MouseEvent('click', {target: canvas, clientX: rect.right - 10, clientY: y + 5, composed: true, bubbles: true}));
|
|
|
|
CanvasTest.fillCanvasBeforeRedrawCheck(canvas);
|
|
await waitForComponentsToRender(context);
|
|
|
|
expect(CanvasTest.hasCanvasBeenRedrawn(canvas)).to.be(true);
|
|
|
|
expect(chart.currentSelection()).to.not.be(null);
|
|
expect(chart.currentIndicator()).to.be(null);
|
|
|
|
canvas.dispatchEvent(new MouseEvent('click', {target: canvas, clientX: rect.left + 1, clientY: y + 5, composed: true, bubbles: true}));
|
|
|
|
CanvasTest.fillCanvasBeforeRedrawCheck(canvas);
|
|
|
|
await waitForComponentsToRender(context);
|
|
expect(CanvasTest.hasCanvasBeenRedrawn(canvas)).to.be(true);
|
|
|
|
expect(chart.currentSelection()).to.be(null);
|
|
const currentView = chart.sampledTimeSeriesData('current');
|
|
const indicator = chart.currentIndicator();
|
|
expect(indicator.view).to.be(currentView);
|
|
expect(indicator.point).to.be(currentView.firstPoint());
|
|
expect(indicator.isLocked).to.be(false);
|
|
});
|
|
|
|
it('should dispatch "annotationClick" action when an annotation is clicked', async () => {
|
|
const context = new BrowsingContext();
|
|
await ChartTest.importChartScripts(context);
|
|
|
|
const chart = ChartTest.createInteractiveChartWithSampleCluster(context, null,
|
|
{annotations: { textStyle: '#000', textBackground: '#fff', minWidth: 3, barHeight: 10, barSpacing: 1, fillStyle: '#ccc'}});
|
|
|
|
chart.setDomain(ChartTest.sampleCluster.startTime, ChartTest.sampleCluster.endTime);
|
|
chart.fetchMeasurementSets();
|
|
ChartTest.respondWithSampleCluster(context.symbols.MockRemoteAPI.requests[0]);
|
|
|
|
const diff = ChartTest.sampleCluster.endTime - ChartTest.sampleCluster.startTime;
|
|
const annotations = [{
|
|
startTime: ChartTest.sampleCluster.startTime + diff / 2,
|
|
endTime: ChartTest.sampleCluster.endTime - diff / 4,
|
|
label: 'hello, world',
|
|
}];
|
|
chart.setAnnotations(annotations);
|
|
|
|
const annotationClickCalls = [];
|
|
chart.listenToAction('annotationClick', (...args) => annotationClickCalls.push(args));
|
|
|
|
await waitForComponentsToRender(context);
|
|
|
|
expect(annotationClickCalls).to.be.eql([]);
|
|
expect(chart.content('annotation-label').textContent).to.not.contain('hello, world');
|
|
|
|
const canvas = chart.content().querySelector('canvas');
|
|
const rect = canvas.getBoundingClientRect();
|
|
const init = {target: canvas, clientX: rect.right - rect.width / 4, clientY: rect.bottom - 5, composed: true, bubbles: true};
|
|
canvas.dispatchEvent(new MouseEvent('mousemove', init));
|
|
|
|
CanvasTest.fillCanvasBeforeRedrawCheck(canvas);
|
|
await waitForComponentsToRender(context);
|
|
|
|
expect(CanvasTest.hasCanvasBeenRedrawn(canvas)).to.be(true);
|
|
|
|
expect(chart.content('annotation-label').textContent).to.contain('hello, world');
|
|
expect(annotationClickCalls).to.be.eql([]);
|
|
canvas.dispatchEvent(new MouseEvent('mousedown', init));
|
|
canvas.dispatchEvent(new MouseEvent('mouseup', init));
|
|
canvas.dispatchEvent(new MouseEvent('click', init));
|
|
|
|
expect(annotationClickCalls).to.be.eql([[annotations[0]]]);
|
|
|
|
CanvasTest.fillCanvasBeforeRedrawCheck(canvas);
|
|
await waitForComponentsToRender(context);
|
|
|
|
expect(CanvasTest.hasCanvasBeenRedrawn(canvas)).to.be(false);
|
|
});
|
|
|
|
describe('render', () => {
|
|
it('should render the unlocked indicator when options.indicator is specified', async () => {
|
|
const context = new BrowsingContext();
|
|
await ChartTest.importChartScripts(context);
|
|
|
|
const chartWithoutIndicator = ChartTest.createInteractiveChartWithSampleCluster(context);
|
|
const chartWithIndicator = ChartTest.createInteractiveChartWithSampleCluster(context, null,
|
|
{indicator: {lineStyle: 'rgb(51, 204, 255)', lineWidth: 2, pointRadius: 2}, interactiveChart: true});
|
|
const indicatorColor = {r: 51, g: 204, b: 255};
|
|
|
|
chartWithoutIndicator.setDomain(ChartTest.sampleCluster.startTime, ChartTest.sampleCluster.endTime);
|
|
chartWithoutIndicator.fetchMeasurementSets();
|
|
ChartTest.respondWithSampleCluster(context.symbols.MockRemoteAPI.requests[0]);
|
|
|
|
chartWithIndicator.setDomain(ChartTest.sampleCluster.startTime, ChartTest.sampleCluster.endTime);
|
|
chartWithIndicator.fetchMeasurementSets();
|
|
|
|
await waitForComponentsToRender(context);
|
|
|
|
const canvasWithoutIndicator = chartWithoutIndicator.content().querySelector('canvas');
|
|
const canvasWithIndicator = chartWithIndicator.content().querySelector('canvas');
|
|
|
|
const rect = canvasWithIndicator.getBoundingClientRect();
|
|
const x = rect.right - 1;
|
|
const y = rect.top + rect.height / 2;
|
|
canvasWithIndicator.dispatchEvent(new MouseEvent('mousemove', {target: canvasWithIndicator, clientX: x, clientY: y, composed: true, bubbles: true}));
|
|
|
|
CanvasTest.fillCanvasBeforeRedrawCheck(canvasWithIndicator);
|
|
await waitForComponentsToRender(context);
|
|
|
|
expect(CanvasTest.hasCanvasBeenRedrawn(canvasWithIndicator)).to.be(true);
|
|
|
|
const indicator = chartWithIndicator.currentIndicator();
|
|
const currentView = chartWithIndicator.sampledTimeSeriesData('current');
|
|
expect(indicator.view).to.be(currentView);
|
|
expect(indicator.point).to.be(currentView.lastPoint());
|
|
expect(indicator.isLocked).to.be(false);
|
|
|
|
CanvasTest.expectCanvasesMismatch(canvasWithoutIndicator, canvasWithIndicator);
|
|
expect(CanvasTest.canvasContainsColor(canvasWithoutIndicator, indicatorColor)).to.be(false);
|
|
expect(CanvasTest.canvasContainsColor(canvasWithIndicator, indicatorColor)).to.be(true);
|
|
});
|
|
|
|
it('should render the locked indicator differently from the unlocked indicator when options.lockedIndicator is specified', async () => {
|
|
const context = new BrowsingContext();
|
|
await ChartTest.importChartScripts(context);
|
|
const chartOptions = {
|
|
indicator: {lineStyle: 'rgb(51, 204, 255)', lineWidth: 2, pointRadius: 3},
|
|
lockedIndicator: {lineStyle: 'rgb(51, 102, 204)', fillStyle: 'rgb(250, 250, 250)', lineWidth: 2, pointRadius: 3}
|
|
};
|
|
const unlockedColor = {r: 51, g: 204, b: 255};
|
|
const lockedColor = {r: 51, g: 102, b: 204};
|
|
const lockedFillColor = {r: 250, g: 250, b: 250};
|
|
let chartWithUnlockedIndicator = ChartTest.createInteractiveChartWithSampleCluster(context, null, chartOptions);
|
|
let chartWithLockedIndicator = ChartTest.createInteractiveChartWithSampleCluster(context, null, chartOptions);
|
|
|
|
chartWithUnlockedIndicator.setDomain(ChartTest.sampleCluster.startTime, ChartTest.sampleCluster.endTime);
|
|
chartWithUnlockedIndicator.fetchMeasurementSets();
|
|
ChartTest.respondWithSampleCluster(context.symbols.MockRemoteAPI.requests[0]);
|
|
|
|
chartWithLockedIndicator.setDomain(ChartTest.sampleCluster.startTime, ChartTest.sampleCluster.endTime);
|
|
chartWithLockedIndicator.fetchMeasurementSets();
|
|
|
|
let canvasWithUnlockedIndicator;
|
|
let canvasWithLockedIndicator;
|
|
|
|
await waitForComponentsToRender(context);
|
|
canvasWithUnlockedIndicator = chartWithUnlockedIndicator.content().querySelector('canvas');
|
|
canvasWithLockedIndicator = chartWithLockedIndicator.content().querySelector('canvas');
|
|
|
|
const rect = canvasWithUnlockedIndicator.getBoundingClientRect();
|
|
const x = rect.right - 1;
|
|
const y = rect.top + rect.height / 2;
|
|
canvasWithUnlockedIndicator.dispatchEvent(new MouseEvent('mousemove', {target: canvasWithUnlockedIndicator, clientX: x, clientY: y, composed: true, bubbles: true}));
|
|
canvasWithLockedIndicator.dispatchEvent(new MouseEvent('click', {target: canvasWithLockedIndicator, clientX: x, clientY: y, composed: true, bubbles: true}));
|
|
|
|
CanvasTest.fillCanvasBeforeRedrawCheck(canvasWithUnlockedIndicator);
|
|
CanvasTest.fillCanvasBeforeRedrawCheck(canvasWithLockedIndicator);
|
|
await waitForComponentsToRender(context);
|
|
|
|
expect(CanvasTest.hasCanvasBeenRedrawn(canvasWithUnlockedIndicator)).to.be(true);
|
|
expect(CanvasTest.hasCanvasBeenRedrawn(canvasWithLockedIndicator)).to.be(true);
|
|
|
|
let indicator = chartWithUnlockedIndicator.currentIndicator();
|
|
let currentView = chartWithUnlockedIndicator.sampledTimeSeriesData('current');
|
|
expect(indicator.view).to.be(currentView);
|
|
expect(indicator.point).to.be(currentView.lastPoint());
|
|
expect(indicator.isLocked).to.be(false);
|
|
|
|
indicator = chartWithLockedIndicator.currentIndicator();
|
|
currentView = chartWithLockedIndicator.sampledTimeSeriesData('current');
|
|
expect(indicator.view).to.be(currentView);
|
|
expect(indicator.point).to.be(currentView.lastPoint());
|
|
expect(indicator.isLocked).to.be(true);
|
|
|
|
CanvasTest.expectCanvasesMismatch(canvasWithUnlockedIndicator, canvasWithLockedIndicator);
|
|
expect(CanvasTest.canvasContainsColor(canvasWithUnlockedIndicator, unlockedColor)).to.be(true);
|
|
expect(CanvasTest.canvasContainsColor(canvasWithUnlockedIndicator, lockedFillColor)).to.be(false);
|
|
expect(CanvasTest.canvasContainsColor(canvasWithLockedIndicator, lockedColor)).to.be(true);
|
|
expect(CanvasTest.canvasContainsColor(canvasWithLockedIndicator, lockedFillColor)).to.be(true);
|
|
});
|
|
});
|
|
|
|
describe('moveLockedIndicatorWithNotification', () => {
|
|
it('should move the locked indicator to the right when forward boolean is true', async () => {
|
|
const context = new BrowsingContext();
|
|
await ChartTest.importChartScripts(context);
|
|
const chart = ChartTest.createInteractiveChartWithSampleCluster(context);
|
|
|
|
chart.setDomain(ChartTest.sampleCluster.startTime, ChartTest.sampleCluster.endTime);
|
|
chart.fetchMeasurementSets();
|
|
let indicatorChangeCount = 0;
|
|
chart.listenToAction('indicatorChange', () => indicatorChangeCount++);
|
|
ChartTest.respondWithSampleCluster(context.symbols.MockRemoteAPI.requests[0]);
|
|
|
|
await waitForComponentsToRender(context);
|
|
|
|
expect(indicatorChangeCount).to.be(0);
|
|
|
|
const canvas = chart.content().querySelector('canvas');
|
|
|
|
const rect = canvas.getBoundingClientRect();
|
|
const x = rect.left + 1;
|
|
const y = rect.top + rect.height / 2;
|
|
canvas.dispatchEvent(new MouseEvent('click', {target: canvas, clientX: x, clientY: y, composed: true, bubbles: true}));
|
|
|
|
CanvasTest.fillCanvasBeforeRedrawCheck(canvas);
|
|
await waitForComponentsToRender(context);
|
|
|
|
expect(CanvasTest.hasCanvasBeenRedrawn(canvas)).to.be(true);
|
|
expect(indicatorChangeCount).to.be(1);
|
|
|
|
let indicator = chart.currentIndicator();
|
|
let currentView = chart.sampledTimeSeriesData('current');
|
|
expect(indicator.view).to.be(currentView);
|
|
expect(indicator.point).to.be(currentView.firstPoint());
|
|
expect(indicator.isLocked).to.be(true);
|
|
|
|
chart.moveLockedIndicatorWithNotification(true);
|
|
|
|
CanvasTest.fillCanvasBeforeRedrawCheck(canvas);
|
|
await waitForComponentsToRender(context);
|
|
|
|
expect(CanvasTest.hasCanvasBeenRedrawn(canvas)).to.be(true);
|
|
expect(indicatorChangeCount).to.be(2);
|
|
|
|
indicator = chart.currentIndicator();
|
|
currentView = chart.sampledTimeSeriesData('current');
|
|
expect(indicator.view).to.be(currentView);
|
|
expect(indicator.point).to.not.be(currentView.firstPoint());
|
|
expect(indicator.point).to.be(currentView.nextPoint(currentView.firstPoint()));
|
|
expect(currentView.previousPoint(indicator.point)).to.be(currentView.firstPoint());
|
|
expect(indicator.isLocked).to.be(true);
|
|
expect(indicatorChangeCount).to.be(2);
|
|
});
|
|
|
|
it('should move the locked indicator to the left when forward boolean is false', async () => {
|
|
const context = new BrowsingContext();
|
|
await ChartTest.importChartScripts(context);
|
|
const chart = ChartTest.createInteractiveChartWithSampleCluster(context);
|
|
|
|
chart.setDomain(ChartTest.sampleCluster.startTime, ChartTest.sampleCluster.endTime);
|
|
chart.fetchMeasurementSets();
|
|
let indicatorChangeCount = 0;
|
|
chart.listenToAction('indicatorChange', () => indicatorChangeCount++);
|
|
ChartTest.respondWithSampleCluster(context.symbols.MockRemoteAPI.requests[0]);
|
|
|
|
await waitForComponentsToRender(context);
|
|
|
|
expect(indicatorChangeCount).to.be(0);
|
|
|
|
const canvas = chart.content().querySelector('canvas');
|
|
|
|
const rect = canvas.getBoundingClientRect();
|
|
const x = rect.right - 1;
|
|
const y = rect.top + rect.height / 2;
|
|
canvas.dispatchEvent(new MouseEvent('click', {target: canvas, clientX: x, clientY: y, composed: true, bubbles: true}));
|
|
|
|
CanvasTest.fillCanvasBeforeRedrawCheck(canvas);
|
|
await waitForComponentsToRender(context);
|
|
|
|
expect(CanvasTest.hasCanvasBeenRedrawn(canvas)).to.be(true);
|
|
expect(indicatorChangeCount).to.be(1);
|
|
|
|
let indicator = chart.currentIndicator();
|
|
let currentView = chart.sampledTimeSeriesData('current');
|
|
expect(indicator.view).to.be(currentView);
|
|
expect(indicator.point).to.be(currentView.lastPoint());
|
|
expect(indicator.isLocked).to.be(true);
|
|
|
|
chart.moveLockedIndicatorWithNotification(false);
|
|
|
|
CanvasTest.fillCanvasBeforeRedrawCheck(canvas);
|
|
await waitForComponentsToRender(context);
|
|
|
|
expect(CanvasTest.hasCanvasBeenRedrawn(canvas)).to.be(true);
|
|
expect(indicatorChangeCount).to.be(2);
|
|
|
|
indicator = chart.currentIndicator();
|
|
currentView = chart.sampledTimeSeriesData('current');
|
|
expect(indicator.view).to.be(currentView);
|
|
expect(indicator.point).to.not.be(currentView.firstPoint());
|
|
expect(indicator.point).to.be(currentView.previousPoint(currentView.lastPoint()));
|
|
expect(currentView.nextPoint(indicator.point)).to.be(currentView.lastPoint());
|
|
expect(indicator.isLocked).to.be(true);
|
|
expect(indicatorChangeCount).to.be(2);
|
|
});
|
|
|
|
it('should not move the locked indicator when there are no points within the domain', async () => {
|
|
const context = new BrowsingContext();
|
|
await ChartTest.importChartScripts(context);
|
|
const chart = ChartTest.createInteractiveChartWithSampleCluster(context);
|
|
|
|
// The domain inclues points 2, 3
|
|
chart.setDomain(posixTime('2016-01-05T20:00:00Z'), posixTime('2016-01-06T00:00:00Z'));
|
|
chart.fetchMeasurementSets();
|
|
let indicatorChangeCount = 0;
|
|
chart.listenToAction('indicatorChange', () => indicatorChangeCount++);
|
|
ChartTest.respondWithSampleCluster(context.symbols.MockRemoteAPI.requests[0]);
|
|
|
|
await waitForComponentsToRender(context);
|
|
|
|
expect(indicatorChangeCount).to.be(0);
|
|
|
|
const canvas = chart.content().querySelector('canvas');
|
|
|
|
const rect = canvas.getBoundingClientRect();
|
|
const x = rect.right - 1;
|
|
const y = rect.top + rect.height / 2;
|
|
canvas.dispatchEvent(new MouseEvent('click', {target: canvas, clientX: x, clientY: y, composed: true, bubbles: true}));
|
|
|
|
CanvasTest.fillCanvasBeforeRedrawCheck(canvas);
|
|
await waitForComponentsToRender(context);
|
|
|
|
expect(CanvasTest.hasCanvasBeenRedrawn(canvas)).to.be(true);
|
|
expect(indicatorChangeCount).to.be(1);
|
|
|
|
const currentView = chart.sampledTimeSeriesData('current');
|
|
expect(currentView.length()).to.be(4); // points 0 and 4 are added to draw lines extending beyond the domain.
|
|
expect([...currentView].map((point) => point.id)).to.be.eql([1000, 1002, 1003, 1004]);
|
|
|
|
let indicator = chart.currentIndicator();
|
|
expect(indicator.view).to.be(currentView);
|
|
expect(indicator.point.id).to.be(1003);
|
|
expect(indicator.isLocked).to.be(true);
|
|
|
|
chart.moveLockedIndicatorWithNotification(true);
|
|
|
|
CanvasTest.fillCanvasBeforeRedrawCheck(canvas);
|
|
await waitForComponentsToRender(context);
|
|
|
|
expect(CanvasTest.hasCanvasBeenRedrawn(canvas)).to.be(false);
|
|
|
|
expect(indicatorChangeCount).to.be(1);
|
|
indicator = chart.currentIndicator();
|
|
expect(indicator.view).to.be(currentView);
|
|
expect(indicator.point.id).to.be(1003);
|
|
expect(indicator.isLocked).to.be(true);
|
|
|
|
chart.moveLockedIndicatorWithNotification(false);
|
|
|
|
CanvasTest.fillCanvasBeforeRedrawCheck(canvas);
|
|
await waitForComponentsToRender(context);
|
|
|
|
expect(CanvasTest.hasCanvasBeenRedrawn(canvas)).to.be(true);
|
|
|
|
expect(indicatorChangeCount).to.be(2);
|
|
indicator = chart.currentIndicator();
|
|
expect(indicator.view).to.be(currentView);
|
|
expect(indicator.point.id).to.be(1002);
|
|
expect(indicator.isLocked).to.be(true);
|
|
|
|
chart.moveLockedIndicatorWithNotification(false);
|
|
|
|
CanvasTest.fillCanvasBeforeRedrawCheck(canvas);
|
|
await waitForComponentsToRender(context);
|
|
|
|
expect(CanvasTest.hasCanvasBeenRedrawn(canvas)).to.be(false);
|
|
|
|
expect(indicatorChangeCount).to.be(2);
|
|
indicator = chart.currentIndicator();
|
|
expect(indicator.view).to.be(currentView);
|
|
expect(indicator.point.id).to.be(1002);
|
|
expect(indicator.isLocked).to.be(true);
|
|
});
|
|
});
|
|
});
|