RequestSQLHandler.jsx 3.11 KB
Newer Older
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
import alasql from "alasql";
import React, { useState } from "react";
import Typography from "@material-ui/core/Typography";
import TextField from "@material-ui/core/TextField";
import Button from "@material-ui/core/Button";
import TableFromData from "./Table";
import { makeStyles } from "@material-ui/styles";

const data = [
  { a: 1, b: 1, c: 1 },
  { a: 1, b: 2, c: 1 },
  { a: 1, b: 3, c: 1 },
  { a: 2, b: 1, c: 1 }
];

/* SELECT a, COUNT(*) AS c FROM ? GROUP BY a
  SELECT a as x, COUNT(*) AS y FROM ? GROUP BY a */

const useStyles = makeStyles({});

function executeRequest(sqlRequest, data) {
  return alasql.promise(sqlRequest, [data]);
}

function plotResult(result) {
  console.log(result);

  // {/* <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]
  //       }
  //     ]
  //   }}
  // /> */}
}

function SqlRequestResult({ result }) {
  return (
    <div>
      <br></br>
      <TableFromData data={result} />
      <br></br>
      <Button
        variant="outlined"
        color={"secondary"}
        onClick={() => {
          alasql(
            'SELECT * INTO CSV("export_rex_dri.csv", {headers:true}) FROM ?',
            [result]
          );
        }}
      >
        Exporter en CSV
      </Button>
      <Button
        variant="outlined"
        color={"secondary"}
        onClick={() => {
          plotResult(result);
        }}
      >
        Afficher les résultats graphiquement
      </Button>
    </div>
  );
}

function SqlInterface() {
  const classes = useStyles();
  const [sqlRequest, setSqlRequest] = useState("");
  const [requestError, setRequestError] = useState("");
  const [requestResult, setRequestResult] = useState([]);
  return (
    <div>
      <TextField
        id="standard-multiline-static"
        label="Requête d'exploration"
        multiline
        fullWidth
        margin="normal"
        rows={5}
        placeholder="Entrez la requête SQL"
        value={sqlRequest}
        onChange={event => setSqlRequest(event.target.value)}
      />
      {requestError !== "" && (
        <>
          <br></br>
          <Typography variant="caption">{requestError.toString()}</Typography>
          <br></br>
        </>
      )}
      <Button
        variant="contained"
        color={"primary"}
        className={classes.button}
        onClick={() => {
          setRequestError("");
          setRequestResult([]);
          executeRequest(sqlRequest, data)
            .then(res => {
              setRequestResult(res);
            })
            .catch(err => {
              setRequestError(err);
            });
          console.log(btoa(sqlRequest));
        }}
      >
        Exécuter
      </Button>
      {requestResult.length !== 0 && (
        <SqlRequestResult result={requestResult} />
      )}
    </div>
  );
}

export default SqlInterface;