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