Add Dashboard GroupedBarChart

Author: ShrawanBK

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,
+};

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>
         );