Mengolah data JSON menggunakan Tidy JavaScript

By | January 5, 2023
Print Friendly, PDF & Email
85 Views

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

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.

See also  Time Sleep pada Looping Java Script dan Ubah Value Component HTML

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

See also  Local Storage menggunakan Java Script

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

 

Leave a Reply

Your email address will not be published.




Enter Captcha Here :