From 8f19fa96a3a3ece3cb03d1ec421416f3fbf8b2c6 Mon Sep 17 00:00:00 2001
From: eugene-sinitsyn <e.sinitsyn.s@akveo.com>
Date: Wed, 11 Mar 2020 13:20:11 +0300
Subject: [PATCH] Fix scrollbar for "traffic" card

---
 .../traffic-back-card.component.html          |  5 ++++
 .../traffic-back-card.component.scss          | 25 ++++++++++++++++++
 .../traffic-cards-header.component.html       | 10 +++----
 .../traffic-cards-header.component.scss       |  5 ++++
 .../traffic-reveal-card.component.html        | 26 +++++++++++++++++++
 .../traffic-reveal-card.component.scss        | 19 ++++++++++++++
 6 files changed, 84 insertions(+), 6 deletions(-)
 create mode 100644 src/app/pages/e-commerce/traffic-reveal-card/back-side/traffic-back-card.component.html
 create mode 100644 src/app/pages/e-commerce/traffic-reveal-card/back-side/traffic-back-card.component.scss
 create mode 100644 src/app/pages/e-commerce/traffic-reveal-card/traffic-cards-header/traffic-cards-header.component.scss
 create mode 100644 src/app/pages/e-commerce/traffic-reveal-card/traffic-reveal-card.component.html
 create mode 100644 src/app/pages/e-commerce/traffic-reveal-card/traffic-reveal-card.component.scss

diff --git a/src/app/pages/e-commerce/traffic-reveal-card/back-side/traffic-back-card.component.html b/src/app/pages/e-commerce/traffic-reveal-card/back-side/traffic-back-card.component.html
new file mode 100644
index 00000000..42e18aa3
--- /dev/null
+++ b/src/app/pages/e-commerce/traffic-reveal-card/back-side/traffic-back-card.component.html
@@ -0,0 +1,5 @@
+<ngx-traffic-bar-chart
+  [data]="trafficBarData.data"
+  [labels]="trafficBarData.labels"
+  [formatter]="trafficBarData.formatter"
+></ngx-traffic-bar-chart>
diff --git a/src/app/pages/e-commerce/traffic-reveal-card/back-side/traffic-back-card.component.scss b/src/app/pages/e-commerce/traffic-reveal-card/back-side/traffic-back-card.component.scss
new file mode 100644
index 00000000..390503e0
--- /dev/null
+++ b/src/app/pages/e-commerce/traffic-reveal-card/back-side/traffic-back-card.component.scss
@@ -0,0 +1,25 @@
+@import '../../../../@theme/styles/themes';
+
+@include nb-install-component() {
+  display: block;
+  height: 100%;
+  overflow: hidden;
+  position: relative;
+
+  ngx-traffic-bar-chart {
+    flex: 1;
+    position: relative;
+
+    ::ng-deep {
+      canvas {
+        border-bottom-left-radius: nb-theme(card-border-radius);
+        border-bottom-right-radius: nb-theme(card-border-radius);
+      }
+
+      .echart {
+        height: 100%;
+        width: 100%;
+      }
+    }
+  }
+}
diff --git a/src/app/pages/e-commerce/traffic-reveal-card/traffic-cards-header/traffic-cards-header.component.html b/src/app/pages/e-commerce/traffic-reveal-card/traffic-cards-header/traffic-cards-header.component.html
index 9ee7a987..630e0564 100644
--- a/src/app/pages/e-commerce/traffic-reveal-card/traffic-cards-header/traffic-cards-header.component.html
+++ b/src/app/pages/e-commerce/traffic-reveal-card/traffic-cards-header/traffic-cards-header.component.html
@@ -1,6 +1,4 @@
-<nb-card-header>
-  <span>Traffic</span>
-  <nb-select matRipple [selected]="type" (selectedChange)="changePeriod($event)">
-    <nb-option matRipple *ngFor="let period of types" [value]="period">{{ period }}</nb-option>
-  </nb-select>
-</nb-card-header>
+<span>Traffic</span>
+<nb-select matRipple [selected]="type" (selectedChange)="changePeriod($event)">
+  <nb-option matRipple *ngFor="let period of types" [value]="period">{{ period }}</nb-option>
+</nb-select>
diff --git a/src/app/pages/e-commerce/traffic-reveal-card/traffic-cards-header/traffic-cards-header.component.scss b/src/app/pages/e-commerce/traffic-reveal-card/traffic-cards-header/traffic-cards-header.component.scss
new file mode 100644
index 00000000..958c42bc
--- /dev/null
+++ b/src/app/pages/e-commerce/traffic-reveal-card/traffic-cards-header/traffic-cards-header.component.scss
@@ -0,0 +1,5 @@
+:host {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
diff --git a/src/app/pages/e-commerce/traffic-reveal-card/traffic-reveal-card.component.html b/src/app/pages/e-commerce/traffic-reveal-card/traffic-reveal-card.component.html
new file mode 100644
index 00000000..ac231abe
--- /dev/null
+++ b/src/app/pages/e-commerce/traffic-reveal-card/traffic-reveal-card.component.html
@@ -0,0 +1,26 @@
+<nb-reveal-card [showToggleButton]="false" [revealed]="revealed">
+  <nb-card-front>
+    <nb-card size="small">
+      <nb-card-header>
+        <ngx-traffic-cards-header [type]="period" (periodChange)="setPeriodAngGetData($event)">
+        </ngx-traffic-cards-header>
+      </nb-card-header>
+      <nb-card-body>
+        <ngx-traffic-front-card [frontCardData]="trafficListData"></ngx-traffic-front-card>
+      </nb-card-body>
+      <nb-icon class="toggle-icon" icon="chevron-up-outline" pack="eva" (click)="toggleView()"></nb-icon>
+    </nb-card>
+  </nb-card-front>
+  <nb-card-back>
+    <nb-card size="small">
+      <nb-card-header>
+        <ngx-traffic-cards-header [type]="period" (periodChange)="setPeriodAngGetData($event)">
+        </ngx-traffic-cards-header>
+      </nb-card-header>
+      <nb-card-body>
+        <ngx-traffic-back-card [trafficBarData]="trafficBarData"></ngx-traffic-back-card>
+      </nb-card-body>
+      <nb-icon class="toggle-icon" icon="chevron-down-outline" pack="eva" (click)="toggleView()"></nb-icon>
+    </nb-card>
+  </nb-card-back>
+</nb-reveal-card>
diff --git a/src/app/pages/e-commerce/traffic-reveal-card/traffic-reveal-card.component.scss b/src/app/pages/e-commerce/traffic-reveal-card/traffic-reveal-card.component.scss
new file mode 100644
index 00000000..ccf47060
--- /dev/null
+++ b/src/app/pages/e-commerce/traffic-reveal-card/traffic-reveal-card.component.scss
@@ -0,0 +1,19 @@
+@import '../../../@theme/styles/themes';
+
+@include nb-install-component() {
+  .toggle-icon {
+    position: absolute;
+    top: 1rem;
+    right: 1.25rem;
+    @include nb-rtl(right, auto);
+    @include nb-rtl(left, 1.25rem);
+    cursor: pointer;
+  }
+
+  nb-card-header {
+    padding-top: nb-theme(card-header-with-select-padding-top);
+    padding-bottom: nb-theme(card-header-with-select-padding-bottom);
+    @include nb-ltr(padding-right, 4rem);
+    @include nb-rtl(padding-left, 4rem);
+  }
+}