Merge pull request #8868 from GilbertCherrie/fix_utlization_chart

Fix utilization chart

Author: DavidResende0

app/javascript/components/performance-charts/groupChart.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { GroupedBarChart } from '@carbon/charts-react';
+import { getYAxisValue } from './helpers';
+
+const GroupBarChart = ({
+  data, format, size, title,
+}) => {
+  const options = {
+    title,
+    axes: {
+      left: {
+        mapsTo: 'value',
+        ticks: {
+          formatter(n) { return getYAxisValue(format, n); },
+        },
+      },
+      bottom: {
+        scaleType: 'labels',
+        mapsTo: 'key',
+      },
+    },
+    height: size,
+    tooltip: {
+      truncation: {
+        type: 'none',
+      },
+    },
+  };
+
+  return (
+    <GroupedBarChart data={data} options={options} />
+  );
+};
+
+GroupBarChart.propTypes = {
+  data: PropTypes.instanceOf(Array),
+  format: PropTypes.instanceOf(Object),
+  size: PropTypes.string,
+  title: PropTypes.string,
+};
+
+GroupBarChart.defaultProps = {
+  data: null,
+  format: null,
+  size: '400px',
+  title: '',
+};
+
+export default GroupBarChart;

app/javascript/components/performance-charts/index.jsx

@@ -2,17 +2,25 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import LineChartGraph from './lineChart';
 import AreaChartGraph from './areaChart';
-import { getLineConvertedData } from '../carbon-charts/helpers';
+import GroupBarChart from './groupChart';
+import { getConvertedData, getLineConvertedData } from '../carbon-charts/helpers';
+import EmptyChart from '../dashboard-widgets/dashboard-charts/emptyChart';
 
 const PerformanceChartWidget = ({
   // eslint-disable-next-line no-unused-vars
   data, id, size, title,
 }) => {
-  const convertedData = getLineConvertedData(data);
-
+  let convertedData = getLineConvertedData(data);
+  if (data.miq && data.miq.empty) {
+    return (<EmptyChart />);
+  }
   if (data.miqChart === 'Area') {
     return (<AreaChartGraph data={convertedData} format={data.miq.format} size={size} title={title} />);
   }
+  if ((data.miqChart === 'StackedColumn' || data.miqChart === 'Column') && !data.data.groups) {
+    convertedData = getConvertedData(data);
+    return (<GroupBarChart data={convertedData} format={data.miq.format} size={size} title={title} />);
+  }
   return (<LineChartGraph data={convertedData} format={data.miq.format} size={size} title={title} />);
 };