Merge branch 'mrincon/use-graph-bar-data' into 'master'

Use bar generated data instead of hardcoded data

See merge request gitlab-org/gitlab!40238

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

 import { shallowMount } from '@vue/test-utils';
 import { GlBarChart } from '@gitlab/ui/dist/charts';
 import Bar from '~/monitoring/components/charts/bar.vue';
-import { barMockData } from '../../mock_data';
+import { barGraphData } from '../../graph_data';
 
 jest.mock('~/lib/utils/icon_utils', () => ({
   getSvgIconPathContent: jest.fn().mockResolvedValue('mockSvgPathContent'),
@@ -10,11 +10,14 @@ jest.mock('~/lib/utils/icon_utils', () => ({
 describe('Bar component', () => {
   let barChart;
   let store;
+  let graphData;
 
   beforeEach(() => {
+    graphData = barGraphData();
+
     barChart = shallowMount(Bar, {
       propsData: {
-        graphData: barMockData,
+        graphData,
       },
       store,
     });
@@ -31,7 +34,7 @@ describe('Bar component', () => {
 
       beforeEach(() => {
         glbarChart = barChart.find(GlBarChart);
-        chartData = barChart.vm.chartData[barMockData.metrics[0].label];
+        chartData = barChart.vm.chartData[graphData.metrics[0].label];
       });
 
       it('is a Vue instance', () => {
@@ -39,7 +42,7 @@ describe('Bar component', () => {
       });
 
       it('should display a label on the x axis', () => {
-        expect(glbarChart.vm.xAxisTitle).toBe(barMockData.xLabel);
+        expect(glbarChart.props('xAxisTitle')).toBe(graphData.xLabel);
       });
 
       it('should return chartData as array of arrays', () => {

spec/frontend/monitoring/components/dashboard_panel_spec.js

@@ -15,10 +15,14 @@ import {
   mockNamespace,
   mockNamespacedData,
   mockTimeRange,
-  barMockData,
 } from '../mock_data';
 import { dashboardProps, graphData, graphDataEmpty } from '../fixture_data';
-import { anomalyGraphData, singleStatGraphData, heatmapGraphData } from '../graph_data';
+import {
+  anomalyGraphData,
+  singleStatGraphData,
+  heatmapGraphData,
+  barGraphData,
+} from '../graph_data';
 
 import { panelTypes } from '~/monitoring/constants';
 
@@ -240,7 +244,7 @@ describe('Dashboard Panel', () => {
         ${dataWithType(panelTypes.COLUMN)}         | ${MonitorColumnChart}        | ${false}
         ${dataWithType(panelTypes.STACKED_COLUMN)} | ${MonitorStackedColumnChart} | ${false}
         ${heatmapGraphData()}                      | ${MonitorHeatmapChart}       | ${false}
-        ${barMockData}                             | ${MonitorBarChart}           | ${false}
+        ${barGraphData()}                          | ${MonitorBarChart}           | ${false}
       `('when $data.type data is provided', ({ data, component, hasCtxMenu }) => {
         const attrs = { attr1: 'attr1Value', attr2: 'attr2Value' };
 

spec/frontend/monitoring/graph_data.js

@@ -259,3 +259,16 @@ export const stackedColumnGraphData = (panelOptions = {}, dataOptions = {}) => {
     type: panelTypes.STACKED_COLUMN,
   };
 };
+
+/**
+ * Generates bar mock graph data according to options
+ *
+ * @param {Object} panelOptions - Panel options as in YML.
+ * @param {Object} dataOptions
+ */
+export const barGraphData = (panelOptions = {}, dataOptions = {}) => {
+  return {
+    ...timeSeriesGraphData(panelOptions, dataOptions),
+    type: panelTypes.BAR,
+  };
+};