Add date format for columns

Refactor the X axis to keep the options in a same place and add
a dates formatter for the column chart

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

@@ -5,7 +5,8 @@ import { getSvgIconPathContent } from '~/lib/utils/icon_utils';
 import { chartHeight } from '../../constants';
 import { makeDataSeries } from '~/helpers/monitor_helper';
 import { graphDataValidatorForValues } from '../../utils';
-import { getYAxisOptions, getChartGrid } from './options';
+import { getTimeAxisOptions, getYAxisOptions, getChartGrid } from './options';
+import { timezones } from '../../format_date';
 
 export default {
   components: {
@@ -20,6 +21,11 @@ export default {
       required: true,
       validator: graphDataValidatorForValues.bind(null, false),
     },
+    timezone: {
+      type: String,
+      required: false,
+      default: timezones.LOCAL,
+    },
   },
   data() {
     return {
@@ -43,6 +49,8 @@ export default {
       };
     },
     chartOptions() {
+      const xAxis = getTimeAxisOptions({ timezone: this.timezone });
+
       const yAxis = {
         ...getYAxisOptions(this.graphData.yAxis),
         scale: false,
@@ -50,8 +58,9 @@ export default {
 
       return {
         grid: getChartGrid(),
+        xAxis,
         yAxis,
-        dataZoom: this.dataZoomConfig,
+        dataZoom: [this.dataZoomConfig],
       };
     },
     xAxisTitle() {

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

 import { SUPPORTED_FORMATS, getFormatter } from '~/lib/utils/unit_format';
-import { s__ } from '~/locale';
+import { __, s__ } from '~/locale';
+import { formatDate, timezones, formats } from '../../format_date';
 
 const yAxisBoundaryGap = [0.1, 0.1];
 /**
@@ -58,6 +59,17 @@ export const getYAxisOptions = ({
   };
 };
 
+export const getTimeAxisOptions = ({ timezone = timezones.LOCAL } = {}) => ({
+  name: __('Time'),
+  type: 'time',
+  axisLabel: {
+    formatter: date => formatDate(date, { format: formats.shortTime, timezone }),
+  },
+  axisPointer: {
+    snap: true,
+  },
+});
+
 // Chart grid
 
 /**

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

@@ -2,15 +2,15 @@
 import { omit, throttle } from 'lodash';
 import { GlLink, GlDeprecatedButton, GlTooltip, GlResizeObserverDirective } from '@gitlab/ui';
 import { GlAreaChart, GlLineChart, GlChartSeriesLabel } from '@gitlab/ui/dist/charts';
-import { s__, __ } from '~/locale';
+import { s__ } from '~/locale';
 import { getSvgIconPathContent } from '~/lib/utils/icon_utils';
 import Icon from '~/vue_shared/components/icon.vue';
 import { panelTypes, chartHeight, lineTypes, lineWidths } from '../../constants';
-import { getYAxisOptions, getChartGrid, getTooltipFormatter } from './options';
+import { getYAxisOptions, getTimeAxisOptions, getChartGrid, getTooltipFormatter } from './options';
 import { annotationsYAxis, generateAnnotationsSeries } from './annotations';
 import { makeDataSeries } from '~/helpers/monitor_helper';
 import { graphDataValidatorForValues } from '../../utils';
-import { formatDate, timezones, formats } from '../../format_date';
+import { formatDate, timezones } from '../../format_date';
 
 export const timestampToISODate = timestamp => new Date(timestamp).toISOString();
 
@@ -160,24 +160,16 @@ export default {
       const { yAxis, xAxis } = this.option;
       const option = omit(this.option, ['series', 'yAxis', 'xAxis']);
 
+      const timeXAxis = {
+        ...getTimeAxisOptions({ timezone: this.timezone }),
+        ...xAxis,
+      };
+
       const dataYAxis = {
         ...getYAxisOptions(this.graphData.yAxis),
         ...yAxis,
       };
 
-      const timeXAxis = {
-        name: __('Time'),
-        type: 'time',
-        axisLabel: {
-          formatter: date =>
-            formatDate(date, { format: formats.shortTime, timezone: this.timezone }),
-        },
-        axisPointer: {
-          snap: true,
-        },
-        ...xAxis,
-      };
-
       return {
         series: this.chartOptionSeries,
         xAxis: timeXAxis,

changelogs/unreleased/219210-column-date-format.yml

+---
+title: Format metrics column chart x axis dates
+merge_request: 33681
+author:
+type: changed

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

 import { shallowMount } from '@vue/test-utils';
+import timezoneMock from 'timezone-mock';
 import { GlColumnChart } from '@gitlab/ui/dist/charts';
 import ColumnChart from '~/monitoring/components/charts/column.vue';
 
@@ -18,10 +19,7 @@ const dataValues = [
 describe('Column component', () => {
   let wrapper;
 
-  const findChart = () => wrapper.find(GlColumnChart);
-  const chartProps = prop => findChart().props(prop);
-
-  beforeEach(() => {
+  const createWrapper = (props = {}) => {
     wrapper = shallowMount(ColumnChart, {
       propsData: {
         graphData: {
@@ -41,14 +39,60 @@ describe('Column component', () => {
             },
           ],
         },
+        ...props,
       },
     });
+  };
+  const findChart = () => wrapper.find(GlColumnChart);
+  const chartProps = prop => findChart().props(prop);
+
+  beforeEach(() => {
+    createWrapper();
   });
 
   afterEach(() => {
     wrapper.destroy();
   });
 
+  describe('xAxisLabel', () => {
+    const mockDate = Date.UTC(2020, 4, 26, 20); // 8:00 PM in GMT
+
+    const useXAxisFormatter = date => {
+      const { xAxis } = chartProps('option');
+      const { formatter } = xAxis.axisLabel;
+      return formatter(date);
+    };
+
+    it('x-axis is formatted correctly in AM/PM format', () => {
+      expect(useXAxisFormatter(mockDate)).toEqual('8:00 PM');
+    });
+
+    describe('when in PT timezone', () => {
+      beforeAll(() => {
+        timezoneMock.register('US/Pacific');
+      });
+
+      afterAll(() => {
+        timezoneMock.unregister();
+      });
+
+      it('by default, values are formatted in PT', () => {
+        createWrapper();
+        expect(useXAxisFormatter(mockDate)).toEqual('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');
+      });
+
+      it('when the chart uses UTC, y-axis is formatted in UTC', () => {
+        createWrapper({ timezone: 'UTC' });
+        expect(useXAxisFormatter(mockDate)).toEqual('8:00 PM');
+      });
+    });
+  });
+
   describe('wrapped components', () => {
     describe('GitLab UI column chart', () => {
       it('is a Vue instance', () => {