Unverified Commit 122f9e36 authored by Estelle Veisemburger's avatar Estelle Veisemburger Committed by Florent Chehab

feat(plot): the plot appears automatically if x and y are specified

parent f07e6c19
import React, { useState, useEffect } from "react";
import { makeStyles } from "@material-ui/styles";
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
if (
!Object.keys(result[0]).includes("x") ||
!Object.keys(result[0]).includes("y")
) {
return (
<div>
<br></br>
Pour afficher les résultats sous forme graphique, vous devez préciser x
et y.
<br></br>
</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>
);
}
export default PlotResult;
......@@ -5,7 +5,7 @@ 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";
import PlotResult from "./Plot";
const cols = Object.keys(__StatsData);
const data = [];
......@@ -23,41 +23,12 @@ function executeRequest(sqlRequest, data) {
return alasql.promise(sqlRequest, [data]);
}
function PlotResult({ result }) {
result.sort((a, b) => Object.values(a) > Object.values(b)); //demander à l'utilisateur de faire un order by
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>
<TableFromData data={result} />
<PlotResult result={result} />
<br></br>
<Button
variant="outlined"
......@@ -71,16 +42,6 @@ function SqlRequestResult({ result }) {
>
Exporter en CSV
</Button>
<Button
variant="outlined"
color={"secondary"}
onClick={() => {
setResultToPlot(result);
}}
>
Afficher les résultats graphiquement
</Button>
{resultToPlot.length !== 0 && <PlotResult result={resultToPlot} />}
</div>
);
}
......@@ -114,7 +75,7 @@ function getRequestFromUrl() {
function setRequestInUrl(request) {
const requestInfo = {
request,
version: 1.0,
version: 1.0
};
const requestInfoAsString = btoa(JSON.stringify(requestInfo));
......@@ -149,7 +110,7 @@ function SqlInterface() {
rows={5}
placeholder="Entrez la requête SQL"
value={sqlRequest}
onChange={(event) => setSqlRequest(event.target.value)}
onChange={event => setSqlRequest(event.target.value)}
/>
{requestError !== "" && (
<>
......@@ -166,10 +127,10 @@ function SqlInterface() {
setRequestError("");
setRequestResult([]);
executeRequest(sqlRequest, data)
.then((res) => {
.then(res => {
setRequestResult(res);
})
.catch((err) => {
.catch(err => {
setRequestError(err);
});
}}
......
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