Skip to content

Commit af1d04c

Browse files
HUSSAR-mtrelaHUSSAR-mtrela
authored
add performance sample (#1122)
1 parent be4e4f1 commit af1d04c

File tree

15 files changed

+2395
-8
lines changed

15 files changed

+2395
-8
lines changed

‎browser/public/index.html‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,12 @@
1111
</title>
1212
<base href="/webcomponents-demos/">
1313

14-
<link href="https://fonts.googleapis.com/css?family=Kanit&display=swap" rel="stylesheet">
15-
<link href="https://dl.infragistics.com/x/img/browsers/wc.png" rel="shortcut icon" >
16-
<link href="https://dl.infragistics.com/x/css/samples/shared.v8.css" rel="stylesheet" type="text/css" />
17-
<link href="https://dl.infragistics.com/x/css/samples/custom-legend.css" rel="stylesheet" type="text/css" />
14+
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Berkshire+Swash">
15+
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" >
16+
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
17+
<link rel="stylesheet" href="https://dl.infragistics.com/x/css/samples/shared.v8.css" type="text/css" />
18+
<link rel="stylesheet" href="https://dl.infragistics.com/x/css/samples/custom-legend.css" type="text/css" />
19+
<link rel="shortcut icon" href="https://dl.infragistics.com/x/img/browsers/wc.png" >
1820

1921
<!-- <link href="<%= htmlWebpackPlugin.options.publicPath %>assets/css/index.css" rel="stylesheet" /> -->
2022
<link href="<%= htmlWebpackPlugin.options.publicPath %>assets/css/browser.css" rel="stylesheet" />
@@ -1132,6 +1134,7 @@
11321134
<a class="nav-link" href="#" data-nav="/samples/maps/geo-map/marker-type">─<span>Geo Map Marker Type</span></a>
11331135
<a class="nav-link" href="#" data-nav="/samples/maps/geo-map/navigation">─<span>Geo Map Navigation</span></a>
11341136
<a class="nav-link" href="#" data-nav="/samples/maps/geo-map/overview">─<span>Geo Map Overview</span></a>
1137+
<a class="nav-link" href="#" data-nav="/samples/maps/geo-map/santa-flights-map">─<span>Geo Map Santa Flights Map</span></a>
11351138
<a class="nav-link" href="#" data-nav="/samples/maps/geo-map/shape-styling">─<span>Geo Map Shape Styling</span></a>
11361139
<a class="nav-link" href="#" data-nav="/samples/maps/geo-map/synchronization">─<span>Geo Map Synchronization</span></a>
11371140
<a class="nav-link" href="#" data-nav="/samples/maps/geo-map/triangulating-data">─<span>Geo Map Triangulating Data</span></a>

‎browser/src/templates/index.html‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,12 @@
1111
</title>
1212
<base href="/webcomponents-demos/">
1313

14-
<link href="https://fonts.googleapis.com/css?family=Kanit&display=swap" rel="stylesheet">
15-
<link href="https://dl.infragistics.com/x/img/browsers/wc.png" rel="shortcut icon" >
16-
<link href="https://dl.infragistics.com/x/css/samples/shared.v8.css" rel="stylesheet" type="text/css" />
17-
<link href="https://dl.infragistics.com/x/css/samples/custom-legend.css" rel="stylesheet" type="text/css" />
14+
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Berkshire+Swash">
15+
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" >
16+
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
17+
<link rel="stylesheet" href="https://dl.infragistics.com/x/css/samples/shared.v8.css" type="text/css" />
18+
<link rel="stylesheet" href="https://dl.infragistics.com/x/css/samples/custom-legend.css" type="text/css" />
19+
<link rel="shortcut icon" href="https://dl.infragistics.com/x/img/browsers/wc.png" >
1820

1921
<!-- <link href="<%= htmlWebpackPlugin.options.publicPath %>assets/css/index.css" rel="stylesheet" /> -->
2022
<link href="<%= htmlWebpackPlugin.options.publicPath %>assets/css/browser.css" rel="stylesheet" />

‎samples/maps/geo-map/santa-flights-map/.prettierrc‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
{
2+
"printWidth": 250,
3+
"tabWidth": 4,
4+
"useTabs": false,
5+
"semi": true,
6+
"singleQuote": false,
7+
"trailingComma": "none",
8+
"bracketSpacing": true,
9+
"jsxBracketSameLine": false,
10+
"fluid": false
11+
}

‎samples/maps/geo-map/santa-flights-map/ReadMe.md‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
<!-- NOTE: do not change this file because it's auto re-generated from template: -->
2+
<!-- https://github.com/IgniteUI/igniteui-wc-examples/tree/vnext/templates/browser/sample/ReadMe.md -->
3+
4+
This folder contains implementation of Web Components application with example of Geo Map Santa Flights Map feature using [Geographic Map](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
5+
6+
7+
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
8+
<body>
9+
<a target="_blank" href="https://infragistics.com/webcomponentssite/components/general-getting-started.html" rel="noopener noreferrer">
10+
<img height="40px" style="border-radius: 0rem" alt="View Docs" src="https://dl.infragistics.com/x/img/browsers/button-docs.png"/>
11+
</a>
12+
<a target="_blank" href="./src/index.ts" rel="noopener noreferrer">
13+
<img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="View Code" src="https://dl.infragistics.com/x/img/browsers/button-code.png"/>
14+
</a>
15+
<a target="_blank" href="https://www.infragistics.com/webcomponents-demos/samples/maps/geo-map/santa-flights-map" rel="noopener noreferrer">
16+
<img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="Run Sample" src="https://dl.infragistics.com/x/img/browsers/button-run.png"/>
17+
</a>
18+
<a target="_blank" href="https://codesandbox.io/s/github/IgniteUI/igniteui-wc-examples/tree/master/samples/maps/geo-map/santa-flights-map?fontsize=14&hidenavigation=1&theme=dark&view=preview&file=/src/{SampleFile}" rel="noopener noreferrer">
19+
<img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="Run Sample" src="https://dl.infragistics.com/x/img/browsers/button-sandbox.png"/>
20+
</a>
21+
</body>
22+
</html>
23+
24+
## Branches
25+
26+
> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
27+
28+
## Instructions
29+
30+
To set up this project locally, execute these commands:
31+
32+
```
33+
git clone https://github.com/IgniteUI/igniteui-wc-examples.git
34+
git checkout master
35+
cd ./igniteui-wc-examples
36+
cd ./samples/maps/geo-map/santa-flights-map
37+
```
38+
39+
open above folder in VS Code or type:
40+
```
41+
code .
42+
```
43+
44+
In terminal window, run:
45+
46+
```
47+
npm install
48+
npm run start
49+
```
50+
51+
Then open http://localhost:4200/ in your browser
52+
53+
54+
## Learn More
55+
56+
To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).

‎samples/maps/geo-map/santa-flights-map/index.html‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>WorldFlightMap</title>
5+
<meta charset="UTF-8" />
6+
7+
<link rel="shortcut icon" href="https://dl.infragistics.com/x/img/browsers/wc.png" >
8+
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
9+
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
10+
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
11+
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Berkshire+Swash">
12+
13+
<link rel="stylesheet" href="https://dl.infragistics.com/x/css/samples/shared.v8.css" type="text/css" />
14+
15+
</head>
16+
17+
<body>
18+
<div id="root">
19+
20+
<div class="container sample christmas-background" >
21+
22+
<label id="blinking-text" style="color: #fff; " class="christmas-title"> Merry Christmas and Happy New Year from Infragistics</label>
23+
24+
<igc-geographic-map id="geoMap" width="100%" height="100%">
25+
</igc-geographic-map>
26+
27+
<div class="horizontal christmas-info" >
28+
<div class="horizontal" >
29+
</div>
30+
31+
<label class="christmas-stats-lbl">Visited Cities: </label>
32+
<label class="christmas-stats-val" id="statsVisitedLabel" >0</label>
33+
<label class="christmas-stats-lbl">Distance: </label>
34+
<label class="christmas-stats-val" id="statsDistanceLabel" >0</label>
35+
36+
<label class="christmas-info">All effects were created in <a href="https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/geo-map" target="_blank" rel="noopener noreferrer"> Geo-Map</a></label>
37+
38+
<label class="christmas-stats-lbl">Snow Flakes Fallen: </label>
39+
<label class="christmas-stats-val" id="statsSnowLabel" >0</label>
40+
</div>
41+
42+
</div>
43+
44+
</div>
45+
<!-- This script is needed only for parcel and it will be excluded for webpack -->
46+
<% if (false) { %><script src="src/index.ts"></script><% } %>
47+
48+
</body>
49+
</html>

‎samples/maps/geo-map/santa-flights-map/package.json‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
{
2+
"name": "wc-geographic-map-binding-multiple-sources",
3+
"version": "1.0.0",
4+
"description": "This project provides example of Geographic Map Binding Multiple Sources using IgniteUI for Web Components",
5+
"main": "src/index.ts",
6+
"scripts": {
7+
"build": "npm run build:prod",
8+
"build:dev": "webpack --mode development --config ./webpack.config.js --progress --color --display-error-details",
9+
"build:prod": "webpack --env.NODE_ENV=production --mode production --config ./webpack.config.js --progress --color --display-error-details --bail",
10+
"serve:dev": "node --max-old-space-size=8192 node_modules/webpack-dev-server/bin/webpack-dev-server.js --mode development --config ./webpack.config.js --hot --progress --open",
11+
"serve:prod": "webpack-dev-server --env.NODE_ENV=production --mode production --config ./webpack.config.js --port 3000 --host 0.0.0.0 --hot --progress --open --content-base dist/",
12+
"start": "npm run serve:dev",
13+
"build:legacy": "npm run build:prod:legacy",
14+
"build:dev:legacy": "webpack --env.legacy=true --mode development --config ./webpack.config.js --progress --color --display-error-details",
15+
"build:prod:legacy": "webpack --env.NODE_ENV=production --env.legacy=true --mode production --config ./webpack.config.js --progress --color --display-error-details --bail",
16+
"serve:dev:legacy": "node --max-old-space-size=8192 node_modules/webpack-dev-server/bin/webpack-dev-server.js --env.legacy=true --mode development --config ./webpack.config.js --hot --progress --open",
17+
"serve:prod:legacy": "webpack-dev-server --env.NODE_ENV=production --env.legacy=true --mode production --config ./webpack.config.js --port 3000 --host 0.0.0.0 --hot --progress --open --content-base dist/",
18+
"start:legacy": "npm run serve:dev:legacy"
19+
},
20+
"author": "Infragistics",
21+
"dependencies": {
22+
"@webcomponents/custom-elements": "^1.4.1",
23+
"@webcomponents/template": "^1.4.2",
24+
"babel-runtime": "^6.26.0",
25+
"core-js": "^3.6.5",
26+
"igniteui-webcomponents-charts": "6.3.1",
27+
"igniteui-webcomponents-core": "6.3.1",
28+
"igniteui-webcomponents-maps": "6.3.1",
29+
"lit-html": "^3.3.1",
30+
"tslib": "^2.8.1"
31+
},
32+
"devDependencies": {
33+
"@babel/cli": "^7.28.3",
34+
"@babel/core": "^7.28.4",
35+
"@babel/plugin-transform-class-properties": "^7.27.1",
36+
"@babel/plugin-transform-class-static-block": "^7.28.3",
37+
"@babel/plugin-transform-runtime": "^7.28.3",
38+
"@babel/preset-env": "^7.28.3",
39+
"@babel/preset-typescript": "^7.27.1",
40+
"@types/source-map": "^0.5.7",
41+
"babel-loader": "^10.0.0",
42+
"babel-plugin-transform-custom-element-classes": "^0.1.0",
43+
"css-loader": "^7.1.2",
44+
"csv-loader": "^3.0.5",
45+
"file-loader": "^6.2.0",
46+
"fork-ts-checker-webpack-plugin": "^9.1.0",
47+
"html-webpack-plugin": "^5.6.4",
48+
"parcel-bundler": "^1.12.5",
49+
"source-map": "^0.7.6",
50+
"style-loader": "^4.0.0",
51+
"tsconfig-paths-webpack-plugin": "^4.2.0",
52+
"typescript": "^5.9.2",
53+
"webpack": "^5.101.3",
54+
"webpack-cli": "^6.0.1",
55+
"webpack-dev-server": "^5.2.2",
56+
"worker-loader": "^3.0.8",
57+
"xml-loader": "^1.2.1"
58+
},
59+
"license": "",
60+
"homepage": "."
61+
}

‎samples/maps/geo-map/santa-flights-map/sandbox.config.json‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"infiniteLoopProtection": false,
3+
"hardReloadOnChange": false,
4+
"view": "browser",
5+
"template": "parcel"
6+
}
7+

