Fixes #29734 - Fix bar chart on config report page

theforeman · May 13, 2020 · bfdbe33 · bfdbe33
1 parent 8a80ef0
commit bfdbe33
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 7 deletions.
diff --git a/webpack/assets/javascripts/react_app/components/ConfigReports/ConfigReports.js b/webpack/assets/javascripts/react_app/components/ConfigReports/ConfigReports.js
@@ -6,6 +6,8 @@ import ChartBox from '../ChartBox/ChartBox';
 import { translate as __ } from '../../common/I18n';
 import { STATUS } from '../../constants';
 
+import './ConfigReports.scss';
+
 const ConfigReports = props => {
   const {
     metricsChartData,
@@ -29,7 +31,7 @@ const ConfigReports = props => {
 
   return (
     <Row>
-      <Col md={4}>
+      <Col md={5}>
         <ChartBox
           {...chartBoxProps}
           type="donut"
@@ -38,15 +40,15 @@ const ConfigReports = props => {
         />
       </Col>
 
-      <Col md={4}>
+      <Col md={5} className="bar-chart-medium-width">
         <ChartBox
           {...chartBoxProps}
           type="bar"
           chart={{ data: statusChartData, id: 'report-status' }}
           title={__('Report Status')}
         />
       </Col>
-      <Col md={4}>
+      <Col md={2}>
         <table className={classNames(tableClasses, 'report-chart')}>
           <tbody>{tableData.map((metric, i) => createRow(metric, i))}</tbody>
           <tfoot>

diff --git a/webpack/assets/javascripts/react_app/components/ConfigReports/ConfigReports.scss b/webpack/assets/javascripts/react_app/components/ConfigReports/ConfigReports.scss
@@ -0,0 +1,3 @@
+.bar-chart-medium-width {
+  min-width: 450px;
+}
diff --git a/...s/javascripts/react_app/components/ConfigReports/__snapshots__/ConfigReports.test.js.snap b/...s/javascripts/react_app/components/ConfigReports/__snapshots__/ConfigReports.test.js.snap
@@ -8,7 +8,7 @@ exports[`ComponentWrapper should render config reports 1`] = `
   <Col
     bsClass="col"
     componentClass="div"
-    md={4}
+    md={5}
   >
     <ChartBox
       chart={
@@ -34,8 +34,9 @@ exports[`ComponentWrapper should render config reports 1`] = `
   </Col>
   <Col
     bsClass="col"
+    className="bar-chart-medium-width"
     componentClass="div"
-    md={4}
+    md={5}
   >
     <ChartBox
       chart={
@@ -62,7 +63,7 @@ exports[`ComponentWrapper should render config reports 1`] = `
   <Col
     bsClass="col"
     componentClass="div"
-    md={4}
+    md={2}
   >
     <table
       className="report-chart"

diff --git a/webpack/assets/javascripts/services/charts/ChartService.consts.js b/webpack/assets/javascripts/services/charts/ChartService.consts.js
@@ -4,7 +4,7 @@ const enums = {
   SIZE: {
     LARGE: { height: 500 },
     REGULAR: { width: 240, height: 240 },
-    MEDIUM: { width: 350, height: 350 },
+    MEDIUM: { width: 320, height: 320 },
   },
   WIDTH: {
     SMALL: 15,
@@ -17,6 +17,7 @@ const barChartEnums = {
   SIZE: {
     LARGE: { height: 500 },
     REGULAR: { width: 350, height: 350 },
+    MEDIUM: { width: 450, height: 320 },
     SMALL: { height: 290 },
   },
   WIDTH: { ...enums.width },
@@ -83,6 +84,11 @@ export const barChartConfig = {
   padding: null,
 };
 
+export const mediumBarChartConfig = {
+  ...barChartConfig,
+  size: barChartEnums.SIZE.MEDIUM,
+};
+
 export const smallBarChartConfig = {
   ...barChartConfig,
   size: barChartEnums.SIZE.SMALL,

diff --git a/webpack/assets/javascripts/services/charts/ChartService.js b/webpack/assets/javascripts/services/charts/ChartService.js
@@ -5,6 +5,7 @@ import {
   donutLargeChartConfig,
   donutMediumChartConfig,
   barChartConfig,
+  mediumBarChartConfig,
   smallBarChartConfig,
   lineChartConfig,
   timeseriesLineChartConfig,
@@ -19,6 +20,7 @@ const chartsSizeConfig = {
   bar: {
     regular: barChartConfig,
     small: smallBarChartConfig,
+    medium: mediumBarChartConfig,
   },
   line: {
     regular: lineChartConfig,