mirror of
https://github.com/richard-loafle/fuse-angular.git
synced 2025-12-11 13:22:46 +00:00
Finished up the Analytics Dashboard
+ Updated the Angular Material version along with couple other libraries + Increased the version number of the Fuse
This commit is contained in:
Sercan Yemen
@@ -42,7 +42,7 @@ const appRoutes: Routes = [
|
||||
},
|
||||
{
|
||||
path : '**',
|
||||
redirectTo: 'apps/dashboards/project'
|
||||
redirectTo: 'apps/dashboards/analytics'
|
||||
}
|
||||
];
|
||||
|
||||
|
||||
@@ -1,12 +1,6 @@
|
||||
export class AnalyticsDashboardDb
|
||||
{
|
||||
public static widgets = {
|
||||
/*widget2: {
|
||||
overallGrowthPercentage: 17,
|
||||
overallGrowthTrend : 'decrease',
|
||||
averageDailyPercentage : 28,
|
||||
averageDailyTrend : 'increase'
|
||||
},*/
|
||||
widget1: {
|
||||
chartType: 'line',
|
||||
datasets : {
|
||||
@@ -108,156 +102,166 @@ export class AnalyticsDashboardDb
|
||||
widget2: {
|
||||
conversion: {
|
||||
value : 492,
|
||||
ofTarget: 22
|
||||
ofTarget: 13
|
||||
},
|
||||
scheme : {
|
||||
domain: ['#5c84f1']
|
||||
},
|
||||
data : [
|
||||
chartType : 'bar',
|
||||
datasets : [
|
||||
{
|
||||
name : 'Monday',
|
||||
value: 221
|
||||
},
|
||||
{
|
||||
name : 'Tuesday',
|
||||
value: 428
|
||||
},
|
||||
{
|
||||
name : 'Wednesday',
|
||||
value: 492
|
||||
},
|
||||
{
|
||||
name : 'Thursday',
|
||||
value: 471
|
||||
},
|
||||
{
|
||||
name : 'Friday',
|
||||
value: 413
|
||||
},
|
||||
{
|
||||
name : 'Saturday',
|
||||
value: 344
|
||||
},
|
||||
{
|
||||
name : 'Sunday',
|
||||
value: 294
|
||||
label: 'Conversion',
|
||||
data : [221, 428, 492, 471, 413, 344, 294]
|
||||
}
|
||||
]
|
||||
},
|
||||
widget3: {
|
||||
impressions: {
|
||||
value : '87.4M',
|
||||
ofTarget: 12.3
|
||||
},
|
||||
scheme : {
|
||||
domain: ['#5c84f1']
|
||||
},
|
||||
data : [
|
||||
],
|
||||
labels : ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
|
||||
colors : [
|
||||
{
|
||||
name : 'Impressions',
|
||||
series: [
|
||||
borderColor : '#42a5f5',
|
||||
backgroundColor: '#42a5f5'
|
||||
}
|
||||
],
|
||||
options : {
|
||||
spanGaps : false,
|
||||
legend : {
|
||||
display: false
|
||||
},
|
||||
maintainAspectRatio: false,
|
||||
layout : {
|
||||
padding: {
|
||||
top : 24,
|
||||
left : 16,
|
||||
right : 16,
|
||||
bottom: 16
|
||||
}
|
||||
},
|
||||
scales : {
|
||||
xAxes: [
|
||||
{
|
||||
name : 'Jan 1',
|
||||
value: 670000
|
||||
},
|
||||
display: false
|
||||
}
|
||||
],
|
||||
yAxes: [
|
||||
{
|
||||
name : 'Jan 2',
|
||||
value: 540000
|
||||
},
|
||||
{
|
||||
name : 'Jan 3',
|
||||
value: 820000
|
||||
},
|
||||
{
|
||||
name : 'Jan 4',
|
||||
value: 570000
|
||||
},
|
||||
{
|
||||
name : 'Jan 5',
|
||||
value: 720000
|
||||
},
|
||||
{
|
||||
name : 'Jan 6',
|
||||
value: 570000
|
||||
},
|
||||
{
|
||||
name : 'Jan 7',
|
||||
value: 870000
|
||||
},
|
||||
{
|
||||
name : 'Jan 8',
|
||||
value: 720000
|
||||
},
|
||||
{
|
||||
name : 'Jan 9',
|
||||
value: 890000
|
||||
},
|
||||
{
|
||||
name : 'Jan 10',
|
||||
value: 987000
|
||||
},
|
||||
{
|
||||
name : 'Jan 11',
|
||||
value: 1120000
|
||||
},
|
||||
{
|
||||
name : 'Jan 12',
|
||||
value: 1360000
|
||||
},
|
||||
{
|
||||
name : 'Jan 13',
|
||||
value: 1100000
|
||||
},
|
||||
{
|
||||
name : 'Jan 14',
|
||||
value: 1490000
|
||||
},
|
||||
{
|
||||
name : 'Jan 15',
|
||||
value: 980000
|
||||
display: false,
|
||||
ticks : {
|
||||
min: 100,
|
||||
max: 500
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
widget3: {
|
||||
impressions: {
|
||||
value : '87k',
|
||||
ofTarget: 12
|
||||
},
|
||||
chartType : 'line',
|
||||
datasets : [
|
||||
{
|
||||
label: 'Impression',
|
||||
data : [67000, 54000, 82000, 57000, 72000, 57000, 87000, 72000, 89000, 98700, 112000, 136000, 110000, 149000, 98000],
|
||||
fill : false
|
||||
}
|
||||
],
|
||||
labels : ['Jan 1', 'Jan 2', 'Jan 3', 'Jan 4', 'Jan 5', 'Jan 6', 'Jan 7', 'Jan 8', 'Jan 9', 'Jan 10', 'Jan 11', 'Jan 12', 'Jan 13', 'Jan 14', 'Jan 15'],
|
||||
colors : [
|
||||
{
|
||||
borderColor: '#5c84f1'
|
||||
}
|
||||
],
|
||||
options : {
|
||||
spanGaps : false,
|
||||
legend : {
|
||||
display: false
|
||||
},
|
||||
maintainAspectRatio: false,
|
||||
elements : {
|
||||
point: {
|
||||
radius : 2,
|
||||
borderWidth : 1,
|
||||
hoverRadius : 2,
|
||||
hoverBorderWidth: 1
|
||||
},
|
||||
line : {
|
||||
tension: 0
|
||||
}
|
||||
},
|
||||
layout : {
|
||||
padding: {
|
||||
top : 24,
|
||||
left : 16,
|
||||
right : 16,
|
||||
bottom: 16
|
||||
}
|
||||
},
|
||||
scales : {
|
||||
xAxes: [
|
||||
{
|
||||
display: false
|
||||
}
|
||||
],
|
||||
yAxes: [
|
||||
{
|
||||
display: false,
|
||||
ticks : {
|
||||
// min: 100,
|
||||
// max: 500
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
widget4: {
|
||||
visits: {
|
||||
visits : {
|
||||
value : 882,
|
||||
ofTarget: -12
|
||||
ofTarget: -9
|
||||
},
|
||||
scheme: {
|
||||
domain: ['#f44336']
|
||||
},
|
||||
data : [
|
||||
chartType: 'bar',
|
||||
datasets : [
|
||||
{
|
||||
name : 'Monday',
|
||||
value: 432
|
||||
},
|
||||
{
|
||||
name : 'Tuesday',
|
||||
value: 428
|
||||
},
|
||||
{
|
||||
name : 'Wednesday',
|
||||
value: 477
|
||||
},
|
||||
{
|
||||
name : 'Thursday',
|
||||
value: 471
|
||||
},
|
||||
{
|
||||
name : 'Friday',
|
||||
value: 456
|
||||
},
|
||||
{
|
||||
name : 'Saturday',
|
||||
value: 267
|
||||
},
|
||||
{
|
||||
name : 'Sunday',
|
||||
value: 231
|
||||
label: 'Visits',
|
||||
data : [432, 428, 327, 363, 456, 267, 231]
|
||||
}
|
||||
]
|
||||
],
|
||||
labels : ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
|
||||
colors : [
|
||||
{
|
||||
borderColor : '#f44336',
|
||||
backgroundColor: '#f44336'
|
||||
}
|
||||
],
|
||||
options : {
|
||||
spanGaps : false,
|
||||
legend : {
|
||||
display: false
|
||||
},
|
||||
maintainAspectRatio: false,
|
||||
layout : {
|
||||
padding: {
|
||||
top : 24,
|
||||
left : 16,
|
||||
right : 16,
|
||||
bottom: 16
|
||||
}
|
||||
},
|
||||
scales : {
|
||||
xAxes: [
|
||||
{
|
||||
display: false
|
||||
}
|
||||
],
|
||||
yAxes: [
|
||||
{
|
||||
display: false,
|
||||
ticks : {
|
||||
min: 150,
|
||||
max: 500
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
widget5: {
|
||||
chartType: 'line',
|
||||
@@ -349,7 +353,7 @@ export class AnalyticsDashboardDb
|
||||
gridLines: {
|
||||
tickMarkLength: 16
|
||||
},
|
||||
ticks : {
|
||||
ticks : {
|
||||
stepSize: 1000
|
||||
}
|
||||
}
|
||||
@@ -365,55 +369,135 @@ export class AnalyticsDashboardDb
|
||||
widget6: {
|
||||
markers: [
|
||||
{
|
||||
lat: 52,
|
||||
lng: -73,
|
||||
lat : 52,
|
||||
lng : -73,
|
||||
label: '120'
|
||||
},
|
||||
{
|
||||
lat: 37,
|
||||
lng: -104,
|
||||
lat : 37,
|
||||
lng : -104,
|
||||
label: '498'
|
||||
},
|
||||
{
|
||||
lat: 21,
|
||||
lng: -7,
|
||||
lat : 21,
|
||||
lng : -7,
|
||||
label: '443'
|
||||
},
|
||||
{
|
||||
lat: 55,
|
||||
lng: 75,
|
||||
lat : 55,
|
||||
lng : 75,
|
||||
label: '332'
|
||||
},
|
||||
{
|
||||
lat: 51,
|
||||
lng: 7,
|
||||
lat : 51,
|
||||
lng : 7,
|
||||
label: '50'
|
||||
},
|
||||
{
|
||||
lat: 31,
|
||||
lng: 12,
|
||||
lat : 31,
|
||||
lng : 12,
|
||||
label: '221'
|
||||
},
|
||||
{
|
||||
lat: 45,
|
||||
lng: 44,
|
||||
lat : 45,
|
||||
lng : 44,
|
||||
label: '455'
|
||||
},
|
||||
{
|
||||
lat: -26,
|
||||
lng: 134,
|
||||
lat : -26,
|
||||
lng : 134,
|
||||
label: '231'
|
||||
},
|
||||
{
|
||||
lat: -9,
|
||||
lng: -60,
|
||||
lat : -9,
|
||||
lng : -60,
|
||||
label: '67'
|
||||
},
|
||||
{
|
||||
lat: 33,
|
||||
lng: 104,
|
||||
lat : 33,
|
||||
lng : 104,
|
||||
label: '665'
|
||||
}
|
||||
],
|
||||
styles : [
|
||||
{
|
||||
'featureType': 'administrative',
|
||||
'elementType': 'labels.text.fill',
|
||||
'stylers' : [
|
||||
{
|
||||
'color': '#444444'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
'featureType': 'landscape',
|
||||
'elementType': 'all',
|
||||
'stylers' : [
|
||||
{
|
||||
'color': '#f2f2f2'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
'featureType': 'poi',
|
||||
'elementType': 'all',
|
||||
'stylers' : [
|
||||
{
|
||||
'visibility': 'off'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
'featureType': 'road',
|
||||
'elementType': 'all',
|
||||
'stylers' : [
|
||||
{
|
||||
'saturation': -100
|
||||
},
|
||||
{
|
||||
'lightness': 45
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
'featureType': 'road.highway',
|
||||
'elementType': 'all',
|
||||
'stylers' : [
|
||||
{
|
||||
'visibility': 'simplified'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
'featureType': 'road.arterial',
|
||||
'elementType': 'labels.icon',
|
||||
'stylers' : [
|
||||
{
|
||||
'visibility': 'off'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
'featureType': 'transit',
|
||||
'elementType': 'all',
|
||||
'stylers' : [
|
||||
{
|
||||
'visibility': 'off'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
'featureType': 'water',
|
||||
'elementType': 'all',
|
||||
'stylers' : [
|
||||
{
|
||||
'color': '#039be5'
|
||||
},
|
||||
{
|
||||
'visibility': 'on'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
widget7: {
|
||||
|
||||
@@ -1,32 +1,5 @@
|
||||
<div id="dashboard-analytics" class="page-layout blank grey-100-bg" fusePerfectScrollbar>
|
||||
|
||||
<!--<div fxLayout="row" fxLayoutAlign="start center" class="p-24">
|
||||
|
||||
<div fxFlex="33" class="position-relative h-200 pb-16 mat-elevation-z2 mr-16 p-16 white-bg">
|
||||
|
||||
<div class="h2 mb-8">Site Traffic</div>
|
||||
|
||||
<div fxLayout="row" fxLayoutAlign="start center">
|
||||
|
||||
<div>
|
||||
<div class="h3 secondary-text">Overall Growth</div>
|
||||
<div fxLayout="row" fxLayoutAlign="start center">
|
||||
<span *ngIf="widgets.widget1.overallGrowthTrend === 'increase'">
|
||||
<mat-icon class="green-fg mr-8">trending_up</mat-icon>
|
||||
</span>
|
||||
<span *ngIf="widgets.widget1.overallGrowthTrend === 'decrease'">
|
||||
<mat-icon class="red-fg mr-8">trending_down</mat-icon>
|
||||
</span>
|
||||
<span class="h2 text-bold">{{widgets.widget1.overallGrowthPercentage}}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>-->
|
||||
|
||||
<div class="main-widget">
|
||||
|
||||
<div class="position-relative p-24 mat-blue-600-bg"
|
||||
@@ -74,35 +47,47 @@
|
||||
How are your active users trending over time?
|
||||
</div>
|
||||
|
||||
<div fxLayout="row" fxLayoutAlign="start start">
|
||||
<div fxLayout="column" fxLayoutAlign="start"
|
||||
fxLayout.gt-sm="row" fxLayoutAlign.gt-sm="start start">
|
||||
|
||||
<!-- Widget 2 -->
|
||||
<div class="widget">
|
||||
<div class="widget" fxFlex="100" fxFlex.gt-sm="33">
|
||||
|
||||
<div class="fuse-card auto-width mr-32">
|
||||
<div class="fuse-card auto-width mb-32" [ngClass.gt-sm]="'mb-0 mr-32'">
|
||||
|
||||
<div class="p-16">
|
||||
<div class="h5 secondary-text">Conversion</div>
|
||||
<div class="font-size-54 font-weight-300 line-height-1 mt-8">
|
||||
{{widgets.widget2.conversion.value}}
|
||||
<div class="p-16 pb-0" fxLayout="row" fxLayoutAlign="start end" fxLayoutWrap>
|
||||
|
||||
<div class="pr-16">
|
||||
<div class="h3 secondary-text">Conversion</div>
|
||||
<div class="font-size-54 font-weight-300 line-height-1 mt-8">
|
||||
{{widgets.widget2.conversion.value}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="py-4 font-size-16" fxLayout="row" fxLayoutAlign="start center">
|
||||
<div fxFlex="row" fxLayoutAlign="start center" class="green-fg"
|
||||
*ngIf="widgets.widget2.conversion.ofTarget > 0">
|
||||
<mat-icon class="green-fg mr-4">trending_up</mat-icon>
|
||||
<span>{{widgets.widget2.conversion.ofTarget}}%</span>
|
||||
</div>
|
||||
<div fxFlex="row" fxLayoutAlign="start center" class="red-fg"
|
||||
*ngIf="widgets.widget2.conversion.ofTarget < 0">
|
||||
<mat-icon class="red-fg mr-4">trending_down</mat-icon>
|
||||
<span>{{widgets.widget2.conversion.ofTarget}}%</span>
|
||||
</div>
|
||||
<div class="ml-4 text-nowrap">of target</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="p-16 pt-0">
|
||||
<span class="green-fg" *ngIf="widgets.widget2.conversion.ofTarget > 0">
|
||||
{{widgets.widget2.conversion.ofTarget}}%
|
||||
</span>
|
||||
<span class="red-fg" *ngIf="widgets.widget2.conversion.ofTarget < 0">
|
||||
{{widgets.widget2.conversion.ofTarget}}%
|
||||
</span>
|
||||
<span> of target</span>
|
||||
</div>
|
||||
|
||||
<div class="h-64">
|
||||
<ngx-charts-bar-vertical
|
||||
[scheme]="widgets.widget2.scheme"
|
||||
[results]="widgets.widget2.data">
|
||||
</ngx-charts-bar-vertical>
|
||||
<div class="h-96 w-100-p">
|
||||
<canvas baseChart
|
||||
[datasets]="widgets.widget2.datasets"
|
||||
[labels]="widgets.widget2.labels"
|
||||
[colors]="widgets.widget2.colors"
|
||||
[options]="widgets.widget2.options"
|
||||
[chartType]="widgets.widget2.chartType">
|
||||
</canvas>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@@ -111,32 +96,43 @@
|
||||
<!-- / Widget 2 -->
|
||||
|
||||
<!-- Widget 3 -->
|
||||
<div class="widget">
|
||||
<div class="widget" fxFlex="100" fxFlex.gt-sm="34">
|
||||
|
||||
<div class="fuse-card auto-width mr-32">
|
||||
<div class="fuse-card auto-width mb-32" [ngClass.gt-sm]="'mb-0 mr-32'">
|
||||
|
||||
<div class="p-16">
|
||||
<div class="h5 secondary-text">Impressions</div>
|
||||
<div class="font-size-54 font-weight-300 line-height-1 mt-8">
|
||||
{{widgets.widget3.impressions.value}}
|
||||
<div class="p-16 pb-0" fxLayout="row" fxLayoutAlign="start end" fxLayoutWrap>
|
||||
|
||||
<div class="pr-16">
|
||||
<div class="h3 secondary-text">Impressions</div>
|
||||
<div class="font-size-54 font-weight-300 line-height-1 mt-8">
|
||||
{{widgets.widget3.impressions.value}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="py-4 font-size-16" fxLayout="row" fxLayoutAlign="start center">
|
||||
<div fxFlex="row" fxLayoutAlign="start center" class="green-fg"
|
||||
*ngIf="widgets.widget3.impressions.ofTarget > 0">
|
||||
<mat-icon class="green-fg mr-4">trending_up</mat-icon>
|
||||
<span>{{widgets.widget3.impressions.ofTarget}}%</span>
|
||||
</div>
|
||||
<div fxFlex="row" fxLayoutAlign="start center" class="red-fg"
|
||||
*ngIf="widgets.widget3.impressions.ofTarget < 0">
|
||||
<mat-icon class="red-fg mr-4">trending_down</mat-icon>
|
||||
<span>{{widgets.widget3.impressions.ofTarget}}%</span>
|
||||
</div>
|
||||
<div class="ml-4 text-nowrap">of target</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="p-16 pt-0">
|
||||
<span class="green-fg" *ngIf="widgets.widget3.impressions.ofTarget > 0">
|
||||
{{widgets.widget3.impressions.ofTarget}}%
|
||||
</span>
|
||||
<span class="red-fg" *ngIf="widgets.widget3.impressions.ofTarget < 0">
|
||||
{{widgets.widget3.impressions.ofTarget}}%
|
||||
</span>
|
||||
<span> of target</span>
|
||||
</div>
|
||||
|
||||
<div class="h-64">
|
||||
<ngx-charts-line-chart
|
||||
[scheme]="widgets.widget3.scheme"
|
||||
[results]="widgets.widget3.data">
|
||||
</ngx-charts-line-chart>
|
||||
<div class="h-96 w-100-p">
|
||||
<canvas baseChart
|
||||
[datasets]="widgets.widget3.datasets"
|
||||
[labels]="widgets.widget3.labels"
|
||||
[colors]="widgets.widget3.colors"
|
||||
[options]="widgets.widget3.options"
|
||||
[chartType]="widgets.widget3.chartType">
|
||||
</canvas>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@@ -145,32 +141,43 @@
|
||||
<!-- / Widget 3 -->
|
||||
|
||||
<!-- Widget 4 -->
|
||||
<div class="widget">
|
||||
<div class="widget" fxFlex="100" fxFlex.gt-sm="33">
|
||||
|
||||
<div class="fuse-card auto-width">
|
||||
|
||||
<div class="p-16">
|
||||
<div class="h5 secondary-text">Visits</div>
|
||||
<div class="font-size-54 font-weight-300 line-height-1 mt-8">
|
||||
{{widgets.widget4.visits.value}}
|
||||
<div class="p-16 pb-0" fxLayout="row" fxLayoutAlign="start end" fxLayoutWrap>
|
||||
|
||||
<div class="pr-16">
|
||||
<div class="h3 secondary-text">Visits</div>
|
||||
<div class="font-size-54 font-weight-300 line-height-1 mt-8">
|
||||
{{widgets.widget4.visits.value}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="py-4 font-size-16" fxLayout="row" fxLayoutAlign="start center">
|
||||
<div fxFlex="row" fxLayoutAlign="start center" class="green-fg"
|
||||
*ngIf="widgets.widget4.visits.ofTarget > 0">
|
||||
<mat-icon class="green-fg mr-4">trending_up</mat-icon>
|
||||
<span>{{widgets.widget4.visits.ofTarget}}%</span>
|
||||
</div>
|
||||
<div fxFlex="row" fxLayoutAlign="start center" class="red-fg"
|
||||
*ngIf="widgets.widget4.visits.ofTarget < 0">
|
||||
<mat-icon class="red-fg mr-4">trending_down</mat-icon>
|
||||
<span>{{widgets.widget4.visits.ofTarget}}%</span>
|
||||
</div>
|
||||
<div class="ml-4 text-nowrap">of target</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="p-16 pt-0">
|
||||
<span class="green-fg" *ngIf="widgets.widget4.visits.ofTarget > 0">
|
||||
{{widgets.widget4.visits.ofTarget}}%
|
||||
</span>
|
||||
<span class="red-fg" *ngIf="widgets.widget4.visits.ofTarget < 0">
|
||||
{{widgets.widget4.visits.ofTarget}}%
|
||||
</span>
|
||||
<span> of target</span>
|
||||
</div>
|
||||
|
||||
<div class="h-64">
|
||||
<ngx-charts-bar-vertical
|
||||
[scheme]="widgets.widget4.scheme"
|
||||
[results]="widgets.widget4.data">
|
||||
</ngx-charts-bar-vertical>
|
||||
<div class="h-96 w-100-p">
|
||||
<canvas baseChart
|
||||
[datasets]="widgets.widget4.datasets"
|
||||
[labels]="widgets.widget4.labels"
|
||||
[colors]="widgets.widget4.colors"
|
||||
[options]="widgets.widget4.options"
|
||||
[chartType]="widgets.widget4.chartType">
|
||||
</canvas>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@@ -181,11 +188,11 @@
|
||||
</div>
|
||||
|
||||
<!-- Widget 5 -->
|
||||
<div class="pt-32 pb-24 font-size-18 font-weight-300">
|
||||
<div class="pt-48 pb-24 font-size-18 font-weight-300">
|
||||
How many pages your users visit?
|
||||
</div>
|
||||
|
||||
<div class="white-bg mat-elevation-z2">
|
||||
<div class="fuse-card auto-width">
|
||||
|
||||
<div class="position-relative p-24"
|
||||
fxLayout="row" fxLayoutAlign="space-between center">
|
||||
@@ -220,22 +227,22 @@
|
||||
<!-- / Widget 5 -->
|
||||
|
||||
<!-- Widget 6 -->
|
||||
<div class="pt-32 pb-24 font-size-18 font-weight-300">
|
||||
<div class="pt-48 pb-24 font-size-18 font-weight-300">
|
||||
Where are your users?
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="fuse-card auto-width p-16">
|
||||
|
||||
<agm-map class="h-640 w-100-p"
|
||||
[minZoom]="2"
|
||||
[maxZoom]="2"
|
||||
[mapDraggable]="false"
|
||||
[fullscreenControl]="false"
|
||||
[panControl]="false"
|
||||
[rotateControl]="false"
|
||||
[zoomControl]="false"
|
||||
[scaleControl]="false"
|
||||
[streetViewControl]="false"
|
||||
[scrollwheel]="false">
|
||||
[scrollwheel]="false"
|
||||
[styles]="widgets.widget6.styles">
|
||||
<agm-marker
|
||||
*ngFor="let marker of widgets.widget6.markers"
|
||||
[latitude]="marker.lat"
|
||||
@@ -247,235 +254,250 @@
|
||||
|
||||
</agm-marker>
|
||||
</agm-map>
|
||||
|
||||
</div>
|
||||
<!-- / Widget 6 -->
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="right">
|
||||
|
||||
<div fxLayout="column">
|
||||
<div fxLayout="row" fxLayoutWrap
|
||||
fxLayout.gt-md="column">
|
||||
|
||||
<!-- Widget 7 -->
|
||||
<div class="pb-24 font-size-18 font-weight-300">
|
||||
What are your top devices?
|
||||
</div>
|
||||
<div class="mb-48" [ngClass.lt-lg]="'mr-32'">
|
||||
|
||||
<div class="fuse-card mb-32">
|
||||
|
||||
<div class="p-16">
|
||||
<div class="h1 font-weight-300">Sessions by device</div>
|
||||
<div class="pb-24 font-size-18 font-weight-300">
|
||||
What are your top devices?
|
||||
</div>
|
||||
|
||||
<div class="h-200">
|
||||
<ngx-charts-pie-chart
|
||||
[scheme]="widgets.widget7.scheme"
|
||||
[results]="widgets.widget7.devices"
|
||||
[doughnut]="true">
|
||||
</ngx-charts-pie-chart>
|
||||
</div>
|
||||
<div class="fuse-card">
|
||||
|
||||
<div class="p-16" fxLayout="row" fxLayoutAlign="center center">
|
||||
<div class="p-16">
|
||||
<div class="h1 font-weight-300">Sessions by device</div>
|
||||
</div>
|
||||
|
||||
<div class="px-16" fxLayout="column" fxLayoutAlign="start center"
|
||||
*ngFor="let device of widgets.widget7.devices">
|
||||
<div class="h-200">
|
||||
<ngx-charts-pie-chart
|
||||
*fuseIfOnDom
|
||||
[scheme]="widgets.widget7.scheme"
|
||||
[results]="widgets.widget7.devices"
|
||||
[doughnut]="true">
|
||||
</ngx-charts-pie-chart>
|
||||
</div>
|
||||
|
||||
<div class="h4 secondary-text">{{device.name}}</div>
|
||||
<div class="h2 font-weight-300 py-8">{{device.value}}%</div>
|
||||
<div class="p-16" fxLayout="row" fxLayoutAlign="center center">
|
||||
|
||||
<div fxLayout="row" fxLayoutAlign="center center">
|
||||
<mat-icon class="s-18 pr-4 red-fg"
|
||||
*ngIf="device.change < 0">
|
||||
arrow_downward
|
||||
</mat-icon>
|
||||
<div class="px-16" fxLayout="column" fxLayoutAlign="start center"
|
||||
*ngFor="let device of widgets.widget7.devices">
|
||||
|
||||
<mat-icon class="s-18 pr-4 green-fg"
|
||||
*ngIf="device.change > 0">
|
||||
arrow_upward
|
||||
</mat-icon>
|
||||
<div class="h4 secondary-text">{{device.name}}</div>
|
||||
<div class="h2 font-weight-300 py-8">{{device.value}}%</div>
|
||||
|
||||
<div class="h5 red-fg"
|
||||
[ngClass]="{'red-fg': device.change < 0, 'green-fg': device.change > 0}">
|
||||
{{device.change}}%
|
||||
<div fxLayout="row" fxLayoutAlign="center center">
|
||||
<mat-icon class="s-18 pr-4 red-fg"
|
||||
*ngIf="device.change < 0">
|
||||
arrow_downward
|
||||
</mat-icon>
|
||||
|
||||
<mat-icon class="s-18 pr-4 green-fg"
|
||||
*ngIf="device.change > 0">
|
||||
arrow_upward
|
||||
</mat-icon>
|
||||
|
||||
<div class="h5 red-fg"
|
||||
[ngClass]="{'red-fg': device.change < 0, 'green-fg': device.change > 0}">
|
||||
{{device.change}}%
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="card-divider mb-0"></div>
|
||||
|
||||
<div class="card-divider mb-0"></div>
|
||||
<div class="px-16" fxLayout="row" fxLayoutAlign="space-between center">
|
||||
<mat-form-field>
|
||||
<mat-select class="simplified" value="7days">
|
||||
<mat-option value="today">Today</mat-option>
|
||||
<mat-option value="yesterday">Yesterday</mat-option>
|
||||
<mat-option value="7days">Last 7 days</mat-option>
|
||||
<mat-option value="28days">Last 28 days</mat-option>
|
||||
<mat-option value="90days">Last 90 days</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
|
||||
<div class="px-16" fxLayout="row" fxLayoutAlign="space-between center">
|
||||
<mat-form-field>
|
||||
<mat-select class="simplified" value="7days">
|
||||
<mat-option value="today">Today</mat-option>
|
||||
<mat-option value="yesterday">Yesterday</mat-option>
|
||||
<mat-option value="7days">Last 7 days</mat-option>
|
||||
<mat-option value="28days">Last 28 days</mat-option>
|
||||
<mat-option value="90days">Last 90 days</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<button mat-button color="accent">OVERVIEW</button>
|
||||
</div>
|
||||
|
||||
<button mat-button color="accent">OVERVIEW</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- / Widget 7 -->
|
||||
|
||||
<!-- Widget 8 -->
|
||||
<div class="pb-24 font-size-18 font-weight-300">
|
||||
How are your sales?
|
||||
</div>
|
||||
<div class="mb-48" [ngClass.lt-lg]="'mr-32'">
|
||||
|
||||
<div class="fuse-card mb-32">
|
||||
<div class="pb-24 font-size-18 font-weight-300">
|
||||
How are your sales?
|
||||
</div>
|
||||
|
||||
<div class="mat-light-blue-600-bg">
|
||||
<div class="fuse-card">
|
||||
|
||||
<div class="p-16" fxLayout="row" fxLayoutAlign="space-between center">
|
||||
<div class="pr-16">
|
||||
<div class="h1 font-weight-300">Sales</div>
|
||||
<div class="h5 secondary-text">Lifetime sum of your sales</div>
|
||||
<div class="mat-light-blue-600-bg">
|
||||
|
||||
<div class="p-16" fxLayout="row" fxLayoutAlign="space-between center">
|
||||
<div class="pr-16">
|
||||
<div class="h1 font-weight-300">Sales</div>
|
||||
<div class="h5 secondary-text">Lifetime sum of your sales</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<button mat-icon-button [matMenuTriggerFor]="card19Menu" aria-label="more">
|
||||
<mat-icon>more_vert</mat-icon>
|
||||
</button>
|
||||
|
||||
<mat-menu #card19Menu="matMenu">
|
||||
<button mat-menu-item>
|
||||
<mat-icon>trending_up</mat-icon>
|
||||
<span>Trend</span>
|
||||
</button>
|
||||
<button mat-menu-item>
|
||||
<mat-icon>history</mat-icon>
|
||||
<span>History</span>
|
||||
</button>
|
||||
<button mat-menu-item>
|
||||
<mat-icon>notifications_off</mat-icon>
|
||||
<span>Disable alerts</span>
|
||||
</button>
|
||||
</mat-menu>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-16 pt-8" fxLayout="row" fxLayoutAlign="space-between end">
|
||||
<div class="font-size-48 font-weight-300 line-height-1">{{widgets.widget8.today}}</div>
|
||||
<div fxLayout="row" fxLayoutAlign="start center">
|
||||
<mat-icon *ngIf="widgets.widget8.change.value > 0">trending_up</mat-icon>
|
||||
<mat-icon *ngIf="widgets.widget8.change.value < 0">trending_down</mat-icon>
|
||||
<div class="ml-8">{{widgets.widget8.change.value}}
|
||||
({{widgets.widget8.change.percentage}}%)
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<mat-tab-group backgroundColor="accent">
|
||||
<mat-tab label="1DAY">
|
||||
<div class="h-200 my-16">
|
||||
<ngx-charts-line-chart
|
||||
*fuseIfOnDom
|
||||
[scheme]="widgets.widget8.scheme"
|
||||
[results]="widgets.widget8.data"
|
||||
[xAxis]="false"
|
||||
[yAxis]="true"
|
||||
[yScaleMin]="widgets.widget8.dataMin"
|
||||
[yScaleMax]="widgets.widget8.dataMax">
|
||||
</ngx-charts-line-chart>
|
||||
</div>
|
||||
</mat-tab>
|
||||
|
||||
<mat-tab label="1WEEK">
|
||||
<div class="h-200 my-16">
|
||||
<ngx-charts-line-chart
|
||||
*fuseIfOnDom
|
||||
[scheme]="widgets.widget8.scheme"
|
||||
[results]="widgets.widget8.data"
|
||||
[xAxis]="false"
|
||||
[yAxis]="true"
|
||||
[yScaleMin]="widgets.widget8.dataMin"
|
||||
[yScaleMax]="widgets.widget8.dataMax">
|
||||
</ngx-charts-line-chart>
|
||||
</div>
|
||||
</mat-tab>
|
||||
|
||||
<mat-tab label="1MONTH">
|
||||
<div class="h-200 my-16">
|
||||
<ngx-charts-line-chart
|
||||
*fuseIfOnDom
|
||||
[scheme]="widgets.widget8.scheme"
|
||||
[results]="widgets.widget8.data"
|
||||
[xAxis]="false"
|
||||
[yAxis]="true"
|
||||
[yScaleMin]="widgets.widget8.dataMin"
|
||||
[yScaleMax]="widgets.widget8.dataMax">
|
||||
</ngx-charts-line-chart>
|
||||
</div>
|
||||
</mat-tab>
|
||||
</mat-tab-group>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- / Widget 8 -->
|
||||
|
||||
<!-- Widget 9 -->
|
||||
<div class="mb-48" [ngClass.lt-lg]="'mr-32'">
|
||||
|
||||
<div class="pb-24 font-size-18 font-weight-300" [ngClass.lt-lg]="'pt-0'">
|
||||
What are your top campaigns?
|
||||
</div>
|
||||
|
||||
<div class="fuse-card">
|
||||
|
||||
<div class="p-16" fxLayout="row" fxLayoutAlign="space-between center">
|
||||
<div class="h1 pr-16">Top campaigns</div>
|
||||
|
||||
<div>
|
||||
<button mat-icon-button [matMenuTriggerFor]="card19Menu" aria-label="more">
|
||||
<button mat-icon-button [matMenuTriggerFor]="card20Menu" aria-label="more">
|
||||
<mat-icon>more_vert</mat-icon>
|
||||
</button>
|
||||
|
||||
<mat-menu #card19Menu="matMenu">
|
||||
<button mat-menu-item>
|
||||
<mat-icon>trending_up</mat-icon>
|
||||
<span>Trend</span>
|
||||
<mat-menu #card20Menu="matMenu">
|
||||
<button fxLayout="row" fxLayoutAlign="start center" mat-menu-item>
|
||||
<mat-icon color="accent">check_box</mat-icon>
|
||||
<span>Show Clicks</span>
|
||||
</button>
|
||||
<button mat-menu-item>
|
||||
<mat-icon>history</mat-icon>
|
||||
<span>History</span>
|
||||
<button fxLayout="row" fxLayoutAlign="start center" mat-menu-item>
|
||||
<mat-icon color="accent">check_box</mat-icon>
|
||||
<span>Show Conversion</span>
|
||||
</button>
|
||||
<button mat-menu-item>
|
||||
<mat-icon>notifications_off</mat-icon>
|
||||
<span>Disable alerts</span>
|
||||
<button fxLayout="row" fxLayoutAlign="start center" mat-menu-item>
|
||||
<mat-icon>check_box_outline_blank</mat-icon>
|
||||
<span>Show CPC</span>
|
||||
</button>
|
||||
</mat-menu>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-16 pt-8" fxLayout="row" fxLayoutAlign="space-between end">
|
||||
<div class="font-size-48 font-weight-300 line-height-1">{{widgets.widget8.today}}</div>
|
||||
<div fxLayout="row" fxLayoutAlign="start center">
|
||||
<mat-icon *ngIf="widgets.widget8.change.value > 0">trending_up</mat-icon>
|
||||
<mat-icon *ngIf="widgets.widget8.change.value < 0">trending_down</mat-icon>
|
||||
<div class="ml-8">{{widgets.widget8.change.value}}
|
||||
({{widgets.widget8.change.percentage}}%)
|
||||
</div>
|
||||
</div>
|
||||
<table class="simple clickable">
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th class="text-right">Clicks</th>
|
||||
<th class="text-right">Conv</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr *ngFor="let row of widgets.widget9.rows">
|
||||
<td>{{row.title}}</td>
|
||||
<td class="text-right">{{row.clicks}}</td>
|
||||
<td class="text-right">{{row.conversion}}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div class="card-divider full-width"></div>
|
||||
|
||||
<div class="p-8 pt-16" fxLayout="row" fxLayoutAlign="start center">
|
||||
<button mat-button color="accent">GO TO CAMPAIGNS</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<mat-tab-group backgroundColor="accent">
|
||||
<mat-tab label="1DAY">
|
||||
<div class="h-200 my-16">
|
||||
<ngx-charts-line-chart
|
||||
*fuseIfOnDom
|
||||
[scheme]="widgets.widget8.scheme"
|
||||
[results]="widgets.widget8.data"
|
||||
[xAxis]="false"
|
||||
[yAxis]="true"
|
||||
[yScaleMin]="widgets.widget8.dataMin"
|
||||
[yScaleMax]="widgets.widget8.dataMax">
|
||||
</ngx-charts-line-chart>
|
||||
</div>
|
||||
</mat-tab>
|
||||
|
||||
<mat-tab label="1WEEK">
|
||||
<div class="h-200 my-16">
|
||||
<ngx-charts-line-chart
|
||||
*fuseIfOnDom
|
||||
[scheme]="widgets.widget8.scheme"
|
||||
[results]="widgets.widget8.data"
|
||||
[xAxis]="false"
|
||||
[yAxis]="true"
|
||||
[yScaleMin]="widgets.widget8.dataMin"
|
||||
[yScaleMax]="widgets.widget8.dataMax">
|
||||
</ngx-charts-line-chart>
|
||||
</div>
|
||||
</mat-tab>
|
||||
|
||||
<mat-tab label="1MONTH">
|
||||
<div class="h-200 my-16">
|
||||
<ngx-charts-line-chart
|
||||
*fuseIfOnDom
|
||||
[scheme]="widgets.widget8.scheme"
|
||||
[results]="widgets.widget8.data"
|
||||
[xAxis]="false"
|
||||
[yAxis]="true"
|
||||
[yScaleMin]="widgets.widget8.dataMin"
|
||||
[yScaleMax]="widgets.widget8.dataMax">
|
||||
</ngx-charts-line-chart>
|
||||
</div>
|
||||
</mat-tab>
|
||||
</mat-tab-group>
|
||||
|
||||
</div>
|
||||
<!-- / Widget 8 -->
|
||||
|
||||
<!-- Widget 9 -->
|
||||
<div class="pb-24 font-size-18 font-weight-300">
|
||||
What are your top campaigns?
|
||||
</div>
|
||||
|
||||
<div class="fuse-card mb-32">
|
||||
|
||||
<div class="p-16" fxLayout="row" fxLayoutAlign="space-between center">
|
||||
<div class="h1 pr-16">Top campaigns</div>
|
||||
|
||||
<div>
|
||||
<button mat-icon-button [matMenuTriggerFor]="card20Menu" aria-label="more">
|
||||
<mat-icon>more_vert</mat-icon>
|
||||
</button>
|
||||
|
||||
<mat-menu #card20Menu="matMenu">
|
||||
<button fxLayout="row" fxLayoutAlign="start center" mat-menu-item>
|
||||
<mat-icon color="accent">check_box</mat-icon>
|
||||
<span>Show Clicks</span>
|
||||
</button>
|
||||
<button fxLayout="row" fxLayoutAlign="start center" mat-menu-item>
|
||||
<mat-icon color="accent">check_box</mat-icon>
|
||||
<span>Show Conversion</span>
|
||||
</button>
|
||||
<button fxLayout="row" fxLayoutAlign="start center" mat-menu-item>
|
||||
<mat-icon>check_box_outline_blank</mat-icon>
|
||||
<span>Show CPC</span>
|
||||
</button>
|
||||
</mat-menu>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<table class="simple clickable">
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th class="text-right">Clicks</th>
|
||||
<th class="text-right">Conv</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr *ngFor="let row of widgets.widget9.rows">
|
||||
<td>{{row.title}}</td>
|
||||
<td class="text-right">{{row.clicks}}</td>
|
||||
<td class="text-right">{{row.conversion}}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div class="card-divider full-width"></div>
|
||||
|
||||
<div class="p-8 pt-16" fxLayout="row" fxLayoutAlign="start center">
|
||||
<button mat-button color="accent">GO TO CAMPAIGNS</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- / widget 9 -->
|
||||
|
||||
@@ -485,5 +507,4 @@
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
@@ -1,37 +1,7 @@
|
||||
@import "src/app/core/scss/fuse";
|
||||
|
||||
#dashboard-analytics {
|
||||
|
||||
/*#widget1 {
|
||||
|
||||
.line-series {
|
||||
|
||||
.line {
|
||||
stroke-width: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.gridline-path {
|
||||
|
||||
&.gridline-path-horizontal {
|
||||
stroke: rgba(255, 255, 255, 0.12);
|
||||
}
|
||||
|
||||
&.gridline-path-vertical {
|
||||
stroke-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.tick {
|
||||
|
||||
text {
|
||||
fill: rgba(255, 255, 255, 0.37)
|
||||
}
|
||||
}
|
||||
|
||||
.tooltip-anchor {
|
||||
fill: rgba(255, 255, 255, 0.54);
|
||||
}
|
||||
}*/
|
||||
|
||||
.main-widget {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -39,16 +9,23 @@
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
flex: 1 0 auto;
|
||||
flex: 1 1 auto;
|
||||
padding: 32px;
|
||||
min-width: 0;
|
||||
|
||||
@include media-breakpoint-down('md') {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1 0 auto;
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
|
||||
.widget {
|
||||
flex: 1 0 auto;
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -58,6 +35,14 @@
|
||||
width: 320px;
|
||||
min-width: 320px;
|
||||
max-width: 320px;
|
||||
|
||||
@include media-breakpoint-down('md') {
|
||||
flex: 1 0 100%;
|
||||
margin-top: 32px;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
max-width: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -21,18 +21,18 @@ export class FuseNavigationModel implements FuseNavigationModelInterface
|
||||
'type' : 'collapse',
|
||||
'icon' : 'dashboard',
|
||||
'children' : [
|
||||
{
|
||||
'id' : 'analytics',
|
||||
'title': 'Analytics',
|
||||
'type' : 'item',
|
||||
'url' : '/apps/dashboards/analytics'
|
||||
},
|
||||
{
|
||||
'id' : 'project',
|
||||
'title': 'Project',
|
||||
'type' : 'item',
|
||||
'url' : '/apps/dashboards/project'
|
||||
},
|
||||
{
|
||||
'id' : 'analytics',
|
||||
'title': 'Analytics',
|
||||
'type' : 'item',
|
||||
'url' : '/apps/dashboards/analytics'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
|
||||
Reference in New Issue
Block a user