https://lapor.go.id/themes/lapor/assets/js/statistic.js

1function downloadImage(varChart) {
2	/* set new title */
3		window[varChart].update({
4			duration: 0
5		});
6		// or, use
7		// window[varChart].update(0);
8	
9		/* save as image */
10		var link = document.createElement('a');
11		link.href = window[varChart].toBase64Image();
12		link.download = varChart + '.png';
13		link.click();
14	
15	}
16	
17
18function requestAjax(scope=null,kategori=null,lat=null,lng=null,view=null, institutionId)
19{
20    var scope 		= (scope == null)    ? 'provinsi'      : scope;
21    var kategori 	= (kategori == null) ? 'asal_pelapor' : kategori;
22
23    $('.loader').removeClass('display-none');
24    var filter = {};
25    
26    filter.institution_id = $('#institutionId').val() ? $('#institutionId').val() : institutionId;
27    filter.start_date  = ($('#createdStartDate').val()) ?  $('#createdStartDate').val() : '2019-01-01';
28    // filter.start_date  = '2014-01-01';
29    filter.end_date    = $('#createdEndDate').val() ? ($('#createdEndDate').val()) : moment().format('YYYY-MM-DD');
30    filter.type        = 'nasional';
31    
32    $.ajax({
33        url : baseUrl+'/api/datawarehouse/maps/'+kategori,
34        method : 'POST',
35        headers : {
36            Authorization : 'Bearer {{token.token|raw}}'
37        },
38        data : { 
39			mode  : true,
40            scope  : scope,

41            filter : filter
42        },
43        success:function(result){
44            json_data=result.data;
45            if(result.location){
46                loadMap(result.data,scope,kategori,null,result.location.lat,result.location.long,view?view+3:8);
47            }else{
48            loadMap(result.data,scope,kategori,null,lat,lng,view);}
49            $('.loader').addClass('display-none');
50        },
51        error: function (error) {
52            $('.loader').addClass('display-none');
53        }
54    });
55}
56
57function loadNewMap(val=null,view=null)
58{
59    let scope 		= $('select[name=scope] :selected').val();
60    let kategori	= 'asal_pelapor';
61
62    $('.loader').removeClass('display-none');
63    
64    var filter = {};
65    
66    filter.institution_id = $('#institutionId').val() ? $('#institutionId').val() : institutionId;
67    filter.start_date  = ($('#createdStartDate').val()) ?  $('#createdStartDate').val() : '2019-01-01';
68    // filter.start_date  = '2014-01-01';
69    filter.end_date    = $('#createdEndDate').val() ? ($('#createdEndDate').val()) : moment().format('YYYY-MM-DD');
70    filter.type        = 'nasional';
71    
72    $.ajax({
73        url : baseUrl+'/api/datawarehouse/maps/'+kategori,
74        method : 'POST',
75        headers : {
76            Authorization : 'Bearer {{token.token|raw}}'
77        },
78        data : { 
79			mode  : true,
80            scope  : scope,

81            filter : filter
82        },
83        success:function(result){
84            if(result.location){
85                loadMap(result.data,scope,kategori,val?[val]:null,result.location.lat,result.location.long,view?view:8);
86            } else {
87                loadMap(result.data,scope,kategori,val?[val]:null);
88            }
89            
90            $('.loader').addClass('display-none');
91        },
92        error: function (error) {
93            $('.loader').addClass('display-none');
94        }
95    });
96}
97
98function legendClick(val=null,lat,long,view)
99{
100    let scope 		= $('select[name=scope] :selected').val();
101    let kategori	= $('input[name=kategori]:checked').val();
102    $('.loader').removeClass('display-none');
103    loadMap(json_data,scope,kategori,val?[val]:null,lat,long,view);
104    $('.loader').addClass('display-none');
105    /*
106        memasukkan array berdasarkan kategori yang sedang dipilih
107    */
108    // if(kategori == "tindak_lanjut"){
109    // 	arr_aktif = aktif_tindak;
110    // }else if(kategori == "asal_pelapor"){
111    // 	arr_aktif = aktif_pelapor;
112    // }else if(kategori == "keterhubungan"){
113    // 	arr_aktif = aktif_terhubung;
114    // }
115    
116    /* 
117        cek apakah parameter ada di dalam variabel arr_aktif
118        jika parameter yang di kirim dari legend yang di kllik ada, maka hilangkan nilainya sebaliknya jika tidak ada dalam arr_aktif maka masukan
119    */
120    // cek = arr_aktif.includes(val);
121    // if(cek == true){
122    // 	arr_aktif.splice($.inArray(val, arr_aktif),1);
123    // }else{
124    // 	arr_aktif.push(val);
125    // }
126    
127    // $.request('onClickLegend', {
128    // 	data : { 
129    // 		'kategori'  : kategori,
130    // 		'arr_aktif' : arr_aktif,
131    // 	},
132    // 	success:function(result){
133    // 		loadMap(result,scope,kategori,arr_aktif);
134    // 	}
135    // })
136    
137}
138
139function loadMap(data = null, scope = null, kategori = null, arr_aktif = null, lat_selected, long_selected, view_selected) {
140  // memindahkan variabel berisi data objek dari geojson yang dimasukkan ke dalam variabel sebelumnya.
141  var scope = (scope == 'kab_kota') ? kab_kota : provinsi;
142
143  // melakukan looping di variabel yang berisi data objek geojson
144  var total_data = 0;
145  $.each(scope.features, function(i, row) {
146      var obj = row.properties;
147      
148      // mengosongkan kembali objek yang sudah ditambahkan data sebelumnya
149      obj.region = null;
150      obj.verify = null;
151      obj.total = null;
152      obj.status = null;
153
154      // melakukan looping data yg diambil dari database
155      $.each(data, function(k, val) {
156          if (kategori == "asal_pelapor") {
157              if (val.json_id == obj.object_id) {
158                  obj.region = val.json_id;
159                  obj.total = val.total;
160                  if(parseFloat(val.total) >= total_data){
161                    total_data = parseFloat(val.total);
162                  }
163              }
164          } 
165      })
166  })
167
168  var lat = (lat_selected != null) ? lat_selected : -1.8278144915414396;
169  var long = (long_selected != null) ? long_selected : 117.89234270415939;
170  var view = (view_selected != null) ? view_selected : 5.2;
171
172  var basemap = 'Esri.DeLorme';
173
174  // cek apakah map sudah berisi layer
175  if (typeof map !== 'undefined') {
176      if (map.hasLayer) {
177          // kosongkan elemen yang ber ID content-map lalu buat div dengan ID map
178          $('#content-map').empty();
179          $('#content-map').html("<div id='map-command-center'></div>");
180      }
181  }
182
183  map = L.map('map-command-center').setView([lat, long], view);
184  baseLayer = L.tileLayer.provider(basemap, {}).addTo(map);
185  $('.leaflet-control-attribution').hide();
186
187    // menampilkan skala
188    L.control.scale({
189        imperial: false,
190        position: 'bottomright'
191    }).addTo(map);
192    geojson = L.geoJson(scope, {
193        style: function(feature) {
194            var region = feature.properties.object_id;
195            var col = null;
196            if (data != null) {
197                $.each(data, function(i, result) {
198                    if (region == result.json_id) {
199                        if (result.verify) {
200                            persen = (result.verify * 100) / result.total;
201                            col = persen;
202                        } else if (result.total) {
203                            total = result.total;
204                            col = total;
205                        } else {
206                            status = result.status;
207                            col = status;
208                        }
209                    }
210                });
211            }
212            return {
213                fillColor: getColor(kategori, col),
214                weight: 1.5,
215                fillOpacity: getOpacity(kategori, col, arr_aktif),
216                color: '#6A9CBE',
217            };
218        },
219        onEachFeature: onEachFeature
220    }).addTo(map);
221
222    // menampilkan informasi di sisi kanan bawah
223    var legend = L.control({
224        position: 'bottomleft'
225    });
226
227    legend.onAdd = function(map) {
228
229      var div = L.DomUtil.create('div', 'legend legend-control leaflet-html-legend'),
230          labels = [];
231        if(total_data <= 1000){
232            grades = {
233                "> 200 Laporan" : 201,
234                "> 100 Laporan" : 101,
235                ">= 1 Laporan"  : 1
236            };
237        } else {
238            grades = {};
239            grades["> " + parseInt(total_data * 0.8) + " Laporan"] = parseInt(total_data * 0.8);
240            grades["> " + parseInt(total_data * 0.6) + " Laporan"] = parseInt(total_data * 0.6);
241            grades["> " + parseInt(total_data * 0.4) + " Laporan"] = parseInt(total_data * 0.4);
242            grades["> " + parseInt(total_data * 0.2) + " Laporan"] = parseInt(total_data * 0.2);
243            grades[">= 1 Laporan"] = 1;
244        }
245
246      $.each(grades, function(key, val) {
247          // menambahkan style untuk legend dan ditampung sementara ke variabel 
248          var legend1 = '<i style="background:' + getColor(kategori, val, total_data) + '; cursor:pointer;" onClick=legendClick(' + val + ',' + lat_selected + ',' + long_selected + ',' + view_selected + ')></i> ' +
249              key + (key ? '<br>' : '');
250          var legend2 = '<i style="background:' + getColor(kategori, val, total_data) + '; cursor:pointer;" onClick=legendClick(' + val + ',' + lat_selected + ',' + long_selected + ',' + view_selected + ')></i> <span style="text-decoration: line-through;">' +

251              key + (key ? '</span><br>' : '');
252
253          /*
254            arr_aktif dikirim dari function legendClick
255          saat di load pertama kali arr_aktif berisi null maka semua legend diaktifkan dan jika arr_aktif tidak ada isinya maka semua legend tidak aktif
256          */
257          if (arr_aktif == null) {
258              div.innerHTML += legend1;
259          } else if (arr_aktif.length === 0) {
260              div.innerHTML += legend2;
261          } else {
262            if (kategori == "asal_pelapor") {
263                if (arr_aktif.includes(val)) {
264                    div.innerHTML += legend1;
265                } else {
266                    div.innerHTML += legend2;
267                }
268            } 
269          }
270      });
271
272      return div;
273  };
274
275  legend.addTo(map);
276}
277
278
279
280// set warna pada layer berdasarkan parameter yang sudah ditentukan
281function getColor(kat,param, total_data) 
282{
283    total_data = (total_data) ? total_data : 0;
284    if(total_data <= 1000){
285        color  =  param > 200 ? '#216653' :
286                  param > 100 ? '#74baa0' :
287                  param > 0   ? '#d0e0d3' : '#A5DE98' ;
288    } else {
289        color  =  param > parseInt(total_data * 0.8) ? '#216653' :
290                  param > parseInt(total_data * 0.6) ? '#3e927a' :
291                  param > parseInt(total_data * 0.4) ? '#74baa0' :
292                  param > parseInt(total_data * 0.2) ? '#b8d8c0' :
293                  param > 0   ? '#d0e0d3' : '#A5DE98' ;
294    }
295    return color;
296};
297
298// set ketebalan warna berdasarkan parameter
299function getOpacity(kat,param,arr_aktif){
300    if(kat == "tindak_lanjut"){
301        arr_aktif=arr_aktif?arr_aktif:aktif_tindak;
302        result = param > 50&&arr_aktif.includes(51) ? .5 :
303                    param > 19&&param<51&&arr_aktif.includes(20) ? .5 :
304                    param > 0&&param<20&&arr_aktif.includes(1)   ? .5 :
305                                                                .0 ;
306    }else if(kat == "asal_pelapor"){
307        arr_aktif=arr_aktif?arr_aktif:aktif_pelapor;
308        result = param > 200&&arr_aktif.includes(500) ? .5 :
309                    param > 100&&param<201&&arr_aktif.includes(200) ? .5 :
310                    param > 0&&param<101&&arr_aktif.includes(100)   ? .5 :
311                                                                    .0 ;
312    }else{
313        arr_aktif=arr_aktif?arr_aktif:aktif_terhubung;
314        result  =  param == 1&&arr_aktif.includes(1) ? .5 :
315                    param == 2&&arr_aktif.includes(2) ? .5 :
316                    param == 3&&arr_aktif.includes(3) ? .5 :
317                                                        .0 ;
318    }
319    return result;
320}
321
322function onEachFeature(feature, layer) { 
323    var region = feature.properties.primary_name + "<br>";
324    var verify = (feature.properties.verify != null) ? "Belum Ditindak : " + feature.properties.verify  + "<br>": '' ;
325    var total  = (feature.properties.total != null) ? "Total Laporan: " + feature.properties.total + "<br>" : '' ;
326    var fs = null
327
328    var fontSize = layer.feature.properties.total / map.getZoom() * 30000;
329
330    if(fontSize > 1) {
331		layer.bindTooltip("<span style='font-size: 10px'>" + feature.properties.total + "</span>", {
332			className: "tooltip-map",
333			permanent: true,
334			direction: "center"
335		}).openTooltip();
336    }
337    
338    switch (feature.properties.status) {
339        case 1:
340            fs = "Memiliki akun & SK"
341            break;
342        case 2:
343            fs = "Memiliki akun & Tanpa SK"
344            break;
345        case 3:
346            fs = "Tanpa akun & Tanpa SK"
347            break;
348        default:
349            break;
350    }
351    var status  = (fs != null) ? fs + "<br>" : '' ;
352
353    // popup untuk menampilkan nama nya
354    // layer.bindPopup(region, {});
355
356    that = this; // efek hover pada objek layer
357
358    // munculin nama atribut saat mouse hover
359
360    if ($("#scope :selected").val() == 'kab_kota') {
361      layer.bindTooltip("<center>" 
362              + region
363              + verify 
364              + total  
365              + status
366              + "</center>", {className: 'map-tooltip'});     
367    }
368            
369    // memanggil function pada event tertentu
370    layer.on({
371        mouseover: highlightFeature,
372        mouseout: resetHighlight,
373        click: zoomToFeature
374    })
375}
376
377// ketika mouse di arahkan maka function akan di panggil

