Best JavaScript code snippet using wpt
tree.component.ts
Source:tree.component.ts
1import { Component, OnInit } from '@angular/core';2import { CommonService } from '../common/common-service';3import { TopoNetwork } from '../common/TopoNetwork';4@Component({5 selector: 'app-tree',6 templateUrl: './tree.component.html',7 styleUrls: ['./tree.component.less']8})9export class TreeComponent implements OnInit {10 static data = {11 devices: [12 {13 'name': '1',14 'location': {15 x: 638, y: 23116 },17 'style': {18 'color': '0Xcbf0c5',19 'width': 10,20 },21 },22 {23 'name': '2',24 'location': {25 x: 638, y: 28126 },27 'style': {28 'color': '0X55efc4',29 'width': 0,30 },31 },32 {33 'name': '3',34 'location': {35 x: 538, y: 33136 },37 'style': {38 'color': '0Xa3d89f',39 'width': 10,40 },41 },42 {43 'name': '4',44 'location': {45 x: 738, y: 33146 },47 'style': {48 'color': '0Xa3d89f',49 'width': 10,50 },51 },52 {53 'name': '5',54 'location': {55 x: 638, y: 31156 },57 'style': {58 'color': '0X80ecec',59 'width': 0,60 },61 },62 {63 'name': '6',64 'location': {65 x: 605, y: 32366 },67 'style': {68 'color': '0Xa3d89f',69 'width': 10,70 },71 },72 {73 'name': '7',74 'location': {75 x: 672, y: 32576 },77 'style': {78 'color': '0Xa3d89f',79 'width': 10,80 },81 },82 {83 'name': '8',84 'location': {85 x: 638, y: 34186 },87 'style': {88 'color': '0X74b9ff',89 'width': 0,90 },91 },92 {93 'name': '9',94 'location': {95 x: 588, y: 36196 },97 'style': {98 'color': '0X87c16f',99 'width': 10,100 },101 },102 {103 'name': '10',104 'location': {105 x: 688, y: 361106 },107 'style': {108 'color': '0X87c16f',109 'width': 10,110 },111 },112 {113 'name': '11',114 'location': {115 x: 488, y: 371116 },117 'style': {118 'color': '0X87c16f',119 'width': 10,120 },121 },122 {123 'name': '12',124 'location': {125 x: 788, y: 371126 },127 'style': {128 'color': '0X87c16f',129 'width': 10,130 },131 },132 {133 'name': '13',134 'location': {135 x: 638, y: 371136 },137 'style': {138 'color': '0X74b9ff',139 'width': 0,140 },141 },142 {143 'name': '14',144 'location': {145 x: 605, y: 384146 },147 'style': {148 'color': '0X95c94b',149 'width': 10,150 },151 },152 {153 'name': '15',154 'location': {155 x: 678, y: 389156 },157 'style': {158 'color': '0X95c94b',159 'width': 10,160 },161 },162 {163 'name': '16',164 'location': {165 x: 527, y: 385166 },167 'style': {168 'color': '0X95c94b',169 'width': 10,170 },171 },172 {173 'name': '17',174 'location': {175 x: 750, y: 386176 },177 'style': {178 'color': '0X95c94b',179 'width': 10,180 },181 },182 {183 'name': '18',184 'location': {185 x: 638, y: 401186 },187 'style': {188 'color': '0Xc1c451',189 'width': 0,190 },191 },192 {193 'name': '19',194 'location': {195 x: 579, y: 427196 },197 'style': {198 'color': '0Xc1c451',199 'width': 10,200 },201 },202 {203 'name': '20',204 'location': {205 x: 702, y: 426206 },207 'style': {208 'color': '0Xc1c451',209 'width': 10,210 },211 },212 {213 'name': '21',214 'location': {215 x: 488, y: 431216 },217 'style': {218 'color': '0Xc1c451',219 'width': 10,220 },221 },222 {223 'name': '22',224 'location': {225 x: 788, y: 431226 },227 'style': {228 'color': '0Xc1c451',229 'width': 10,230 },231 },232 {233 'name': '23',234 'location': {235 x: 638, y: 431236 },237 'style': {238 'color': '0Xc1c451',239 'width': 0,240 },241 },242 {243 'name': '24',244 'location': {245 x: 601, y: 447246 },247 'style': {248 'color': '0Xefe854',249 'width': 10,250 },251 },252 {253 'name': '25',254 'location': {255 x: 679, y: 446256 },257 'style': {258 'color': '0Xefe854',259 'width': 10,260 },261 },262 {263 'name': '26',264 'location': {265 x: 525, y: 448266 },267 'style': {268 'color': '0Xefe854',269 'width': 10,270 },271 },272 {273 'name': '27',274 'location': {275 x: 753, y: 446276 },277 'style': {278 'color': '0Xefe854',279 'width': 10,280 },281 },282 {283 'name': '28',284 'location': {285 x: 638, y: 461286 },287 'style': {288 'color': '0Xc1c451',289 'width': 0,290 },291 },292 {293 'name': '29',294 'location': {295 x: 588, y: 481296 },297 'style': {298 'color': '0Xb3c648',299 'width': 10,300 },301 },302 {303 'name': '30',304 'location': {305 x: 688, y: 481306 },307 'style': {308 'color': '0Xb3c648',309 'width': 10,310 },311 },312 {313 'name': '31',314 'location': {315 x: 488, y: 491316 },317 'style': {318 'color': '0Xb3c648',319 'width': 10,320 },321 },322 {323 'name': '32',324 'location': {325 x: 788, y: 491326 },327 'style': {328 'color': '0Xb3c648',329 'width': 10,330 },331 },332 {333 'name': '33',334 'location': {335 x: 638, y: 491336 },337 'style': {338 'color': '0Xb3c648',339 'width': 0,340 },341 },342 {343 'name': '34',344 'location': {345 x: 538, y: 521346 },347 'style': {348 'color': '0X95c94b',349 'width': 10,350 },351 },352 {353 'name': '35',354 'location': {355 x: 738, y: 521356 },357 'style': {358 'color': '0X95c94b',359 'width': 10,360 },361 },362 {363 'name': '36',364 'location': {365 x: 638, y: 546366 },367 'style': {368 'color': '0X87c16f',369 'width': 10,370 },371 },372 ],373 links: [374 {375 'local_host': '1',376 'remote_host': '2',377 style: {378 lineWidth: 2379 }380 },381 {382 'local_host': '2',383 'remote_host': '3',384 style: {385 lineWidth: 1386 }387 },388 {389 'local_host': '2',390 'remote_host': '4',391 style: {392 lineWidth: 1393 }394 },395 {396 'local_host': '2',397 'remote_host': '5',398 style: {399 lineWidth: 2400 }401 },402 {403 'local_host': '5',404 'remote_host': '6',405 style: {406 lineWidth: 1407 }408 },409 {410 'local_host': '5',411 'remote_host': '7',412 style: {413 lineWidth: 1414 }415 },416 {417 'local_host': '5',418 'remote_host': '8',419 style: {420 lineWidth: 2421 }422 },423 {424 'local_host': '8',425 'remote_host': '9',426 style: {427 lineWidth: 1428 }429 },430 {431 'local_host': '8',432 'remote_host': '10',433 style: {434 lineWidth: 1435 }436 },437 {438 'local_host': '5',439 'remote_host': '11',440 style: {441 lineWidth: 1442 }443 },444 {445 'local_host': '5',446 'remote_host': '12',447 style: {448 lineWidth: 1449 }450 },451 {452 'local_host': '8',453 'remote_host': '13',454 style: {455 lineWidth: 2456 }457 },458 {459 'local_host': '13',460 'remote_host': '14',461 style: {462 lineWidth: 1463 }464 },465 {466 'local_host': '13',467 'remote_host': '15',468 style: {469 lineWidth: 1470 }471 },472 {473 'local_host': '8',474 'remote_host': '16',475 style: {476 lineWidth: 1477 }478 },479 {480 'local_host': '8',481 'remote_host': '17',482 style: {483 lineWidth: 1484 }485 },486 {487 'local_host': '13',488 'remote_host': '18',489 style: {490 lineWidth: 2491 }492 },493 {494 'local_host': '18',495 'remote_host': '19',496 style: {497 lineWidth: 1498 }499 },500 {501 'local_host': '18',502 'remote_host': '20',503 style: {504 lineWidth: 1505 }506 },507 {508 'local_host': '13',509 'remote_host': '21',510 style: {511 lineWidth: 1512 }513 },514 {515 'local_host': '13',516 'remote_host': '22',517 style: {518 lineWidth: 1519 }520 },521 {522 'local_host': '18',523 'remote_host': '23',524 style: {525 lineWidth: 2526 }527 },528 {529 'local_host': '23',530 'remote_host': '24',531 style: {532 lineWidth: 1533 }534 },535 {536 'local_host': '23',537 'remote_host': '25',538 style: {539 lineWidth: 1540 }541 },542 {543 'local_host': '18',544 'remote_host': '26',545 style: {546 lineWidth: 1547 }548 },549 {550 'local_host': '18',551 'remote_host': '27',552 style: {553 lineWidth: 1554 }555 },556 {557 'local_host': '23',558 'remote_host': '28',559 style: {560 lineWidth: 2561 }562 },563 {564 'local_host': '28',565 'remote_host': '29',566 style: {567 lineWidth: 1568 }569 },570 {571 'local_host': '28',572 'remote_host': '30',573 style: {574 lineWidth: 1575 }576 },577 {578 'local_host': '23',579 'remote_host': '31',580 style: {581 lineWidth: 1582 }583 },584 {585 'local_host': '23',586 'remote_host': '32',587 style: {588 lineWidth: 1589 }590 },591 {592 'local_host': '28',593 'remote_host': '33',594 style: {595 lineWidth: 2596 }597 },598 {599 'local_host': '33',600 'remote_host': '34',601 style: {602 lineWidth: 1603 }604 },605 {606 'local_host': '33',607 'remote_host': '35',608 style: {609 lineWidth: 1610 }611 },612 {613 'local_host': '33',614 'remote_host': '36',615 style: {616 lineWidth: 2617 }618 },619 ],620 groups: [621 ]622 };623 constructor(624 public commonService: CommonService,625 ) { }626 ngOnInit() {627 this.renderTopo();628 }629 public renderTopo() {630 const network = new TopoNetwork(631 'network',632 this.commonService,633 );634 network.drawNoIConTopology(TreeComponent.data);635 }...
group.component.ts
Source:group.component.ts
1import { Component, OnInit } from '@angular/core';2import { CommonService } from '../common/common-service';3import { TopoNetwork } from '../common/TopoNetwork';4@Component({5 selector: 'app-group',6 templateUrl: './group.component.html',7 styleUrls: ['./group.component.less']8})9export class GroupComponent implements OnInit {10 static data = {11 devices: [12 {13 'name': '1',14 'location': {15 x: 238.88337402216263,16 y: 235.78330620639008,17 },18 'label': true,19 'tooltip': false,20 'style': {21 'color': '0X55a6cb',22 'width': 15,23 },24 },25 {26 'name': '2',27 'location': {28 x: 217.88337402211022,29 y: 375.78330620674,30 },31 'label': true,32 'tooltip': false,33 'style': {34 'color': '0Xa4d8a0',35 'width': 15,36 },37 },38 {39 'name': '3',40 'location': {41 x: 308.88337402233765,42 y: 305.783306206565143 },44 'label': true,45 'tooltip': false,46 'style': {47 'color': '0Xfab1a0',48 'width': 15,49 },50 },51 {52 'name': '4',53 'location': {54 x: 378.8833740225127,55 y: 375.7833062067456 },57 'label': true,58 'tooltip': false,59 'style': {60 'color': '0Xfcc242',61 'width': 15,62 },63 },64 {65 'name': '5',66 'location': {67 x: 343.8833740224252,68 y: 200.783306206302669 },70 'label': true,71 'tooltip': false,72 'style': {73 'color': '0X74b9ff',74 'width': 15,75 },76 },77 {78 'name': '6',79 'location': {80 x: 448.8833740226876,81 y: 228.783306206372682 },83 'label': true,84 'tooltip': false,85 'style': {86 'color': '0X00cec9',87 'width': 15,88 },89 },90 {91 'name': '7',92 'location': {93 x: 553.8833740229504,94 y: 284.7833062065126395 },96 'label': true,97 'tooltip': false,98 'style': {99 'color': '0Xadc0eb',100 'width': 15,101 },102 },103 {104 'name': '8',105 'location': {106 x: 469.8833740227402,107 y: 361.7833062067051108 },109 'label': true,110 'tooltip': false,111 'style': {112 'color': '0X0984e3',113 'width': 15,114 },115 },116 {117 'name': '9',118 'location': {119 x: 679.8833740232652,120 y: 305.7833062065651121 },122 'label': true,123 'tooltip': false,124 'style': {125 'color': '0X00cec9',126 'width': 15,127 },128 },129 {130 'name': '10',131 'location': {132 x: 763.8833740234752,133 y: 375.78330620674134 },135 'label': true,136 'tooltip': false,137 'style': {138 'color': '0Xa09bfd',139 'width': 15,140 },141 },142 {143 'name': '11',144 'location': {145 x: 847.8833740236854,146 y: 445.78330620691514147 },148 'label': true,149 'tooltip': false,150 'style': {151 'color': '0Xb3bec5',152 'width': 15,153 },154 },155 {156 'name': '12',157 'location': {158 x: 812.8833740235979,159 y: 214.78330620633758160 },161 'label': true,162 'tooltip': false,163 'style': {164 'color': '0X6d5ce7',165 'width': 15,166 },167 },168 {169 'name': '13',170 'location': {171 x: 924.8833740238779,172 y: 319.7833062066002173 },174 'label': true,175 'tooltip': false,176 'style': {177 'color': '0Xffeaa9',178 'width': 15,179 },180 },181 {182 'name': '14',183 'location': {184 x: 1008.883374024088,185 y: 361.7833062067051186 },187 'label': true,188 'tooltip': false,189 'style': {190 'color': '0Xfdca6d',191 'width': 15,192 },193 },194 {195 'name': '15',196 'location': {197 x: 1148.8833740244377,198 y: 480.7833062070026199 },200 'label': true,201 'tooltip': false,202 'style': {203 'color': '0Xe17154',204 'width': 15,205 },206 },207 {208 'name': '16',209 'location': {210 x: 938.8833740239131,211 y: 235.78330620639008212 },213 'label': true,214 'tooltip': false,215 'style': {216 'color': '0Xfab1a0',217 'width': 15,218 },219 },220 {221 'name': '17',222 'location': {223 x: 1001.8833740240705,224 y: 158.7833062061976225 },226 'label': true,227 'tooltip': false,228 'style': {229 'color': '0Xfe7777',230 'width': 15,231 },232 },233 {234 'name': '18',235 'location': {236 x: 1169.8833740244904,237 y: 214.78330620633758238 },239 'label': true,240 'tooltip': false,241 'style': {242 'color': '0Xfd7aa8',243 'width': 15,244 },245 },246 {247 'name': '19',248 'location': {249 x: 1162.8833740244736,250 y: 319.7833062066002251 },252 'label': true,253 'tooltip': false,254 'style': {255 'color': '0X626e73',256 'width': 15,257 },258 },259 {260 'name': '20',261 'location': {262 x: 1323.883374024876,263 y: 179.78330620625007264 },265 'label': true,266 'tooltip': false,267 'style': {268 'color': '0Xb3c648',269 'width': 15,270 },271 },272 {273 'name': '21',274 'location': {275 x: 1274.8833740247526,276 y: 284.78330620651263277 },278 'label': true,279 'tooltip': false,280 'style': {281 'color': '0Xcbf0c5',282 'width': 15,283 },284 },285 {286 'name': '22',287 'location': {288 x: 1323.883374024876,289 y: 375.78330620674290 },291 'label': true,292 'tooltip': false,293 'style': {294 'color': '0Xe94394',295 'width': 15,296 },297 },298 ],299 links: [300 {301 'local_host': '1',302 'remote_host': '2',303 'label': false,304 'tooltip': false,305 },306 {307 'local_host': '1',308 'remote_host': '3',309 'label': false,310 'tooltip': false,311 },312 {313 'local_host': '2',314 'remote_host': '3',315 'label': false,316 'tooltip': false,317 },318 {319 'local_host': '2',320 'remote_host': '4',321 'label': false,322 'tooltip': false,323 },324 {325 'local_host': '3',326 'remote_host': '4',327 'label': false,328 'tooltip': false,329 },330 {331 'local_host': '2',332 'remote_host': '7',333 'label': false,334 'tooltip': false,335 },336 {337 'local_host': '1',338 'remote_host': '5',339 'label': false,340 'tooltip': false,341 },342 {343 'local_host': '1',344 'remote_host': '7',345 'label': false,346 'tooltip': false,347 },348 {349 'local_host': '3',350 'remote_host': '7',351 'label': false,352 'tooltip': false,353 },354 {355 'local_host': '5',356 'remote_host': '6',357 'label': false,358 'tooltip': false,359 },360 {361 'local_host': '6',362 'remote_host': '7',363 'label': false,364 'tooltip': false,365 },366 {367 'local_host': '5',368 'remote_host': '8',369 'label': false,370 'tooltip': false,371 },372 {373 'local_host': '6',374 'remote_host': '8',375 'label': false,376 'tooltip': false,377 },378 {379 'local_host': '7',380 'remote_host': '8',381 'label': false,382 'tooltip': false,383 },384 {385 'local_host': '9',386 'remote_host': '16',387 'label': false,388 'tooltip': false,389 'style': {390 'lineType': 1,391 'lineFull': 0,392 'lineColor': '0XDDDDDD',393 }394 },395 {396 'local_host': '16',397 'remote_host': '22',398 'label': false,399 'tooltip': false,400 'style': {401 'lineType': 1,402 'lineFull': 0,403 'lineColor': '0XDDDDDD',404 }405 },406 {407 'local_host': '9',408 'remote_host': '14',409 'label': false,410 'tooltip': false,411 'style': {412 'lineType': 1,413 'lineFull': 0,414 'lineColor': '0XDDDDDD',415 }416 },417 {418 'local_host': '14',419 'remote_host': '15',420 'label': false,421 'tooltip': false,422 'style': {423 'lineType': 1,424 'lineFull': 0,425 'lineColor': '0XDDDDDD',426 }427 },428 {429 'local_host': '10',430 'remote_host': '11',431 'label': false,432 'tooltip': false,433 'style': {434 'lineType': 1,435 'lineFull': 0,436 'lineColor': '0XDDDDDD',437 }438 },439 {440 'local_host': '10',441 'remote_host': '12',442 'label': false,443 'tooltip': false,444 'style': {445 'lineType': 1,446 'lineFull': 0,447 'lineColor': '0XDDDDDD',448 }449 },450 {451 'local_host': '10',452 'remote_host': '16',453 'label': false,454 'tooltip': false,455 'style': {456 'lineType': 1,457 'lineFull': 0,458 'lineColor': '0XDDDDDD',459 }460 },461 {462 'local_host': '11',463 'remote_host': '21',464 'label': false,465 'tooltip': false,466 'style': {467 'lineType': 1,468 'lineFull': 0,469 'lineColor': '0XDDDDDD',470 }471 },472 {473 'local_host': '11',474 'remote_host': '13',475 'label': false,476 'tooltip': false,477 'style': {478 'lineType': 1,479 'lineFull': 0,480 'lineColor': '0XDDDDDD',481 }482 },483 {484 'local_host': '11',485 'remote_host': '18',486 'label': false,487 'tooltip': false,488 'style': {489 'lineType': 1,490 'lineFull': 0,491 'lineColor': '0XDDDDDD',492 }493 },494 {495 'local_host': '11',496 'remote_host': '15',497 'label': false,498 'tooltip': false,499 'style': {500 'lineType': 1,501 'lineFull': 0,502 'lineColor': '0XDDDDDD',503 }504 },505 {506 'local_host': '11',507 'remote_host': '14',508 'label': false,509 'tooltip': false,510 'style': {511 'lineType': 1,512 'lineFull': 0,513 'lineColor': '0XDDDDDD',514 }515 },516 {517 'local_host': '12',518 'remote_host': '17',519 'label': false,520 'tooltip': false,521 'style': {522 'lineType': 1,523 'lineFull': 0,524 'lineColor': '0XDDDDDD',525 }526 },527 {528 'local_host': '12',529 'remote_host': '16',530 'label': false,531 'tooltip': false,532 'style': {533 'lineType': 1,534 'lineFull': 0,535 'lineColor': '0XDDDDDD',536 }537 },538 {539 'local_host': '12',540 'remote_host': '13',541 'label': false,542 'tooltip': false,543 'style': {544 'lineType': 1,545 'lineFull': 0,546 'lineColor': '0XDDDDDD',547 }548 },549 {550 'local_host': '12',551 'remote_host': '14',552 'label': false,553 'tooltip': false,554 'style': {555 'lineType': 1,556 'lineFull': 0,557 'lineColor': '0XDDDDDD',558 }559 },560 {561 'local_host': '13',562 'remote_host': '14',563 'label': false,564 'tooltip': false,565 'style': {566 'lineType': 1,567 'lineFull': 0,568 'lineColor': '0XDDDDDD',569 }570 },571 {572 'local_host': '13',573 'remote_host': '18',574 'label': false,575 'tooltip': false,576 'style': {577 'lineType': 1,578 'lineFull': 0,579 'lineColor': '0XDDDDDD',580 }581 },582 {583 'local_host': '14',584 'remote_host': '19',585 'label': false,586 'tooltip': false,587 'style': {588 'lineType': 1,589 'lineFull': 0,590 'lineColor': '0XDDDDDD',591 }592 },593 {594 'local_host': '14',595 'remote_host': '20',596 'label': false,597 'tooltip': false,598 'style': {599 'lineType': 1,600 'lineFull': 0,601 'lineColor': '0XDDDDDD',602 }603 },604 {605 'local_host': '15',606 'remote_host': '22',607 'label': false,608 'tooltip': false,609 'style': {610 'lineType': 1,611 'lineFull': 0,612 'lineColor': '0XDDDDDD',613 }614 },615 {616 'local_host': '16',617 'remote_host': '18',618 'label': false,619 'tooltip': false,620 'style': {621 'lineType': 1,622 'lineFull': 0,623 'lineColor': '0XDDDDDD',624 }625 },626 {627 'local_host': '17',628 'remote_host': '21',629 'label': false,630 'tooltip': false,631 'style': {632 'lineType': 1,633 'lineFull': 0,634 'lineColor': '0XDDDDDD',635 }636 },637 {638 'local_host': '18',639 'remote_host': '20',640 'label': false,641 'tooltip': false,642 'style': {643 'lineType': 1,644 'lineFull': 0,645 'lineColor': '0XDDDDDD',646 }647 },648 {649 'local_host': '18',650 'remote_host': '22',651 'label': false,652 'tooltip': false,653 'style': {654 'lineType': 1,655 'lineFull': 0,656 'lineColor': '0XDDDDDD',657 }658 },659 {660 'local_host': '21',661 'remote_host': '22',662 'label': false,663 'tooltip': false,664 'style': {665 'lineType': 1,666 'lineFull': 0,667 'lineColor': '0XDDDDDD',668 }669 },670 ],671 groups: {672 'group1': {673 'display_style': 'Ellipse',674 'name': 'Group-1',675 'label': true,676 'style': {677 'fillColor': '0Xf4f6fd'678 },679 'label_position': 'Above',680 'children': [681 '1', '2', '3', '4', '5', '6', '7', '8',682 ],683 },684 'group2': {685 'display_style': 'polygon',686 'name': 'Group-2',687 'label': true,688 'style': {689 'fillColor': '0Xf5e9eb'690 },691 'label_position': 'Center',692 'children': [693 '1', '2', '3', '4',694 ],695 },696 'group3': {697 'display_style': 'polygon',698 'name': 'Group-3',699 'label': false,700 'style': {701 'fillColor': '0Xdbeafe'702 },703 'children': [704 '7', '8', '9'705 ],706 },707 'group4': {708 'display_style': 'Ellipse',709 'name': 'Group-4',710 'label': true,711 'style': {712 'fillColor': '0Xfffbee'713 },714 'label_position': 'Above',715 'children': [716 '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22'717 ],718 },719 'group5': {720 'display_style': 'rect',721 'name': 'Group-5',722 'label': true,723 'style': {724 'fillColor': '0Xf7ede9'725 },726 'label_position': 'Center',727 'children': [728 '14', '15', '18', '19', '20', '21', '22'729 ],730 }731 }732 };733 constructor(734 public commonService: CommonService,735 ) { }736 ngOnInit() {737 this.renderTopo();738 }739 public renderTopo() {740 const network = new TopoNetwork(741 'network',742 this.commonService,743 );744 network.drawNoIConTopology(GroupComponent.data);745 }...
welcome.component.ts
Source:welcome.component.ts
1import { Component, OnInit } from '@angular/core';2import { CommonService } from '../demo/common/common-service';3import { TopoNetwork } from '../demo/common/TopoNetwork';4@Component({5 selector: 'app-welcome',6 templateUrl: './welcome.component.html',7 styleUrls: ['./welcome.component.less']8})9export class WelcomeComponent implements OnInit {10 static data = {11 devices: [12 {13 'name': 'name-1',14 'location': {15 'x': 200,16 'y': 200,17 },18 'label': true,19 'tooltip': false,20 'style': {21 'color': '0X74b9ff',22 'width': 20,23 },24 },25 {26 'name': 'name-2',27 'location': {28 'x': 350,29 'y': 250,30 },31 'label': true,32 'tooltip': false,33 'style': {34 'color': '0X55efc4',35 'width': 20,36 },37 },38 {39 'name': 'name-3',40 'location': {41 'x': 500,42 'y': 320,43 },44 'label': true,45 'tooltip': false,46 'style': {47 'color': '0Xacbfeb',48 'width': 20,49 },50 },51 {52 'name': 'name-4',53 'location': {54 'x': 430,55 'y': 450,56 },57 'label': true,58 'tooltip': false,59 'style': {60 'color': '0X0984e3',61 'width': 20,62 },63 },64 {65 'name': 'name-5',66 'location': {67 'x': 270,68 'y': 500,69 },70 'label': true,71 'tooltip': false,72 'style': {73 'color': '0Xfcc242',74 'width': 20,75 },76 },77 {78 'name': 'name-6',79 'location': {80 'x': 150,81 'y': 400,82 },83 'label': true,84 'tooltip': false,85 'style': {86 'color': '0Xa378b4',87 'width': 20,88 },89 },90 {91 'name': 'name-7',92 'location': {93 'x': 50,94 'y': 300,95 },96 'label': true,97 'tooltip': false,98 'style': {99 'color': '0X55a6cb',100 'width': 20,101 },102 },103 {104 'name': 'name-8',105 'location': {106 'x': 0,107 'y': 500,108 },109 'label': true,110 'tooltip': false,111 'style': {112 'color': '0Xa3d89f',113 'width': 20,114 },115 },116 ],117 links: [118 {119 'local_host': 'name-1',120 'remote_host': 'name-2',121 'label': true,122 'tooltip': false,123 },124 {125 'local_host': 'name-2',126 'remote_host': 'name-3',127 'label': true,128 'tooltip': false,129 },130 {131 'local_host': 'name-1',132 'remote_host': 'name-4',133 'label': true,134 'tooltip': false,135 },136 {137 'local_host': 'name-1',138 'remote_host': 'name-7',139 'label': true,140 'tooltip': false,141 },142 {143 'local_host': 'name-2',144 'remote_host': 'name-4',145 'label': true,146 'tooltip': false,147 },148 {149 'local_host': 'name-3',150 'remote_host': 'name-7',151 'label': true,152 'tooltip': false,153 },154 {155 'local_host': 'name-3',156 'remote_host': 'name-6',157 'label': true,158 'tooltip': false,159 },160 {161 'local_host': 'name-3',162 'remote_host': 'name-8',163 'label': true,164 'tooltip': false,165 },166 {167 'local_host': 'name-3',168 'remote_host': 'name-4',169 'label': true,170 'tooltip': false,171 },172 {173 'local_host': 'name-6',174 'remote_host': 'name-5',175 'label': true,176 'tooltip': false,177 },178 {179 'local_host': 'name-6',180 'remote_host': 'name-7',181 'label': true,182 'tooltip': false,183 },184 {185 'local_host': 'name-6',186 'remote_host': 'name-8',187 'label': true,188 'tooltip': false,189 },190 {191 'local_host': 'name-5',192 'remote_host': 'name-8',193 'label': true,194 'tooltip': false,195 },196 {197 'local_host': 'name-7',198 'remote_host': 'name-8',199 'label': true,200 'tooltip': false,201 },202 ],203 groups: [204 ]205 };206 constructor(207 public commonService: CommonService,208 ) {}209 ngOnInit() {210 this.renderTopo();211 }212 public renderTopo() {213 const network = new TopoNetwork(214 'network',215 this.commonService,216 );217 network.drawNoIConTopology(WelcomeComponent.data);218 }...
Using AI Code Generation
1var wpt = require('webpagetest');2var webPageTest = new wpt('www.webpagetest.org');3}, function(err, data) {4 if (err) return console.error(err);5 console.log(data);6});7var wpt = require('webpagetest');8var webPageTest = new wpt('www.webpagetest.org', 'A.1a2b3c4d5e6f7g8h9i0j');9}, function(err, data) {10 if (err) return console.error(err);11 console.log(data);12});13var wpt = require('webpagetest');14}, function(err, data) {15 if (err) return console.error(err);16 console.log(data);17});18var wpt = require('webpagetest');19}, function(err, data) {20 if (err) return console.error(err);
Using AI Code Generation
1 if (err) return console.log(err);2 console.log('Test submitted. Polling for results...');3 wpt.getTestResults(data.data.testId, function(err, data) {4 if (err) return console.log(err);5 console.log('Speed Index: ' + data.data.average.firstView.SpeedIndex);6 console.log('Fully Loaded: ' + data.data.average.firstView.fullyLoaded);7 console.log('Time to First Byte: ' + data.data.average.firstView.TTFB);8 });9});10{11 "dependencies": {12 },13 "devDependencies": {},14 "scripts": {15 },16}
Using AI Code Generation
1var wpt = require('webpagetest');2var wpt = new WebPageTest('www.webpagetest.org');3}, function(err, data) {4 if (err) return console.error(err);5 console.log('Test status: ' + data.statusText);6 console.log('Test ID: ' + data.data.testId);7 console.log('Test URL: ' + data.data.summary);8});9var wpt = require('webpagetest');10var wpt = new WebPageTest('www.webpagetest.org', 'A.8a7c3f4c1b2c3d4e5f6g7h8i9j0k1l2m');11}, function(err, data) {12 if (err) return console.error(err);13 console.log('Test status: ' + data.statusText);14 console.log('Test ID: ' + data.data.testId);15 console.log('Test URL: ' + data.data.summary);16});17var wpt = require('webpagetest');18}, function(err, data) {19 if (err) return console.error(err);20 console.log('Test status: ' + data.statusText);
Using AI Code Generation
1var wpt = require('webpagetest');2var api = new wpt('www.webpagetest.org');3}, function(err, data) {4 if (err) return console.error(err);5 console.log('Test Results: ' + data.data.summary);6});7var wpt = require('webpagetest');8var api = new wpt('localhost');9}, function(err, data) {10 if (err) return console.error(err);11 console.log('Test Results: ' + data.data.summary);12});13var wpt = require('webpagetest');14var api = new wpt('localhost');15}, function(err, data) {16 if (err) return console.error(err);17 console.log('Test Results: ' + data.data.summary);18});19var wpt = require('webpagetest');20var api = new wpt('localhost');21}, function(err, data) {22 if (err) return console.error(err);23 console.log('Test Results: ' + data.data.summary);24});25var wpt = require('webpagetest');26var api = new wpt('localhost');
Using AI Code Generation
1var wpt = require('./wpt.js');2 videoParams: {3 }4}, function(err, data) {5 if (err) {6 console.log('Error: ' + err);7 } else {8 console.log('Test Complete');9 console.log(JSON.stringify(data));10 }11});12### WebPageTest(serverUrl, apiKey)13### .runTest(url, options, callback)14### .getTestStatus(testId, callback)15### .getTestResults(testId, callback)
Learn to execute automation testing from scratch with LambdaTest Learning Hub. Right from setting up the prerequisites to run your first automation test, to following best practices and diving deeper into advanced test scenarios. LambdaTest Learning Hubs compile a list of step-by-step guides to help you be proficient with different test automation frameworks i.e. Selenium, Cypress, TestNG etc.
You could also refer to video tutorials over LambdaTest YouTube channel to get step by step demonstration from industry experts.
Get 100 minutes of automation test minutes FREE!!