Commit 805763fd authored by Miguel Rincon's avatar Miguel Rincon

Add format to column yAxis

Defines a formatter for yAxis of the column chart based
on chart options and configuration.
parent 364e813c
......@@ -5,6 +5,7 @@ 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';
export default {
components: {
......@@ -41,15 +42,25 @@ export default {
values: queryData[0].data,
};
},
chartOptions() {
const yAxis = {
...getYAxisOptions(this.graphData.yAxis),
scale: false,
};
return {
grid: getChartGrid(),
yAxis,
dataZoom: this.dataZoomConfig,
};
},
xAxisTitle() {
return this.graphData.metrics[0].result[0].x_label !== undefined
? this.graphData.metrics[0].result[0].x_label
: '';
},
yAxisTitle() {
return this.graphData.metrics[0].result[0].y_label !== undefined
? this.graphData.metrics[0].result[0].y_label
: '';
return this.chartOptions.yAxis.name;
},
xAxisType() {
return this.graphData.x_type !== undefined ? this.graphData.x_type : 'category';
......@@ -59,11 +70,6 @@ export default {
return handleIcon ? { handleIcon } : {};
},
chartOptions() {
return {
dataZoom: this.dataZoomConfig,
};
},
},
created() {
this.setSvg('scroll-handle');
......
---
title: Use y-axis format configuration in column charts
merge_request: 26356
author:
type: changed
......@@ -6,56 +6,75 @@ jest.mock('~/lib/utils/icon_utils', () => ({
getSvgIconPathContent: jest.fn().mockResolvedValue('mockSvgPathContent'),
}));
const yAxisName = 'Y-axis mock name';
const yAxisFormat = 'bytes';
const yAxisPrecistion = 3;
const dataValues = [
[1495700554.925, '8.0390625'],
[1495700614.925, '8.0390625'],
[1495700674.925, '8.0390625'],
];
describe('Column component', () => {
let columnChart;
let wrapper;
const findChart = () => wrapper.find(GlColumnChart);
const chartProps = prop => findChart().props(prop);
beforeEach(() => {
columnChart = shallowMount(ColumnChart, {
wrapper = shallowMount(ColumnChart, {
propsData: {
graphData: {
yAxis: {
name: yAxisName,
format: yAxisFormat,
precision: yAxisPrecistion,
},
metrics: [
{
x_label: 'Time',
y_label: 'Usage',
result: [
{
metric: {},
values: [
[1495700554.925, '8.0390625'],
[1495700614.925, '8.0390625'],
[1495700674.925, '8.0390625'],
],
values: dataValues,
},
],
},
],
},
containerWidth: 100,
},
});
});
afterEach(() => {
columnChart.destroy();
wrapper.destroy();
});
describe('wrapped components', () => {
describe('GitLab UI column chart', () => {
let glColumnChart;
it('is a Vue instance', () => {
expect(findChart().isVueInstance()).toBe(true);
});
beforeEach(() => {
glColumnChart = columnChart.find(GlColumnChart);
it('receives data properties needed for proper chart render', () => {
expect(chartProps('data').values).toEqual(dataValues);
});
it('is a Vue instance', () => {
expect(glColumnChart.isVueInstance()).toBe(true);
it('passes the y axis name correctly', () => {
expect(chartProps('yAxisTitle')).toBe(yAxisName);
});
it('receives data properties needed for proper chart render', () => {
const props = glColumnChart.props();
it('passes the y axis configuration correctly', () => {
expect(chartProps('option').yAxis).toMatchObject({
name: yAxisName,
axisLabel: {
formatter: expect.any(Function),
},
scale: false,
});
});
expect(props.data).toBe(columnChart.vm.chartData);
expect(props.option).toBe(columnChart.vm.chartOptions);
it('passes a dataZoom configuration', () => {
expect(chartProps('option').dataZoom).toBeDefined();
});
});
});
......
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