378function highlightFeature(e) {
379    var layer = e.target;
380
381    layer.setStyle({
382        weight: 2,
383        color: '#3C84D4',
384        dashArray: '',
385        fillOpacity: 0.5
386    });
387
388    if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
389        layer.bringToFront();
390    }
391}
392
393// mengembalikan style pada layer
394function resetHighlight(e) {
395    geojson.resetStyle(e.target);
396}
397
398// zoom layer berdasarkan target yang di klik
399function zoomToFeature(e) {
400    //zoom ke wilayah yang di klik
401    // e.target._map.fitBounds(e.target.getBounds());
402
403    var scope = $("#scope :selected").val();
404    var newScope;
405    var view;
406
407    //membuat kondisi ketika peta di klik sesuai option scope yang sedang di selected
408    if(scope == 'provinsi'){
409        newScope = 'kab_kota';
410        view = 7;
411    }else if(scope == 'kab_kota'){
412        newScope = 'kab_kota';
413        view = 7;
414    }else{
415        newScope = 'provinsi';
416        view = 6;
417    }
418
419    // $("#scope option[value='"+scope+"']").attr("selected","");
420    // $("#scope").data("value",newScope);
421    $("#scope :selected").val(newScope);
422    var lat = e.latlng.lat;
423    var lng = e.latlng.lng;
424    requestAjax(newScope,category,lat,lng,view);
425}