Merge pull request #50 from valitydev/ft/analytics

Fix analytics page

src/app/api/payments/analytics/riskSeriesMapper.service.ts

@@ -12,7 +12,7 @@ export class RiskSeriesMapperService {
                 ({
                     name: value.score,
                     data: value.offsetCountRatio.map((offsetCountRatioValue) => ({
-                        x: this.getX(offsetCountRatioValue.offset, response.splitUnit),
+                        x: new Date(offsetCountRatioValue.offset),
                         y: offsetCountRatioValue.countRatio,
                         fillColor: this.getFillColor(value),
                     })),
@@ -30,18 +30,4 @@ export class RiskSeriesMapperService {
                 return '#c4c4c4';
         }
     }
-
-    private getX(value: number, splitUnit: string) {
-        const additionalForFixZeroStart = 1;
-        switch (splitUnit) {
-            case 'hour':
-                return new Date(value).getHours() + additionalForFixZeroStart;
-            case 'month':
-                return new Date(value).getMonth() + additionalForFixZeroStart;
-            case 'day':
-                return new Date(value).getDay() + additionalForFixZeroStart;
-            default:
-                return new Date(value).getDay() + additionalForFixZeroStart;
-        }
-    }
 }

src/app/sections/analytics/analytics.module.ts

@@ -33,6 +33,7 @@ import { EmptySearchResultModule } from '../../shared/components/empty-search-re
 import { FbInfoCardModule } from '../../shared/components/fb-info-card';
 import { ShowMorePanelModule } from '../../shared/components/show-more-panel';
 import { SharedPipesModule } from '../../shared/pipes';
+import { ArraySortPipe } from '../../shared/pipes/sort-by-field.pipe';
 import { AnalyticsRoutingModule } from './analytics-routing.module';
 import { AnalyticsComponent } from './analytics.component';
 import { BaseAnalyticsComponent } from './components/base/base-analytics.component';
@@ -76,6 +77,13 @@ import { BaseAnalyticsService } from './components/base/services/base-analytics.
         FraudSummaryListModule,
     ],
     declarations: [AnalyticsComponent, BaseAnalyticsComponent, BaseAnalyticsSearchComponent],
-    providers: [AnalyticsService, RiskSeriesMapperService, BaseAnalyticsService, DatePipe, BaseAnalyticsUtilService],
+    providers: [
+        AnalyticsService,
+        RiskSeriesMapperService,
+        BaseAnalyticsService,
+        DatePipe,
+        BaseAnalyticsUtilService,
+        ArraySortPipe,
+    ],
 })
 export class AnalyticsModule {}

src/app/sections/analytics/components/base/base-analytics.component.html

@@ -31,7 +31,6 @@
                 fxFlex="25"
                 [headerText]="blockedSum"
                 [value]="blockedSum$"
-                [units]="'$'"
                 [type]="errorStyle"
             ></fb-info-card>
         </div>
@@ -56,7 +55,7 @@
                 <fb-fraud-summary-templates-list
                     fxFlexFill
                     *ngIf="summaries.length"
-                    [summaryRows]="summaries"
+                    [summaryRows]="summaries | sort: 'summary.count'"
                 ></fb-fraud-summary-templates-list>
             </div>
         </div>

src/app/sections/analytics/components/base/components/fraud-summary-list/components/fraud-summary-header/fraud-summary-header.component.html

@@ -4,5 +4,5 @@
     <div class="fb-body-2" fxFlex>Checked rule</div>
     <div class="fb-body-2" fxFlex>Sum</div>
     <div class="fb-body-2" fxFlex>Count</div>
-    <div class="fb-body-2" fxFlex>Ratio</div>
+    <div class="fb-body-2" fxFlex>Ratio, %</div>
 </fb-list-header>

src/app/sections/analytics/components/base/components/fraud-summary-list/components/fraud-summary-item/fraud-summary-item.component.html

@@ -4,5 +4,5 @@
     <div class="fb-body-2" fxFlex>{{ summary.checkedRule }}</div>
     <div class="fb-body-2" fxFlex>{{ summary.summary.sum }}</div>
     <div class="fb-body-2" fxFlex>{{ summary.summary.count }}</div>
-    <div class="fb-body-2" fxFlex>{{ numberFormat(summary.summary.ratio) }}%</div>
+    <div class="fb-body-2" fxFlex>{{ numberFormat(summary.summary.ratio) | number: '.1-4' }}</div>
 </mat-card>

src/app/sections/analytics/components/base/components/search/base-analytics-search.component.ts

