Feature/internationalize date formatting of charts

apinf_packages/core/helper_functions/format_date.js

@@ -16,9 +16,35 @@ import 'moment/min/locales.min';
   @param {string} dateFormat - Date format, eg. "LL" (default)
     "MMMM D, YYYY" for "en", "Do MMMM[ta] YYYY" for "fi"
 */
-export default function formatDate (date, dateFormat = 'LL') {
+export function formatDate (date, dateFormat = 'LL') {
   // Get current language
   const language = TAPi18n.getLanguage();
   // Return formatted date
   return moment(date).locale(language).format(dateFormat);
 }
+
+export function getLocaleDateFormat () {
+  // Use regex to define Finnish locale for different browsers
+  const regex = RegExp('fi*');
+
+  // Get locale
+  const locale = navigator.languages ? navigator.languages[0] :
+    (navigator.language || navigator.userLanguage);
+
+  moment.locale(locale);
+
+  // Get locale data
+  const localeData = moment.localeData();
+
+  let format = localeData.longDateFormat('L');
+
+  if (regex.test(locale)) {
+    // Remove year part (save the last dot)
+    format = format.replace(/YYYY/, '');
+  } else {
+    // Remove year part
+    format = format.replace(/.YYYY/, '');
+  }
+
+  return format;
+}

apinf_packages/dashboard/client/charts/median_response_time/median_response_time.js

@@ -13,6 +13,9 @@ import { TAPi18n } from 'meteor/tap:i18n';
 import moment from 'moment';
 import Chart from 'chart.js';
 
+// APInf imports
+import { getLocaleDateFormat } from '/apinf_packages/core/helper_functions/format_date';
+
 Template.medianResponseTime.onRendered(function () {
   const instance = this;
 
@@ -67,9 +70,12 @@ Template.medianResponseTime.onRendered(function () {
     // Get aggregated chart data
     const chartData = Template.currentData().chartData;
 
+    // Get locale date format
+    const localeDateFormat = getLocaleDateFormat();
+
     // Get dates
     const labels = chartData.map(dataset => {
-      return moment(dataset.date).format('MM/DD');
+      return moment(dataset.date).format(localeDateFormat);
     });
 
     // Get data for chart
@@ -97,4 +103,3 @@ Template.medianResponseTime.onRendered(function () {
     instance.chart.update();
   });
 });
-

apinf_packages/dashboard/client/charts/requests_number/requests_number.js

@@ -15,6 +15,9 @@ import { TAPi18n } from 'meteor/tap:i18n';
 import moment from 'moment';
 import Chart from 'chart.js';
 
+// APInf imports
+import { getLocaleDateFormat } from '/apinf_packages/core/helper_functions/format_date';
+
 Template.requestTimeline.onCreated(function () {
   const instance = this;
 
@@ -92,9 +95,12 @@ Template.requestTimeline.onRendered(function () {
     // Get analytics data
     const selectedPathData = instance.selectedPathData.get();
 
+    // Get locale date format
+    const localeDateFormat = getLocaleDateFormat();
+
     // Initialization
     const labels = selectedPathData.dates.map(date => {
-      return moment(date).format('MM/DD');
+      return moment(date).format(localeDateFormat);
     });
 
     // Update labels & data

apinf_packages/dashboard/client/charts/requests_over_time/requests_over_time.js

@@ -13,6 +13,9 @@ import { TAPi18n } from 'meteor/tap:i18n';
 import moment from 'moment';
 import Chart from 'chart.js';
 
+// APInf imports
+import { getLocaleDateFormat } from '/apinf_packages/core/helper_functions/format_date';
+
 Template.requestsOverTime.onRendered(function () {
   const instance = this;
 
@@ -67,9 +70,12 @@ Template.requestsOverTime.onRendered(function () {
     // Get aggregated chart data
     const chartData = Template.currentData().chartData;
 
+    // Get locale date format
+    const localeDateFormat = getLocaleDateFormat();
+
     // Get dates
     const labels = chartData.map(dataset => {
-      return moment(dataset.date).format('MM/DD');
+      return moment(dataset.date).format(localeDateFormat);
     });
 
     // Get data for chart

apinf_packages/dashboard/client/charts/response_time/response_time.js

@@ -14,6 +14,9 @@ import { TAPi18n } from 'meteor/tap:i18n';
 import moment from 'moment';
 import Chart from 'chart.js';
 
+// APInf imports
+import { getLocaleDateFormat } from '/apinf_packages/core/helper_functions/format_date';
+
 Template.responseTimeTimeline.onCreated(function () {
   const instance = this;
   const placeholderData = { dates: [] };
@@ -87,9 +90,12 @@ Template.responseTimeTimeline.onRendered(function () {
     // Get analytics data
     const selectedPathData = instance.selectedPathData.get();
 
+    // Get locale date format
+    const localeDateFormat = getLocaleDateFormat();
+
     // Create labels value
     const labels = selectedPathData.dates.map(date => {
-      return moment(date).format('MM/DD');
+      return moment(date).format(localeDateFormat);
     });
 
     // Update labels & data

apinf_packages/dashboard/client/charts/unique_users/unique_users.js

@@ -13,6 +13,9 @@ import { TAPi18n } from 'meteor/tap:i18n';
 import moment from 'moment';
 import Chart from 'chart.js';
 
+// APInf imports
+import { getLocaleDateFormat } from '/apinf_packages/core/helper_functions/format_date';
+
 Template.uniqueUsersOverTime.onRendered(function () {
   const instance = this;
 
@@ -67,9 +70,12 @@ Template.uniqueUsersOverTime.onRendered(function () {
     // Get aggregated chart data
     const chartData = Template.currentData().chartData;
 
+    // Get locale date format
+    const localeDateFormat = getLocaleDateFormat();
+
     // Get dates
     const labels = chartData.map(dataset => {
-      return moment(dataset.date).format('MM/DD');
+      return moment(dataset.date).format(localeDateFormat);
     });
 
     // Get data for chart

apinf_packages/metadata/client/view/metadata.js

@@ -2,7 +2,7 @@
 import { Template } from 'meteor/templating';
 
 // APInf imports
-import formatDate from '/apinf_packages/core/helper_functions/format_date';
+import { formatDate } from '/apinf_packages/core/helper_functions/format_date';
 
 // Collection imports
 import ApiMetadata from '../../collection';