mirror of
https://github.com/sasjs/adapter.git
synced 2026-01-11 14:20:05 +00:00
Added suggestions
This commit is contained in:
209
example.html
209
example.html
@@ -1,107 +1,114 @@
|
||||
<!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}}]}
|
||||
<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>
|
||||
const sasJs = new SASjs.default({
|
||||
appLoc: '/Products/demo/readme',
|
||||
serverType:'SAS9',
|
||||
debug: 'false'
|
||||
})
|
||||
|
||||
const initSasJs = () => {
|
||||
$('#loading-spinner').show()
|
||||
|
||||
// instantiate sasJs with options such as backend app location
|
||||
// login (it's also possible to set an auto login when making requests)
|
||||
sasJs.logIn($('#username')[0].value, $('#password')[0].value)
|
||||
.then((response) => {
|
||||
if (response.isLoggedIn === true) {
|
||||
$('#loading-spinner').hide()
|
||||
$('.login').hide()
|
||||
$('#getDataBtn').show()
|
||||
$('#cars').show()
|
||||
}
|
||||
})
|
||||
}
|
||||
});
|
||||
}
|
||||
</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" />
|
||||
|
||||
// make a request to a SAS service
|
||||
const getData = () => {
|
||||
$('#loading-spinner').show()
|
||||
$('#myChart').remove()
|
||||
$('#chart-container').append("<canvas id='myChart' style='display: none'></canvas>")
|
||||
|
||||
const type = $('#cars')[0].options[$('#cars')[0].selectedIndex].value
|
||||
|
||||
// request data from an endpoint under your appLoc
|
||||
// send data as an array of objects - each object is one row
|
||||
sasJs.request('/common/getdata', {fromjs: [{ type: type }]})
|
||||
.then((response) => {
|
||||
$('#myChart').show()
|
||||
$('#loading-spinner').hide()
|
||||
|
||||
const labels = response.areas.map(area => area.MAKE)
|
||||
const data = response.areas.map(area => area.AVPRICE)
|
||||
|
||||
initGraph(labels, data, type)
|
||||
})
|
||||
}
|
||||
|
||||
const initGraph = (labels, data, type) => {
|
||||
const myCanvas = document.getElementById('myChart')
|
||||
const ctx = myCanvas.getContext('2d')
|
||||
|
||||
const 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='getDataBtn' 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 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>
|
||||
<div id='chart-container' style='height: 65vh; width: 100%; position: relative; margin: auto'>
|
||||
<canvas id='myChart' style='display: none'></canvas>
|
||||
</div>
|
||||
</body>
|
||||
</head>
|
||||
Reference in New Issue
Block a user