‎samples/maps/geo-map/santa-flights-map/src/SantaShapeStyling.ts‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
2+
3+
/* tslint:disable:prefer-const */
4+
5+
import { Style } from 'igniteui-webcomponents-core';
6+
7+
export class SantaShapeStyling {
8+
public defaultStroke = 'black';
9+
public defaultFill = 'gray';
10+
public defaultThickness = 0.5;
11+
public defaultOpacity = 1.0;
12+
public defaultStyle = new Style();
13+
14+
public itemMemberPath = '';
15+
public itemMappings: SantaShapeInfo[] = [];
16+
17+
constructor() {
18+
this.defaultStyle = new Style();
19+
this.defaultStyle.stroke = this.defaultStroke;
20+
this.defaultStyle.fill = this.defaultFill;
21+
this.defaultStyle.opacity = this.defaultOpacity;
22+
this.defaultStyle.strokeThickness = this.defaultThickness;
23+
}
24+
25+
public getValue(itemMemberPath: string, item: any): any {
26+
let itemValue = null;
27+
28+
if (item.fieldValues !== undefined) { // .hasOwnProperty("fieldValues")) {
29+
if (item.fieldsNames.indexOf(itemMemberPath) >= 0) {
30+
itemValue = item.fieldValues[itemMemberPath];
31+
} else {
32+
console.log('WARNING: ShapefileRecord does not have ' + itemMemberPath + ' in fieldValues property');
33+
}
34+
} else if (item.hasOwnProperty(itemMemberPath)) {
35+
itemValue = item[itemMemberPath];
36+
} else {
37+
console.log('WARNING: Shape data item does not have "' + itemMemberPath + '" property');
38+
}
39+
return itemValue;
40+
}
41+
42+
public generate(record: any): Style {
43+
44+
let itemValue = this.getValue(this.itemMemberPath, record);
45+
if (itemValue === null || itemValue === "") {
46+
// console.log(this.defaultStyle);
47+
return this.defaultStyle;
48+
}
49+
50+
for (const mapping of this.itemMappings) {
51+
if (mapping.itemValue === itemValue) {
52+
const shapeStyle = new Style();
53+
shapeStyle.opacity = mapping.opacity || this.defaultOpacity;
54+
shapeStyle.fill = mapping.fill || this.defaultFill;
55+
shapeStyle.stroke = mapping.stroke || this.defaultStroke;
56+
shapeStyle.strokeThickness = mapping.thickness || this.defaultThickness;
57+
return shapeStyle;
58+
}
59+
}
60+
61+
return this.defaultStyle;
62+
}
63+
}
64+
65+
export class SantaShapeInfo {
66+
public itemValue: any = null;
67+
68+
public opacity?: number = 0.5;
69+
public fill: string = "gray";
70+
public stroke?: string= "black";
71+
public thickness?: number;
72+
}

0 commit comments

Comments
 (0)