Fix #10 - Merge pull request #30 from SahanAmarsha/master

Chart Tooltip fixed

app/src/Widget/Widgets/Chart/Chart.js

@@ -13,6 +13,8 @@ import {
   Tooltip,
 } from 'recharts';
 
+import CustomTooltip from './ChartTooltip';
+
 const ChartIEPG = (props) => {
   const { graph, dies, indexValues} = props;
   const data = React.useMemo(
@@ -24,16 +26,16 @@ const ChartIEPG = (props) => {
     <ResponsiveContainer width='100%' height={350}>
       <LineChart data={data} margin={{ bottom: 20, right: 10, left: 0 }} syncId="charts">
         <Line type="monotone" dataKey="v" dot={null} name={ graph.data[0].label } stroke="#000000" strokeWidth={2} />
-     
+
         <ReferenceLine y={ 30} stroke="#0f0" strokeDasharray="3 3" />
         <ReferenceLine y={ 70} stroke="#ff0" strokeDasharray="3 3" />
         <ReferenceLine y={100} stroke="#f00" strokeDasharray="3 3" />
         <ReferenceLine x={dies[indexValues]} label={`${data[indexValues].v}`} stroke="#777" strokeDasharray="3 3" />
-     
+
         <CartesianGrid stroke="#ccc" />
         <XAxis dataKey="x" angle={-30} dx={-5} dy={15} />
         <YAxis />
-        <Tooltip />
+        <Tooltip content={<CustomTooltip/>} />
       </LineChart>
     </ResponsiveContainer>
   )
@@ -86,7 +88,7 @@ const ChartExtensio = (props) => {
         <CartesianGrid stroke="#ccc" />
         <XAxis dataKey="x" angle={-30} dx={-5} dy={15} />
         <YAxis />
-        <Tooltip />
+        <Tooltip content={<CustomTooltip/>} />
       </ComposedChart>
     </ResponsiveContainer>
   )

app/src/Widget/Widgets/Chart/ChartTooltip.jsx

@@ -0,0 +1,72 @@
+import React from 'react';
+
+import makeStyles from "@material-ui/core/styles/makeStyles";
+
+const useStyles = makeStyles( theme => ({
+  tooltip: {
+    backgroundColor: theme.palette.background.default,
+    borderWidth: 1,
+    borderStyle: 'solid',
+    borderColor: theme.palette.text.hint,
+    ...theme.shape,
+    fontFamily: theme.typography.fontFamily,
+    fontSize: theme.typography.fontSize,
+    padding: theme.spacing(1),
+  },
+  label: {
+    ...theme.typography.subtitle1,
+  },
+  list: {
+    listStyleType: 'none',
+    margin: 0,
+    padding: 0,
+  },
+  element: {
+    lineHeight: `${theme.spacing(2.2)}px`,
+    display: 'flex',
+    margin: `${theme.spacing(.5)}px 0`,
+    justifyContent: 'flex-start',
+  },
+  box: {
+    display: "inline-block",
+    width: theme.spacing(2),
+    height: theme.spacing(2),
+    padding: 0,
+    marginRight: theme.spacing(1),
+    borderWidth: 1,
+    borderStyle: 'solid',
+    borderColor: theme.palette.text.hint,
+  },
+  data: {
+    margin: 0,
+    padding: 0,
+  },
+}));
+
+const Box = (props) => {
+  const classes = useStyles();
+  return <div className={ classes.box } style={{ backgroundColor: props.color }} />;
+}
+
+const TooltipElement = (props) => {
+  const classes = useStyles();
+  return <li className={ classes.element }><Box color={ props.color } />{ props.name }: { props.value }</li>;
+}
+
+const CustomTooltip = ({active, payload, label}) => {
+  const classes = useStyles();
+  if (active) {
+    return (
+      <div className={ classes.tooltip }>
+        <p className={ classes.label }>{ label }</p>
+        <ul className={ classes.list }>
+          { payload.map( (pl, index) => <TooltipElement key={ index } { ...pl }/> )}
+        </ul>
+      </div>
+    );
+  }
+
+  return null;
+}
+
+export default CustomTooltip;