SessionsRunningTimeChart update

public/locales/en/translations.json

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

public/locales/ro/translations.json

@@ -62,8 +62,8 @@
       "Sessions": {
         "RunningTime": {
           "Title": "Timp de rulare sesiuni",
-          "X": "Timp de rulare",
-          "Y": "Sesiuni"
+          "Session": "Sesiunea",
+          "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,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>
+        </>
       )}
     </>
   );

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