purchasing/fuse-angular
3
0
Fork 0
mirror of https://github.com/richard-loafle/fuse-angular.git synced 2025-10-31 16:43:32 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fixed some naming inconsistencies in Project dashboard

Browse Source 
+ Added fake db for Analytics Dashboard
This commit is contained in:
Sercan Yemen 2018-02-01 15:30:30 +03:00
parent 8431c19133
commit dfd430712d
8 changed files with 829 additions and 136 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

518
src/app/fuse-fake-db/dashboard-analytics.ts Normal file
View File

@ -0,0 +1,518 @@
export class AnalyticsDashboardDb
{
public static widgets = {
/*widget2: {
overallGrowthPercentage: 17,
overallGrowthTrend : 'decrease',
averageDailyPercentage : 28,
averageDailyTrend : 'increase'
},*/
widget1: {
chartType: 'line',
datasets : {
'2015': [
{
label: 'Sales',
data : [1.9, 3, 3.4, 2.2, 2.9, 3.9, 2.5, 3.8, 4.1, 3.8, 3.2, 2.9],
fill : 'start'
}
],
'2016': [
{
label: 'Sales',
data : [2.2, 2.9, 3.9, 2.5, 3.8, 3.2, 2.9, 1.9, 3, 3.4, 4.1, 3.8],
fill : 'start'
}
],
'2017': [
{
label: 'Sales',
data : [3.9, 2.5, 3.8, 4.1, 1.9, 3, 3.8, 3.2, 2.9, 3.4, 2.2, 2.9],
fill : 'start'
}
]
},
labels : ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'],
colors : [
{
borderColor : '#42a5f5',
backgroundColor : '#42a5f5',
pointBackgroundColor : '#1e88e5',
pointHoverBackgroundColor: '#1e88e5',
pointBorderColor : '#ffffff',
pointHoverBorderColor : '#ffffff'
}
],
options : {
spanGaps : false,
legend : {
display: false
},
maintainAspectRatio: false,
layout : {
padding: {
top : 32,
left : 32,
right: 32
}
},
elements : {
point: {
radius : 4,
borderWidth : 2,
hoverRadius : 4,
hoverBorderWidth: 2
},
line : {
tension: 0
}
},
scales : {
xAxes: [
{
gridLines: {
display : false,
drawBorder : false,
tickMarkLength: 18
},
ticks : {
fontColor: '#ffffff'
}
}
],
yAxes: [
{
display: false,
ticks : {
min : 1.5,
max : 5,
stepSize: 0.5
}
}
]
},
plugins : {
filler : {
propagate: false
},
xLabelsOnTop: {
active: true
}
}
}
},
widget2: {
conversion: {
value : 492,
ofTarget: 22
},
scheme : {
domain: ['#5c84f1']
},
data : [
{
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
}
]
},
widget3: {
impressions: {
value : '87.4M',
ofTarget: 12.3
},
scheme : {
domain: ['#5c84f1']
},
data : [
{
name : 'Impressions',
series: [
{
name : 'Jan 1',
value: 670000
},
{
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
}
]
}
]
},
widget4: {
visits: {
value : 882,
ofTarget: -12
},
scheme: {
domain: ['#f44336']
},
data : [
{
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
}
]
},
widget5: {
chartType: 'line',
datasets : {
'yesterday': [
{
label: 'Visitors',
data : [190, 300, 340, 220, 290, 390, 250, 380, 410, 380, 320, 290],
fill : 'start'
},
{
label: 'Page views',
data : [2200, 2900, 3900, 2500, 3800, 3200, 2900, 1900, 3000, 3400, 4100, 3800],
fill : 'start'
}
],
'today' : [
{
label: 'Visitors',
data : [410, 380, 320, 290, 190, 390, 250, 380, 300, 340, 220, 290],
fill : 'start'
},
{
label: 'Page Views',
data : [3000, 3400, 4100, 3800, 2200, 3200, 2900, 1900, 2900, 3900, 2500, 3800],
fill : 'start'
}
]
},
labels : ['12am', '2am', '4am', '6am', '8am', '10am', '12pm', '2pm', '4pm', '6pm', '8pm', '10pm'],
colors : [
{
borderColor : '#3949ab',
backgroundColor : '#3949ab',
pointBackgroundColor : '#3949ab',
pointHoverBackgroundColor: '#3949ab',
pointBorderColor : '#ffffff',
pointHoverBorderColor : '#ffffff'
},
{
borderColor : 'rgba(30, 136, 229, 0.87)',
backgroundColor : 'rgba(30, 136, 229, 0.87)',
pointBackgroundColor : 'rgba(30, 136, 229, 0.87)',
pointHoverBackgroundColor: 'rgba(30, 136, 229, 0.87)',
pointBorderColor : '#ffffff',
pointHoverBorderColor : '#ffffff'
}
],
options : {
spanGaps : false,
legend : {
display: false
},
maintainAspectRatio: false,
tooltips : {
position : 'nearest',
mode : 'index',
intersect: false
},
layout : {
padding: {
left : 24,
right: 32
}
},
elements : {
point: {
radius : 4,
borderWidth : 2,
hoverRadius : 4,
hoverBorderWidth: 2
}
},
scales : {
xAxes: [
{
gridLines: {
display: false
},
ticks : {
fontColor: 'rgba(0,0,0,0.54)'
}
}
],
yAxes: [
{
gridLines: {
tickMarkLength: 16
},
ticks : {
stepSize: 1000
}
}
]
},
plugins : {
filler: {
propagate: false
}
}
}
},
widget6: {
markers: [
{
lat: 52,
lng: -73,
label: '120'
},
{
lat: 37,
lng: -104,
label: '498'
},
{
lat: 21,
lng: -7,
label: '443'
},
{
lat: 55,
lng: 75,
label: '332'
},
{
lat: 51,
lng: 7,
label: '50'
},
{
lat: 31,
lng: 12,
label: '221'
},
{
lat: 45,
lng: 44,
label: '455'
},
{
lat: -26,
lng: 134,
label: '231'
},
{
lat: -9,
lng: -60,
label: '67'
},
{
lat: 33,
lng: 104,
label: '665'
}
]
},
widget7: {
scheme : {
domain: ['#4867d2', '#5c84f1', '#89a9f4']
},
devices: [
{
name : 'Desktop',
value : 92.8,
change: -0.6
},
{
name : 'Mobile',
value : 6.1,
change: 0.7
},
{
name : 'Tablet',
value : 1.1,
change: 0.1
}
]
},
widget8: {
scheme : {
domain: ['#5c84f1']
},
today : '12,540',
change : {
value : 321,
percentage: 2.05
},
data : [
{
name : 'Sales',
series: [
{
name : 'Jan 1',
value: 540
},
{
name : 'Jan 2',
value: 539
},
{
name : 'Jan 3',
value: 538
},
{
name : 'Jan 4',
value: 539
},
{
name : 'Jan 5',
value: 540
},
{
name : 'Jan 6',
value: 539
},
{
name : 'Jan 7',
value: 540
}
]
}
],
dataMin: 538,
dataMax: 541
},
widget9: {
rows: [
{
title : 'Holiday Travel',
clicks : 3621,
conversion: 90
},
{
title : 'Get Away Deals',
clicks : 703,
conversion: 7
},
{
title : 'Airfare',
clicks : 532,
conversion: 0
},
{
title : 'Vacation',
clicks : 201,
conversion: 8
},
{
title : 'Hotels',
clicks : 94,
conversion: 4
}
]
}
};
}