@@ -16,10 +16,10 @@ import { BaseAnalyticsService } from '../../services/base-analytics.service';
 export class BaseAnalyticsSearchComponent implements OnInit {
     @Output() valueChanges: EventEmitter<string> = new EventEmitter();
 
-    @Input() inProgress: Observable<boolean>;
-
     currencies$ = this.baseAnalyticsService.currencies$;
 
+    @Input() inProgress: Observable<boolean>;
+
     units = ['1 day', '1 week', 'last month', 'last year'];
 
     form: FormGroup = this.fb.group({
@@ -37,25 +37,33 @@ export class BaseAnalyticsSearchComponent implements OnInit {
         @Inject(LAYOUT_GAP_M) public layoutGapM: string
     ) {
         this.form.valueChanges.pipe(debounceTime(600), map(removeEmptyProperties)).subscribe((v) => {
+            this.router.navigate([location.pathname], { queryParams: v });
             const params = Object.create(v);
             params.partyId = v.partyId;
             params.shopId = v.shopId;
             params.type = v.type;
             params.time = v.time;
-            this.router.navigate([location.pathname], { queryParams: params });
             this.valueChanges.emit(v);
         });
         this.route.queryParams.pipe(take(1)).subscribe((v) => this.form.patchValue(v));
     }
 
     ngOnInit(): void {
-        this.currencies$.pipe(take(1)).subscribe((value) =>
+        this.currencies$.pipe(take(1)).subscribe((value) => {
             this.form.setValue({
-                partyId: '',
-                shopId: '',
-                type: value[0],
-                time: this.units[0],
-            })
-        );
+                partyId: this.route.snapshot.queryParamMap.get('partyId')
+                    ? this.route.snapshot.queryParamMap.get('partyId')
+                    : '',
+                shopId: this.route.snapshot.queryParamMap.get('shopId')
+                    ? this.route.snapshot.queryParamMap.get('shopId')
+                    : '',
+                type: this.route.snapshot.queryParamMap.get('type')
+                    ? this.route.snapshot.queryParamMap.get('type')
+                    : value[0],
+                time: this.route.snapshot.queryParamMap.get('time')
+                    ? this.route.snapshot.queryParamMap.get('time')
+                    : this.units[0],
+            });
+        });
     }
 }

src/app/sections/analytics/components/base/services/base-analytics.service.ts

@@ -62,6 +62,7 @@ export class BaseAnalyticsService {
             shareReplay(1)
         );
         merge(
+            this.currencies$,
             this.attemptedPayments$,
             this.blockedPayments$,
             this.ratioOfBlocked$,

src/app/shared/components/charts/bar-chart/default-config.ts

@@ -32,7 +32,7 @@ export const DEFAULT_CONFIG: ApexOptions = {
         },
     },
     xaxis: {
-        type: 'category',
+        type: 'datetime',
         labels: {
             offsetY: -5,
             rotate: 0,

src/app/shared/components/fb-info-card/fb-info-card.component.html

@@ -1,6 +1,6 @@
 <mat-card fxLayoutAlign="center">
     <mat-card-content>
         <h4 fxLayoutAlign="center">{{ headerText }}</h4>
-        <h1 [class]="type" fxLayoutAlign="center">{{ numberFormat(valueNumber) }} {{ units }}</h1>
+        <h1 [class]="type" fxLayoutAlign="center">{{ numberFormat(valueNumber | number: '.1-4') }} {{ units }}</h1>
     </mat-card-content>
 </mat-card>

src/app/shared/pipes/shared-pipes.module.ts

@@ -1,10 +1,11 @@
 import { NgModule } from '@angular/core';
 
 import { PaymentStatusToColorPipe } from './payment-status-to-color.pipe';
+import { ArraySortPipe } from './sort-by-field.pipe';
 import { TemplateToRulesPipe } from './template-to-rules.pipe';
 
 @NgModule({
-    declarations: [TemplateToRulesPipe, PaymentStatusToColorPipe],
-    exports: [TemplateToRulesPipe, PaymentStatusToColorPipe],
+    declarations: [TemplateToRulesPipe, PaymentStatusToColorPipe, ArraySortPipe],
+    exports: [TemplateToRulesPipe, PaymentStatusToColorPipe, ArraySortPipe],
 })
 export class SharedPipesModule {}

src/app/shared/pipes/sort-by-field.pipe.ts

@@ -0,0 +1,28 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({ name: 'sort' })
+export class ArraySortPipe implements PipeTransform {
+    transform(array: any, field: string): any[] {
+        if (!Array.isArray(array)) {
+            return;
+        }
+        array.sort((a: any, b: any) => {
+            if (this.deepValue(a, field) < this.deepValue(b, field)) {
+                return 1;
+            } else if (this.deepValue(a, field) > this.deepValue(b, field)) {
+                return -1;
+            } else {
+                return 0;
+            }
+        });
+        return array;
+    }
+
+    deepValue(obj, path) {
+        const pathList = path.split('.');
+        for (let i = 0, len = pathList.length; i < len; i += 1) {
+            obj = obj[pathList[i]];
+        }
+        return obj;
+    }
+}