mirror of
https://github.com/richard-loafle/fuse-angular.git
synced 2025-01-10 04:25:08 +00:00
(ECommerce) Removed e-commerce dashboard as it's very outdated and doesn't really add something
This commit is contained in:
Sercan Yemen
parent
927b4fd322
commit
343d7902fa
|
|
@ -1622,7 +1622,7 @@ export class ProjectDashboardDb
|
||||||
[
|
[
|
||||||
{
|
{
|
||||||
'value' : 'Wireframing',
|
'value' : 'Wireframing',
|
||||||
'classes': 'mat-primary-bg',
|
'classes': 'primary',
|
||||||
'icon' : ''
|
'icon' : ''
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|
@ -1718,7 +1718,7 @@ export class ProjectDashboardDb
|
||||||
[
|
[
|
||||||
{
|
{
|
||||||
'value' : 'Marketing',
|
'value' : 'Marketing',
|
||||||
'classes': 'mat-accent-bg',
|
'classes': 'accent',
|
||||||
'icon' : ''
|
'icon' : ''
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|
|
||||||
|
|
@ -1,519 +1,5 @@
|
||||||
export class ECommerceFakeDb
|
export class ECommerceFakeDb
|
||||||
{
|
{
|
||||||
public static dashboard = {
|
|
||||||
'widget1': {
|
|
||||||
'ranges' : {
|
|
||||||
'DY' : 'Yesterday',
|
|
||||||
'DT' : 'Today',
|
|
||||||
'DTM': 'Tomorrow'
|
|
||||||
},
|
|
||||||
'currentRange': 'DT',
|
|
||||||
'data' : {
|
|
||||||
'label': 'CONVERSION RATE',
|
|
||||||
'count': {
|
|
||||||
'DY' : 21,
|
|
||||||
'DT' : 25,
|
|
||||||
'DTM': 19
|
|
||||||
},
|
|
||||||
'extra': {
|
|
||||||
'label': 'Abandoned carts',
|
|
||||||
'count': {
|
|
||||||
'DY' : 3,
|
|
||||||
'DT' : 7,
|
|
||||||
'DTM': 8
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
'detail' : 'You can show some detailed information about this widget in here.'
|
|
||||||
},
|
|
||||||
'widget2': {
|
|
||||||
'title' : 'Average Order Value',
|
|
||||||
'data' : {
|
|
||||||
'label': '30 DAYS',
|
|
||||||
'count': 21,
|
|
||||||
'extra': {
|
|
||||||
'label': 'Last year same time',
|
|
||||||
'count': 14
|
|
||||||
}
|
|
||||||
},
|
|
||||||
'detail': 'You can show some detailed information about this widget in here.'
|
|
||||||
},
|
|
||||||
'widget3': {
|
|
||||||
'title' : 'Online Visitors',
|
|
||||||
'data' : {
|
|
||||||
'label': 'last 30 minutes',
|
|
||||||
'count': 32,
|
|
||||||
'extra': {
|
|
||||||
'label': 'Total visitors today',
|
|
||||||
'count': 998
|
|
||||||
}
|
|
||||||
},
|
|
||||||
'detail': 'You can show some detailed information about this widget in here.'
|
|
||||||
},
|
|
||||||
'widget4': {
|
|
||||||
'title' : 'Profit per Visitor',
|
|
||||||
'data' : {
|
|
||||||
'label': 'TODAY',
|
|
||||||
'count': '3,7',
|
|
||||||
'extra': {
|
|
||||||
'label': 'Yesterday',
|
|
||||||
'count': '2,90'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
'detail': 'You can show some detailed information about this widget in here.'
|
|
||||||
},
|
|
||||||
'widget5': {
|
|
||||||
'title' : 'Sales',
|
|
||||||
'ranges' : {
|
|
||||||
'TW': 'This Week',
|
|
||||||
'LW': 'Last Week',
|
|
||||||
'2W': '2 Weeks Ago'
|
|
||||||
},
|
|
||||||
'mainChart': {
|
|
||||||
'2W': [
|
|
||||||
{
|
|
||||||
'name' : 'Mon',
|
|
||||||
'series': [
|
|
||||||
{
|
|
||||||
'name' : 'Sales',
|
|
||||||
'value': 9
|
|
||||||
},
|
|
||||||
{
|
|
||||||
'name' : 'Abandoned Carts',
|
|
||||||
'value': 37
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
'name' : 'Tue',
|
|
||||||
'series': [
|
|
||||||
{
|
|
||||||
'name' : 'Sales',
|
|
||||||
'value': 12
|
|
||||||
},
|
|
||||||
{
|
|
||||||
'name' : 'Abandoned Carts',
|
|
||||||
'value': 32
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
'name' : 'Wed',
|
|
||||||
'series': [
|
|
||||||
{
|
|
||||||
'name' : 'Sales',
|
|
||||||
'value': 9
|
|
||||||
},
|
|
||||||
{
|
|
||||||
'name' : 'Abandoned Carts',
|
|
||||||
'value': 39
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
'name' : 'Thu',
|
|
||||||
'series': [
|
|
||||||
{
|
|
||||||
'name' : 'Sales',
|
|
||||||
'value': 12
|
|
||||||
},
|
|
||||||
{
|
|
||||||
'name' : 'Abandoned Carts',
|
|
||||||
'value': 27
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
'name' : 'Fri',
|
|
||||||
'series': [
|
|
||||||
{
|
|
||||||
'name' : 'Sales',
|
|
||||||
'value': 7
|
|
||||||
},
|
|
||||||
{
|
|
||||||
'name' : 'Abandoned Carts',
|
|
||||||
'value': 18
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
'name' : 'Sat',
|
|
||||||
'series': [
|
|
||||||
{
|
|
||||||
'name' : 'Sales',
|
|
||||||
'value': 8
|
|
||||||
},
|
|
||||||
{
|
|
||||||
'name' : 'Abandoned Carts',
|
|
||||||
'value': 24
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
'name' : 'Sun',
|
|
||||||
'series': [
|
|
||||||
{
|
|
||||||
'name' : 'Sales',
|
|
||||||
'value': 16
|
|
||||||
},
|
|
||||||
{
|
|
||||||
'name' : 'Abandoned Carts',
|
|
||||||
'value': 20
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
],
|
|
||||||
'LW': [
|
|
||||||
{
|
|
||||||
'name' : 'Mon',
|
|
||||||
'series': [
|
|
||||||
{
|
|
||||||
'name' : 'Sales',
|
|
||||||
'value': 12
|
|
||||||
},
|
|
||||||
{
|
|
||||||
'name' : 'Abandoned Carts',
|
|
||||||
'value': 37
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
'name' : 'Tue',
|
|
||||||
'series': [
|
|
||||||
{
|
|
||||||
'name' : 'Sales',
|
|
||||||
'value': 8
|
|
||||||
},
|
|
||||||
{
|
|
||||||
'name' : 'Abandoned Carts',
|
|
||||||
'value': 24
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
'name' : 'Wed',
|
|
||||||
'series': [
|
|
||||||
{
|
|
||||||
'name' : 'Sales',
|
|
||||||
'value': 7
|
|
||||||
},
|
|
||||||
{
|
|
||||||
'name' : 'Abandoned Carts',
|
|
||||||
'value': 51
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
'name' : 'Thu',
|
|
||||||
'series': [
|
|
||||||
{
|
|
||||||
'name' : 'Sales',
|
|
||||||
'value': 13
|
|
||||||
},
|
|
||||||
{
|
|
||||||
'name' : 'Abandoned Carts',
|
|
||||||
'value': 31
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
'name' : 'Fri',
|
|
||||||
'series': [
|
|
||||||
{
|
|
||||||
'name' : 'Sales',
|
|
||||||
'value': 7
|
|
||||||
},
|
|
||||||
{
|
|
||||||
'name' : 'Abandoned Carts',
|
|
||||||
'value': 29
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
'name' : 'Sat',
|
|
||||||
'series': [
|
|
||||||
{
|
|
||||||
'name' : 'Sales',
|
|
||||||
'value': 6
|
|
||||||
},
|
|
||||||
{
|
|
||||||
'name' : 'Abandoned Carts',
|
|
||||||
'value': 17
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
'name' : 'Sun',
|
|
||||||
'series': [
|
|
||||||
{
|
|
||||||
'name' : 'Sales',
|
|
||||||
'value': 10
|
|
||||||
},
|
|
||||||
{
|
|
||||||
'name' : 'Abandoned Carts',
|
|
||||||
'value': 31
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
],
|
|
||||||
'TW': [
|
|
||||||
{
|
|
||||||
'name' : 'Mon',
|
|
||||||
'series': [
|
|
||||||
{
|
|
||||||
'name' : 'Sales',
|
|
||||||
'value': 11
|
|
||||||
},
|
|
||||||
{
|
|
||||||
'name' : 'Abandoned Carts',
|
|
||||||
'value': 42
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
'name' : 'Tue',
|
|
||||||
'series': [
|
|
||||||
{
|
|
||||||
'name' : 'Sales',
|
|
||||||
'value': 10
|
|
||||||
},
|
|
||||||
{
|
|
||||||
'name' : 'Abandoned Carts',
|
|
||||||
'value': 28
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
'name' : 'Wed',
|
|
||||||
'series': [
|
|
||||||
{
|
|
||||||
'name' : 'Sales',
|
|
||||||
'value': 8
|
|
||||||
},
|
|
||||||
{
|
|
||||||
'name' : 'Abandoned Carts',
|
|
||||||
'value': 43
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
'name' : 'Thu',
|
|
||||||
'series': [
|
|
||||||
{
|
|
||||||
'name' : 'Sales',
|
|
||||||
'value': 11
|
|
||||||
},
|
|
||||||
{
|
|
||||||
'name' : 'Abandoned Carts',
|
|
||||||
'value': 34
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
'name' : 'Fri',
|
|
||||||
'series': [
|
|
||||||
{
|
|
||||||
'name' : 'Sales',
|
|
||||||
'value': 8
|
|
||||||
},
|
|
||||||
{
|
|
||||||
'name' : 'Abandoned Carts',
|
|
||||||
'value': 20
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
'name' : 'Sat',
|
|
||||||
'series': [
|
|
||||||
{
|
|
||||||
'name' : 'Sales',
|
|
||||||
'value': 10
|
|
||||||
},
|
|
||||||
{
|
|
||||||
'name' : 'Abandoned Carts',
|
|
||||||
'value': 25
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
'name' : 'Sun',
|
|
||||||
'series': [
|
|
||||||
{
|
|
||||||
'name' : 'Sales',
|
|
||||||
'value': 17
|
|
||||||
},
|
|
||||||
{
|
|
||||||
'name' : 'Abandoned Carts',
|
|
||||||
'value': 22
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
'widget6': {
|
|
||||||
'title' : 'Top 5 Categories',
|
|
||||||
'ranges' : {
|
|
||||||
'TW': 'This Week',
|
|
||||||
'LW': 'Last Week',
|
|
||||||
'2W': '2 Weeks Ago'
|
|
||||||
},
|
|
||||||
'mainChart' : {
|
|
||||||
'2W': [
|
|
||||||
{
|
|
||||||
'name' : 'Women Dresses',
|
|
||||||
'value': 18
|
|
||||||
},
|
|
||||||
{
|
|
||||||
'name' : 'Men Shoes',
|
|
||||||
'value': 12
|
|
||||||
},
|
|
||||||
{
|
|
||||||
'name' : 'Women Shoes',
|
|
||||||
'value': 40
|
|
||||||
},
|
|
||||||
{
|
|
||||||
'name' : 'Women Bags',
|
|
||||||
'value': 20
|
|
||||||
},
|
|
||||||
{
|
|
||||||
'name' : 'Men T-Shirts',
|
|
||||||
'value': 10
|
|
||||||
}
|
|
||||||
],
|
|
||||||
'LW': [
|
|
||||||
{
|
|
||||||
'name' : 'Women Dresses',
|
|
||||||
'value': 17
|
|
||||||
},
|
|
||||||
{
|
|
||||||
'name' : 'Men Shoes',
|
|
||||||
'value': 14
|
|
||||||
},
|
|
||||||
{
|
|
||||||
'name' : 'Women Shoes',
|
|
||||||
'value': 36
|
|
||||||
},
|
|
||||||
{
|
|
||||||
'name' : 'Women Bags',
|
|
||||||
'value': 23
|
|
||||||
},
|
|
||||||
{
|
|
||||||
'name' : 'Men T-Shirts',
|
|
||||||
'value': 12
|
|
||||||
}
|
|
||||||
],
|
|
||||||
'TW': [
|
|
||||||
{
|
|
||||||
'name' : 'Women Dresses',
|
|
||||||
'value': 13
|
|
||||||
},
|
|
||||||
{
|
|
||||||
'name' : 'Men Shoes',
|
|
||||||
'value': 16
|
|
||||||
},
|
|
||||||
{
|
|
||||||
'name' : 'Women Shoes',
|
|
||||||
'value': 34
|
|
||||||
},
|
|
||||||
{
|
|
||||||
'name' : 'Women Bags',
|
|
||||||
'value': 23
|
|
||||||
},
|
|
||||||
{
|
|
||||||
'name' : 'Men T-Shirts',
|
|
||||||
'value': 14
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
'footerLeft' : {
|
|
||||||
'title': 'Total Sales',
|
|
||||||
'count': {
|
|
||||||
'2W': 487,
|
|
||||||
'LW': 526,
|
|
||||||
'TW': 594
|
|
||||||
}
|
|
||||||
},
|
|
||||||
'footerRight': {
|
|
||||||
'title': 'Sales From Top 5 Categories',
|
|
||||||
'count': {
|
|
||||||
'2W': 193,
|
|
||||||
'LW': 260,
|
|
||||||
'TW': 287
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
'widget7': {
|
|
||||||
'title' : 'Latest Customers',
|
|
||||||
'ranges' : {
|
|
||||||
'T' : 'Today',
|
|
||||||
'TM': 'Tomorrow'
|
|
||||||
},
|
|
||||||
'customers': {
|
|
||||||
'T' : [
|
|
||||||
{
|
|
||||||
'name' : 'Abbott Keitch',
|
|
||||||
'location': 'United States of America'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
'name' : 'Arnold Matlock',
|
|
||||||
'location': 'United States of America'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
'name' : 'Barrera Bradbury',
|
|
||||||
'location': 'England'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
'name' : 'Blair Strangeway',
|
|
||||||
'location': 'Germany'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
'name' : 'Copeland Redcliff',
|
|
||||||
'location': 'French'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
'name' : 'Henderson Cambias',
|
|
||||||
'location': 'Russia'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
'name' : 'Lily Peasegood',
|
|
||||||
'location': 'Mexico'
|
|
||||||
}
|
|
||||||
],
|
|
||||||
'TM': [
|
|
||||||
{
|
|
||||||
'name' : 'Boyle Winters',
|
|
||||||
'location': 'United States of America'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
'name' : 'Tyson Marshall',
|
|
||||||
'location': 'United States of America'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
'name' : 'Reyna Preece',
|
|
||||||
'location': 'England'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
'name' : 'Shauna Atherton',
|
|
||||||
'location': 'Germany'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
'name' : 'Tillman Lee',
|
|
||||||
'location': 'French'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
'name' : 'Velazquez Smethley',
|
|
||||||
'location': 'Russia'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
'name' : 'Helen Sheridan',
|
|
||||||
'location': 'Mexico'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
public static products = [
|
public static products = [
|
||||||
{
|
{
|
||||||
'id' : '1',
|
'id' : '1',
|
||||||
|
|
|
||||||
|
|
@ -34,7 +34,6 @@ export class FakeDbService implements InMemoryDbService
|
||||||
'calendar': CalendarFakeDb.data,
|
'calendar': CalendarFakeDb.data,
|
||||||
|
|
||||||
// E-Commerce
|
// E-Commerce
|
||||||
'e-commerce-dashboard': ECommerceFakeDb.dashboard,
|
|
||||||
'e-commerce-products' : ECommerceFakeDb.products,
|
'e-commerce-products' : ECommerceFakeDb.products,
|
||||||
'e-commerce-orders' : ECommerceFakeDb.orders,
|
'e-commerce-orders' : ECommerceFakeDb.orders,
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,338 +0,0 @@
|
||||||
<div id="e-commerce-dashboard" class="page-layout simple fullwidth grey-100-bg">
|
|
||||||
|
|
||||||
<!-- CONTENT -->
|
|
||||||
<div class="content p-24 w-100-p">
|
|
||||||
|
|
||||||
<!-- WIDGET GROUP -->
|
|
||||||
<div class="widget-group" fxLayout="row wrap" fxFlex="100" fxLayoutAlign="start start"
|
|
||||||
[@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">
|
|
||||||
|
|
||||||
<!-- 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">
|
|
||||||
<mat-form-field>
|
|
||||||
<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">
|
|
||||||
{{range.value}}
|
|
||||||
</mat-option>
|
|
||||||
</mat-select>
|
|
||||||
</mat-form-field>
|
|
||||||
<button mat-icon-button fuseWidgetToggle aria-label="more">
|
|
||||||
<mat-icon>more_vert</mat-icon>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="pt-8 pb-32" fxLayout="column" fxLayoutAlign="center center">
|
|
||||||
<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>
|
|
||||||
|
|
||||||
<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>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- / Front -->
|
|
||||||
|
|
||||||
<!-- Back -->
|
|
||||||
<div class="fuse-widget-back p-16 pt-32 mat-white-bg mat-elevation-z2">
|
|
||||||
<button mat-icon-button fuseWidgetToggle class="fuse-widget-flip-button"
|
|
||||||
aria-label="Flip widget">
|
|
||||||
<mat-icon class="s-16">close</mat-icon>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
{{widgets.widget1.detail}}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- / Back -->
|
|
||||||
|
|
||||||
</fuse-widget>
|
|
||||||
<!-- / 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">
|
|
||||||
|
|
||||||
<!-- 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="h3">{{widgets.widget2.title}}</div>
|
|
||||||
|
|
||||||
<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="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>
|
|
||||||
|
|
||||||
<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 ml-8">{{widgets.widget2.data.extra.count}}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- / Front -->
|
|
||||||
|
|
||||||
<!-- Back -->
|
|
||||||
<div class="fuse-widget-back p-16 pt-32 mat-white-bg mat-elevation-z2">
|
|
||||||
<button mat-icon-button fuseWidgetToggle class="fuse-widget-flip-button"
|
|
||||||
aria-label="Flip widget">
|
|
||||||
<mat-icon class="s-16">close</mat-icon>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
{{widgets.widget2.detail}}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- / Back -->
|
|
||||||
|
|
||||||
</fuse-widget>
|
|
||||||
<!-- / 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">
|
|
||||||
|
|
||||||
<!-- 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="h3">{{widgets.widget3.title}}</div>
|
|
||||||
|
|
||||||
<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="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>
|
|
||||||
|
|
||||||
<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 ml-8">{{widgets.widget3.data.extra.count}}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- / Front -->
|
|
||||||
|
|
||||||
<!-- Back -->
|
|
||||||
<div class="fuse-widget-back p-16 pt-32 mat-white-bg mat-elevation-z2">
|
|
||||||
<button mat-icon-button fuseWidgetToggle class="fuse-widget-flip-button"
|
|
||||||
aria-label="Flip widget">
|
|
||||||
<mat-icon class="s-16">close</mat-icon>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
{{widgets.widget3.detail}}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- / Back -->
|
|
||||||
|
|
||||||
</fuse-widget>
|
|
||||||
<!-- / 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">
|
|
||||||
|
|
||||||
<!-- 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="h3">{{widgets.widget4.title}}</div>
|
|
||||||
|
|
||||||
<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>
|
|
||||||
<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 ml-8">{{widgets.widget4.data.extra.count}}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- / Front -->
|
|
||||||
|
|
||||||
<!-- Back -->
|
|
||||||
<div class="fuse-widget-back p-16 pt-32 mat-white-bg mat-elevation-z2">
|
|
||||||
<button mat-icon-button fuseWidgetToggle class="fuse-widget-flip-button"
|
|
||||||
aria-label="Flip widget">
|
|
||||||
<mat-icon class="s-16">close</mat-icon>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
{{widgets.widget4.detail}}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- / Back -->
|
|
||||||
|
|
||||||
</fuse-widget>
|
|
||||||
<!-- / WIDGET 4 -->
|
|
||||||
|
|
||||||
|
|
||||||
<!-- WIDGET 5 -->
|
|
||||||
<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="px-16 border-bottom" fxLayout="row wrap" fxLayoutAlign="space-between center">
|
|
||||||
|
|
||||||
<div fxFlex class="py-8 h3">{{widgets.widget5.title}}</div>
|
|
||||||
|
|
||||||
<div fxFlex="0 1 auto" class="py-8" fxLayout="row">
|
|
||||||
<button mat-button class="px-16"
|
|
||||||
*ngFor="let range of widgets.widget5.ranges | keys"
|
|
||||||
(click)="widget5.currentRange = range.key"
|
|
||||||
[disabled]="widget5.currentRange == range.key">
|
|
||||||
{{range.value}}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="h-420">
|
|
||||||
<ngx-charts-bar-vertical-stacked
|
|
||||||
*fuseIfOnDom
|
|
||||||
[scheme]="widget5.scheme"
|
|
||||||
[results]="this.widgets.widget5.mainChart[this.widget5.currentRange]"
|
|
||||||
[gradient]="widget5.gradient"
|
|
||||||
[xAxis]="widget5.xAxis"
|
|
||||||
[yAxis]="widget5.yAxis"
|
|
||||||
[legend]="widget5.legend"
|
|
||||||
[showXAxisLabel]="widget5.showXAxisLabel"
|
|
||||||
[showYAxisLabel]="widget5.showYAxisLabel"
|
|
||||||
[xAxisLabel]="widget5.xAxisLabel"
|
|
||||||
[yAxisLabel]="widget5.yAxisLabel"
|
|
||||||
(select)="widget5.onSelect($event)">
|
|
||||||
</ngx-charts-bar-vertical-stacked>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- / Front -->
|
|
||||||
|
|
||||||
</fuse-widget>
|
|
||||||
<!-- / WIDGET 5 -->
|
|
||||||
|
|
||||||
<!-- WIDGET 6 -->
|
|
||||||
<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="h3">{{widgets.widget6.title}}</div>
|
|
||||||
<mat-form-field>
|
|
||||||
<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}}
|
|
||||||
</mat-option>
|
|
||||||
</mat-select>
|
|
||||||
</mat-form-field>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="h-400">
|
|
||||||
<ngx-charts-pie-chart
|
|
||||||
*fuseIfOnDom
|
|
||||||
[scheme]="widget6.scheme"
|
|
||||||
[results]="widgets.widget6.mainChart[widget6.currentRange]"
|
|
||||||
[legend]="widget6.showLegend"
|
|
||||||
[explodeSlices]="widget6.explodeSlices"
|
|
||||||
[labels]="widget6.labels"
|
|
||||||
[doughnut]="widget6.doughnut"
|
|
||||||
[gradient]="widget6.gradient"
|
|
||||||
(select)="widget6.onSelect($event)">
|
|
||||||
</ngx-charts-pie-chart>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="py-8 mh-16 border-top" fxLayout="row wrap" fxLayoutAlign="start center">
|
|
||||||
<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>
|
|
||||||
<span class="h4">{{widgets.widget6.footerRight.title}}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<!-- / Front -->
|
|
||||||
|
|
||||||
</fuse-widget>
|
|
||||||
<!-- / WIDGET 6 -->
|
|
||||||
|
|
||||||
<!-- WIDGET 7 -->
|
|
||||||
<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="h3">{{widgets.widget7.title}}</div>
|
|
||||||
<mat-form-field>
|
|
||||||
<mat-select class="simplified" [(ngModel)]="widget7.currentRange"
|
|
||||||
aria-label="Change range">
|
|
||||||
<mat-option *ngFor="let range of widgets.widget7.ranges | keys"
|
|
||||||
[value]="range.key">
|
|
||||||
{{range.value}}
|
|
||||||
</mat-option>
|
|
||||||
</mat-select>
|
|
||||||
</mat-form-field>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="p-16" fxLayout="row" fxLayoutAlign="space-between center"
|
|
||||||
*ngFor="let customer of widgets.widget7.customers[widget7.currentRange]">
|
|
||||||
<div>
|
|
||||||
<div class="h3">{{customer.name}}</div>
|
|
||||||
<div>
|
|
||||||
<span *ngIf="customer.location">{{customer.location}}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<button mat-icon-button aria-label="More information">
|
|
||||||
<mat-icon>more_vert</mat-icon>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<!-- / Front -->
|
|
||||||
|
|
||||||
</fuse-widget>
|
|
||||||
<!-- / WIDGET 7 -->
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<!-- / WIDGET GROUP -->
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<!-- / CONTENT -->
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
@ -1,7 +0,0 @@
|
||||||
#e-commerce-dashboard {
|
|
||||||
|
|
||||||
.content {
|
|
||||||
flex: 1 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
@ -1,89 +0,0 @@
|
||||||
import { Component, OnInit, ViewEncapsulation } from '@angular/core';
|
|
||||||
|
|
||||||
import { fuseAnimations } from '@fuse/animations';
|
|
||||||
|
|
||||||
import { EcommerceDashboardService } from 'app/main/apps/e-commerce/dashboard/dashboard.service';
|
|
||||||
|
|
||||||
@Component({
|
|
||||||
selector : 'e-commerce-dashboard',
|
|
||||||
templateUrl : './dashboard.component.html',
|
|
||||||
styleUrls : ['./dashboard.component.scss'],
|
|
||||||
encapsulation: ViewEncapsulation.None,
|
|
||||||
animations : fuseAnimations
|
|
||||||
})
|
|
||||||
export class EcommerceDashboardComponent implements OnInit
|
|
||||||
{
|
|
||||||
projects: any[];
|
|
||||||
selectedProject: any;
|
|
||||||
|
|
||||||
widgets: any;
|
|
||||||
widget5: any = {};
|
|
||||||
widget6: any = {};
|
|
||||||
widget7: any = {};
|
|
||||||
|
|
||||||
constructor(
|
|
||||||
private _eCommerceDashboardService: EcommerceDashboardService
|
|
||||||
)
|
|
||||||
{
|
|
||||||
/**
|
|
||||||
* Widget 5
|
|
||||||
*/
|
|
||||||
this.widget5 = {
|
|
||||||
currentRange : 'TW',
|
|
||||||
xAxis : true,
|
|
||||||
yAxis : true,
|
|
||||||
gradient : false,
|
|
||||||
legend : false,
|
|
||||||
showXAxisLabel: false,
|
|
||||||
xAxisLabel : 'Days',
|
|
||||||
showYAxisLabel: false,
|
|
||||||
yAxisLabel : 'Isues',
|
|
||||||
scheme : {
|
|
||||||
domain: ['#42BFF7', '#C6ECFD', '#C7B42C', '#AAAAAA']
|
|
||||||
},
|
|
||||||
onSelect : (ev) => {
|
|
||||||
console.log(ev);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Widget 6
|
|
||||||
*/
|
|
||||||
this.widget6 = {
|
|
||||||
currentRange : 'TW',
|
|
||||||
legend : false,
|
|
||||||
explodeSlices: false,
|
|
||||||
labels : true,
|
|
||||||
doughnut : true,
|
|
||||||
gradient : false,
|
|
||||||
scheme : {
|
|
||||||
domain: ['#f44336', '#9c27b0', '#03a9f4', '#e91e63']
|
|
||||||
},
|
|
||||||
onSelect : (ev) => {
|
|
||||||
console.log(ev);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Widget 7
|
|
||||||
*/
|
|
||||||
this.widget7 = {
|
|
||||||
currentRange: 'T'
|
|
||||||
};
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
// -----------------------------------------------------------------------------------------------------
|
|
||||||
// @ Lifecycle hooks
|
|
||||||
// -----------------------------------------------------------------------------------------------------
|
|
||||||
|
|
||||||
/**
|
|
||||||
* On init
|
|
||||||
*/
|
|
||||||
ngOnInit(): void
|
|
||||||
{
|
|
||||||
this.projects = this._eCommerceDashboardService.projects;
|
|
||||||
this.selectedProject = this.projects[0];
|
|
||||||
this.widgets = this._eCommerceDashboardService.widgets;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,77 +0,0 @@
|
||||||
import { Injectable } from '@angular/core';
|
|
||||||
import { HttpClient } from '@angular/common/http';
|
|
||||||
import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router';
|
|
||||||
import { Observable } from 'rxjs';
|
|
||||||
|
|
||||||
@Injectable()
|
|
||||||
export class EcommerceDashboardService implements Resolve<any>
|
|
||||||
{
|
|
||||||
projects: any[];
|
|
||||||
widgets: any[];
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Constructor
|
|
||||||
*
|
|
||||||
* @param {HttpClient} _httpClient
|
|
||||||
*/
|
|
||||||
constructor(
|
|
||||||
private _httpClient: HttpClient
|
|
||||||
)
|
|
||||||
{
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Resolver
|
|
||||||
*
|
|
||||||
* @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
|
|
||||||
);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Get projects
|
|
||||||
*
|
|
||||||
* @returns {Promise<any>}
|
|
||||||
*/
|
|
||||||
getProjects(): Promise<any>
|
|
||||||
{
|
|
||||||
return new Promise((resolve, reject) => {
|
|
||||||
this._httpClient.get('api/project-dashboard-projects')
|
|
||||||
.subscribe((response: any) => {
|
|
||||||
this.projects = response;
|
|
||||||
resolve(response);
|
|
||||||
}, reject);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Get widgets
|
|
||||||
*
|
|
||||||
* @returns {Promise<any>}
|
|
||||||
*/
|
|
||||||
getWidgets(): Promise<any>
|
|
||||||
{
|
|
||||||
return new Promise((resolve, reject) => {
|
|
||||||
this._httpClient.get('api/e-commerce-dashboard')
|
|
||||||
.subscribe((response: any) => {
|
|
||||||
this.widgets = response;
|
|
||||||
resolve(response);
|
|
||||||
}, reject);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -7,8 +7,6 @@ import { AgmCoreModule } from '@agm/core';
|
||||||
import { FuseSharedModule } from '@fuse/shared.module';
|
import { FuseSharedModule } from '@fuse/shared.module';
|
||||||
import { FuseWidgetModule } from '@fuse/components/widget/widget.module';
|
import { FuseWidgetModule } from '@fuse/components/widget/widget.module';
|
||||||
|
|
||||||
import { EcommerceDashboardComponent } from 'app/main/apps/e-commerce/dashboard/dashboard.component';
|
|
||||||
import { EcommerceDashboardService } from 'app/main/apps/e-commerce/dashboard/dashboard.service';
|
|
||||||
import { EcommerceProductsComponent } from 'app/main/apps/e-commerce/products/products.component';
|
import { EcommerceProductsComponent } from 'app/main/apps/e-commerce/products/products.component';
|
||||||
import { EcommerceProductsService } from 'app/main/apps/e-commerce/products/products.service';
|
import { EcommerceProductsService } from 'app/main/apps/e-commerce/products/products.service';
|
||||||
import { EcommerceProductComponent } from 'app/main/apps/e-commerce/product/product.component';
|
import { EcommerceProductComponent } from 'app/main/apps/e-commerce/product/product.component';
|
||||||
|
|
@ -19,13 +17,6 @@ import { EcommerceOrderComponent } from 'app/main/apps/e-commerce/order/order.co
|
||||||
import { EcommerceOrderService } from 'app/main/apps/e-commerce/order/order.service';
|
import { EcommerceOrderService } from 'app/main/apps/e-commerce/order/order.service';
|
||||||
|
|
||||||
const routes: Routes = [
|
const routes: Routes = [
|
||||||
{
|
|
||||||
path : 'dashboard',
|
|
||||||
component: EcommerceDashboardComponent,
|
|
||||||
resolve : {
|
|
||||||
data: EcommerceDashboardService
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
path : 'products',
|
path : 'products',
|
||||||
component: EcommerceProductsComponent,
|
component: EcommerceProductsComponent,
|
||||||
|
|
@ -65,7 +56,6 @@ const routes: Routes = [
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
declarations: [
|
declarations: [
|
||||||
EcommerceDashboardComponent,
|
|
||||||
EcommerceProductsComponent,
|
EcommerceProductsComponent,
|
||||||
EcommerceProductComponent,
|
EcommerceProductComponent,
|
||||||
EcommerceOrdersComponent,
|
EcommerceOrdersComponent,
|
||||||
|
|
@ -93,10 +83,9 @@ const routes: Routes = [
|
||||||
}),
|
}),
|
||||||
|
|
||||||
FuseSharedModule,
|
FuseSharedModule,
|
||||||
FuseWidgetModule,
|
FuseWidgetModule
|
||||||
],
|
],
|
||||||
providers : [
|
providers : [
|
||||||
EcommerceDashboardService,
|
|
||||||
EcommerceProductsService,
|
EcommerceProductsService,
|
||||||
EcommerceProductService,
|
EcommerceProductService,
|
||||||
EcommerceOrdersService,
|
EcommerceOrdersService,
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user