Format numbers according to configured locale.

Author: dleclercpro

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "berlin-lea-performance-monitor",
-  "version": "1.12.2",
+  "version": "1.13.0",
   "author": "David Leclerc",
   "main": "./src/index.ts",
   "scripts": {

package.json

@@ -5,7 +5,7 @@ import { equals, getRange, sum } from '../../utils/math';
 import SessionHistory from '../sessions/SessionHistory';
 import { isKnownEvent } from '../../utils/event';
 import { generateEmptyCounts } from '../../utils/array';
-import { formatDate } from '../../utils/locale';
+import { formatDate, formatNumber } from '../../utils/locale';
 import { LONG_DATE_TIME_FORMAT_OPTIONS } from '../../config/locale';
 import assert from 'assert';
 import { getEventColor } from '../../utils/styles';
@@ -26,7 +26,7 @@ class EventPrevalenceOnWorkdaysGraph extends Graph<SessionHistory> {
         this.title = [
             `Zweistündliche Prävalenz aller während User-Sessions erlebten Ereignisse an Werktagen auf der LEA-Seite`,
             `Start: ${formatDate(start, LONG_DATE_TIME_FORMAT_OPTIONS)} | Ende: ${formatDate(end, LONG_DATE_TIME_FORMAT_OPTIONS)}`,
-            `Bucket-Größe: ${history.getBucketSize().format()} | Anzahl der Ereignissen: ${totalErrorCount}`,
+            `Bucket-Größe: ${history.getBucketSize().format()} | Anzahl der Ereignissen: ${formatNumber(totalErrorCount)}`,
         ];
 
         await super.draw(history);

src/models/graphs/EventPrevalenceOnWorkdaysGraph.ts

@@ -1,7 +1,7 @@
 import SessionHistory from '../sessions/SessionHistory';
 import { WEEKDAYS } from '../../constants/times';
 import { GraphAxes, Locale, TimeUnit } from '../../types';
-import { formatDate, translateWeekday } from '../../utils/locale';
+import { formatDate, formatNumber, translateWeekday } from '../../utils/locale';
 import { getAverage } from '../../utils/math';
 import Graph from './Graph';
 import { ChartType, Color as ChartColor } from 'chart.js';
@@ -34,7 +34,7 @@ class SessionAverageLengthGraph extends Graph<SessionHistory> {
         this.title = [
             `Durchschnittliche Länge einer User-Session auf der LEA-Seite`,
             `Start: ${formatDate(start, LONG_DATE_TIME_FORMAT_OPTIONS)} | Ende: ${formatDate(end, LONG_DATE_TIME_FORMAT_OPTIONS)}`,
-            `Anzahl der User-Sessions: ${sessionCount}`,
+            `Anzahl der User-Sessions: ${formatNumber(sessionCount)}`,
             `Bucket-Größe: ${history.getBucketSize().format()}`,
         ];
 

src/models/graphs/SessionAverageLengthGraph.ts

@@ -4,7 +4,7 @@ import { getTimeSpentSinceMidnight } from '../../utils/time';
 import SessionHistory from '../sessions/SessionHistory';
 import { WEEKDAYS } from '../../constants/times';
 import { GraphAxes, Locale, TimeUnit } from '../../types';
-import { formatDate, translateWeekday } from '../../utils/locale';
+import { formatDate, formatNumber, translateWeekday } from '../../utils/locale';
 import CompleteSession from '../sessions/CompleteSession';
 import { LONG_DATE_TIME_FORMAT_OPTIONS } from '../../config/locale';
 import { getWeekdayColor } from '../../utils/styles';
@@ -31,7 +31,7 @@ class SessionLengthGraph extends Graph<SessionHistory> {
         this.title = [
             `Länge einer User-Session auf der LEA-Seite`,
             `Start: ${formatDate(start, LONG_DATE_TIME_FORMAT_OPTIONS)} | Ende: ${formatDate(end, LONG_DATE_TIME_FORMAT_OPTIONS)}`,
-            `Anzahl der User-Sessions: ${sessionCount}`,
+            `Anzahl der User-Sessions: ${formatNumber(sessionCount)}`,
         ];
 
         await super.draw(history);

src/models/graphs/SessionLengthGraph.ts

@@ -21,6 +21,14 @@ export const translateWeekday = (weekday: Weekday, locale: Locale) => {
     }
 }
 
+export const formatNumberByLocale = (x: number, locale: Locale, options?: Intl.DateTimeFormatOptions) => {
+    return x.toLocaleString(locale, options);
+}
+
+export const formatNumber = (x: number, options?: Intl.DateTimeFormatOptions) => {
+    return formatNumberByLocale(x, LOCALE, options);
+}
+
 export const formatDateByLocale = (date: Date, locale: Locale, options?: Intl.DateTimeFormatOptions) => {
     return date.toLocaleString(locale, options);
 }