[sc-2809] New graphic for resources pending to be processed (#335)

* [sc-2809] New graphic for resources pending to be processed

* Don't display all labels on x-axis

* Fix Changelog

* Fix imports

app.babel

@@ -259,6 +259,26 @@
                             </translation>
                         </translations>
                     </concept_node>
+                    <concept_node>
+                        <name>account.chart_error_processing_status</name>
+                        <description/>
+                        <comment/>
+                        <default_text/>
+                        <translations>
+                            <translation>
+                                <language>ca-ES</language>
+                                <approved>false</approved>
+                            </translation>
+                            <translation>
+                                <language>en-US</language>
+                                <approved>false</approved>
+                            </translation>
+                            <translation>
+                                <language>es-ES</language>
+                                <approved>false</approved>
+                            </translation>
+                        </translations>
+                    </concept_node>
                     <concept_node>
                         <name>account.chart_media_hours</name>
                         <description/>
@@ -279,6 +299,46 @@
                             </translation>
                         </translations>
                     </concept_node>
+                    <concept_node>
+                        <name>account.chart_number_resources</name>
+                        <description/>
+                        <comment/>
+                        <default_text/>
+                        <translations>
+                            <translation>
+                                <language>ca-ES</language>
+                                <approved>false</approved>
+                            </translation>
+                            <translation>
+                                <language>en-US</language>
+                                <approved>false</approved>
+                            </translation>
+                            <translation>
+                                <language>es-ES</language>
+                                <approved>false</approved>
+                            </translation>
+                        </translations>
+                    </concept_node>
+                    <concept_node>
+                        <name>account.chart_range_label</name>
+                        <description/>
+                        <comment/>
+                        <default_text/>
+                        <translations>
+                            <translation>
+                                <language>ca-ES</language>
+                                <approved>false</approved>
+                            </translation>
+                            <translation>
+                                <language>en-US</language>
+                                <approved>false</approved>
+                            </translation>
+                            <translation>
+                                <language>es-ES</language>
+                                <approved>false</approved>
+                            </translation>
+                        </translations>
+                    </concept_node>
                     <concept_node>
                         <name>account.chart_title_pending_resources</name>
                         <description/>

apps/dashboard/src/app/account/account-home/account-home.component.html

@@ -2,33 +2,33 @@
   <div class="container-row">
     <div class="processing-stats">
       <pa-tabs noSlider notFullWidth>
-        <pa-tab [active]="selectedTab === 'completed'"
-                (click)="selectedTab = 'completed'">{{'account.chart_title_processed' | translate}}</pa-tab>
+        <pa-tab [active]="selectedTab.value === 'completed'"
+                (click)="selectedTab.next('completed')">{{'account.chart_title_processed' | translate}}</pa-tab>
         <pa-tab *ngIf="(isFreeAccount | async) === false"
-                [active]="selectedTab === 'pending'"
-                (click)="selectedTab = 'pending'">{{'account.chart_title_pending_resources' | translate}}</pa-tab>
+                [active]="selectedTab.value === 'pending'"
+                (click)="selectedTab.next('pending')">{{'account.chart_title_pending_resources' | translate}}</pa-tab>
       </pa-tabs>
 
-      <section *ngIf="selectedTab === 'completed'"
+      <section *ngIf="selectedTab.value === 'completed'"
                class="container">
         <div class="chart-header">
           <div class="chart-type-container">
             <span class="chart-type"
-                  [class.selected]="(processedView | async) === statsType.CHARS"
+                  [class.selected]="processedView.value === statsType.CHARS"
                   (click)="processedView.next(statsType.CHARS)"
             >{{ 'account.chart_ML_characters' | translate }}</span>
             <div class="separator"></div>
             <span class="chart-type"
-                  [class.selected]="(processedView | async) === statsType.MEDIA_SECONDS"
+                  [class.selected]="processedView.value === statsType.MEDIA_SECONDS"
                   (click)="processedView.next(statsType.MEDIA_SECONDS)"
             >{{ 'account.chart_media_hours' | translate }}</span>
             <div class="separator"></div>
             <span class="chart-type"
-                  [class.selected]="(processedView | async) === statsType.DOCS_NO_MEDIA"
+                  [class.selected]="processedView.value === statsType.DOCS_NO_MEDIA"
                   (click)="processedView.next(statsType.DOCS_NO_MEDIA)"
             >{{ 'account.chart_documents' | translate }}</span>
           </div>
-          <span class="renewal-message">{{ 'account.renewal' | translate }}</span>
+          <span class="chart-message">{{ 'account.renewal' | translate }}</span>
         </div>
         <app-empty-chart *ngIf="(processing | async) === null" [numLines]="3"></app-empty-chart>
         <app-bar-chart [data]="(processing | async) || []"
@@ -39,9 +39,43 @@
                        [tooltipsEnabled]="true"
         ></app-bar-chart>
       </section>
-      <section *ngIf="selectedTab === 'pending'"
+      <section *ngIf="selectedTab.value === 'pending'"
                class="container">
-        Will be there really soon 😃
+        <div class="chart-header">
+          <div class="range-container">
+            <nsi-dropdown-button size="small"
+                                 kind="inverted"
+                                 [popupRef]="range">
+              {{ 'account.chart_range_label' | translate:{hours: pendingRange.value} }}
+            </nsi-dropdown-button>
+            <pa-dropdown #range>
+              <pa-option value="1h"
+                         [selected]="pendingRange.value === statsRange.anHour"
+                         (selectOption)="pendingRange.next(statsRange.anHour)">{{statsRange.anHour}}</pa-option>
+              <pa-option value="2h"
+                         [selected]="pendingRange.value === statsRange.twoHours"
+                         (selectOption)="pendingRange.next(statsRange.twoHours)">{{statsRange.twoHours}}</pa-option>
+              <pa-option value="3h"
+                         [selected]="pendingRange.value === statsRange.threeHours"
+                         (selectOption)="pendingRange.next(statsRange.threeHours)">{{statsRange.threeHours}}</pa-option>
+              <pa-option value="6h"
+                         [selected]="pendingRange.value === statsRange.sixHours"
+                         (selectOption)="pendingRange.next(statsRange.sixHours)">{{statsRange.sixHours}}</pa-option>
+              <pa-option value="12h"
+                         [selected]="pendingRange.value === statsRange.twelveHours"
+                         (selectOption)="pendingRange.next(statsRange.twelveHours)">{{statsRange.twelveHours}}</pa-option>
+              <pa-option value="24h"
+                         [selected]="pendingRange.value === statsRange.twentyFourHours"
+                         (selectOption)="pendingRange.next(statsRange.twentyFourHours)">{{statsRange.twentyFourHours}}</pa-option>
+              <pa-option value="48h"
+                         [selected]="pendingRange.value === statsRange.fortyHeightHours"
+                         (selectOption)="pendingRange.next(statsRange.fortyHeightHours)">{{statsRange.fortyHeightHours}}</pa-option>
+            </pa-dropdown>
+          </div>
+          <span class="chart-message">{{ 'account.chart_number_resources' | translate }}</span>
+        </div>
+        <app-line-chart [data]="(pending | async) || []"
+                        [xAxisTickOptions]="pendingTickOptions | async"></app-line-chart>
       </section>
     </div>
 

apps/dashboard/src/app/account/account-home/account-home.component.scss

@@ -32,12 +32,14 @@
     justify-content: space-between;
     margin-bottom: rhythm(3);
 
-    .renewal-message {
+    .chart-message {
       color: $color-neutral-regular;
       font-size: font-size(xs);
       font-style: italic;
     }
   }
+  .range-container {
+  }
   .chart-type-container {
     align-items: center;
     color: $color-neutral-regular;

apps/dashboard/src/app/account/account-home/account-home.component.ts

@@ -1,11 +1,12 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { SDKService, StateService } from '@flaps/core';
-import { Account, StatsPeriod, StatsType } from '@nuclia/core';
+import { Account, StatsPeriod, StatsRange, StatsType } from '@nuclia/core';
 import { BehaviorSubject, catchError, combineLatest, filter, map, Observable, of, share, switchMap } from 'rxjs';
 import { AppService } from '../../services/app.service';
 import { eachDayOfInterval, format, getDaysInMonth, isThisMonth, lastDayOfMonth } from 'date-fns';
 import { ToastService } from '@guillotinaweb/pastanaga-angular';
 import { TranslateService } from '@ngx-translate/core';
+import { TickOptions } from '../../components/charts/chart-utils';
 
 type ProcessedViewType = StatsType.CHARS | StatsType.MEDIA_SECONDS | StatsType.DOCS_NO_MEDIA;
 
@@ -17,7 +18,8 @@ type ProcessedViewType = StatsType.CHARS | StatsType.MEDIA_SECONDS | StatsType.D
 })
 export class AccountHomeComponent {
   statsType = StatsType;
-  selectedTab: 'completed' | 'pending' = 'completed';
+  statsRange = StatsRange;
+  selectedTab: BehaviorSubject<'completed' | 'pending'> = new BehaviorSubject<'completed' | 'pending'>('completed');
 
   account = this.stateService.account.pipe(filter((account) => !!account));
   isFreeAccount = this.account.pipe(map((account) => account && account.type === 'stash-basic'));
@@ -45,6 +47,7 @@ export class AccountHomeComponent {
   );
   kbsTotal = this.kbs.pipe(map((kbs) => kbs.length));
   kbsPublic = this.kbs.pipe(map((kbs) => kbs.filter((kb) => kb.state === 'PUBLISHED').length));
+
   private _processing = combineLatest([this.account, this.processedView]).pipe(
     switchMap(([account, statsType]) =>
       this.sdk.nuclia.db.getStats(account!.slug, statsType, undefined, StatsPeriod.MONTH).pipe(
@@ -79,6 +82,49 @@ export class AccountHomeComponent {
         .map((stat) => [format(stat[0], 'd'), stat[1]] as [string, number]),
     ),
   );
+
+  pendingRange: BehaviorSubject<StatsRange> = new BehaviorSubject<StatsRange>(StatsRange.anHour);
+  pendingTickOptions: Observable<TickOptions> = this.pendingRange.pipe(
+    map((range) => {
+      switch (range) {
+        case StatsRange.sixHours:
+        case StatsRange.twelveHours:
+        case StatsRange.twentyFourHours:
+          return { modulo: 6 };
+        case StatsRange.fortyHeightHours:
+          return { modulo: 10, displayTick: true };
+        default:
+          return { modulo: 10 };
+      }
+    }),
+  );
+  pending = combineLatest([this.selectedTab, this.account, this.pendingRange]).pipe(
+    filter(([tab]) => tab === 'pending'),
+    switchMap(([tab, account, pendingRange]) =>
+      this.sdk.nuclia.db.getProcessingStats(pendingRange, account!.id).pipe(
+        map((stats) => {
+          let xFormat: string;
+          switch (pendingRange) {
+            case StatsRange.fortyHeightHours:
+              xFormat = 'd/MM H:mm';
+              break;
+            default:
+              xFormat = 'H:mm';
+              break;
+          }
+          return stats.map(
+            (stat, index) =>
+              [format(new Date(stat.time_period), index === 0 ? 'H:mm' : xFormat), stat.stats] as [string, number],
+          );
+        }),
+        catchError(() => {
+          this.toastService.openError(this.translate.instant(`account.chart_error_processing_status`));
+          return of([]);
+        }),
+      ),
+    ),
+  );
+
   totalQueries = this.account.pipe(
     switchMap((account) => this.sdk.nuclia.db.getStats(account!.slug, StatsType.SEARCHES, undefined, StatsPeriod.YEAR)),
     map((stats) => stats.reduce((acc, stat) => acc + stat.stats, 0)),

apps/dashboard/src/app/components/charts/_charts-common.scss

@@ -0,0 +1,24 @@
+@import 'variables';
+
+$chart-line-color: $color-neutral-light;
+$chart-font-size: font-size(xs);
+
+@mixin chart() {
+  position: relative;
+
+  .tick text {
+    font-family: $font-family-body;
+    font-size: $chart-font-size;
+    font-weight: $font-weight-thin;
+    cursor: default;
+    user-select: none;
+  }
+
+  .grid-line {
+    stroke: $chart-line-color;
+  }
+
+  .y-axis line {
+    stroke: $chart-line-color;
+  }
+}

apps/dashboard/src/app/components/charts/bar-chart/bar-chart.component.scss

@@ -1,34 +1,16 @@
-@import 'variables';
+@import '../charts-common';
 
 .bar-chart {
-  $chart-line-color: $color-neutral-light;
-  $chart-font-size: font-size(xs);
-  position: relative;
+  @include chart();
 
   .bar {
     fill: $color-primary-regular;
-    opacity: 0.5;
+    opacity: 0.3;
     &:last-child {
       opacity: 1;
     }
   }
 
-  .tick text {
-    font-family: $font-family-body;
-    font-size: $chart-font-size;
-    font-weight: $font-weight-thin;
-    cursor: default;
-    user-select: none;
-  }
-
-  .grid-line {
-    stroke: $chart-line-color;
-  }
-
-  .y-axis line {
-    stroke: $chart-line-color;
-  }
-
   .tooltip {
     background-color: $color-dark-stronger;
     color: $color-light-stronger;

apps/dashboard/src/app/components/charts/bar-chart/bar-chart.component.ts

@@ -149,8 +149,8 @@ export class BarChartComponent implements AfterViewInit, OnDestroy {
             if (typeof value !== 'string') {
               return false;
             }
-            const day = parseInt(value, 10);
-            return day > getDate(Date.now());
+            // display future dates of the month in light gray
+            return parseInt(value, 10) > getDate(Date.now());
           })
           .style('color', '#c4c4c4'),
       )

apps/dashboard/src/app/components/charts/chart-utils.ts

@@ -1,5 +1,10 @@
 import * as d3 from 'd3';
 
+export interface TickOptions {
+  modulo?: number;
+  displayTick?: boolean;
+}
+
 export function createYAxis(
   element: d3.Selection<SVGGElement, any, HTMLElement, any>,
   domain: [number, number],

apps/dashboard/src/app/components/charts/line-chart/line-chart.component.scss

@@ -1,34 +1,10 @@
+@import '../charts-common';
+
 .line-chart {
-  --app-chart-line-color: #e1e1e1;
+  @include chart();
 
   .data-line {
-    stroke: var(--stf-primary);
-  }
-
-  .tick {
-    text {
-      font-family: var(--stf-font-family);
-      font-size: var(--stf-font-size-ssmall);
-      font-weight: var(--stf-font-weight-light);
-      cursor: default;
-      user-select: none;
-    }
-  }
-
-  .grid-line {
-    stroke: var(--app-chart-line-color);
-  }
-
-  .y-axis {
-    line {
-      stroke: var(--app-chart-line-color);
-    }
+    stroke: $color-primary-regular;
   }
 
-  .x-axis {
-    line {
-      stroke: #fff;
-      stroke-width: 3px;
-    }
-  }
 }