blob: b803a7ec0f425ebec36be97e1f2dcac32dfa2d0b [file] [log] [blame]
describe('InteractiveTimeSeriesChart', () => {
it('should change the unlocked indicator to the point closest to the last mouse move position', () => {
const context = new BrowsingContext();
return ChartTest.importChartScripts(context).then(() => {
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++);
let canvas;
return waitForComponentsToRender(context).then(() => {
expect(chart.currentSelection()).to.be(null);
expect(chart.currentIndicator()).to.be(null);
expect(indicatorChangeCalls).to.be.eql([]);
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);
return waitForComponentsToRender(context);
}).then(() => {
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', () => {
const context = new BrowsingContext();
return ChartTest.importChartScripts(context).then(() => {
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++);
let canvas;
return waitForComponentsToRender(context).then(() => {
expect(chart.currentSelection()).to.be(null);
expect(chart.currentIndicator()).to.be(null);
expect(indicatorChangeCalls).to.be.eql([]);
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);
return waitForComponentsToRender(context);
}).then(() => {
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', () => {
const context = new BrowsingContext();
return ChartTest.importChartScripts(context).then(() => {
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++);
let canvas;
let rect;
let lastPoint;
return waitForComponentsToRender(context).then(() => {
expect(chart.currentSelection()).to.be(null);
expect(chart.currentIndicator()).to.be(null);
expect(indicatorChangeCalls).to.be.eql([]);
canvas = chart.content().querySelector('canvas');
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);
return waitForComponentsToRender(context);
}).then(() => {
expect(CanvasTest.hasCanvasBeenRedrawn(canvas)).to.be(true);
const currentView = chart.sampledTimeSeriesData('current');
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);
return waitForComponentsToRender(context);
}).then(() => {
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', () => {
const context = new BrowsingContext();
return ChartTest.importChartScripts(context).then(() => {
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++);
let canvas;
let rect;
let currentView;
let lastPoint;
return waitForComponentsToRender(context).then(() => {
expect(chart.currentSelection()).to.be(null);
expect(chart.currentIndicator()).to.be(null);
expect(indicatorChangeCalls).to.be.eql([]);
canvas = chart.content().querySelector('canvas');
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);
return waitForComponentsToRender(context);
}).then(() => {
expect(CanvasTest.hasCanvasBeenRedrawn(canvas)).to.be(true);
currentView = chart.sampledTimeSeriesData('current');
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, 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);
return waitForComponentsToRender(context);
}).then(() => {
expect(CanvasTest.hasCanvasBeenRedrawn(canvas)).to.be(false);
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, true]]);
expect(selectionChangeCount).to.be(0);
})
});
});
it('should clear the locked indicator when clicked', () => {
const context = new BrowsingContext();
return ChartTest.importChartScripts(context).then(() => {
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++);
let canvas;
let rect;
let y;
let currentView;
let lastPoint;
return waitForComponentsToRender(context).then(() => {
expect(chart.currentSelection()).to.be(null);
expect(chart.currentIndicator()).to.be(null);
expect(indicatorChangeCalls).to.be.eql([]);
canvas = chart.content().querySelector('canvas');
rect = canvas.getBoundingClientRect();
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);
return waitForComponentsToRender(context);
}).then(() => {
expect(CanvasTest.hasCanvasBeenRedrawn(canvas)).to.be(true);
currentView = chart.sampledTimeSeriesData('current');
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, true]]);
canvas.dispatchEvent(new MouseEvent('click', {target: canvas, clientX: rect.left + 1, clientY: y, composed: true, bubbles: true}));
CanvasTest.fillCanvasBeforeRedrawCheck(canvas);
return waitForComponentsToRender(context);
}).then(() => {
expect(CanvasTest.hasCanvasBeenRedrawn(canvas)).to.be(true);
expect(chart.currentSelection()).to.be(null);
const firstPoint = currentView.firstPoint();
const 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', () => {
const context = new BrowsingContext();
return ChartTest.importChartScripts(context).then(() => {
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');
let canvas;
let rect;
let y;
let currentView;
let firstPoint;
let oldRange;
let newRange;
return waitForComponentsToRender(context).then(() => {
expect(chart.currentSelection()).to.be(null);
expect(chart.currentIndicator()).to.be(null);
expect(selectionChangeCalls).to.be.eql([]);
canvas = chart.content().querySelector('canvas');
rect = canvas.getBoundingClientRect();
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);
return waitForComponentsToRender(context);
}).then(() => {
expect(CanvasTest.hasCanvasBeenRedrawn(canvas)).to.be(true);
currentView = chart.sampledTimeSeriesData('current');
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);
return waitForComponentsToRender(context);
}).then(() => {
expect(CanvasTest.hasCanvasBeenRedrawn(canvas)).to.be(false);
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(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);
return waitForComponentsToRender(context);
}).then(() => {
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);
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);
return waitForComponentsToRender(context);
}).then(() => {
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);
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);
return waitForComponentsToRender(context);
}).then(() => {
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', () => {
const context = new BrowsingContext();
return ChartTest.importChartScripts(context).then(() => {
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');
let selection;
let canvas;
return waitForComponentsToRender(context).then(() => {
expect(zoomButton.offsetHeight).to.be(0);
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);
return waitForComponentsToRender(context);
}).then(() => {
expect(CanvasTest.hasCanvasBeenRedrawn(canvas)).to.be(true);
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();
}).then(() => {
expect(zoomCalls).to.be.eql([[selection]]);
CanvasTest.fillCanvasBeforeRedrawCheck(canvas);
return waitForComponentsToRender(context);
}).then(() => {
expect(CanvasTest.hasCanvasBeenRedrawn(canvas)).to.be(false);
});
});
});
it('should clear the selection when clicked', () => {
const context = new BrowsingContext();
return ChartTest.importChartScripts(context).then(() => {
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]);
let canvas;
let rect;
let y;
return waitForComponentsToRender(context).then(() => {
canvas = chart.content().querySelector('canvas');
rect = canvas.getBoundingClientRect();
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);
return waitForComponentsToRender(context);
}).then(() => {
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);
return waitForComponentsToRender(context);
}).then(() => {
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', () => {
const context = new BrowsingContext();
return ChartTest.importChartScripts(context).then(() => {
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));
let canvas;
let init;
return waitForComponentsToRender(context).then(() => {
expect(annotationClickCalls).to.be.eql([]);
expect(chart.content('annotation-label').textContent).to.not.contain('hello, world');
canvas = chart.content().querySelector('canvas');
const rect = canvas.getBoundingClientRect();
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);
return waitForComponentsToRender(context);
}).then(() => {
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);
return waitForComponentsToRender(context);
}).then(() => {
expect(CanvasTest.hasCanvasBeenRedrawn(canvas)).to.be(false);
});
});
});
describe('render', () => {
it('should render the unlocked indicator when options.indicator is specified', () => {
const context = new BrowsingContext();
return ChartTest.importChartScripts(context).then(() => {
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();
let canvasWithoutIndicator;
let canvasWithIndicator;
return waitForComponentsToRender(context).then(() => {
canvasWithoutIndicator = chartWithoutIndicator.content().querySelector('canvas');
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);
return waitForComponentsToRender(context);
}).then(() => {
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', () => {
const context = new BrowsingContext();
return ChartTest.importChartScripts(context).then(() => {
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};
const chartWithUnlockedIndicator = ChartTest.createInteractiveChartWithSampleCluster(context, null, chartOptions);
const 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;
return waitForComponentsToRender(context).then(() => {
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);
return waitForComponentsToRender(context);
}).then(() => {
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', () => {
const context = new BrowsingContext();
return ChartTest.importChartScripts(context).then(() => {
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]);
let canvas;
return waitForComponentsToRender(context).then(() => {
expect(indicatorChangeCount).to.be(0);
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);
return waitForComponentsToRender(context);
}).then(() => {
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);
return waitForComponentsToRender(context);
}).then(() => {
expect(CanvasTest.hasCanvasBeenRedrawn(canvas)).to.be(true);
expect(indicatorChangeCount).to.be(2);
let indicator = chart.currentIndicator();
let 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', () => {
const context = new BrowsingContext();
return ChartTest.importChartScripts(context).then(() => {
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]);
let canvas;
return waitForComponentsToRender(context).then(() => {
expect(indicatorChangeCount).to.be(0);
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);
return waitForComponentsToRender(context);
}).then(() => {
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);
return waitForComponentsToRender(context);
}).then(() => {
expect(CanvasTest.hasCanvasBeenRedrawn(canvas)).to.be(true);
expect(indicatorChangeCount).to.be(2);
let indicator = chart.currentIndicator();
let 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', () => {
const context = new BrowsingContext();
return ChartTest.importChartScripts(context).then(() => {
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]);
let canvas;
let currentView;
return waitForComponentsToRender(context).then(() => {
expect(indicatorChangeCount).to.be(0);
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);
return waitForComponentsToRender(context);
}).then(() => {
expect(CanvasTest.hasCanvasBeenRedrawn(canvas)).to.be(true);
expect(indicatorChangeCount).to.be(1);
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]);
const 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);
return waitForComponentsToRender(context);
}).then(() => {
expect(CanvasTest.hasCanvasBeenRedrawn(canvas)).to.be(false);
expect(indicatorChangeCount).to.be(1);
const 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);
return waitForComponentsToRender(context);
}).then(() => {
expect(CanvasTest.hasCanvasBeenRedrawn(canvas)).to.be(true);
expect(indicatorChangeCount).to.be(2);
const 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);
return waitForComponentsToRender(context);
}).then(() => {
expect(CanvasTest.hasCanvasBeenRedrawn(canvas)).to.be(false);
expect(indicatorChangeCount).to.be(2);
const indicator = chart.currentIndicator();
expect(indicator.view).to.be(currentView);
expect(indicator.point.id).to.be(1002);
expect(indicator.isLocked).to.be(true);
});
});
});
});
});