From f1ca76d7434804b83f94dd942c2a91240950bbbd Mon Sep 17 00:00:00 2001
From: EBS <bkshrawanbk@gmail.com>
Date: Fri, 28 Aug 2020 17:16:26 +0545
Subject: [PATCH 1/5] Add Dashboard GroupedBarChart

---
 .../views/Dashboard/GroupedBarChart/index.js  | 69 +++++++++++++++++++
 .../SummaryContainer/TrendSummary/index.js    | 61 ++++++++++++----
 2 files changed, 116 insertions(+), 14 deletions(-)
 create mode 100644 client/src/views/Dashboard/GroupedBarChart/index.js

diff --git a/client/src/views/Dashboard/GroupedBarChart/index.js b/client/src/views/Dashboard/GroupedBarChart/index.js
new file mode 100644
index 0000000..212a359
--- /dev/null
+++ b/client/src/views/Dashboard/GroupedBarChart/index.js
@@ -0,0 +1,69 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import {
+    BarChart,
+    Bar,
+    XAxis,
+    YAxis,
+    Tooltip,
+    Legend,
+    ResponsiveContainer,
+    LabelList,
+} from 'recharts';
+
+function CustomizedLabel(props) {
+    const { x, y, width, value } = props;
+    return (
+        <text
+            x={x + width / 2}
+            y={y}
+            dy={-8}
+            fontSize="12"
+        >
+            {value}
+        </text>
+    );
+}
+
+export default function GroupedBarChart(props) {
+    const {
+        data,
+    } = props;
+
+
+    if (data.values.length <= 0) {
+        return (
+            <div>Nothing to show</div>
+        );
+    }
+
+    return (
+        <ResponsiveContainer
+            height={250}
+            width="100%"
+        >
+            <BarChart
+                data={data.values}
+                margin={{ top: 50 }}
+            >
+                <XAxis dataKey="date" />
+                <YAxis />
+                <Tooltip />
+                <Legend align="center" />
+                {data.columns.map(column => (
+                    <Bar
+                        dataKey={column}
+                        key={column}
+                        fill={data.colors[column]}
+                        label={<CustomizedLabel />}
+                    />
+                ))}
+            </BarChart>
+        </ResponsiveContainer>
+    );
+}
+
+GroupedBarChart.propTypes = {
+    data: PropTypes.object.isRequired,
+};
diff --git a/client/src/views/Dashboard/SummaryContainer/TrendSummary/index.js b/client/src/views/Dashboard/SummaryContainer/TrendSummary/index.js
index 903a9d1..8d68386 100644
--- a/client/src/views/Dashboard/SummaryContainer/TrendSummary/index.js
+++ b/client/src/views/Dashboard/SummaryContainer/TrendSummary/index.js
@@ -15,6 +15,8 @@ import {
 import GroupedBarChart from '#rscz/GroupedBarChart';
 import Legend from '#rscz/Legend';
 
+import GroupedBarChartRecharts from '../../GroupedBarChart';
+
 import styles from './styles.scss';
 
 const propTypes = {
@@ -279,11 +281,11 @@ class TrendSummary extends React.PureComponent {
             values,
             columns: [
                 'Total Closed',
-                'Closed On',
+                'Closed On Time',
             ],
             colors: {
                 'Total Closed': '#44df96',
-                'Closed On': '#c25be2',
+                'Closed On Time': '#c25be2',
             },
         });
     });
