sasjs/adapter
1
0
Fork 0
mirror of https://github.com/sasjs/adapter.git synced 2025-12-11 01:14:36 +00:00
Code Issues Projects Releases Wiki Activity

feat(*): recreate package with new name

Browse Source
This commit is contained in:
Krishna Acondy
2020-07-07 19:53:35 +01:00
commit 066f953863
150 changed files with 48625 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

107
example.html Normal file
View File

@@ -0,0 +1,107 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" http-equiv="X-UA-Compatible" content="IE=edge" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/combine/npm/chart.js@2.9.3,npm/jquery@3.5.1,npm/sasjs@2.11.0"></script>
<script>
var sasJs = new SASjs.default({appLoc: "/Products/demo/readme"
,serverType:"SAS9", debug: "false"
});
function initSasJs() {
$('#loading-spinner').show()
// instantiate sasjs with options such as backend app location
// login (it's also possible to set an autologin when making requests)
sasJs.logIn(
$('#username')[0].value
,$('#password')[0].value
).then((response) => {
if (response.isLoggedIn === true) {
$('#loading-spinner').hide()
$('.login').hide()
$('#getdata').show()
$('#cars').show()
}
})
}
function getData(){
$('#loading-spinner').show()
$('#myChart').remove();
$('#chart-container').append('<canvas id="myChart" style="display: none;"></canvas>')
// make a request to a SAS service
var type = $("#cars")[0].options[$("#cars")[0].selectedIndex].value;
// request data from an endpoint under your appLoc
sasJs.request("/common/getdata", {
// send data as an array of objects - each object is one row
fromjs: [{ type: type }]
}).then((response) => {
$('#myChart').show();
var labels = []
var data = []
response.areas.map((d) => {
labels.push(d.MAKE);
data.push(d.AVPRICE);
})
$('#loading-spinner').hide()
initGraph(labels, data, type);
})
}
function initGraph(labels, data, type){
var myCanvas = document.getElementById("myChart");
var ctx = myCanvas.getContext("2d");
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: labels,
datasets: [{
label: "Average Invoice Price in USD for " + type + " Cars by Manufacturer",
data: data,
backgroundColor: "rgba(255,99,132,0.2)",
borderColor: "rgba(255,99,132,1)",
borderWidth: 1,
hoverBackgroundColor: "rgba(255,99,132,0.4)",
hoverBorderColor: "rgba(255,99,132,1)",
}]
},
options: {
maintainAspectRatio: false,
scales: {yAxes: [{ticks: {beginAtZero: true}}]}
}
});
}
</script>
</head>
<body>
<div class="container-fluid" style="text-align: center; margin-top: 10px;">
<div class="row">
<div class="col-lg-5 col-md-7 col-sm-10 mx-auto mx-auto">
<h1>Demo Seed App for <span class="code">SASjs</span></h1>
<div class="login" id="login-form">
<div class="form-group">
<input class="form-control" type="text" id="username" placeholder="Enter username" />
</div>
<div class="form-group">
<input class="form-control" type="password" id="password" placeholder="Enter password" />
</div>
<button id="login" onclick="initSasJs()" class="login btn btn-primary" style="margin-bottom: 5px;">Log In</button>
</div>
<select name="cars" id="cars" style="margin-bottom: 5px; display: none;" class="form-control">
<option value="Hybrid">Hybrid</option>
<option value="SUV">SUV</option>
<option value="Sedan">Sedan</option>
<option value="Sports">Sports</option>
<option value="Truck">Truck</option>
<option value="Wagon">Wagon</option>
</select>
<button id="getdata" onclick="getData()" style="margin-bottom: 5px; display: none;" class="btn btn-success">Get Data</button><br><br>
<div id="loading-spinner" class="spinner-border text-primary" role="status" style="display: none;">
<span class="sr-only">Loading...</span>
</div><br>
</div>
</div>
</div>
<div id="chart-container" style="height: 65vh; width: 100%; position: relative; margin: auto;">
<canvas id="myChart" style="display: none;"></canvas>
</div>
</body>
</head>