add costs-statistic.component

src/app/modules/finance/components/costs-statistic/costs-statistic.component.html

@@ -0,0 +1,9 @@
+<md-card class="costs-statistics">
+    <md-card-header>
+        <md-card-title>Статистика:</md-card-title>
+        <md-card-subtitle></md-card-subtitle>
+    </md-card-header>
+    <md-card-content>
+
+    </md-card-content>
+</md-card>

src/app/modules/finance/components/costs-statistic/costs-statistic.component.scss

@@ -0,0 +1,3 @@
+.costs-statistics {
+    margin-top: 7px;
+}

src/app/modules/finance/components/costs-statistic/costs-statistic.component.ts

@@ -0,0 +1,11 @@
+import {Component} from "@angular/core";
+
+@Component({
+    selector: 'costs-statistic',
+    templateUrl: './costs-statistic.component.html',
+    styleUrls: ['./costs-statistic.component.scss']
+})
+export class CostsStatisticComponent {
+    constructor() {
+    }
+}

src/app/modules/finance/components/costs/costs.component.html

@@ -2,6 +2,9 @@
     <md-card class="app-header">
         <h3>Финансы</h3>
     </md-card>
+    <div class="app-statistics">
+        <costs-statistic></costs-statistic>
+    </div>
     <div class="app-content">
         <costs-list (costEdited)="requestModifiedData()" (costDeleted)="requestModifiedData()"></costs-list>
         <costs-chart></costs-chart>

src/app/modules/finance/components/costs/costs.component.scss

@@ -1,3 +1,7 @@
+.app-statistics {
+    display: grid;
+    grid-template-columns: auto;
+}
 .app-content {
     display: grid;
     margin-top: 7px;

src/app/modules/finance/finance.module.ts

@@ -8,7 +8,6 @@ import {CostsChartLayoutComponent} from "./components/costs-chart-layout/costs-c
 import {CostsListComponent} from "./components/costs-list/costs-list.component";
 import {CostsChartComponent} from "./components/costs-chart/costs-chart.component";
 import {CostsService} from "./services/costs.service";
-
 import {
     MdButtonModule,
     MdIconModule,
@@ -27,6 +26,7 @@ import {CommonModule} from "@angular/common";
 import {ReactiveFormsModule} from "@angular/forms";
 import {AddCostDialogComponent} from "./components/add-cost-dialog/add-cost-dialog.component";
 import {EditCostDialogComponent} from "./components/edit-cost-dialog/edit-cost-dialog.component";
+import {CostsStatisticComponent} from "./components/costs-statistic/costs-statistic.component";
 
 @NgModule({
     imports: [
@@ -53,7 +53,8 @@ import {EditCostDialogComponent} from "./components/edit-cost-dialog/edit-cost-d
         CostsComponent,
         CostsChartLayoutComponent,
         CostsListComponent,
-        CostsChartComponent
+        CostsChartComponent,
+        CostsStatisticComponent
     ],
     declarations: [
         CostsComponent,
@@ -64,7 +65,8 @@ import {EditCostDialogComponent} from "./components/edit-cost-dialog/edit-cost-d
         CostsChartComponent,
         Spinner,
         AddCostDialogComponent,
-        EditCostDialogComponent
+        EditCostDialogComponent,
+        CostsStatisticComponent
     ],
     entryComponents: [
         Spinner,