Unverified Commit 1f98822c authored by Estelle Veisemburger's avatar Estelle Veisemburger Committed by Florent Chehab
Browse files

feat(plot): the plot can be divided into different categories

parent 55023dac
......@@ -4,9 +4,20 @@ import { Line } from "react-chartjs-2";
const useStyles = makeStyles({});
function PlotResult({ result }) {
result.sort((a, b) => Object.values(a) > Object.values(b)); //demander à l'utilisateur de faire un order by
const colors = [
"#1f77b4",
"#ff7f0e",
"#2ca02c",
"#d62728",
"#9467bd",
"#8c564b",
"#e377c2",
"#7f7f7f",
"#bcbd22",
"#17becf"
];
function PlotResult({ result }) {
if (
!Object.keys(result[0]).includes("x") ||
!Object.keys(result[0]).includes("y")
......@@ -14,25 +25,48 @@ function PlotResult({ result }) {
return (
<div>
<br></br>
Pour afficher les résultats sous forme graphique, vous devez préciser x
et y.
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>
</div>
);
}
if (!Object.keys(result[0]).includes("cat")) {
return (
<div>
<Line
data={{
labels: result.map(r => r.x),
datasets: [
{
label: "y = f(x)",
backgroundColor: "rgb(255, 99, 132)",
borderColor: "rgb(255, 99, 132)",
data: result.map(r => r.y)
}
]
}}
/>
</div>
);
}
const categories = [...new Set(result.map(el => el.cat))];
const datasets = categories.map((c, index) => ({
label: c,
fill: "disabled",
borderColor: colors[index % colors.length],
data: result.map(r => (r.cat === c ? r.y : 0))
}));
return (
<div>
<Line
data={{
labels: result.map(r => r.x),
datasets: [
{
label: "My First dataset", //séparer par cat
backgroundColor: "rgb(255, 99, 132)",
borderColor: "rgb(255, 99, 132)",
data: result.map(r => r.y)
}
]
datasets
}}
/>
</div>
......
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