cargdev/angular
1
0
Fork 0
Code Issues 9 Pull Requests Actions Packages Projects Releases Wiki Activity

refactor (benchmarks/): Ts'ifying benchmarks/

Browse Source 
Translating AtScript in benchmarks/ to TypeScript.
This commit is contained in:
Ian Riley
2015-05-29 21:40:15 -07:00
committed by Tobias Bosch
parent 0b43e3cf32
commit 2b60d1bae1
48 changed files with 1590 additions and 1715 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
modules/benchmarks/src/naive_infinite_scroll/app.js → modules/benchmarks/src/naive_infinite_scroll/app.ts
View File

@ -1,16 +1,14 @@
import {int, isPresent} from 'angular2/src/facade/lang';
import {isPresent} from 'angular2/src/facade/lang';
import {getIntParameter, bindAction} from 'angular2/src/test_lib/benchmark_util';
import {TimerWrapper} from 'angular2/src/facade/async';
import {ListWrapper} from 'angular2/src/facade/collection';
import {List, ListWrapper} from 'angular2/src/facade/collection';
import {ScrollAreaComponent} from './scroll_area';
import {NgIf, NgFor} from 'angular2/directives';
import {DOM} from 'angular2/src/dom/dom_adapter';
import {document} from 'angular2/src/facade/browser';
// TODO(radokirov): Once the application is transpiled by TS instead of Traceur,
// add those imports back into 'angular2/angular2';
import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
import {View} from 'angular2/src/core/annotations_impl/view';
import {Component, Directive, View} from 'angular2/angular2';
@Component({selector: 'scroll-app'})
@View({
@ -27,9 +25,9 @@ import {View} from 'angular2/src/core/annotations_impl/view';
</div>`
})
export class App {
scrollAreas:List<int>;
iterationCount:int;
scrollIncrement:int;
scrollAreas: List<int>;
iterationCount: int;
scrollIncrement: int;
constructor() {
var appSize = getIntParameter('appSize');
@ -40,9 +38,7 @@ export class App {
for (var i = 0; i < appSize; i++) {
ListWrapper.push(this.scrollAreas, i);
}
bindAction('#run-btn', () => {
this.runBenchmark();
});
bindAction('#run-btn', () => { this.runBenchmark(); });
bindAction('#reset-btn', () => {
this._getScrollDiv().scrollTop = 0;
var existingMarker = this._locateFinishedMarker();
@ -54,7 +50,7 @@ export class App {
runBenchmark() {
var scrollDiv = this._getScrollDiv();
var n:int = this.iterationCount;
var n: int = this.iterationCount;
var scheduleScroll;
scheduleScroll = () => {
TimerWrapper.setTimeout(() => {
@ -66,7 +62,7 @@ export class App {
this._scheduleFinishedMarker();
}
}, 0);
}
};
scheduleScroll();
}
@ -85,11 +81,7 @@ export class App {
}, 0);
}
_locateFinishedMarker() {
return DOM.querySelector(document.body, '#done');
}
_locateFinishedMarker() { return DOM.querySelector(document.body, '#done'); }
_getScrollDiv() {
return DOM.query('body /deep/ #testArea /deep/ #scrollDiv');
}
_getScrollDiv() { return DOM.query('body /deep/ #testArea /deep/ #scrollDiv'); }
}

175
modules/benchmarks/src/naive_infinite_scroll/cells.js
View File

@ -1,175 +0,0 @@
import {ListWrapper, MapWrapper} from 'angular2/src/facade/collection';
import {Company, Opportunity, Offering, Account, CustomDate, STATUS_LIST}
from './common';
import {NgFor} from 'angular2/directives';
// TODO(radokirov): Once the application is transpiled by TS instead of Traceur,
// add those imports back into 'angular2/angular2';
import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
import {View} from 'angular2/src/core/annotations_impl/view';
export class HasStyle {
style:Map;
constructor() {
this.style = MapWrapper.create();
}
set width(w) {
MapWrapper.set(this.style, 'width', w);
}
}
@Component({
selector: 'company-name',
properties: [
'width: cell-width',
'company'
]
})
@View({
directives: [],
template: `<div [style]="style">{{company.name}}</div>`
})
export class CompanyNameComponent extends HasStyle {
company:Company;
}
@Component({
selector: 'opportunity-name',
properties: [
'width: cell-width',
'opportunity'
]
})
@View({
directives: [],
template: `<div [style]="style">{{opportunity.name}}</div>`
})
export class OpportunityNameComponent extends HasStyle {
opportunity:Opportunity;
}
@Component({
selector: 'offering-name',
properties: [
'width: cell-width',
'offering'
]
})
@View({
directives: [],
template: `<div [style]="style">{{offering.name}}</div>`
})
export class OfferingNameComponent extends HasStyle {
offering:Offering;
}
export class Stage {
name:string;
isDisabled:boolean;
style:Map;
apply:Function;
}
@Component({
selector: 'stage-buttons',
properties: [
'width: cell-width',
'offering'
]
})
@View({
directives: [NgFor],
template: `
<div [style]="style">
<button template="ng-for #stage of stages"
[disabled]="stage.isDisabled"
[style]="stage.style"
on-click="setStage(stage)">
{{stage.name}}
</button>
</div>`
})
export class StageButtonsComponent extends HasStyle {
_offering:Offering;
stages:List<Stage>;
get offering():Offering { return this._offering; }
set offering(offering:Offering) {
this._offering = offering;
this._computeStageButtons();
}
setStage(stage:Stage) {
this._offering.status = stage.name;
this._computeStageButtons();
}
_computeStageButtons() {
var disabled = true;
this.stages = ListWrapper.clone(STATUS_LIST
.map((status) => {
var isCurrent = this._offering.status == status;
var stage = new Stage();
stage.name = status;
stage.isDisabled = disabled;
var stageStyle = MapWrapper.create();
MapWrapper.set(stageStyle, 'background-color',
disabled
? '#DDD'
: isCurrent
? '#DDF'
: '#FDD');
stage.style = stageStyle;
if (isCurrent) {
disabled = false;
}
return stage;
}));
}
}
@Component({
selector: 'account-cell',
properties: [
'width: cell-width',
'account'
]
})
@View({
directives: [],
template: `
<div [style]="style">
<a href="/account/{{account.accountId}}">
{{account.accountId}}
</a>
</div>`
})
export class AccountCellComponent extends HasStyle {
account:Account;
}
@Component({
selector: 'formatted-cell',
properties: [
'width: cell-width',
'value'
]
})
@View({
directives: [],
template: `<div [style]="style">{{formattedValue}}</div>`
})
export class FormattedCellComponent extends HasStyle {
formattedValue:string;
set value(value) {
if (value instanceof CustomDate) {
this.formattedValue = `${value.month}/${value.day}/${value.year}`;
} else {
this.formattedValue = value.toString();
}
}
}

114
modules/benchmarks/src/naive_infinite_scroll/cells.ts Normal file
View File

@ -0,0 +1,114 @@
import {List, ListWrapper, Map, MapWrapper} from 'angular2/src/facade/collection';
import {Company, Opportunity, Offering, Account, CustomDate, STATUS_LIST} from './common';
import {NgFor} from 'angular2/directives';
import {Component, Directive, View} from 'angular2/angular2';
export class HasStyle {
style: Map<any, any>;
constructor() { this.style = MapWrapper.create(); }
set width(w) { MapWrapper.set(this.style, 'width', w); }
}
@Component({selector: 'company-name', properties: ['width: cell-width', 'company']})
@View({directives: [], template: `<div [style]="style">{{company.name}}</div>`})
export class CompanyNameComponent extends HasStyle {
company: Company;
}
@Component({selector: 'opportunity-name', properties: ['width: cell-width', 'opportunity']})
@View({directives: [], template: `<div [style]="style">{{opportunity.name}}</div>`})
export class OpportunityNameComponent extends HasStyle {
opportunity: Opportunity;
}
@Component({selector: 'offering-name', properties: ['width: cell-width', 'offering']})
@View({directives: [], template: `<div [style]="style">{{offering.name}}</div>`})
export class OfferingNameComponent extends HasStyle {
offering: Offering;
}
export class Stage {
name: string;
isDisabled: boolean;
style: Map;
apply: Function;
}
@Component({selector: 'stage-buttons', properties: ['width: cell-width', 'offering']})
@View({
directives: [NgFor],
template: `
<div [style]="style">
<button template="ng-for #stage of stages"
[disabled]="stage.isDisabled"
[style]="stage.style"
on-click="setStage(stage)">
{{stage.name}}
</button>
</div>`
})
export class StageButtonsComponent extends HasStyle {
_offering: Offering;
stages: List<Stage>;
get offering(): Offering { return this._offering; }
set offering(offering: Offering) {
this._offering = offering;
this._computeStageButtons();
}
setStage(stage: Stage) {
this._offering.status = stage.name;
this._computeStageButtons();
}
_computeStageButtons() {
var disabled = true;
this.stages = ListWrapper.clone(STATUS_LIST.map((status) => {
var isCurrent = this._offering.status == status;
var stage = new Stage();
stage.name = status;
stage.isDisabled = disabled;
var stageStyle = MapWrapper.create();
MapWrapper.set(stageStyle, 'background-color',
disabled ? '#DDD' : isCurrent ? '#DDF' : '#FDD');
stage.style = stageStyle;
if (isCurrent) {
disabled = false;
}
return stage;
}));
}
}
@Component({selector: 'account-cell', properties: ['width: cell-width', 'account']})
@View({
directives: [],
template: `
<div [style]="style">
<a href="/account/{{account.accountId}}">
{{account.accountId}}
</a>
</div>`
})
export class AccountCellComponent extends HasStyle {
account: Account;
}
@Component({selector: 'formatted-cell', properties: ['width: cell-width', 'value']})
@View({directives: [], template: `<div [style]="style">{{formattedValue}}</div>`})
export class FormattedCellComponent extends HasStyle {
formattedValue: string;
set value(value) {
if (value instanceof CustomDate) {
this.formattedValue = `${value.month}/${value.day}/${value.year}`;
} else {
this.formattedValue = value.toString();
}
}
}

203
modules/benchmarks/src/naive_infinite_scroll/common.js
View File

@ -1,203 +0,0 @@
import {Math} from 'angular2/src/facade/math';
import {ListWrapper, MapWrapper} from 'angular2/src/facade/collection';
export var ITEMS = 1000;
export var ITEM_HEIGHT = 40;
export var VISIBLE_ITEMS = 17;
export var HEIGHT = ITEMS * ITEM_HEIGHT;
export var VIEW_PORT_HEIGHT = ITEM_HEIGHT * VISIBLE_ITEMS;
export var COMPANY_NAME_WIDTH = 100;
export var OPPORTUNITY_NAME_WIDTH = 100;
export var OFFERING_NAME_WIDTH = 100;
export var ACCOUNT_CELL_WIDTH = 50;
export var BASE_POINTS_WIDTH = 50;
export var KICKER_POINTS_WIDTH = 50;
export var STAGE_BUTTONS_WIDTH = 220;
export var BUNDLES_WIDTH = 120;
export var DUE_DATE_WIDTH = 100;
export var END_DATE_WIDTH = 100;
export var AAT_STATUS_WIDTH = 100;
export var ROW_WIDTH = COMPANY_NAME_WIDTH +
OPPORTUNITY_NAME_WIDTH +
OFFERING_NAME_WIDTH +
ACCOUNT_CELL_WIDTH +
BASE_POINTS_WIDTH +
KICKER_POINTS_WIDTH +
STAGE_BUTTONS_WIDTH +
BUNDLES_WIDTH +
DUE_DATE_WIDTH +
END_DATE_WIDTH +
AAT_STATUS_WIDTH;
export var STATUS_LIST = [
'Planned', 'Pitched', 'Won', 'Lost'
];
export var AAT_STATUS_LIST = [
'Active', 'Passive', 'Abandoned'
];
// Imitate Streamy entities.
// Just a non-trivial object. Nothing fancy or correct.
export class CustomDate {
year:number;
month:number;
day:number;
constructor(y:number, m:number, d:number) {
this.year = y;
this.month = m;
this.day = d;
}
addDays(days:number):CustomDate {
var newDay = this.day + days;
var newMonth = this.month + Math.floor(newDay / 30);
newDay = newDay % 30;
var newYear = this.year + Math.floor(newMonth / 12);
return new CustomDate(newYear, newMonth, newDay);
}
static now():CustomDate {
return new CustomDate(2014, 1, 28);
}
}
export class RawEntity {
_data:Map;
constructor() {
this._data = MapWrapper.create();
}
get(key:string) {
if (key.indexOf('.') == -1) {
return this._data[key];
}
var pieces = key.split('.');
var last = ListWrapper.last(pieces);
pieces.length = pieces.length - 1;
var target = _resolve(pieces, this);
if (target == null) {
return null;
}
return target[last];
}
set(key:string, value) {
if (key.indexOf('.') == -1) {
this._data[key] = value;
return;
}
var pieces = key.split('.');
var last = ListWrapper.last(pieces);
pieces.length = pieces.length - 1;
var target = _resolve(pieces, this);
target[last] = value;
}
remove(key:string) {
if (!key.contains('.')) {
return MapWrapper.delete(this._data, key);
}
var pieces = key.split('.');
var last = ListWrapper.last(pieces);
pieces.length = pieces.length - 1;
var target = _resolve(pieces, this);
return target.remove(last);
}
_resolve(pieces, start) {
var cur = start;
for (var i = 0; i < pieces.length; i++) {
cur = cur[pieces[i]];
if (cur == null) {
return null;
}
}
return cur;
}
}
export class Company extends RawEntity {
get name():string { return this.get('name'); }
set name(val:string) {
this.set('name', val);
}
}
export class Offering extends RawEntity {
get name():string { return this.get('name'); }
set name(val:string) {
this.set('name', val);
}
get company():Company { return this.get('company'); }
set company(val:Company) {
this.set('company', val);
}
get opportunity():Opportunity { return this.get('opportunity'); }
set opportunity(val:Opportunity) {
this.set('opportunity', val);
}
get account():Account { return this.get('account'); }
set account(val:Account) {
this.set('account', val);
}
get basePoints():number { return this.get('basePoints'); }
set basePoints(val:number) {
this.set('basePoints', val);
}
get kickerPoints():number { return this.get('kickerPoints'); }
set kickerPoints(val:number) {
this.set('kickerPoints', val);
}
get status():string { return this.get('status'); }
set status(val:string) {
this.set('status', val);
}
get bundles():string { return this.get('bundles'); }
set bundles(val:string) {
this.set('bundles', val);
}
get dueDate():CustomDate { return this.get('dueDate'); }
set dueDate(val:CustomDate) {
this.set('dueDate', val);
}
get endDate():CustomDate { return this.get('endDate'); }
set endDate(val:CustomDate) {
this.set('endDate', val);
}
get aatStatus():string { return this.get('aatStatus'); }
set aatStatus(val:string) {
this.set('aatStatus', val);
}
}
export class Opportunity extends RawEntity {
get name():string { return this.get('name'); }
set name(val:string) {
this.set('name', val);
}
}
export class Account extends RawEntity {
get accountId():number { return this.get('accountId'); }
set accountId(val:number) {
this.set('accountId', val);
}
}

159
modules/benchmarks/src/naive_infinite_scroll/common.ts Normal file
View File

@ -0,0 +1,159 @@
import {Math} from 'angular2/src/facade/math';
import {ListWrapper, Map, MapWrapper} from 'angular2/src/facade/collection';
export var ITEMS = 1000;
export var ITEM_HEIGHT = 40;
export var VISIBLE_ITEMS = 17;
export var HEIGHT = ITEMS * ITEM_HEIGHT;
export var VIEW_PORT_HEIGHT = ITEM_HEIGHT * VISIBLE_ITEMS;
export var COMPANY_NAME_WIDTH = 100;
export var OPPORTUNITY_NAME_WIDTH = 100;
export var OFFERING_NAME_WIDTH = 100;
export var ACCOUNT_CELL_WIDTH = 50;
export var BASE_POINTS_WIDTH = 50;
export var KICKER_POINTS_WIDTH = 50;
export var STAGE_BUTTONS_WIDTH = 220;
export var BUNDLES_WIDTH = 120;
export var DUE_DATE_WIDTH = 100;
export var END_DATE_WIDTH = 100;
export var AAT_STATUS_WIDTH = 100;
export var ROW_WIDTH = COMPANY_NAME_WIDTH + OPPORTUNITY_NAME_WIDTH + OFFERING_NAME_WIDTH +
ACCOUNT_CELL_WIDTH + BASE_POINTS_WIDTH + KICKER_POINTS_WIDTH +
STAGE_BUTTONS_WIDTH + BUNDLES_WIDTH + DUE_DATE_WIDTH + END_DATE_WIDTH +
AAT_STATUS_WIDTH;
export var STATUS_LIST = ['Planned', 'Pitched', 'Won', 'Lost'];
export var AAT_STATUS_LIST = ['Active', 'Passive', 'Abandoned'];
// Imitate Streamy entities.
// Just a non-trivial object. Nothing fancy or correct.
export class CustomDate {
year: number;
month: number;
day: number;
constructor(y: number, m: number, d: number) {
this.year = y;
this.month = m;
this.day = d;
}
addDays(days: number): CustomDate {
var newDay = this.day + days;
var newMonth = this.month + Math.floor(newDay / 30);
newDay = newDay % 30;
var newYear = this.year + Math.floor(newMonth / 12);
return new CustomDate(newYear, newMonth, newDay);
}
static now(): CustomDate { return new CustomDate(2014, 1, 28); }
}
export class RawEntity {
_data: Map<any, any>;
constructor() { this._data = MapWrapper.create(); }
get(key: string) {
if (key.indexOf('.') == -1) {
return this._data[key];
}
var pieces = key.split('.');
var last = ListWrapper.last(pieces);
pieces.length = pieces.length - 1;
var target = _resolve(pieces, this);
if (target == null) {
return null;
}
return target[last];
}
set(key: string, value) {
if (key.indexOf('.') == -1) {
this._data[key] = value;
return;
}
var pieces = key.split('.');
var last = ListWrapper.last(pieces);
pieces.length = pieces.length - 1;
var target = _resolve(pieces, this);
target[last] = value;
}
remove(key: string) {
if (!key.contains('.')) {
return MapWrapper.delete(this._data, key);
}
var pieces = key.split('.');
var last = ListWrapper.last(pieces);
pieces.length = pieces.length - 1;
var target = _resolve(pieces, this);
return target.remove(last);
}
_resolve(pieces, start) {
var cur = start;
for (var i = 0; i < pieces.length; i++) {
cur = cur[pieces[i]];
if (cur == null) {
return null;
}
}
return cur;
}
}
export class Company extends RawEntity {
get name(): string { return this.get('name'); }
set name(val: string) { this.set('name', val); }
}
export class Offering extends RawEntity {
get name(): string { return this.get('name'); }
set name(val: string) { this.set('name', val); }
get company(): Company { return this.get('company'); }
set company(val: Company) { this.set('company', val); }
get opportunity(): Opportunity { return this.get('opportunity'); }
set opportunity(val: Opportunity) { this.set('opportunity', val); }
get account(): Account { return this.get('account'); }
set account(val: Account) { this.set('account', val); }
get basePoints(): number { return this.get('basePoints'); }
set basePoints(val: number) { this.set('basePoints', val); }
get kickerPoints(): number { return this.get('kickerPoints'); }
set kickerPoints(val: number) { this.set('kickerPoints', val); }
get status(): string { return this.get('status'); }
set status(val: string) { this.set('status', val); }
get bundles(): string { return this.get('bundles'); }
set bundles(val: string) { this.set('bundles', val); }
get dueDate(): CustomDate { return this.get('dueDate'); }
set dueDate(val: CustomDate) { this.set('dueDate', val); }
get endDate(): CustomDate { return this.get('endDate'); }
set endDate(val: CustomDate) { this.set('endDate', val); }
get aatStatus(): string { return this.get('aatStatus'); }
set aatStatus(val: string) { this.set('aatStatus', val); }
}
export class Opportunity extends RawEntity {
get name(): string { return this.get('name'); }
set name(val: string) { this.set('name', val); }
}
export class Account extends RawEntity {
get accountId(): number { return this.get('accountId'); }
set accountId(val: number) { this.set('accountId', val); }
}

24
modules/benchmarks/src/naive_infinite_scroll/index.js → modules/benchmarks/src/naive_infinite_scroll/index.ts
View File

@ -1,6 +1,6 @@
import {MapWrapper} from 'angular2/src/facade/collection';
import {bootstrap} from 'angular2/angular2';
import {bootstrap} from 'angular2/angular2';
import {reflector} from 'angular2/src/reflection/reflection';
import {ReflectionCapabilities} from 'angular2/src/reflection/reflection_capabilities';
@ -14,7 +14,7 @@ export function main() {
bootstrap(App, createBindings());
}
function createBindings():List {
function createBindings(): List {
return [bind(APP_VIEW_POOL_CAPACITY).toValue(100000)];
}
@ -23,19 +23,19 @@ export function setupReflector() {
// TODO(kegluneq): Generate this.
reflector.registerSetters({
'style': (o, m) => {
// HACK
MapWrapper.forEach(m, function(v, k) {
o.style.setProperty(k, v);
});
}
'style': (o, m) =>
{
// HACK
MapWrapper.forEach(m, function(v, k) { o.style.setProperty(k, v); });
}
});
reflector.registerMethods({
'onScroll': (o, args) => {
// HACK
o.onScroll(args[0]);
},
'onScroll': (o, args) =>
{
// HACK
o.onScroll(args[0]);
},
'setStage': (o, args) => o.setStage(args[0])
});
}

46
modules/benchmarks/src/naive_infinite_scroll/random_data.js → modules/benchmarks/src/naive_infinite_scroll/random_data.ts
View File

@ -1,17 +1,24 @@
import {int, StringWrapper} from 'angular2/src/facade/lang';
import {StringWrapper} from 'angular2/src/facade/lang';
import {List, ListWrapper} from 'angular2/src/facade/collection';
import {CustomDate, Offering, Company, Opportunity, Account, STATUS_LIST,
AAT_STATUS_LIST} from './common';
import {
CustomDate,
Offering,
Company,
Opportunity,
Account,
STATUS_LIST,
AAT_STATUS_LIST
} from './common';
export function generateOfferings(count:int):List<Offering> {
export function generateOfferings(count: int): List<Offering> {
var res = [];
for(var i = 0; i < count; i++) {
for (var i = 0; i < count; i++) {
ListWrapper.push(res, generateOffering(i));
}
return res;
}
export function generateOffering(seed:int):Offering {
export function generateOffering(seed: int): Offering {
var res = new Offering();
res.name = generateName(seed++);
res.company = generateCompany(seed++);
@ -27,36 +34,47 @@ export function generateOffering(seed:int):Offering {
return res;
}
export function generateCompany(seed:int):Company {
export function generateCompany(seed: int): Company {
var res = new Company();
res.name = generateName(seed);
return res;
}
export function generateOpportunity(seed:int):Opportunity {
export function generateOpportunity(seed: int): Opportunity {
var res = new Opportunity();
res.name = generateName(seed);
return res;
}
export function generateAccount(seed:int):Account {
export function generateAccount(seed: int): Account {
var res = new Account();
res.accountId = seed;
return res;
}
var names = [
'Foo', 'Bar', 'Baz', 'Qux', 'Quux', 'Garply', 'Waldo', 'Fred', 'Plugh',
'Xyzzy', 'Thud', 'Cruft', 'Stuff'
'Foo',
'Bar',
'Baz',
'Qux',
'Quux',
'Garply',
'Waldo',
'Fred',
'Plugh',
'Xyzzy',
'Thud',
'Cruft',
'Stuff'
];
function generateName(seed:int):string {
function generateName(seed: int): string {
return names[seed % names.length];
}
var offsets = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
function randomDate(seed:int, minDate:CustomDate = null):CustomDate {
function randomDate(seed: int, minDate: CustomDate = null): CustomDate {
if (minDate == null) {
minDate = CustomDate.now();
}
@ -67,7 +85,7 @@ function randomDate(seed:int, minDate:CustomDate = null):CustomDate {
var stringLengths = [5, 7, 9, 11, 13];
var charCodeOffsets = [0, 1, 2, 3, 4, 5, 6, 7, 8];
function randomString(seed:int):string {
function randomString(seed: int): string {
var len = stringLengths[seed % 5];
var str = '';
for (var i = 0; i < len; i++) {

20
modules/benchmarks/src/naive_infinite_scroll/scroll_area.js → modules/benchmarks/src/naive_infinite_scroll/scroll_area.ts
View File

@ -1,13 +1,17 @@
import {ListWrapper, MapWrapper} from 'angular2/src/facade/collection';
import {Math} from 'angular2/src/facade/math';
// TODO(radokirov): Once the application is transpiled by TS instead of Traceur,
// add those imports back into 'angular2/angular2';
import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
import {View} from 'angular2/src/core/annotations_impl/view';
import {Component, Directive, View} from 'angular2/angular2';
import {Offering, ITEMS, ITEM_HEIGHT, VISIBLE_ITEMS, VIEW_PORT_HEIGHT,
ROW_WIDTH, HEIGHT} from './common';
import {
Offering,
ITEMS,
ITEM_HEIGHT,
VISIBLE_ITEMS,
VIEW_PORT_HEIGHT,
ROW_WIDTH,
HEIGHT
} from './common';
import {generateOfferings} from './random_data';
import {ScrollItemComponent} from './scroll_item';
import {NgFor} from 'angular2/directives';
@ -33,8 +37,8 @@ import {NgFor} from 'angular2/directives';
</div>`
})
export class ScrollAreaComponent {
_fullList:List<Offering>;
visibleItems:List<Offering>;
_fullList: List<Offering>;
visibleItems: List<Offering>;
scrollDivStyle;
paddingDiv;

87
modules/benchmarks/src/naive_infinite_scroll/scroll_item.js → modules/benchmarks/src/naive_infinite_scroll/scroll_item.ts
View File

@ -1,24 +1,32 @@
import {ListWrapper, MapWrapper} from 'angular2/src/facade/collection';
import {CompanyNameComponent, OpportunityNameComponent,
OfferingNameComponent, StageButtonsComponent, AccountCellComponent,
FormattedCellComponent} from './cells';
import {
CompanyNameComponent,
OpportunityNameComponent,
OfferingNameComponent,
StageButtonsComponent,
AccountCellComponent,
FormattedCellComponent
} from './cells';
// TODO(radokirov): Once the application is transpiled by TS instead of Traceur,
// add those imports back into 'angular2/angular2';
import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
import {View} from 'angular2/src/core/annotations_impl/view';
import {Component, Directive, View} from 'angular2/angular2';
import {Offering, ITEM_HEIGHT, COMPANY_NAME_WIDTH, OPPORTUNITY_NAME_WIDTH,
OFFERING_NAME_WIDTH, ACCOUNT_CELL_WIDTH, BASE_POINTS_WIDTH,
KICKER_POINTS_WIDTH, STAGE_BUTTONS_WIDTH, BUNDLES_WIDTH, DUE_DATE_WIDTH,
END_DATE_WIDTH, AAT_STATUS_WIDTH} from './common';
import {
Offering,
ITEM_HEIGHT,
COMPANY_NAME_WIDTH,
OPPORTUNITY_NAME_WIDTH,
OFFERING_NAME_WIDTH,
ACCOUNT_CELL_WIDTH,
BASE_POINTS_WIDTH,
KICKER_POINTS_WIDTH,
STAGE_BUTTONS_WIDTH,
BUNDLES_WIDTH,
DUE_DATE_WIDTH,
END_DATE_WIDTH,
AAT_STATUS_WIDTH
} from './common';
@Component({
selector: 'scroll-item',
properties: [
'offering'
]
})
@Component({selector: 'scroll-item', properties: ['offering']})
@View({
directives: [
CompanyNameComponent,
@ -66,29 +74,28 @@ import {Offering, ITEM_HEIGHT, COMPANY_NAME_WIDTH, OPPORTUNITY_NAME_WIDTH,
</div>`
})
export class ScrollItemComponent {
offering: Offering;
itemStyle;
offering:Offering;
itemStyle;
constructor() {
this.itemStyle = MapWrapper.createFromPairs([
['height', `${ITEM_HEIGHT}px`],
['line-height', `${ITEM_HEIGHT}px`],
['font-size', '18px'],
['display', 'flex'],
['justify-content', 'space-between']
]);
}
constructor() {
this.itemStyle = MapWrapper.createFromPairs([
['height', `${ITEM_HEIGHT}px`],
['line-height', `${ITEM_HEIGHT}px`],
['font-size', '18px'],
['display', 'flex'],
['justify-content', 'space-between']
]);
}
get companyNameWidth() { return `${COMPANY_NAME_WIDTH}px`; }
get opportunityNameWidth() { return `${OPPORTUNITY_NAME_WIDTH}px`; }
get offeringNameWidth() { return `${OFFERING_NAME_WIDTH}px`; }
get accountCellWidth() { return `${ACCOUNT_CELL_WIDTH}px`; }
get basePointsWidth() { return `${BASE_POINTS_WIDTH}px`; }
get kickerPointsWidth() { return `${KICKER_POINTS_WIDTH}px`; }
get stageButtonsWidth() { return `${STAGE_BUTTONS_WIDTH}px`; }
get bundlesWidth() { return `${BUNDLES_WIDTH}px`; }
get dueDateWidth() { return `${DUE_DATE_WIDTH}px`; }
get endDateWidth() { return `${END_DATE_WIDTH}px`; }
get aatStatusWidth() { return `${AAT_STATUS_WIDTH}px`; }
get companyNameWidth() { return `${COMPANY_NAME_WIDTH}px`; }
get opportunityNameWidth() { return `${OPPORTUNITY_NAME_WIDTH}px`; }
get offeringNameWidth() { return `${OFFERING_NAME_WIDTH}px`; }
get accountCellWidth() { return `${ACCOUNT_CELL_WIDTH}px`; }
get basePointsWidth() { return `${BASE_POINTS_WIDTH}px`; }
get kickerPointsWidth() { return `${KICKER_POINTS_WIDTH}px`; }
get stageButtonsWidth() { return `${STAGE_BUTTONS_WIDTH}px`; }
get bundlesWidth() { return `${BUNDLES_WIDTH}px`; }
get dueDateWidth() { return `${DUE_DATE_WIDTH}px`; }
get endDateWidth() { return `${END_DATE_WIDTH}px`; }
get aatStatusWidth() { return `${AAT_STATUS_WIDTH}px`; }
}