mirror of
https://github.com/richard-loafle/fuse-angular.git
synced 2025-01-10 12:35:07 +00:00
Fixed some naming inconsistencies in Project dashboard
+ Added fake db for Analytics Dashboard
This commit is contained in:
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 = [
|
public static projects = [
|
||||||
{
|
{
|
|
@ -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 {
|
||||||
|
// 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
|
||||||
|
'academy-categories': AcademyFakeDb.categories,
|
||||||
|
'academy-courses' : AcademyFakeDb.courses,
|
||||||
|
'academy-course' : AcademyFakeDb.course,
|
||||||
|
|
||||||
|
// Mail
|
||||||
'mail-mails' : MailFakeDb.mails,
|
'mail-mails' : MailFakeDb.mails,
|
||||||
'mail-folders': MailFakeDb.folders,
|
'mail-folders': MailFakeDb.folders,
|
||||||
'mail-filters': MailFakeDb.filters,
|
'mail-filters': MailFakeDb.filters,
|
||||||
'mail-labels' : MailFakeDb.labels,
|
'mail-labels' : MailFakeDb.labels,
|
||||||
|
|
||||||
|
// Chat
|
||||||
'chat-contacts': ChatFakeDb.contacts,
|
'chat-contacts': ChatFakeDb.contacts,
|
||||||
'chat-chats' : ChatFakeDb.chats,
|
'chat-chats' : ChatFakeDb.chats,
|
||||||
'chat-user' : ChatFakeDb.user,
|
'chat-user' : ChatFakeDb.user,
|
||||||
'calendar' : CalendarFakeDb.data,
|
|
||||||
|
// File Manager
|
||||||
|
'file-manager': FileManagerFakeDb.files,
|
||||||
|
|
||||||
|
// Contacts
|
||||||
|
'contacts-contacts': ContactsFakeDb.contacts,
|
||||||
|
'contacts-user' : ContactsFakeDb.user,
|
||||||
|
|
||||||
|
// Todo
|
||||||
'todo-todos' : TodoFakeDb.todos,
|
'todo-todos' : TodoFakeDb.todos,
|
||||||
'todo-filters': TodoFakeDb.filters,
|
'todo-filters': TodoFakeDb.filters,
|
||||||
'todo-tags' : TodoFakeDb.tags,
|
'todo-tags' : TodoFakeDb.tags,
|
||||||
|
|
||||||
|
// Scrumboard
|
||||||
|
'scrumboard-boards': ScrumboardFakeDb.boards,
|
||||||
|
|
||||||
|
// Invoice
|
||||||
|
'invoice': InvoiceFakeDb.invoice,
|
||||||
|
|
||||||
|
// Profile
|
||||||
'profile-timeline' : ProfileFakeDb.timeline,
|
'profile-timeline' : ProfileFakeDb.timeline,
|
||||||
'profile-photos-videos': ProfileFakeDb.photosVideos,
|
'profile-photos-videos': ProfileFakeDb.photosVideos,
|
||||||
'profile-about' : ProfileFakeDb.about,
|
'profile-about' : ProfileFakeDb.about,
|
||||||
'contacts-contacts' : ContactsFakeDb.contacts,
|
|
||||||
'contacts-user' : ContactsFakeDb.user,
|
// Search
|
||||||
'invoice' : InvoiceFakeDb.invoice,
|
|
||||||
'file-manager' : FileManagerFakeDb.files,
|
|
||||||
'search-classic': SearchFakeDb.classic,
|
'search-classic': SearchFakeDb.classic,
|
||||||
'search-table' : SearchFakeDb.table,
|
'search-table' : SearchFakeDb.table,
|
||||||
'quick-panel-notes' : QuickPanelFakeDb.notes,
|
|
||||||
'quick-panel-events' : QuickPanelFakeDb.events,
|
// FAQ
|
||||||
'icons' : IconsFakeDb.icons,
|
|
||||||
'projects-dashboard-projects': ProjectsDashboardDb.projects,
|
|
||||||
'projects-dashboard-widgets' : ProjectsDashboardDb.widgets,
|
|
||||||
'scrumboard-boards' : ScrumboardFakeDb.boards,
|
|
||||||
'faq': FaqFakeDb.data,
|
'faq': FaqFakeDb.data,
|
||||||
|
|
||||||
|
// Knowledge base
|
||||||
'knowledge-base': KnowledgeBaseFakeDb.data,
|
'knowledge-base': KnowledgeBaseFakeDb.data,
|
||||||
'e-commerce-dashboard' : ECommerceFakeDb.dashboard,
|
|
||||||
'e-commerce-products' : ECommerceFakeDb.products,
|
// Icons
|
||||||
'e-commerce-orders' : ECommerceFakeDb.orders,
|
'icons': IconsFakeDb.icons,
|
||||||
'academy-categories' : AcademyFakeDb.categories,
|
|
||||||
'academy-courses' : AcademyFakeDb.courses,
|
// Quick Panel
|
||||||
'academy-course' : AcademyFakeDb.course
|
'quick-panel-notes' : QuickPanelFakeDb.notes,
|
||||||
|
'quick-panel-events': QuickPanelFakeDb.events
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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">°</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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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