responsive analytics (#463)

Co-authored-by: Ildar Galeev <KeinAsylum@gmail.com>

src/app/sections/payment-section/analytics/analytics-search-filters/analytics-search-filters.component.html

@@ -4,12 +4,14 @@
         (selectedChange)="daterangeSelectionChange($event)"
     ></dsh-daterange-filter>
     <dsh-currency-filter
+        fxHide.lt-md
         *ngIf="(currencies$ | async)?.length > 1"
         [currencies]="currencies$ | async"
         [selected]="selectedCurrency$ | async"
         (selectedChange)="currencySelectionChange($event)"
     ></dsh-currency-filter>
     <dsh-filter-shops
+        fxHide.lt-md
         [shops]="shopsByCurrency$ | async"
         [selected]="selectedShops$ | async"
         (selectedChange)="shopSelectionChange($event)"

src/app/sections/payment-section/analytics/analytics-search-filters/analytics-search-filters.module.ts

@@ -1,6 +1,6 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { FlexModule } from '@angular/flex-layout';
+import { FlexLayoutModule, FlexModule } from '@angular/flex-layout';
 
 import { FilterShopsModule } from '@dsh/app/shared/components';
 import { CurrencyFilterModule } from '@dsh/app/shared/components/filters/currency-filter';
@@ -9,7 +9,14 @@ import { DaterangeFilterModule } from '@dsh/components/filters/daterange-filter'
 import { AnalyticsSearchFiltersComponent } from './analytics-search-filters.component';
 
 @NgModule({
-    imports: [CommonModule, DaterangeFilterModule, FilterShopsModule, FlexModule, CurrencyFilterModule],
+    imports: [
+        CommonModule,
+        DaterangeFilterModule,
+        FilterShopsModule,
+        FlexModule,
+        CurrencyFilterModule,
+        FlexLayoutModule,
+    ],
     exports: [AnalyticsSearchFiltersComponent],
     declarations: [AnalyticsSearchFiltersComponent],
 })

src/app/sections/payment-section/analytics/analytics.component.html

@@ -1,56 +1,39 @@
 <div
     fxLayout="column"
-    fxLayoutGap="30px"
+    fxLayoutGap="32px"
     *transloco="let t; scope: 'payment-section'; read: 'paymentSection.analytics'"
 >
     <h1 class="mat-display-1">{{ t('headline') }}</h1>
-    <div fxLayout="column" fxLayoutGap="20px">
+    <div gdColumns="1fr" gdColumns.gt-sm="1fr 1fr 1fr 1fr" gdGap="24px">
         <dsh-analytics-search-filters
+            gdColumn.gt-sm="1/-1"
             [initParams]="initSearchParams$ | async"
             [realm]="realm$ | async"
             (searchParamsChanges)="updateSearchParams($event)"
         ></dsh-analytics-search-filters>
-        <div fxLayout fxLayout.xs="column" fxLayoutGap="20px">
+        <dsh-payments-amount [searchParams]="searchParams$ | async" [spinnerType]="spinnerType"></dsh-payments-amount>
-            <dsh-payments-amount
+        <dsh-refunds-amount [searchParams]="searchParams$ | async" [spinnerType]="spinnerType"></dsh-refunds-amount>
-                fxFlex
+        <dsh-average-payment [searchParams]="searchParams$ | async" [spinnerType]="spinnerType"></dsh-average-payment>
-                [searchParams]="searchParams$ | async"
+        <dsh-payments-count [searchParams]="searchParams$ | async" [spinnerType]="spinnerType"></dsh-payments-count>
-                [spinnerType]="spinnerType"
-            ></dsh-payments-amount>
-            <dsh-refunds-amount
-                fxFlex
-                [searchParams]="searchParams$ | async"
-                [spinnerType]="spinnerType"
-            ></dsh-refunds-amount>
-            <dsh-average-payment
-                fxFlex
-                [searchParams]="searchParams$ | async"
-                [spinnerType]="spinnerType"
-            ></dsh-average-payment>
-            <dsh-payments-count
-                fxFlex
-                [searchParams]="searchParams$ | async"
-                [spinnerType]="spinnerType"
-            ></dsh-payments-count>
-        </div>
         <dsh-payment-split-count
+            gdColumn.gt-sm="1/-1"
             [searchParams]="searchParams$ | async"
             [spinnerType]="spinnerType"
         ></dsh-payment-split-count>
         <dsh-payment-split-amount
+            gdColumn.gt-sm="1/-1"
             [searchParams]="searchParams$ | async"
             [spinnerType]="spinnerType"
         ></dsh-payment-split-amount>
-        <div fxLayout fxLayout.xs="column" fxLayoutGap="20px">
         <dsh-payments-tool-distribution
-                fxFlex
+            gdColumn.gt-sm="1/3"
             [searchParams]="searchParams$ | async"
             [spinnerType]="spinnerType"
         ></dsh-payments-tool-distribution>
         <dsh-payments-error-distribution
-                fxFlex
+            gdColumn.gt-sm="3/5"
             [searchParams]="searchParams$ | async"
             [spinnerType]="spinnerType"
         ></dsh-payments-error-distribution>
     </div>
-    </div>
 </div>

src/app/sections/payment-section/analytics/donut-chart-item/donut-chart-item.component.html

@@ -1,4 +1,4 @@
-<dsh-card class="donut-chart" *transloco="let c">
+<dsh-card *transloco="let c">
     <dsh-card-title fxLayoutAlign="space-between">
         <h1 class="mat-title">{{ title }}</h1>
         <dsh-spinner *ngIf="isLoading" size="30" [type]="spinnerType"></dsh-spinner>

src/app/sections/payment-section/analytics/donut-chart-item/donut-chart-item.component.scss

@@ -1,7 +1,3 @@
-.donut-chart {
-    height: 420px;
-}
-
 .back-selection-icon {
     cursor: pointer;
 }