Commit 6907357d authored by Kushal Pandya's avatar Kushal Pandya

Merge branch '219210-column-date-format' into 'master'

Format dates for column with corresponding timezone

Closes #219210

See merge request gitlab-org/gitlab!33681
parents e1631825 4b556b3f
......@@ -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() {
......
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
/**
......
......@@ -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,
......
---
title: Format metrics column chart x axis dates
merge_request: 33681
author:
type: changed
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', () => {
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment