Minor refactoring

src/components/BugzillaComponentDetails/index.jsx

@@ -57,7 +57,6 @@ const BugzillaComponentDetails = ({
         )
       ))}
       <BugzillaGraph
-        label={title}
         queries={constructQuery(BZ_QUERIES, product, component)}
       />
     </div>

src/components/ChartJsWrapper/index.jsx

@@ -21,7 +21,7 @@ const ChartJsWrapper = ({
       {title && <h2>{title}</h2>}
       <Chart
         type={type}
-        data={data}
+        data={{ datasets: data }}
         options={generateOptions(options)}
       />
     </div>
@@ -45,31 +45,28 @@ ChartJsWrapper.propTypes = {
     }),
     ticksCallback: PropTypes.func,
   }).isRequired,
-  data: PropTypes.shape({
-    datasets: PropTypes.arrayOf(
-      PropTypes.shape({
-        // There can be more properties than data and selectedTabIndex,
-        // however, we mainly care about these as a minimum requirement
-        data: PropTypes.arrayOf(
-          PropTypes.shape({
-            x: PropTypes.oneOfType([
-              PropTypes.string,
-              PropTypes.instanceOf(Date),
-            ]).isRequired,
-            y: PropTypes.number.isRequired,
-          }),
-        ),
-        label: PropTypes.string.isRequired,
-      }),
-    ).isRequired,
-  }),
+  data: PropTypes.arrayOf(
+    PropTypes.shape({
+      // There can be more properties than data and selectedTabIndex,
+      // however, we mainly care about these as a minimum requirement
+      data: PropTypes.arrayOf(
+        PropTypes.shape({
+          x: PropTypes.oneOfType([
+            PropTypes.string,
+            PropTypes.instanceOf(Date),
+          ]).isRequired,
+          y: PropTypes.number.isRequired,
+        }),
+      ),
+      label: PropTypes.string.isRequired,
+    }),
+  ).isRequired,
   title: PropTypes.string,
   type: PropTypes.string,
   size: PropTypes.string,
 };
 
 ChartJsWrapper.defaultProps = {
-  data: undefined,
   title: '',
   type: 'line',
   size: '8rem',

src/containers/BugzillaGraph/index.jsx

@@ -17,7 +17,7 @@ class BugzillaGraph extends Component {
     async fetchData() {
       const { queries, chartType, startDate } = this.props;
       try {
-        this.setState(await generateChartJsData(queries, chartType, startDate));
+        this.setState({ data: await generateChartJsData(queries, chartType, startDate) });
       } catch (error) {
         this.setState({ error: error.message });
         // This allows seeing the stacktrace
@@ -29,15 +29,19 @@ class BugzillaGraph extends Component {
       const { data, error } = this.state;
       const { chartType, title } = this.props;
 
+      if (error) {
+        return <ErrorPanel error={error} />;
+      }
+
       return (
-        error ? <ErrorPanel error={error} /> : (
+        data && data.length > 0 ? (
           <ChartJsWrapper
             type={chartType}
             data={data}
             options={{ scaleLabel: '# of bugs' }}
             title={title}
           />
-        )
+        ) : <div />
       );
     }
 }

src/utils/bugzilla/generateChartJsData.js

@@ -48,32 +48,23 @@ const bugsByCreationDate = (bugs) => {
   return accumulatedCount;
 };
 
-const dataFormatter = (bugSeries, chartType, startDate) => {
-  const newData = { data: { datasets: [] } };
-
-  bugSeries.forEach(({ bugs, label }, index) => {
-    const bugCountPerDay = bugsByCreationDate(bugs, startDate);
-    newData.data.datasets.push({
-      ...generateDatasetStyle(chartType, COLORS[index]),
-      data: bugCountPerDay,
-      label,
-    });
-  });
-
-  return newData;
-};
-
-
 // It formats the data and options to meet chartJs' data structures
 // startDate enables counting into a starting date all previous data points
 const generateChartJsData = async (queries = [], chartType, startDate) => {
-  const data = await Promise.all(
-    queries.map(async ({ label, parameters }) => ({
-      label,
-      ...(await queryBugzilla(parameters)),
-    })),
+  const datasets = [];
+  await Promise.all(
+    queries.map(async ({ label, parameters }, index) => {
+      const { bugs } = await queryBugzilla(parameters);
+      if (bugs.length > 0) {
+        datasets.push({
+          ...generateDatasetStyle(chartType, COLORS[index]),
+          data: bugsByCreationDate(bugs, startDate),
+          label,
+        });
+      }
+    }),
   );
-  return dataFormatter(data, chartType, startDate);
+  return datasets;
 };
 
 export default generateChartJsData;

test/components/__snapshots__/BugzillaComponentDetails.test.jsx.snap

@@ -39,41 +39,7 @@ exports[`renders the details for a Bugzilla component 1`] = `
       >
         someone@mozilla.com
       </h4>
-      <div
-        style={
-          Object {
-            "lineHeight": "8rem",
-            "textAlign": "center",
-            "width": "8rem",
-          }
-        }
-      >
-        <div
-          className="MuiCircularProgress-root-18 MuiCircularProgress-colorPrimary-21 MuiCircularProgress-indeterminate-20"
-          role="progressbar"
-          style={
-            Object {
-              "height": 40,
-              "width": 40,
-            }
-          }
-        >
-          <svg
-            className="MuiCircularProgress-svg-23"
-            viewBox="22 22 44 44"
-          >
-            <circle
-              className="MuiCircularProgress-circle-24 MuiCircularProgress-circleIndeterminate-26"
-              cx={44}
-              cy={44}
-              fill="none"
-              r={20.2}
-              strokeWidth={3.6}
-              style={Object {}}
-            />
-          </svg>
-        </div>
-      </div>
+      <div />
     </div>
   </div>
 </div>