Skip to content

O
OKU-GIS
Commit 508c3f8a authored by dani rusdan's avatar dani rusdan
Browse files
Options

dashboard

parent 65a7b1ce
Show whitespace changes
Inline Side-by-side
Showing with 553 additions and 1 deletion
API/urls.py
View file @ 508c3f8a
...@@ -107,5 +107,6 @@ urlpatterns = [ ...@@ -107,5 +107,6 @@ urlpatterns = [
path('pointBangunan', views.pointBangunan), path('pointBangunan', views.pointBangunan),
path('pointBangunan_', views.pointBangunan_), path('pointBangunan_', views.pointBangunan_),
path('editperb', views.editperb), path('editperb', views.editperb),
path('loaddashboard', views.loadDashboard, name='loaddashboard'),
] ]
\ No newline at end of file
API/views.py
View file @ 508c3f8a
...@@ -4638,3 +4638,49 @@ def editperb(request): ...@@ -4638,3 +4638,49 @@ def editperb(request):
respon={'data':data, 'info': info, 'status':status} respon={'data':data, 'info': info, 'status':status}
return Response(respon) return Response(respon)
@api_view(('GET',))
def loadDashboard(request):
sql = "select * from z_total_data_dash_oku()"
with conn.cursor() as load:
load.execute(sql)
ret = load.fetchall()
columns = load.description
load.close()
colll = []
for i in ret:
column = {}
for n,k in enumerate(columns):
column[k.name] = i[n]
colll.append(column)
if ret:
y = {
'code' : 0,
'info' : 'success',
'data' : colll,
}
else:
y = {
'code' : 1,
'info' : 'not found',
'data' : colll,
}
return Response(y)
templates/includes/sidebar.html
View file @ 508c3f8a
...@@ -48,6 +48,11 @@ background: none;border-color: transparent;"> ...@@ -48,6 +48,11 @@ background: none;border-color: transparent;">
<i class="icon-pie-chart5"></i> <i class="icon-pie-chart5"></i>
</a> </a>
</li> </li>
<li id="dashboard_e" onmouseover="tooltipOver('Dashboard')" onmouseout="tooltipOut('')">
<a href="#panel-sm3" data-toggle="tab" aria-expanded="false" class="side-bar-but" id="e_dashboard">
<i class="icon-pie-chart5"></i>
</a>
</li>
{% endif %} {% endif %}
<li style="margin-top: 60vh;position: absolute;"> <li style="margin-top: 60vh;position: absolute;">
<a href="#" id="btn-hide-all" class="side-bar-but" style="position: absolute; margin-top: 0px; display: block;"> <a href="#" id="btn-hide-all" class="side-bar-but" style="position: absolute; margin-top: 0px; display: block;">
...@@ -861,5 +866,74 @@ background: none;border-color: transparent;"> ...@@ -861,5 +866,74 @@ background: none;border-color: transparent;">
</div> </div>
<div id="panel-sm3" class="sidebar-2" style="display: none;">
<div style="background: #1B1F2D;position: absolute;z-index: 9;width: 23%;height:100vh;left: 0%;transition: all 0.5s ease;">
<div style="margin-left: 50px;background: #1B1F2D;">
<div class="header" style="margin-top: 25px;background: #2F3445;">
<h6 class="panel-title" style="font-family: 'gilroysemibold';
color: #ffff;
margin-left: 20px;
font-size: 16px;
line-height: 17px;
padding-top: 9px;
padding-bottom: 9px;">Dashboard<a class="heading-elements-toggle"><i class="icon-more"></i></a></h6>
</div>
<div class="bod" style="display : none;margin-top: 10px;margin-left:6px;font-size: 12px;">
<div style="color: white;">
<span>Filter:</span>
</div>
<div class="form-group" style="margin-top: 15px;width: 98%;">
<select name="select" id="sel-kec" class="form-control input-sm" style="background-color: #393E54;border-radius: 8px;border-color: #393E54;color: white;">
<option value="all_kecamatan">Pilih Kecamatan</option>
{% for nama_kecamatan in kecamatan %}
<option value="{{nama_kecamatan.administrasi.f1}}">{{nama_kecamatan.administrasi.f2}}</option>
{% endfor %}
</select>
</div>
<div class="form-group" style="margin-top: 15px;width: 98%;">
<select name="select" id="sel-desa" class="form-control input-sm" style="background-color: #393E54;border-radius: 8px;border-color: #393E54;color: white;">
<option value="opt1">Pilih Desa</option>
</select>
</div>
</div>
</div>
</div>
<div class="panel panel-flat " id="perbaikan-dashboards" style="background: #181B27;position: absolute;z-index: 9;width: 77%;height:100vh;left: 23%;transition: all 0.5s ease;color: white; border: none; overflow-y: scroll; ">
<div class="panel-body " style="padding:14px 0px;">
<table class="table table-responsive datatable-show-all table-sm bg-slate-610 list_perb" id="list_perbaikan" style="font-size : 8pt;padding:0px;border-top:0.5pt solid #343434;border-bottom:0.5pt solid #343434;margin-bottom: 10px;">
<div class="container-detached">
<div class="content-detached" style="margin-top: 30px;">
<div class="chart-container">
<div class="col-md-6">
<span id="connect_columnBatasWilayah" class="chart has-fixed-height " style="height: 100%;display: block;"></span>
</div>
<div class="col-md-6">
<span id="connect_columnBangunanJalan" class="chart has-fixed-height " style="height: 100%;display: block;"></span>
</div>
<div class="col-md-12" style="margin-top: 30px;">
<span id="connect_columnFasilitasUmum" class="chart has-fixed-height " style="height: 100%;display: block;"></span>
</div>
<div class="col-md-12" style="margin-top: 30px;">
<span id="connect_columnKantorPemerintahan" class="chart has-fixed-height " style="height: 100%;display: block;"></span>
</div>
</div>
</div>
</div>
</table>
</div>
</div>
</div>
<div id="panel-sm-kosong " class="sidebar-2 " style="display:none;background: #1B1F2D;position: absolute;z-index: 1;left: 0%;transition: all 0.5s ease; "> <div id="panel-sm-kosong " class="sidebar-2 " style="display:none;background: #1B1F2D;position: absolute;z-index: 1;left: 0%;transition: all 0.5s ease; ">
</div> </div>
\ No newline at end of file
templates/layout/layout.html
View file @ 508c3f8a
...@@ -381,6 +381,9 @@ ...@@ -381,6 +381,9 @@
<!-- Theme JS files --> <!-- Theme JS files -->
<script type="text/javascript" src="{% static 'js/plugins/visualization/d3/d3.min.js' %}"></script> <script type="text/javascript" src="{% static 'js/plugins/visualization/d3/d3.min.js' %}"></script>
<script type="text/javascript" src="{% static 'js/plugins/visualization/d3/d3_tooltip.js' %}"></script> <script type="text/javascript" src="{% static 'js/plugins/visualization/d3/d3_tooltip.js' %}"></script>
<!-- <script type="text/javascript" src="{% static 'js/plugins/forms/styling/switchery.min.js' %}"></script> --> <!-- <script type="text/javascript" src="{% static 'js/plugins/forms/styling/switchery.min.js' %}"></script> -->
<!-- <script type="text/javascript" src="{% static 'js/plugins/forms/styling/uniform.min.js' %}"></script> --> <!-- <script type="text/javascript" src="{% static 'js/plugins/forms/styling/uniform.min.js' %}"></script> -->
<script type="text/javascript" src="{% static 'js/plugins/forms/selects/bootstrap_multiselect.js' %}"></script> <script type="text/javascript" src="{% static 'js/plugins/forms/selects/bootstrap_multiselect.js' %}"></script>
...@@ -394,6 +397,8 @@ ...@@ -394,6 +397,8 @@
<script type="text/javascript " src="{% static 'js/plugins/forms/selects/select2.min.js' %} "></script> <script type="text/javascript " src="{% static 'js/plugins/forms/selects/select2.min.js' %} "></script>
<script type="text/javascript" src="{% static 'js/plugins/visualization/echarts/echarts.js' %}"></script>
<!-- <script type="text/javascript" src="{% static 'js/plugins/media/cropper.min.js' %}"></script> <!-- <script type="text/javascript" src="{% static 'js/plugins/media/cropper.min.js' %}"></script>
<script type="text/javascript" src="{% static 'js/pages/extension_image_cropper.js' %}"></script> --> <script type="text/javascript" src="{% static 'js/pages/extension_image_cropper.js' %}"></script> -->
...@@ -445,7 +450,433 @@ ...@@ -445,7 +450,433 @@
// } // }
// end disabled inspect // end disabled inspect
var dataStyle = {
normal: {
label: {
show: true,
position: 'right',
formatter: '{c}',
color:'#fff'
}
},
emphasis: {
label: {
show: true
}
}
};
var dataStyle2 = {
normal: {
label: {
show: true,
position: 'top',
formatter: '{c}'
}
},
emphasis: {
label: {
show: true
}
}
};
var placeHoledStyle = {
normal: {
barBorderColor: 'rgba(0,0,0,0)',
color: 'rgba(0,0,0,0)'
},
emphasis: {
barBorderColor: 'rgba(0,0,0,0)',
color: 'rgba(0,0,0,0)'
}
};
$('#dashboard_e').on('click', function(){
loadDashboard();
});
function loadDashboard(){
$.ajax({
url: "{% url 'api:loaddashboard' %}",
data: {
"type": 1,
'inp': 1
},
dataType: 'json',
success: function(result) {
let dt = 0;
let leg = [];
let leg2 = [];
let leg3 = [];
let d = [];
let d2 = [];
let FasilitasUmumData = [];
let FasilitasUmumText = [];
let FasilitasUmumTble = '';
let FasilitasUmumTotl = 0;
let BangunanJalanData = [];
let BangunanJalanText = [];
let BangunanJalanTble = '';
let BangunanJalanTotl = 0;
let BatasWilayahData = [];
let BatasWilayahText = [];
let BatasWilayahTble = '';
let BatasWilayahTotl = 0;
let KantorPemerintahanData = [];
let KantorPemerintahanText = [];
let KantorPemerintahanTble = '';
let KantorPemerintahanTotl = 0;
let _req = result.data;
$('#tbFasilitasUmum > tbody').empty();
$('#tbBangunanJalan > tbody').empty();
$('#tbKantorPemerintahan > tbody').empty();
$('#tbBatasWilayah > tbody').empty();
for(x in _req){
let sty = 0;
if(leg.length > 0){
for(b in leg){
if(leg[b] == _req[x].kategori){
sty = 1;
break;
}
}
}
if(_req[x].kategori == 'Fasilitas Umum'){
FasilitasUmumData.push(parseInt(_req[x].totalz));
FasilitasUmumText.push(_req[x].al_name);
FasilitasUmumTotl = FasilitasUmumTotl + parseInt(_req[x].totalz);
FasilitasUmumTble += `<tr><td>`+_req[x].al_name+`</td><td><span class="pull-right">`+_req[x].totalz+`</span></td></tr>`;
}else if(_req[x].kategori == 'Bangunan dan Jalan' || _req[x].kategori == 'Jalan'){
BangunanJalanData.push(parseInt(_req[x].totalz));
BangunanJalanText.push(_req[x].al_name);
BangunanJalanTotl = BangunanJalanTotl + parseInt(_req[x].totalz);
BangunanJalanTble += `<tr><td>`+_req[x].al_name+`</td><td><span class="pull-right">`+_req[x].totalz+`</span></td></tr>`;
}else if(_req[x].kategori == 'Batas Wilayah'){
BatasWilayahData.push(parseInt(_req[x].totalz));
BatasWilayahText.push(_req[x].al_name);
BatasWilayahTotl = BatasWilayahTotl + parseInt(_req[x].totalz);
BatasWilayahTble += `<tr><td>`+_req[x].feature_name+`</td><td><span class="pull-right">`+_req[x].totalz+`</span></td></tr>`;
}else if(_req[x].kategori == 'Kantor Pemerintahan'){
KantorPemerintahanData.push(parseInt(_req[x].totalz));
KantorPemerintahanText.push(_req[x].al_name);
KantorPemerintahanTotl = KantorPemerintahanTotl + parseInt(_req[x].totalz);
KantorPemerintahanTble += `<tr><td>`+_req[x].al_name+`</td><td><span class="pull-right">`+_req[x].totalz+`</span></td></tr>`;
}else if(_req[x].kategori == 'Tuplah'){
loadTuplahTotal(140, val, prokab);
}
dt = dt + parseInt(_req[x].totalz);
}
$('.cTotal').empty('');
$('.cTotal').html(dt);
$('.summary-content').append(`<span class="sumary-detailparam1 chart has-fixed-height " style="height: 450px;display: block;"></span>`);
if(FasilitasUmumData){
console.log(FasilitasUmumData);
loadChartLine(FasilitasUmumData, FasilitasUmumText, FasilitasUmumText.length, 22, 'FasilitasUmum', 'Fasilitas Umum');
$('#tbFasilitasUmum').append(FasilitasUmumTble);
$('#ttlFasilitasUmum').html(FasilitasUmumTotl);
}
if(BangunanJalanData){
loadChartLine(BangunanJalanData, BangunanJalanText, BangunanJalanText.length, 23, 'BangunanJalan', 'Bangunan & Jalan');
$('#tbBangunanJalan').append(BangunanJalanTble);
$('#ttlBangunanJalan').html(BangunanJalanTotl);
}
if(BatasWilayahData){
loadChartLine(BatasWilayahData, BatasWilayahText, BatasWilayahText.length, 23, 'BatasWilayah', 'Batas Wilayah');
$('#tbBatasWilayah').append(BatasWilayahTble);
$('#ttlBatasWilayah').html(BatasWilayahTotl);
}
if(KantorPemerintahanData){
loadChartLine(KantorPemerintahanData, KantorPemerintahanText, KantorPemerintahanText.length, 22, 'KantorPemerintahan', 'Kantor Pemerintahan');
$('#tbKantorPemerintahan').append(KantorPemerintahanTble);
$('#ttlKantorPemerintahan').html(KantorPemerintahanTotl);
}
}
});
}
require.config({
paths: {
echarts: '../static/js/plugins/visualization/echarts'
}
});
function loadChartLine(data, leg, dated, tipes, cparam, ti, leg2, leg3){
$('.sumary-detail'+cparam).empty();
require(
[
'echarts',
'echarts/theme/limitless',
'echarts/chart/bar',
'echarts/chart/line',
'echarts/chart/pie',
'echarts/chart/funnel',
'echarts/chart/chord'
],
function (ec, limitless) {
if(tipes == 22){
var chartHeight = leg.length * 31 + 300;
$('#connect_column'+cparam).css({'height': chartHeight});
var connect_column = ec.init(document.getElementById('connect_column'+cparam), limitless);
console.log(connect_column);
// Column options
floating_bars_options = {
// Setup grid
grid: {
x: 130,
x2: 35,
y: 55,
y2: 35
},
textStyle: {
color: '#fff'
},
title: {
text: ti,
subtext: 'Informasi Daerah',
x: 'center'
},
// Add tooltip
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
},
// formatter: '{b}<br/>{a0}: {c0}<br/>{a2}: {c2}<br/>{a4}: {c4}<br/>{a6}: {c6}'
},
toolbox: {
show: false,
orient: 'vertical',
x: 'right',
y: 50,
feature: {
magicType: {
show: true,
title: {
line: 'Switch to line chart',
bar: 'Switch to bar chart',
stack: 'Switch to stack',
tiled: 'Switch to tiled'
},
type: ['line', 'bar', 'stack', 'tiled']
},
restore: {
show: true,
title: 'Restore'
},
saveAsImage: {
show: true,
title: 'Same as image',
lang: ['Save']
}
}
},
xAxis: {
type: 'value',
boundaryGap: [0, 0.01],
axisLabel: {
textStyle: {
color: 'white'
}
},
},
yAxis: {
type: 'category',
data: leg,
inverse: false,
axisLabel: {
textStyle: {
color: 'white'
}
},
},
// Add series
// series: data
series: [
{
type: 'bar',
data: data,
itemStyle: dataStyle,
label: {
show: true,
position: 'right',
valueAnimation: true,
color: "white",
}
},
],
};
//
// Irregular bars options
//
connect_column.setOption(floating_bars_options);
}
if(tipes == 23){
var chartHeight = leg.length * 31 + 400;
$('#connect_column'+cparam).css({'height': chartHeight});
var connect_column = ec.init(document.getElementById('connect_column'+cparam), limitless);
// Column options
floating_bars_options = {
// Setup grid
grid: {
x: 80,
x2: 35,
y: 55,
y2: 35
},
title: {
text: ti,
subtext: 'Informasi Daerah',
x: 'center'
},
// Add tooltip
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
},
// formatter: '{b}<br/>{a0}: {c0}<br/>{a2}: {c2}<br/>{a4}: {c4}<br/>{a6}: {c6}'
},
toolbox: {
show: false,
orient: 'vertical',
x: 'right',
y: 50,
feature: {
magicType: {
show: true,
title: {
line: 'Switch to line chart',
bar: 'Switch to bar chart',
stack: 'Switch to stack',
tiled: 'Switch to tiled'
},
type: ['line', 'bar', 'stack', 'tiled']
},
restore: {
show: true,
title: 'Restore'
},
saveAsImage: {
show: true,
title: 'Same as image',
lang: ['Save']
}
}
},
yAxis: {
type: 'value',
boundaryGap: [0, 0.01],
axisLabel: {
textStyle: {
color: 'white'
}
},
},
xAxis: {
type: 'category',
data: leg,
inverse: false,
axisLabel: {
textStyle: {
color: 'white'
}
},
},
// Add series
// series: data
series: [
{
type: 'bar',
data: data,
itemStyle: dataStyle2,
label: {
show: true,
position: 'right',
valueAnimation: true,
}
},
],
};
//
// Irregular bars options
//
connect_column.setOption(floating_bars_options);
}
}
);
}
var dar = null; var dar = null;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment