47 lines
1.2 KiB
TypeScript
47 lines
1.2 KiB
TypeScript
import { makeStyles, Typography } from "@material-ui/core";
|
|
import { formatDate } from "./utils";
|
|
|
|
const useStyles = makeStyles(() => ({
|
|
container: {
|
|
padding: "16px",
|
|
minWidth: "214px",
|
|
background: "rgba(255, 255, 255, 0.95)",
|
|
borderRadius: "4px",
|
|
},
|
|
titleText: {
|
|
color: "#21227E",
|
|
fontSize: "24px",
|
|
fontWeight: 500,
|
|
},
|
|
ruler: {
|
|
height: "3px",
|
|
backgroundImage: "linear-gradient(90deg, #F44B1B 0%, #EEB430 100%)",
|
|
},
|
|
valueText: {
|
|
color: "#404040",
|
|
fontSize: "18px",
|
|
fontWeight: 500,
|
|
},
|
|
}));
|
|
|
|
const CustomTooltip = ({ active, payload, title, valueFormatter }: any) => {
|
|
const classes = useStyles();
|
|
if (active && payload && payload.length) {
|
|
return (
|
|
<div className={classes.container}>
|
|
<Typography className={classes.titleText}>{title}</Typography>
|
|
<hr className={classes.ruler}></hr>
|
|
<Typography className={classes.valueText}>
|
|
{valueFormatter(payload[0].value)}
|
|
</Typography>
|
|
<Typography className={classes.valueText}>
|
|
{formatDate(payload[0].payload.date)}
|
|
</Typography>
|
|
</div>
|
|
);
|
|
}
|
|
return null;
|
|
};
|
|
|
|
export default CustomTooltip;
|