@@ -330,7 +332,12 @@ class TrendSummary extends React.PureComponent {
             <div className={_cs(styles.trend, className)}>
                 <div className={_cs(styles.item)}>
                     <h3> RC Supply Trend </h3>
-                    <GroupedBarChart
+                    {rcData.values.length > 0 && (
+                        <GroupedBarChartRecharts
+                            data={rcData}
+                        />
+                    )}
+                    {/* <GroupedBarChart
                         data={rcData}
                         groupSelector={groupSelector}
                         lineDataSelector={rcLineSelector}
@@ -342,11 +349,16 @@ class TrendSummary extends React.PureComponent {
                         keySelector={legendKeySelector}
                         labelSelector={legendLabelSelector}
                         colorSelector={legendColorSelector}
-                    />
+                    /> */}
                 </div>
                 <div className={_cs(styles.item)}>
                     <h3> Child Monitoring Trend </h3>
-                    <GroupedBarChart
+                    {childMonitoringData.values.length > 0 && (
+                        <GroupedBarChartRecharts
+                            data={childMonitoringData}
+                        />
+                    )}
+                    {/* <GroupedBarChart
                         data={childMonitoringData}
                         groupSelector={groupSelector}
                         lineDataSelector={childMonitoringLineSelector}
@@ -358,11 +370,16 @@ class TrendSummary extends React.PureComponent {
                         keySelector={legendKeySelector}
                         labelSelector={legendLabelSelector}
                         colorSelector={legendColorSelector}
-                    />
+                    /> */}
                 </div>
                 <div className={_cs(styles.item)}>
                     <h3> Health Nutrition Trend </h3>
-                    <GroupedBarChart
+                    {healthData.values.length > 0 && (
+                        <GroupedBarChartRecharts
+                            data={healthData}
+                        />
+                    )}
+                    {/* <GroupedBarChart
                         data={healthData}
                         groupSelector={groupSelector}
                         showValue
@@ -373,11 +390,16 @@ class TrendSummary extends React.PureComponent {
                         keySelector={legendKeySelector}
                         labelSelector={legendLabelSelector}
                         colorSelector={legendColorSelector}
-                    />
+                    /> */}
                 </div>
                 <div className={_cs(styles.item)}>
                     <h3> Correspondence Trend </h3>
-                    <GroupedBarChart
+                    {correspondenceData.values.length > 0 && (
+                        <GroupedBarChartRecharts
+                            data={correspondenceData}
+                        />
+                    )}
+                    {/* <GroupedBarChart
                         data={correspondenceData}
                         groupSelector={groupSelector}
                         showValue
@@ -388,11 +410,16 @@ class TrendSummary extends React.PureComponent {
                         keySelector={legendKeySelector}
                         labelSelector={legendLabelSelector}
                         colorSelector={legendColorSelector}
-                    />
+                    /> */}
                 </div>
                 <div className={_cs(styles.item)}>
                     <h3> Education Trend </h3>
-                    <GroupedBarChart
+                    {educationData.values.length > 0 && (
+                        <GroupedBarChartRecharts
+                            data={educationData}
+                        />
+                    )}
+                    {/* <GroupedBarChart
                         data={educationData}
                         groupSelector={groupSelector}
                         showValue
@@ -403,11 +430,17 @@ class TrendSummary extends React.PureComponent {
                         keySelector={legendKeySelector}
                         labelSelector={legendLabelSelector}
                         colorSelector={legendColorSelector}
-                    />
+                    /> */}
                 </div>
                 <div className={_cs(styles.item)}>
                     <h3> SOI Trend </h3>
-                    <GroupedBarChart
+                    {soiData.values.length > 0 && (
+                        <GroupedBarChartRecharts
+                            data={soiData}
+                        />
+                    )}
+                    {console.log('soiData---', soiData)}
+                    {/* <GroupedBarChart
                         data={soiData}
                         groupSelector={groupSelector}
                         showValue
@@ -418,7 +451,7 @@ class TrendSummary extends React.PureComponent {
                         keySelector={legendKeySelector}
                         labelSelector={legendLabelSelector}
                         colorSelector={legendColorSelector}
-                    />
+                    /> */}
                 </div>
             </div>
         );

From ac6096c97ba32ba995bc920122e787f4563ce07e Mon Sep 17 00:00:00 2001
From: EBS <bkshrawanbk@gmail.com>
Date: Mon, 31 Aug 2020 10:37:44 +0545
Subject: [PATCH 2/5] Refactor Dashboard Trend Layout

---
 client/src/views/Dashboard/GroupedBarChart/index.js | 4 ++--
 client/src/views/Report/index.js                    | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/client/src/views/Dashboard/GroupedBarChart/index.js b/client/src/views/Dashboard/GroupedBarChart/index.js
