mirror of
https://github.com/sasjs/adapter.git
synced 2025-12-10 17:04:36 +00:00
107 lines
4.5 KiB
HTML
107 lines
4.5 KiB
HTML
<!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/adapter@1"></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> |