valitydev/dashboard
14
0
Fork 0
mirror of https://github.com/valitydev/dashboard.git synced 2024-11-06 10:35:21 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

responsive analytics (#463)

Browse Source 
Co-authored-by: Ildar Galeev <KeinAsylum@gmail.com>
This commit is contained in:
Denis Ezhov 2021-05-18 20:01:47 +03:00 committed by GitHub
parent f93823b68e
commit 735ccb8df5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 31 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

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

55
src/app/sections/payment-section/analytics/analytics.component.html
View File

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

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

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

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

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