Add format to column yAxis

Defines a formatter for yAxis of the column chart based
on chart options and configuration.

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

@@ -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');

changelogs/unreleased/201999-formatter-column-chart.yml

+---
+title: Use y-axis format configuration in column charts
+merge_request: 26356
+author:
+type: changed

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

@@ -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();
       });
     });
   });