Merge pull request #2852 from Brain-up/feat/localize-plots-weekdays-months

lifeart · web-flow · commit 38c8093ae3f3 · 2026-03-10T15:33:39.000+03:00
Use correct localization for plots (weekdays and months)
diff --git a/frontend/app/components/login-form/index.gts b/frontend/app/components/login-form/index.gts
@@ -7,6 +7,7 @@ import Router from '@ember/routing/router-service';
 import Session from 'ember-simple-auth/services/session';
 import IntlService from 'ember-intl/services/intl';
 import NetworkService from 'brn/services/network';
+import type TasksManagerService from 'brn/services/tasks-manager';
 import { LinkTo } from '@ember/routing';
 import { on } from '@ember/modifier';
 import { t } from 'ember-intl';
@@ -27,6 +28,7 @@ export default class LoginFormComponent extends Component {
   @service('router') router!: Router;
   @service('network') network!: NetworkService;
   @service('intl') intl!: IntlService;
+  @service('tasks-manager') tasksManager!: TasksManagerService;
 
   @tracked login: string | undefined = undefined;
   @tracked password: string | undefined = undefined;
@@ -75,7 +77,10 @@ export default class LoginFormComponent extends Component {
         password,
       );
       await timeout(500);
-      await this.network.loadCurrentUser();
+      await Promise.all([
+        this.network.loadCurrentUser(),
+        this.tasksManager.loadTodayCompletedExercises(),
+      ]);
     } catch (error) {
       let key = '';
       if (error.responseJSON) {
diff --git a/frontend/app/components/statistics/index.gts b/frontend/app/components/statistics/index.gts
@@ -4,6 +4,7 @@ import type { UserYearlyStatistics as UserYearlyStatisticsModel } from 'brn/sche
 import NetworkService from 'brn/services/network';
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import { service } from '@ember/service';
+import type IntlService from 'ember-intl/services/intl';
 import { DateTime } from 'luxon';
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import { tracked } from '@glimmer/tracking';
@@ -30,6 +31,7 @@ interface StatisticsSignature {
 export default class StatisticsComponent extends Component<StatisticsSignature> {
   @service('network') network!: NetworkService;
   @service('store') store!: Store;
+  @service('intl') intl!: IntlService;
 
   @tracked selectedMonth: DateTime =
     this.args.initialSelectedMonth || DateTime.now();
@@ -42,7 +44,7 @@ export default class StatisticsComponent extends Component<StatisticsSignature>
   @tracked isLoadingMonthlyDetail = false;
 
   get monthLabel(): string {
-    return this.selectedMonth.toFormat('LLLL yyyy');
+    return this.selectedMonth.reconfigure({ locale: this.intl.primaryLocale }).toFormat('LLLL yyyy');
   }
 
   getWeekTimeTrackData = dropTask(async () => {
diff --git a/frontend/app/components/statistics/month-time-track-item/index.gts b/frontend/app/components/statistics/month-time-track-item/index.gts
@@ -1,12 +1,15 @@
 import './index.css';
 import type { TOC } from '@ember/component/template-only';
+import type { DateTime } from 'luxon';
 import { t } from 'ember-intl';
+import localeMonth from 'brn/helpers/locale-month';
 
 interface MonthTimeTrackData {
   progress: string;
   time: string;
   days: number;
   month: string;
+  date: DateTime;
   year: number;
 }
 
@@ -46,7 +49,7 @@ const StatisticsMonthTimeTrackItem: TOC<Signature> = <template>
     </div>
     <div class="date">
       <div class="month">
-        {{@data.month}}
+        {{localeMonth @data.date}}
       </div>
       <div class="year">
         {{@data.year}}
diff --git a/frontend/app/components/statistics/week-time-track/index.gts b/frontend/app/components/statistics/week-time-track/index.gts
@@ -18,6 +18,8 @@ import { secondsTo } from 'brn/utils/seconds-to';
 import { isNone } from '@ember/utils';
 import didInsert from '@ember/render-modifiers/modifiers/did-insert';
 import didUpdate from '@ember/render-modifiers/modifiers/did-update';
+import { service } from '@ember/service';
+import type IntlService from 'ember-intl/services/intl';
 import { t } from 'ember-intl';
 import LoadingSpinner from 'brn/components/loading-spinner';
 import StatisticsBarChart from 'brn/components/statistics/bar-chart';
@@ -49,6 +51,8 @@ interface WeekTimeTrackSignature {
 export default class WeekTimeTrackComponent extends Component<WeekTimeTrackSignature> {
   private static readonly EXERCISING_TIME_NORM_IN_S = 20 * 60;
 
+  @service('intl') intl!: IntlService;
+
   @tracked private chartData?: IWeekChartDataItem[];
 
   get barOptions(): BarOptionsType {
@@ -129,6 +133,7 @@ export default class WeekTimeTrackComponent extends Component<WeekTimeTrackSigna
     let lastDay = null;
     let lastDayIndex = -1;
     let dayNumber: number;
+    const locale = this.intl.primaryLocale;
     for (
       dayNumber = 1;
       dayNumber <= this.selectedMonth.daysInMonth;
@@ -145,13 +150,14 @@ export default class WeekTimeTrackComponent extends Component<WeekTimeTrackSigna
       this.chartData.push(
         dataItem
           ? {
-              x: dataItem.date.weekdayShort.slice(0, 2),
+              x: dataItem.date.reconfigure({ locale }).weekdayShort.slice(0, 2),
               y: dataItem.exercisingTimeSeconds,
               progress: dataItem.progress,
             }
           : {
               x: this.selectedMonth
                 .set({ day: dayNumber })
+                .reconfigure({ locale })
                 .weekdayShort.slice(0, 2),
               y: 0,
               progress: PROGRESS.BAD,
diff --git a/frontend/app/helpers/locale-month.ts b/frontend/app/helpers/locale-month.ts
@@ -0,0 +1,15 @@
+import Helper from '@ember/component/helper';
+import { service } from '@ember/service';
+import type IntlService from 'ember-intl/services/intl';
+import type { DateTime } from 'luxon';
+
+export default class LocaleMonthHelper extends Helper<{
+  Args: { Positional: [DateTime]; Named: { format?: string } };
+  Return: string;
+}> {
+  @service('intl') intl!: IntlService;
+
+  compute([date]: [DateTime], { format }: { format?: string } = {}): string {
+    return date.reconfigure({ locale: this.intl.primaryLocale }).toFormat(format ?? 'LLLL');
+  }
+}
diff --git a/frontend/tests/integration/components/statistics/month-time-track-item/component-test.gts b/frontend/tests/integration/components/statistics/month-time-track-item/component-test.gts
@@ -84,5 +84,51 @@ module(
         .dom('[data-test-month-track-item]')
         .hasNoClass('selected', 'it is unselected');
     });
+
+    test('it displays localized month name for en-us', async function (assert) {
+      const itemData: any = {
+        progress: PROGRESS.GOOD,
+        time: '01:00:00',
+        days: 3,
+        month: 'June',
+        year: 2021,
+        date: DateTime.fromISO('2021-06-15'),
+      };
+
+      this.set('itemData', itemData);
+
+      const self = this;
+
+      await render(
+        <template><StatisticsMonthTimeTrackItem @data={{self.itemData}} /></template>
+      );
+
+      assert.dom('.month').hasText('June', 'month is displayed in English');
+    });
+
+    module('with ru-ru locale', function (hooks) {
+      setupIntl(hooks, 'ru-ru');
+
+      test('it displays localized month name for ru-ru', async function (assert) {
+        const itemData: any = {
+          progress: PROGRESS.GOOD,
+          time: '01:00:00',
+          days: 3,
+          month: 'June',
+          year: 2021,
+          date: DateTime.fromISO('2021-06-15'),
+        };
+
+        this.set('itemData', itemData);
+
+        const self = this;
+
+        await render(
+          <template><StatisticsMonthTimeTrackItem @data={{self.itemData}} /></template>
+        );
+
+        assert.dom('.month').hasText('июнь', 'month is displayed in Russian');
+      });
+    });
   },
 );
diff --git a/frontend/tests/integration/components/statistics/week-time-track/component-test.gts b/frontend/tests/integration/components/statistics/week-time-track/component-test.gts
@@ -2,7 +2,7 @@
 import { module, test } from 'qunit';
 import { setupIntl } from 'ember-intl/test-support';
 import { setupRenderingTest } from 'ember-qunit';
-import { render } from '@ember/test-helpers';
+import { render, settled } from '@ember/test-helpers';
 import { DateTime } from 'luxon';
 import StatisticsWeekTimeTrack from 'brn/components/statistics/week-time-track';
 
@@ -79,5 +79,95 @@ module(
         .dom('[data-test-empty-data]')
         .exists('empty data description is shown');
     });
+
+    test('it uses localized weekday labels for en-us', async function (assert) {
+      const TRACK_DATA = [
+        {
+          date: DateTime.fromISO('2021-06-07'), // Monday
+          exercisingTimeSeconds: 600,
+          progress: 'GOOD',
+        },
+        {
+          date: DateTime.fromISO('2021-06-08'), // Tuesday
+          exercisingTimeSeconds: 300,
+          progress: 'BAD',
+        },
+      ];
+
+      this.set('isLoadingWeekTimeTrackData', false);
+
+      const self = this;
+
+      await render(<template><StatisticsWeekTimeTrack
+      @isLoading={{self.isLoadingWeekTimeTrackData}}
+      @selectedMonth={{self.selectedMonth}}
+      @data={{self.rawWeekTimeTrackData}}
+      /></template>);
+
+      const selectedMonth = DateTime.fromISO('2021-06-23');
+      this.set('selectedMonth', selectedMonth);
+      this.set('rawWeekTimeTrackData', TRACK_DATA);
+      await settled();
+
+      const tickTexts = this.element.querySelectorAll('.bb-axis-x .tick text');
+      const labels = Array.from(tickTexts).map((el) => {
+        const tspan = el.querySelector('tspan');
+        return tspan ? tspan.textContent?.trim() : el.textContent?.trim();
+      });
+
+      const englishWeekdays = ['MO', 'TU', 'WE', 'TH', 'FR', 'SA', 'SU'];
+      const englishLabels = labels.filter((label) =>
+        englishWeekdays.includes(label ?? ''),
+      );
+      // June 2021 has 30 days, so all 30 tick labels should be English weekday abbrevs
+      assert.strictEqual(englishLabels.length, 30, 'all 30 day labels are English weekday abbreviations');
+    });
+
+    module('with ru-ru locale', function (hooks) {
+      setupIntl(hooks, 'ru-ru');
+
+      test('it uses localized weekday labels for ru-ru', async function (assert) {
+        const TRACK_DATA = [
+          {
+            date: DateTime.fromISO('2021-06-07'), // Monday
+            exercisingTimeSeconds: 600,
+            progress: 'GOOD',
+          },
+          {
+            date: DateTime.fromISO('2021-06-08'), // Tuesday
+            exercisingTimeSeconds: 300,
+            progress: 'BAD',
+          },
+        ];
+
+        this.set('isLoadingWeekTimeTrackData', false);
+
+        const self = this;
+
+        await render(<template><StatisticsWeekTimeTrack
+        @isLoading={{self.isLoadingWeekTimeTrackData}}
+        @selectedMonth={{self.selectedMonth}}
+        @data={{self.rawWeekTimeTrackData}}
+        /></template>);
+
+        const selectedMonth = DateTime.fromISO('2021-06-23');
+        this.set('selectedMonth', selectedMonth);
+        this.set('rawWeekTimeTrackData', TRACK_DATA);
+        await settled();
+
+        const tickTexts = this.element.querySelectorAll('.bb-axis-x .tick text');
+        const labels = Array.from(tickTexts).map((el) => {
+          const tspan = el.querySelector('tspan');
+          return tspan ? tspan.textContent?.trim() : el.textContent?.trim();
+        });
+
+        const russianWeekdays = ['ПН', 'ВТ', 'СР', 'ЧТ', 'ПТ', 'СБ', 'ВС'];
+        const russianLabels = labels.filter((label) =>
+          russianWeekdays.includes(label ?? ''),
+        );
+        // June 2021 has 30 days, so all 30 tick labels should be Russian weekday abbrevs
+        assert.strictEqual(russianLabels.length, 30, 'all 30 day labels are Russian weekday abbreviations');
+      });
+    });
   },
 );
