mirror of
https://github.com/sasjs/adapter.git
synced 2026-01-07 04:20:05 +00:00
114 lines
5.4 KiB
HTML
114 lines
5.4 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>
|
|
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()
|
|
}
|
|
})
|
|
}
|
|
|
|
// 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>
|
|
<div id='chart-container' style='height: 65vh; width: 100%; position: relative; margin: auto'>
|
|
<canvas id='myChart' style='display: none'></canvas>
|
|
</div>
|
|
</body>
|
|
</head> |