History

j 979e222e68 first commit		2024-10-23 17:52:59 +08:00
..
font	first commit	2024-10-23 17:52:59 +08:00
config.private.json	first commit	2024-10-23 17:52:59 +08:00
index.html	first commit	2024-10-23 17:52:59 +08:00
readme.md	first commit	2024-10-23 17:52:59 +08:00
sqlflow.css	first commit	2024-10-23 17:52:59 +08:00
sqlflow.js	first commit	2024-10-23 17:52:59 +08:00
sqlflow.js_get_start.html	first commit	2024-10-23 17:52:59 +08:00

readme.md

Embed the SQLFlow UI into your application

Get started

Firstly, download the sqlflow.js, css and font.

Secondly, create a new file, insert sqlflow.js and sqlflow.css in the head.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- use jquery, this is optional -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js" integrity="sha256-spTpc4lvj4dOkKjrGokIrHkJgNA0xMS98Pw9N7ir9oI=" crossorigin="anonymous"></script>
    <!-- insert sqlflow.js and sqlflow.css in the head -->
    <script type="text/javascript" src="sqlflow.js"></script>
    <link href="sqlflow.css" rel="stylesheet">
</head>
<body>
</body>
</html>

Lastly, create a root element, and create a SQLFlow instance on that element.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- use jquery, this is optional -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js" integrity="sha256-spTpc4lvj4dOkKjrGokIrHkJgNA0xMS98Pw9N7ir9oI=" crossorigin="anonymous"></script>
    <!-- insert sqlflow.js and sqlflow.css in the head -->
    <script type="text/javascript" src="sqlflow.js"></script>
    <link href="sqlflow.css" rel="stylesheet">
</head>
<body>
    <!-- create a root element -->
    <div id="app"></div>
</body>

<script>
    $(function () {
     // create an instance
    var sqlflow = new SQLFlow({
        el: document.getElementById("app"),
    });

     // set a dbvendor
    sqlflow.setDbvendor("oracle");

     // set sql text
    sqlflow.setSQLText("CREATE VIEW vsal \n" +
            "AS \n" +
            "  SELECT a.deptno                  \"Department\", \n" +
            "         a.num_emp / b.total_count \"Employees\", \n" +
            "         a.sal_sum / b.total_sal   \"Salary\" \n" +
            "  FROM   (SELECT deptno, \n" +
            "                 Count()  num_emp, \n" +
            "                 SUM(sal) sal_sum \n" +
            "          FROM   scott.emp \n" +
            "          WHERE  city = 'NYC' \n" +
            "          GROUP  BY deptno) a, \n" +
            "         (SELECT Count()  total_count, \n" +
            "                 SUM(sal) total_sal \n" +
            "          FROM   scott.emp \n" +
            "          WHERE  city = 'NYC') b \n" +
            ";\n" +
            "\n" +
            "INSERT ALL\n" +
            "\tWHEN ottl < 100000 THEN\n" +
            "\t\tINTO small_orders\n" +
            "\t\t\tVALUES(oid, ottl, sid, cid)\n" +
            "\tWHEN ottl > 100000 and ottl < 200000 THEN\n" +
            "\t\tINTO medium_orders\n" +
            "\t\t\tVALUES(oid, ottl, sid, cid)\n" +
            "\tWHEN ottl > 200000 THEN\n" +
            "\t\tinto large_orders\n" +
            "\t\t\tVALUES(oid, ottl, sid, cid)\n" +
            "\tWHEN ottl > 290000 THEN\n" +
            "\t\tINTO special_orders\n" +
            "SELECT o.order_id oid, o.customer_id cid, o.order_total ottl,\n" +
            "o.sales_rep_id sid, c.credit_limit cl, c.cust_email cem\n" +
            "FROM orders o, customers c\n" +
            "WHERE o.customer_id = c.customer_id;");

    // visualize it
    sqlflow.visualize();
    });
</script>
</html>

you can open this simple demo in browser.

Connect to your own SQLFlow backend server

Please modify config.private.json, so this sqlflowjs will connect to your own SQLFlow backend server.

Let's say the IP of your SQLFlow backend server is 192.168.100.50, set ApiPrefix like this:

    "ApiPrefix": "http://192.168.100.50:8083",

Please also change the token. You can find this token in the SQLFlow backend server, usually it is located under /wings/sqlflow/backend/user/yourname.json

    "Authorization": {
        "base64token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJhdWQiOiJndWR1c29mdCIsImV4cCI6MTYwMzc1NjgwMCwiaWF0IjoxNTcyMjIwODAwfQ.EhlnJO7oqAHdr0_bunhtrN-TgaGbARKvTh2URTxu9iU"
    },

SQLFlow.js api

you can open the complete demo in browser.

SQLFlow(options)

create a new instance

options:

{
	el: HTMLElement,
}

SQLFlow.setDbvendor( dbvendor : string )

set dbvendor of sql

default : "oracle"

SQLFlow.setSQLText( sqltext : string )

set sql

SQLFlow.visualize()

visualize relations

SQLFlow.visualizeJoin()

visualize join relations