Bagi pengguna bahasa R kita sangat dipermudah sekali dengan adanya package dplyr dan tidy verse dan bahkan lebih simple daripada SQL itu sendiri berkat adanya operator piping di R. Dibandingkan dengan Pandas/Python maka akan jauh lebih efektif mengolah data berbasis tabula menggunakan R.
Namun kemudahan tersebut bisa kok kita temui di java script! berkat adanya tidy js https://github.com/pbeshai/tidy. Sangat menarik memang untuk digunakan dalam mengolah screening data seperti harga-harga saham. Dokumentasi lengkap bisa kalian peroleh di https://pbeshai.github.io/tidy/docs/api/tidy/
HTML. Berikut beberapa library yang diperlukan
- jquery untuk mengurusi ajax
- bootstrap untuk thema
- bootstrap table untuk table
- plotly untuk charting
- tidy JS untuk data frame
API getStocks
Contents
Yup kita akan praktek penggunaan tidy js menggunakan data saham ke 800an emiten untuk periode 1 tahun, data yang sangat2 besar sekali, 800 emiten x 240 hari kerja = 192 ribu record JSON. Tapi tenang saja kok sudah dibatasi maksimal per emiten yaitu 150 an record saja agar tidak terlalu berat server untuk loading datanya.
API tersebut bisa kalian akses kok dengan mudah melalui API https://softscients.com/stocks/index.php/yahoo/getStock. tapi tenang kok sudah dilakukan teknik encoding dan decoding bila kalian akses via AJAX sehingga ukurannya cukup kecil yaitu 2.46 KB saja bila tidak dilakukan teknik encoding / decoding seperti diatas maka ukuran file nya yaitu 1.07 MB.
Berikut ketika diload kedalam tabel ada sebanyak 8345 record saja yang terdiri dari 822 emiten yang ada di Indonesia
Pada bab sebelumnya Plotly JavaScript untuk Visualisasi Grafik yang Dinamis hanya menggunakan 1 emiten saja, belum mengakomodasi untuk perubahan emiten yang lainya. Kita nanti akan mencoba menggunakan function distinct untuk mencari tahu emiten unique, select, dan filter seperti layaknya di tidyverse versi R.
Library JS
Seperti biasanya kita tambahkan library java script terlebih dahulu serta pengaturan tidy nya
<!-- tidy -->
<script src="https://d3js.org/d3-array.v2.min.js"></script>
<script src="https://www.unpkg.com/@tidyjs/tidy/dist/umd/tidy.min.js"></script>
<!-- pengaturan tidy -->
<script>
const { tidy, fill,mutate,rename, arrange, desc ,view,filter,debug,distinct,select,leftJoin,innerJoin,rightJoin} = Tidy;
</script>
Component Input Text dan Button
Selanjutnya kita tambahkan input text dan tombol button
<div class="form-floating"> <input type="text" class="form-control" id="ticker" name="ticker"/> <label for="ticker">Ticker</label> </div> <p> <button class="btn btn-primary mb-3" id="btn" type="button">OK</button> </p>
AJAX dan API untuk Stock
Berikut kode lengkapnya untuk loading ajax serta penggunaan tidy js nya, agar ada variabel global kita tempatkan variabel bernama dataframe sebagai variabel global saja sebelum memanggil AJAX.
<html lang="en">
<head>
<!-- sisipkan jquery -->
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<!-- Menyisipkan table
https://bootstrap-table.com
-->
<script src="https://unpkg.com/bootstrap-table@1.21.2/dist/bootstrap-table.min.js"></script>
<link href="https://unpkg.com/bootstrap-table@1.21.2/dist/bootstrap-table.min.css" rel="stylesheet">
<!-- Menyisipkan Bootstrap -->
<link rel="stylesheet" href="https://softscients.com/stocks/assets/bootstrap/css/bootstrap.min.css" />
<!-- plotly -->
<script src='https://cdn.plot.ly/plotly-latest.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/ccxt@1.17.229/build/ccxt.browser.js'></script>
<!-- tidy -->
<script src="https://d3js.org/d3-array.v2.min.js"></script>
<script src="https://www.unpkg.com/@tidyjs/tidy/dist/umd/tidy.min.js"></script>
<!-- pengaturan tidy -->
<script>
const { tidy, fill,mutate,rename, arrange, desc ,view,filter,debug,distinct,select,leftJoin,innerJoin,rightJoin} = Tidy;
</script>
</head>
<body>
<h3>Harga Saham</h3>
<table id="table1" data-toggle="table" data-height="460" data-toolbar=".toolbar" data-sortable="true">
<thead>
<tr>
<th data-field="date">Date</th>
<th data-field="stockcode">Stock Code</th>
<th data-field="open">Open</th>
<th data-field="high">High</th>
<th data-field="low">Low</th>
<th data-field="close">Close</th>
<th data-field="volume" data-sortable="false" data-align="right">Volume</th>
</tr>
</thead>
</table>
<h3>Grafik</h3>
<br>
<div class="form-floating">
<input type="text" class="form-control" id="ticker" name="ticker"/>
<label for="ticker">Ticker</label>
</div>
<p>
<button class="btn btn-primary mb-3" id="btn" type="button">OK</button>
</p>
<div id="graph" style="height: 700px; fluid-width: 900px;"></div>
</body>
<script>
function formatDate(date) {
var d = new Date(date),
month = '' + (d.getMonth() + 1),
day = '' + d.getDate(),
year = d.getFullYear();
if (month.length < 2)
month = '0' + month;
if (day.length < 2)
day = '0' + day;
return [year, month, day].join('-');
}
var dataframe = [];
$(document).ready(function() {
let url = 'https://softscients.com/stocks/index.php/yahoo/getStock';
$.getJSON(url,function (response) {
let data = response[0];
//jadikan array saja
let ohc = data.map(function (data, index, array) {
let date = data.ohlcv.date;
let stockcode = data.ohlcv.stockcode
let open = data.ohlcv.open;
let high = data.ohlcv.high;
let low = data.ohlcv.low;
let close = data.ohlcv.close;
let volume = data.ohlcv.volume;
return [date,stockcode,open,high,low,close,volume];
});
//console.log(ohc);
dataframe = tidy(ohc, rename({ 0:'date',
1 :'stockcode',
2:'open',
3:'high',
4:'low',
5:'close',
6:'volume'}));
tidy(dataframe,debug({limit:20}));
$('#table1').bootstrapTable("destroy");
$('#table1').bootstrapTable({
data: dataframe,
sortStable: true,
pagination : true,
search : true
});
let code = tidy(dataframe, distinct(['stockcode']),select(['stockcode']));
alert("Jumlah emiten yaitu : "+code.length);
});
$('#btn').click(function(){
let code = $('#ticker').val();
//console.log(code);
let data = tidy(dataframe,filter((d) => d.stockcode === code.toUpperCase()),arrange(['date']));
//console.log(data);
let trace1 = {
name: 'Close ',
x: data.map(c=>c.date),
close: data.map(c=>c.close),
high : data.map(c=>c.high),
open : data.map(c=>c.open),
low : data.map(c=>c.low),
type: 'ohlc',
line: {
color: 'rgba(0, 0, 0, 0.7)'
}
};
var layout = {
title: 'emiten '+data.map(c=>c.stockcode).slice(0,1)[0],
showlegend: true,
legend: {
x: 0.05,
y: 1.35
},
yaxis: {
fixedrange: true
},
xaxis : {
fixedrange: false,
rangeslider: {
visible: false
}
}
};
var config = {
modeBarButtonsToRemove: ['select2d', 'lasso2d',
'hoverCompareCartesian', 'hoverClosestCartesian',
'autoScale2d', 'sendDataToCloud'],
displaylogo: false,
editable: false,
showTips: true,
scrollZoom: false,
autosize: true
};
Plotly.newPlot('graph', [trace1], layout,config);
});
});
</script>
</html>
Berikut penjelasan atas kode diatas
dataframe = tidy(ohc, rename({ 0:'date', 1 :'stockcode', 2:'open', 3:'high', 4:'low', 5:'close', 6:'volume'}));
Digunakan untuk membuat data frame
let code = tidy(dataframe, distinct(['stockcode']),select(['stockcode']));
Digunakan untuk mencari tahu jumlah emiten dan memilih column stockcode saja
let data = tidy(dataframe,filter((d) => d.stockcode === code.toUpperCase()),arrange(['date']));
Digunakan untuk operasi filtering serta sorting
Operasi Join Table
Operasi join table akan dibahas pada bab selanjutnya saja