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 React from "react";
import { makeStyles } from "@material-ui/styles";
import { Line } from "react-chartjs-2"; import { Line } from "react-chartjs-2";
import PropTypes from "prop-types";
const useStyles = makeStyles({});
const colors = [ const colors = [
"#1f77b4", "#1f77b4",
...@@ -14,7 +12,7 @@ const colors = [ ...@@ -14,7 +12,7 @@ const colors = [
"#e377c2", "#e377c2",
"#7f7f7f", "#7f7f7f",
"#bcbd22", "#bcbd22",
"#17becf" "#17becf",
]; ];
function PlotResult({ result }) { function PlotResult({ result }) {
...@@ -24,53 +22,81 @@ function PlotResult({ result }) { ...@@ -24,53 +22,81 @@ function PlotResult({ result }) {
) { ) {
return ( return (
<div> <div>
<br></br> <br />
Pour afficher les résultats sous forme graphique, vous devez préciser 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 'x' et 'y' dans le SELECT (pensez à utiliser un ORDER BY sur X). Vous
pouvez également préciser des catégories avec 'cat'. pouvez également préciser des catégories avec 'cat'.
<br></br> <br />
</div> </div>
); );
} }
if (!Object.keys(result[0]).includes("cat")) { 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 ( return (
<div> <div>
<Line <Line
data={{ data={{
labels: result.map(r => r.x), labels: X,
datasets: [ datasets: [
{ {
label: "y = f(x)", label: "y = f(x)",
backgroundColor: "rgb(255, 99, 132)", backgroundColor: "rgb(255, 99, 132)",
borderColor: "rgb(255, 99, 132)", borderColor: "rgb(255, 99, 132)",
data: result.map(r => r.y) data: X.map((x) => mapping.get(x)),
} },
] ],
}} }}
/> />
</div> </div>
); );
} }
const categories = [...new Set(result.map(el => el.cat))]; const categories = [...new Set(result.map((el) => el.cat))];
const datasets = categories.map((c, index) => ({
label: c, 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", fill: "disabled",
borderColor: colors[index % colors.length], 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 ( return (
<div> <div>
<Line <Line
data={{ data={{
labels: result.map(r => r.x), labels: X,
datasets datasets,
}} }}
/> />
</div> </div>
); );
} }
PlotResult.propTypes = {
result: PropTypes.array.isRequired,
};
export default PlotResult; 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