catapult/tracing/tracing/ui/tracks/chart_series_test.html - platform/external/chromium-trace - Git at Google

 <!DOCTYPE html>
 <!--
 Copyright (c) 2015 The Chromium Authors. All rights reserved.
 Use of this source code is governed by a BSD-style license that can be
 found in the LICENSE file.
 -->

 <link rel="import" href="/tracing/core/test_utils.html">
 <link rel="import" href="/tracing/model/event.html">
 <link rel="import" href="/tracing/model/event_set.html">
 <link rel="import" href="/tracing/ui/timeline_display_transform.html">
 <link rel="import" href="/tracing/ui/tracks/chart_axis.html">
 <link rel="import" href="/tracing/ui/tracks/chart_point.html">
 <link rel="import" href="/tracing/ui/tracks/chart_series.html">
 <link rel="import" href="/tracing/ui/tracks/chart_transform.html">

 <script>
 'use strict';

 tr.b.unittest.testSuite(function() {
   var EventSet = tr.model.EventSet;
   var TimelineDisplayTransform = tr.ui.TimelineDisplayTransform;
   var Event = tr.model.Event;
   var ChartAxis = tr.ui.tracks.ChartAxis;
   var ChartPoint = tr.ui.tracks.ChartPoint;
   var ChartSeries = tr.ui.tracks.ChartSeries;
   var ChartTransform = tr.ui.tracks.ChartTransform;
   var ChartSeriesType = tr.ui.tracks.ChartSeriesType;

   var CANVAS_WIDTH = 800;
   var CANVAS_HEIGHT = 80;

   function buildSeries(renderingConfig) {
     var points = [];
     for (var i = 0; i < 60; i++) {
       var event = new Event();
       event.index = i;
       var phase = i * Math.PI / 15;
       var value = Math.sin(phase);
       var peakIndex = Math.floor((phase + Math.PI / 2) / (2 * Math.PI));
       var base = peakIndex % 2 === 0 ? undefined : -1 + value / 1.5;
       var point = new ChartPoint(event, i - 30, value, base);
       points.push(point);
     }
     var axis = new ChartAxis(-1, 1);
     return new ChartSeries(points, axis, renderingConfig);
   }

   function drawSeriesWithDetails(test, series, highDetails) {
     var div = document.createElement('div');
     var canvas = document.createElement('canvas');
     Polymer.dom(div).appendChild(canvas);

     var pixelRatio = window.devicePixelRatio || 1;

     canvas.width = CANVAS_WIDTH * pixelRatio;
     canvas.style.width = CANVAS_WIDTH + 'px';
     canvas.height = CANVAS_HEIGHT * pixelRatio;
     canvas.style.height = CANVAS_HEIGHT + 'px';

     var displayTransform = new TimelineDisplayTransform();
     displayTransform.scaleX = CANVAS_WIDTH * pixelRatio / 60;
     displayTransform.panX = 30;

     var transform = new ChartTransform(
         displayTransform,
         series.axis,
         CANVAS_WIDTH * pixelRatio,
         CANVAS_HEIGHT * pixelRatio,
         10 * pixelRatio,
         10 * pixelRatio,
         pixelRatio);

     series.draw(canvas.getContext('2d'), transform, highDetails);

     test.addHTMLOutput(div);
   }

   function drawSeries(test, series) {
     drawSeriesWithDetails(test, series, false);
     drawSeriesWithDetails(test, series, true);
   }

   test('instantiate_defaultConfig', function() {
     var series = buildSeries(undefined);
     drawSeries(this, series);
   });

   test('instantiate_lineChart', function() {
     var series = buildSeries({
       chartType: ChartSeriesType.LINE,
       colorId: 4,
       unselectedPointSize: 6,
       lineWidth: 2,
       unselectedPointDensityOpaque: 0.08
     });
     drawSeries(this, series);
   });

   test('instantiate_areaChart', function() {
     var series = buildSeries({
       chartType: ChartSeriesType.AREA,
       colorId: 2,
       backgroundOpacity: 0.2
     });
     drawSeries(this, series);
   });

   test('instantiate_largeSkipDistance', function() {
     var series = buildSeries({
       chartType: ChartSeriesType.AREA,
       colorId: 1,
       skipDistance: 40,
       unselectedPointDensityTransparent: 0.07
     });
     drawSeries(this, series);
   });

   test('instantiate_selection', function() {
     var series = buildSeries({
       chartType: ChartSeriesType.AREA,
       colorId: 10
     });
     series.points.forEach(function(point, index) {
       point.modelItem.selectionState = index % 4;
     });
     drawSeries(this, series);
   });

   test('instantiate_selectionWithAllConfigFlags', function() {
     var series = buildSeries({
       chartType: ChartSeriesType.AREA,
       selectedPointSize: 10,
       unselectedPointSize: 6,
       colorId: 15,
       lineWidth: 2,
       skipDistance: 25,
       unselectedPointDensityOpaque: 0.07,
       unselectedPointDensityTransparent: 0.09,
       backgroundOpacity: 0.8
     });
     series.points.forEach(function(point, index) {
       point.modelItem.selectionState = index % 4;
     });
     drawSeries(this, series);
   });

   test('checkRange', function() {
     var series = buildSeries();
     var range = series.range;
     assert.isFalse(range.isEmpty);
     assert.closeTo(range.min, -1, 0.05);
     assert.closeTo(range.max, 1, 0.05);
   });

   test('checkaddIntersectingEventsInRangeToSelectionInWorldSpace', function() {
     var series = buildSeries();

     // Too far left.
     var sel = new EventSet();
     series.addIntersectingEventsInRangeToSelectionInWorldSpace(
         -1000, -30.5, 40, sel);
     assert.lengthOf(sel, 0);

     // Select first point.
     var sel = new EventSet();
     series.addIntersectingEventsInRangeToSelectionInWorldSpace(
         -30.5, -29.5, 40, sel);
     assert.equal(tr.b.getOnlyElement(sel).index, 0);

     // Select second point.
     var sel = new EventSet();
     series.addIntersectingEventsInRangeToSelectionInWorldSpace(
         -28.8, -28.2, 40, sel);
     assert.equal(tr.b.getOnlyElement(sel).index, 1);

     // Select points in the middle.
     var sel = new EventSet();
     series.addIntersectingEventsInRangeToSelectionInWorldSpace(
         -0.99, 1.01, 40, sel);
     assert.lengthOf(sel, 3);
     var iterator = sel[Symbol.iterator]();
     assert.equal(iterator.next().value.index, 29);
     assert.equal(iterator.next().value.index, 30);
     assert.equal(iterator.next().value.index, 31);

     // Select the last point.
     var sel = new EventSet();
     series.addIntersectingEventsInRangeToSelectionInWorldSpace(
         668.99, 668.99, 40, sel);
     assert.equal(tr.b.getOnlyElement(sel).index, 59);

     // Too far right.
     var sel = new EventSet();
     series.addIntersectingEventsInRangeToSelectionInWorldSpace(
         669.01, 2000, 40, sel);
     assert.lengthOf(sel, 0);

     // Select everything.
     var sel = new EventSet();
     series.addIntersectingEventsInRangeToSelectionInWorldSpace(
         -29.01, 669.01, 40, sel);
     assert.lengthOf(sel, 60);
   });

   test('checkaddEventNearToProvidedEventToSelection', function() {
     var series = buildSeries();

     // Invalid event.
     var sel = new EventSet();
     assert.isFalse(series.addEventNearToProvidedEventToSelection(
         new Event(), 1, sel));
     assert.lengthOf(sel, 0);

     var sel = new EventSet();
     assert.isFalse(series.addEventNearToProvidedEventToSelection(
         new Event(), -1, sel));
     assert.lengthOf(sel, 0);

     // First point.
     var sel = new EventSet();
     assert.isTrue(series.addEventNearToProvidedEventToSelection(
         series.points[0].modelItem, 1, sel));
     assert.equal(tr.b.getOnlyElement(sel).index, 1);

     var sel = new EventSet();
     assert.isFalse(series.addEventNearToProvidedEventToSelection(
         series.points[0].modelItem, -1, sel));
     assert.lengthOf(sel, 0);

     // Middle point.
     var sel = new EventSet();
     assert.isTrue(series.addEventNearToProvidedEventToSelection(
         series.points[30].modelItem, 1, sel));
     assert.equal(tr.b.getOnlyElement(sel).index, 31);

     var sel = new EventSet();
     assert.isTrue(series.addEventNearToProvidedEventToSelection(
         series.points[30].modelItem, -1, sel));
     assert.equal(tr.b.getOnlyElement(sel).index, 29);

     // Last point.
     var sel = new EventSet();
     assert.isFalse(series.addEventNearToProvidedEventToSelection(
         series.points[59].modelItem, 1, sel));
     assert.lengthOf(sel, 0);

     var sel = new EventSet();
     assert.isTrue(series.addEventNearToProvidedEventToSelection(
         series.points[59].modelItem, -1, sel));
     assert.equal(tr.b.getOnlyElement(sel).index, 58);
   });

   test('checkAddClosestEventToSelection', function() {
     var series = buildSeries();

     // Left of first point.
     var sel = new EventSet();
     series.addClosestEventToSelection(-40, 9, -0.5, 0.5, sel);
     assert.lengthOf(sel, 0);

     var sel = new EventSet();
     series.addClosestEventToSelection(-40, 11, -0.5, 0.5, sel);
     assert.equal(tr.b.getOnlyElement(sel).index, 0);

     // Between two points.
     var sel = new EventSet();
     series.addClosestEventToSelection(0.4, 0.3, -0.5, 0.5, sel);
     assert.lengthOf(sel, 0);

     var sel = new EventSet();
     series.addClosestEventToSelection(0.4, 0.4, -0.5, 0.5, sel);
     assert.equal(tr.b.getOnlyElement(sel).index, 30);

     // Right of last point.
     var sel = new EventSet();
     series.addClosestEventToSelection(40, 10, -0.5, 0.5, sel);
     assert.lengthOf(sel, 0);

     var sel = new EventSet();
     series.addClosestEventToSelection(40, 12, -0.5, 0.5, sel);
     assert.equal(tr.b.getOnlyElement(sel).index, 59);
   });
 });
 </script>
	<!DOCTYPE html>
	<!--
	Copyright (c) 2015 The Chromium Authors. All rights reserved.
	Use of this source code is governed by a BSD-style license that can be
	found in the LICENSE file.
	-->

	<link rel="import" href="/tracing/core/test_utils.html">
	<link rel="import" href="/tracing/model/event.html">
	<link rel="import" href="/tracing/model/event_set.html">
	<link rel="import" href="/tracing/ui/timeline_display_transform.html">
	<link rel="import" href="/tracing/ui/tracks/chart_axis.html">
	<link rel="import" href="/tracing/ui/tracks/chart_point.html">
	<link rel="import" href="/tracing/ui/tracks/chart_series.html">
	<link rel="import" href="/tracing/ui/tracks/chart_transform.html">

	<script>
	'use strict';

	tr.b.unittest.testSuite(function() {
	var EventSet = tr.model.EventSet;
	var TimelineDisplayTransform = tr.ui.TimelineDisplayTransform;
	var Event = tr.model.Event;
	var ChartAxis = tr.ui.tracks.ChartAxis;
	var ChartPoint = tr.ui.tracks.ChartPoint;
	var ChartSeries = tr.ui.tracks.ChartSeries;
	var ChartTransform = tr.ui.tracks.ChartTransform;
	var ChartSeriesType = tr.ui.tracks.ChartSeriesType;

	var CANVAS_WIDTH = 800;
	var CANVAS_HEIGHT = 80;

	function buildSeries(renderingConfig) {
	var points = [];
	for (var i = 0; i < 60; i++) {
	var event = new Event();
	event.index = i;
	var phase = i * Math.PI / 15;
	var value = Math.sin(phase);
	var peakIndex = Math.floor((phase + Math.PI / 2) / (2 * Math.PI));
	var base = peakIndex % 2 === 0 ? undefined : -1 + value / 1.5;
	var point = new ChartPoint(event, i - 30, value, base);
	points.push(point);
	}
	var axis = new ChartAxis(-1, 1);
	return new ChartSeries(points, axis, renderingConfig);
	}

	function drawSeriesWithDetails(test, series, highDetails) {
	var div = document.createElement('div');
	var canvas = document.createElement('canvas');
	Polymer.dom(div).appendChild(canvas);

	var pixelRatio = window.devicePixelRatio \|\| 1;

	canvas.width = CANVAS_WIDTH * pixelRatio;
	canvas.style.width = CANVAS_WIDTH + 'px';
	canvas.height = CANVAS_HEIGHT * pixelRatio;
	canvas.style.height = CANVAS_HEIGHT + 'px';

	var displayTransform = new TimelineDisplayTransform();
	displayTransform.scaleX = CANVAS_WIDTH * pixelRatio / 60;
	displayTransform.panX = 30;

	var transform = new ChartTransform(
	displayTransform,
	series.axis,
	CANVAS_WIDTH * pixelRatio,
	CANVAS_HEIGHT * pixelRatio,
	10 * pixelRatio,
	10 * pixelRatio,
	pixelRatio);

	series.draw(canvas.getContext('2d'), transform, highDetails);

	test.addHTMLOutput(div);
	}

	function drawSeries(test, series) {
	drawSeriesWithDetails(test, series, false);
	drawSeriesWithDetails(test, series, true);
	}

	test('instantiate_defaultConfig', function() {
	var series = buildSeries(undefined);
	drawSeries(this, series);
	});

	test('instantiate_lineChart', function() {
	var series = buildSeries({
	chartType: ChartSeriesType.LINE,
	colorId: 4,
	unselectedPointSize: 6,
	lineWidth: 2,
	unselectedPointDensityOpaque: 0.08
	});
	drawSeries(this, series);
	});

	test('instantiate_areaChart', function() {
	var series = buildSeries({
	chartType: ChartSeriesType.AREA,
	colorId: 2,
	backgroundOpacity: 0.2
	});
	drawSeries(this, series);
	});

	test('instantiate_largeSkipDistance', function() {
	var series = buildSeries({
	chartType: ChartSeriesType.AREA,
	colorId: 1,
	skipDistance: 40,
	unselectedPointDensityTransparent: 0.07
	});
	drawSeries(this, series);
	});

	test('instantiate_selection', function() {
	var series = buildSeries({
	chartType: ChartSeriesType.AREA,
	colorId: 10
	});
	series.points.forEach(function(point, index) {
	point.modelItem.selectionState = index % 4;
	});
	drawSeries(this, series);
	});

	test('instantiate_selectionWithAllConfigFlags', function() {
	var series = buildSeries({
	chartType: ChartSeriesType.AREA,
	selectedPointSize: 10,
	unselectedPointSize: 6,
	colorId: 15,
	lineWidth: 2,
	skipDistance: 25,
	unselectedPointDensityOpaque: 0.07,
	unselectedPointDensityTransparent: 0.09,
	backgroundOpacity: 0.8
	});
	series.points.forEach(function(point, index) {
	point.modelItem.selectionState = index % 4;
	});
	drawSeries(this, series);
	});

	test('checkRange', function() {
	var series = buildSeries();
	var range = series.range;
	assert.isFalse(range.isEmpty);
	assert.closeTo(range.min, -1, 0.05);
	assert.closeTo(range.max, 1, 0.05);
	});

	test('checkaddIntersectingEventsInRangeToSelectionInWorldSpace', function() {
	var series = buildSeries();

	// Too far left.
	var sel = new EventSet();
	series.addIntersectingEventsInRangeToSelectionInWorldSpace(
	-1000, -30.5, 40, sel);
	assert.lengthOf(sel, 0);

	// Select first point.
	var sel = new EventSet();
	series.addIntersectingEventsInRangeToSelectionInWorldSpace(
	-30.5, -29.5, 40, sel);
	assert.equal(tr.b.getOnlyElement(sel).index, 0);

	// Select second point.
	var sel = new EventSet();
	series.addIntersectingEventsInRangeToSelectionInWorldSpace(
	-28.8, -28.2, 40, sel);
	assert.equal(tr.b.getOnlyElement(sel).index, 1);

	// Select points in the middle.
	var sel = new EventSet();
	series.addIntersectingEventsInRangeToSelectionInWorldSpace(
	-0.99, 1.01, 40, sel);
	assert.lengthOf(sel, 3);
	var iterator = sel[Symbol.iterator]();
	assert.equal(iterator.next().value.index, 29);
	assert.equal(iterator.next().value.index, 30);
	assert.equal(iterator.next().value.index, 31);

	// Select the last point.
	var sel = new EventSet();
	series.addIntersectingEventsInRangeToSelectionInWorldSpace(
	668.99, 668.99, 40, sel);
	assert.equal(tr.b.getOnlyElement(sel).index, 59);

	// Too far right.
	var sel = new EventSet();
	series.addIntersectingEventsInRangeToSelectionInWorldSpace(
	669.01, 2000, 40, sel);
	assert.lengthOf(sel, 0);

	// Select everything.
	var sel = new EventSet();
	series.addIntersectingEventsInRangeToSelectionInWorldSpace(
	-29.01, 669.01, 40, sel);
	assert.lengthOf(sel, 60);
	});

	test('checkaddEventNearToProvidedEventToSelection', function() {
	var series = buildSeries();

	// Invalid event.
	var sel = new EventSet();
	assert.isFalse(series.addEventNearToProvidedEventToSelection(
	new Event(), 1, sel));
	assert.lengthOf(sel, 0);

	var sel = new EventSet();
	assert.isFalse(series.addEventNearToProvidedEventToSelection(
	new Event(), -1, sel));
	assert.lengthOf(sel, 0);

	// First point.
	var sel = new EventSet();
	assert.isTrue(series.addEventNearToProvidedEventToSelection(
	series.points[0].modelItem, 1, sel));
	assert.equal(tr.b.getOnlyElement(sel).index, 1);

	var sel = new EventSet();
	assert.isFalse(series.addEventNearToProvidedEventToSelection(
	series.points[0].modelItem, -1, sel));
	assert.lengthOf(sel, 0);

	// Middle point.
	var sel = new EventSet();
	assert.isTrue(series.addEventNearToProvidedEventToSelection(
	series.points[30].modelItem, 1, sel));
	assert.equal(tr.b.getOnlyElement(sel).index, 31);

	var sel = new EventSet();
	assert.isTrue(series.addEventNearToProvidedEventToSelection(
	series.points[30].modelItem, -1, sel));
	assert.equal(tr.b.getOnlyElement(sel).index, 29);

	// Last point.
	var sel = new EventSet();
	assert.isFalse(series.addEventNearToProvidedEventToSelection(
	series.points[59].modelItem, 1, sel));
	assert.lengthOf(sel, 0);

	var sel = new EventSet();
	assert.isTrue(series.addEventNearToProvidedEventToSelection(
	series.points[59].modelItem, -1, sel));
	assert.equal(tr.b.getOnlyElement(sel).index, 58);
	});

	test('checkAddClosestEventToSelection', function() {
	var series = buildSeries();

	// Left of first point.
	var sel = new EventSet();
	series.addClosestEventToSelection(-40, 9, -0.5, 0.5, sel);
	assert.lengthOf(sel, 0);

	var sel = new EventSet();
	series.addClosestEventToSelection(-40, 11, -0.5, 0.5, sel);
	assert.equal(tr.b.getOnlyElement(sel).index, 0);

	// Between two points.
	var sel = new EventSet();
	series.addClosestEventToSelection(0.4, 0.3, -0.5, 0.5, sel);
	assert.lengthOf(sel, 0);

	var sel = new EventSet();
	series.addClosestEventToSelection(0.4, 0.4, -0.5, 0.5, sel);
	assert.equal(tr.b.getOnlyElement(sel).index, 30);

	// Right of last point.
	var sel = new EventSet();
	series.addClosestEventToSelection(40, 10, -0.5, 0.5, sel);
	assert.lengthOf(sel, 0);

	var sel = new EventSet();
	series.addClosestEventToSelection(40, 12, -0.5, 0.5, sel);
	assert.equal(tr.b.getOnlyElement(sel).index, 59);
	});
	});
	</script>