2
src/app/fuse-fake-db/projects-dashboard.ts → src/app/fuse-fake-db/dashboard-project.ts
View File

@ -1,4 +1,4 @@
export class ProjectsDashboardDb export class ProjectDashboardDb
{ {
public static projects = [ public static projects = [
{ {

131
src/app/fuse-fake-db/fuse-fake-db.service.ts
View File

@ -1,62 +1,97 @@
import { InMemoryDbService } from 'angular-in-memory-web-api'; import { InMemoryDbService } from 'angular-in-memory-web-api';
import { MailFakeDb } from './mail'; import { ProjectDashboardDb } from './dashboard-project';
import { ChatFakeDb } from './chat'; import { AnalyticsDashboardDb } from './dashboard-analytics';
import { CalendarFakeDb } from './calendar'; import { CalendarFakeDb } from './calendar';
import { TodoFakeDb } from './todo';
import { ProfileFakeDb } from './profile';
import { ContactsFakeDb } from './contacts';
import { InvoiceFakeDb } from './invoice';
import { FileManagerFakeDb } from './file-manager';
import { SearchFakeDb } from './search';
import { QuickPanelFakeDb } from './quick-panel';
import { IconsFakeDb } from './icons';
import { ProjectsDashboardDb } from './projects-dashboard';
import { ScrumboardFakeDb } from './scrumboard';
import { FaqFakeDb } from './faq';
import { KnowledgeBaseFakeDb } from './knowledge-base';
import { ECommerceFakeDb } from './e-commerce'; import { ECommerceFakeDb } from './e-commerce';
import { AcademyFakeDb } from './academy'; import { AcademyFakeDb } from './academy';
import { MailFakeDb } from './mail';
import { ChatFakeDb } from './chat';
import { FileManagerFakeDb } from './file-manager';
import { ContactsFakeDb } from './contacts';
import { TodoFakeDb } from './todo';
import { ScrumboardFakeDb } from './scrumboard';
import { InvoiceFakeDb } from './invoice';
import { ProfileFakeDb } from './profile';
import { SearchFakeDb } from './search';
import { FaqFakeDb } from './faq';
import { KnowledgeBaseFakeDb } from './knowledge-base';
import { IconsFakeDb } from './icons';
import { QuickPanelFakeDb } from './quick-panel';
export class FuseFakeDbService implements InMemoryDbService export class FuseFakeDbService implements InMemoryDbService
{ {
createDb() createDb()
{ {
return { return {
'mail-mails' : MailFakeDb.mails, // Dashboards
'mail-folders' : MailFakeDb.folders, 'project-dashboard-projects' : ProjectDashboardDb.projects,
'mail-filters' : MailFakeDb.filters, 'project-dashboard-widgets' : ProjectDashboardDb.widgets,
'mail-labels' : MailFakeDb.labels, 'analytics-dashboard-widgets': AnalyticsDashboardDb.widgets,
'chat-contacts' : ChatFakeDb.contacts,
'chat-chats' : ChatFakeDb.chats, // Calendar
'chat-user' : ChatFakeDb.user, 'calendar': CalendarFakeDb.data,
'calendar' : CalendarFakeDb.data,
'todo-todos' : TodoFakeDb.todos, // E-Commerce
'todo-filters' : TodoFakeDb.filters, 'e-commerce-dashboard': ECommerceFakeDb.dashboard,
'todo-tags' : TodoFakeDb.tags, 'e-commerce-products' : ECommerceFakeDb.products,
'profile-timeline' : ProfileFakeDb.timeline, 'e-commerce-orders' : ECommerceFakeDb.orders,
'profile-photos-videos' : ProfileFakeDb.photosVideos,
'profile-about' : ProfileFakeDb.about, // Academy
'contacts-contacts' : ContactsFakeDb.contacts, 'academy-categories': AcademyFakeDb.categories,
'contacts-user' : ContactsFakeDb.user, 'academy-courses' : AcademyFakeDb.courses,
'invoice' : InvoiceFakeDb.invoice, 'academy-course' : AcademyFakeDb.course,
'file-manager' : FileManagerFakeDb.files,
'search-classic' : SearchFakeDb.classic, // Mail
'search-table' : SearchFakeDb.table, 'mail-mails' : MailFakeDb.mails,
'quick-panel-notes' : QuickPanelFakeDb.notes, 'mail-folders': MailFakeDb.folders,
'quick-panel-events' : QuickPanelFakeDb.events, 'mail-filters': MailFakeDb.filters,
'icons' : IconsFakeDb.icons, 'mail-labels' : MailFakeDb.labels,
'projects-dashboard-projects': ProjectsDashboardDb.projects,
'projects-dashboard-widgets' : ProjectsDashboardDb.widgets, // Chat
'scrumboard-boards' : ScrumboardFakeDb.boards, 'chat-contacts': ChatFakeDb.contacts,
'faq' : FaqFakeDb.data, 'chat-chats' : ChatFakeDb.chats,
'knowledge-base' : KnowledgeBaseFakeDb.data, 'chat-user' : ChatFakeDb.user,
'e-commerce-dashboard' : ECommerceFakeDb.dashboard,
'e-commerce-products' : ECommerceFakeDb.products, // File Manager
'e-commerce-orders' : ECommerceFakeDb.orders, 'file-manager': FileManagerFakeDb.files,
'academy-categories' : AcademyFakeDb.categories,
'academy-courses' : AcademyFakeDb.courses, // Contacts
'academy-course' : AcademyFakeDb.course 'contacts-contacts': ContactsFakeDb.contacts,
'contacts-user' : ContactsFakeDb.user,
// Todo
'todo-todos' : TodoFakeDb.todos,
'todo-filters': TodoFakeDb.filters,
'todo-tags' : TodoFakeDb.tags,
// Scrumboard
'scrumboard-boards': ScrumboardFakeDb.boards,
// Invoice
'invoice': InvoiceFakeDb.invoice,
// Profile
'profile-timeline' : ProfileFakeDb.timeline,
'profile-photos-videos': ProfileFakeDb.photosVideos,
'profile-about' : ProfileFakeDb.about,
// Search
'search-classic': SearchFakeDb.classic,
'search-table' : SearchFakeDb.table,
// FAQ
'faq': FaqFakeDb.data,
// Knowledge base
'knowledge-base': KnowledgeBaseFakeDb.data,
// Icons
'icons': IconsFakeDb.icons,
// Quick Panel
'quick-panel-notes' : QuickPanelFakeDb.notes,
'quick-panel-events': QuickPanelFakeDb.events
}; };
} }
} }

214
src/app/main/content/apps/dashboards/project/project.component.html
View File

@ -10,7 +10,9 @@
<div fxLayout="row" fxLayoutAlign="space-between start"> <div fxLayout="row" fxLayoutAlign="space-between start">
<span class="mat-display-1 mb-0 welcome-message" *fuseIfOnDom [@animate]="{value:'*',params:{x:'50px'}}">Welcome back, John!</span> <span class="mat-display-1 mb-0 welcome-message" *fuseIfOnDom
[@animate]="{value:'*',params:{x:'50px'}}">Welcome back, John!
</span>
<button mat-icon-button fuseMatSidenavToggler="dashboards-right-sidenav" fxHide.gt-md> <button mat-icon-button fuseMatSidenavToggler="dashboards-right-sidenav" fxHide.gt-md>
<mat-icon>menu</mat-icon> <mat-icon>menu</mat-icon>
@ -21,7 +23,8 @@
<div class="selected-project">{{selectedProject.name}}</div> <div class="selected-project">{{selectedProject.name}}</div>
<button mat-icon-button class="project-selector" [matMenuTriggerFor]="projectsMenu" aria-label="Select project"> <button mat-icon-button class="project-selector" [matMenuTriggerFor]="projectsMenu"
aria-label="Select project">
<mat-icon>more_horiz</mat-icon> <mat-icon>more_horiz</mat-icon>
</button> </button>
@ -41,16 +44,20 @@
<mat-tab label="Home"> <mat-tab label="Home">
<div class="widget-group p-12" fxLayout="row" fxFlex="100" fxLayoutWrap *fuseIfOnDom [@animateStagger]="{value:'50'}"> <div class="widget-group grey-100-bg p-12" fxLayout="row" fxFlex="100" fxLayoutWrap *fuseIfOnDom
[@animateStagger]="{value:'50'}">
<!-- WIDGET 1 --> <!-- WIDGET 1 -->
<fuse-widget [@animate]="{value:'*',params:{y:'100%'}}" class="widget" fxLayout="column" fxFlex="100" fxFlex.gt-xs="50" fxFlex.gt-md="25"> <fuse-widget [@animate]="{value:'*',params:{y:'100%'}}" class="widget" fxLayout="column"
fxFlex="100" fxFlex.gt-xs="50" fxFlex.gt-md="25">
<!-- Front --> <!-- Front -->
<div class="fuse-widget-front mat-white-bg mat-elevation-z2"> <div class="fuse-widget-front mat-white-bg mat-elevation-z2">
<div class="pl-16 pr-8 py-16 h-52" fxLayout="row" fxLayoutAlign="space-between center"> <div class="pl-16 pr-8 py-16 h-52" fxLayout="row"
fxLayoutAlign="space-between center">
<mat-form-field> <mat-form-field>
<mat-select class="simplified font-size-16" [(ngModel)]="widgets.widget1.currentRange" <mat-select class="simplified font-size-16"
[(ngModel)]="widgets.widget1.currentRange"
aria-label="Change range"> aria-label="Change range">
<mat-option *ngFor="let range of widgets.widget1.ranges | keys" <mat-option *ngFor="let range of widgets.widget1.ranges | keys"
[value]="range.key"> [value]="range.key">
@ -67,12 +74,17 @@
<div class="light-blue-fg font-size-72 line-height-72"> <div class="light-blue-fg font-size-72 line-height-72">
{{widgets.widget1.data.count[widgets.widget1.currentRange]}} {{widgets.widget1.data.count[widgets.widget1.currentRange]}}
</div> </div>
<div class="h3 secondary-text font-weight-500">{{widgets.widget1.data.label}}</div> <div class="h3 secondary-text font-weight-500">{{widgets.widget1.data.label}}
</div>
</div> </div>
<div class="p-16 grey-50-bg border-top" fxLayout="row" fxLayoutAlign="start center"> <div class="p-16 grey-50-bg border-top" fxLayout="row" fxLayoutAlign="start center">
<span class="h4 secondary-text text-truncate">{{widgets.widget1.data.extra.label}}:</span> <span class="h4 secondary-text text-truncate">
<span class="h4 ml-8">{{widgets.widget1.data.extra.count[widgets.widget1.currentRange]}}</span> {{widgets.widget1.data.extra.label}}:
</span>
<span class="h4 ml-8">
{{widgets.widget1.data.extra.count[widgets.widget1.currentRange]}}
</span>
</div> </div>
</div> </div>
<!-- / Front --> <!-- / Front -->
@ -94,14 +106,17 @@
<!-- / WIDGET 1 --> <!-- / WIDGET 1 -->
<!-- WIDGET 2 --> <!-- WIDGET 2 -->
<fuse-widget [@animate]="{value:'*',params:{y:'100%'}}" class="widget" fxLayout="column" fxFlex="100" fxFlex.gt-xs="50" fxFlex.gt-md="25"> <fuse-widget [@animate]="{value:'*',params:{y:'100%'}}" class="widget" fxLayout="column"
fxFlex="100" fxFlex.gt-xs="50" fxFlex.gt-md="25">
<!-- Front --> <!-- Front -->
<div class="fuse-widget-front mat-white-bg mat-elevation-z2"> <div class="fuse-widget-front mat-white-bg mat-elevation-z2">
<div class="pl-16 pr-8 py-16 h-52" fxLayout="row" fxLayoutAlign="space-between center"> <div class="pl-16 pr-8 py-16 h-52" fxLayout="row"
fxLayoutAlign="space-between center">
<div class="h3">{{widgets.widget2.title}}</div> <div class="h3">{{widgets.widget2.title}}</div>
<button mat-icon-button fuseWidgetToggle class="fuse-widget-flip-button" aria-label="more"> <button mat-icon-button fuseWidgetToggle class="fuse-widget-flip-button"
aria-label="more">
<mat-icon>more_vert</mat-icon> <mat-icon>more_vert</mat-icon>
</button> </button>
</div> </div>
@ -110,11 +125,14 @@
<div class="red-fg font-size-72 line-height-72"> <div class="red-fg font-size-72 line-height-72">
{{widgets.widget2.data.count}} {{widgets.widget2.data.count}}
</div> </div>
<div class="h3 secondary-text font-weight-500">{{widgets.widget2.data.label}}</div> <div class="h3 secondary-text font-weight-500">{{widgets.widget2.data.label}}
</div>
</div> </div>
<div class="p-16 grey-50-bg border-top" fxLayout="row" fxLayoutAlign="start center"> <div class="p-16 grey-50-bg border-top" fxLayout="row" fxLayoutAlign="start center">
<span class="h4 secondary-text text-truncate">{{widgets.widget2.data.extra.label}}:</span> <span class="h4 secondary-text text-truncate">
{{widgets.widget2.data.extra.label}}:
</span>
<span class="h4 ml-8">{{widgets.widget2.data.extra.count}}</span> <span class="h4 ml-8">{{widgets.widget2.data.extra.count}}</span>
</div> </div>
</div> </div>
@ -137,14 +155,17 @@
<!-- / WIDGET 2 --> <!-- / WIDGET 2 -->
<!-- WIDGET 3 --> <!-- WIDGET 3 -->
<fuse-widget [@animate]="{value:'*',params:{y:'100%'}}" class="widget" fxLayout="column" fxFlex="100" fxFlex.gt-xs="50" fxFlex.gt-md="25"> <fuse-widget [@animate]="{value:'*',params:{y:'100%'}}" class="widget" fxLayout="column"
fxFlex="100" fxFlex.gt-xs="50" fxFlex.gt-md="25">
<!-- Front --> <!-- Front -->
<div class="fuse-widget-front mat-white-bg mat-elevation-z2"> <div class="fuse-widget-front mat-white-bg mat-elevation-z2">
<div class="pl-16 pr-8 py-16 h-52" fxLayout="row" fxLayoutAlign="space-between center"> <div class="pl-16 pr-8 py-16 h-52" fxLayout="row"
fxLayoutAlign="space-between center">
<div class="h3">{{widgets.widget3.title}}</div> <div class="h3">{{widgets.widget3.title}}</div>
<button mat-icon-button fuseWidgetToggle class="fuse-widget-flip-button" aria-label="more"> <button mat-icon-button fuseWidgetToggle class="fuse-widget-flip-button"
aria-label="more">
<mat-icon>more_vert</mat-icon> <mat-icon>more_vert</mat-icon>
</button> </button>
</div> </div>
@ -153,11 +174,14 @@
<div class="orange-fg font-size-72 line-height-72"> <div class="orange-fg font-size-72 line-height-72">
{{widgets.widget3.data.count}} {{widgets.widget3.data.count}}
</div> </div>
<div class="h3 secondary-text font-weight-500">{{widgets.widget3.data.label}}</div> <div class="h3 secondary-text font-weight-500">{{widgets.widget3.data.label}}
</div>
</div> </div>
<div class="p-16 grey-50-bg border-top" fxLayout="row" fxLayoutAlign="start center"> <div class="p-16 grey-50-bg border-top" fxLayout="row" fxLayoutAlign="start center">
<span class="h4 secondary-text text-truncate">{{widgets.widget3.data.extra.label}}:</span> <span class="h4 secondary-text text-truncate">
{{widgets.widget3.data.extra.label}}:
</span>
<span class="h4 ml-8">{{widgets.widget3.data.extra.count}}</span> <span class="h4 ml-8">{{widgets.widget3.data.extra.count}}</span>
</div> </div>
</div> </div>
@ -180,26 +204,33 @@
<!-- / WIDGET 3 --> <!-- / WIDGET 3 -->
<!-- WIDGET 4 --> <!-- WIDGET 4 -->
<fuse-widget [@animate]="{value:'*',params:{y:'100%'}}" class="widget" fxLayout="column" fxFlex="100" fxFlex.gt-xs="50" fxFlex.gt-md="25"> <fuse-widget [@animate]="{value:'*',params:{y:'100%'}}" class="widget" fxLayout="column"
fxFlex="100" fxFlex.gt-xs="50" fxFlex.gt-md="25">
<!-- Front --> <!-- Front -->
<div class="fuse-widget-front mat-white-bg mat-elevation-z2"> <div class="fuse-widget-front mat-white-bg mat-elevation-z2">
<div class="pl-16 pr-8 py-16 h-52" fxLayout="row" fxLayoutAlign="space-between center"> <div class="pl-16 pr-8 py-16 h-52" fxLayout="row"
fxLayoutAlign="space-between center">
<div class="h3">{{widgets.widget4.title}}</div> <div class="h3">{{widgets.widget4.title}}</div>
<button mat-icon-button fuseWidgetToggle class="fuse-widget-flip-button" aria-label="more"> <button mat-icon-button fuseWidgetToggle class="fuse-widget-flip-button"
aria-label="more">
<mat-icon>more_vert</mat-icon> <mat-icon>more_vert</mat-icon>
</button> </button>
</div> </div>
<div class="pt-8 pb-32" fxLayout="column" fxLayoutAlign="center center"> <div class="pt-8 pb-32" fxLayout="column" fxLayoutAlign="center center">
<div class="blue-grey-fg font-size-72 line-height-72">{{widgets.widget4.data.count}} <div class="blue-grey-fg font-size-72 line-height-72">
{{widgets.widget4.data.count}}
</div>
<div class="h3 secondary-text font-weight-500">{{widgets.widget4.data.label}}
</div> </div>
<div class="h3 secondary-text font-weight-500">{{widgets.widget4.data.label}}</div>
</div> </div>
<div class="p-16 grey-50-bg border-top" fxLayout="row" fxLayoutAlign="start center"> <div class="p-16 grey-50-bg border-top" fxLayout="row" fxLayoutAlign="start center">
<span class="h4 secondary-text text-truncate">{{widgets.widget4.data.extra.label}}:</span> <span class="h4 secondary-text text-truncate">
{{widgets.widget4.data.extra.label}}:
</span>
<span class="h4 ml-8">{{widgets.widget4.data.extra.count}}</span> <span class="h4 ml-8">{{widgets.widget4.data.extra.count}}</span>
</div> </div>
</div> </div>
@ -221,18 +252,19 @@
</fuse-widget> </fuse-widget>
<!-- / WIDGET 4 --> <!-- / WIDGET 4 -->
<!-- WIDGET 5 --> <!-- WIDGET 5 -->
<fuse-widget [@animate]="{value:'*',params:{y:'100%'}}" class="widget" fxLayout="row" fxFlex="100"> <fuse-widget [@animate]="{value:'*',params:{y:'100%'}}" fxLayout="row" fxFlex="100"
class="widget widget5">
<!-- Front --> <!-- Front -->
<div class="fuse-widget-front mat-white-bg mat-elevation-z2"> <div class="fuse-widget-front mat-white-bg mat-elevation-z2">
<div class="px-16 border-bottom" fxLayout="row" fxLayoutAlign="space-between center" fxLayoutWrap> <div class="px-16 border-bottom" fxLayout="row" fxLayoutAlign="space-between center"
fxLayoutWrap>
<div fxFlex class="py-8 h3">{{widgets.widget5.title}}</div> <div fxFlex class="py-16 h3">{{widgets.widget5.title}}</div>
<div fxFlex="0 1 auto" class="py-8" fxLayout="row"> <div fxFlex="0 1 auto" class="py-16" fxLayout="row">
<button mat-button class="px-16" <button mat-button class="px-16"
*ngFor="let range of widgets.widget5.ranges | keys" *ngFor="let range of widgets.widget5.ranges | keys"
(click)="widget5.currentRange = range.key" (click)="widget5.currentRange = range.key"
@ -242,8 +274,9 @@
</div> </div>
</div> </div>
<div fxLayout="row" fxLayoutAlign="start end" fxLayoutWrap> <div fxLayout="row" fxLayoutAlign="start start" fxLayoutWrap>
<div class="h-420 mb-16" fxLayout="row" fxFlex="100" fxFlex.gt-sm="50">
<div class="h-420 my-16" fxLayout="row" fxFlex="100" fxFlex.gt-sm="50">
<ngx-charts-bar-vertical-stacked <ngx-charts-bar-vertical-stacked
*fuseIfOnDom *fuseIfOnDom
[scheme]="widget5.scheme" [scheme]="widget5.scheme"
@ -260,10 +293,12 @@
</ngx-charts-bar-vertical-stacked> </ngx-charts-bar-vertical-stacked>
</div> </div>
<div class="mb-16" fxFlex="100" fxFlex.gt-sm="50" fxLayoutAlign="row" fxLayoutWrap> <div class="my-16" fxFlex="100" fxFlex.gt-sm="50" fxLayoutAlign="row"
fxLayoutWrap>
<div fxLayout="column" fxFlex="100" fxFlex.gt-sm="50" fxLayoutAlign="center" <div fxLayout="column" fxFlex="100" fxFlex.gt-sm="50" fxLayoutAlign="center"
*ngFor="let widget of widgets.widget5.supporting | keys"> *ngFor="let widget of widgets.widget5.supporting | keys"
class="mb-24">
<div class="px-24"> <div class="px-24">
<div class="h4 secondary-text">{{widget.value.label}}</div> <div class="h4 secondary-text">{{widget.value.label}}</div>
@ -297,17 +332,19 @@
</fuse-widget> </fuse-widget>
<!-- / WIDGET 5 --> <!-- / WIDGET 5 -->
<!-- WIDGET 6 --> <!-- WIDGET 6 -->
<fuse-widget [@animate]="{value:'*',params:{y:'100%'}}" class="widget" fxLayout="column" fxFlex="100" fxFlex.gt-sm="50"> <fuse-widget [@animate]="{value:'*',params:{y:'100%'}}" class="widget" fxLayout="column"
fxFlex="100" fxFlex.gt-sm="50">
<!-- Front --> <!-- Front -->
<div class="fuse-widget-front mat-white-bg mat-elevation-z2"> <div class="fuse-widget-front mat-white-bg mat-elevation-z2">
<div class="px-16 border-bottom" fxLayout="row" fxLayoutAlign="space-between center"> <div class="px-16 py-8 border-bottom" fxLayout="row"
fxLayoutAlign="space-between center">
<div class="h3">{{widgets.widget6.title}}</div> <div class="h3">{{widgets.widget6.title}}</div>
<mat-form-field> <mat-form-field>
<mat-select class="simplified" [(ngModel)]="widget6.currentRange" aria-label="Change range"> <mat-select class="simplified" [(ngModel)]="widget6.currentRange"
aria-label="Change range">
<mat-option *ngFor="let range of widgets.widget6.ranges | keys" <mat-option *ngFor="let range of widgets.widget6.ranges | keys"
[value]="range.key"> [value]="range.key">
{{range.value}} {{range.value}}
@ -330,14 +367,21 @@
</ngx-charts-pie-chart> </ngx-charts-pie-chart>
</div> </div>
<div class="py-8 mh-16 border-top" fxLayout="row" fxLayoutAlign="start center" fxLayoutWrap> <div class="py-8 mh-16 border-top" fxLayout="row" fxLayoutAlign="start center"
<div class="py-8 border-right" fxLayout="column" fxLayoutAlign="center center" fxFlex="100" fxFlex.gt-sm="50"> fxLayoutWrap>
<span class="mat-display-1 mb-0">{{widgets.widget6.footerLeft.count[widget6.currentRange]}}</span> <div class="py-8 border-right" fxLayout="column" fxLayoutAlign="center center"
fxFlex="100" fxFlex.gt-sm="50">
<span class="mat-display-1 mb-0">
{{widgets.widget6.footerLeft.count[widget6.currentRange]}}
</span>
<span class="h4">{{widgets.widget6.footerLeft.title}}</span> <span class="h4">{{widgets.widget6.footerLeft.title}}</span>
</div> </div>
<div class="py-8" fxLayout="column" fxLayoutAlign="center center" fxFlex="100" fxFlex.gt-sm="50"> <div class="py-8" fxLayout="column" fxLayoutAlign="center center" fxFlex="100"
<span class="mat-display-1 mb-0">{{widgets.widget6.footerRight.count[widget6.currentRange]}}</span> fxFlex.gt-sm="50">
<span class="mat-display-1 mb-0">
{{widgets.widget6.footerRight.count[widget6.currentRange]}}
</span>
<span class="h4">{{widgets.widget6.footerRight.title}}</span> <span class="h4">{{widgets.widget6.footerRight.title}}</span>
</div> </div>
</div> </div>
@ -349,12 +393,14 @@
<!-- / WIDGET 6 --> <!-- / WIDGET 6 -->
<!-- WIDGET 7 --> <!-- WIDGET 7 -->
<fuse-widget [@animate]="{value:'*',params:{y:'100%'}}" class="widget" fxLayout="column" fxFlex="100" fxFlex.gt-sm="50"> <fuse-widget [@animate]="{value:'*',params:{y:'100%'}}" class="widget" fxLayout="column"
fxFlex="100" fxFlex.gt-sm="50">
<!-- Front --> <!-- Front -->
<div class="fuse-widget-front mat-white-bg mat-elevation-z2"> <div class="fuse-widget-front mat-white-bg mat-elevation-z2">
<div class="px-16 border-bottom" fxLayout="row" fxLayoutAlign="space-between center"> <div class="px-16 py-8 border-bottom" fxLayout="row"
fxLayoutAlign="space-between center">
<div class="h3">{{widgets.widget7.title}}</div> <div class="h3">{{widgets.widget7.title}}</div>
<mat-form-field> <mat-form-field>
<mat-select class="simplified" [(ngModel)]="widget7.currentRange" <mat-select class="simplified" [(ngModel)]="widget7.currentRange"
@ -391,20 +437,21 @@
</div> </div>
<!-- / WIDGET GROUP --> <!-- / WIDGET GROUP -->
</mat-tab> </mat-tab>
<mat-tab label="Budget Summary"> <mat-tab label="Budget Summary">
<!-- WIDGET GROUP --> <!-- WIDGET GROUP -->
<div class="widget-group" fxLayout="row" fxFlex="100" fxLayoutWrap *fuseIfOnDom [@animateStagger]="{value:'50'}"> <div class="widget-group grey-100-bg" fxLayout="row" fxFlex="100" fxLayoutWrap *fuseIfOnDom
[@animateStagger]="{value:'50'}">
<!-- WIDGET 8 --> <!-- WIDGET 8 -->
<fuse-widget [@animate]="{value:'*',params:{y:'100%'}}" class="widget" fxLayout="column" fxFlex="100" fxFlex.gt-sm="50"> <fuse-widget [@animate]="{value:'*',params:{y:'100%'}}" class="widget" fxLayout="column"
fxFlex="100" fxFlex.gt-sm="50">
<!-- Front --> <!-- Front -->
<div class="fuse-widget-front mat-white-bg mat-elevation-z2"> <div class="fuse-widget-front mat-white-bg mat-elevation-z2">
<div class="h3 p-16"> <div class="h3 px-16 py-24">
{{widgets.widget8.title}} {{widgets.widget8.title}}
</div> </div>
@ -431,11 +478,13 @@
<!-- / WIDGET 8 --> <!-- / WIDGET 8 -->
<!-- WIDGET 9 --> <!-- WIDGET 9 -->
<fuse-widget [@animate]="{value:'*',params:{y:'100%'}}" class="widget" fxLayout="column" fxFlex="100" fxFlex.gt-sm="50"> <fuse-widget [@animate]="{value:'*',params:{y:'100%'}}" class="widget" fxLayout="column"
fxFlex="100" fxFlex.gt-sm="50">
<!-- Front --> <!-- Front -->
<div class="fuse-widget-front mat-white-bg mat-elevation-z2"> <div class="fuse-widget-front mat-white-bg mat-elevation-z2">
<div class="px-16 border-bottom" fxLayout="row" fxLayoutAlign="space-between center"> <div class="px-16 py-12 border-bottom" fxLayout="row"
fxLayoutAlign="space-between center">
<div class="h3">{{widgets.widget9.title}}</div> <div class="h3">{{widgets.widget9.title}}</div>
<mat-form-field> <mat-form-field>
<mat-select [(ngModel)]="widget9.currentRange" aria-label="Change range"> <mat-select [(ngModel)]="widget9.currentRange" aria-label="Change range">
@ -447,7 +496,7 @@
</mat-form-field> </mat-form-field>
</div> </div>
<div class="p-16" fxLayout="column" fxLayoutAlign="center" fxLayout.gt-xs="row" <div class="px-16 py-24" fxLayout="column" fxLayoutAlign="center" fxLayout.gt-xs="row"
fxLayoutAlign.gt-xs="space-between end"> fxLayoutAlign.gt-xs="space-between end">
<div fxFlex="0 1 auto"> <div fxFlex="0 1 auto">
<div class="h4 secondary-text">{{widgets.widget9.weeklySpent.title}}</div> <div class="h4 secondary-text">{{widgets.widget9.weeklySpent.title}}</div>
@ -474,7 +523,7 @@
</div> </div>
</div> </div>
<div class="p-16" fxLayout="column" fxLayoutAlign="center" fxLayout.gt-xs="row" <div class="px-16 py-24" fxLayout="column" fxLayoutAlign="center" fxLayout.gt-xs="row"
fxLayoutAlign.gt-xs="space-between end"> fxLayoutAlign.gt-xs="space-between end">
<div fxFlex="0 1 auto"> <div fxFlex="0 1 auto">
<div class="h4 secondary-text">{{widgets.widget9.totalSpent.title}}</div> <div class="h4 secondary-text">{{widgets.widget9.totalSpent.title}}</div>
@ -501,7 +550,7 @@
</div> </div>
</div> </div>
<div class="p-16" fxLayout="column" fxLayoutAlign="center" fxLayout.gt-xs="row" <div class="px-16 py-24" fxLayout="column" fxLayoutAlign="center" fxLayout.gt-xs="row"
fxLayoutAlign.gt-xs="space-between end"> fxLayoutAlign.gt-xs="space-between end">
<div fxFlex="0 1 auto"> <div fxFlex="0 1 auto">
<div class="h4 secondary-text">{{widgets.widget9.remaining.title}}</div> <div class="h4 secondary-text">{{widgets.widget9.remaining.title}}</div>
@ -528,7 +577,7 @@
</div> </div>
</div> </div>
<div class="p-16 border-top"> <div class="px-16 py-24 border-top">
<div class="h4 secondary-text">{{widgets.widget9.totalBudget.title}}</div> <div class="h4 secondary-text">{{widgets.widget9.totalBudget.title}}</div>
<div class="pt-8 mat-display-1 m-0 font-weight-300"> <div class="pt-8 mat-display-1 m-0 font-weight-300">
<span class="secondary-text">$</span> <span class="secondary-text">$</span>
@ -543,7 +592,8 @@
<!-- / WIDGET 9 --> <!-- / WIDGET 9 -->
<!-- WIDGET 10 --> <!-- WIDGET 10 -->
<fuse-widget [@animate]="{value:'*',params:{y:'100%'}}" class="widget" fxLayout="row" fxFlex="100"> <fuse-widget [@animate]="{value:'*',params:{y:'100%'}}" class="widget" fxLayout="row"
fxFlex="100">
<!-- Front --> <!-- Front -->
<div class="fuse-widget-front mat-white-bg mat-elevation-z2"> <div class="fuse-widget-front mat-white-bg mat-elevation-z2">
@ -569,7 +619,8 @@
<span class="p-4" [ngClass]="cell.classes"> <span class="p-4" [ngClass]="cell.classes">
{{cell.value}} {{cell.value}}
</span> </span>
<mat-icon *ngIf="cell.icon" class="s-16">{{cell.icon}}</mat-icon> <mat-icon *ngIf="cell.icon" class="s-16">{{cell.icon}}
</mat-icon>
</td> </td>
</tr> </tr>
</tbody> </tbody>
@ -590,17 +641,21 @@
<mat-tab label="Team Members"> <mat-tab label="Team Members">
<!-- WIDGET GROUP --> <!-- WIDGET GROUP -->
<div class="widget-group" fxLayout="row" fxFlex="100" fxLayoutWrap *fuseIfOnDom [@animateStagger]="{value:'50'}"> <div class="widget-group grey-100-bg" fxLayout="row" fxFlex="100" fxLayoutWrap *fuseIfOnDom
[@animateStagger]="{value:'50'}">
<!-- WIDGET 11 --> <!-- WIDGET 11 -->
<fuse-widget [@animate]="{value:'*',params:{y:'100%'}}" class="widget" fxLayout="row" fxFlex="100"> <fuse-widget [@animate]="{value:'*',params:{y:'100%'}}" class="widget" fxLayout="row"
fxFlex="100">
<!-- Front --> <!-- Front -->
<div class="fuse-widget-front mat-white-bg mat-elevation-z2"> <div class="fuse-widget-front mat-white-bg mat-elevation-z2">
<div class="p-24 mb-8 border-bottom" fxLayout="row" fxLayoutAlign="space-between center"> <div class="p-24 mb-8 border-bottom" fxLayout="row"
fxLayoutAlign="space-between center">
<div class="h2">{{widgets.widget11.title}}</div> <div class="h2">{{widgets.widget11.title}}</div>
<div class="text-boxed red-bg white-fg m-0">{{widgets.widget11.table.rows.length}} <div class="text-boxed red-bg white-fg m-0">
{{widgets.widget11.table.rows.length}}
members members
</div> </div>
</div> </div>
@ -620,13 +675,15 @@
<ng-container cdkColumnDef="name"> <ng-container cdkColumnDef="name">
<mat-header-cell *cdkHeaderCellDef>Name</mat-header-cell> <mat-header-cell *cdkHeaderCellDef>Name</mat-header-cell>
<mat-cell *cdkCellDef="let contact"> <mat-cell *cdkCellDef="let contact">
<p class="text-truncate font-weight-600">{{contact.name}} {{contact.lastName}}</p> <p class="text-truncate font-weight-600">{{contact.name}}
{{contact.lastName}}</p>
</mat-cell> </mat-cell>
</ng-container> </ng-container>
<!-- Position Column --> <!-- Position Column -->
<ng-container cdkColumnDef="position"> <ng-container cdkColumnDef="position">
<mat-header-cell *cdkHeaderCellDef fxHide fxShow.gt-sm>Position</mat-header-cell> <mat-header-cell *cdkHeaderCellDef fxHide fxShow.gt-sm>Position
</mat-header-cell>
<mat-cell *cdkCellDef="let contact" fxHide fxShow.gt-sm> <mat-cell *cdkCellDef="let contact" fxHide fxShow.gt-sm>
<p class="position text-truncate"> <p class="position text-truncate">
{{contact.position}} {{contact.position}}
@ -636,7 +693,8 @@
<!-- Office Column --> <!-- Office Column -->
<ng-container cdkColumnDef="office"> <ng-container cdkColumnDef="office">
<mat-header-cell *cdkHeaderCellDef fxHide fxShow.gt-md>Office</mat-header-cell> <mat-header-cell *cdkHeaderCellDef fxHide fxShow.gt-md>Office
</mat-header-cell>
<mat-cell *cdkCellDef="let contact" fxHide fxShow.gt-md> <mat-cell *cdkCellDef="let contact" fxHide fxShow.gt-md>
<p class="office text-truncate"> <p class="office text-truncate">
{{contact.office}} {{contact.office}}
@ -644,10 +702,10 @@
</mat-cell> </mat-cell>
</ng-container> </ng-container>
<!-- Email Column --> <!-- Email Column -->
<ng-container cdkColumnDef="email"> <ng-container cdkColumnDef="email">
<mat-header-cell *cdkHeaderCellDef fxHide fxShow.gt-sm>Email</mat-header-cell> <mat-header-cell *cdkHeaderCellDef fxHide fxShow.gt-sm>Email
</mat-header-cell>
<mat-cell *cdkCellDef="let contact" fxHide fxShow.gt-sm> <mat-cell *cdkCellDef="let contact" fxHide fxShow.gt-sm>
<p class="email text-truncate"> <p class="email text-truncate">
{{contact.email}} {{contact.email}}
@ -657,7 +715,8 @@
<!-- Phone Column --> <!-- Phone Column -->
<ng-container cdkColumnDef="phone"> <ng-container cdkColumnDef="phone">
<mat-header-cell *cdkHeaderCellDef fxHide fxShow.gt-md>Phone</mat-header-cell> <mat-header-cell *cdkHeaderCellDef fxHide fxShow.gt-md>Phone
</mat-header-cell>
<mat-cell *cdkCellDef="let contact" fxHide fxShow.gt-md> <mat-cell *cdkCellDef="let contact" fxHide fxShow.gt-md>
<p class="phone text-truncate"> <p class="phone text-truncate">
{{contact.phone}} {{contact.phone}}
@ -665,7 +724,8 @@
</mat-cell> </mat-cell>
</ng-container> </ng-container>
<mat-header-row *cdkHeaderRowDef="widgets.widget11.table.columns"></mat-header-row> <mat-header-row
*cdkHeaderRowDef="widgets.widget11.table.columns"></mat-header-row>
<mat-row *cdkRowDef="let contact; columns: widgets.widget11.table.columns;"> <mat-row *cdkRowDef="let contact; columns: widgets.widget11.table.columns;">
</mat-row> </mat-row>
</mat-table> </mat-table>
@ -688,7 +748,8 @@
<!-- / CENTER --> <!-- / CENTER -->
<!-- SIDENAV --> <!-- SIDENAV -->
<mat-sidenav class="sidenav" align="end" mode="side" opened="true" fuseMatSidenavHelper="dashboards-right-sidenav" mat-is-locked-open="gt-md"> <mat-sidenav class="sidenav" align="end" mode="side" opened="true"
fuseMatSidenavHelper="dashboards-right-sidenav" mat-is-locked-open="gt-md">
<div class="sidenav-content" fusePerfectScrollbar> <div class="sidenav-content" fusePerfectScrollbar>
@ -768,7 +829,8 @@
<div class="p-16 pb-32" fxLayout="column" fxLayoutAlign="center center"> <div class="p-16 pb-32" fxLayout="column" fxLayoutAlign="center center">
<div fxLayout="row" fxLayoutAlign="center center"> <div fxLayout="row" fxLayoutAlign="center center">
<mat-icon fontSet="meteocons" [fontIcon]="widgets.weatherWidget.locations[widgets.weatherWidget.currentLocation].icon" <mat-icon fontSet="meteocons"
[fontIcon]="widgets.weatherWidget.locations[widgets.weatherWidget.currentLocation].icon"
class="icon s-40 mr-16"></mat-icon> class="icon s-40 mr-16"></mat-icon>
<span class="mat-display-2 m-0 font-weight-300 secondary-text"> <span class="mat-display-2 m-0 font-weight-300 secondary-text">
{{widgets.weatherWidget.locations[widgets.weatherWidget.currentLocation].temp[widgets.weatherWidget.tempUnit]}} {{widgets.weatherWidget.locations[widgets.weatherWidget.currentLocation].temp[widgets.weatherWidget.tempUnit]}}
@ -789,12 +851,16 @@
<div fxLayout="row" fxLayoutAlign="start center"> <div fxLayout="row" fxLayoutAlign="start center">
<mat-icon fontSet="meteocons" fontIcon="icon-compass" class="mr-8 s-16"></mat-icon> <mat-icon fontSet="meteocons" fontIcon="icon-compass" class="mr-8 s-16"></mat-icon>
<span>{{widgets.weatherWidget.locations[widgets.weatherWidget.currentLocation].windDirection}}</span> <span>
{{widgets.weatherWidget.locations[widgets.weatherWidget.currentLocation].windDirection}}
</span>
</div> </div>
<div fxLayout="row" fxLayoutAlign="start center"> <div fxLayout="row" fxLayoutAlign="start center">
<mat-icon fontSet="meteocons" fontIcon="icon-rainy" class="mr-8 s-16"></mat-icon> <mat-icon fontSet="meteocons" fontIcon="icon-rainy" class="mr-8 s-16"></mat-icon>
<span>{{widgets.weatherWidget.locations[widgets.weatherWidget.currentLocation].rainProbability}}</span> <span>
{{widgets.weatherWidget.locations[widgets.weatherWidget.currentLocation].rainProbability}}
</span>
</div> </div>
</div> </div>
@ -806,7 +872,9 @@
<mat-icon fontSet="meteocons" [fontIcon]="day.icon" class="mr-16"></mat-icon> <mat-icon fontSet="meteocons" [fontIcon]="day.icon" class="mr-16"></mat-icon>
<span class="h2">{{day.temp[widgets.weatherWidget.tempUnit]}}</span> <span class="h2">{{day.temp[widgets.weatherWidget.tempUnit]}}</span>
<span class="h2 font-weight-300 secondary-text text-super">&deg;</span> <span class="h2 font-weight-300 secondary-text text-super">&deg;</span>
<span class="h2 font-weight-300 secondary-text">{{widgets.weatherWidget.tempUnit}}</span> <span class="h2 font-weight-300 secondary-text">
{{widgets.weatherWidget.tempUnit}}
</span>
</div> </div>
</div> </div>
</div> </div>

10
src/app/main/content/apps/dashboards/project/project.component.scss
View File

@ -56,5 +56,15 @@
min-width: 250px !important; min-width: 250px !important;
max-width: 250px !important; max-width: 250px !important;
} }
.widget {
&.widget5 {
.gridline-path.gridline-path-horizontal {
display: none;
}
}
}
} }
} }

15
src/app/main/content/apps/dashboards/project/project.component.ts
View File

@ -1,19 +1,20 @@
import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core'; import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
import { ProjectsDashboardService } from './projects.service';
import * as shape from 'd3-shape'; import * as shape from 'd3-shape';
import { BehaviorSubject } from 'rxjs/BehaviorSubject'; import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { Observable } from 'rxjs/Observable'; import { Observable } from 'rxjs/Observable';
import { DataSource } from '@angular/cdk/collections'; import { DataSource } from '@angular/cdk/collections';
import { ProjectDashboardService } from './project.service';
import { fuseAnimations } from '../../../../../core/animations'; import { fuseAnimations } from '../../../../../core/animations';
@Component({ @Component({
selector : 'fuse-project', selector : 'fuse-project-dashboard',
templateUrl : './project.component.html', templateUrl : './project.component.html',
styleUrls : ['./project.component.scss'], styleUrls : ['./project.component.scss'],
encapsulation: ViewEncapsulation.None, encapsulation: ViewEncapsulation.None,
animations : fuseAnimations animations : fuseAnimations
}) })
export class FuseProjectComponent implements OnInit, OnDestroy export class FuseProjectDashboardComponent implements OnInit, OnDestroy
{ {
projects: any[]; projects: any[];
selectedProject: any; selectedProject: any;
@ -28,13 +29,11 @@ export class FuseProjectComponent implements OnInit, OnDestroy
dateNow = Date.now(); dateNow = Date.now();
constructor(private projectsDashboardService: ProjectsDashboardService) constructor(private projectDashboardService: ProjectDashboardService)
{ {
this.projects = this.projectsDashboardService.projects; this.projects = this.projectDashboardService.projects;
this.selectedProject = this.projects[0]; this.selectedProject = this.projects[0];
this.widgets = this.projectDashboardService.widgets;
this.widgets = this.projectsDashboardService.widgets;
/** /**
* Widget 5 * Widget 5

13
src/app/main/content/apps/dashboards/project/project.module.ts
View File

@ -1,17 +1,18 @@
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router'; import { RouterModule, Routes } from '@angular/router';
import { FuseProjectComponent } from './project.component';
import { SharedModule } from '../../../../../core/modules/shared.module'; import { SharedModule } from '../../../../../core/modules/shared.module';
import { ProjectsDashboardService } from './projects.service';
import { FuseProjectDashboardComponent } from './project.component';
import { ProjectDashboardService } from './project.service';
import { FuseWidgetModule } from '../../../../../core/components/widget/widget.module'; import { FuseWidgetModule } from '../../../../../core/components/widget/widget.module';
import { NgxChartsModule } from '@swimlane/ngx-charts'; import { NgxChartsModule } from '@swimlane/ngx-charts';
const routes: Routes = [ const routes: Routes = [
{ {
path : '**', path : '**',
component: FuseProjectComponent, component: FuseProjectDashboardComponent,
resolve : { resolve : {
data: ProjectsDashboardService data: ProjectDashboardService
} }
} }
]; ];
@ -24,10 +25,10 @@ const routes: Routes = [
NgxChartsModule NgxChartsModule
], ],
declarations: [ declarations: [
FuseProjectComponent FuseProjectDashboardComponent
], ],
providers : [ providers : [
ProjectsDashboardService ProjectDashboardService
] ]
}) })
export class FuseProjectDashboardModule export class FuseProjectDashboardModule

62
src/app/main/content/apps/dashboards/project/project.service.ts Normal file
View File

@ -0,0 +1,62 @@
import { Injectable } from '@angular/core';
import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router';
import { Observable } from 'rxjs/Observable';
import { HttpClient } from '@angular/common/http';
@Injectable()
export class ProjectDashboardService implements Resolve<any>
{
projects: any[];
widgets: any[];
constructor(
private http: HttpClient
)
{
}
/**
* Resolve
* @param {ActivatedRouteSnapshot} route
* @param {RouterStateSnapshot} state
* @returns {Observable<any> | Promise<any> | any}
*/
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<any> | Promise<any> | any
{
return new Promise((resolve, reject) => {
Promise.all([
this.getProjects(),
this.getWidgets()
]).then(
() => {
resolve();
},
reject
);
});
}
getProjects(): Promise<any>
{
return new Promise((resolve, reject) => {
this.http.get('api/project-dashboard-projects')
.subscribe((response: any) => {
this.projects = response;
resolve(response);
}, reject);
});
}
getWidgets(): Promise<any>
{
return new Promise((resolve, reject) => {
this.http.get('api/project-dashboard-widgets')
.subscribe((response: any) => {
this.widgets = response;
resolve(response);
}, reject);
});
}
}