SessionsRunningTimeChart update

master
Tudor Stanciu 2020-06-05 19:53:56 +03:00
parent e2a856a63c
commit 42b207d2a3
4 changed files with 47 additions and 26 deletions

View File

@ -71,8 +71,8 @@
"Sessions": {
"RunningTime": {
"Title": "Sessions running time",
"X": "Running time",
"Y": "Sessions"
"Session": "Session",
"X": "Running time"
}
}
}

View File

@ -62,8 +62,8 @@
"Sessions": {
"RunningTime": {
"Title": "Timp de rulare sesiuni",
"X": "Timp de rulare",
"Y": "Sesiuni"
"Session": "Sesiunea",
"X": "Timp de rulare"
}
}
}

View File

@ -12,7 +12,8 @@ import {
Legend,
ResponsiveContainer
} from "recharts";
import Typography from "@material-ui/core/Typography";
import Grid from "@material-ui/core/Grid";
import SessionsRunningTimeChartTooltip from "./SessionsRunningTimeChartTooltip";
const SessionsRunningTimeChart = ({ data }) => {
@ -43,6 +44,14 @@ const SessionsRunningTimeChart = ({ data }) => {
{data.loading || !data.loaded ? (
<Spinner />
) : (
<>
<Grid container justify="center">
<Grid item>
<Typography gutterBottom variant="h5">
{t("Charts.Server.Sessions.RunningTime.Title")}
</Typography>
</Grid>
</Grid>
<ResponsiveContainer width="100%" height={500}>
<BarChart
data={chartData}
@ -59,9 +68,14 @@ const SessionsRunningTimeChart = ({ data }) => {
<Tooltip content={<CustomTooltip />} />
<Legend />
<Bar dataKey="value" fill="#3f51b5" name="running time" />
<Bar
dataKey="value"
fill="#3f51b5"
name={t("Charts.Server.Sessions.RunningTime.X")}
/>
</BarChart>
</ResponsiveContainer>
</>
)}
</>
);

View File

@ -5,12 +5,16 @@ import Chip from "@material-ui/core/Chip";
import Grid from "@material-ui/core/Grid";
import Divider from "@material-ui/core/Divider";
import Typography from "@material-ui/core/Typography";
import { useTranslation } from "react-i18next";
const useStyles = makeStyles((theme) => ({
root: {
width: "100%",
maxWidth: 360,
backgroundColor: theme.palette.background.paper
backgroundColor: theme.palette.background.paper,
borderStyle: "solid",
borderWidth: "1px",
borderColor: theme.palette.primary.main
},
chip: {
margin: theme.spacing(0.5)
@ -25,6 +29,7 @@ const useStyles = makeStyles((theme) => ({
const SessionsRunningTimeChartTooltip = ({ payload }) => {
const classes = useStyles();
const { t } = useTranslation();
return (
<div className={classes.root}>
@ -32,7 +37,9 @@ const SessionsRunningTimeChartTooltip = ({ payload }) => {
<Grid container alignItems="center">
<Grid item xs>
<Typography gutterBottom variant="h6">
{`Session ${payload.order}`}
{`${t("Charts.Server.Sessions.RunningTime.Session")} ${
payload.order
}`}
</Typography>
</Grid>
</Grid>
@ -43,7 +50,7 @@ const SessionsRunningTimeChartTooltip = ({ payload }) => {
<Divider variant="middle" />
<div className={classes.section2}>
<Typography gutterBottom variant="body2">
Running time
{t("Charts.Server.Sessions.RunningTime.X")}
</Typography>
<div>
{payload.label.split(" ").map((s) => {