Prepend date to timestamps on chart axes

 - add date to column charts, area charts and line charts

app/assets/javascripts/monitoring/components/charts/heatmap.vue

@@ -48,7 +48,10 @@ export default {
       return this.result.values.map(val => {
         const [yLabel] = val;
 
-        return formatDate(new Date(yLabel), { format: formats.shortTime, timezone: this.timezone });
+        return formatDate(new Date(yLabel), {
+          format: formats.shortTime,
+          timezone: this.timezone,
+        });
       });
     },
     result() {

app/assets/javascripts/monitoring/components/charts/options.js

@@ -76,11 +76,14 @@ export const getYAxisOptions = ({
   };
 };
 
-export const getTimeAxisOptions = ({ timezone = timezones.LOCAL } = {}) => ({
+export const getTimeAxisOptions = ({
+  timezone = timezones.LOCAL,
+  format = formats.shortDateTime,
+} = {}) => ({
   name: __('Time'),
   type: axisTypes.time,
   axisLabel: {
-    formatter: date => formatDate(date, { format: formats.shortTime, timezone }),
+    formatter: date => formatDate(date, { format, timezone }),
   },
   axisPointer: {
     snap: false,

app/assets/javascripts/monitoring/components/charts/stacked_column.vue

@@ -6,7 +6,7 @@ import { chartHeight, legendLayoutTypes } from '../../constants';
 import { s__ } from '~/locale';
 import { graphDataValidatorForValues } from '../../utils';
 import { getTimeAxisOptions, axisTypes } from './options';
-import { timezones } from '../../format_date';
+import { formats, timezones } from '../../format_date';
 
 export default {
   components: {
@@ -97,7 +97,7 @@ export default {
     chartOptions() {
       return {
         xAxis: {
-          ...getTimeAxisOptions({ timezone: this.timezone }),
+          ...getTimeAxisOptions({ timezone: this.timezone, format: formats.shortTime }),
           type: this.xAxisType,
         },
         dataZoom: [this.dataZoomConfig],

app/assets/javascripts/monitoring/format_date.js

@@ -14,6 +14,7 @@ export const timezones = {
 
 export const formats = {
   shortTime: 'h:MM TT',
+  shortDateTime: 'm/d h:MM TT',
   default: 'dd mmm yyyy, h:MMTT (Z)',
 };
 

changelogs/unreleased/astoicescu-adaptDateFormatOnTimeSeries.yml

+---
+title: Add date to x-axes timestamps
+merge_request: 36675
+author:
+type: changed

spec/frontend/monitoring/components/charts/column_spec.js

@@ -63,8 +63,8 @@ describe('Column component', () => {
       return formatter(date);
     };
 
-    it('x-axis is formatted correctly in AM/PM format', () => {
-      expect(useXAxisFormatter(mockDate)).toEqual('8:00 PM');
+    it('x-axis is formatted correctly in m/d h:MM TT format', () => {
+      expect(useXAxisFormatter(mockDate)).toEqual('5/26 8:00 PM');
     });
 
     describe('when in PT timezone', () => {
@@ -78,17 +78,17 @@ describe('Column component', () => {
 
       it('by default, values are formatted in PT', () => {
         createWrapper();
-        expect(useXAxisFormatter(mockDate)).toEqual('1:00 PM');
+        expect(useXAxisFormatter(mockDate)).toEqual('5/26 1:00 PM');
       });
 
       it('when the chart uses local timezone, y-axis is formatted in PT', () => {
         createWrapper({ timezone: 'LOCAL' });
-        expect(useXAxisFormatter(mockDate)).toEqual('1:00 PM');
+        expect(useXAxisFormatter(mockDate)).toEqual('5/26 1:00 PM');
       });
 
       it('when the chart uses UTC, y-axis is formatted in UTC', () => {
         createWrapper({ timezone: 'UTC' });
-        expect(useXAxisFormatter(mockDate)).toEqual('8:00 PM');
+        expect(useXAxisFormatter(mockDate)).toEqual('5/26 8:00 PM');
       });
     });
   });

spec/frontend/monitoring/components/charts/time_series_spec.js

@@ -527,8 +527,8 @@ describe('Time series component', () => {
             return formatter(date);
           };
 
-          it('x-axis is formatted correctly in AM/PM format', () => {
-            expect(useXAxisFormatter(mockDate)).toEqual('8:00 PM');
+          it('x-axis is formatted correctly in m/d h:MM TT format', () => {
+            expect(useXAxisFormatter(mockDate)).toEqual('5/26 8:00 PM');
           });
 
           describe('when in PT timezone', () => {
@@ -542,17 +542,17 @@ describe('Time series component', () => {
 
             it('by default, values are formatted in PT', () => {
               createWrapper();
-              expect(useXAxisFormatter(mockDate)).toEqual('1:00 PM');
+              expect(useXAxisFormatter(mockDate)).toEqual('5/26 1:00 PM');
             });
 
             it('when the chart uses local timezone, y-axis is formatted in PT', () => {
               createWrapper({ timezone: 'LOCAL' });
-              expect(useXAxisFormatter(mockDate)).toEqual('1:00 PM');
+              expect(useXAxisFormatter(mockDate)).toEqual('5/26 1:00 PM');
             });
 
             it('when the chart uses UTC, y-axis is formatted in UTC', () => {
               createWrapper({ timezone: 'UTC' });
-              expect(useXAxisFormatter(mockDate)).toEqual('8:00 PM');
+              expect(useXAxisFormatter(mockDate)).toEqual('5/26 8:00 PM');
             });
           });
         });