Merge pull request #488 from amonsour/dev10

Fixed tables to display the years
lega0208 · Sep 17, 2024 · fb55a23 · fb55a23
2 parents cfb2fdb + 32b1189
commit fb55a23
Show file tree

Hide file tree

Showing 16 changed files with 259 additions and 179 deletions.
diff --git a/libs/upd/components/src/lib/apex-bar-line/apex-bar-line.component.html b/libs/upd/components/src/lib/apex-bar-line/apex-bar-line.component.html
@@ -51,6 +51,7 @@
           [pagination]="false"
           [data]="table"
           [cols]="tableCols"
+          [allowHeaderWrap]="allowHeaderWrap"
         ></upd-data-table>
       </upd-accordion>
     </div>

diff --git a/libs/upd/components/src/lib/apex-bar-line/apex-bar-line.component.ts b/libs/upd/components/src/lib/apex-bar-line/apex-bar-line.component.ts
@@ -29,6 +29,7 @@ export class ApexBarLineComponent<T> implements OnInit {
   @Input() titleTooltip = '';
   @Input() table: T[] = [];
   @Input() tableCols: ColumnConfig[] = [];
+  @Input() allowHeaderWrap = false;
 
   @Input() set colours(value: string[]) {
     this.apexStore.setColours(value);

diff --git a/libs/upd/components/src/lib/apex-bar/apex-bar.component.html b/libs/upd/components/src/lib/apex-bar/apex-bar.component.html
@@ -41,6 +41,7 @@
           [data]="table"
           [cols]="tableCols"
           [exports]="tableExport"
+          [allowHeaderWrap]="allowHeaderWrap"
         ></upd-data-table>
       </upd-accordion>
     </div>

diff --git a/libs/upd/components/src/lib/apex-bar/apex-bar.component.ts b/libs/upd/components/src/lib/apex-bar/apex-bar.component.ts
@@ -30,6 +30,7 @@ export class ApexBarComponent implements OnInit {
   @Input() table: any;
   @Input() tableCols: ColumnConfig[] = [];
   @Input() tableExport = true;
+  @Input() allowHeaderWrap = false;
 
   @Input() set showPercent(value: {
     isPercent: boolean;

diff --git a/libs/upd/i18n/src/lib/translations/en-CA.json b/libs/upd/i18n/src/lib/translations/en-CA.json
@@ -374,6 +374,8 @@
   "French": "French",
   "Date range": "Date range",
   "URLs added to report": "URLs added to report ({{count}})",
+  "MMM D YYYY": "MMM D YYYY",
+  "MMM D": "MMM D",
   "to": "to",
   "None": "None",
   "Devices": "Devices",

diff --git a/libs/upd/i18n/src/lib/translations/fr-CA.json b/libs/upd/i18n/src/lib/translations/fr-CA.json
@@ -373,6 +373,8 @@
   "French": "Français",
   "Date range": "Plage de dates",
   "URLs added to report": "URL ajoutées au rapport ({{count}})",
+  "MMM D YYYY": "D MMM YYYY",
+  "MMM D": "D MMM",
   "to": "au",
   "None": "Aucun",
   "Devices": "Appareils",

diff --git a/libs/upd/views/overview/src/lib/+state/overview/overview.facade.ts b/libs/upd/views/overview/src/lib/+state/overview/overview.facade.ts
@@ -12,10 +12,7 @@ import type {
   OverviewAggregatedData,
   OverviewData,
 } from '@dua-upd/types-common';
-import {
-  percentChange,
-  type UnwrapObservable,
-} from '@dua-upd/utils-common';
+import { percentChange, type UnwrapObservable } from '@dua-upd/utils-common';
 import type { PickByType } from '@dua-upd/utils-common';
 import * as OverviewActions from './overview.actions';
 import * as OverviewSelectors from './overview.selectors';
@@ -25,9 +22,7 @@ import {
   selectUrl,
 } from '@dua-upd/upd/state';
 import { createColConfigWithI18n } from '@dua-upd/upd/utils';
-import type {
-  ApexAxisChartSeries,
-} from 'ng-apexcharts';
+import type { ApexAxisChartSeries } from 'ng-apexcharts';
 import {
   selectCallsPerVisitsChartData,
   selectComboChartData,
@@ -149,19 +144,18 @@ export class OverviewFacade {
     map((improvedKpi) => improvedKpi?.successRates.validation || 0),
   );
 
-
   improvedTopKpi$ = this.overviewData$.pipe(
     map((overviewData) => overviewData?.improvedKpiTopSuccessRate),
   );
- 
+
   improvedKpiTopUniqueTasks$ = this.improvedTopKpi$.pipe(
     map((improvedTopKpi) => improvedTopKpi?.uniqueTopTasks || 0),
   );
- 
+
   improvedKpiTopTasks$ = this.improvedTopKpi$.pipe(
     map((improvedTopKpi) => improvedTopKpi?.allTopTasks || 0),
   );
- 
+
   improvedKpiTopSuccessRate$ = this.improvedTopKpi$.pipe(
     map((improvedTopKpi) => improvedTopKpi?.topSuccessRates || 0),
   );
@@ -184,7 +178,7 @@ export class OverviewFacade {
 
   totalTasks$ = this.overviewData$.pipe(
     map((overviewData) => overviewData?.totalTasks || 0),
-  )
+  );
 
   testTypeTranslations$ = combineLatest([
     this.projects$,
@@ -427,37 +421,62 @@ export class OverviewFacade {
   tableMerge$ = this.store.select(selectComboChartTable);
 
   dateRangeLabel$ = combineLatest([this.overviewData$, this.currentLang$]).pipe(
-    map(([data, lang]) => getWeeklyDatesLabel(data.dateRange, lang)),
+    map(
+      ([data, lang]) =>
+        this.getDateRangeLabel(data.dateRange, lang) as string,
+    ),
   );
 
   fullDateRangeLabel$ = combineLatest([
     this.overviewData$,
     this.currentLang$,
-  ]).pipe(map(([data, lang]) => getFullDateRangeLabel(data.dateRange, lang)));
+  ]).pipe(
+    map(
+      ([data, lang]) =>
+        this.getDateRangeLabel(
+          data.dateRange,
+          lang,
+          'MMM D YYYY',
+          'to',
+          true,
+        ) as string[],
+    ),
+  );
 
   comparisonDateRangeLabel$ = combineLatest([
     this.overviewData$,
     this.currentLang$,
   ]).pipe(
-    map(([data, lang]) =>
-      getWeeklyDatesLabel(data.comparisonDateRange || '', lang),
+    map(
+      ([data, lang]) =>
+        this.getDateRangeLabel(data.comparisonDateRange || '', lang) as string,
     ),
   );
 
   fullComparisonDateRangeLabel$ = combineLatest([
     this.overviewData$,
     this.currentLang$,
   ]).pipe(
-    map(([data, lang]) =>
-      getFullDateRangeLabel(data.comparisonDateRange || '', lang),
+    map(
+      ([data, lang]) =>
+        this.getDateRangeLabel(
+          data.comparisonDateRange || '',
+          lang,
+          'MMM D YYYY',
+          'to',
+          true,
+        ) as string[],
     ),
   );
 
   satDateRangeLabel$ = combineLatest([
     this.overviewData$,
     this.currentLang$,
   ]).pipe(
-    map(([data, lang]) => getWeeklyDatesLabel(data.satDateRange || '', lang)),
+    map(
+      ([data, lang]) =>
+        this.getDateRangeLabel(data.satDateRange || '', lang) as string,
+    ),
   );
 
   dyfData$ = combineLatest([this.overviewData$, this.currentLang$]).pipe(
@@ -871,37 +890,31 @@ export class OverviewFacade {
   getMostRelevantFeedback() {
     this.store.dispatch(OverviewActions.getMostRelevantFeedback());
   }
-}
-
-const getWeeklyDatesLabel = (dateRange: string, lang: LocaleId) => {
-  const [startDate, endDate] = dateRange.split('/').map((d) => new Date(d));
-
-  const dateFormat = lang === FR_CA ? 'D MMM' : 'MMM D';
-
-  const formattedStartDate = dayjs
-    .utc(startDate)
-    .locale(lang)
-    .format(dateFormat);
-  const formattedEndDate = dayjs.utc(endDate).locale(lang).format(dateFormat);
 
-  return `${formattedStartDate}-${formattedEndDate}`;
-};
-
-const getFullDateRangeLabel = (dateRange: string, lang: LocaleId) => {
-  const [startDate, endDate] = dateRange.split('/');
-
-  const dateFormat = lang === FR_CA ? 'D MMM YYYY' : 'MMM D YYYY';
-  const separator = lang === FR_CA ? ' au' : ' to';
-
-  const formattedStartDate = dayjs
-    .utc(startDate)
-    .locale(lang)
-    .format(dateFormat);
-
-  const formattedEndDate = dayjs.utc(endDate).locale(lang).format(dateFormat);
-
-  return [`${formattedStartDate}${separator}`, `${formattedEndDate}`];
-};
+  getDateRangeLabel(
+    dateRange: string,
+    lang: LocaleId,
+    dateFormat = 'MMM D YYYY',
+    separator = '-',
+    breakLine = false,
+  ) {
+    const [startDate, endDate] = dateRange.split('/').map((d) => new Date(d));
+
+    dateFormat = this.i18n.service.translate(dateFormat, lang);
+    separator = this.i18n.service.translate(separator, lang);
+
+    const formattedStartDate = dayjs
+      .utc(startDate)
+      .locale(lang)
+      .format(dateFormat);
+    const formattedEndDate = dayjs.utc(endDate).locale(lang).format(dateFormat);
+
+    //breakLine exists for apexcharts labels
+    return breakLine
+      ? [`${formattedStartDate} ${separator}`, `${formattedEndDate}`]
+      : `${formattedStartDate} ${separator} ${formattedEndDate}`;
+  }
+}
 
 type DateRangeDataIndexKey = keyof OverviewAggregatedData &
   keyof PickByType<OverviewAggregatedData, number>;

diff --git a/libs/upd/views/overview/src/lib/overview-summary/overview-summary.component.html b/libs/upd/views/overview/src/lib/overview-summary/overview-summary.component.html
@@ -108,6 +108,7 @@
         [secondaryTitleData]="chartData"
         [secondaryTitleCols]="chartCols"
         [annotations]="(annotationsData$ | async) || []"
+        [allowHeaderWrap]="true"
       ></upd-apex-bar-line>
     </div>
   </div>
@@ -187,6 +188,7 @@
         ]"
         [tableCols]="dyfTableCols"
         [table]="dyfChart$ | async"
+        [allowHeaderWrap]="true"
         [horizontal]="{ isHorizontal: true, colorDistributed: false }"
         [stacked]="{ isStacked: true, isStacked100: true, hasDataLabels: true }"
       ></upd-apex-bar>

diff --git a/libs/upd/views/overview/src/lib/overview-webtraffic/overview-webtraffic.component.html b/libs/upd/views/overview/src/lib/overview-webtraffic/overview-webtraffic.component.html
@@ -36,6 +36,7 @@
         [table]="barTable$ | async"
         [yAxis]="'visits' | translate"
         [tableCols]="barTableCols"
+        [allowHeaderWrap]="true"
       ></upd-apex-bar>
     </div>
   </div>