mirror of
https://github.com/richard-loafle/fuse-angular.git
synced 2025-01-09 20:15:07 +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',
|
||||
'classes': 'mat-primary-bg',
|
||||
'classes': 'primary',
|
||||
'icon' : ''
|
||||
},
|
||||
{
|
||||
|
|
@ -1718,7 +1718,7 @@ export class ProjectDashboardDb
|
|||
[
|
||||
{
|
||||
'value' : 'Marketing',
|
||||
'classes': 'mat-accent-bg',
|
||||
'classes': 'accent',
|
||||
'icon' : ''
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -1,519 +1,5 @@
|
|||
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 = [
|
||||
{
|
||||
'id' : '1',
|
||||
|
|
|
|||
|
|
@ -34,7 +34,6 @@ export class FakeDbService implements InMemoryDbService
|
|||
'calendar': CalendarFakeDb.data,
|
||||
|
||||
// E-Commerce
|
||||
'e-commerce-dashboard': ECommerceFakeDb.dashboard,
|
||||
'e-commerce-products' : ECommerceFakeDb.products,
|
||||
'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 { 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 { EcommerceProductsService } from 'app/main/apps/e-commerce/products/products.service';
|
||||
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';
|
||||
|
||||
const routes: Routes = [
|
||||
{
|
||||
path : 'dashboard',
|
||||
component: EcommerceDashboardComponent,
|
||||
resolve : {
|
||||
data: EcommerceDashboardService
|
||||
}
|
||||
},
|
||||
{
|
||||
path : 'products',
|
||||
component: EcommerceProductsComponent,
|
||||
|
|
@ -65,7 +56,6 @@ const routes: Routes = [
|
|||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
EcommerceDashboardComponent,
|
||||
EcommerceProductsComponent,
|
||||
EcommerceProductComponent,
|
||||
EcommerceOrdersComponent,
|
||||
|
|
@ -93,10 +83,9 @@ const routes: Routes = [
|
|||
}),
|
||||
|
||||
FuseSharedModule,
|
||||
FuseWidgetModule,
|
||||
FuseWidgetModule
|
||||
],
|
||||
providers : [
|
||||
EcommerceDashboardService,
|
||||
EcommerceProductsService,
|
||||
EcommerceProductService,
|
||||
EcommerceOrdersService,
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user