mirror of
https://github.com/akveo/ngx-admin.git
synced 2025-12-17 07:50:12 +01:00
Merge branch 'master' into develop/bacard
This commit is contained in:
smartapant
commit
cb5739711c
68 changed files with 2271 additions and 58 deletions
|
|
@ -228,7 +228,11 @@ module.exports = {
|
||||||
$: 'jquery',
|
$: 'jquery',
|
||||||
jquery: 'jquery',
|
jquery: 'jquery',
|
||||||
"Tether": 'tether',
|
"Tether": 'tether',
|
||||||
"window.Tether": "tether"
|
"window.Tether": "tether",
|
||||||
|
"GoogleMapsLoader": "google-maps",
|
||||||
|
"L": "leaflet",
|
||||||
|
"Chart": "chart.js",
|
||||||
|
"Chartist": "chartist",
|
||||||
})
|
})
|
||||||
],
|
],
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -54,13 +54,19 @@
|
||||||
"@angular2-material/radio": "2.0.0-alpha.2",
|
"@angular2-material/radio": "2.0.0-alpha.2",
|
||||||
"@angular2-material/sidenav": "2.0.0-alpha.2",
|
"@angular2-material/sidenav": "2.0.0-alpha.2",
|
||||||
"@angular2-material/toolbar": "2.0.0-alpha.2",
|
"@angular2-material/toolbar": "2.0.0-alpha.2",
|
||||||
|
"amcharts3": "github:amcharts/amcharts3",
|
||||||
|
"ammap3": "github:amcharts/ammap3",
|
||||||
"angular2": "2.0.0-beta.15",
|
"angular2": "2.0.0-beta.15",
|
||||||
"bootstrap": "^4.0.0-alpha.2",
|
"bootstrap": "^4.0.0-alpha.2",
|
||||||
"bootstrap-loader": "^1.0.8",
|
"bootstrap-loader": "^1.0.8",
|
||||||
|
"chartist": "^0.9.7",
|
||||||
"core-js": "^2.2.2",
|
"core-js": "^2.2.2",
|
||||||
"font-awesome": "^4.6.1",
|
"font-awesome": "^4.6.1",
|
||||||
"font-awesome-sass-loader": "^1.0.1",
|
"font-awesome-sass-loader": "^1.0.1",
|
||||||
|
"google-maps": "^3.2.1",
|
||||||
"jquery": "^2.2.3",
|
"jquery": "^2.2.3",
|
||||||
|
"leaflet-map": "^0.2.1",
|
||||||
|
"ng2-charts": "^1.0.3",
|
||||||
"normalize.css": "^4.1.1",
|
"normalize.css": "^4.1.1",
|
||||||
"rxjs": "5.0.0-beta.2",
|
"rxjs": "5.0.0-beta.2",
|
||||||
"tether": "^1.2.4",
|
"tether": "^1.2.4",
|
||||||
|
|
|
||||||
|
|
@ -2,9 +2,8 @@ import {Component, ViewEncapsulation} from 'angular2/core';
|
||||||
import {RouteConfig, Router} from 'angular2/router';
|
import {RouteConfig, Router} from 'angular2/router';
|
||||||
import {Subscription} from 'rxjs/Subscription';
|
import {Subscription} from 'rxjs/Subscription';
|
||||||
|
|
||||||
import {SidebarStateService} from './theme/sidebar/sidebarState.service';
|
|
||||||
|
|
||||||
import {Pages} from './pages';
|
import {Pages} from './pages';
|
||||||
|
import {ThemeGlobal} from "./theme/theme.global";
|
||||||
|
|
||||||
// TODO: is it really the best place to globally require that dependency?
|
// TODO: is it really the best place to globally require that dependency?
|
||||||
require("!style!css!sass!./theme/sass/_ionicons.scss");
|
require("!style!css!sass!./theme/sass/_ionicons.scss");
|
||||||
|
|
@ -16,7 +15,7 @@ require("!style!css!sass!./theme/sass/_ionicons.scss");
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app',
|
selector: 'app',
|
||||||
pipes: [],
|
pipes: [],
|
||||||
providers: [SidebarStateService],
|
providers: [],
|
||||||
encapsulation: ViewEncapsulation.None,
|
encapsulation: ViewEncapsulation.None,
|
||||||
styles: [require('normalize.css'), require('./app.scss')],
|
styles: [require('normalize.css'), require('./app.scss')],
|
||||||
template: `
|
template: `
|
||||||
|
|
@ -37,14 +36,16 @@ export class App {
|
||||||
|
|
||||||
isMenuCollapsed:boolean = false;
|
isMenuCollapsed:boolean = false;
|
||||||
|
|
||||||
private _sidebarStateSubscription:Subscription;
|
private _themeGlobalSubscription:Subscription;
|
||||||
|
|
||||||
constructor(private _sidebarStateService:SidebarStateService) {
|
constructor(private _themeGlobal:ThemeGlobal) {
|
||||||
this._sidebarStateSubscription = this._sidebarStateService.getStateStream().subscribe((isCollapsed) => this.isMenuCollapsed = isCollapsed);
|
this._themeGlobalSubscription = this._themeGlobal.getDataStream().subscribe((data) => {
|
||||||
|
this.isMenuCollapsed = data['menu.isCollapsed'] != null ? data['menu.isCollapsed'] : this.isMenuCollapsed;
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
ngOnDestroy() {
|
ngOnDestroy() {
|
||||||
// prevent memory leak when component destroyed
|
// prevent memory leak when component destroyed
|
||||||
this._sidebarStateSubscription.unsubscribe();
|
this._themeGlobalSubscription.unsubscribe();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,8 @@
|
||||||
// App
|
// App
|
||||||
|
import {ThemeGlobal} from "./theme/theme.global";
|
||||||
export * from './app.component';
|
export * from './app.component';
|
||||||
|
|
||||||
// Application wide providers
|
// Application wide providers
|
||||||
export const APP_PROVIDERS = [
|
export const APP_PROVIDERS = [
|
||||||
|
ThemeGlobal
|
||||||
];
|
];
|
||||||
|
|
|
||||||
35
src/app/pages/charts/charts.component.ts
Normal file
35
src/app/pages/charts/charts.component.ts
Normal file
|
|
@ -0,0 +1,35 @@
|
||||||
|
import {Component} from 'angular2/core';
|
||||||
|
import {RouteConfig} from 'angular2/router';
|
||||||
|
|
||||||
|
import {ChartJs} from "./components/chartJs";
|
||||||
|
import {ChartistJs} from "./components/chartistJs/chartistJs.component";
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'maps',
|
||||||
|
pipes: [],
|
||||||
|
providers: [],
|
||||||
|
styles: [],
|
||||||
|
template: `<router-outlet></router-outlet>`
|
||||||
|
})
|
||||||
|
@RouteConfig([
|
||||||
|
{
|
||||||
|
name: 'ChartJs',
|
||||||
|
component: ChartJs,
|
||||||
|
path: '/chart-js',
|
||||||
|
useAsDefault: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'ChartistJs',
|
||||||
|
component: ChartistJs,
|
||||||
|
path: '/chartist-js',
|
||||||
|
}
|
||||||
|
])
|
||||||
|
export class Charts {
|
||||||
|
|
||||||
|
constructor() {
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnInit() {
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
71
src/app/pages/charts/components/chartJs/chartJs.component.ts
Normal file
71
src/app/pages/charts/components/chartJs/chartJs.component.ts
Normal file
|
|
@ -0,0 +1,71 @@
|
||||||
|
import {Component, ViewEncapsulation} from 'angular2/core';
|
||||||
|
import {BaCard} from '../../../../theme';
|
||||||
|
|
||||||
|
import {ChartJsService} from "./chartJs.service";
|
||||||
|
|
||||||
|
import {CHART_DIRECTIVES} from 'ng2-charts';
|
||||||
|
import {chartColors} from "../../../../theme/theme.constants";
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'chart-js',
|
||||||
|
pipes: [],
|
||||||
|
providers: [ChartJsService],
|
||||||
|
encapsulation: ViewEncapsulation.None,
|
||||||
|
styles: [require('./chartJs.scss')],
|
||||||
|
directives: [BaCard, CHART_DIRECTIVES],
|
||||||
|
template: require('./chartJs.html'),
|
||||||
|
})
|
||||||
|
export class ChartJs {
|
||||||
|
|
||||||
|
public labels = {
|
||||||
|
one: ["Sleeping", "Designing", "Coding", "Cycling"],
|
||||||
|
two: ["April", "May", "June", "Jule", "August", "September", "October", "November", "December"],
|
||||||
|
three: ["May", "June", "Jule", "August", "September", "October", "November"]
|
||||||
|
};
|
||||||
|
public data = {
|
||||||
|
one: [20, 40, 5, 35],
|
||||||
|
two: [[1, 9, 3, 4, 5, 6, 7, 8, 2].map((e) => {return Math.sin(e) * 25 + 25})],
|
||||||
|
three: [
|
||||||
|
[65, 59, 90, 81, 56, 55, 40],
|
||||||
|
[28, 48, 40, 19, 88, 27, 45]
|
||||||
|
]
|
||||||
|
};
|
||||||
|
public series = ['Product A', 'Product B'];
|
||||||
|
public colours = chartColors;
|
||||||
|
public options = {
|
||||||
|
scaleShowLabelBackdrop : false,
|
||||||
|
segmentShowStroke : false,
|
||||||
|
// TODO: produce an error
|
||||||
|
// responsive: true,
|
||||||
|
scaleFontColor: "rgba(255,255,255,.7)",
|
||||||
|
scaleLineColor: "rgba(255,255,255,.7)",
|
||||||
|
pointLabelFontColor: "rgba(255,255,255,.7)"
|
||||||
|
};
|
||||||
|
|
||||||
|
constructor(private _chartJsService:ChartJsService) {
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnInit() {
|
||||||
|
// var self = this;
|
||||||
|
// setInterval(() => {
|
||||||
|
//
|
||||||
|
// var temp = [...this.data.two];
|
||||||
|
// temp[0].unshift(temp[0].pop());
|
||||||
|
// this.data.two = temp;
|
||||||
|
//
|
||||||
|
// }, 300);
|
||||||
|
}
|
||||||
|
|
||||||
|
chartType(type) {
|
||||||
|
return type;
|
||||||
|
}
|
||||||
|
|
||||||
|
changeData ($event) {
|
||||||
|
let shuffle = (o) => {
|
||||||
|
for(var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x){}
|
||||||
|
return o;
|
||||||
|
};
|
||||||
|
|
||||||
|
this.data = shuffle(this.data);
|
||||||
|
}
|
||||||
|
}
|
||||||
66
src/app/pages/charts/components/chartJs/chartJs.html
Normal file
66
src/app/pages/charts/components/chartJs/chartJs.html
Normal file
|
|
@ -0,0 +1,66 @@
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-4">
|
||||||
|
<ba-card title="Pie" baCardClass="medium-card">
|
||||||
|
<base-chart class="chart chart-pie"
|
||||||
|
[legend]="true" [colours]="colours" [options]="options" [data]="data.one" [chartType]="chartType('Pie')" [labels]="labels.one" (chartClick)="changeData($event)">
|
||||||
|
</base-chart>
|
||||||
|
</ba-card>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-md-4">
|
||||||
|
<ba-card title="Doughnut" baCardClass="medium-card">
|
||||||
|
<base-chart class="doughnut chart-doughnut"
|
||||||
|
[legend]="true" [colours]="colours" [options]="options" [data]="data.one" [chartType]="chartType('Doughnut')" [labels]="labels.one" (chartClick)="changeData($event)">
|
||||||
|
</base-chart>
|
||||||
|
</ba-card>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-md-4">
|
||||||
|
<ba-card title="Polar" baCardClass="medium-card">
|
||||||
|
<base-chart class="polar chart-polar"
|
||||||
|
[legend]="true" [colours]="colours" [options]="options" [data]="data.one" [chartType]="chartType('PolarArea')" [labels]="labels.one" (chartClick)="changeData($event)">
|
||||||
|
</base-chart>
|
||||||
|
</ba-card>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row ">
|
||||||
|
<div class="col-md-6">
|
||||||
|
<ba-card title="Animated Radar" baCardClass="with-scroll col-eq-height">
|
||||||
|
<base-chart class="waveLine chart-waveLine"
|
||||||
|
[legend]="false" [colours]="colours" [options]="options" [data]="data.two" [chartType]="chartType('Radar')" [labels]="labels.two" (chartClick)="changeData($event)">
|
||||||
|
</base-chart>
|
||||||
|
</ba-card>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-6">
|
||||||
|
<ba-card title="Animated Bars" baCardClass="with-scroll col-eq-height">
|
||||||
|
<base-chart class="waveBars chart-waveBars"
|
||||||
|
[legend]="false" [colours]="colours" [options]="options" [data]="data.two" [chartType]="chartType('Bar')" [labels]="labels.two" (chartClick)="changeData($event)">
|
||||||
|
</base-chart>
|
||||||
|
</ba-card>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row ">
|
||||||
|
<div class="col-lg-4 col-md-6">
|
||||||
|
<ba-card title="Radar" baCardClass="with-scroll ">
|
||||||
|
<base-chart id="radar" class="chart chart-radar"
|
||||||
|
[legend]="false" [series]="series" [colours]="colours" [options]="options" [data]="data.three" [chartType]="chartType('Radar')" [labels]="labels.three" (chartClick)="changeData($event)">
|
||||||
|
</base-chart>
|
||||||
|
</ba-card>
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-4 col-md-6">
|
||||||
|
<ba-card title="Line" baCardClass="with-scroll ">
|
||||||
|
<base-chart id="line" class="chart chart-line"
|
||||||
|
[legend]="false" [series]="series" [colours]="colours" [options]="options" [data]="data.three" [chartType]="chartType('Line')" [labels]="labels.two" (chartClick)="changeData($event)">
|
||||||
|
</base-chart>
|
||||||
|
</ba-card>
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-4 col-md-12">
|
||||||
|
<ba-card title="Bars" baCardClass="with-scroll ">
|
||||||
|
<base-chart id="bar" class="chart chart-bar"
|
||||||
|
[legend]="false" [series]="series" [colours]="colours" [options]="options" [data]="data.three" [chartType]="chartType('Bar')" [labels]="labels.two" (chartClick)="changeData($event)">
|
||||||
|
</base-chart>
|
||||||
|
</ba-card>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
49
src/app/pages/charts/components/chartJs/chartJs.scss
Normal file
49
src/app/pages/charts/components/chartJs/chartJs.scss
Normal file
|
|
@ -0,0 +1,49 @@
|
||||||
|
.chart-legend,
|
||||||
|
.bar-legend,
|
||||||
|
.line-legend,
|
||||||
|
.pie-legend,
|
||||||
|
.radar-legend,
|
||||||
|
.polararea-legend,
|
||||||
|
.doughnut-legend {
|
||||||
|
list-style-type: none;
|
||||||
|
margin-top: 5px;
|
||||||
|
text-align: center;
|
||||||
|
/* NOTE: Browsers automatically add 40px of padding-left to all lists, so we should offset that, otherwise the legend is off-center */
|
||||||
|
-webkit-padding-start: 0;
|
||||||
|
/* Webkit */
|
||||||
|
-moz-padding-start: 0;
|
||||||
|
/* Mozilla */
|
||||||
|
padding-left: 0;
|
||||||
|
/* IE (handles all cases, really, but we should also include the vendor-specific properties just to be safe) */
|
||||||
|
}
|
||||||
|
.chart-legend li,
|
||||||
|
.bar-legend li,
|
||||||
|
.line-legend li,
|
||||||
|
.pie-legend li,
|
||||||
|
.radar-legend li,
|
||||||
|
.polararea-legend li,
|
||||||
|
.doughnut-legend li {
|
||||||
|
display: inline-block;
|
||||||
|
white-space: nowrap;
|
||||||
|
position: relative;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
border-radius: 5px;
|
||||||
|
padding: 2px 8px 2px 28px;
|
||||||
|
font-size: smaller;
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
|
.chart-legend li span,
|
||||||
|
.bar-legend li span,
|
||||||
|
.line-legend li span,
|
||||||
|
.pie-legend li span,
|
||||||
|
.radar-legend li span,
|
||||||
|
.polararea-legend li span,
|
||||||
|
.doughnut-legend li span {
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,6 @@
|
||||||
|
import {Injectable} from 'angular2/core';
|
||||||
|
|
||||||
|
@Injectable()
|
||||||
|
export class ChartJsService {
|
||||||
|
|
||||||
|
}
|
||||||
1
src/app/pages/charts/components/chartJs/index.ts
Normal file
1
src/app/pages/charts/components/chartJs/index.ts
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
export * from './chartJs.component';
|
||||||
|
|
@ -0,0 +1,240 @@
|
||||||
|
import {Component, ViewEncapsulation} from 'angular2/core';
|
||||||
|
import {BaCard} from '../../../../theme';
|
||||||
|
|
||||||
|
import {ChartistJsService} from "./chartistJs.service";
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'chartist-js',
|
||||||
|
pipes: [],
|
||||||
|
providers: [ChartistJsService],
|
||||||
|
encapsulation: ViewEncapsulation.None,
|
||||||
|
styles: [require('chartist/dist/chartist.css'), require('./chartistJs.scss')],
|
||||||
|
directives: [BaCard],
|
||||||
|
template: require('./chartistJs.html'),
|
||||||
|
})
|
||||||
|
export class ChartistJs {
|
||||||
|
|
||||||
|
private simpleLineOptions = {
|
||||||
|
fullWidth: true,
|
||||||
|
height: "300px",
|
||||||
|
chartPadding: {
|
||||||
|
right: 40
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
private simpleLineData = {
|
||||||
|
labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
|
||||||
|
series: [
|
||||||
|
[20, 20, 12, 45, 50],
|
||||||
|
[10, 45, 30, 14, 12],
|
||||||
|
[34, 12, 12, 40, 50],
|
||||||
|
[10, 43, 25, 22, 16],
|
||||||
|
[3, 6, 30, 33, 43]
|
||||||
|
]
|
||||||
|
};
|
||||||
|
|
||||||
|
private areaLineData = {
|
||||||
|
labels: [1, 2, 3, 4, 5, 6, 7, 8],
|
||||||
|
series: [
|
||||||
|
[5, 9, 7, 8, 5, 3, 5, 4]
|
||||||
|
]
|
||||||
|
};
|
||||||
|
|
||||||
|
private areaLineOptions = {
|
||||||
|
fullWidth: true,
|
||||||
|
height: "300px",
|
||||||
|
low: 0,
|
||||||
|
showArea: true
|
||||||
|
};
|
||||||
|
|
||||||
|
private biLineData = {
|
||||||
|
labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
||||||
|
series: [
|
||||||
|
[1, 2, 3, 1, -2, 0, 1],
|
||||||
|
[-2, -1, -2, -1, -2.5, -1, -2],
|
||||||
|
[0, 0, 0, 1, 2, 2.5, 2],
|
||||||
|
[2.5, 2, 1, 0.5, 1, 0.5, -1]
|
||||||
|
]
|
||||||
|
};
|
||||||
|
|
||||||
|
private biLineOptions = {
|
||||||
|
height: "300px",
|
||||||
|
high: 3,
|
||||||
|
low: -3,
|
||||||
|
showArea: true,
|
||||||
|
showLine: false,
|
||||||
|
showPoint: false,
|
||||||
|
fullWidth: true,
|
||||||
|
axisX: {
|
||||||
|
showGrid: false
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
private simpleBarData = {
|
||||||
|
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
|
||||||
|
series: [
|
||||||
|
[15, 24, 43, 27, 5, 10, 23, 44, 68, 50, 26, 8],
|
||||||
|
[13, 22, 49, 22, 4, 6, 24, 46, 57, 48, 22, 4]
|
||||||
|
]
|
||||||
|
};
|
||||||
|
|
||||||
|
private simpleBarOptions = {
|
||||||
|
fullWidth: true,
|
||||||
|
height: "300px"
|
||||||
|
};
|
||||||
|
|
||||||
|
private multiBarData = {
|
||||||
|
labels: ['Quarter 1', 'Quarter 2', 'Quarter 3', 'Quarter 4'],
|
||||||
|
series: [
|
||||||
|
[5, 4, 3, 7],
|
||||||
|
[3, 2, 9, 5],
|
||||||
|
[1, 5, 8, 4],
|
||||||
|
[2, 3, 4, 6],
|
||||||
|
[4, 1, 2, 1]
|
||||||
|
]
|
||||||
|
};
|
||||||
|
|
||||||
|
private multiBarOptions = {
|
||||||
|
fullWidth: true,
|
||||||
|
height: "300px",
|
||||||
|
stackBars: true,
|
||||||
|
axisX: {
|
||||||
|
labelInterpolationFnc: function (value) {
|
||||||
|
return value.split(/\s+/).map(function (word) {
|
||||||
|
return word[0];
|
||||||
|
}).join('');
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisY: {
|
||||||
|
offset: 20
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
private multiBarResponsive = [
|
||||||
|
['screen and (min-width: 400px)', {
|
||||||
|
reverseData: true,
|
||||||
|
horizontalBars: true,
|
||||||
|
axisX: {
|
||||||
|
labelInterpolationFnc: Chartist.noop
|
||||||
|
},
|
||||||
|
axisY: {
|
||||||
|
offset: 60
|
||||||
|
}
|
||||||
|
}],
|
||||||
|
['screen and (min-width: 700px)', {
|
||||||
|
stackBars: false,
|
||||||
|
reverseData: false,
|
||||||
|
horizontalBars: false,
|
||||||
|
seriesBarDistance: 15
|
||||||
|
}]
|
||||||
|
];
|
||||||
|
|
||||||
|
private stackedBarData = {
|
||||||
|
labels: ['Quarter 1', 'Quarter 2', 'Quarter 3', 'Quarter 4'],
|
||||||
|
series: [
|
||||||
|
[800000, 1200000, 1400000, 1300000],
|
||||||
|
[200000, 400000, 500000, 300000],
|
||||||
|
[100000, 200000, 400000, 600000]
|
||||||
|
]
|
||||||
|
};
|
||||||
|
|
||||||
|
private stackedBarOptions = {
|
||||||
|
fullWidth: true,
|
||||||
|
height: "300px",
|
||||||
|
stackBars: true,
|
||||||
|
axisY: {
|
||||||
|
labelInterpolationFnc: function (value) {
|
||||||
|
return (value / 1000) + 'k';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
private simplePieData = {
|
||||||
|
series: [5, 3, 4]
|
||||||
|
};
|
||||||
|
|
||||||
|
private simplePieOptions = {
|
||||||
|
fullWidth: true,
|
||||||
|
height: "300px",
|
||||||
|
weight: "300px",
|
||||||
|
labelInterpolationFnc: function (value) {
|
||||||
|
return Math.round(value / 12 * 100) + '%';
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
private labelsPieData = {
|
||||||
|
labels: ['Bananas', 'Apples', 'Grapes'],
|
||||||
|
series: [20, 15, 40]
|
||||||
|
};
|
||||||
|
|
||||||
|
private labelsPieOptions = {
|
||||||
|
fullWidth: true,
|
||||||
|
height: "300px",
|
||||||
|
weight: "300px",
|
||||||
|
labelDirection: 'explode',
|
||||||
|
labelInterpolationFnc: function (value) {
|
||||||
|
return value[0];
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
private simpleDonutData = {
|
||||||
|
labels: ['Bananas', 'Apples', 'Grapes'],
|
||||||
|
series: [20, 15, 40]
|
||||||
|
};
|
||||||
|
|
||||||
|
private simpleDonutOptions = {
|
||||||
|
fullWidth: true,
|
||||||
|
donut: true,
|
||||||
|
height: "300px",
|
||||||
|
weight: "300px",
|
||||||
|
labelDirection: 'explode',
|
||||||
|
labelInterpolationFnc: function (value) {
|
||||||
|
return value[0];
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
constructor(private _chartistJsService:ChartistJsService) {
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnInit() {
|
||||||
|
new Chartist.Line('#line-chart', this.simpleLineData, this.simpleLineOptions);
|
||||||
|
new Chartist.Line('#area-chart', this.areaLineData, this.areaLineOptions);
|
||||||
|
new Chartist.Line('#bi-chart', this.biLineData, this.biLineOptions);
|
||||||
|
|
||||||
|
new Chartist.Bar('#simple-bar', this.simpleBarData, this.simpleBarOptions);
|
||||||
|
new Chartist.Bar('#multi-bar', this.multiBarData, this.multiBarOptions, this.multiBarResponsive);
|
||||||
|
new Chartist.Bar('#stacked-bar', this.stackedBarData, this.stackedBarOptions);
|
||||||
|
|
||||||
|
new Chartist.Pie('#simple-pie', this.simplePieData, this.simplePieOptions, this.getResponsive(20, 80));
|
||||||
|
new Chartist.Pie('#label-pie', this.labelsPieData, this.labelsPieOptions);
|
||||||
|
new Chartist.Pie('#donut', this.simpleDonutData, this.simpleDonutOptions, this.getResponsive(5, 40));
|
||||||
|
}
|
||||||
|
|
||||||
|
getResponsive(padding, offset) {
|
||||||
|
return [
|
||||||
|
['screen and (min-width: 1550px)', {
|
||||||
|
chartPadding: padding,
|
||||||
|
labelOffset: offset,
|
||||||
|
labelDirection: 'explode',
|
||||||
|
labelInterpolationFnc: function (value) {
|
||||||
|
return value;
|
||||||
|
}
|
||||||
|
}],
|
||||||
|
['screen and (max-width: 1200px)', {
|
||||||
|
chartPadding: padding,
|
||||||
|
labelOffset: offset,
|
||||||
|
labelDirection: 'explode',
|
||||||
|
labelInterpolationFnc: function (value) {
|
||||||
|
return value;
|
||||||
|
}
|
||||||
|
}],
|
||||||
|
['screen and (max-width: 600px)', {
|
||||||
|
chartPadding: 0,
|
||||||
|
labelOffset: 0,
|
||||||
|
labelInterpolationFnc: function (value) {
|
||||||
|
return value[0];
|
||||||
|
}
|
||||||
|
}]
|
||||||
|
];
|
||||||
|
}
|
||||||
|
}
|
||||||
43
src/app/pages/charts/components/chartistJs/chartistJs.html
Normal file
43
src/app/pages/charts/components/chartistJs/chartistJs.html
Normal file
|
|
@ -0,0 +1,43 @@
|
||||||
|
<section ng-controller="chartistCtrl">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-6 ">
|
||||||
|
<ba-card title="Lines" baCardClass="with-scroll ">
|
||||||
|
<h5>Simple line chart</h5>
|
||||||
|
<div id="line-chart" class="ct-chart"></div>
|
||||||
|
<h5>Line chart with area</h5>
|
||||||
|
<div id="area-chart" class="ct-chart"></div>
|
||||||
|
<h5>Bi-polar line chart with area only</h5>
|
||||||
|
<div id="bi-chart" class="ct-chart"></div>
|
||||||
|
</ba-card>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-md-6 ">
|
||||||
|
<ba-card title="Bars" baCardClass="with-scroll ">
|
||||||
|
<h5>Simple bar chart</h5>
|
||||||
|
<div id="simple-bar" class="ct-chart"></div>
|
||||||
|
<h5>Multi-line labels bar chart</h5>
|
||||||
|
<div id="multi-bar" class="ct-chart"></div>
|
||||||
|
<h5>Stacked bar chart</h5>
|
||||||
|
<div id="stacked-bar" class="ct-chart stacked-bar"></div>
|
||||||
|
</ba-card>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-12">
|
||||||
|
<ba-card title="Pies & Donuts" baCardClass="with-scroll ">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-12 col-lg-4"><h5>Simple Pie</h5>
|
||||||
|
<div id="simple-pie" class="ct-chart"></div>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-12 col-lg-4"><h5>Pie with labels</h5>
|
||||||
|
<div id="label-pie" class="ct-chart"></div>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-12 col-lg-4"><h5>Donut</h5>
|
||||||
|
<div id="donut" class="ct-chart"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</ba-card>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
56
src/app/pages/charts/components/chartistJs/chartistJs.scss
Normal file
56
src/app/pages/charts/components/chartistJs/chartistJs.scss
Normal file
|
|
@ -0,0 +1,56 @@
|
||||||
|
@import "../../../../theme/sass/conf/conf";
|
||||||
|
|
||||||
|
.ct-chart .ct-label{
|
||||||
|
font-size: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ct-chart svg{
|
||||||
|
width: 100%;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ct-series-a {
|
||||||
|
.ct-bar, .ct-line, .ct-point, .ct-slice-donut, .ct-slice-pie {
|
||||||
|
stroke: $primary;
|
||||||
|
}
|
||||||
|
.ct-slice-pie, .ct-area{
|
||||||
|
fill: $primary;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.ct-series-b {
|
||||||
|
.ct-bar, .ct-line, .ct-point, .ct-slice-donut, .ct-slice-pie {
|
||||||
|
stroke: $success;
|
||||||
|
}
|
||||||
|
.ct-slice-pie, .ct-area{
|
||||||
|
fill: $success;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.ct-series-c {
|
||||||
|
.ct-bar, .ct-line, .ct-point, .ct-slice-donut, .ct-slice-pie {
|
||||||
|
stroke: $danger;
|
||||||
|
}
|
||||||
|
.ct-slice-pie, .ct-area{
|
||||||
|
fill: $danger;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.ct-series-d {
|
||||||
|
.ct-bar, .ct-line, .ct-point, .ct-slice-donut, .ct-slice-pie {
|
||||||
|
stroke: $warning;
|
||||||
|
}
|
||||||
|
.ct-slice-pie, .ct-area{
|
||||||
|
fill: $warning;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.ct-series-e {
|
||||||
|
.ct-bar, .ct-line, .ct-point, .ct-slice-donut, .ct-slice-pie {
|
||||||
|
stroke: $info;
|
||||||
|
}
|
||||||
|
.ct-slice-pie, .ct-area{
|
||||||
|
fill: $info;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,6 @@
|
||||||
|
import {Injectable} from 'angular2/core';
|
||||||
|
|
||||||
|
@Injectable()
|
||||||
|
export class ChartistJsService {
|
||||||
|
|
||||||
|
}
|
||||||
1
src/app/pages/charts/components/chartistJs/index.ts
Normal file
1
src/app/pages/charts/components/chartistJs/index.ts
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
export * from './chartistJs.component';
|
||||||
1
src/app/pages/charts/index.ts
Normal file
1
src/app/pages/charts/index.ts
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
export * from './charts.component';
|
||||||
|
|
@ -0,0 +1,51 @@
|
||||||
|
import {Component, ViewEncapsulation} from 'angular2/core';
|
||||||
|
import {BaCard} from '../../../../theme';
|
||||||
|
|
||||||
|
import {layoutPaths} from "../../../../theme/theme.constants";
|
||||||
|
import {BubbleMapsService} from "./bubbleMaps.service";
|
||||||
|
|
||||||
|
require('ammap3');
|
||||||
|
require('ammap3/ammap/maps/js/worldLow');
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'bubble-maps',
|
||||||
|
pipes: [],
|
||||||
|
providers: [BubbleMapsService],
|
||||||
|
// otherwise maps won't work
|
||||||
|
encapsulation: ViewEncapsulation.None,
|
||||||
|
styles: [require('ammap3/ammap/ammap.css'), require('./bubbleMaps.scss')],
|
||||||
|
directives: [BaCard],
|
||||||
|
template: require('./bubbleMaps.html'),
|
||||||
|
})
|
||||||
|
export class BubbleMaps {
|
||||||
|
|
||||||
|
constructor(private _bubbleMapsService:BubbleMapsService) {
|
||||||
|
}
|
||||||
|
|
||||||
|
ngAfterViewInit() {
|
||||||
|
AmCharts.theme = this._bubbleMapsService.getTheme();
|
||||||
|
|
||||||
|
let map = new AmCharts.AmMap();
|
||||||
|
|
||||||
|
map.addTitle('Population of the World in 2011', 14);
|
||||||
|
map.addTitle('source: Gapminder', 11);
|
||||||
|
map.areasSettings = {
|
||||||
|
unlistedAreasColor: '#000000',
|
||||||
|
unlistedAreasAlpha: 0.1
|
||||||
|
};
|
||||||
|
map.imagesSettings.balloonText = '<span style="font-size:14px;"><b>[[title]]</b>: [[value]]</span>';
|
||||||
|
map.pathToImages = layoutPaths.images.amMap;
|
||||||
|
|
||||||
|
let dataProvider = {
|
||||||
|
mapVar: AmCharts.maps.worldLow,
|
||||||
|
images: []
|
||||||
|
};
|
||||||
|
|
||||||
|
map.dataProvider = this._bubbleMapsService.getDataProvider(dataProvider);
|
||||||
|
map.export = {
|
||||||
|
enabled: true
|
||||||
|
};
|
||||||
|
|
||||||
|
map.write('map-bubbles');
|
||||||
|
}
|
||||||
|
}
|
||||||
3
src/app/pages/maps/components/bubbleMaps/bubbleMaps.html
Normal file
3
src/app/pages/maps/components/bubbleMaps/bubbleMaps.html
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
<ba-card title="Map with bubbles" baCardClass="popular-app medium-card" class="viewport100">
|
||||||
|
<div id="map-bubbles" class="bubble-maps"></div>
|
||||||
|
</ba-card>
|
||||||
4
src/app/pages/maps/components/bubbleMaps/bubbleMaps.scss
Normal file
4
src/app/pages/maps/components/bubbleMaps/bubbleMaps.scss
Normal file
|
|
@ -0,0 +1,4 @@
|
||||||
|
.bubble-maps {
|
||||||
|
//TODO: hotfix
|
||||||
|
height: 320px;
|
||||||
|
}
|
||||||
669
src/app/pages/maps/components/bubbleMaps/bubbleMaps.service.ts
Normal file
669
src/app/pages/maps/components/bubbleMaps/bubbleMaps.service.ts
Normal file
|
|
@ -0,0 +1,669 @@
|
||||||
|
import {Injectable} from 'angular2/core';
|
||||||
|
import {layoutColors} from "../../../../theme/theme.constants";
|
||||||
|
|
||||||
|
@Injectable()
|
||||||
|
export class BubbleMapsService {
|
||||||
|
|
||||||
|
theme = {
|
||||||
|
|
||||||
|
themeName: "blur",
|
||||||
|
|
||||||
|
AmChart: {
|
||||||
|
color: layoutColors.defaultText,
|
||||||
|
backgroundColor: "#FFFFFF"
|
||||||
|
},
|
||||||
|
|
||||||
|
AmCoordinateChart: {
|
||||||
|
colors: [layoutColors.primary, layoutColors.danger, layoutColors.warning, layoutColors.success, layoutColors.info, layoutColors.default, layoutColors.primaryDark, layoutColors.warningLight, layoutColors.successDark, layoutColors.successLight, layoutColors.successBg]
|
||||||
|
},
|
||||||
|
|
||||||
|
AmStockChart: {
|
||||||
|
colors: [layoutColors.primary, layoutColors.danger, layoutColors.warning, layoutColors.success, layoutColors.info, layoutColors.default, layoutColors.primaryDark, layoutColors.warningLight, layoutColors.successDark, layoutColors.successLight, layoutColors.successBg]
|
||||||
|
},
|
||||||
|
|
||||||
|
AmSlicedChart: {
|
||||||
|
colors: [layoutColors.primary, layoutColors.danger, layoutColors.warning, layoutColors.success, layoutColors.info, layoutColors.default, layoutColors.primaryDark, layoutColors.warningLight, layoutColors.successDark, layoutColors.successLight, layoutColors.successBg],
|
||||||
|
labelTickColor: "#FFFFFF",
|
||||||
|
labelTickAlpha: 0.3
|
||||||
|
},
|
||||||
|
|
||||||
|
AmRectangularChart: {
|
||||||
|
zoomOutButtonColor: '#FFFFFF',
|
||||||
|
zoomOutButtonRollOverAlpha: 0.15,
|
||||||
|
zoomOutButtonImage: "lens.png"
|
||||||
|
},
|
||||||
|
|
||||||
|
AxisBase: {
|
||||||
|
axisColor: "#FFFFFF",
|
||||||
|
axisAlpha: 0.3,
|
||||||
|
gridAlpha: 0.1,
|
||||||
|
gridColor: "#FFFFFF"
|
||||||
|
},
|
||||||
|
|
||||||
|
ChartScrollbar: {
|
||||||
|
backgroundColor: "#FFFFFF",
|
||||||
|
backgroundAlpha: 0.12,
|
||||||
|
graphFillAlpha: 0.5,
|
||||||
|
graphLineAlpha: 0,
|
||||||
|
selectedBackgroundColor: "#FFFFFF",
|
||||||
|
selectedBackgroundAlpha: 0.4,
|
||||||
|
gridAlpha: 0.15
|
||||||
|
},
|
||||||
|
|
||||||
|
ChartCursor: {
|
||||||
|
cursorColor: layoutColors.primary,
|
||||||
|
color: "#FFFFFF",
|
||||||
|
cursorAlpha: 0.5
|
||||||
|
},
|
||||||
|
|
||||||
|
AmLegend: {
|
||||||
|
color: "#FFFFFF"
|
||||||
|
},
|
||||||
|
|
||||||
|
AmGraph: {
|
||||||
|
lineAlpha: 0.9
|
||||||
|
},
|
||||||
|
GaugeArrow: {
|
||||||
|
color: "#FFFFFF",
|
||||||
|
alpha: 0.8,
|
||||||
|
nailAlpha: 0,
|
||||||
|
innerRadius: "40%",
|
||||||
|
nailRadius: 15,
|
||||||
|
startWidth: 15,
|
||||||
|
borderAlpha: 0.8,
|
||||||
|
nailBorderAlpha: 0
|
||||||
|
},
|
||||||
|
|
||||||
|
GaugeAxis: {
|
||||||
|
tickColor: "#FFFFFF",
|
||||||
|
tickAlpha: 1,
|
||||||
|
tickLength: 15,
|
||||||
|
minorTickLength: 8,
|
||||||
|
axisThickness: 3,
|
||||||
|
axisColor: '#FFFFFF',
|
||||||
|
axisAlpha: 1,
|
||||||
|
bandAlpha: 0.8
|
||||||
|
},
|
||||||
|
|
||||||
|
TrendLine: {
|
||||||
|
lineColor: layoutColors.danger,
|
||||||
|
lineAlpha: 0.8
|
||||||
|
},
|
||||||
|
|
||||||
|
// ammap
|
||||||
|
AreasSettings: {
|
||||||
|
alpha: 0.8,
|
||||||
|
color: layoutColors.info,
|
||||||
|
colorSolid: layoutColors.primaryDark,
|
||||||
|
unlistedAreasAlpha: 0.4,
|
||||||
|
unlistedAreasColor: "#FFFFFF",
|
||||||
|
outlineColor: "#FFFFFF",
|
||||||
|
outlineAlpha: 0.5,
|
||||||
|
outlineThickness: 0.5,
|
||||||
|
rollOverColor: layoutColors.primary,
|
||||||
|
rollOverOutlineColor: "#FFFFFF",
|
||||||
|
selectedOutlineColor: "#FFFFFF",
|
||||||
|
selectedColor: "#f15135",
|
||||||
|
unlistedAreasOutlineColor: "#FFFFFF",
|
||||||
|
unlistedAreasOutlineAlpha: 0.5
|
||||||
|
},
|
||||||
|
|
||||||
|
LinesSettings: {
|
||||||
|
color: "#FFFFFF",
|
||||||
|
alpha: 0.8
|
||||||
|
},
|
||||||
|
|
||||||
|
ImagesSettings: {
|
||||||
|
alpha: 0.8,
|
||||||
|
labelColor: "#FFFFFF",
|
||||||
|
color: "#FFFFFF",
|
||||||
|
labelRollOverColor: layoutColors.primaryDark
|
||||||
|
},
|
||||||
|
|
||||||
|
ZoomControl: {
|
||||||
|
buttonFillAlpha: 0.8,
|
||||||
|
buttonIconColor: layoutColors.default,
|
||||||
|
buttonRollOverColor: layoutColors.danger,
|
||||||
|
buttonFillColor: layoutColors.primaryDark,
|
||||||
|
buttonBorderColor: layoutColors.primaryDark,
|
||||||
|
buttonBorderAlpha: 0,
|
||||||
|
buttonCornerRadius: 0,
|
||||||
|
gridColor: "#FFFFFF",
|
||||||
|
gridBackgroundColor: "#FFFFFF",
|
||||||
|
buttonIconAlpha: 0.6,
|
||||||
|
gridAlpha: 0.6,
|
||||||
|
buttonSize: 20
|
||||||
|
},
|
||||||
|
|
||||||
|
SmallMap: {
|
||||||
|
mapColor: "#000000",
|
||||||
|
rectangleColor: layoutColors.danger,
|
||||||
|
backgroundColor: "#FFFFFF",
|
||||||
|
backgroundAlpha: 0.7,
|
||||||
|
borderThickness: 1,
|
||||||
|
borderAlpha: 0.8
|
||||||
|
},
|
||||||
|
|
||||||
|
// the defaults below are set using CSS syntax, you can use any existing css property
|
||||||
|
// if you don't use Stock chart, you can delete lines below
|
||||||
|
PeriodSelector: {
|
||||||
|
color: "#FFFFFF"
|
||||||
|
},
|
||||||
|
|
||||||
|
PeriodButton: {
|
||||||
|
color: "#FFFFFF",
|
||||||
|
background: "transparent",
|
||||||
|
opacity: 0.7,
|
||||||
|
border: "1px solid rgba(0, 0, 0, .3)",
|
||||||
|
MozBorderRadius: "5px",
|
||||||
|
borderRadius: "5px",
|
||||||
|
margin: "1px",
|
||||||
|
outline: "none",
|
||||||
|
boxSizing: "border-box"
|
||||||
|
},
|
||||||
|
|
||||||
|
PeriodButtonSelected: {
|
||||||
|
color: "#FFFFFF",
|
||||||
|
backgroundColor: "#b9cdf5",
|
||||||
|
border: "1px solid rgba(0, 0, 0, .3)",
|
||||||
|
MozBorderRadius: "5px",
|
||||||
|
borderRadius: "5px",
|
||||||
|
margin: "1px",
|
||||||
|
outline: "none",
|
||||||
|
opacity: 1,
|
||||||
|
boxSizing: "border-box"
|
||||||
|
},
|
||||||
|
|
||||||
|
PeriodInputField: {
|
||||||
|
color: "#FFFFFF",
|
||||||
|
background: "transparent",
|
||||||
|
border: "1px solid rgba(0, 0, 0, .3)",
|
||||||
|
outline: "none"
|
||||||
|
},
|
||||||
|
|
||||||
|
DataSetSelector: {
|
||||||
|
color: "#FFFFFF",
|
||||||
|
selectedBackgroundColor: "#b9cdf5",
|
||||||
|
rollOverBackgroundColor: "#a8b0e4"
|
||||||
|
},
|
||||||
|
|
||||||
|
DataSetCompareList: {
|
||||||
|
color: "#FFFFFF",
|
||||||
|
lineHeight: "100%",
|
||||||
|
boxSizing: "initial",
|
||||||
|
webkitBoxSizing: "initial",
|
||||||
|
border: "1px solid rgba(0, 0, 0, .3)"
|
||||||
|
},
|
||||||
|
|
||||||
|
DataSetSelect: {
|
||||||
|
border: "1px solid rgba(0, 0, 0, .3)",
|
||||||
|
outline: "none"
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
getTheme() {
|
||||||
|
return this.theme;
|
||||||
|
}
|
||||||
|
|
||||||
|
getDataProvider(dataProvider) {
|
||||||
|
|
||||||
|
var latlong = {};
|
||||||
|
latlong['AD'] = {'latitude': 42.5, 'longitude': 1.5};
|
||||||
|
latlong['AE'] = {'latitude': 24, 'longitude': 54};
|
||||||
|
latlong['AF'] = {'latitude': 33, 'longitude': 65};
|
||||||
|
latlong['AG'] = {'latitude': 17.05, 'longitude': -61.8};
|
||||||
|
latlong['AI'] = {'latitude': 18.25, 'longitude': -63.1667};
|
||||||
|
latlong['AL'] = {'latitude': 41, 'longitude': 20};
|
||||||
|
latlong['AM'] = {'latitude': 40, 'longitude': 45};
|
||||||
|
latlong['AN'] = {'latitude': 12.25, 'longitude': -68.75};
|
||||||
|
latlong['AO'] = {'latitude': -12.5, 'longitude': 18.5};
|
||||||
|
latlong['AP'] = {'latitude': 35, 'longitude': 105};
|
||||||
|
latlong['AQ'] = {'latitude': -90, 'longitude': 0};
|
||||||
|
latlong['AR'] = {'latitude': -34, 'longitude': -64};
|
||||||
|
latlong['AS'] = {'latitude': -14.3333, 'longitude': -170};
|
||||||
|
latlong['AT'] = {'latitude': 47.3333, 'longitude': 13.3333};
|
||||||
|
latlong['AU'] = {'latitude': -27, 'longitude': 133};
|
||||||
|
latlong['AW'] = {'latitude': 12.5, 'longitude': -69.9667};
|
||||||
|
latlong['AZ'] = {'latitude': 40.5, 'longitude': 47.5};
|
||||||
|
latlong['BA'] = {'latitude': 44, 'longitude': 18};
|
||||||
|
latlong['BB'] = {'latitude': 13.1667, 'longitude': -59.5333};
|
||||||
|
latlong['BD'] = {'latitude': 24, 'longitude': 90};
|
||||||
|
latlong['BE'] = {'latitude': 50.8333, 'longitude': 4};
|
||||||
|
latlong['BF'] = {'latitude': 13, 'longitude': -2};
|
||||||
|
latlong['BG'] = {'latitude': 43, 'longitude': 25};
|
||||||
|
latlong['BH'] = {'latitude': 26, 'longitude': 50.55};
|
||||||
|
latlong['BI'] = {'latitude': -3.5, 'longitude': 30};
|
||||||
|
latlong['BJ'] = {'latitude': 9.5, 'longitude': 2.25};
|
||||||
|
latlong['BM'] = {'latitude': 32.3333, 'longitude': -64.75};
|
||||||
|
latlong['BN'] = {'latitude': 4.5, 'longitude': 114.6667};
|
||||||
|
latlong['BO'] = {'latitude': -17, 'longitude': -65};
|
||||||
|
latlong['BR'] = {'latitude': -10, 'longitude': -55};
|
||||||
|
latlong['BS'] = {'latitude': 24.25, 'longitude': -76};
|
||||||
|
latlong['BT'] = {'latitude': 27.5, 'longitude': 90.5};
|
||||||
|
latlong['BV'] = {'latitude': -54.4333, 'longitude': 3.4};
|
||||||
|
latlong['BW'] = {'latitude': -22, 'longitude': 24};
|
||||||
|
latlong['BY'] = {'latitude': 53, 'longitude': 28};
|
||||||
|
latlong['BZ'] = {'latitude': 17.25, 'longitude': -88.75};
|
||||||
|
latlong['CA'] = {'latitude': 54, 'longitude': -100};
|
||||||
|
latlong['CC'] = {'latitude': -12.5, 'longitude': 96.8333};
|
||||||
|
latlong['CD'] = {'latitude': 0, 'longitude': 25};
|
||||||
|
latlong['CF'] = {'latitude': 7, 'longitude': 21};
|
||||||
|
latlong['CG'] = {'latitude': -1, 'longitude': 15};
|
||||||
|
latlong['CH'] = {'latitude': 47, 'longitude': 8};
|
||||||
|
latlong['CI'] = {'latitude': 8, 'longitude': -5};
|
||||||
|
latlong['CK'] = {'latitude': -21.2333, 'longitude': -159.7667};
|
||||||
|
latlong['CL'] = {'latitude': -30, 'longitude': -71};
|
||||||
|
latlong['CM'] = {'latitude': 6, 'longitude': 12};
|
||||||
|
latlong['CN'] = {'latitude': 35, 'longitude': 105};
|
||||||
|
latlong['CO'] = {'latitude': 4, 'longitude': -72};
|
||||||
|
latlong['CR'] = {'latitude': 10, 'longitude': -84};
|
||||||
|
latlong['CU'] = {'latitude': 21.5, 'longitude': -80};
|
||||||
|
latlong['CV'] = {'latitude': 16, 'longitude': -24};
|
||||||
|
latlong['CX'] = {'latitude': -10.5, 'longitude': 105.6667};
|
||||||
|
latlong['CY'] = {'latitude': 35, 'longitude': 33};
|
||||||
|
latlong['CZ'] = {'latitude': 49.75, 'longitude': 15.5};
|
||||||
|
latlong['DE'] = {'latitude': 51, 'longitude': 9};
|
||||||
|
latlong['DJ'] = {'latitude': 11.5, 'longitude': 43};
|
||||||
|
latlong['DK'] = {'latitude': 56, 'longitude': 10};
|
||||||
|
latlong['DM'] = {'latitude': 15.4167, 'longitude': -61.3333};
|
||||||
|
latlong['DO'] = {'latitude': 19, 'longitude': -70.6667};
|
||||||
|
latlong['DZ'] = {'latitude': 28, 'longitude': 3};
|
||||||
|
latlong['EC'] = {'latitude': -2, 'longitude': -77.5};
|
||||||
|
latlong['EE'] = {'latitude': 59, 'longitude': 26};
|
||||||
|
latlong['EG'] = {'latitude': 27, 'longitude': 30};
|
||||||
|
latlong['EH'] = {'latitude': 24.5, 'longitude': -13};
|
||||||
|
latlong['ER'] = {'latitude': 15, 'longitude': 39};
|
||||||
|
latlong['ES'] = {'latitude': 40, 'longitude': -4};
|
||||||
|
latlong['ET'] = {'latitude': 8, 'longitude': 38};
|
||||||
|
latlong['EU'] = {'latitude': 47, 'longitude': 8};
|
||||||
|
latlong['FI'] = {'latitude': 62, 'longitude': 26};
|
||||||
|
latlong['FJ'] = {'latitude': -18, 'longitude': 175};
|
||||||
|
latlong['FK'] = {'latitude': -51.75, 'longitude': -59};
|
||||||
|
latlong['FM'] = {'latitude': 6.9167, 'longitude': 158.25};
|
||||||
|
latlong['FO'] = {'latitude': 62, 'longitude': -7};
|
||||||
|
latlong['FR'] = {'latitude': 46, 'longitude': 2};
|
||||||
|
latlong['GA'] = {'latitude': -1, 'longitude': 11.75};
|
||||||
|
latlong['GB'] = {'latitude': 54, 'longitude': -2};
|
||||||
|
latlong['GD'] = {'latitude': 12.1167, 'longitude': -61.6667};
|
||||||
|
latlong['GE'] = {'latitude': 42, 'longitude': 43.5};
|
||||||
|
latlong['GF'] = {'latitude': 4, 'longitude': -53};
|
||||||
|
latlong['GH'] = {'latitude': 8, 'longitude': -2};
|
||||||
|
latlong['GI'] = {'latitude': 36.1833, 'longitude': -5.3667};
|
||||||
|
latlong['GL'] = {'latitude': 72, 'longitude': -40};
|
||||||
|
latlong['GM'] = {'latitude': 13.4667, 'longitude': -16.5667};
|
||||||
|
latlong['GN'] = {'latitude': 11, 'longitude': -10};
|
||||||
|
latlong['GP'] = {'latitude': 16.25, 'longitude': -61.5833};
|
||||||
|
latlong['GQ'] = {'latitude': 2, 'longitude': 10};
|
||||||
|
latlong['GR'] = {'latitude': 39, 'longitude': 22};
|
||||||
|
latlong['GS'] = {'latitude': -54.5, 'longitude': -37};
|
||||||
|
latlong['GT'] = {'latitude': 15.5, 'longitude': -90.25};
|
||||||
|
latlong['GU'] = {'latitude': 13.4667, 'longitude': 144.7833};
|
||||||
|
latlong['GW'] = {'latitude': 12, 'longitude': -15};
|
||||||
|
latlong['GY'] = {'latitude': 5, 'longitude': -59};
|
||||||
|
latlong['HK'] = {'latitude': 22.25, 'longitude': 114.1667};
|
||||||
|
latlong['HM'] = {'latitude': -53.1, 'longitude': 72.5167};
|
||||||
|
latlong['HN'] = {'latitude': 15, 'longitude': -86.5};
|
||||||
|
latlong['HR'] = {'latitude': 45.1667, 'longitude': 15.5};
|
||||||
|
latlong['HT'] = {'latitude': 19, 'longitude': -72.4167};
|
||||||
|
latlong['HU'] = {'latitude': 47, 'longitude': 20};
|
||||||
|
latlong['ID'] = {'latitude': -5, 'longitude': 120};
|
||||||
|
latlong['IE'] = {'latitude': 53, 'longitude': -8};
|
||||||
|
latlong['IL'] = {'latitude': 31.5, 'longitude': 34.75};
|
||||||
|
latlong['IN'] = {'latitude': 20, 'longitude': 77};
|
||||||
|
latlong['IO'] = {'latitude': -6, 'longitude': 71.5};
|
||||||
|
latlong['IQ'] = {'latitude': 33, 'longitude': 44};
|
||||||
|
latlong['IR'] = {'latitude': 32, 'longitude': 53};
|
||||||
|
latlong['IS'] = {'latitude': 65, 'longitude': -18};
|
||||||
|
latlong['IT'] = {'latitude': 42.8333, 'longitude': 12.8333};
|
||||||
|
latlong['JM'] = {'latitude': 18.25, 'longitude': -77.5};
|
||||||
|
latlong['JO'] = {'latitude': 31, 'longitude': 36};
|
||||||
|
latlong['JP'] = {'latitude': 36, 'longitude': 138};
|
||||||
|
latlong['KE'] = {'latitude': 1, 'longitude': 38};
|
||||||
|
latlong['KG'] = {'latitude': 41, 'longitude': 75};
|
||||||
|
latlong['KH'] = {'latitude': 13, 'longitude': 105};
|
||||||
|
latlong['KI'] = {'latitude': 1.4167, 'longitude': 173};
|
||||||
|
latlong['KM'] = {'latitude': -12.1667, 'longitude': 44.25};
|
||||||
|
latlong['KN'] = {'latitude': 17.3333, 'longitude': -62.75};
|
||||||
|
latlong['KP'] = {'latitude': 40, 'longitude': 127};
|
||||||
|
latlong['KR'] = {'latitude': 37, 'longitude': 127.5};
|
||||||
|
latlong['KW'] = {'latitude': 29.3375, 'longitude': 47.6581};
|
||||||
|
latlong['KY'] = {'latitude': 19.5, 'longitude': -80.5};
|
||||||
|
latlong['KZ'] = {'latitude': 48, 'longitude': 68};
|
||||||
|
latlong['LA'] = {'latitude': 18, 'longitude': 105};
|
||||||
|
latlong['LB'] = {'latitude': 33.8333, 'longitude': 35.8333};
|
||||||
|
latlong['LC'] = {'latitude': 13.8833, 'longitude': -61.1333};
|
||||||
|
latlong['LI'] = {'latitude': 47.1667, 'longitude': 9.5333};
|
||||||
|
latlong['LK'] = {'latitude': 7, 'longitude': 81};
|
||||||
|
latlong['LR'] = {'latitude': 6.5, 'longitude': -9.5};
|
||||||
|
latlong['LS'] = {'latitude': -29.5, 'longitude': 28.5};
|
||||||
|
latlong['LT'] = {'latitude': 55, 'longitude': 24};
|
||||||
|
latlong['LU'] = {'latitude': 49.75, 'longitude': 6};
|
||||||
|
latlong['LV'] = {'latitude': 57, 'longitude': 25};
|
||||||
|
latlong['LY'] = {'latitude': 25, 'longitude': 17};
|
||||||
|
latlong['MA'] = {'latitude': 32, 'longitude': -5};
|
||||||
|
latlong['MC'] = {'latitude': 43.7333, 'longitude': 7.4};
|
||||||
|
latlong['MD'] = {'latitude': 47, 'longitude': 29};
|
||||||
|
latlong['ME'] = {'latitude': 42.5, 'longitude': 19.4};
|
||||||
|
latlong['MG'] = {'latitude': -20, 'longitude': 47};
|
||||||
|
latlong['MH'] = {'latitude': 9, 'longitude': 168};
|
||||||
|
latlong['MK'] = {'latitude': 41.8333, 'longitude': 22};
|
||||||
|
latlong['ML'] = {'latitude': 17, 'longitude': -4};
|
||||||
|
latlong['MM'] = {'latitude': 22, 'longitude': 98};
|
||||||
|
latlong['MN'] = {'latitude': 46, 'longitude': 105};
|
||||||
|
latlong['MO'] = {'latitude': 22.1667, 'longitude': 113.55};
|
||||||
|
latlong['MP'] = {'latitude': 15.2, 'longitude': 145.75};
|
||||||
|
latlong['MQ'] = {'latitude': 14.6667, 'longitude': -61};
|
||||||
|
latlong['MR'] = {'latitude': 20, 'longitude': -12};
|
||||||
|
latlong['MS'] = {'latitude': 16.75, 'longitude': -62.2};
|
||||||
|
latlong['MT'] = {'latitude': 35.8333, 'longitude': 14.5833};
|
||||||
|
latlong['MU'] = {'latitude': -20.2833, 'longitude': 57.55};
|
||||||
|
latlong['MV'] = {'latitude': 3.25, 'longitude': 73};
|
||||||
|
latlong['MW'] = {'latitude': -13.5, 'longitude': 34};
|
||||||
|
latlong['MX'] = {'latitude': 23, 'longitude': -102};
|
||||||
|
latlong['MY'] = {'latitude': 2.5, 'longitude': 112.5};
|
||||||
|
latlong['MZ'] = {'latitude': -18.25, 'longitude': 35};
|
||||||
|
latlong['NA'] = {'latitude': -22, 'longitude': 17};
|
||||||
|
latlong['NC'] = {'latitude': -21.5, 'longitude': 165.5};
|
||||||
|
latlong['NE'] = {'latitude': 16, 'longitude': 8};
|
||||||
|
latlong['NF'] = {'latitude': -29.0333, 'longitude': 167.95};
|
||||||
|
latlong['NG'] = {'latitude': 10, 'longitude': 8};
|
||||||
|
latlong['NI'] = {'latitude': 13, 'longitude': -85};
|
||||||
|
latlong['NL'] = {'latitude': 52.5, 'longitude': 5.75};
|
||||||
|
latlong['NO'] = {'latitude': 62, 'longitude': 10};
|
||||||
|
latlong['NP'] = {'latitude': 28, 'longitude': 84};
|
||||||
|
latlong['NR'] = {'latitude': -0.5333, 'longitude': 166.9167};
|
||||||
|
latlong['NU'] = {'latitude': -19.0333, 'longitude': -169.8667};
|
||||||
|
latlong['NZ'] = {'latitude': -41, 'longitude': 174};
|
||||||
|
latlong['OM'] = {'latitude': 21, 'longitude': 57};
|
||||||
|
latlong['PA'] = {'latitude': 9, 'longitude': -80};
|
||||||
|
latlong['PE'] = {'latitude': -10, 'longitude': -76};
|
||||||
|
latlong['PF'] = {'latitude': -15, 'longitude': -140};
|
||||||
|
latlong['PG'] = {'latitude': -6, 'longitude': 147};
|
||||||
|
latlong['PH'] = {'latitude': 13, 'longitude': 122};
|
||||||
|
latlong['PK'] = {'latitude': 30, 'longitude': 70};
|
||||||
|
latlong['PL'] = {'latitude': 52, 'longitude': 20};
|
||||||
|
latlong['PM'] = {'latitude': 46.8333, 'longitude': -56.3333};
|
||||||
|
latlong['PR'] = {'latitude': 18.25, 'longitude': -66.5};
|
||||||
|
latlong['PS'] = {'latitude': 32, 'longitude': 35.25};
|
||||||
|
latlong['PT'] = {'latitude': 39.5, 'longitude': -8};
|
||||||
|
latlong['PW'] = {'latitude': 7.5, 'longitude': 134.5};
|
||||||
|
latlong['PY'] = {'latitude': -23, 'longitude': -58};
|
||||||
|
latlong['QA'] = {'latitude': 25.5, 'longitude': 51.25};
|
||||||
|
latlong['RE'] = {'latitude': -21.1, 'longitude': 55.6};
|
||||||
|
latlong['RO'] = {'latitude': 46, 'longitude': 25};
|
||||||
|
latlong['RS'] = {'latitude': 44, 'longitude': 21};
|
||||||
|
latlong['RU'] = {'latitude': 60, 'longitude': 100};
|
||||||
|
latlong['RW'] = {'latitude': -2, 'longitude': 30};
|
||||||
|
latlong['SA'] = {'latitude': 25, 'longitude': 45};
|
||||||
|
latlong['SB'] = {'latitude': -8, 'longitude': 159};
|
||||||
|
latlong['SC'] = {'latitude': -4.5833, 'longitude': 55.6667};
|
||||||
|
latlong['SD'] = {'latitude': 15, 'longitude': 30};
|
||||||
|
latlong['SE'] = {'latitude': 62, 'longitude': 15};
|
||||||
|
latlong['SG'] = {'latitude': 1.3667, 'longitude': 103.8};
|
||||||
|
latlong['SH'] = {'latitude': -15.9333, 'longitude': -5.7};
|
||||||
|
latlong['SI'] = {'latitude': 46, 'longitude': 15};
|
||||||
|
latlong['SJ'] = {'latitude': 78, 'longitude': 20};
|
||||||
|
latlong['SK'] = {'latitude': 48.6667, 'longitude': 19.5};
|
||||||
|
latlong['SL'] = {'latitude': 8.5, 'longitude': -11.5};
|
||||||
|
latlong['SM'] = {'latitude': 43.7667, 'longitude': 12.4167};
|
||||||
|
latlong['SN'] = {'latitude': 14, 'longitude': -14};
|
||||||
|
latlong['SO'] = {'latitude': 10, 'longitude': 49};
|
||||||
|
latlong['SR'] = {'latitude': 4, 'longitude': -56};
|
||||||
|
latlong['ST'] = {'latitude': 1, 'longitude': 7};
|
||||||
|
latlong['SV'] = {'latitude': 13.8333, 'longitude': -88.9167};
|
||||||
|
latlong['SY'] = {'latitude': 35, 'longitude': 38};
|
||||||
|
latlong['SZ'] = {'latitude': -26.5, 'longitude': 31.5};
|
||||||
|
latlong['TC'] = {'latitude': 21.75, 'longitude': -71.5833};
|
||||||
|
latlong['TD'] = {'latitude': 15, 'longitude': 19};
|
||||||
|
latlong['TF'] = {'latitude': -43, 'longitude': 67};
|
||||||
|
latlong['TG'] = {'latitude': 8, 'longitude': 1.1667};
|
||||||
|
latlong['TH'] = {'latitude': 15, 'longitude': 100};
|
||||||
|
latlong['TJ'] = {'latitude': 39, 'longitude': 71};
|
||||||
|
latlong['TK'] = {'latitude': -9, 'longitude': -172};
|
||||||
|
latlong['TM'] = {'latitude': 40, 'longitude': 60};
|
||||||
|
latlong['TN'] = {'latitude': 34, 'longitude': 9};
|
||||||
|
latlong['TO'] = {'latitude': -20, 'longitude': -175};
|
||||||
|
latlong['TR'] = {'latitude': 39, 'longitude': 35};
|
||||||
|
latlong['TT'] = {'latitude': 11, 'longitude': -61};
|
||||||
|
latlong['TV'] = {'latitude': -8, 'longitude': 178};
|
||||||
|
latlong['TW'] = {'latitude': 23.5, 'longitude': 121};
|
||||||
|
latlong['TZ'] = {'latitude': -6, 'longitude': 35};
|
||||||
|
latlong['UA'] = {'latitude': 49, 'longitude': 32};
|
||||||
|
latlong['UG'] = {'latitude': 1, 'longitude': 32};
|
||||||
|
latlong['UM'] = {'latitude': 19.2833, 'longitude': 166.6};
|
||||||
|
latlong['US'] = {'latitude': 38, 'longitude': -97};
|
||||||
|
latlong['UY'] = {'latitude': -33, 'longitude': -56};
|
||||||
|
latlong['UZ'] = {'latitude': 41, 'longitude': 64};
|
||||||
|
latlong['VA'] = {'latitude': 41.9, 'longitude': 12.45};
|
||||||
|
latlong['VC'] = {'latitude': 13.25, 'longitude': -61.2};
|
||||||
|
latlong['VE'] = {'latitude': 8, 'longitude': -66};
|
||||||
|
latlong['VG'] = {'latitude': 18.5, 'longitude': -64.5};
|
||||||
|
latlong['VI'] = {'latitude': 18.3333, 'longitude': -64.8333};
|
||||||
|
latlong['VN'] = {'latitude': 16, 'longitude': 106};
|
||||||
|
latlong['VU'] = {'latitude': -16, 'longitude': 167};
|
||||||
|
latlong['WF'] = {'latitude': -13.3, 'longitude': -176.2};
|
||||||
|
latlong['WS'] = {'latitude': -13.5833, 'longitude': -172.3333};
|
||||||
|
latlong['YE'] = {'latitude': 15, 'longitude': 48};
|
||||||
|
latlong['YT'] = {'latitude': -12.8333, 'longitude': 45.1667};
|
||||||
|
latlong['ZA'] = {'latitude': -29, 'longitude': 24};
|
||||||
|
latlong['ZM'] = {'latitude': -15, 'longitude': 30};
|
||||||
|
latlong['ZW'] = {'latitude': -20, 'longitude': 30};
|
||||||
|
|
||||||
|
var mapData = [
|
||||||
|
{'code': 'AF', 'name': 'Afghanistan', 'value': 32358260, 'color': layoutColors.primaryDark},
|
||||||
|
{'code': 'AL', 'name': 'Albania', 'value': 3215988, 'color': layoutColors.warning},
|
||||||
|
{'code': 'DZ', 'name': 'Algeria', 'value': 35980193, 'color': layoutColors.danger},
|
||||||
|
{'code': 'AO', 'name': 'Angola', 'value': 19618432, 'color': layoutColors.danger},
|
||||||
|
{'code': 'AR', 'name': 'Argentina', 'value': 40764561, 'color': layoutColors.success},
|
||||||
|
{'code': 'AM', 'name': 'Armenia', 'value': 3100236, 'color': layoutColors.warning},
|
||||||
|
{'code': 'AU', 'name': 'Australia', 'value': 22605732, 'color': layoutColors.warningDark},
|
||||||
|
{'code': 'AT', 'name': 'Austria', 'value': 8413429, 'color': layoutColors.warning},
|
||||||
|
{'code': 'AZ', 'name': 'Azerbaijan', 'value': 9306023, 'color': layoutColors.warning},
|
||||||
|
{'code': 'BH', 'name': 'Bahrain', 'value': 1323535, 'color': layoutColors.primaryDark},
|
||||||
|
{'code': 'BD', 'name': 'Bangladesh', 'value': 150493658, 'color': layoutColors.primaryDark},
|
||||||
|
{'code': 'BY', 'name': 'Belarus', 'value': 9559441, 'color': layoutColors.warning},
|
||||||
|
{'code': 'BE', 'name': 'Belgium', 'value': 10754056, 'color': layoutColors.warning},
|
||||||
|
{'code': 'BJ', 'name': 'Benin', 'value': 9099922, 'color': layoutColors.danger},
|
||||||
|
{'code': 'BT', 'name': 'Bhutan', 'value': 738267, 'color': layoutColors.primaryDark},
|
||||||
|
{'code': 'BO', 'name': 'Bolivia', 'value': 10088108, 'color': layoutColors.success},
|
||||||
|
{'code': 'BA', 'name': 'Bosnia and Herzegovina', 'value': 3752228, 'color': layoutColors.warning},
|
||||||
|
{'code': 'BW', 'name': 'Botswana', 'value': 2030738, 'color': layoutColors.danger},
|
||||||
|
{'code': 'BR', 'name': 'Brazil', 'value': 196655014, 'color': layoutColors.success},
|
||||||
|
{'code': 'BN', 'name': 'Brunei', 'value': 405938, 'color': layoutColors.primaryDark},
|
||||||
|
{'code': 'BG', 'name': 'Bulgaria', 'value': 7446135, 'color': layoutColors.warning},
|
||||||
|
{'code': 'BF', 'name': 'Burkina Faso', 'value': 16967845, 'color': layoutColors.danger},
|
||||||
|
{'code': 'BI', 'name': 'Burundi', 'value': 8575172, 'color': layoutColors.danger},
|
||||||
|
{'code': 'KH', 'name': 'Cambodia', 'value': 14305183, 'color': layoutColors.primaryDark},
|
||||||
|
{'code': 'CM', 'name': 'Cameroon', 'value': 20030362, 'color': layoutColors.danger},
|
||||||
|
{'code': 'CA', 'name': 'Canada', 'value': 34349561, 'color': layoutColors.primary},
|
||||||
|
{'code': 'CV', 'name': 'Cape Verde', 'value': 500585, 'color': layoutColors.danger},
|
||||||
|
{'code': 'CF', 'name': 'Central African Rep.', 'value': 4486837, 'color': layoutColors.danger},
|
||||||
|
{'code': 'TD', 'name': 'Chad', 'value': 11525496, 'color': layoutColors.danger},
|
||||||
|
{'code': 'CL', 'name': 'Chile', 'value': 17269525, 'color': layoutColors.success},
|
||||||
|
{'code': 'CN', 'name': 'China', 'value': 1347565324, 'color': layoutColors.primaryDark},
|
||||||
|
{'code': 'CO', 'name': 'Colombia', 'value': 46927125, 'color': layoutColors.success},
|
||||||
|
{'code': 'KM', 'name': 'Comoros', 'value': 753943, 'color': layoutColors.danger},
|
||||||
|
{'code': 'CD', 'name': 'Congo, Dem. Rep.', 'value': 67757577, 'color': layoutColors.danger},
|
||||||
|
{'code': 'CG', 'name': 'Congo, Rep.', 'value': 4139748, 'color': layoutColors.danger},
|
||||||
|
{'code': 'CR', 'name': 'Costa Rica', 'value': 4726575, 'color': layoutColors.primary},
|
||||||
|
{'code': 'CI', 'name': 'Cote d\'Ivoire', 'value': 20152894, 'color': layoutColors.danger},
|
||||||
|
{'code': 'HR', 'name': 'Croatia', 'value': 4395560, 'color': layoutColors.warning},
|
||||||
|
{'code': 'CU', 'name': 'Cuba', 'value': 11253665, 'color': layoutColors.primary},
|
||||||
|
{'code': 'CY', 'name': 'Cyprus', 'value': 1116564, 'color': layoutColors.warning},
|
||||||
|
{'code': 'CZ', 'name': 'Czech Rep.', 'value': 10534293, 'color': layoutColors.warning},
|
||||||
|
{'code': 'DK', 'name': 'Denmark', 'value': 5572594, 'color': layoutColors.warning},
|
||||||
|
{'code': 'DJ', 'name': 'Djibouti', 'value': 905564, 'color': layoutColors.danger},
|
||||||
|
{'code': 'DO', 'name': 'Dominican Rep.', 'value': 10056181, 'color': layoutColors.primary},
|
||||||
|
{'code': 'EC', 'name': 'Ecuador', 'value': 14666055, 'color': layoutColors.success},
|
||||||
|
{'code': 'EG', 'name': 'Egypt', 'value': 82536770, 'color': layoutColors.danger},
|
||||||
|
{'code': 'SV', 'name': 'El Salvador', 'value': 6227491, 'color': layoutColors.primary},
|
||||||
|
{'code': 'GQ', 'name': 'Equatorial Guinea', 'value': 720213, 'color': layoutColors.danger},
|
||||||
|
{'code': 'ER', 'name': 'Eritrea', 'value': 5415280, 'color': layoutColors.danger},
|
||||||
|
{'code': 'EE', 'name': 'Estonia', 'value': 1340537, 'color': layoutColors.warning},
|
||||||
|
{'code': 'ET', 'name': 'Ethiopia', 'value': 84734262, 'color': layoutColors.danger},
|
||||||
|
{'code': 'FJ', 'name': 'Fiji', 'value': 868406, 'color': layoutColors.warningDark},
|
||||||
|
{'code': 'FI', 'name': 'Finland', 'value': 5384770, 'color': layoutColors.warning},
|
||||||
|
{'code': 'FR', 'name': 'France', 'value': 63125894, 'color': layoutColors.warning},
|
||||||
|
{'code': 'GA', 'name': 'Gabon', 'value': 1534262, 'color': layoutColors.danger},
|
||||||
|
{'code': 'GM', 'name': 'Gambia', 'value': 1776103, 'color': layoutColors.danger},
|
||||||
|
{'code': 'GE', 'name': 'Georgia', 'value': 4329026, 'color': layoutColors.warning},
|
||||||
|
{'code': 'DE', 'name': 'Germany', 'value': 82162512, 'color': layoutColors.warning},
|
||||||
|
{'code': 'GH', 'name': 'Ghana', 'value': 24965816, 'color': layoutColors.danger},
|
||||||
|
{'code': 'GR', 'name': 'Greece', 'value': 11390031, 'color': layoutColors.warning},
|
||||||
|
{'code': 'GT', 'name': 'Guatemala', 'value': 14757316, 'color': layoutColors.primary},
|
||||||
|
{'code': 'GN', 'name': 'Guinea', 'value': 10221808, 'color': layoutColors.danger},
|
||||||
|
{'code': 'GW', 'name': 'Guinea-Bissau', 'value': 1547061, 'color': layoutColors.danger},
|
||||||
|
{'code': 'GY', 'name': 'Guyana', 'value': 756040, 'color': layoutColors.success},
|
||||||
|
{'code': 'HT', 'name': 'Haiti', 'value': 10123787, 'color': layoutColors.primary},
|
||||||
|
{'code': 'HN', 'name': 'Honduras', 'value': 7754687, 'color': layoutColors.primary},
|
||||||
|
{'code': 'HK', 'name': 'Hong Kong, China', 'value': 7122187, 'color': layoutColors.primaryDark},
|
||||||
|
{'code': 'HU', 'name': 'Hungary', 'value': 9966116, 'color': layoutColors.warning},
|
||||||
|
{'code': 'IS', 'name': 'Iceland', 'value': 324366, 'color': layoutColors.warning},
|
||||||
|
{'code': 'IN', 'name': 'India', 'value': 1241491960, 'color': layoutColors.primaryDark},
|
||||||
|
{'code': 'ID', 'name': 'Indonesia', 'value': 242325638, 'color': layoutColors.primaryDark},
|
||||||
|
{'code': 'IR', 'name': 'Iran', 'value': 74798599, 'color': layoutColors.primaryDark},
|
||||||
|
{'code': 'IQ', 'name': 'Iraq', 'value': 32664942, 'color': layoutColors.primaryDark},
|
||||||
|
{'code': 'IE', 'name': 'Ireland', 'value': 4525802, 'color': layoutColors.warning},
|
||||||
|
{'code': 'IL', 'name': 'Israel', 'value': 7562194, 'color': layoutColors.primaryDark},
|
||||||
|
{'code': 'IT', 'name': 'Italy', 'value': 60788694, 'color': layoutColors.warning},
|
||||||
|
{'code': 'JM', 'name': 'Jamaica', 'value': 2751273, 'color': layoutColors.primary},
|
||||||
|
{'code': 'JP', 'name': 'Japan', 'value': 126497241, 'color': layoutColors.primaryDark},
|
||||||
|
{'code': 'JO', 'name': 'Jordan', 'value': 6330169, 'color': layoutColors.primaryDark},
|
||||||
|
{'code': 'KZ', 'name': 'Kazakhstan', 'value': 16206750, 'color': layoutColors.primaryDark},
|
||||||
|
{'code': 'KE', 'name': 'Kenya', 'value': 41609728, 'color': layoutColors.danger},
|
||||||
|
{'code': 'KP', 'name': 'Korea, Dem. Rep.', 'value': 24451285, 'color': layoutColors.primaryDark},
|
||||||
|
{'code': 'KR', 'name': 'Korea, Rep.', 'value': 48391343, 'color': layoutColors.primaryDark},
|
||||||
|
{'code': 'KW', 'name': 'Kuwait', 'value': 2818042, 'color': layoutColors.primaryDark},
|
||||||
|
{'code': 'KG', 'name': 'Kyrgyzstan', 'value': 5392580, 'color': layoutColors.primaryDark},
|
||||||
|
{'code': 'LA', 'name': 'Laos', 'value': 6288037, 'color': layoutColors.primaryDark},
|
||||||
|
{'code': 'LV', 'name': 'Latvia', 'value': 2243142, 'color': layoutColors.warning},
|
||||||
|
{'code': 'LB', 'name': 'Lebanon', 'value': 4259405, 'color': layoutColors.primaryDark},
|
||||||
|
{'code': 'LS', 'name': 'Lesotho', 'value': 2193843, 'color': layoutColors.danger},
|
||||||
|
{'code': 'LR', 'name': 'Liberia', 'value': 4128572, 'color': layoutColors.danger},
|
||||||
|
{'code': 'LY', 'name': 'Libya', 'value': 6422772, 'color': layoutColors.danger},
|
||||||
|
{'code': 'LT', 'name': 'Lithuania', 'value': 3307481, 'color': layoutColors.warning},
|
||||||
|
{'code': 'LU', 'name': 'Luxembourg', 'value': 515941, 'color': layoutColors.warning},
|
||||||
|
{'code': 'MK', 'name': 'Macedonia, FYR', 'value': 2063893, 'color': layoutColors.warning},
|
||||||
|
{'code': 'MG', 'name': 'Madagascar', 'value': 21315135, 'color': layoutColors.danger},
|
||||||
|
{'code': 'MW', 'name': 'Malawi', 'value': 15380888, 'color': layoutColors.danger},
|
||||||
|
{'code': 'MY', 'name': 'Malaysia', 'value': 28859154, 'color': layoutColors.primaryDark},
|
||||||
|
{'code': 'ML', 'name': 'Mali', 'value': 15839538, 'color': layoutColors.danger},
|
||||||
|
{'code': 'MR', 'name': 'Mauritania', 'value': 3541540, 'color': layoutColors.danger},
|
||||||
|
{'code': 'MU', 'name': 'Mauritius', 'value': 1306593, 'color': layoutColors.danger},
|
||||||
|
{'code': 'MX', 'name': 'Mexico', 'value': 114793341, 'color': layoutColors.primary},
|
||||||
|
{'code': 'MD', 'name': 'Moldova', 'value': 3544864, 'color': layoutColors.warning},
|
||||||
|
{'code': 'MN', 'name': 'Mongolia', 'value': 2800114, 'color': layoutColors.primaryDark},
|
||||||
|
{'code': 'ME', 'name': 'Montenegro', 'value': 632261, 'color': layoutColors.warning},
|
||||||
|
{'code': 'MA', 'name': 'Morocco', 'value': 32272974, 'color': layoutColors.danger},
|
||||||
|
{'code': 'MZ', 'name': 'Mozambique', 'value': 23929708, 'color': layoutColors.danger},
|
||||||
|
{'code': 'MM', 'name': 'Myanmar', 'value': 48336763, 'color': layoutColors.primaryDark},
|
||||||
|
{'code': 'NA', 'name': 'Namibia', 'value': 2324004, 'color': layoutColors.danger},
|
||||||
|
{'code': 'NP', 'name': 'Nepal', 'value': 30485798, 'color': layoutColors.primaryDark},
|
||||||
|
{'code': 'NL', 'name': 'Netherlands', 'value': 16664746, 'color': layoutColors.warning},
|
||||||
|
{'code': 'NZ', 'name': 'New Zealand', 'value': 4414509, 'color': layoutColors.warningDark},
|
||||||
|
{'code': 'NI', 'name': 'Nicaragua', 'value': 5869859, 'color': layoutColors.primary},
|
||||||
|
{'code': 'NE', 'name': 'Niger', 'value': 16068994, 'color': layoutColors.danger},
|
||||||
|
{'code': 'NG', 'name': 'Nigeria', 'value': 162470737, 'color': layoutColors.danger},
|
||||||
|
{'code': 'NO', 'name': 'Norway', 'value': 4924848, 'color': layoutColors.warning},
|
||||||
|
{'code': 'OM', 'name': 'Oman', 'value': 2846145, 'color': layoutColors.primaryDark},
|
||||||
|
{'code': 'PK', 'name': 'Pakistan', 'value': 176745364, 'color': layoutColors.primaryDark},
|
||||||
|
{'code': 'PA', 'name': 'Panama', 'value': 3571185, 'color': layoutColors.primary},
|
||||||
|
{'code': 'PG', 'name': 'Papua New Guinea', 'value': 7013829, 'color': layoutColors.warningDark},
|
||||||
|
{'code': 'PY', 'name': 'Paraguay', 'value': 6568290, 'color': layoutColors.success},
|
||||||
|
{'code': 'PE', 'name': 'Peru', 'value': 29399817, 'color': layoutColors.success},
|
||||||
|
{'code': 'PH', 'name': 'Philippines', 'value': 94852030, 'color': layoutColors.primaryDark},
|
||||||
|
{'code': 'PL', 'name': 'Poland', 'value': 38298949, 'color': layoutColors.warning},
|
||||||
|
{'code': 'PT', 'name': 'Portugal', 'value': 10689663, 'color': layoutColors.warning},
|
||||||
|
{'code': 'PR', 'name': 'Puerto Rico', 'value': 3745526, 'color': layoutColors.primary},
|
||||||
|
{'code': 'QA', 'name': 'Qatar', 'value': 1870041, 'color': layoutColors.primaryDark},
|
||||||
|
{'code': 'RO', 'name': 'Romania', 'value': 21436495, 'color': layoutColors.warning},
|
||||||
|
{'code': 'RU', 'name': 'Russia', 'value': 142835555, 'color': layoutColors.warning},
|
||||||
|
{'code': 'RW', 'name': 'Rwanda', 'value': 10942950, 'color': layoutColors.danger},
|
||||||
|
{'code': 'SA', 'name': 'Saudi Arabia', 'value': 28082541, 'color': layoutColors.primaryDark},
|
||||||
|
{'code': 'SN', 'name': 'Senegal', 'value': 12767556, 'color': layoutColors.danger},
|
||||||
|
{'code': 'RS', 'name': 'Serbia', 'value': 9853969, 'color': layoutColors.warning},
|
||||||
|
{'code': 'SL', 'name': 'Sierra Leone', 'value': 5997486, 'color': layoutColors.danger},
|
||||||
|
{'code': 'SG', 'name': 'Singapore', 'value': 5187933, 'color': layoutColors.primaryDark},
|
||||||
|
{'code': 'SK', 'name': 'Slovak Republic', 'value': 5471502, 'color': layoutColors.warning},
|
||||||
|
{'code': 'SI', 'name': 'Slovenia', 'value': 2035012, 'color': layoutColors.warning},
|
||||||
|
{'code': 'SB', 'name': 'Solomon Islands', 'value': 552267, 'color': layoutColors.warningDark},
|
||||||
|
{'code': 'SO', 'name': 'Somalia', 'value': 9556873, 'color': layoutColors.danger},
|
||||||
|
{'code': 'ZA', 'name': 'South Africa', 'value': 50459978, 'color': layoutColors.danger},
|
||||||
|
{'code': 'ES', 'name': 'Spain', 'value': 46454895, 'color': layoutColors.warning},
|
||||||
|
{'code': 'LK', 'name': 'Sri Lanka', 'value': 21045394, 'color': layoutColors.primaryDark},
|
||||||
|
{'code': 'SD', 'name': 'Sudan', 'value': 34735288, 'color': layoutColors.danger},
|
||||||
|
{'code': 'SR', 'name': 'Suriname', 'value': 529419, 'color': layoutColors.success},
|
||||||
|
{'code': 'SZ', 'name': 'Swaziland', 'value': 1203330, 'color': layoutColors.danger},
|
||||||
|
{'code': 'SE', 'name': 'Sweden', 'value': 9440747, 'color': layoutColors.warning},
|
||||||
|
{'code': 'CH', 'name': 'Switzerland', 'value': 7701690, 'color': layoutColors.warning},
|
||||||
|
{'code': 'SY', 'name': 'Syria', 'value': 20766037, 'color': layoutColors.primaryDark},
|
||||||
|
{'code': 'TW', 'name': 'Taiwan', 'value': 23072000, 'color': layoutColors.primaryDark},
|
||||||
|
{'code': 'TJ', 'name': 'Tajikistan', 'value': 6976958, 'color': layoutColors.primaryDark},
|
||||||
|
{'code': 'TZ', 'name': 'Tanzania', 'value': 46218486, 'color': layoutColors.danger},
|
||||||
|
{'code': 'TH', 'name': 'Thailand', 'value': 69518555, 'color': layoutColors.primaryDark},
|
||||||
|
{'code': 'TG', 'name': 'Togo', 'value': 6154813, 'color': layoutColors.danger},
|
||||||
|
{'code': 'TT', 'name': 'Trinidad and Tobago', 'value': 1346350, 'color': layoutColors.primary},
|
||||||
|
{'code': 'TN', 'name': 'Tunisia', 'value': 10594057, 'color': layoutColors.danger},
|
||||||
|
{'code': 'TR', 'name': 'Turkey', 'value': 73639596, 'color': layoutColors.warning},
|
||||||
|
{'code': 'TM', 'name': 'Turkmenistan', 'value': 5105301, 'color': layoutColors.primaryDark},
|
||||||
|
{'code': 'UG', 'name': 'Uganda', 'value': 34509205, 'color': layoutColors.danger},
|
||||||
|
{'code': 'UA', 'name': 'Ukraine', 'value': 45190180, 'color': layoutColors.warning},
|
||||||
|
{'code': 'AE', 'name': 'United Arab Emirates', 'value': 7890924, 'color': layoutColors.primaryDark},
|
||||||
|
{'code': 'GB', 'name': 'United Kingdom', 'value': 62417431, 'color': layoutColors.warning},
|
||||||
|
{'code': 'US', 'name': 'United States', 'value': 313085380, 'color': layoutColors.primary},
|
||||||
|
{'code': 'UY', 'name': 'Uruguay', 'value': 3380008, 'color': layoutColors.success},
|
||||||
|
{'code': 'UZ', 'name': 'Uzbekistan', 'value': 27760267, 'color': layoutColors.primaryDark},
|
||||||
|
{'code': 'VE', 'name': 'Venezuela', 'value': 29436891, 'color': layoutColors.success},
|
||||||
|
{'code': 'PS', 'name': 'West Bank and Gaza', 'value': 4152369, 'color': layoutColors.primaryDark},
|
||||||
|
{'code': 'VN', 'name': 'Vietnam', 'value': 88791996, 'color': layoutColors.primaryDark},
|
||||||
|
{'code': 'YE', 'name': 'Yemen, Rep.', 'value': 24799880, 'color': layoutColors.primaryDark},
|
||||||
|
{'code': 'ZM', 'name': 'Zambia', 'value': 13474959, 'color': layoutColors.danger},
|
||||||
|
{'code': 'ZW', 'name': 'Zimbabwe', 'value': 12754378, 'color': layoutColors.danger}
|
||||||
|
];
|
||||||
|
|
||||||
|
let minBulletSize = 3
|
||||||
|
, maxBulletSize = 70
|
||||||
|
, min = Infinity
|
||||||
|
, max = -Infinity;
|
||||||
|
|
||||||
|
// get min and max values
|
||||||
|
for (var i = 0; i < mapData.length; i++) {
|
||||||
|
var value = mapData[i].value;
|
||||||
|
if (value < min) {
|
||||||
|
min = value;
|
||||||
|
}
|
||||||
|
if (value > max) {
|
||||||
|
max = value;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
var maxSquare = maxBulletSize * maxBulletSize * 2 * Math.PI;
|
||||||
|
var minSquare = minBulletSize * minBulletSize * 2 * Math.PI;
|
||||||
|
|
||||||
|
// create circle for each country
|
||||||
|
for (var i = 0; i < mapData.length; i++) {
|
||||||
|
var dataItem = mapData[i];
|
||||||
|
var value = dataItem.value;
|
||||||
|
// calculate size of a bubble
|
||||||
|
var square = (value - min) / (max - min) * (maxSquare - minSquare) + minSquare;
|
||||||
|
if (square < minSquare) {
|
||||||
|
square = minSquare;
|
||||||
|
}
|
||||||
|
var size = Math.sqrt(square / (Math.PI * 2));
|
||||||
|
var id = dataItem.code;
|
||||||
|
|
||||||
|
dataProvider.images.push({
|
||||||
|
type: 'circle',
|
||||||
|
width: size,
|
||||||
|
height: size,
|
||||||
|
color: dataItem.color,
|
||||||
|
longitude: latlong[id].longitude,
|
||||||
|
latitude: latlong[id].latitude,
|
||||||
|
title: dataItem.name,
|
||||||
|
value: value
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
return dataProvider;
|
||||||
|
}
|
||||||
|
}
|
||||||
1
src/app/pages/maps/components/bubbleMaps/index.ts
Normal file
1
src/app/pages/maps/components/bubbleMaps/index.ts
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
export * from './bubbleMaps.component';
|
||||||
|
|
@ -0,0 +1,29 @@
|
||||||
|
import {Component, ViewEncapsulation, ElementRef} from 'angular2/core';
|
||||||
|
import {BaCard} from '../../../../theme';
|
||||||
|
import {DOM} from "angular2/src/platform/dom/dom_adapter";
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'google-maps',
|
||||||
|
pipes: [],
|
||||||
|
providers: [],
|
||||||
|
styles: [require('./googleMaps.scss')],
|
||||||
|
directives: [BaCard],
|
||||||
|
template: require('./googleMaps.html'),
|
||||||
|
})
|
||||||
|
export class GoogleMaps {
|
||||||
|
|
||||||
|
constructor(private _elementRef:ElementRef) {
|
||||||
|
}
|
||||||
|
|
||||||
|
ngAfterViewInit() {
|
||||||
|
let el = DOM.querySelector(this._elementRef.nativeElement, '.google-maps');
|
||||||
|
|
||||||
|
GoogleMapsLoader.load((google) => {
|
||||||
|
new google.maps.Map(el, {
|
||||||
|
center: new google.maps.LatLng(44.5403, -78.5463),
|
||||||
|
zoom: 8,
|
||||||
|
mapTypeId: google.maps.MapTypeId.ROADMAP
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
3
src/app/pages/maps/components/googleMaps/googleMaps.html
Normal file
3
src/app/pages/maps/components/googleMaps/googleMaps.html
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
<ba-card title="Google Maps" baCardClass="popular-app medium-card" class="viewport100">
|
||||||
|
<div class="google-maps"></div>
|
||||||
|
</ba-card>
|
||||||
4
src/app/pages/maps/components/googleMaps/googleMaps.scss
Normal file
4
src/app/pages/maps/components/googleMaps/googleMaps.scss
Normal file
|
|
@ -0,0 +1,4 @@
|
||||||
|
.google-maps {
|
||||||
|
//TODO: hotfix
|
||||||
|
height: 320px;
|
||||||
|
}
|
||||||
1
src/app/pages/maps/components/googleMaps/index.ts
Normal file
1
src/app/pages/maps/components/googleMaps/index.ts
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
export * from './googleMaps.component';
|
||||||
1
src/app/pages/maps/components/leafletMaps/index.ts
Normal file
1
src/app/pages/maps/components/leafletMaps/index.ts
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
export * from './leafletMaps.component';
|
||||||
|
|
@ -0,0 +1,33 @@
|
||||||
|
import {Component, ViewEncapsulation, ElementRef} from 'angular2/core';
|
||||||
|
import {BaCard} from '../../../../theme';
|
||||||
|
import {DOM} from "angular2/src/platform/dom/dom_adapter";
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'leaflet-maps',
|
||||||
|
pipes: [],
|
||||||
|
providers: [],
|
||||||
|
// otherwise maps won't work
|
||||||
|
encapsulation: ViewEncapsulation.None,
|
||||||
|
styles: [require('leaflet/dist/leaflet.css'), require('./leafletMaps.scss')],
|
||||||
|
directives: [BaCard],
|
||||||
|
template: require('./leafletMaps.html'),
|
||||||
|
})
|
||||||
|
export class LeafletMaps {
|
||||||
|
|
||||||
|
constructor(private _elementRef:ElementRef) {
|
||||||
|
}
|
||||||
|
|
||||||
|
ngAfterViewInit() {
|
||||||
|
let el = DOM.querySelector(this._elementRef.nativeElement, '.leaflet-maps');
|
||||||
|
|
||||||
|
L.Icon.Default.imagePath = 'assets/img/theme/vendor/leaflet';
|
||||||
|
var map = L.map(el).setView([51.505, -0.09], 13);
|
||||||
|
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
|
||||||
|
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
|
||||||
|
}).addTo(map);
|
||||||
|
|
||||||
|
L.marker([51.5, -0.09]).addTo(map)
|
||||||
|
.bindPopup('A pretty CSS3 popup.<br> Easily customizable.')
|
||||||
|
.openPopup();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
<ba-card title="Leaflet Maps" baCardClass="popular-app medium-card" class="viewport100">
|
||||||
|
<div class="leaflet-maps"></div>
|
||||||
|
</ba-card>
|
||||||
|
|
@ -0,0 +1,4 @@
|
||||||
|
.leaflet-maps {
|
||||||
|
//TODO: hotfix
|
||||||
|
height: 320px;
|
||||||
|
}
|
||||||
1
src/app/pages/maps/components/lineMaps/index.ts
Normal file
1
src/app/pages/maps/components/lineMaps/index.ts
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
export * from './lineMaps.component';
|
||||||
55
src/app/pages/maps/components/lineMaps/lineMaps.component.ts
Normal file
55
src/app/pages/maps/components/lineMaps/lineMaps.component.ts
Normal file
|
|
@ -0,0 +1,55 @@
|
||||||
|
import {Component, ViewEncapsulation} from 'angular2/core';
|
||||||
|
import {BaCard} from '../../../../theme';
|
||||||
|
|
||||||
|
import {layoutColors, layoutPaths} from "../../../../theme/theme.constants";
|
||||||
|
import {LineMapsService} from "./lineMaps.service";
|
||||||
|
|
||||||
|
require('ammap3');
|
||||||
|
require('ammap3/ammap/maps/js/worldLow');
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'line-maps',
|
||||||
|
pipes: [],
|
||||||
|
providers: [LineMapsService],
|
||||||
|
// otherwise maps won't work
|
||||||
|
encapsulation: ViewEncapsulation.None,
|
||||||
|
styles: [require('ammap3/ammap/ammap.css'), require('./lineMaps.scss')],
|
||||||
|
directives: [BaCard],
|
||||||
|
template: require('./lineMaps.html'),
|
||||||
|
})
|
||||||
|
export class LineMaps {
|
||||||
|
|
||||||
|
constructor(private _lineMapsService:LineMapsService) {
|
||||||
|
}
|
||||||
|
|
||||||
|
ngAfterViewInit() {
|
||||||
|
|
||||||
|
var map = AmCharts.makeChart('map-lines', {
|
||||||
|
type: 'map',
|
||||||
|
theme: this._lineMapsService.getTheme(),
|
||||||
|
dataProvider: this._lineMapsService.getDataProvider(),
|
||||||
|
|
||||||
|
areasSettings: {
|
||||||
|
unlistedAreasColor: layoutColors.info
|
||||||
|
},
|
||||||
|
|
||||||
|
imagesSettings: {
|
||||||
|
color: layoutColors.warningBg,
|
||||||
|
selectedColor: layoutColors.warning
|
||||||
|
},
|
||||||
|
|
||||||
|
linesSettings: {
|
||||||
|
color: layoutColors.warningBg,
|
||||||
|
alpha: 0.8
|
||||||
|
},
|
||||||
|
|
||||||
|
backgroundZoomsToTop: true,
|
||||||
|
linesAboveImages: true,
|
||||||
|
|
||||||
|
export: {
|
||||||
|
'enabled': true
|
||||||
|
},
|
||||||
|
pathToImages: layoutPaths.images.amMap
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
4
src/app/pages/maps/components/lineMaps/lineMaps.html
Normal file
4
src/app/pages/maps/components/lineMaps/lineMaps.html
Normal file
|
|
@ -0,0 +1,4 @@
|
||||||
|
<ba-card title="Line Maps" baCardClass="medium-card" class="viewport100">
|
||||||
|
<div id="map-lines" class="line-maps"></div>
|
||||||
|
</ba-card>
|
||||||
|
|
||||||
4
src/app/pages/maps/components/lineMaps/lineMaps.scss
Normal file
4
src/app/pages/maps/components/lineMaps/lineMaps.scss
Normal file
|
|
@ -0,0 +1,4 @@
|
||||||
|
.line-maps {
|
||||||
|
//TODO: hotfix
|
||||||
|
height: 320px;
|
||||||
|
}
|
||||||
444
src/app/pages/maps/components/lineMaps/lineMaps.service.ts
Normal file
444
src/app/pages/maps/components/lineMaps/lineMaps.service.ts
Normal file
|
|
@ -0,0 +1,444 @@
|
||||||
|
import {Injectable} from 'angular2/core';
|
||||||
|
import {layoutColors} from "../../../../theme/theme.constants";
|
||||||
|
|
||||||
|
@Injectable()
|
||||||
|
export class LineMapsService {
|
||||||
|
|
||||||
|
theme = {
|
||||||
|
|
||||||
|
themeName: "blur",
|
||||||
|
|
||||||
|
AmChart: {
|
||||||
|
color: layoutColors.defaultText,
|
||||||
|
backgroundColor: "#FFFFFF"
|
||||||
|
},
|
||||||
|
|
||||||
|
AmCoordinateChart: {
|
||||||
|
colors: [layoutColors.primary, layoutColors.danger, layoutColors.warning, layoutColors.success, layoutColors.info, layoutColors.default, layoutColors.primaryDark, layoutColors.warningLight, layoutColors.successDark, layoutColors.successLight, layoutColors.successBg]
|
||||||
|
},
|
||||||
|
|
||||||
|
AmStockChart: {
|
||||||
|
colors: [layoutColors.primary, layoutColors.danger, layoutColors.warning, layoutColors.success, layoutColors.info, layoutColors.default, layoutColors.primaryDark, layoutColors.warningLight, layoutColors.successDark, layoutColors.successLight, layoutColors.successBg]
|
||||||
|
},
|
||||||
|
|
||||||
|
AmSlicedChart: {
|
||||||
|
colors: [layoutColors.primary, layoutColors.danger, layoutColors.warning, layoutColors.success, layoutColors.info, layoutColors.default, layoutColors.primaryDark, layoutColors.warningLight, layoutColors.successDark, layoutColors.successLight, layoutColors.successBg],
|
||||||
|
labelTickColor: "#FFFFFF",
|
||||||
|
labelTickAlpha: 0.3
|
||||||
|
},
|
||||||
|
|
||||||
|
AmRectangularChart: {
|
||||||
|
zoomOutButtonColor: '#FFFFFF',
|
||||||
|
zoomOutButtonRollOverAlpha: 0.15,
|
||||||
|
zoomOutButtonImage: "lens.png"
|
||||||
|
},
|
||||||
|
|
||||||
|
AxisBase: {
|
||||||
|
axisColor: "#FFFFFF",
|
||||||
|
axisAlpha: 0.3,
|
||||||
|
gridAlpha: 0.1,
|
||||||
|
gridColor: "#FFFFFF"
|
||||||
|
},
|
||||||
|
|
||||||
|
ChartScrollbar: {
|
||||||
|
backgroundColor: "#FFFFFF",
|
||||||
|
backgroundAlpha: 0.12,
|
||||||
|
graphFillAlpha: 0.5,
|
||||||
|
graphLineAlpha: 0,
|
||||||
|
selectedBackgroundColor: "#FFFFFF",
|
||||||
|
selectedBackgroundAlpha: 0.4,
|
||||||
|
gridAlpha: 0.15
|
||||||
|
},
|
||||||
|
|
||||||
|
ChartCursor: {
|
||||||
|
cursorColor: layoutColors.primary,
|
||||||
|
color: "#FFFFFF",
|
||||||
|
cursorAlpha: 0.5
|
||||||
|
},
|
||||||
|
|
||||||
|
AmLegend: {
|
||||||
|
color: "#FFFFFF"
|
||||||
|
},
|
||||||
|
|
||||||
|
AmGraph: {
|
||||||
|
lineAlpha: 0.9
|
||||||
|
},
|
||||||
|
GaugeArrow: {
|
||||||
|
color: "#FFFFFF",
|
||||||
|
alpha: 0.8,
|
||||||
|
nailAlpha: 0,
|
||||||
|
innerRadius: "40%",
|
||||||
|
nailRadius: 15,
|
||||||
|
startWidth: 15,
|
||||||
|
borderAlpha: 0.8,
|
||||||
|
nailBorderAlpha: 0
|
||||||
|
},
|
||||||
|
|
||||||
|
GaugeAxis: {
|
||||||
|
tickColor: "#FFFFFF",
|
||||||
|
tickAlpha: 1,
|
||||||
|
tickLength: 15,
|
||||||
|
minorTickLength: 8,
|
||||||
|
axisThickness: 3,
|
||||||
|
axisColor: '#FFFFFF',
|
||||||
|
axisAlpha: 1,
|
||||||
|
bandAlpha: 0.8
|
||||||
|
},
|
||||||
|
|
||||||
|
TrendLine: {
|
||||||
|
lineColor: layoutColors.danger,
|
||||||
|
lineAlpha: 0.8
|
||||||
|
},
|
||||||
|
|
||||||
|
// ammap
|
||||||
|
AreasSettings: {
|
||||||
|
alpha: 0.8,
|
||||||
|
color: layoutColors.info,
|
||||||
|
colorSolid: layoutColors.primaryDark,
|
||||||
|
unlistedAreasAlpha: 0.4,
|
||||||
|
unlistedAreasColor: "#FFFFFF",
|
||||||
|
outlineColor: "#FFFFFF",
|
||||||
|
outlineAlpha: 0.5,
|
||||||
|
outlineThickness: 0.5,
|
||||||
|
rollOverColor: layoutColors.primary,
|
||||||
|
rollOverOutlineColor: "#FFFFFF",
|
||||||
|
selectedOutlineColor: "#FFFFFF",
|
||||||
|
selectedColor: "#f15135",
|
||||||
|
unlistedAreasOutlineColor: "#FFFFFF",
|
||||||
|
unlistedAreasOutlineAlpha: 0.5
|
||||||
|
},
|
||||||
|
|
||||||
|
LinesSettings: {
|
||||||
|
color: "#FFFFFF",
|
||||||
|
alpha: 0.8
|
||||||
|
},
|
||||||
|
|
||||||
|
ImagesSettings: {
|
||||||
|
alpha: 0.8,
|
||||||
|
labelColor: "#FFFFFF",
|
||||||
|
color: "#FFFFFF",
|
||||||
|
labelRollOverColor: layoutColors.primaryDark
|
||||||
|
},
|
||||||
|
|
||||||
|
ZoomControl: {
|
||||||
|
buttonFillAlpha: 0.8,
|
||||||
|
buttonIconColor: layoutColors.default,
|
||||||
|
buttonRollOverColor: layoutColors.danger,
|
||||||
|
buttonFillColor: layoutColors.primaryDark,
|
||||||
|
buttonBorderColor: layoutColors.primaryDark,
|
||||||
|
buttonBorderAlpha: 0,
|
||||||
|
buttonCornerRadius: 0,
|
||||||
|
gridColor: "#FFFFFF",
|
||||||
|
gridBackgroundColor: "#FFFFFF",
|
||||||
|
buttonIconAlpha: 0.6,
|
||||||
|
gridAlpha: 0.6,
|
||||||
|
buttonSize: 20
|
||||||
|
},
|
||||||
|
|
||||||
|
SmallMap: {
|
||||||
|
mapColor: "#000000",
|
||||||
|
rectangleColor: layoutColors.danger,
|
||||||
|
backgroundColor: "#FFFFFF",
|
||||||
|
backgroundAlpha: 0.7,
|
||||||
|
borderThickness: 1,
|
||||||
|
borderAlpha: 0.8
|
||||||
|
},
|
||||||
|
|
||||||
|
// the defaults below are set using CSS syntax, you can use any existing css property
|
||||||
|
// if you don't use Stock chart, you can delete lines below
|
||||||
|
PeriodSelector: {
|
||||||
|
color: "#FFFFFF"
|
||||||
|
},
|
||||||
|
|
||||||
|
PeriodButton: {
|
||||||
|
color: "#FFFFFF",
|
||||||
|
background: "transparent",
|
||||||
|
opacity: 0.7,
|
||||||
|
border: "1px solid rgba(0, 0, 0, .3)",
|
||||||
|
MozBorderRadius: "5px",
|
||||||
|
borderRadius: "5px",
|
||||||
|
margin: "1px",
|
||||||
|
outline: "none",
|
||||||
|
boxSizing: "border-box"
|
||||||
|
},
|
||||||
|
|
||||||
|
PeriodButtonSelected: {
|
||||||
|
color: "#FFFFFF",
|
||||||
|
backgroundColor: "#b9cdf5",
|
||||||
|
border: "1px solid rgba(0, 0, 0, .3)",
|
||||||
|
MozBorderRadius: "5px",
|
||||||
|
borderRadius: "5px",
|
||||||
|
margin: "1px",
|
||||||
|
outline: "none",
|
||||||
|
opacity: 1,
|
||||||
|
boxSizing: "border-box"
|
||||||
|
},
|
||||||
|
|
||||||
|
PeriodInputField: {
|
||||||
|
color: "#FFFFFF",
|
||||||
|
background: "transparent",
|
||||||
|
border: "1px solid rgba(0, 0, 0, .3)",
|
||||||
|
outline: "none"
|
||||||
|
},
|
||||||
|
|
||||||
|
DataSetSelector: {
|
||||||
|
color: "#FFFFFF",
|
||||||
|
selectedBackgroundColor: "#b9cdf5",
|
||||||
|
rollOverBackgroundColor: "#a8b0e4"
|
||||||
|
},
|
||||||
|
|
||||||
|
DataSetCompareList: {
|
||||||
|
color: "#FFFFFF",
|
||||||
|
lineHeight: "100%",
|
||||||
|
boxSizing: "initial",
|
||||||
|
webkitBoxSizing: "initial",
|
||||||
|
border: "1px solid rgba(0, 0, 0, .3)"
|
||||||
|
},
|
||||||
|
|
||||||
|
DataSetSelect: {
|
||||||
|
border: "1px solid rgba(0, 0, 0, .3)",
|
||||||
|
outline: "none"
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
getTheme() {
|
||||||
|
return this.theme;
|
||||||
|
}
|
||||||
|
|
||||||
|
getDataProvider() {
|
||||||
|
|
||||||
|
// svg path for target icon
|
||||||
|
let targetSVG = 'M9,0C4.029,0,0,4.029,0,9s4.029,9,9,9s9-4.029,9-9S13.971,0,9,0z M9,15.93 c-3.83,0-6.93-3.1-6.93-6.93S5.17,2.07,9,2.07s6.93,3.1,6.93,6.93S12.83,15.93,9,15.93 M12.5,9c0,1.933-1.567,3.5-3.5,3.5S5.5,10.933,5.5,9S7.067,5.5,9,5.5 S12.5,7.067,12.5,9z';
|
||||||
|
// svg path for plane icon
|
||||||
|
let planeSVG = 'M19.671,8.11l-2.777,2.777l-3.837-0.861c0.362-0.505,0.916-1.683,0.464-2.135c-0.518-0.517-1.979,0.278-2.305,0.604l-0.913,0.913L7.614,8.804l-2.021,2.021l2.232,1.061l-0.082,0.082l1.701,1.701l0.688-0.687l3.164,1.504L9.571,18.21H6.413l-1.137,1.138l3.6,0.948l1.83,1.83l0.947,3.598l1.137-1.137V21.43l3.725-3.725l1.504,3.164l-0.687,0.687l1.702,1.701l0.081-0.081l1.062,2.231l2.02-2.02l-0.604-2.689l0.912-0.912c0.326-0.326,1.121-1.789,0.604-2.306c-0.452-0.452-1.63,0.101-2.135,0.464l-0.861-3.838l2.777-2.777c0.947-0.947,3.599-4.862,2.62-5.839C24.533,4.512,20.618,7.163,19.671,8.11z';
|
||||||
|
|
||||||
|
return {
|
||||||
|
map: 'worldLow',
|
||||||
|
linkToObject: 'london',
|
||||||
|
images: [ {
|
||||||
|
id: 'london',
|
||||||
|
svgPath: targetSVG,
|
||||||
|
title: 'London',
|
||||||
|
latitude: 51.5002,
|
||||||
|
longitude: -0.1262,
|
||||||
|
scale: 1.5,
|
||||||
|
zoomLevel: 2.74,
|
||||||
|
zoomLongitude: -20.1341,
|
||||||
|
zoomLatitude: 49.1712,
|
||||||
|
|
||||||
|
lines: [ {
|
||||||
|
latitudes: [ 51.5002, 50.4422 ],
|
||||||
|
longitudes: [ -0.1262, 30.5367 ]
|
||||||
|
}, {
|
||||||
|
latitudes: [ 51.5002, 46.9480 ],
|
||||||
|
longitudes: [ -0.1262, 7.4481 ]
|
||||||
|
}, {
|
||||||
|
latitudes: [ 51.5002, 59.3328 ],
|
||||||
|
longitudes: [ -0.1262, 18.0645 ]
|
||||||
|
}, {
|
||||||
|
latitudes: [ 51.5002, 40.4167 ],
|
||||||
|
longitudes: [ -0.1262, -3.7033 ]
|
||||||
|
}, {
|
||||||
|
latitudes: [ 51.5002, 46.0514 ],
|
||||||
|
longitudes: [ -0.1262, 14.5060 ]
|
||||||
|
}, {
|
||||||
|
latitudes: [ 51.5002, 48.2116 ],
|
||||||
|
longitudes: [ -0.1262, 17.1547 ]
|
||||||
|
}, {
|
||||||
|
latitudes: [ 51.5002, 44.8048 ],
|
||||||
|
longitudes: [ -0.1262, 20.4781 ]
|
||||||
|
}, {
|
||||||
|
latitudes: [ 51.5002, 55.7558 ],
|
||||||
|
longitudes: [ -0.1262, 37.6176 ]
|
||||||
|
}, {
|
||||||
|
latitudes: [ 51.5002, 38.7072 ],
|
||||||
|
longitudes: [ -0.1262, -9.1355 ]
|
||||||
|
}, {
|
||||||
|
latitudes: [ 51.5002, 54.6896 ],
|
||||||
|
longitudes: [ -0.1262, 25.2799 ]
|
||||||
|
}, {
|
||||||
|
latitudes: [ 51.5002, 64.1353 ],
|
||||||
|
longitudes: [ -0.1262, -21.8952 ]
|
||||||
|
}, {
|
||||||
|
latitudes: [ 51.5002, 40.4300 ],
|
||||||
|
longitudes: [ -0.1262, -74.0000 ]
|
||||||
|
} ],
|
||||||
|
|
||||||
|
images: [ {
|
||||||
|
label: 'Flights from London',
|
||||||
|
svgPath: planeSVG,
|
||||||
|
left: 100,
|
||||||
|
top: 45,
|
||||||
|
labelShiftY: 5,
|
||||||
|
labelShiftX: 5,
|
||||||
|
color: layoutColors.default,
|
||||||
|
labelColor: layoutColors.default,
|
||||||
|
labelRollOverColor: layoutColors.default,
|
||||||
|
labelFontSize: 20
|
||||||
|
}, {
|
||||||
|
label: 'show flights from Vilnius',
|
||||||
|
left: 106,
|
||||||
|
top: 70,
|
||||||
|
labelColor: layoutColors.default,
|
||||||
|
labelRollOverColor: layoutColors.default,
|
||||||
|
labelFontSize: 11,
|
||||||
|
linkToObject: 'vilnius'
|
||||||
|
} ]
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
id: 'vilnius',
|
||||||
|
svgPath: targetSVG,
|
||||||
|
title: 'Vilnius',
|
||||||
|
latitude: 54.6896,
|
||||||
|
longitude: 25.2799,
|
||||||
|
scale: 1.5,
|
||||||
|
zoomLevel: 4.92,
|
||||||
|
zoomLongitude: 15.4492,
|
||||||
|
zoomLatitude: 50.2631,
|
||||||
|
|
||||||
|
lines: [ {
|
||||||
|
latitudes: [ 54.6896, 50.8371 ],
|
||||||
|
longitudes: [ 25.2799, 4.3676 ]
|
||||||
|
}, {
|
||||||
|
latitudes: [ 54.6896, 59.9138 ],
|
||||||
|
longitudes: [ 25.2799, 10.7387 ]
|
||||||
|
}, {
|
||||||
|
latitudes: [ 54.6896, 40.4167 ],
|
||||||
|
longitudes: [ 25.2799, -3.7033 ]
|
||||||
|
}, {
|
||||||
|
latitudes: [ 54.6896, 50.0878 ],
|
||||||
|
longitudes: [ 25.2799, 14.4205 ]
|
||||||
|
}, {
|
||||||
|
latitudes: [ 54.6896, 48.2116 ],
|
||||||
|
longitudes: [ 25.2799, 17.1547 ]
|
||||||
|
}, {
|
||||||
|
latitudes: [ 54.6896, 44.8048 ],
|
||||||
|
longitudes: [ 25.2799, 20.4781 ]
|
||||||
|
}, {
|
||||||
|
latitudes: [ 54.6896, 55.7558 ],
|
||||||
|
longitudes: [ 25.2799, 37.6176 ]
|
||||||
|
}, {
|
||||||
|
latitudes: [ 54.6896, 37.9792 ],
|
||||||
|
longitudes: [ 25.2799, 23.7166 ]
|
||||||
|
}, {
|
||||||
|
latitudes: [ 54.6896, 54.6896 ],
|
||||||
|
longitudes: [ 25.2799, 25.2799 ]
|
||||||
|
}, {
|
||||||
|
latitudes: [ 54.6896, 51.5002 ],
|
||||||
|
longitudes: [ 25.2799, -0.1262 ]
|
||||||
|
}, {
|
||||||
|
latitudes: [ 54.6896, 53.3441 ],
|
||||||
|
longitudes: [ 25.2799, -6.2675 ]
|
||||||
|
} ],
|
||||||
|
|
||||||
|
images: [ {
|
||||||
|
label: 'Flights from Vilnius',
|
||||||
|
svgPath: planeSVG,
|
||||||
|
left: 100,
|
||||||
|
top: 45,
|
||||||
|
labelShiftY: 5,
|
||||||
|
labelShiftX: 5,
|
||||||
|
color: layoutColors.default,
|
||||||
|
labelColor: layoutColors.default,
|
||||||
|
labelRollOverColor: layoutColors.default,
|
||||||
|
labelFontSize: 20
|
||||||
|
}, {
|
||||||
|
label: 'show flights from London',
|
||||||
|
left: 106,
|
||||||
|
top: 70,
|
||||||
|
labelColor: layoutColors.default,
|
||||||
|
labelRollOverColor: layoutColors.default,
|
||||||
|
labelFontSize: 11,
|
||||||
|
linkToObject: 'london'
|
||||||
|
} ]
|
||||||
|
}, {
|
||||||
|
svgPath: targetSVG,
|
||||||
|
title: 'Brussels',
|
||||||
|
latitude: 50.8371,
|
||||||
|
longitude: 4.3676
|
||||||
|
}, {
|
||||||
|
svgPath: targetSVG,
|
||||||
|
title: 'Prague',
|
||||||
|
latitude: 50.0878,
|
||||||
|
longitude: 14.4205
|
||||||
|
}, {
|
||||||
|
svgPath: targetSVG,
|
||||||
|
title: 'Athens',
|
||||||
|
latitude: 37.9792,
|
||||||
|
longitude: 23.7166
|
||||||
|
}, {
|
||||||
|
svgPath: targetSVG,
|
||||||
|
title: 'Reykjavik',
|
||||||
|
latitude: 64.1353,
|
||||||
|
longitude: -21.8952
|
||||||
|
}, {
|
||||||
|
svgPath: targetSVG,
|
||||||
|
title: 'Dublin',
|
||||||
|
latitude: 53.3441,
|
||||||
|
longitude: -6.2675
|
||||||
|
}, {
|
||||||
|
svgPath: targetSVG,
|
||||||
|
title: 'Oslo',
|
||||||
|
latitude: 59.9138,
|
||||||
|
longitude: 10.7387
|
||||||
|
}, {
|
||||||
|
svgPath: targetSVG,
|
||||||
|
title: 'Lisbon',
|
||||||
|
latitude: 38.7072,
|
||||||
|
longitude: -9.1355
|
||||||
|
}, {
|
||||||
|
svgPath: targetSVG,
|
||||||
|
title: 'Moscow',
|
||||||
|
latitude: 55.7558,
|
||||||
|
longitude: 37.6176
|
||||||
|
}, {
|
||||||
|
svgPath: targetSVG,
|
||||||
|
title: 'Belgrade',
|
||||||
|
latitude: 44.8048,
|
||||||
|
longitude: 20.4781
|
||||||
|
}, {
|
||||||
|
svgPath: targetSVG,
|
||||||
|
title: 'Bratislava',
|
||||||
|
latitude: 48.2116,
|
||||||
|
longitude: 17.1547
|
||||||
|
}, {
|
||||||
|
svgPath: targetSVG,
|
||||||
|
title: 'Ljubljana',
|
||||||
|
latitude: 46.0514,
|
||||||
|
longitude: 14.5060
|
||||||
|
}, {
|
||||||
|
svgPath: targetSVG,
|
||||||
|
title: 'Madrid',
|
||||||
|
latitude: 40.4167,
|
||||||
|
longitude: -3.7033
|
||||||
|
}, {
|
||||||
|
svgPath: targetSVG,
|
||||||
|
title: 'Stockholm',
|
||||||
|
latitude: 59.3328,
|
||||||
|
longitude: 18.0645
|
||||||
|
}, {
|
||||||
|
svgPath: targetSVG,
|
||||||
|
title: 'Bern',
|
||||||
|
latitude: 46.9480,
|
||||||
|
longitude: 7.4481
|
||||||
|
}, {
|
||||||
|
svgPath: targetSVG,
|
||||||
|
title: 'Kiev',
|
||||||
|
latitude: 50.4422,
|
||||||
|
longitude: 30.5367
|
||||||
|
}, {
|
||||||
|
svgPath: targetSVG,
|
||||||
|
title: 'Paris',
|
||||||
|
latitude: 48.8567,
|
||||||
|
longitude: 2.3510
|
||||||
|
}, {
|
||||||
|
svgPath: targetSVG,
|
||||||
|
title: 'New York',
|
||||||
|
latitude: 40.43,
|
||||||
|
longitude: -74
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
1
src/app/pages/maps/index.ts
Normal file
1
src/app/pages/maps/index.ts
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
export * from './maps.component';
|
||||||
47
src/app/pages/maps/maps.component.ts
Normal file
47
src/app/pages/maps/maps.component.ts
Normal file
|
|
@ -0,0 +1,47 @@
|
||||||
|
import {Component, ViewEncapsulation} from 'angular2/core';
|
||||||
|
import {RouteConfig} from 'angular2/router';
|
||||||
|
|
||||||
|
import {GoogleMaps} from './components/googleMaps';
|
||||||
|
import {LeafletMaps} from "./components/leafletMaps";
|
||||||
|
import {BubbleMaps} from "./components/bubbleMaps";
|
||||||
|
import {LineMaps} from "./components/lineMaps";
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'maps',
|
||||||
|
pipes: [],
|
||||||
|
providers: [],
|
||||||
|
styles: [],
|
||||||
|
template: `<router-outlet></router-outlet>`
|
||||||
|
})
|
||||||
|
@RouteConfig([
|
||||||
|
{
|
||||||
|
name: 'GoogleMaps',
|
||||||
|
component: GoogleMaps,
|
||||||
|
path: '/google-maps',
|
||||||
|
useAsDefault: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'LeafletMaps',
|
||||||
|
component: LeafletMaps,
|
||||||
|
path: '/leaflet-maps',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'BubbleMaps',
|
||||||
|
component: BubbleMaps,
|
||||||
|
path: '/bubble-maps',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'LineMaps',
|
||||||
|
component: LineMaps,
|
||||||
|
path: '/line-maps',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
export class Maps {
|
||||||
|
|
||||||
|
constructor() {
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnInit() {
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
@ -1,15 +1,17 @@
|
||||||
import {Component, ViewEncapsulation} from 'angular2/core';
|
import {Component, ViewEncapsulation} from 'angular2/core';
|
||||||
import {RouteConfig, Router} from 'angular2/router';
|
import {RouteConfig, Router} from 'angular2/router';
|
||||||
|
|
||||||
|
import {PageTop, ContentTop, Sidebar} from '../theme';
|
||||||
import {Dashboard} from './dashboard';
|
import {Dashboard} from './dashboard';
|
||||||
import {Ui} from './ui';
|
import {Ui} from './ui';
|
||||||
import {PageTop, Sidebar} from '../theme';
|
import {Maps} from './maps';
|
||||||
|
import {Charts} from './charts';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'pages',
|
selector: 'pages',
|
||||||
encapsulation: ViewEncapsulation.None,
|
encapsulation: ViewEncapsulation.None,
|
||||||
styles: [],
|
styles: [],
|
||||||
directives: [PageTop, Sidebar],
|
directives: [PageTop, Sidebar, ContentTop],
|
||||||
template: `
|
template: `
|
||||||
<sidebar></sidebar>
|
<sidebar></sidebar>
|
||||||
<page-top></page-top>
|
<page-top></page-top>
|
||||||
|
|
@ -32,6 +34,16 @@ import {PageTop, Sidebar} from '../theme';
|
||||||
component: Ui,
|
component: Ui,
|
||||||
path: '/ui/...',
|
path: '/ui/...',
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
name: 'Maps',
|
||||||
|
component: Maps,
|
||||||
|
path: '/maps/...',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Charts',
|
||||||
|
component: Charts,
|
||||||
|
path: '/charts/...',
|
||||||
|
},
|
||||||
])
|
])
|
||||||
export class Pages {
|
export class Pages {
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -5,7 +5,7 @@ import {Component, ViewEncapsulation} from 'angular2/core';
|
||||||
pipes: [],
|
pipes: [],
|
||||||
providers: [],
|
providers: [],
|
||||||
styles: [],
|
styles: [],
|
||||||
template: 'typography'
|
template: require('./typography.html'),
|
||||||
})
|
})
|
||||||
export class Typography {
|
export class Typography {
|
||||||
|
|
||||||
|
|
|
||||||
1
src/app/pages/ui/components/typography/typography.html
Normal file
1
src/app/pages/ui/components/typography/typography.html
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
hello
|
||||||
|
|
@ -15,15 +15,7 @@ import {Typography} from './components/typography';
|
||||||
name: 'Typography',
|
name: 'Typography',
|
||||||
component: Typography,
|
component: Typography,
|
||||||
path: '/typography',
|
path: '/typography',
|
||||||
useAsDefault: true,
|
useAsDefault: true
|
||||||
data: {
|
|
||||||
title: 'Typography',
|
|
||||||
selected: false,
|
|
||||||
expanded: false,
|
|
||||||
sidebarMeta: {
|
|
||||||
order: 0,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
])
|
])
|
||||||
export class Ui {
|
export class Ui {
|
||||||
|
|
|
||||||
25
src/app/theme/contentTop/contentTop.component.ts
Normal file
25
src/app/theme/contentTop/contentTop.component.ts
Normal file
|
|
@ -0,0 +1,25 @@
|
||||||
|
import {Component, ViewEncapsulation} from 'angular2/core';
|
||||||
|
|
||||||
|
import {ThemeGlobal} from "../theme.global";
|
||||||
|
import {Subscription} from "rxjs/Subscription";
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'content-top',
|
||||||
|
styles: [require('./contentTop.scss')],
|
||||||
|
template: require('./contentTop.html'),
|
||||||
|
})
|
||||||
|
export class ContentTop {
|
||||||
|
activePageTitle = '';
|
||||||
|
private _themeGlobalSubscription:Subscription;
|
||||||
|
|
||||||
|
constructor(private _themeGlobal:ThemeGlobal) {
|
||||||
|
this._themeGlobalSubscription = this._themeGlobal.getDataStream().subscribe((data) => {
|
||||||
|
this.activePageTitle = data['menu.activeLink'] != null ? data['menu.activeLink'].title : this.activePageTitle;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnDestroy() {
|
||||||
|
// prevent memory leak when component destroyed
|
||||||
|
this._themeGlobalSubscription.unsubscribe();
|
||||||
|
}
|
||||||
|
}
|
||||||
9
src/app/theme/contentTop/contentTop.html
Normal file
9
src/app/theme/contentTop/contentTop.html
Normal file
|
|
@ -0,0 +1,9 @@
|
||||||
|
<div class="content-top clearfix">
|
||||||
|
<h1 class="al-title">{{ activePageTitle }}</h1>
|
||||||
|
|
||||||
|
<ul class="breadcrumb al-breadcrumb">
|
||||||
|
<li>
|
||||||
|
<a href="#/dashboard">Home</a></li>
|
||||||
|
<li>{{ activePageTitle }}</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
40
src/app/theme/contentTop/contentTop.scss
Normal file
40
src/app/theme/contentTop/contentTop.scss
Normal file
|
|
@ -0,0 +1,40 @@
|
||||||
|
@import '../sass/conf/conf';
|
||||||
|
|
||||||
|
.content-top {
|
||||||
|
padding-top: 13px;
|
||||||
|
padding-bottom: 27px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1.al-title {
|
||||||
|
font-weight: $font-bold;
|
||||||
|
color: #ffffff;
|
||||||
|
float: left;
|
||||||
|
width: auto;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
font-size: 24px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
opacity: 0.9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.al-breadcrumb {
|
||||||
|
background: none;
|
||||||
|
color: #ffffff;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
float: right;
|
||||||
|
padding-top: 11px;
|
||||||
|
li {
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: $font-light;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.al-look {
|
||||||
|
float: right;
|
||||||
|
margin-right: 10px;
|
||||||
|
padding-top: 10px;
|
||||||
|
> a {
|
||||||
|
font-size: 19px;
|
||||||
|
}
|
||||||
|
}
|
||||||
1
src/app/theme/contentTop/index.ts
Normal file
1
src/app/theme/contentTop/index.ts
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
export * from './contentTop.component';
|
||||||
|
|
@ -1,4 +1,5 @@
|
||||||
export * from './pageTop';
|
export * from './pageTop';
|
||||||
export * from './msgCenter';
|
export * from './msgCenter';
|
||||||
export * from './sidebar';
|
export * from './sidebar';
|
||||||
|
export * from './contentTop';
|
||||||
export * from './baCard';
|
export * from './baCard';
|
||||||
|
|
|
||||||
|
|
@ -1,10 +1,9 @@
|
||||||
import {Component, ViewEncapsulation} from 'angular2/core';
|
import {Component, ViewEncapsulation} from 'angular2/core';
|
||||||
import {Subscription} from 'rxjs/Subscription';
|
|
||||||
|
|
||||||
import {MsgCenter} from '../msgCenter';
|
import {MsgCenter} from '../msgCenter';
|
||||||
import {ProfilePicturePipe} from '../pipes/image/profile-picture.pipe';
|
import {ProfilePicturePipe} from '../pipes/image/profile-picture.pipe';
|
||||||
import {ScrollPosition} from '../directives/scrollPosition.directive';
|
import {ScrollPosition} from '../directives/scrollPosition.directive';
|
||||||
import {SidebarStateService} from '../sidebar/sidebarState.service'
|
import {ThemeGlobal} from "../theme.global";
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'page-top',
|
selector: 'page-top',
|
||||||
|
|
@ -17,15 +16,14 @@ export class PageTop {
|
||||||
isScrolled:Boolean = false;
|
isScrolled:Boolean = false;
|
||||||
isMenuCollapsed:boolean = false;
|
isMenuCollapsed:boolean = false;
|
||||||
|
|
||||||
private _sidebarStateSubscription:Subscription;
|
|
||||||
|
|
||||||
constructor(private _sidebarStateService:SidebarStateService) {
|
constructor(private _themeGlobal:ThemeGlobal) {
|
||||||
this._sidebarStateSubscription = this._sidebarStateService.getStateStream().subscribe((isCollapsed) => this.isMenuCollapsed = isCollapsed);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
toggleMenu() {
|
toggleMenu() {
|
||||||
this.isMenuCollapsed = !this.isMenuCollapsed;
|
this.isMenuCollapsed = !this.isMenuCollapsed;
|
||||||
this._sidebarStateService.stateChanged(this.isMenuCollapsed);
|
this._themeGlobal.setData('menu.isCollapsed', this.isMenuCollapsed);
|
||||||
}
|
}
|
||||||
|
|
||||||
scrolledChanged(isScrolled) {
|
scrolledChanged(isScrolled) {
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,7 @@ import {Router} from 'angular2/router';
|
||||||
|
|
||||||
import {layoutSizes} from '../theme.constants';
|
import {layoutSizes} from '../theme.constants';
|
||||||
import {SidebarService} from './sidebar.service';
|
import {SidebarService} from './sidebar.service';
|
||||||
import {SidebarStateService} from './sidebarState.service';
|
import {ThemeGlobal} from "../theme.global";
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'sidebar',
|
selector: 'sidebar',
|
||||||
|
|
@ -31,7 +31,7 @@ export class Sidebar {
|
||||||
constructor(private _elementRef:ElementRef,
|
constructor(private _elementRef:ElementRef,
|
||||||
private _router:Router,
|
private _router:Router,
|
||||||
private _sidebarService:SidebarService,
|
private _sidebarService:SidebarService,
|
||||||
private _sidebarStateService:SidebarStateService) {
|
private _themeGlobal:ThemeGlobal) {
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -68,7 +68,7 @@ export class Sidebar {
|
||||||
|
|
||||||
menuCollapseStateChange(isCollapsed) {
|
menuCollapseStateChange(isCollapsed) {
|
||||||
this.isMenuCollapsed = isCollapsed;
|
this.isMenuCollapsed = isCollapsed;
|
||||||
this._sidebarStateService.stateChanged(this.isMenuCollapsed);
|
this._themeGlobal.setData('menu.isCollapsed', this.isMenuCollapsed);
|
||||||
}
|
}
|
||||||
|
|
||||||
hoverItem($event) {
|
hoverItem($event) {
|
||||||
|
|
@ -99,19 +99,28 @@ export class Sidebar {
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// TODO: there is a bug in the router thus all child routers are considered as active
|
||||||
private selectMenuItem() {
|
private selectMenuItem() {
|
||||||
let isCurrent = (instruction) => (instruction ? this._router.isRouteActive(this._router.generate([instruction])) : false);
|
let currentMenu;
|
||||||
|
|
||||||
|
let isCurrent = (instructions) => (instructions.filter(i => typeof i !== 'undefined').length > 0 ? this._router.isRouteActive(this._router.generate(instructions)) : false);
|
||||||
|
let assignCurrent = (menu) => (menu.selected ? currentMenu = menu : null);
|
||||||
|
|
||||||
this.menuItems.forEach(function (menu: any) {
|
this.menuItems.forEach(function (menu: any) {
|
||||||
|
|
||||||
menu.selected = isCurrent(menu.name);
|
menu.selected = isCurrent([menu.name]);
|
||||||
menu.expanded = menu.expanded || menu.selected;
|
menu.expanded = menu.expanded || menu.selected;
|
||||||
|
assignCurrent(menu);
|
||||||
|
|
||||||
if (menu.subMenu) {
|
if (menu.subMenu) {
|
||||||
menu.subMenu.forEach(function (subMenu) {
|
menu.subMenu.forEach(function (subMenu) {
|
||||||
subMenu.selected = isCurrent(subMenu.name) && !subMenu.disabled;
|
subMenu.selected = isCurrent([menu.name, subMenu.name]) && !subMenu.disabled;
|
||||||
|
assignCurrent(menu);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// notifies all subscribers
|
||||||
|
this._themeGlobal.setData('menu.activeLink', currentMenu);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -27,11 +27,11 @@
|
||||||
[ngClass]="{expanded: subitem.expanded, 'slide-right': subitem.slideRight}">
|
[ngClass]="{expanded: subitem.expanded, 'slide-right': subitem.slideRight}">
|
||||||
<li *ngFor="#subSubitem of subitem.subMenu" (mouseenter)="hoverItem($event, item)"
|
<li *ngFor="#subSubitem of subitem.subMenu" (mouseenter)="hoverItem($event, item)"
|
||||||
[ngClass]="{selected: subitem.selected}">
|
[ngClass]="{selected: subitem.selected}">
|
||||||
<a (mouseenter)="hoverItem($event, item)" [routerLink]="[subSubitem.name]">
|
<a (mouseenter)="hoverItem($event, item)" [routerLink]="[item.name, subitem.name, subSubitem.name]">
|
||||||
{{ subSubitem.title }}</a>
|
{{ subSubitem.title }}</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
<a *ngIf="!subitem.subMenu" [routerLink]="[subitem.name]"
|
<a *ngIf="!subitem.subMenu" [routerLink]="[item.name, subitem.name]"
|
||||||
(mouseenter)="hoverItem($event, item)" target="{{subitem.blank ? '_blank' : '_self'}}">
|
(mouseenter)="hoverItem($event, item)" target="{{subitem.blank ? '_blank' : '_self'}}">
|
||||||
{{ subitem.title}}
|
{{ subitem.title}}
|
||||||
</a>
|
</a>
|
||||||
|
|
|
||||||
|
|
@ -18,7 +18,57 @@ export class SidebarService {
|
||||||
icon: 'ion-android-laptop',
|
icon: 'ion-android-laptop',
|
||||||
selected: false,
|
selected: false,
|
||||||
expanded: false,
|
expanded: false,
|
||||||
order: 200
|
order: 200,
|
||||||
|
subMenu: [
|
||||||
|
{
|
||||||
|
title: 'Typography',
|
||||||
|
name: 'Typography',
|
||||||
|
},
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Maps',
|
||||||
|
name: 'Maps',
|
||||||
|
icon: 'ion-ios-location-outline',
|
||||||
|
selected: false,
|
||||||
|
expanded: false,
|
||||||
|
order: 300,
|
||||||
|
subMenu: [
|
||||||
|
{
|
||||||
|
title: 'Google Maps',
|
||||||
|
name: 'GoogleMaps',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Leaflet Maps',
|
||||||
|
name: 'LeafletMaps',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Bubble Maps',
|
||||||
|
name: 'BubbleMaps',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Line Maps',
|
||||||
|
name: 'LineMaps',
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Charts',
|
||||||
|
name: 'Charts',
|
||||||
|
icon: 'ion-stats-bars',
|
||||||
|
selected: false,
|
||||||
|
expanded: false,
|
||||||
|
order: 400,
|
||||||
|
subMenu: [
|
||||||
|
{
|
||||||
|
title: 'Chart Js',
|
||||||
|
name: 'ChartJs',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'ChartistJs',
|
||||||
|
name: 'ChartistJs',
|
||||||
|
},
|
||||||
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: 'Pages',
|
title: 'Pages',
|
||||||
|
|
|
||||||
|
|
@ -1,21 +0,0 @@
|
||||||
import {Injectable} from 'angular2/core'
|
|
||||||
import {Subject} from 'rxjs/Subject';
|
|
||||||
|
|
||||||
@Injectable()
|
|
||||||
export class SidebarStateService {
|
|
||||||
|
|
||||||
// Observable string sources
|
|
||||||
private _isCollapsed = new Subject<boolean>();
|
|
||||||
|
|
||||||
// Observable string streams
|
|
||||||
isCollapsedStream$ = this._isCollapsed.asObservable();
|
|
||||||
|
|
||||||
// Service message commands
|
|
||||||
stateChanged(isCollapsed:boolean) {
|
|
||||||
this._isCollapsed.next(isCollapsed)
|
|
||||||
}
|
|
||||||
|
|
||||||
getStateStream() {
|
|
||||||
return this.isCollapsedStream$;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,15 +1,133 @@
|
||||||
export const IMAGES_ROOT = 'assets/img/';
|
export const IMAGES_ROOT = 'assets/img/';
|
||||||
|
|
||||||
|
export let shade = (color, weight) => {
|
||||||
|
return mix('#000000', color, weight);
|
||||||
|
};
|
||||||
|
|
||||||
|
export let tint = (color, weight) => {
|
||||||
|
return mix('#ffffff', color, weight);
|
||||||
|
};
|
||||||
|
|
||||||
|
//SASS mix function
|
||||||
|
export let mix = (color1, color2, weight) => {
|
||||||
|
// convert a decimal value to hex
|
||||||
|
function d2h(d) {
|
||||||
|
return d.toString(16);
|
||||||
|
}
|
||||||
|
// convert a hex value to decimal
|
||||||
|
function h2d(h) {
|
||||||
|
return parseInt(h, 16);
|
||||||
|
}
|
||||||
|
|
||||||
|
let result = "#";
|
||||||
|
for(let i = 1; i < 7; i += 2) {
|
||||||
|
let color1Part = h2d(color1.substr(i, 2));
|
||||||
|
let color2Part = h2d(color2.substr(i, 2));
|
||||||
|
let resultPart = d2h(Math.floor(color2Part + (color1Part - color2Part) * (weight / 100.0)));
|
||||||
|
result += ('0' + resultPart).slice(-2);
|
||||||
|
}
|
||||||
|
return result;
|
||||||
|
};
|
||||||
|
|
||||||
|
export let hexToRgbA = (hex, alpha) => {
|
||||||
|
var c;
|
||||||
|
if(/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)){
|
||||||
|
c= hex.substring(1).split('');
|
||||||
|
if(c.length== 3){
|
||||||
|
c= [c[0], c[0], c[1], c[1], c[2], c[2]];
|
||||||
|
}
|
||||||
|
c= '0x'+c.join('');
|
||||||
|
return 'rgba('+[(c>>16)&255, (c>>8)&255, c&255].join(',')+',' + alpha + ')';
|
||||||
|
}
|
||||||
|
throw new Error('Bad Hex');
|
||||||
|
};
|
||||||
|
|
||||||
export const layoutSizes = {
|
export const layoutSizes = {
|
||||||
resWidthCollapseSidebar: 1200,
|
resWidthCollapseSidebar: 1200,
|
||||||
resWidthHideSidebar: 500
|
resWidthHideSidebar: 500
|
||||||
};
|
};
|
||||||
|
|
||||||
|
export const colorScheme = {
|
||||||
|
primary: '#209e91',
|
||||||
|
info: '#2dacd1',
|
||||||
|
success: '#90b900',
|
||||||
|
warning: '#dfb81c',
|
||||||
|
danger: '#e85656',
|
||||||
|
};
|
||||||
|
|
||||||
|
export const bgColorPalette = {
|
||||||
|
blueStone: '#005562',
|
||||||
|
surfieGreen: '#0e8174',
|
||||||
|
silverTree: '#6eba8c',
|
||||||
|
gossip: '#b9f2a1',
|
||||||
|
white: '#ffffff',
|
||||||
|
};
|
||||||
|
|
||||||
|
export const layoutColors = {
|
||||||
|
primary: colorScheme.primary,
|
||||||
|
info: colorScheme.info,
|
||||||
|
success: colorScheme.success,
|
||||||
|
warning: colorScheme.warning,
|
||||||
|
danger: colorScheme.danger,
|
||||||
|
|
||||||
|
primaryLight: tint(colorScheme.primary, 30),
|
||||||
|
infoLight: tint(colorScheme.info, 30),
|
||||||
|
successLight: tint(colorScheme.success, 30),
|
||||||
|
warningLight: tint(colorScheme.warning, 30),
|
||||||
|
dangerLight: tint(colorScheme.danger, 30),
|
||||||
|
|
||||||
|
primaryDark: shade(colorScheme.primary, 15),
|
||||||
|
infoDark: shade(colorScheme.info, 15),
|
||||||
|
successDark: shade(colorScheme.success, 15),
|
||||||
|
warningDark: shade(colorScheme.warning, 15),
|
||||||
|
dangerDark: shade(colorScheme.danger, 15),
|
||||||
|
|
||||||
|
primaryBg: tint(colorScheme.primary, 20),
|
||||||
|
infoBg: tint(colorScheme.info, 20),
|
||||||
|
successBg: tint(colorScheme.success, 20),
|
||||||
|
warningBg: tint(colorScheme.warning, 20),
|
||||||
|
dangerBg: tint(colorScheme.danger, 20),
|
||||||
|
|
||||||
|
default: '#ffffff',
|
||||||
|
defaultText: '#ffffff',
|
||||||
|
|
||||||
|
bgColorPalette: {
|
||||||
|
blueStone: bgColorPalette.blueStone,
|
||||||
|
surfieGreen: bgColorPalette.surfieGreen,
|
||||||
|
silverTree: bgColorPalette.silverTree,
|
||||||
|
gossip: bgColorPalette.gossip,
|
||||||
|
white: bgColorPalette.white,
|
||||||
|
|
||||||
|
blueStoneDark: shade(bgColorPalette.blueStone, 15),
|
||||||
|
surfieGreenDark: shade(bgColorPalette.surfieGreen, 15),
|
||||||
|
silverTreeDark: shade(bgColorPalette.silverTree, 15),
|
||||||
|
gossipDark: shade(bgColorPalette.gossip, 15),
|
||||||
|
whiteDark: shade(bgColorPalette.white, 5),
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
let _chartColors = [];
|
||||||
|
let _colorsForChart = [ layoutColors.primary, layoutColors.danger, layoutColors.warning, layoutColors.success, layoutColors.info, layoutColors.default, layoutColors.primaryDark, layoutColors.successDark, layoutColors.warningLight, layoutColors.successLight, layoutColors.successBg];
|
||||||
|
|
||||||
|
_colorsForChart.forEach((color) => {
|
||||||
|
_chartColors.push({
|
||||||
|
fillColor: hexToRgbA(color, 0.2),
|
||||||
|
strokeColor: hexToRgbA(color, 1),
|
||||||
|
pointColor: hexToRgbA(color, 1),
|
||||||
|
pointStrokeColor: color,
|
||||||
|
pointHighlightFill: color,
|
||||||
|
pointHighlightStroke: hexToRgbA(color, 0.8),
|
||||||
|
color: hexToRgbA(color, 1),
|
||||||
|
highlight: hexToRgbA(color, 0.8)
|
||||||
|
});
|
||||||
|
});
|
||||||
|
export const chartColors = _chartColors;
|
||||||
|
|
||||||
export const layoutPaths = {
|
export const layoutPaths = {
|
||||||
images: {
|
images: {
|
||||||
root: IMAGES_ROOT,
|
root: IMAGES_ROOT,
|
||||||
profile: IMAGES_ROOT + 'app/profile/',
|
profile: IMAGES_ROOT + 'app/profile/',
|
||||||
amMap: 'assets/img/theme/vendor/ammap//dist/ammap/images/',
|
amMap: 'assets/img/theme/vendor/ammap/',
|
||||||
amChart: 'assets/img/theme/vendor/amcharts/dist/amcharts/images/'
|
amChart: 'assets/img/theme/vendor/amcharts/dist/amcharts/images/'
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
|
||||||
24
src/app/theme/theme.global.ts
Normal file
24
src/app/theme/theme.global.ts
Normal file
|
|
@ -0,0 +1,24 @@
|
||||||
|
import {Injectable} from 'angular2/core'
|
||||||
|
import {Subject} from 'rxjs/Subject';
|
||||||
|
|
||||||
|
@Injectable()
|
||||||
|
export class ThemeGlobal {
|
||||||
|
private _data = new Subject<Object>();
|
||||||
|
|
||||||
|
dataStream$ = this._data.asObservable();
|
||||||
|
|
||||||
|
constructor() {
|
||||||
|
}
|
||||||
|
|
||||||
|
setData(key, value) {
|
||||||
|
let current = this._data[key];
|
||||||
|
if (current != value) {
|
||||||
|
this._data[key] = value;
|
||||||
|
this._data.next(this._data);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
getDataStream() {
|
||||||
|
return this.dataStream$;
|
||||||
|
}
|
||||||
|
}
|
||||||
BIN
src/assets/img/theme/vendor/ammap/arrowDown.gif
vendored
Executable file
BIN
src/assets/img/theme/vendor/ammap/arrowDown.gif
vendored
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 72 B |
BIN
src/assets/img/theme/vendor/ammap/arrowUp.gif
vendored
Executable file
BIN
src/assets/img/theme/vendor/ammap/arrowUp.gif
vendored
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 73 B |
BIN
src/assets/img/theme/vendor/ammap/export.png
vendored
Executable file
BIN
src/assets/img/theme/vendor/ammap/export.png
vendored
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 218 B |
BIN
src/assets/img/theme/vendor/ammap/homeIcon.gif
vendored
Executable file
BIN
src/assets/img/theme/vendor/ammap/homeIcon.gif
vendored
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 848 B |
BIN
src/assets/img/theme/vendor/ammap/homeIconWhite.gif
vendored
Executable file
BIN
src/assets/img/theme/vendor/ammap/homeIconWhite.gif
vendored
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 848 B |
BIN
src/assets/img/theme/vendor/ammap/minus.gif
vendored
Executable file
BIN
src/assets/img/theme/vendor/ammap/minus.gif
vendored
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 59 B |
BIN
src/assets/img/theme/vendor/ammap/panDown.gif
vendored
Executable file
BIN
src/assets/img/theme/vendor/ammap/panDown.gif
vendored
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 63 B |
BIN
src/assets/img/theme/vendor/ammap/panLeft.gif
vendored
Executable file
BIN
src/assets/img/theme/vendor/ammap/panLeft.gif
vendored
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 63 B |
BIN
src/assets/img/theme/vendor/ammap/panRight.gif
vendored
Executable file
BIN
src/assets/img/theme/vendor/ammap/panRight.gif
vendored
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 63 B |
BIN
src/assets/img/theme/vendor/ammap/panUp.gif
vendored
Executable file
BIN
src/assets/img/theme/vendor/ammap/panUp.gif
vendored
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 63 B |
BIN
src/assets/img/theme/vendor/ammap/plus.gif
vendored
Executable file
BIN
src/assets/img/theme/vendor/ammap/plus.gif
vendored
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 65 B |
BIN
src/assets/img/theme/vendor/ammap/xIcon.gif
vendored
Executable file
BIN
src/assets/img/theme/vendor/ammap/xIcon.gif
vendored
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 93 B |
BIN
src/assets/img/theme/vendor/ammap/xIconH.gif
vendored
Executable file
BIN
src/assets/img/theme/vendor/ammap/xIconH.gif
vendored
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 79 B |
BIN
src/assets/img/theme/vendor/leaflet/marker-icon-2x.png
vendored
Normal file
BIN
src/assets/img/theme/vendor/leaflet/marker-icon-2x.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
BIN
src/assets/img/theme/vendor/leaflet/marker-icon.png
vendored
Normal file
BIN
src/assets/img/theme/vendor/leaflet/marker-icon.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
5
src/custom-typings.d.ts
vendored
5
src/custom-typings.d.ts
vendored
|
|
@ -30,6 +30,11 @@ import * as _ from 'lodash'
|
||||||
*/
|
*/
|
||||||
|
|
||||||
declare var $:any;
|
declare var $:any;
|
||||||
|
declare var GoogleMapsLoader:any;
|
||||||
|
declare var L:any;
|
||||||
|
declare var AmCharts:any;
|
||||||
|
declare var Chart:any;
|
||||||
|
declare var Chartist:any;
|
||||||
|
|
||||||
// Extra variables that live on Global that will be replaced by webpack DefinePlugin
|
// Extra variables that live on Global that will be replaced by webpack DefinePlugin
|
||||||
declare var ENV: string;
|
declare var ENV: string;
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue