mirror of
https://github.com/richard-loafle/fuse-angular.git
synced 2025-01-10 04:25:08 +00:00
Fixed some naming inconsistencies in Project dashboard
+ Added fake db for Analytics Dashboard
This commit is contained in:
Sercan Yemen
parent
8431c19133
commit
dfd430712d
518
src/app/fuse-fake-db/dashboard-analytics.ts
Normal file
518
src/app/fuse-fake-db/dashboard-analytics.ts
Normal 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
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
}
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
export class ProjectsDashboardDb
|
||||
export class ProjectDashboardDb
|
||||
{
|
||||
public static projects = [
|
||||
{
|
||||
|
|
@ -1,62 +1,97 @@
|
|||
import { InMemoryDbService } from 'angular-in-memory-web-api';
|
||||
|
||||
import { MailFakeDb } from './mail';
|
||||
import { ChatFakeDb } from './chat';
|
||||
import { ProjectDashboardDb } from './dashboard-project';
|
||||
import { AnalyticsDashboardDb } from './dashboard-analytics';
|
||||
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 { 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
|
||||
{
|
||||
createDb()
|
||||
{
|
||||
return {
|
||||
'mail-mails' : MailFakeDb.mails,
|
||||
'mail-folders' : MailFakeDb.folders,
|
||||
'mail-filters' : MailFakeDb.filters,
|
||||
'mail-labels' : MailFakeDb.labels,
|
||||
'chat-contacts' : ChatFakeDb.contacts,
|
||||
'chat-chats' : ChatFakeDb.chats,
|
||||
'chat-user' : ChatFakeDb.user,
|
||||
'calendar' : CalendarFakeDb.data,
|
||||
'todo-todos' : TodoFakeDb.todos,
|
||||
'todo-filters' : TodoFakeDb.filters,
|
||||
'todo-tags' : TodoFakeDb.tags,
|
||||
'profile-timeline' : ProfileFakeDb.timeline,
|
||||
'profile-photos-videos' : ProfileFakeDb.photosVideos,
|
||||
'profile-about' : ProfileFakeDb.about,
|
||||
'contacts-contacts' : ContactsFakeDb.contacts,
|
||||
'contacts-user' : ContactsFakeDb.user,
|
||||
'invoice' : InvoiceFakeDb.invoice,
|
||||
'file-manager' : FileManagerFakeDb.files,
|
||||
'search-classic' : SearchFakeDb.classic,
|
||||
'search-table' : SearchFakeDb.table,
|
||||
'quick-panel-notes' : QuickPanelFakeDb.notes,
|
||||
'quick-panel-events' : QuickPanelFakeDb.events,
|
||||
'icons' : IconsFakeDb.icons,
|
||||
'projects-dashboard-projects': ProjectsDashboardDb.projects,
|
||||
'projects-dashboard-widgets' : ProjectsDashboardDb.widgets,
|
||||
'scrumboard-boards' : ScrumboardFakeDb.boards,
|
||||
'faq' : FaqFakeDb.data,
|
||||
'knowledge-base' : KnowledgeBaseFakeDb.data,
|
||||
'e-commerce-dashboard' : ECommerceFakeDb.dashboard,
|
||||
// Dashboards
|
||||
'project-dashboard-projects' : ProjectDashboardDb.projects,
|
||||
'project-dashboard-widgets' : ProjectDashboardDb.widgets,
|
||||
'analytics-dashboard-widgets': AnalyticsDashboardDb.widgets,
|
||||
|
||||
// Calendar
|
||||
'calendar': CalendarFakeDb.data,
|
||||
|
||||
// E-Commerce
|
||||
'e-commerce-dashboard': ECommerceFakeDb.dashboard,
|
||||
'e-commerce-products' : ECommerceFakeDb.products,
|
||||
'e-commerce-orders' : ECommerceFakeDb.orders,
|
||||
'academy-categories' : AcademyFakeDb.categories,
|
||||
|
||||
// Academy
|
||||
'academy-categories': AcademyFakeDb.categories,
|
||||
'academy-courses' : AcademyFakeDb.courses,
|
||||
'academy-course' : AcademyFakeDb.course
|
||||
'academy-course' : AcademyFakeDb.course,
|
||||
|
||||
// Mail
|
||||
'mail-mails' : MailFakeDb.mails,
|
||||
'mail-folders': MailFakeDb.folders,
|
||||
'mail-filters': MailFakeDb.filters,
|
||||
'mail-labels' : MailFakeDb.labels,
|
||||
|
||||
// Chat
|
||||
'chat-contacts': ChatFakeDb.contacts,
|
||||
'chat-chats' : ChatFakeDb.chats,
|
||||
'chat-user' : ChatFakeDb.user,
|
||||
|
||||
// File Manager
|
||||
'file-manager': FileManagerFakeDb.files,
|
||||
|
||||
// Contacts
|
||||
'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
|
||||
};
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,7 +10,9 @@
|
|||
|
||||
<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>
|
||||
<mat-icon>menu</mat-icon>
|
||||
|
|
@ -21,7 +23,8 @@
|
|||
|
||||
<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>
|
||||
</button>
|
||||
|
||||
|
|
@ -41,16 +44,20 @@
|
|||
|
||||
<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 -->
|
||||
<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 -->
|
||||
<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-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">
|
||||
<mat-option *ngFor="let range of widgets.widget1.ranges | keys"
|
||||
[value]="range.key">
|
||||
|
|
@ -67,12 +74,17 @@
|
|||
<div class="light-blue-fg font-size-72 line-height-72">
|
||||
{{widgets.widget1.data.count[widgets.widget1.currentRange]}}
|
||||
</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 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 ml-8">{{widgets.widget1.data.extra.count[widgets.widget1.currentRange]}}</span>
|
||||
<span class="h4 secondary-text text-truncate">
|
||||
{{widgets.widget1.data.extra.label}}:
|
||||
</span>
|
||||
<span class="h4 ml-8">
|
||||
{{widgets.widget1.data.extra.count[widgets.widget1.currentRange]}}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- / Front -->
|
||||
|
|
@ -94,14 +106,17 @@
|
|||
<!-- / WIDGET 1 -->
|
||||
|
||||
<!-- 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 -->
|
||||
<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>
|
||||
|
||||
<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>
|
||||
</button>
|
||||
</div>
|
||||
|
|
@ -110,11 +125,14 @@
|
|||
<div class="red-fg font-size-72 line-height-72">
|
||||
{{widgets.widget2.data.count}}
|
||||
</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 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>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -137,14 +155,17 @@
|
|||
<!-- / WIDGET 2 -->
|
||||
|
||||
<!-- 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 -->
|
||||
<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>
|
||||
|
||||
<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>
|
||||
</button>
|
||||
</div>
|
||||
|
|
@ -153,11 +174,14 @@
|
|||
<div class="orange-fg font-size-72 line-height-72">
|
||||
{{widgets.widget3.data.count}}
|
||||
</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 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>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -180,26 +204,33 @@
|
|||
<!-- / WIDGET 3 -->
|
||||
|
||||
<!-- 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 -->
|
||||
<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>
|
||||
|
||||
<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>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<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 class="h3 secondary-text font-weight-500">{{widgets.widget4.data.label}}</div>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -221,18 +252,19 @@
|
|||
</fuse-widget>
|
||||
<!-- / WIDGET 4 -->
|
||||
|
||||
|
||||
<!-- 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 -->
|
||||
<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"
|
||||
*ngFor="let range of widgets.widget5.ranges | keys"
|
||||
(click)="widget5.currentRange = range.key"
|
||||
|
|
@ -242,8 +274,9 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div fxLayout="row" fxLayoutAlign="start end" fxLayoutWrap>
|
||||
<div class="h-420 mb-16" fxLayout="row" fxFlex="100" fxFlex.gt-sm="50">
|
||||
<div fxLayout="row" fxLayoutAlign="start start" fxLayoutWrap>
|
||||
|
||||
<div class="h-420 my-16" fxLayout="row" fxFlex="100" fxFlex.gt-sm="50">
|
||||
<ngx-charts-bar-vertical-stacked
|
||||
*fuseIfOnDom
|
||||
[scheme]="widget5.scheme"
|
||||
|
|
@ -260,10 +293,12 @@
|
|||
</ngx-charts-bar-vertical-stacked>
|
||||
</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"
|
||||
*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="h4 secondary-text">{{widget.value.label}}</div>
|
||||
|
|
@ -297,17 +332,19 @@
|
|||
</fuse-widget>
|
||||
<!-- / WIDGET 5 -->
|
||||
|
||||
|
||||
<!-- 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 -->
|
||||
<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>
|
||||
<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"
|
||||
[value]="range.key">
|
||||
{{range.value}}
|
||||
|
|
@ -330,14 +367,21 @@
|
|||
</ngx-charts-pie-chart>
|
||||
</div>
|
||||
|
||||
<div class="py-8 mh-16 border-top" fxLayout="row" fxLayoutAlign="start center" fxLayoutWrap>
|
||||
<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>
|
||||
<div class="py-8 mh-16 border-top" fxLayout="row" fxLayoutAlign="start center"
|
||||
fxLayoutWrap>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<div class="py-8" fxLayout="column" fxLayoutAlign="center center" fxFlex="100" fxFlex.gt-sm="50">
|
||||
<span class="mat-display-1 mb-0">{{widgets.widget6.footerRight.count[widget6.currentRange]}}</span>
|
||||
<div class="py-8" fxLayout="column" fxLayoutAlign="center center" fxFlex="100"
|
||||
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>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -349,12 +393,14 @@
|
|||
<!-- / WIDGET 6 -->
|
||||
|
||||
<!-- 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 -->
|
||||
<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>
|
||||
<mat-form-field>
|
||||
<mat-select class="simplified" [(ngModel)]="widget7.currentRange"
|
||||
|
|
@ -391,20 +437,21 @@
|
|||
</div>
|
||||
<!-- / WIDGET GROUP -->
|
||||
|
||||
|
||||
</mat-tab>
|
||||
|
||||
<mat-tab label="Budget Summary">
|
||||
|
||||
<!-- 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 -->
|
||||
<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 -->
|
||||
<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}}
|
||||
</div>
|
||||
|
||||
|
|
@ -431,11 +478,13 @@
|
|||
<!-- / WIDGET 8 -->
|
||||
|
||||
<!-- 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 -->
|
||||
<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>
|
||||
<mat-form-field>
|
||||
<mat-select [(ngModel)]="widget9.currentRange" aria-label="Change range">
|
||||
|
|
@ -447,7 +496,7 @@
|
|||
</mat-form-field>
|
||||
</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">
|
||||
<div fxFlex="0 1 auto">
|
||||
<div class="h4 secondary-text">{{widgets.widget9.weeklySpent.title}}</div>
|
||||
|
|
@ -474,7 +523,7 @@
|
|||
</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">
|
||||
<div fxFlex="0 1 auto">
|
||||
<div class="h4 secondary-text">{{widgets.widget9.totalSpent.title}}</div>
|
||||
|
|
@ -501,7 +550,7 @@
|
|||
</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">
|
||||
<div fxFlex="0 1 auto">
|
||||
<div class="h4 secondary-text">{{widgets.widget9.remaining.title}}</div>
|
||||
|
|
@ -528,7 +577,7 @@
|
|||
</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="pt-8 mat-display-1 m-0 font-weight-300">
|
||||
<span class="secondary-text">$</span>
|
||||
|
|
@ -543,7 +592,8 @@
|
|||
<!-- / WIDGET 9 -->
|
||||
|
||||
<!-- 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 -->
|
||||
<div class="fuse-widget-front mat-white-bg mat-elevation-z2">
|
||||
|
|
@ -569,7 +619,8 @@
|
|||
<span class="p-4" [ngClass]="cell.classes">
|
||||
{{cell.value}}
|
||||
</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>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
|
@ -590,17 +641,21 @@
|
|||
<mat-tab label="Team Members">
|
||||
|
||||
<!-- 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 -->
|
||||
<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 -->
|
||||
<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="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
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -620,13 +675,15 @@
|
|||
<ng-container cdkColumnDef="name">
|
||||
<mat-header-cell *cdkHeaderCellDef>Name</mat-header-cell>
|
||||
<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>
|
||||
</ng-container>
|
||||
|
||||
<!-- Position Column -->
|
||||
<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>
|
||||
<p class="position text-truncate">
|
||||
{{contact.position}}
|
||||
|
|
@ -636,7 +693,8 @@
|
|||
|
||||
<!-- Office Column -->
|
||||
<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>
|
||||
<p class="office text-truncate">
|
||||
{{contact.office}}
|
||||
|
|
@ -644,10 +702,10 @@
|
|||
</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
|
||||
<!-- Email Column -->
|
||||
<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>
|
||||
<p class="email text-truncate">
|
||||
{{contact.email}}
|
||||
|
|
@ -657,7 +715,8 @@
|
|||
|
||||
<!-- Phone Column -->
|
||||
<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>
|
||||
<p class="phone text-truncate">
|
||||
{{contact.phone}}
|
||||
|
|
@ -665,7 +724,8 @@
|
|||
</mat-cell>
|
||||
</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>
|
||||
</mat-table>
|
||||
|
|
@ -688,7 +748,8 @@
|
|||
<!-- / CENTER -->
|
||||
|
||||
<!-- 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>
|
||||
|
||||
|
|
@ -768,7 +829,8 @@
|
|||
<div class="p-16 pb-32" fxLayout="column" 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>
|
||||
<span class="mat-display-2 m-0 font-weight-300 secondary-text">
|
||||
{{widgets.weatherWidget.locations[widgets.weatherWidget.currentLocation].temp[widgets.weatherWidget.tempUnit]}}
|
||||
|
|
@ -789,12 +851,16 @@
|
|||
|
||||
<div fxLayout="row" fxLayoutAlign="start center">
|
||||
<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 fxLayout="row" fxLayoutAlign="start center">
|
||||
<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>
|
||||
|
||||
|
|
@ -806,7 +872,9 @@
|
|||
<mat-icon fontSet="meteocons" [fontIcon]="day.icon" class="mr-16"></mat-icon>
|
||||
<span class="h2">{{day.temp[widgets.weatherWidget.tempUnit]}}</span>
|
||||
<span class="h2 font-weight-300 secondary-text text-super">°</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>
|
||||
|
|
|
|||
|
|
@ -56,5 +56,15 @@
|
|||
min-width: 250px !important;
|
||||
max-width: 250px !important;
|
||||
}
|
||||
|
||||
.widget {
|
||||
|
||||
&.widget5 {
|
||||
|
||||
.gridline-path.gridline-path-horizontal {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,19 +1,20 @@
|
|||
import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
|
||||
import { ProjectsDashboardService } from './projects.service';
|
||||
import * as shape from 'd3-shape';
|
||||
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
|
||||
import { Observable } from 'rxjs/Observable';
|
||||
import { DataSource } from '@angular/cdk/collections';
|
||||
|
||||
import { ProjectDashboardService } from './project.service';
|
||||
import { fuseAnimations } from '../../../../../core/animations';
|
||||
|
||||
@Component({
|
||||
selector : 'fuse-project',
|
||||
selector : 'fuse-project-dashboard',
|
||||
templateUrl : './project.component.html',
|
||||
styleUrls : ['./project.component.scss'],
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
animations : fuseAnimations
|
||||
})
|
||||
export class FuseProjectComponent implements OnInit, OnDestroy
|
||||
export class FuseProjectDashboardComponent implements OnInit, OnDestroy
|
||||
{
|
||||
projects: any[];
|
||||
selectedProject: any;
|
||||
|
|
@ -28,13 +29,11 @@ export class FuseProjectComponent implements OnInit, OnDestroy
|
|||
|
||||
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.widgets = this.projectsDashboardService.widgets;
|
||||
this.widgets = this.projectDashboardService.widgets;
|
||||
|
||||
/**
|
||||
* Widget 5
|
||||
|
|
|
|||
|
|
@ -1,17 +1,18 @@
|
|||
import { NgModule } from '@angular/core';
|
||||
import { RouterModule, Routes } from '@angular/router';
|
||||
import { FuseProjectComponent } from './project.component';
|
||||
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 { NgxChartsModule } from '@swimlane/ngx-charts';
|
||||
|
||||
const routes: Routes = [
|
||||
{
|
||||
path : '**',
|
||||
component: FuseProjectComponent,
|
||||
component: FuseProjectDashboardComponent,
|
||||
resolve : {
|
||||
data: ProjectsDashboardService
|
||||
data: ProjectDashboardService
|
||||
}
|
||||
}
|
||||
];
|
||||
|
|
@ -24,10 +25,10 @@ const routes: Routes = [
|
|||
NgxChartsModule
|
||||
],
|
||||
declarations: [
|
||||
FuseProjectComponent
|
||||
FuseProjectDashboardComponent
|
||||
],
|
||||
providers : [
|
||||
ProjectsDashboardService
|
||||
ProjectDashboardService
|
||||
]
|
||||
})
|
||||
export class FuseProjectDashboardModule
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
});
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user