Show line in BarCharts

toggle-corp · Sep 8, 2020 · 61119e3 · 61119e3
1 parent e01d9ba
commit 61119e3
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 5 deletions.
diff --git 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
@@ -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