Commit a7191e00 authored by Shayan Khorsandi's avatar Shayan Khorsandi
Browse files

Charts added. Basic Dashboard functionality

parent b153a6a8
......@@ -9,7 +9,7 @@ export class OrdersProfitChartService extends OrdersProfitChartData {
private summary = [
{
title: 'Marketplace',
title: 'Whole Year',
value: 3654,
},
{
......
......@@ -12,12 +12,13 @@
<div class="header-container">
<nb-actions size="small">
<nb-action class="control-item">
<nb-search type="rotate-layout"></nb-search>
<nb-action class="control-item" icon="car-outline" title="New Trip">
</nb-action>
<nb-action class="control-item" icon="bell-outline" title="Notifications"
badgePosition="top left" badgeStatus="info" badgeDot>
</nb-action>
<nb-action class="control-item" icon="email-outline"></nb-action>
<nb-action class="control-item" icon="bell-outline"></nb-action>
<nb-action class="control-item" icon="shopping-cart-outline" title="Shop"
badgePosition="top right" badgeStatus="danger" badgeDot></nb-action>
<nb-action class="user-action" *nbIsGranted="['view', 'user']" >
<nb-user [nbContextMenu]="userMenu"
[onlyPicture]="userPictureOnly"
......
......@@ -32,38 +32,41 @@ import { TrafficChartComponent } from './traffic/traffic-chart.component';
import { FormsModule } from '@angular/forms';
@NgModule({
imports: [
FormsModule,
ThemeModule,
NbCardModule,
NbUserModule,
NbButtonModule,
NbTabsetModule,
NbActionsModule,
NbRadioModule,
NbSelectModule,
NbListModule,
NbIconModule,
NbButtonModule,
NgxEchartsModule,
],
declarations: [
DashboardComponent,
StatusCardComponent,
TemperatureDraggerComponent,
ContactsComponent,
RoomSelectorComponent,
TemperatureComponent,
RoomsComponent,
KittenComponent,
SecurityCamerasComponent,
ElectricityComponent,
ElectricityChartComponent,
WeatherComponent,
PlayerComponent,
SolarComponent,
TrafficComponent,
TrafficChartComponent,
],
imports: [
FormsModule,
ThemeModule,
NbCardModule,
NbUserModule,
NbButtonModule,
NbTabsetModule,
NbActionsModule,
NbRadioModule,
NbSelectModule,
NbListModule,
NbIconModule,
NbButtonModule,
NgxEchartsModule,
],
declarations: [
DashboardComponent,
StatusCardComponent,
TemperatureDraggerComponent,
ContactsComponent,
RoomSelectorComponent,
TemperatureComponent,
RoomsComponent,
KittenComponent,
SecurityCamerasComponent,
ElectricityComponent,
ElectricityChartComponent,
WeatherComponent,
PlayerComponent,
SolarComponent,
TrafficComponent,
TrafficChartComponent,
],
exports: [
SolarComponent
]
})
export class DashboardModule { }
......@@ -8,14 +8,14 @@ declare const echarts: any;
selector: 'ngx-solar',
styleUrls: ['./solar.component.scss'],
template: `
<nb-card size="tiny" class="solar-card">
<nb-card-header>Solar Energy Consumption</nb-card-header>
<nb-card size="tiny" class="solar-card" accent="warning">
<nb-card-header>Your Level</nb-card-header>
<nb-card-body>
<div echarts [options]="option" class="echart">
</div>
<div class="info">
<div class="h4 value">6.421 kWh</div>
<div class="details subtitle-2"><span>out of</span> 8.421 kWh</div>
<div class="h4 value">Level 20</div>
<div class="details subtitle-2">18Km to the next level</div>
</div>
</nb-card-body>
</nb-card>
......@@ -23,7 +23,7 @@ declare const echarts: any;
})
export class SolarComponent implements AfterViewInit, OnDestroy {
private value = 0;
private value = 80;
@Input('chartValue')
set chartValue(value: number) {
......
......@@ -45,15 +45,15 @@ export class ChartPanelHeaderComponent implements OnDestroy {
this.chartLegend = [
{
iconColor: orderProfitLegend.firstItem,
title: 'Payment',
title: 'CO2',
},
{
iconColor: orderProfitLegend.secondItem,
title: 'Canceled',
title: 'CO',
},
{
iconColor: orderProfitLegend.thirdItem,
title: 'All orders',
title: 'CO2+CO',
},
];
}
......
<nb-card size="large">
<nb-card size="medium">
<nb-tabset fullWidth (changeTab)="changeTab($event)">
<nb-tab tabTitle="Orders">
<nb-tab tabTitle="Your Savings" [lazyLoad]="true">
<div class="chart-container">
<ngx-chart-panel-summary [summary]="chartPanelSummary"></ngx-chart-panel-summary>
<ngx-chart-panel-header [type]="period"
......@@ -9,7 +9,7 @@
<ngx-orders-chart #ordersChart [ordersChartData]="ordersChartData"></ngx-orders-chart>
</div>
</nb-tab>
<nb-tab tabTitle="Profit" [lazyLoad]="true">
<nb-tab tabTitle="Our Community's Savings" [lazyLoad]="true">
<div class="chart-container">
<ngx-chart-panel-summary [summary]="chartPanelSummary"></ngx-chart-panel-summary>
<ngx-chart-panel-header [type]="period"
......
......@@ -104,7 +104,7 @@ export class ProfitChartComponent implements AfterViewInit, OnDestroy, OnChanges
],
series: [
{
name: 'Canceled',
name: 'CO',
type: 'bar',
barGap: 0,
barWidth: '20%',
......@@ -122,7 +122,7 @@ export class ProfitChartComponent implements AfterViewInit, OnDestroy, OnChanges
data: this.profitChartData.data[0],
},
{
name: 'Payment',
name: 'CO2',
type: 'bar',
barWidth: '20%',
itemStyle: {
......@@ -139,7 +139,7 @@ export class ProfitChartComponent implements AfterViewInit, OnDestroy, OnChanges
data: this.profitChartData.data[1],
},
{
name: 'All orders',
name: 'CO2+CO',
type: 'bar',
barWidth: '20%',
itemStyle: {
......
......@@ -57,57 +57,64 @@ import { EarningCardFrontComponent } from './earning-card/front-side/earning-car
import { EarningLiveUpdateChartComponent } from './earning-card/front-side/earning-live-update-chart.component';
@NgModule({
imports: [
ThemeModule,
NbCardModule,
NbUserModule,
NbButtonModule,
NbIconModule,
NbTabsetModule,
NbSelectModule,
NbListModule,
ChartModule,
NbProgressBarModule,
NgxEchartsModule,
NgxChartsModule,
LeafletModule,
],
declarations: [
ECommerceComponent,
StatsCardFrontComponent,
StatsAreaChartComponent,
StatsBarAnimationChartComponent,
ProfitCardComponent,
ECommerceChartsPanelComponent,
ChartPanelHeaderComponent,
ChartPanelSummaryComponent,
OrdersChartComponent,
ProfitChartComponent,
StatsCardBackComponent,
TrafficRevealCardComponent,
TrafficBarChartComponent,
TrafficFrontCardComponent,
TrafficBackCardComponent,
TrafficBarComponent,
TrafficCardsHeaderComponent,
CountryOrdersComponent,
CountryOrdersMapComponent,
CountryOrdersChartComponent,
ECommerceVisitorsAnalyticsComponent,
ECommerceVisitorsAnalyticsChartComponent,
ECommerceVisitorsStatisticsComponent,
ECommerceLegendChartComponent,
ECommerceUserActivityComponent,
ECommerceProgressSectionComponent,
SlideOutComponent,
EarningCardComponent,
imports: [
ThemeModule,
NbCardModule,
NbUserModule,
NbButtonModule,
NbIconModule,
NbTabsetModule,
NbSelectModule,
NbListModule,
ChartModule,
NbProgressBarModule,
NgxEchartsModule,
NgxChartsModule,
LeafletModule,
],
declarations: [
ECommerceComponent,
StatsCardFrontComponent,
StatsAreaChartComponent,
StatsBarAnimationChartComponent,
ProfitCardComponent,
ECommerceChartsPanelComponent,
ChartPanelHeaderComponent,
ChartPanelSummaryComponent,
OrdersChartComponent,
ProfitChartComponent,
StatsCardBackComponent,
TrafficRevealCardComponent,
TrafficBarChartComponent,
TrafficFrontCardComponent,
TrafficBackCardComponent,
TrafficBarComponent,
TrafficCardsHeaderComponent,
CountryOrdersComponent,
CountryOrdersMapComponent,
CountryOrdersChartComponent,
ECommerceVisitorsAnalyticsComponent,
ECommerceVisitorsAnalyticsChartComponent,
ECommerceVisitorsStatisticsComponent,
ECommerceLegendChartComponent,
ECommerceUserActivityComponent,
ECommerceProgressSectionComponent,
SlideOutComponent,
EarningCardComponent,
EarningCardFrontComponent,
EarningCardBackComponent,
EarningPieChartComponent,
EarningLiveUpdateChartComponent,
],
providers: [
CountryOrdersMapService,
],
exports: [
EarningCardFrontComponent,
EarningCardBackComponent,
EarningPieChartComponent,
EarningLiveUpdateChartComponent,
],
providers: [
CountryOrdersMapService,
],
EarningCardComponent,
ChartPanelSummaryComponent,
ECommerceChartsPanelComponent
]
})
export class ECommerceModule { }
<nb-flip-card [showToggleButton]="false" [flipped]="flipped">
<nb-card-front>
<nb-card size="tiny">
<!--<nb-flip-card [showToggleButton]="false" [flipped]="flipped">-->
<!-- <nb-card-front>-->
<nb-card size="tiny" accent="danger">
<ngx-earning-card-front></ngx-earning-card-front>
<nb-icon icon="chevron-right-outline" pack="eva" class="flip-icon" (click)="toggleView()"></nb-icon>
<!-- <nb-icon icon="chevron-right-outline" pack="eva" class="flip-icon" (click)="toggleView()"></nb-icon>-->
</nb-card>
</nb-card-front>
<nb-card-back>
<nb-card size="tiny">
<ngx-earning-card-back></ngx-earning-card-back>
<nb-icon icon="chevron-right-outline" pack="eva" class="flip-icon" (click)="toggleView()"></nb-icon>
</nb-card>
</nb-card-back>
</nb-flip-card>
<!-- </nb-card-front>-->
<!-- <nb-card-back>-->
<!-- <nb-card size="tiny">-->
<!-- <ngx-earning-card-back></ngx-earning-card-back>-->
<!-- <nb-icon icon="chevron-right-outline" pack="eva" class="flip-icon" (click)="toggleView()"></nb-icon>-->
<!-- </nb-card>-->
<!-- </nb-card-back>-->
<!--</nb-flip-card>-->
<nb-card-header>
<nb-select [selected]="selectedCurrency" (selectedChange)="changeCurrency($event)">
<nb-option *ngFor="let currency of currencies" [value]="currency">{{ currency }}</nb-option>
</nb-select>
Real-Time CO2 Emission
<!-- <nb-select [selected]="selectedCurrency" (selectedChange)="changeCurrency($event)">-->
<!-- <nb-option *ngFor="let currency of currencies" [value]="currency">{{ currency }}</nb-option>-->
<!-- </nb-select>-->
</nb-card-header>
<nb-card-body>
<div class="chart-info">
<div>Daily Income</div>
<div class="h6">{{ earningLiveUpdateCardData.dailyIncome | ngxNumberWithCommas }}</div>
<div>Daily Emission</div>
<div class="h6">{{ earningLiveUpdateCardData.dailyIncome | ngxNumberWithCommas }} KG</div>
<div class="delta"
[class.up]="earningLiveUpdateCardData.delta.up"
[class.down]="!earningLiveUpdateCardData.delta.up">
......
......@@ -100,7 +100,7 @@ export class EarningLiveUpdateChartComponent implements AfterViewInit, OnDestroy
backgroundColor: earningLineTheme.tooltipBg,
borderColor: earningLineTheme.tooltipBorderColor,
borderWidth: earningLineTheme.tooltipBorderWidth,
formatter: params => `$ ${Math.round(parseInt(params.value[1], 10))}`,
formatter: params => `${Math.round(parseInt(params.value[1], 10))} KG`,
extraCssText: earningLineTheme.tooltipExtraCss,
},
series: [
......
<div class="row">
<div class="col-md-5">
<nb-card>
<nb-card-header>
Your Status
</nb-card-header>
<nb-card-body>
<div class="row">
<div class="col-md-6">
<nb-card accent="primary">
<nb-card-header></nb-card-header>
<nb-card-body>
</nb-card-body>
</nb-card>
</div>
<div class="col-md-6">
<nb-card accent="primary">
<nb-card-header>
</nb-card-header>
<nb-card-body>
</nb-card-body>
</nb-card>
</div>
</div>
<div class="row">
<div class="col-md-12">
<nb-card accent="warning">
<nb-card-header>
</nb-card-header>
<nb-card-body>
</nb-card-body>
</nb-card>
</div>
</div>
</nb-card-body>
</nb-card>
<div class="row">
<div class="col-md-6">
<nb-card accent="info" size="tiny">
<nb-card-header>
Walking Distance
</nb-card-header>
<nb-card-body>
<div class="row">
<div class="col-md-12">
<div fullWidth class="h4 value" style="text-align: center">3,192M</div>
</div>
<div class="col-md-12" style="text-align: center">
<nb-icon size="medium" icon="heart-outline" status="danger"></nb-icon>
<nb-icon icon="award-outline" status="primary"></nb-icon>
<nb-icon icon="bulb-outline" status="warning"></nb-icon>
</div>
</div>
</nb-card-body>
</nb-card>
</div>
<div class="col-md-6">
<nb-card accent="success" size="tiny">
<nb-card-header>
Carbons Saved <span><nb-icon nbTooltip="Carbon is bad :(" icon="alert-circle-outline" status="info"></nb-icon></span>
</nb-card-header>
<nb-card-body>
<div class="row">
<div class="col-md-12">
<div fullWidth class="h4 value" style="text-align: center">53KG</div>
</div>
<div class="col-md-12" style="text-align: center">
<nb-icon size="medium" icon="heart-outline" status="danger"></nb-icon>
</div>
</div>
</nb-card-body>
</nb-card>
</div>
</div>
<div class="row">
<div class="col-md-12">
<ngx-solar></ngx-solar>
</div>
</div>
</div>
<div class="col-md-7">
<nb-card size="medium">
......@@ -45,12 +50,13 @@
<nb-tabset fullWidth>
<nb-tab tabTitle="Friends Ranking" tabIcon="people-outline" responsive>
<div class="row">
<div class="col-md-9 offset-md-1">
<div class="col-md-12">
<nb-list>
<nb-list-item *ngFor="let friend of friends">
<nb-list-item class="contact" *ngFor="let friend of friends">
<nb-user [name]="friend.name" badgePosition="bottom-right"
[title]="friend.amount">
</nb-user>
<nb-icon icon="email-outline" pack="eva"></nb-icon>
</nb-list-item>
</nb-list>
</div>
......@@ -59,12 +65,13 @@
</nb-tab>
<nb-tab tabTitle="World Ranking" tabIcon="globe-outline" responsive>
<div class="row">
<div class="col-md-9 offset-md-1">
<div class="col-md-12">
<nb-list>
<nb-list-item *ngFor="let user of users">
<nb-list-item class="contact "*ngFor="let user of users">
<nb-user [name]="user.name" badgePosition="bottom-right"
[title]="user.amount">
</nb-user>
<nb-icon icon="award-outline" pack="eva"></nb-icon>
</nb-list-item>
</nb-list>
</div>
......@@ -76,15 +83,25 @@
</div>
</div>
<div class="row">
<div class="col-md-12">
<nb-card accent="info">
<nb-card-header>Current Trip</nb-card-header>
<nb-card-body>
<nb-alert outline="primary" *ngIf="!tripInProgress">
There is no active trip right now!!
</nb-alert>
</nb-card-body>
</nb-card>
<div class="col-md-5">
<div class="row">
<div class="col-md-12">
<nb-card accent="info">
<nb-card-header>Current Trip</nb-card-header>
<nb-card-body>
<nb-alert outline="primary" *ngIf="!tripInProgress">
There is no active trip right now!!
</nb-alert>
</nb-card-body>
</nb-card>
</div>
<div class="col-md-12">
<ngx-earning-card></ngx-earning-card>
</div>
</div>
</div>
<div class="col-md-7">
<ngx-ecommerce-charts></ngx-ecommerce-charts>
</div>
</div>
<div class="row">
......@@ -161,9 +178,11 @@
</div>
</div>
<div class="row">
<div class="col-md-4 offset-md-4">
<button nbButton fullWidth outline status="primary" nbStepperNext
>Start Trip</button>
<div class="col-md-3 offset-md-3">
<button nbButton fullWidth outline status="warning" nbStepperNext>Cancel Trip</button>
</div>
<div class="col-md-3">
<button nbButton fullWidth outline status="primary" nbStepperNext>Start Trip</button>
</div>
</div>
</nb-step>
......
......@@ -13,5 +13,14 @@ nb-card-body {
overflow-y: auto;
}
.contact {
display: flex;
align-items: center;
justify-content: space-between;
&:first-child {
border-top: none;
}
}
}
......@@ -68,5 +68,12 @@ export class HomeComponent implements OnInit {
// this.selectedDestination = null;
this.map.startTrip(lat, lng, method);
}
resetTrip(): void {
this.stepper.reset();
this.firstSelect = false;
this.methodEfficiency = null;
this.car = null;
this.selectedDestination = null;
}
}
......@@ -6,15 +6,17 @@ import { HomeComponent } from './home.component';
import {
NbAlertModule,
NbButtonModule,
NbCardModule,
NbCardModule, NbIconModule,
NbListModule,
NbSelectModule,
NbStepperModule,
NbTabsetModule,
NbTabsetModule, NbTooltipModule,
NbUserModule
} from '@nebular/theme';
import {FormsModule} from '@angular/forms';
import {MapsModule} from '../maps/maps.module';
import {ECommerceModule} from "../e-commerce/e-commerce.module";
import {DashboardModule} from "../dashboard/dashboard.module";
@NgModule({
......@@ -34,6 +36,10 @@ import {MapsModule} from '../maps/maps.module';
NbUserModule,
NbButtonModule,
NbAlertModule,
ECommerceModule,
NbIconModule,
DashboardModule,
NbTooltipModule,
],
})
export class HomeModule { }
Supports Markdown
0%