SessionsRunningTimeChart update

public/locales/en/translations.json

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

public/locales/ro/translations.json

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

src/features/charts/server/components/SessionsRunningTimeChart.js

@@ -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,25 +44,38 @@ const SessionsRunningTimeChart = ({ data }) => {
       {data.loading || !data.loaded ? (
         <Spinner />
       ) : (
-        <ResponsiveContainer width="100%" height={500}>
+        <>
-          <BarChart
+          <Grid container justify="center">
-            data={chartData}
+            <Grid item>
-            margin={{
+              <Typography gutterBottom variant="h5">
-              top: 5,
+                {t("Charts.Server.Sessions.RunningTime.Title")}
-              right: 30,
+              </Typography>
-              left: 20,
+            </Grid>
-              bottom: 5
+          </Grid>
-            }}
+          <ResponsiveContainer width="100%" height={500}>
-          >
+            <BarChart
-            <CartesianGrid strokeDasharray="3 3" />
+              data={chartData}
-            <XAxis dataKey="name" />
+              margin={{
-            <YAxis type="number" dataKey="value" name="stature" unit="h" />
+                top: 5,
-            <Tooltip content={<CustomTooltip />} />
+                right: 30,
-            <Legend />
+                left: 20,
+                bottom: 5
+              }}
+            >
+              <CartesianGrid strokeDasharray="3 3" />
+              <XAxis dataKey="name" />
+              <YAxis type="number" dataKey="value" name="stature" unit="h" />
+              <Tooltip content={<CustomTooltip />} />
+              <Legend />
 
-            <Bar dataKey="value" fill="#3f51b5" name="running time" />
+              <Bar
-          </BarChart>
+                dataKey="value"
-        </ResponsiveContainer>
+                fill="#3f51b5"
+                name={t("Charts.Server.Sessions.RunningTime.X")}
+              />
+            </BarChart>
+          </ResponsiveContainer>
+        </>
       )}
     </>
   );

src/features/charts/server/components/SessionsRunningTimeChartTooltip.js

@@ -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) => {