SessionsRunningTimeChart

package.json

@@ -28,6 +28,7 @@
     "react-i18next": "^11.4.0",
     "react-redux": "6.0.1",
     "react-router-dom": "5.0.0",
+    "recharts": "^1.8.5",
     "redux": "4.0.1",
     "redux-thunk": "2.3.0",
     "reselect": "4.0.0"
@@ -57,9 +58,9 @@
     "rimraf": "2.6.3",
     "style-loader": "0.23.1",
     "webpack": "^4.43.0",
-    "webpack-bundle-analyzer": "3.1.0",
-    "webpack-cli": "3.3.0",
-    "webpack-dev-server": "3.2.1"
+    "webpack-bundle-analyzer": "^3.8.0",
+    "webpack-cli": "^3.3.11",
+    "webpack-dev-server": "^3.11.0"
   },
   "engines": {
     "node": ">=8"

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

@@ -19,7 +19,7 @@ const ServerChartsContainer = ({ actions, sessionRunningTime }) => {
 
 ServerChartsContainer.propTypes = {
   actions: PropTypes.object.isRequired,
-  sessionRunningTime: PropTypes.object.isRequired
+  sessionRunningTime: PropTypes.array.isRequired
 };
 
 function mapStateToProps(state) {

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

@@ -1,17 +1,74 @@
 import React from "react";
 import PropTypes from "prop-types";
 import { useTranslation } from "react-i18next";
-
 import Spinner from "../../../../components/common/Spinner";
+import {
+  BarChart,
+  Bar,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  Legend,
+  ResponsiveContainer
+} from "recharts";
+
+import SessionsRunningTimeChartTooltip from "./SessionsRunningTimeChartTooltip";
 
 const SessionsRunningTimeChart = ({ data }) => {
   const { t } = useTranslation();
 
-  return <>{data.loading || !data.loaded ? <Spinner /> : <div>TEST</div>}</>;
+  const chartData = data.map((z) => {
+    return {
+      sessionId: z.sessionId,
+      name: `S${z.orderNo}`,
+      order: z.orderNo,
+      value: z.runningTime.hours,
+      label: z.runningTime.label
+    };
+  });
+
+  const CustomTooltip = ({ active, payload }) => {
+    if (!active) return null;
+    return <SessionsRunningTimeChartTooltip payload={payload[0].payload} />;
+  };
+
+  CustomTooltip.propTypes = {
+    active: PropTypes.bool.isRequired,
+    payload: PropTypes.object
+  };
+
+  return (
+    <>
+      {data.loading || !data.loaded ? (
+        <Spinner />
+      ) : (
+        <ResponsiveContainer width="100%" height={500}>
+          <BarChart
+            data={chartData}
+            margin={{
+              top: 5,
+              right: 30,
+              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" />
+          </BarChart>
+        </ResponsiveContainer>
+      )}
+    </>
+  );
 };
 
 SessionsRunningTimeChart.propTypes = {
-  data: PropTypes.object.isRequired
+  data: PropTypes.array.isRequired
 };
 
 export default SessionsRunningTimeChart;

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

@@ -0,0 +1,69 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { makeStyles } from "@material-ui/core/styles";
+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";
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    width: "100%",
+    maxWidth: 360,
+    backgroundColor: theme.palette.background.paper
+  },
+  chip: {
+    margin: theme.spacing(0.5)
+  },
+  section1: {
+    margin: theme.spacing(0, 1)
+  },
+  section2: {
+    margin: theme.spacing(1)
+  }
+}));
+
+const SessionsRunningTimeChartTooltip = ({ payload }) => {
+  const classes = useStyles();
+
+  return (
+    <div className={classes.root}>
+      <div className={classes.section1}>
+        <Grid container alignItems="center">
+          <Grid item xs>
+            <Typography gutterBottom variant="h6">
+              {`Session ${payload.order}`}
+            </Typography>
+          </Grid>
+        </Grid>
+        <Typography color="textSecondary" variant="body2">
+          {`id: ${payload.sessionId}`}
+        </Typography>
+      </div>
+      <Divider variant="middle" />
+      <div className={classes.section2}>
+        <Typography gutterBottom variant="body2">
+          Running time
+        </Typography>
+        <div>
+          {payload.label.split(" ").map((s) => {
+            return (
+              <Chip
+                key={s}
+                className={classes.chip}
+                color="primary"
+                label={s}
+              />
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+SessionsRunningTimeChartTooltip.propTypes = {
+  payload: PropTypes.object.isRequired
+};
+
+export default SessionsRunningTimeChartTooltip;