Charts added. Basic Dashboard functionality

src/app/@core/mock/orders-profit-chart.service.ts

@@ -9,7 +9,7 @@ export class OrdersProfitChartService extends OrdersProfitChartData {
 
   private summary = [
     {
-      title: 'Marketplace',
+      title: 'Whole Year',
       value: 3654,
     },
     {

src/app/@theme/components/header/header.component.html

@@ -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"

src/app/pages/dashboard/dashboard.module.ts

@@ -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 { }

src/app/pages/dashboard/solar/solar.component.ts

@@ -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) {

src/app/pages/e-commerce/charts-panel/chart-panel-header/chart-panel-header.component.ts

@@ -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',
       },
     ];
   }

src/app/pages/e-commerce/charts-panel/charts-panel.component.html

-<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"

src/app/pages/e-commerce/charts-panel/charts/profit-chart.component.ts

@@ -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: {

src/app/pages/e-commerce/e-commerce.module.ts

@@ -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 { }

src/app/pages/e-commerce/earning-card/earning-card.component.html

-<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>-->

src/app/pages/e-commerce/earning-card/front-side/earning-card-front.component.html

 <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">

src/app/pages/e-commerce/earning-card/front-side/earning-live-update-chart.component.ts

@@ -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: [

src/app/pages/home/home.component.html

 <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>

src/app/pages/home/home.component.scss

@@ -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;
+    }
+  }
 
 }

src/app/pages/home/home.component.ts

@@ -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;
+  }
 
 }

src/app/pages/home/home.module.ts

@@ -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 { }