SessionsRunningTimeChart

master
Tudor Stanciu 2020-06-05 19:37:59 +03:00
parent 85e7cfeff5
commit e2a856a63c
5 changed files with 720 additions and 239 deletions

818
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -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"

View File

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

View File

@ -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;

View File

@ -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;