222 lines
6.4 KiB
HTML
222 lines
6.4 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>SQLFlow: Visualize column impact and data lineage to track columns across transformations by analyzing SQL query.</title>
|
||
<meta name="description" content="SQLFlow: Visualize column impact and data lineage to track columns across transformations by analyzing SQL query. supported databases: bigquery, couchbase, dax, db2, greenplum, hana, hive, impala, informix, mdx, mysql, netezza, openedge, oracle, postgresql, redshift, snowflake, sqlserver, sybase, teradata, vertica">
|
||
<meta name="keywords" content="Analyzing SQL script, table, column, impact, data lineage, bigquery, couchbase, dax, db2, greenplum, hana, hive, impala, informix, mdx, mysql, netezza, openedge, oracle, postgresql, redshift, snowflake, sqlserver, sybase, teradata, vertica">
|
||
<meta name="author" content="Gudu Software">
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js" integrity="sha256-spTpc4lvj4dOkKjrGokIrHkJgNA0xMS98Pw9N7ir9oI=" crossorigin="anonymous"></script>
|
||
|
||
<style>
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
html {
|
||
height: 100%;
|
||
}
|
||
|
||
body {
|
||
font-family: Arial, sans-serif;
|
||
height: 100%;
|
||
-webkit-font-smoothing: antialiased;
|
||
}
|
||
|
||
button{
|
||
padding: 2px 4px;
|
||
}
|
||
|
||
#left{
|
||
float: left;
|
||
width: 40%;
|
||
height: 100%;
|
||
padding:0 30px
|
||
}
|
||
textarea{
|
||
display: block;
|
||
height: 300px;
|
||
width: 100%;
|
||
}
|
||
|
||
#app{
|
||
float: right;
|
||
width: 60%;
|
||
height: 100%;
|
||
position: relative;
|
||
overflow: auto;
|
||
background: #eee;
|
||
}
|
||
|
||
.operation, #setting{
|
||
margin-top: 20px;
|
||
}
|
||
</style>
|
||
|
||
<link href="sqlflow.css" rel="stylesheet"></head>
|
||
<body>
|
||
<div id="left">
|
||
<label for="sqltext">sql：</label>
|
||
<textarea id="sqltext">
|
||
CREATE VIEW vsal
|
||
AS
|
||
SELECT a.deptno "Department",
|
||
a.num_emp / b.total_count "Employees",
|
||
a.sal_sum / b.total_sal "Salary"
|
||
FROM (SELECT deptno,
|
||
Count() num_emp,
|
||
SUM(sal) sal_sum
|
||
FROM scott.emp
|
||
WHERE city = 'NYC'
|
||
GROUP BY deptno) a,
|
||
(SELECT Count() total_count,
|
||
SUM(sal) total_sal
|
||
FROM scott.emp
|
||
WHERE city = 'NYC') b
|
||
;
|
||
|
||
INSERT ALL
|
||
WHEN ottl < 100000 THEN
|
||
INTO small_orders
|
||
VALUES(oid, ottl, sid, cid)
|
||
WHEN ottl > 100000 and ottl < 200000 THEN
|
||
INTO medium_orders
|
||
VALUES(oid, ottl, sid, cid)
|
||
WHEN ottl > 200000 THEN
|
||
into large_orders
|
||
VALUES(oid, ottl, sid, cid)
|
||
WHEN ottl > 290000 THEN
|
||
INTO special_orders
|
||
SELECT o.order_id oid, o.customer_id cid, o.order_total ottl,
|
||
o.sales_rep_id sid, c.credit_limit cl, c.cust_email cem
|
||
FROM orders o, customers c
|
||
WHERE o.customer_id = c.customer_id;
|
||
</textarea>
|
||
<div class="operation">
|
||
<label for="dbvendor">dbvendor : </label>
|
||
<select id="dbvendor">
|
||
<option value="bigquery">bigquery</option>
|
||
<option value="couchbase">couchbase</option>
|
||
<option value="db2">db2</option>
|
||
<option value="greenplum">greenplum</option>
|
||
<option value="hana">hana</option>
|
||
<option value="hive">hive</option>
|
||
<option value="impala">impala</option>
|
||
<option value="informix">informix</option>
|
||
<option value="mysql">mysql</option>
|
||
<option value="mssql">mssql</option>
|
||
<option value="netezza">netezza</option>
|
||
<option value="openedge">openedge</option>
|
||
<option value="oracle">oracle</option>
|
||
<option value="postgresql">postgresql</option>
|
||
<option value="redshift">redshift</option>
|
||
<option value="snowflake">snowflake</option>
|
||
<option value="sybase">sybase</option>
|
||
<option value="teradata">teradata</option>
|
||
<option value="vertica">vertica</option>
|
||
</select>
|
||
<button id="visualize">visualize</button>
|
||
<button id="visualize_join">visualize join</button>
|
||
</div>
|
||
<div class="operation">
|
||
<label>setting : </label>
|
||
<button id="hide_all_columns">hide all columns</button>
|
||
<button id="dataflow">dataflow</button>
|
||
<button id="impact">impact</button>
|
||
<button id="show_intermediate_recordset">show intermediate recordset</button>
|
||
<button id="show_function">show function</button>
|
||
</div>
|
||
<div id="setting">
|
||
<p></p>
|
||
<p></p>
|
||
<p></p>
|
||
<p></p>
|
||
<p></p>
|
||
</div>
|
||
</div>
|
||
<div id="app"></div>
|
||
<script type="text/javascript" src="sqlflow.js"></script></body>
|
||
|
||
<script>
|
||
$(function () {
|
||
var sqlflow = new SQLFlow({
|
||
el: document.getElementById("app"),
|
||
});
|
||
|
||
var $sqltext = $("#sqltext");
|
||
var $dbvendor = $("#dbvendor");
|
||
var $visualize = $("#visualize");
|
||
var $visualizeJoin = $("#visualize_join");
|
||
var $hide_all_columns = $("#hide_all_columns");
|
||
var $dataflow = $("#dataflow");
|
||
var $impact = $("#impact");
|
||
var $show_intermediate_recordset = $("#show_intermediate_recordset");
|
||
var $show_functiont = $("#show_function");
|
||
var $setting = $("#setting");
|
||
|
||
$dbvendor.val("oracle");
|
||
sqlflow.setSQLText($sqltext.val());
|
||
sqlflow.setDbvendor($dbvendor.val());
|
||
|
||
$visualize.on("click",function () {
|
||
sqlflow.visualize();
|
||
});
|
||
|
||
$visualizeJoin.on("click",function () {
|
||
sqlflow.visualizeJoin();
|
||
});
|
||
|
||
$sqltext.on("change",function () {
|
||
sqlflow.setSQLText($sqltext.val());
|
||
});
|
||
|
||
$dbvendor.on("change",function () {
|
||
sqlflow.setDbvendor($dbvendor.val());
|
||
});
|
||
|
||
$hide_all_columns.on("click",function () {
|
||
sqlflow.setHideAllColumns(!sqlflow.setting.hideAllColumns);
|
||
show_setting();
|
||
});
|
||
|
||
$dataflow.on("click",function () {
|
||
sqlflow.setDataflow(!sqlflow.setting.dataflow);
|
||
show_setting();
|
||
});
|
||
|
||
$impact.on("click",function () {
|
||
sqlflow.setImpact(!sqlflow.setting.impact);
|
||
show_setting();
|
||
});
|
||
|
||
$show_intermediate_recordset.on("click",function () {
|
||
sqlflow.setShowIntermediateRecordset(!sqlflow.setting.showIntermediateRecordset);
|
||
show_setting();
|
||
});
|
||
|
||
$show_intermediate_recordset.on("click",function () {
|
||
sqlflow.setShowIntermediateRecordset(!sqlflow.setting.showIntermediateRecordset);
|
||
show_setting();
|
||
});
|
||
|
||
$show_functiont.on("click",function () {
|
||
sqlflow.setShowFunction(!sqlflow.setting.showFunction);
|
||
show_setting();
|
||
});
|
||
|
||
function show_setting() {
|
||
$setting.find("p").eq(0).text("hideAllColumns : " + sqlflow.setting.hideAllColumns);
|
||
$setting.find("p").eq(1).text("dataflow : " + sqlflow.setting.dataflow);
|
||
$setting.find("p").eq(2).text("impact : " + sqlflow.setting.impact);
|
||
$setting.find("p").eq(3).text("showIntermediateRecordset : " + sqlflow.setting.showIntermediateRecordset);
|
||
$setting.find("p").eq(4).text("showFunction : " + sqlflow.setting.showFunction);
|
||
}
|
||
|
||
show_setting();
|
||
});
|
||
</script>
|
||
</html>
|