index 212a359..4db9537 100644
--- a/client/src/views/Dashboard/GroupedBarChart/index.js
+++ b/client/src/views/Dashboard/GroupedBarChart/index.js
@@ -14,9 +14,10 @@ import {
 
 function CustomizedLabel(props) {
     const { x, y, width, value } = props;
+
     return (
         <text
-            x={x + width / 2}
+            x={x + width / 2.75}
             y={y}
             dy={-8}
             fontSize="12"
@@ -31,7 +32,6 @@ export default function GroupedBarChart(props) {
         data,
     } = props;
 
-
     if (data.values.length <= 0) {
         return (
             <div>Nothing to show</div>
diff --git a/client/src/views/Report/index.js b/client/src/views/Report/index.js
index 4a08cc8..ae21562 100644
--- a/client/src/views/Report/index.js
+++ b/client/src/views/Report/index.js
@@ -560,7 +560,7 @@ class Report extends PureComponent {
                             <div className={styles.vizContainer}>
                                 <div className={styles.viz}>
                                     <DonutChartReCharts
-                                        data={childDonutData}
+                                        data={healthDonut}
                                         colorScheme={triColorScheme}
                                     />
                                 </div>

From b75aa260be96fc543e4413cf9f3ec7cad10f5d1d Mon Sep 17 00:00:00 2001
From: EBS <bkshrawanbk@gmail.com>
Date: Tue, 8 Sep 2020 13:37:53 +0545
Subject: [PATCH 3/5] Resolve Summary conflicts

---
 .../DonutChart/index.js                       | 19 ++++--
 .../DonutChart/styles.scss                    |  4 ++
 client/src/views/Dashboard/Summary/index.js   | 63 ++++++++++++++++---
 .../src/views/Dashboard/Summary/styles.scss   |  6 +-
 .../SummaryContainer/TrendSummary/index.js    |  1 -
 client/src/views/Report/index.js              |  2 +-
 6 files changed, 78 insertions(+), 17 deletions(-)
 rename client/src/views/{Report => CommonCharts}/DonutChart/index.js (79%)
 rename client/src/views/{Report => CommonCharts}/DonutChart/styles.scss (92%)

diff --git a/client/src/views/Report/DonutChart/index.js b/client/src/views/CommonCharts/DonutChart/index.js
similarity index 79%
rename from client/src/views/Report/DonutChart/index.js
rename to client/src/views/CommonCharts/DonutChart/index.js
index f454919..262e74b 100644
--- a/client/src/views/Report/DonutChart/index.js
+++ b/client/src/views/CommonCharts/DonutChart/index.js
@@ -43,6 +43,8 @@ export default function DonutChart(props) {
     const {
         data,
         colorScheme,
+        donutChartHeight,
+        donutChartWidth,
     } = props;
 
     if (data.length <= 0) {
@@ -56,22 +58,24 @@ export default function DonutChart(props) {
     return (
         <div
             style={{
-                width: '100%',
-                height: 180,
+                width: donutChartWidth,
+                height: donutChartHeight,
+                marginBottom: 12,
             }}
         >
             <ResponsiveContainer>
                 <PieChart>
                     <Pie
                         data={data}
-                        innerRadius={65}
-                        outerRadius={85}
+                        innerRadius={donutChartHeight / 2.75}
+                        outerRadius={donutChartHeight / 2}
                         dataKey="value"
                     >
                         {data.map((d, index) => (
                             <Cell
                                 key={d.key}
                                 fill={colorScheme[index]}
+                                className={styles.cell}
                             />
                         ))}
                     </Pie>
@@ -82,7 +86,14 @@ export default function DonutChart(props) {
     );
 }
 
+DonutChart.defaultProps = {
+    donutChartHeight: 180,
+    donutChartWidth: '100%',
+};
+
 DonutChart.propTypes = {
+    donutChartHeight: PropTypes.number,
+    donutChartWidth: PropTypes.string,
     data: PropTypes.array.isRequired, // eslint-disable-line react/forbid-prop-types
     colorScheme: PropTypes.array.isRequired, // eslint-disable-line react/forbid-prop-types
 };
diff --git a/client/src/views/Report/DonutChart/styles.scss b/client/src/views/CommonCharts/DonutChart/styles.scss
similarity index 92%
rename from client/src/views/Report/DonutChart/styles.scss
rename to client/src/views/CommonCharts/DonutChart/styles.scss
index 55b6b07..fe0f495 100644
--- a/client/src/views/Report/DonutChart/styles.scss
+++ b/client/src/views/CommonCharts/DonutChart/styles.scss
@@ -14,3 +14,7 @@
     margin-bottom: 0;
     font-size: var(--font-size-super-large);
 }
+
+.cell {
+    cursor: pointer;
+}
diff --git a/client/src/views/Dashboard/Summary/index.js b/client/src/views/Dashboard/Summary/index.js
index 1d1b758..7bad927 100644
--- a/client/src/views/Dashboard/Summary/index.js
+++ b/client/src/views/Dashboard/Summary/index.js
@@ -21,6 +21,8 @@ import LanguagePeopleGroupDisability from '#components/LanguagePeopleGroupDisabi
 
 import { transformSoi } from '#utils/transform';
 
+import DonutChartRecharts from '../../CommonCharts/DonutChart';
+
 import styles from './styles.scss';
 
 const propTypes = {
@@ -40,6 +42,8 @@ const defaultProps = {
 const droppedKey = 'total_no_of_rc_records_dropped_during_the_month';
 const rcAwayKey = 'total_rc_temporarily_away';
 
+const donutChartHeight = 120;
+
 const ageKeyMap = {
     '<=6': '0 - 6',
     '7-12': '7 - 12',
@@ -70,6 +74,7 @@ const legendColorSelector = d => d.color;
 
 const donutColor = ['#41cf76', '#f44336'];
 const soiColorScheme = ['#ef5350', '#fff176', '#81c784'];
+
 const sectionPercents = [0.75, 0.1, 0.15];
 
 const mvcIndicatorKeySelector = d => d.label;
@@ -366,7 +371,7 @@ export default class Summary extends PureComponent {
         };
 
         const primaryUneducated = {
-            key: 'PrimaryUnEducated',
+            key: 'PrimaryUneducated',
             value: this.getValueFromMap(educationMap, '@PrimarySchoolAgeNoEducation') || 0,
             label: 'Primary School Age RC Not Involved in Education',
         };
@@ -397,7 +402,7 @@ export default class Summary extends PureComponent {
 
         const educated = education.filter(values => (
             values.key === 'PrimaryEducated'
-                || values.key === 'SecondaryEducated'
+            || values.key === 'SecondaryEducated'
         )).reduce((a, b) => ({ ...a, value: a.value + b.value }), {
             value: 0,
             key: 'educated',
@@ -406,7 +411,7 @@ export default class Summary extends PureComponent {
 
         const uneducated = education.filter(values => (
             values.key === '@SecondarySchoolAgeNoEducation'
-                || values.key === '@PrimarySchoolAgeNoEducation'
+            || values.key === '@PrimarySchoolAgeNoEducation'
         )).reduce((a, b) => ({ ...a, value: a.value + b.value }), {
             value: 0,
             key: 'uneducated',
@@ -635,6 +640,18 @@ export default class Summary extends PureComponent {
         ].filter(v => v.value);
     })
 
+    getDonutDataWithName = memoize((donutData) => {
+        if (isFalsy(donutData)) {
+            return [];
+        }
+
+        const dataWithName = donutData.map(data => ({
+            ...data,
+            name: data.label,
+        }));
+        return dataWithName;
+    });
+
     render() {
         const {
             className,
@@ -682,6 +699,10 @@ export default class Summary extends PureComponent {
             mostVulnerableChildrenVulnerabilityMarker,
         );
 
+        const healthNutritionWithName = this.getDonutDataWithName(healthNutrition);
+        const educationInvolvementWithName = this.getDonutDataWithName(educationInvolvement);
+        const childMonitoringVizDataWithName = this.getDonutDataWithName(childMonitoringVizData);
+
         const infoText = `The data below is
             aggregated from sponsorship
             management report from ${noOfProjects}
@@ -717,7 +738,14 @@ export default class Summary extends PureComponent {
                 <div className={styles.item}>
                     <h3>Health / Nutrition</h3>
                     <div className={styles.itemTableViz}>
-                        <DonutChart
+                        <DonutChartRecharts
+                            donutChartHeight={donutChartHeight}
+                            data={healthNutritionWithName}
+                            colorScheme={donutColor}
+                            className={styles.viz}
+                            donutChartWidth="50%"
+                        />
+                        {/* <DonutChart
                             className={styles.viz}
                             data={healthNutrition}
                             sideLengthRatio={0.2}
@@ -726,7 +754,7 @@ export default class Summary extends PureComponent {
                             labelSelector={Summary.labelSelector}
                             labelModifier={Summary.labelModifierSelector}
                             colorScheme={donutColor}
-                        />
+                        /> */}
                         <ListView
                             className={styles.table}
                             data={percentHealth}
@@ -739,7 +767,13 @@ export default class Summary extends PureComponent {
                 <div className={styles.item}>
                     <h3>Education</h3>
                     <div className={styles.itemTableViz}>
-                        <DonutChart
+                        <DonutChartRecharts
+                            donutChartHeight={donutChartHeight}
+                            data={educationInvolvementWithName}
+                            colorScheme={donutColor}
+                            donutChartWidth="50%"
+                        />
+                        {/* <DonutChart
                             className={styles.viz}
                             data={educationInvolvement}
                             sideLengthRatio={0.2}
@@ -748,7 +782,7 @@ export default class Summary extends PureComponent {
                             labelSelector={Summary.labelSelector}
                             labelModifier={Summary.labelModifierSelector}
                             colorScheme={donutColor}
-                        />
+                        /> */}
                         <ListView
                             className={styles.table}
                             data={educationValues}
@@ -756,12 +790,23 @@ export default class Summary extends PureComponent {
                             keySelector={Summary.tableKeySelector}
                             renderer={KeyValue}
                         />
+
                     </div>
                 </div>
                 <div className={styles.item}>
                     <h3>Child Monitoring Status</h3>
                     <div className={styles.itemTableViz}>
-                        <DonutChart
+                        <DonutChartRecharts
+                            donutChartHeight={donutChartHeight}
+                            data={childMonitoringVizDataWithName}
+                            colorScheme={[
+                                '#41cf76',
+                                '#ef8c00',
+                                '#f44336',
+                            ]}
+                            donutChartWidth="50%"
+                        />
+                        {/* <DonutChart
                             className={styles.viz}
                             data={childMonitoringVizData}
                             hideLabel
@@ -774,7 +819,7 @@ export default class Summary extends PureComponent {
                                 '#ef8c00',
                                 '#f44336',
                             ]}
-                        />
+                        /> */}
                         <ListView
                             className={styles.table}
                             data={percentChild}
diff --git a/client/src/views/Dashboard/Summary/styles.scss b/client/src/views/Dashboard/Summary/styles.scss
index 5552d4a..c6dd3f1 100644
--- a/client/src/views/Dashboard/Summary/styles.scss
+++ b/client/src/views/Dashboard/Summary/styles.scss
@@ -41,12 +41,15 @@
         border: var(--width-separator-thin) solid var(--color-separator);
         background-color: var(--color-foreground);
         width: calc(100% - 2 * var(--spacing-medium));
+        padding-top: var(--spacing-medium);
 
         h3 {
             padding: var(--spacing-small) var(--spacing-medium);
             text-transform: capitalize;
             color: var(--color-accent);
             font-weight: var(--font-weight-bold);
+            text-align: center;
+            margin-bottom: var(--spacing-medium);
         }
 
         .date {
@@ -90,8 +93,7 @@
             }
 
             .viz {
-                margin-left: -var(--spacing-medium);
-                width: 180px;
+                flex-grow: 0;
             }
 
             .success {
diff --git a/client/src/views/Dashboard/SummaryContainer/TrendSummary/index.js b/client/src/views/Dashboard/SummaryContainer/TrendSummary/index.js
index 8d68386..0340ba9 100644
--- a/client/src/views/Dashboard/SummaryContainer/TrendSummary/index.js
+++ b/client/src/views/Dashboard/SummaryContainer/TrendSummary/index.js
@@ -439,7 +439,6 @@ class TrendSummary extends React.PureComponent {
                             data={soiData}
                         />
                     )}
-                    {console.log('soiData---', soiData)}
                     {/* <GroupedBarChart
                         data={soiData}
                         groupSelector={groupSelector}
diff --git a/client/src/views/Report/index.js b/client/src/views/Report/index.js
index ae21562..860a523 100644
--- a/client/src/views/Report/index.js
+++ b/client/src/views/Report/index.js
@@ -38,7 +38,7 @@ import {
     triColorScheme,
 } from './report-utils';
 
-import DonutChartReCharts from './DonutChart';
+import DonutChartReCharts from '../CommonCharts/DonutChart';
 import HorizontalBarRecharts from './HorizontalBar';
 import GroupedBarChartRecharts from './GroupedBarChart';
 

From e01d9ba8743767b77f76bb90ab1b971643a94eaa Mon Sep 17 00:00:00 2001
From: EBS <bkshrawanbk@gmail.com>
Date: Wed, 2 Sep 2020 09:37:28 +0545
Subject: [PATCH 4/5] Validate recharts data

---
 client/src/views/CommonCharts/DonutChart/index.js   | 6 ++++--
 client/src/views/Dashboard/GroupedBarChart/index.js | 6 +++---
 client/src/views/Report/GroupedBarChart.js          | 3 ++-
 client/src/views/Report/HorizontalBar.js            | 3 ++-
 4 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/client/src/views/CommonCharts/DonutChart/index.js b/client/src/views/CommonCharts/DonutChart/index.js
index 262e74b..05d0ea5 100644
--- a/client/src/views/CommonCharts/DonutChart/index.js
+++ b/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.
diff --git a/client/src/views/Dashboard/GroupedBarChart/index.js b/client/src/views/Dashboard/GroupedBarChart/index.js
index 4db9537..9533401 100644
--- a/client/src/views/Dashboard/GroupedBarChart/index.js
+++ b/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>
         );
diff --git a/client/src/views/Report/GroupedBarChart.js b/client/src/views/Report/GroupedBarChart.js
index abfd544..c79c2f5 100644
--- a/client/src/views/Report/GroupedBarChart.js
+++ b/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>
         );
diff --git a/client/src/views/Report/HorizontalBar.js b/client/src/views/Report/HorizontalBar.js
index cb29251..0bf2f7d 100644
--- a/client/src/views/Report/HorizontalBar.js
+++ b/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.

From 61119e3c73cd40502c621156186e3e25b47cbef7 Mon Sep 17 00:00:00 2001
From: EBS <bkshrawanbk@gmail.com>
Date: Wed, 2 Sep 2020 15:52:12 +0545
Subject: [PATCH 5/5] Show line in BarCharts

---
 .../views/Dashboard/GroupedBarChart/index.js  | 24 +++++++++++++++----
 .../SummaryContainer/TrendSummary/index.js    |  2 ++
 2 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/client/src/views/Dashboard/GroupedBarChart/index.js b/client/src/views/Dashboard/GroupedBarChart/index.js
index 9533401..4d5c2ed 100644
--- a/client/src/views/Dashboard/GroupedBarChart/index.js
+++ b/client/src/views/Dashboard/GroupedBarChart/index.js
@@ -10,17 +10,18 @@ import {
     Tooltip,
     Legend,
     ResponsiveContainer,
+    ComposedChart,
+    Line,
 } from 'recharts';
 
 function CustomizedLabel(props) {
     const { x, y, width, value } = props;
-
     return (
         <text
-            x={x + width / 2.75}
+            x={x + width / 3}
             y={y}
             dy={-8}
-            fontSize={12}
+            fontSize={10}
         >
             {value}
         </text>
@@ -30,6 +31,7 @@ function CustomizedLabel(props) {
 export default function GroupedBarChart(props) {
     const {
         data,
+        lineKey,
     } = props;
 
     if (isNotDefined(data) || isNotDefined(data.values) || data.values.length <= 0) {
@@ -43,7 +45,7 @@ export default function GroupedBarChart(props) {
             height={250}
             width="100%"
         >
-            <BarChart
+            <ComposedChart
                 data={data.values}
                 margin={{ top: 50 }}
             >
@@ -57,13 +59,25 @@ export default function GroupedBarChart(props) {
                         key={column}
                         fill={data.colors[column]}
                         label={<CustomizedLabel />}
+                        style={{ cursor: 'pointer' }}
                     />
                 ))}
-            </BarChart>
+                {!!lineKey && (
+                    <Line
+                        dataKey={lineKey}
+                        stroke="#0591fb"
+                    />
+                )}
+            </ComposedChart>
         </ResponsiveContainer>
     );
 }
 
+GroupedBarChart.defaultProps = {
+    lineKey: '',
+};
+
 GroupedBarChart.propTypes = {
     data: PropTypes.object.isRequired,
+    lineKey: PropTypes.string,
 };
diff --git a/client/src/views/Dashboard/SummaryContainer/TrendSummary/index.js b/client/src/views/Dashboard/SummaryContainer/TrendSummary/index.js
index 0340ba9..cdd085d 100644
--- a/client/src/views/Dashboard/SummaryContainer/TrendSummary/index.js
+++ b/client/src/views/Dashboard/SummaryContainer/TrendSummary/index.js
@@ -335,6 +335,7 @@ class TrendSummary extends React.PureComponent {
                     {rcData.values.length > 0 && (
                         <GroupedBarChartRecharts
                             data={rcData}
+                            lineKey="Planned RC"
                         />
                     )}
                     {/* <GroupedBarChart
@@ -356,6 +357,7 @@ class TrendSummary extends React.PureComponent {
                     {childMonitoringData.values.length > 0 && (
                         <GroupedBarChartRecharts
                             data={childMonitoringData}
+                            lineKey="Not Sighted More than 90 Days"
                         />
                     )}
                     {/* <GroupedBarChart