Unverified Commit 7db30bd5 authored by Florent Chehab's avatar Florent Chehab
Browse files

fix(front): stats plot

* Enforce X
parent fc9a9fd4
import React, { useState, useEffect } from "react";
import { makeStyles } from "@material-ui/styles";
import React from "react";
import { Line } from "react-chartjs-2";
const useStyles = makeStyles({});
import PropTypes from "prop-types";
const colors = [
"#1f77b4",
......@@ -14,7 +12,7 @@ const colors = [
"#e377c2",
"#7f7f7f",
"#bcbd22",
"#17becf"
"#17becf",
];
function PlotResult({ result }) {
......@@ -24,53 +22,81 @@ function PlotResult({ result }) {
) {
return (
<div>
<br></br>
<br />
Pour afficher les résultats sous forme graphique, vous devez préciser
'x' et 'y' dans le SELECT (pensez à utiliser un ORDER BY sur X). Vous
pouvez également préciser des catégories avec 'cat'.
<br></br>
<br />
</div>
);
}
if (!Object.keys(result[0]).includes("cat")) {
const mapping = new Map();
result.forEach(({ x, y }) => {
mapping.set(x, y);
});
const X = [...mapping.keys()];
X.sort();
return (
<div>
<Line
data={{
labels: result.map(r => r.x),
labels: X,
datasets: [
{
label: "y = f(x)",
backgroundColor: "rgb(255, 99, 132)",
borderColor: "rgb(255, 99, 132)",
data: result.map(r => r.y)
}
]
data: X.map((x) => mapping.get(x)),
},
],
}}
/>
</div>
);
}
const categories = [...new Set(result.map(el => el.cat))];
const datasets = categories.map((c, index) => ({
label: c,
const categories = [...new Set(result.map((el) => el.cat))];
const mapping = new Map();
result.forEach(({ x, y, cat }) => {
if (!mapping.has(x)) {
mapping.set(x, new Map());
}
mapping.get(x).set(cat, y);
});
const X = [...mapping.keys()];
X.sort();
const datasets = categories.map((cat, index) => ({
label: cat,
fill: "disabled",
borderColor: colors[index % colors.length],
data: result.map(r => (r.cat === c ? r.y : 0))
data: X.map((x) => {
const val = mapping.get(x).get(cat);
return typeof val !== "undefined" ? val : 0;
}),
}));
return (
<div>
<Line
data={{
labels: result.map(r => r.x),
datasets
labels: X,
datasets,
}}
/>
</div>
);
}
PlotResult.propTypes = {
result: PropTypes.array.isRequired,
};
export default PlotResult;
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment