Skip to content

Commit

Permalink
Merge pull request #16 from igoynawamreh/master
Browse files Browse the repository at this point in the history 
Updates
  • Loading branch information
@andri-sudarmawijaya
andri-sudarmawijaya committed Feb 3, 2018
2 parents 0c3b7b6 + 08ed89f commit ed7da21
Show file tree
Hide file tree
Showing 7 changed files with 653 additions and 408 deletions.
139 changes: 33 additions & 106 deletions ...ources/assets/js/components/views/bantenprov/pdrb-harga-dasar/DashboardPdrbHargaDasar.vue
View file
Expand Up @@ -2,42 +2,44 @@
<div>

<div class="row">
<div class="col-md-4 mb-3">
<div class="card card-media text-white bg-primary">
<div class="col-lg-6 mb-3">
<div class="card h-100" style="color: #fff; background-color: #2196F3;">
<div class="card-body">
<div class="media">
<div class="media-body text-truncate">
<div class="card-body">
<pdrb-harga-dasar-bar-03></pdrb-harga-dasar-bar-03>
</div><!-- /.card-body -->
</div>
</div>
<pdrb-harga-dasar-bar-03></pdrb-harga-dasar-bar-03>
</div><!-- /.card-body -->
</div><!-- /.card -->
</div><!-- /col -->
<div class="col-md-4 mb-3">
<div class="card card-media text-white bg-success">
<div class="col-lg-6 mb-3">
<div class="card h-100" style="color: #fff; background-color: #4CAF50;">
<div class="card-body">
<div class="media">
<div class="media-body text-truncate">
<div class="card-body">
<pdrb-harga-dasar-pie-03></pdrb-harga-dasar-pie-03>
</div><!-- /.card-body -->
</div>
</div>
<pdrb-harga-dasar-pie-03></pdrb-harga-dasar-pie-03>
</div><!-- /.card-body -->
</div><!-- /.card -->
</div><!-- /col -->
<div class="col-md-4 mb-3">
<div class="card card-media text-white bg-warning">
</div><!-- /.row -->

<!-- ===================================================================== -->

<div class="row">
<div class="col-lg-8 mb-3">
<div class="card h-100" style="color: #fff; background-color: #009688;">
<div class="card-header">
<i class="fa fa-bar-chart" aria-hidden="true"></i>
PDRB Harga Dasar Berdasarkan Wilayah
</div>
<div class="card-body">
<div class="media">
<i class="fa fa-calendar fa-card-media-avatar mr-3" aria-hidden="true"></i>
<div class="media-body text-truncate">
<h5 class="mt-0">Agenda</h5>
<span><i class="fa fa-dot-circle-o" aria-hidden="true"></i> 30</span>
</div>
</div>
<pdrb-harga-dasar-bar-01></pdrb-harga-dasar-bar-01>
</div><!-- /.card-body -->
</div><!-- /.card -->
</div><!-- /col -->
<div class="col-lg-4 mb-3">
<div class="card h-100" style="color: #fff; background-color: #FF9800;">
<div class="card-header">
<i class="fa fa-pie-chart" aria-hidden="true"></i>
PDRB Harga Dasar Berdasarkan Wilayah
</div>
<div class="card-body">
<pdrb-harga-dasar-pie-01></pdrb-harga-dasar-pie-01>
</div><!-- /.card-body -->
</div><!-- /.card -->
</div><!-- /col -->
Expand All @@ -46,41 +48,8 @@
<!-- ===================================================================== -->

<div class="row">

<div class="col-md-8">

<div class="card mb-3">
<div class="card-header">
<i class="fa fa-bar-chart" aria-hidden="true"></i>
PDRB Harga Dasar Berdasarkan Wilayah
</div>
<div class="card-body">
<pdrb-harga-dasar-bar-01></pdrb-harga-dasar-bar-01>
</div><!-- /.card-body -->
</div><!-- /.card -->

</div><!-- /col -->


<div class="col-md-4">

<div class="card mb-3">
<div class="card-header">
<i class="fa fa-pie-chart" aria-hidden="true"></i>
PDRB Harga Dasar Berdasarkan Wilayah
</div>
<div class="card-body">
<pdrb-harga-dasar-pie-01></pdrb-harga-dasar-pie-01>
</div><!-- /.card-body -->
</div><!-- /.card -->

</div><!-- /col -->
<div class="row">

</div>
<div class="col-md-4">

<div class="card mb-3">
<div class="col-lg-6 mb-3">
<div class="card h-100" style="color: #fff; background-color: #F44336;">
<div class="card-header">
<i class="fa fa-pie-chart" aria-hidden="true"></i>
PDRB Harga Dasar Berdasarkan Tahun
Expand All @@ -90,10 +59,8 @@
</div><!-- /.card-body -->
</div><!-- /.card -->
</div><!-- /.col -->

<div class="col-md-8">

<div class="card mb-3">
<div class="col-lg-6 mb-3">
<div class="card text-white bg-dark h-100">
<div class="card-header">
<i class="fa fa-bar-chart" aria-hidden="true"></i>
PDRB Harga Dasar Berdasarkan Tahun
Expand All @@ -102,48 +69,8 @@
<pdrb-harga-dasar-bar-02></pdrb-harga-dasar-bar-02>
</div><!-- /.card-body -->
</div><!-- /.card -->

</div>
<div class="col-md-12">
<div class="card mb-3">
<div class="card-header">
<i class="fa fa-table" aria-hidden="true"></i>
Table
</div>
<div class="card-body">
<table class="table mb-0">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Name</th>
<th scope="col">Date</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Muhammad Ibnu Musa Al-Khawarizmi</td>
<td>780–850</td>
</tr>
<tr>
<tr>
<th scope="row">2</th>
<td>Abu Ali Al-Husein Ibnu Sina</td>
<td>986-1037</td>
</tr>
<th scope="row">3</th>
<td>Abu Nasir Al-Farabi</td>
<td>870-900</td>
</tr>
</tbody>
</table>
</div><!-- /.card-body -->
</div><!-- /.card -->

</div><!-- /col -->
</div>
</div><!-- /.row -->

</div>
</template>

144 changes: 117 additions & 27 deletions src/resources/assets/js/components/views/bantenprov/pdrb-harga-dasar/PdrbHargaDasarBar01.vue
View file
@@ -1,49 +1,140 @@
<template>
<div style="width: 100%; height: 400px;">
<IEcharts :option="bar" :loading="loading"></IEcharts>
<IEcharts :option="bar" :loading="loading" :resizable="true"></IEcharts>
</div>
</template>

<script>
import IEcharts from 'vue-echarts-v3/src/full.js';
export default {
components: {
IEcharts
},
data () {
return {
loading: false,
bar: {
title: {
text: 'ECharts bar + Ajax',
x: 'center'
show: true,
text: '',
x: 'center',
textStyle: {
fontSize: 16,
fontWeight: 'normal',
fontStyle: 'normal',
color: '#fff'
}
},
tooltip: {
show: true
},
toolbox: {
show : true,
orient : 'horizontal',
bottom: 0,
x: 'center',
feature : {
dataView: {
show: true,
lang: ['Data view', 'Cancel', ''],
readOnly: true,
backgroundColor: 'rgba(0,0,0,.65)',
textareaColor: 'rgba(0,0,0,.5)',
textareaBorderColor: 'rgba(0,0,0,.5)',
textColor: '#fff',
buttonColor: '#ddd',
buttonTextColor: '#333'
},
saveAsImage: {
show: true,
backgroundColor: 'transparent',
excludeComponents: ['toolbox', 'visualMap']
}
},
iconStyle: {
borderWidth: 1,
borderType: 'solid',
borderColor: '#fff'
}
},
xAxis: {
data: ['0','0','0','0','0','0']
show: true,
data: ['0','0','0','0','0','0'],
axisLabel: {
show: true,
fontSize: 8,
fontWeight: 'normal',
fontStyle: 'normal',
color: '#fff'
},
axisLine: {
show: true,
lineStyle: {
width: 1,
type: 'solid',
color: '#fff'
}
},
axisTick: {
show: true
},
splitArea: {
show: true
},
splitLine: {
show: true,
lineStyle: {
width: 1,
type: 'solid',
color: '#eee'
}
}
},
yAxis: {
show: true,
axisLabel: {
show: true,
fontSize: 8,
fontWeight: 'normal',
fontStyle: 'normal',
color: '#fff'
},
axisLine: {
show: true,
lineStyle: {
width: 1,
type: 'solid',
color: '#fff'
}
},
axisTick: {
show: true
},
splitArea: {
show: true
},
splitLine: {
show: true,
lineStyle: {
width: 1,
type: 'solid',
color: '#eee'
}
}
},
yAxis: {},
series: [{
type: 'bar',
data: [],
barWidth: 20,
barGap: '-100%'
barWidth: 30,
barGap: '30%',
cursor: 'default',
itemStyle: {
color: '#FFEB3B'
}
}],
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: '#CDDC39' // color at 0% position
}, {
offset: 1, color: '#8BC34A' // color at 100% position
}],
globalCoord: false // false by default
label: {
show: true,
position: 'top',
fontSize: 8,
fontWeight: 'normal',
fontStyle: 'normal',
color: '#fff'
}
}
}
Expand All @@ -62,20 +153,19 @@ export default {
setInterval(() => {
i++;
setTimeout(() => {
setTimeout(() => {
this.bar.xAxis.data = Object.keys(response.data[0].chartdata.grafik[i].tahun[0]);
this.bar.series[0].data = Object.values(response.data[0].chartdata.grafik[i].tahun[0]);
this.bar.title.text = response.data[0].chartdata.grafik[i].tingkat + ' ' + response.data[0].chartdata.grafik[i].name;
}, 10);
if(i == response.data[0].chartdata.grafik.length) {
i = 0;
}
}, 5000);
this.loading = false;
this.loading = false;
})
.catch(function(error) {
// error
Expand Down

0 comments on commit ed7da21

Please sign in to comment.