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

feat(stats): Creation of a plot

parent ffdb5939
......@@ -5,11 +5,16 @@ import TextField from "@material-ui/core/TextField";
import Button from "@material-ui/core/Button";
import TableFromData from "./Table";
import { makeStyles } from "@material-ui/styles";
import { Line } from "react-chartjs-2";
const data = [
{ a: 1, b: 1, c: 1 },
{ a: 1, b: 2, c: 1 },
{ a: 4, b: 2, c: 1 },
{ a: 1, b: 3, c: 1 },
{ a: 3, b: 4, c: 5 },
{ a: 2, b: 3, c: 2 },
{ a: 1, b: 3, c: 1 },
{ a: 4, b: 3, c: 3 },
{ a: 2, b: 1, c: 1 }
];
......@@ -22,33 +27,37 @@ function executeRequest(sqlRequest, data) {
return alasql.promise(sqlRequest, [data]);
}
function plotResult(result) {
console.log(result);
function PlotResult({ result }) {
result.sort((a, b) => Object.values(a) > Object.values(b));
// {/* <Line
// data={{
// labels: [
// "January",
// "February",
// "March",
// "April",
// "May",
// "June",
// "July"
// ],
// datasets: [
// {
// label: "My First dataset",
// backgroundColor: "rgb(255, 99, 132)",
// borderColor: "rgb(255, 99, 132)",
// data: [0, 10, 5, 2, 20, 30, 45]
// }
// ]
// }}
// /> */}
if (
!Object.keys(result[0]).includes("x") ||
!Object.keys(result[0]).includes("y")
) {
return <div>Erreur : Vous devez préciser x et y. </div>;
}
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)
}
]
}}
/>
</div>
);
}
function SqlRequestResult({ result }) {
const [resultToPlot, setResultToPlot] = useState([]);
return (
<div>
<br></br>
......@@ -70,11 +79,12 @@ function SqlRequestResult({ result }) {
variant="outlined"
color={"secondary"}
onClick={() => {
plotResult(result);
setResultToPlot(result);
}}
>
Afficher les résultats graphiquement
</Button>
{resultToPlot.length !== 0 && <PlotResult result={resultToPlot} />}
</div>
);
}
......@@ -118,7 +128,7 @@ function SqlInterface() {
.catch(err => {
setRequestError(err);
});
console.log(btoa(sqlRequest));
console.log(btoa(sqlRequest)); //pour encodage de l'url
}}
>
Exécuter
......
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