KoPKB/E-Vote
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

DONE: centralize theme color, interactive dashboard, increase winner result, refer TODO

Browse Source
This commit is contained in:
ISMAIL MASSERAN
2026-05-10 11:51:19 +08:00
parent 654a0c9fea
commit fd1baf34c8
47 changed files with 2680 additions and 932 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/assets/js/components/demo/admin/home/result.vue
+15 -55
View File
@@ -43,7 +43,7 @@
</div>
<div class="row">
<div class="col-md-7">
<div class="col-md-12">
<div class="panel panel-default result-card">
<div class="panel-heading result-card__heading">
<div class="result-card__title">
@@ -99,7 +99,10 @@
</div>
</div>
</div>
<div class="col-md-5">
</div>
<div class="row" style="margin-top: 12px;">
<div class="col-md-12">
<div class="panel panel-default result-card">
<div class="panel-heading result-card__heading">
<div class="result-card__title">
@@ -114,11 +117,15 @@
<div class="panel-body result-card__body">
<template v-if="String(position_id) === '0'">
<div class="result-mini-title">Top Calon (Overall)</div>
<div id="top-chart" class="result-top-chart"></div>
<BarChart class="result-top-chart" :labels="topNominees.map(n => n.label)"
:values="topNominees.map(n => n.votes)" background-color="rgba(54, 162, 235, 0.75)"
border-color="rgba(54, 162, 235, 1)" />
<div v-if="!topNominees.length" class="result-empty">Tiada data untuk dipaparkan.</div>
<div class="result-mini-title" style="margin-top: 14px;">Jumlah Undi Mengikut Jawatan</div>
<div id="votes-by-position-chart" class="result-top-chart"></div>
<BarChart class="result-top-chart" :labels="positionTotals.map(p => p.label)"
:values="positionTotals.map(p => p.votes)" background-color="rgba(75, 192, 192, 0.55)"
border-color="rgba(75, 192, 192, 1)" />
</template>
<template v-else>
<div class="result-empty">
@@ -134,21 +141,18 @@
</template>
<script>
import BarChart from '../../../common/BarChart.vue';
export default {
components: { BarChart },
created: function () {
this.refreshNominees();
this.$nextTick(function () {
this.initCharts();
});
},
watch: {
position_id: function () {
var vm = this;
this.$nextTick(function () {
vm.initCharts();
});
// charts are reactive via <BarChart>
}
},
@@ -188,9 +192,6 @@ export default {
$.notifyClose();
vm.data.results = response.data;
vm.data.last_update = new Date();
vm.$nextTick(function () {
vm.initCharts();
});
})
.catch(error => {
$.notifyClose();
@@ -198,47 +199,6 @@ export default {
})
},
initCharts: function () {
// Clear any previously rendered plots to avoid overlap when switching views
if ($('#top-chart').length) $('#top-chart').empty();
if ($('#votes-by-position-chart').length) $('#votes-by-position-chart').empty();
// All positions summary
if (String(this.position_id) === '0') {
if ($('#top-chart').length) {
var ticks = this.topNominees.map(function (n, i) { return [i, n.label]; });
var series = [{
label: 'Undi',
data: this.topNominees.map(function (n, i) { return [i, n.votes]; }),
bars: { show: true, barWidth: 0.6, align: 'center', fill: 0.85, lineWidth: 0 }
}];
$.plot($('#top-chart'), series, {
xaxis: { ticks: ticks, rotateTicks: 45 },
yaxis: { min: 0, tickDecimals: 0 },
grid: { hoverable: true, borderColor: '#e5e7eb' }
});
}
if ($('#votes-by-position-chart').length) {
var pt = this.positionTotals;
var ptTicks = pt.map(function (p, i) { return [i, p.label]; });
var ptSeries = [{
label: 'Undi',
data: pt.map(function (p, i) { return [i, p.votes]; }),
bars: { show: true, barWidth: 0.6, align: 'center', fill: 0.55, lineWidth: 0 }
}];
$.plot($('#votes-by-position-chart'), ptSeries, {
xaxis: { ticks: ptTicks, rotateTicks: 45 },
yaxis: { min: 0, tickDecimals: 0 },
grid: { hoverable: true, borderColor: '#e5e7eb' }
});
}
return;
}
// For per-position view, we intentionally do not render charts (UI request).
},
getPosition: function (id) {
let positions = this.data.positions;
for (var i in positions)