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": { "Sessions": {
"RunningTime": { "RunningTime": {
"Title": "Sessions running time", "Title": "Sessions running time",
"X": "Running time", "Session": "Session",
"Y": "Sessions" "X": "Running time"
} }
} }
} }

View File

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

View File

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

View File

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