Validate recharts data

Author: ShrawanBK

client/src/views/CommonCharts/DonutChart/index.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { isNotDefined } from '@togglecorp/fujs';
 
 import {
     PieChart,
@@ -15,7 +16,7 @@ const CustomTooltip = ({ active, payload }) => {
     if (!active) {
         return null;
     }
-    if (payload.length <= 0) {
+    if (isNotDefined(payload) || payload.length <= 0) {
         return null;
     }
 
@@ -47,7 +48,8 @@ export default function DonutChart(props) {
         donutChartWidth,
     } = props;
 
-    if (data.length <= 0) {
+
+    if (isNotDefined(data) || data.length <= 0) {
         return (
             <div>
                 Nothings to show.

client/src/views/Dashboard/GroupedBarChart/index.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { isNotDefined } from '@togglecorp/fujs';
 
 import {
     BarChart,
@@ -9,7 +10,6 @@ import {
     Tooltip,
     Legend,
     ResponsiveContainer,
-    LabelList,
 } from 'recharts';
 
 function CustomizedLabel(props) {
@@ -20,7 +20,7 @@ function CustomizedLabel(props) {
             x={x + width / 2.75}
             y={y}
             dy={-8}
-            fontSize="12"
+            fontSize={12}
         >
             {value}
         </text>
@@ -32,7 +32,7 @@ export default function GroupedBarChart(props) {
         data,
     } = props;
 
-    if (data.values.length <= 0) {
+    if (isNotDefined(data) || isNotDefined(data.values) || data.values.length <= 0) {
         return (
             <div>Nothing to show</div>
         );

client/src/views/Report/GroupedBarChart.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { isNotDefined } from '@togglecorp/fujs';
 
 import {
     BarChart,
@@ -18,7 +19,7 @@ export default function GroupedBarChart(props) {
     } = props;
 
 
-    if (data.values.length <= 0) {
+    if (isNotDefined(data) || isNotDefined(data.values) || data.values.length <= 0) {
         return (
             <div>Nothing to show</div>
         );

client/src/views/Report/HorizontalBar.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { isNotDefined } from '@togglecorp/fujs';
 
 import {
     BarChart,
@@ -18,7 +19,7 @@ export default function HorizontalBar(props) {
         colorScheme,
     } = props;
 
-    if (data.length <= 0) {
+    if (isNotDefined(data) || data.length <= 0) {
         return (
             <div>
                 Nothings to show.