templates/backend/dashboard/index.html.twig line 1

Open in your IDE?
  1. {% extends "backend/base/base.html.twig" %}
  2. {% block body %}
  3.     <style>
  4.         /* Animasi fade-in */
  5.         .fade-in {
  6.             opacity: 0;
  7.             transition: opacity 0.5s ease-in-out;
  8.         }
  9.         .fade-in.show {
  10.             opacity: 1;
  11.         }
  12.     </style>
  13.     <div class="row">
  14.         {{ include('backend/dashboard/_filter.html.twig', {last_update: last_update, tipe_tahun: tipe_tahun, tahun: tahun, tanggal_awal: tanggal_awal, tanggal_akhir: tanggal_akhir, full:0}) }}
  15.         {{ include('backend/dashboard/_filter_perbandingan.html.twig', {bulan_list:bulan_list}) }}
  16.         
  17.         {{ include('backend/dashboard/_card1.html.twig', {ungroup: ungroup, res_dash:res_dash}) }}
  18.         <div class="col-12 col-lg-6 col-xxl-4 d-flex">
  19.             <div class="card rounded-4 w-100">
  20.                 <div class="card-body">
  21.                     <div class="card-header p-3 bg-transparent">
  22.                         <div class="d-flex align-items-center justify-content-between">
  23.                             <div class="">
  24.                                 <h5 class="mb-0">Waktu Proses</h5>
  25.                             </div>
  26.                         </div>
  27.                     </div>
  28.                     <div id="card_waktu_proses"></div>
  29.                 </div>
  30.             </div>
  31.         </div>
  32.         <div class="col-12 col-lg-6  col-xxl-4 d-flex flex-column d-flex align-items-stretch">
  33.             <div class="card rounded-4 w-100">
  34.                 <div class="card-body">
  35.                     <div class="d-flex align-items-center justify-content-between mb-3" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-theme="dark" title="Nilai Saving Terhadap Anggaran diambil dari Total Anggaran - Total Realisasi Berdasarkan Filter Tahun Anggaran atau Tahun Kalender  ">
  36.                         <div>
  37.                             <h3 class="mb-0">{{ (res_dash['saving_thd_anggaran']/1000000000) | number_format(2, '.', ',') }}M</h3>
  38.                             <p class="mb-1">Saving Terhadap Anggaran</p>
  39.                         </div>
  40.                         {# <div class="wh-42 d-flex align-items-center justify-content-center rounded-circle bg-grd-danger">
  41.                                                     <span class="material-icons-outlined fs-5 text-white">shopping_cart</span>
  42.                                                 </div> #}
  43.                         <div class="sebelumnya d-none">
  44.                             <p
  45.                                 id="sebelumnya-content-anggaran" class="dash-lable d-flex align-items-center gap-1 rounded mb-0 fade-in"><!-- ajax isi di sini -->
  46.                             </p>
  47.                         </div>
  48.                     </div>
  49.                     <div class="mt-4" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-theme="dark" title="Nilai Saving Terhadap Anggaran (%) diambil dari (Nilai Saving Terhadap Anggaran / Total Anggaran) * 100 Berdasarkan Filter Tahun Anggaran atau Tahun Kalender  ">
  50.                         <p class="mb-2 d-flex align-items-center justify-content-between">
  51.                             Saving(%) terhadap Anggaran
  52.                             <span>{{ res_dash['saving_thd_anggaran_persen'] }}%</span>
  53.                         </p>
  54.                         <div class="progress w-100" style="height: 6px;">
  55.                             <div class="progress-bar bg-grd-danger" style="width: {{ res_dash['saving_thd_anggaran_persen'] }}%"></div>
  56.                         </div>
  57.                     </div>
  58.                 </div>
  59.             </div>
  61.             <div class="card rounded-4 w-100 d-flex align-items-stretch">
  62.                 <div class="card-body">
  63.                     <div class="d-flex align-items-center justify-content-between mb-3" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-theme="dark" title="Nilai Saving Terhadap HPS diambil dari Total HPS - Total Realisasi Berdasarkan Filter Tahun Anggaran atau Tahun Kalender  ">
  64.                         <div>
  65.                             <h3 class="mb-0">{{ (res_dash['saving_thd_hps']/1000000000) | number_format(2, '.', ',') }}M</h3>
  66.                             <p class="mb-1">Saving Terhadap HPS</p>
  67.                         </div>
  68.                         {# <div class="wh-42 d-flex align-items-center justify-content-center rounded-circle bg-grd-danger">
  69.                                                     <span class="material-icons-outlined fs-5 text-white">shopping_cart</span>
  70.                                                 </div> #}
  71.                         <div class="sebelumnya d-none">
  72.                             <p
  73.                                 id="sebelumnya-content-hps" class="dash-lable d-flex align-items-center gap-1 rounded mb-0 fade-in"><!-- ajax isi di sini -->
  74.                             </p>
  75.                         </div>
  76.                     </div>
  77.                     <div class="mt-4" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-theme="dark" title="Nilai Saving Terhadap HPS (%) diambil dari (Nilai Saving Terhadap HPS / Total HPS) * 100 Berdasarkan Filter Tahun Anggaran atau Tahun Kalender">
  78.                         <p class="mb-2 d-flex align-items-center justify-content-between">
  79.                             Saving(%) terhadap HPS
  80.                             <span>{{ res_dash['saving_thd_hps_persen'] }}%</span>
  81.                         </p>
  82.                         <div class="progress w-100" style="height: 6px;">
  83.                             <div class="progress-bar bg-grd-danger" style="width: {{ res_dash['saving_thd_hps_persen'] }}%"></div>
  84.                         </div>
  85.                     </div>
  86.                 </div>
  87.             </div>
  88.         </div>
  89.         <div class="col-xl-12 col-xxl-8 col-xxl-4 col-xxl-2 d-flex align-items-stretch">
  90.             <div class="card w-100 rounded-4">
  91.                 <div class="card-body">
  92.                     <div class="d-flex flex-column gap-3">
  93.                         <div class="d-flex align-items-start justify-content-between">
  94.                             <div class="">
  95.                                 <h5 class="mb-0">Komposisi PK dan Metode Pemilihan</h5>
  96.                                 <h7 class="mb-0">Dihitung berdasarkan paket selesai</h7>
  97.                             </div>
  98.                         </div>
  99.                     </div>
  101.                     <div class="position-relative">
  102.                         <div class="piechart-legend">
  103.                             {% set colors = ['#ff6a00', '#98ec2d', '#3494e6', '#8e44ad', '#f1c40f'] %}
  104.                             {% set total = 0 %}
  105.                             {% for row in res_dash['range_nilai_pk'] %}
  106.                                 {% set total = total + row.jumlah_pk %}
  107.                             {% endfor %}
  108.                             Total
  109.                         </div>
  110.                         <div
  111.                             class="d-flex align-items-center justify-content-between gap-3">
  113.                             <!-- Bagian Donut Chart (Nomor 1) -->
  114.                             <div id="chart5" style="flex: 1; min-width: 200px;"></div>
  116.                             <!-- Bagian Progress List (Nomor 2) -->
  117.                             <div class="d-flex flex-column gap-3" style="flex: 0.7; font-size: 0.85rem;">
  118.                                 {% for row in res_dash['range_nilai_pk'] %}
  119.                                     {% set persen = total ? ((row.jumlah_pk / total) * 100)|round(0) : 0 %}
  120.                                     <div>
  121.                                         <div class="d-flex justify-content-between mb-1">
  122.                                             <span class="d-flex align-items-center gap-2">
  123.                                                 <span class="material-icons-outlined fs-6" style="color: {{ colors[loop.index0] ?? '#000' }}">
  124.                                                     fiber_manual_record
  125.                                                 </span>
  126.                                                 {{ row.range_nilai }}
  127.                                             </span>
  128.                                             <span>{{ persen }}%</span>
  129.                                         </div>
  130.                                         <div class="progress" style="height: 6px;">
  131.                                             <div class="progress-bar" role="progressbar" style="width: {{ persen }}%; background-color: {{ colors[loop.index0] ?? '#000' }}" aria-valuenow="{{ persen }}" aria-valuemin="0" aria-valuemax="100"></div>
  132.                                         </div>
  133.                                     </div>
  134.                                 {% endfor %}
  135.                             </div>
  136.                         </div>
  138.                         {% set tender = res_dash['metode_tender'] %}
  139.                         {% set pl = res_dash['metode_pl'] %}
  140.                         {% set total = tender + pl %}
  142.                         {% set nilai_tender = res_dash['nilai_metode_tender'] + 0 %}
  143.                         {% set nilai_pl = res_dash['nilai_metode_pl'] + 0 %}
  144.                         {% set total_nilai = nilai_tender + nilai_pl %}
  146.                         <div class="d-flex flex-column flex-lg-row align-items-start justify-content-around border p-3 rounded-4 mt-3 gap-3">
  147.                             <!-- Tender -->
  148.                             <div class="d-flex align-items-center gap-4">
  149.                                 <div>
  150.                                     <p class="mb-0 data-attributes">
  151.                                         <span data-peity='{ "fill": ["#2196f3", "rgb(255 255 255 / 12%)"], "innerRadius": 32, "radius": 40 }'>{{tender}}/{{total}}</span>
  152.                                     </p>
  153.                                 </div>
  154.                                 <div>
  155.                                     <p class="mb-1 fs-6 fw-bold">Tender</p>
  156.                                     <h2 class="mb-0" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-theme="dark" title="Jumlah PK diambil dari Kolom no_pk Berdasarkan Filter status_pr (approve,submit) Tahun Anggaran atau Tahun Kalender(tgl_approval_sppbj)">{{ tender }}</h2>
  157.                                     <p class="mb-0">
  158.                                         <span class="text-success me-2 fw-medium">
  159.                                             {{  total > 0 ? (tender / total * 100)|number_format(1, '.', ',') : 0 }}%
  160.                                         </span>
  161.                                         <span data-bs-toggle="tooltip" data-bs-placement="top" data-bs-theme="dark" title="Nilai Paket Pengadaan diambil dari Kolom Total Nilai Berdasarkan Filter status_pr (approve,submit) Tahun Anggaran atau Tahun Kalender(tgl_approval_sppbj)">
  162.                                             {{(nilai_tender / 1000000000)|number_format(2, '.', ',')}}M
  163.                                         </span>
  164.                                     </p>
  165.                                 </div>
  166.                             </div>
  168.                             <div class="vr"></div>
  170.                             <!-- PL -->
  171.                             <div class="d-flex align-items-center gap-4">
  172.                                 <div>
  173.                                     <p class="mb-0 data-attributes">
  174.                                         <span data-peity='{ "fill": ["#ffd200", "rgb(255 255 255 / 12%)"], "innerRadius": 32, "radius": 40 }'>{{pl}}/{{total}}</span>
  175.                                     </p>
  176.                                 </div>
  177.                                 <div>
  178.                                     <p class="mb-1 fs-6 fw-bold">PL</p>
  179.                                     <h2 class="mb-0" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-theme="dark" title="Jumlah PK diambil dari Kolom no_pk Berdasarkan Filter status_pr (approve,submit) Tahun Anggaran atau Tahun Kalender(tgl_approval_sppbj)">{{ pl }}</h2>
  180.                                     <p class="mb-0">
  181.                                         <span class="text-success me-2 fw-medium">
  182.                                             {{  total > 0 ? (pl / total * 100)|number_format(1, '.', ',') : 0 }}%
  183.                                         </span>
  184.                                         <span data-bs-toggle="tooltip" data-bs-placement="top" data-bs-theme="dark" title="Nilai Paket Pengadaan diambil dari Kolom Total Nilai Berdasarkan Filter status_pr (approve,submit) Tahun Anggaran atau Tahun Kalender(tgl_approval_sppbj)">
  185.                                             {{ (nilai_pl / 1000000000)|number_format(2, '.', ',') }}M
  186.                                         </span>
  187.                                     </p>
  188.                                 </div>
  189.                             </div>
  190.                         </div>
  191.                     </div>
  192.                 </div>
  193.             </div>
  194.         </div>
  195.         <div class="col-xl-12 col-xxl-6 col-xxl-4 col-xs-4 col-xxl-2 d-flex align-items-stretch">
  196.             <div class="card w-100 rounded-4">
  197.                 <div class="card-body">
  198.                     <div class="d-flex align-items-start justify-content-between mb-1">
  199.                         <div class="">
  200.                             <h5 class="mb-0">Nilai Realisasi dan Jumlah PK</h5>
  201.                             <p class="mb-0">Kantor Pusat dan Pabrik Gula</p>
  202.                         </div>
  203.                         
  204.                     </div>
  205.                     {# <div class="chart-container2"> #}
  206.                         <div id="chart_realisai_pg"></div>
  207.                     {# </div> #}
  208.                     {# <div class="text-center"> #}
  209.                         <p class="mb-0 font-12">hitung Jumlah PK dan Realisasi Kantor Pusat(HO) dan Pabrik Gula(PG) berdasarkan Tahun anggaran atau Tahun Kalender (Sesuai Filter)</p>
  210.                     {# </div> #}
  211.                 </div>
  212.             </div>
  213.         </div>
  215.         <div class="col-xl-12 col-xxl-6 col-xxl-4  col-xxl-2 d-flex align-items-stretch">
  216.             <div class="card w-100 rounded-4">
  217.                 <div class="card-body">
  218.                     <div class="d-flex align-items-start justify-content-between mb-1">
  219.                         <div class="">
  220.                             <h5 class="mb-0">Nilai Realisasi dan Jumlah PK</h5>
  221.                             <p class="mb-0">MKSO</p>
  222.                         </div>
  223.                         
  224.                     </div>
  225.                     <div id="chart_realisai_mkso"></div>
  226.                 {# {{ include('backend/dashboard/_chart_realisasi_efisiensi.html.twig', {res_kotak_bawah:res_kotak_bawah,group:group}) }} #}
  227.                     <p>hitung Jumlah PK dan Realisasi Kebun (MKSO) berdasarkan Tahun anggaran atau Tahun Kalender (Sesuai Filter)</p>
  228.                 </div>
  229.             </div>
  230.         </div>
  231.         <div class="col-lg-12 col-xxl-12 d-flex align-items-stretch">
  232.             <div class="card w-100 rounded-4">
  233.                 <div class="card-body">
  234.                 <div class="card-header p-3 bg-transparent">
  235.                     <div class="d-flex align-items-center justify-content-between">
  236.                         <div class="">
  237.                             <h5 class="mb-0">Realisasi dan Saving</h5>
  238.                         </div>
  239.                     </div>
  240.                 </div>
  241.                 <div id="table_realisasi"></div>
  242.                 {# {{ include('backend/dashboard/_table.html.twig', {res_kotak_tabel: res_kotak_tabel}) }} #}
  244.             </div>
  245.             </div>
  246.         </div>
  247.     </div>
  249. </div>
  250. <!--end overlay-->
  251. <script>
  252.         $(document).ready(function () {
  260. // chart 5
  262. var series = [{% for row in res_dash['range_nilai_pk'] %}{{ row.jumlah_pk }}{% if not loop.last %},{% endif %}{% endfor %}];
  264. var labels = [{% for row in res_dash['range_nilai_pk'] %}"{{ row.range_nilai }}"{% if not loop.last %},{% endif %}{% endfor %}];
  266. var colors = [{% for c in colors %}"{{ c }}"{% if not loop.last %},{% endif %}{% endfor %}];
  268. var options = {
  269. series: series,
  270. chart: {
  271. height: 290,
  272. type: 'donut'
  273. },
  274. labels: labels,
  275. colors: colors,
  276. legend: {
  277. show: false // ❌ matikan legend bawaan
  278. },
  279. dataLabels: {
  280. enabled: false // ❌ matikan label di luar slice
  281. },
  282. plotOptions: {
  283. pie: {
  284. donut: {
  285. size: "85%",
  286. labels: {
  287. show: true,
  288. name: {
  289. show: false
  290. }, // ❌ jangan tampilkan nama di tengah
  291. value: {
  292. show: true
  293. }, // ✅ hanya angka total/series
  294. total: {
  295. show: true,
  296. // label: 'Total',
  297. fontSize: '16px',
  298. color: '#fff',
  299. formatter: function (w) {
  300. return w.globals.seriesTotals.reduce((a, b) => a + b, 0);
  301. }
  302. }
  303. }
  304. }
  305. }
  306. }
  307. };
  309. var chart = new ApexCharts(document.querySelector("#chart5"), options);
  310. chart.render();
  313. // chart 6
  314. var seriesData6 = [{{ res_dash['metode_pl'] }}, {{ res_dash['metode_tender'] }}];
  316. var total6 = seriesData6.reduce((a, b) => a + b, 0);
  318. var options6 = {
  319. series: seriesData6,
  320. chart: {
  321. height: 290,
  322. type: 'donut'
  323. },
  324. labels: [
  325. "PL", "Tender"
  326. ],
  327. legend: {
  328. show: false
  329. },
  330. fill: {
  331. type: 'gradient',
  332. gradient: {
  333. shade: 'dark',
  334. gradientToColors: [
  335. '#ee0979', '#17ad37'
  336. ],
  337. shadeIntensity: 1,
  338. type: 'vertical',
  339. opacityFrom: 1,
  340. opacityTo: 1
  341. }
  342. },
  343. colors: [
  344. "#ff6a00", "#98ec2d"
  345. ],
  346. dataLabels: {
  347. enabled: false
  348. },
  349. plotOptions: {
  350. pie: {
  351. donut: {
  352. size: "85%",
  353. labels: {
  354. show: true,
  355. total: {
  356. show: true,
  357. label: 'Total',
  358. formatter: function () {
  359. return total6;
  360. }
  361. },
  362. name: {
  363. show: false
  364. },
  365. value: {
  366. show: false
  367. }
  368. }
  369. }
  370. }
  371. }
  372. };
  374. var chart6 = new ApexCharts(document.querySelector("#chart6"), options6);
  375. chart6.render();
  377. // === isi otomatis persen bawah ===
  378. document.addEventListener("DOMContentLoaded", function () {
  379. var plPercent = total6 ? ((seriesData6[0] / total6) * 100).toFixed(0) : 0;
  380. var tenderPercent = total6 ? ((seriesData6[1] / total6) * 100).toFixed(0) : 0;
  382. document.querySelector("#legend6-pl").innerText = plPercent + "%";
  383. document.querySelector("#legend6-tender").innerText = tenderPercent + "%";
  385. document.querySelector("#bar6-pl").style.width = plPercent + "%";
  386. document.querySelector("#bar6-tender").style.width = tenderPercent + "%";
  387. });
  388. });
  390. //table realisasi
  391. $(document).ready(function() {
  392.         let tahun        = "{{ tahun }}"; 
  393.         let tanggal_awal = "{{ tanggal_awal }}"; 
  394.         let tanggal_akhir= "{{ tanggal_akhir }}"; 
  395.         let sumber_dana  = "{{ sumber_dana }}"; 
  396.         let tipe_tahun   = "{{ tipe_tahun }}"; 
  398.         // table
  399.         $.ajax({
  400.             url: "{{ path('dashboard_table_realisasi') }}",
  401.             method: "POST",
  402.             data: {
  403.                 tahun: tahun,
  404.                 tanggal_awal: tanggal_awal,
  405.                 tanggal_akhir: tanggal_akhir,
  406.                 sumber_dana: sumber_dana,
  407.                 tipe_tahun: tipe_tahun
  408.             },
  409.             beforeSend: function() {
  410.                 // tampilkan loading
  411.                 $("#table_realisasi").html('<div class="text-center p-3"><div class="spinner-border text-primary" role="status"></div><br/>Loading...</div>');
  412.             },
  413.             success: function(html) {
  414.                 $("#table_realisasi").html(html);
  415.             }
  416.         });
  418.         // load pertama kali
  419.         $.ajax({
  420.             url: "{{ path('dashboard_chart_realisasi_efisiensi_pg') }}",
  421.             method: "POST",
  422.             data: {
  423.                 tahun: tahun,
  424.                 tanggal_awal: tanggal_awal,
  425.                 tanggal_akhir: tanggal_akhir,
  426.                 sumber_dana: sumber_dana,
  427.                 tipe_tahun: tipe_tahun
  428.             },
  429.             beforeSend: function() {
  430.                 // tampilkan loading
  431.                 $("#chart_realisai_pg").html('<div class="text-center p-3"><div class="spinner-border text-primary" role="status"></div><br/>Loading...</div>');
  432.             },
  433.             success: function(html) {
  434.                 $("#chart_realisai_pg").html(html);
  435.             }
  436.         });
  438.         // load pertama kali
  439.         $.ajax({
  440.             url: "{{ path('dashboard_chart_realisasi_efisiensi_mkso') }}",
  441.             method: "POST",
  442.             data: {
  443.                 tahun: tahun,
  444.                 tanggal_awal: tanggal_awal,
  445.                 tanggal_akhir: tanggal_akhir,
  446.                 sumber_dana: sumber_dana,
  447.                 tipe_tahun: tipe_tahun
  448.             },
  449.             beforeSend: function() {
  450.                 // tampilkan loading
  451.                 $("#chart_realisai_mkso").html('<div class="text-center p-3"><div class="spinner-border text-primary" role="status"></div><br/>Loading...</div>');
  452.             },
  453.             success: function(html) {
  454.                 $("#chart_realisai_mkso").html(html);
  455.             }
  456.         });
  458.         // load card_waktu_proses
  459.         $.ajax({
  460.             url: "{{ path('dashboard_card_waktu_proses') }}",
  461.             method: "POST",
  462.             data: {
  463.                 tahun: tahun,
  464.                 tanggal_awal: tanggal_awal,
  465.                 tanggal_akhir: tanggal_akhir,
  466.                 sumber_dana: sumber_dana,
  467.                 tipe_tahun: tipe_tahun
  468.             },
  469.             beforeSend: function() {
  470.                 // tampilkan loading
  471.                 $("#card_waktu_proses").html('<div class="text-center p-3"><div class="spinner-border text-primary" role="status"></div><br/>Loading...</div>');
  472.             },
  473.             success: function(html) {
  474.                 $("#card_waktu_proses").html(html);
  475.             }
  476.         });
  477.     });
  479.     </script>
  481.     <script>
  483.         $(function() {
  484.     let tahun        = "{{ tahun }}"; 
  485.     let tanggal_awal = "{{ tanggal_awal }}"; 
  486.     let tanggal_akhir= "{{ tanggal_akhir }}"; 
  487.     let sumber_dana  = "{{ sumber_dana }}"; 
  488.     let tipe_tahun   = "{{ tipe_tahun }}"; 
  490.     $("#flexSwitchCheckChecked").on("change", function() {
  491.         if ($(this).is(":checked")) {
  492.             // tampilkan div dan spinner
  493.             $(".filter_komparasi").removeClass("d-none");
  494.             $(".sebelumnya").removeClass("d-none");
  495.             $("#sebelumnya-content-anggaran")
  496.                 .attr("class", "dash-lable d-flex align-items-center gap-1 rounded mb-0")
  497.                 .html('<div class="spinner-border spinner-border-sm text-primary" role="status"></div>');
  498.             $("#sebelumnya-content-hps")
  499.                 .attr("class", "dash-lable d-flex align-items-center gap-1 rounded mb-0")
  500.                 .html('<div class="spinner-border spinner-border-sm text-primary" role="status"></div>');
  502.             $.ajax({
  503.                 url: "{{ path('dashboard_chart_perbandingan') }}",
  504.                 type: "POST",
  505.                 dataType: "json",
  506.                 data: {
  507.                     tahun: tahun,
  508.                     tanggal_awal: tanggal_awal,
  509.                     tanggal_akhir: tanggal_akhir,
  510.                     sumber_dana: sumber_dana,
  511.                     tipe_tahun: tipe_tahun
  512.                 },
  513.                 success: function(data) {
  514.                     let current = parseFloat(data.saving_thd_anggaran) / 1000000000;
  515.                     let last    = parseFloat(data.saving_thd_anggaran_sebelumnya) / 1000000000;
  516.                     let current_hps = parseFloat(data.saving_thd_hps) / 1000000000;
  517.                     let last_hps    = parseFloat(data.saving_thd_hps_sebelumnya) / 1000000000;
  518.                     let diff    = current - last;
  520.                     // format angka 2 digit
  521.                     // let formattedDiff = new Intl.NumberFormat('id-ID', {
  522.                     //     minimumFractionDigits: 2,
  523.                     //     maximumFractionDigits: 2
  524.                     // }).format(Math.abs(diff));
  525.                     let formattedDiff = new Intl.NumberFormat('id-ID', {
  526.                         minimumFractionDigits: 2,
  527.                         maximumFractionDigits: 2
  528.                     }).format(Math.abs(last));
  530.                     let formattedHps = new Intl.NumberFormat('id-ID', {
  531.                         minimumFractionDigits: 2,
  532.                         maximumFractionDigits: 2
  533.                     }).format(Math.abs(last_hps));
  535.                     // ikon & warna berdasarkan selisih
  536.                     // let icon = diff >= 0 ? "arrow_upward" : "arrow_downward";
  537.                     // let colorClass = diff >= 0 
  538.                     //     ? "text-success bg-success bg-opacity-10"
  539.                     //     : "text-danger bg-danger bg-opacity-10";
  540.                     let icon = last > current ? "arrow_upward" : "arrow_downward";
  541.                     let colorClass = last > current 
  542.                         ? "text-success bg-success bg-opacity-10"
  543.                         : "text-danger bg-danger bg-opacity-10";
  545.                     let icon_hps = last_hps > current_hps ? "arrow_upward" : "arrow_downward";
  546.                     let colorClass_hps = last_hps > current_hps 
  547.                         ? "text-success bg-success bg-opacity-10"
  548.                         : "text-danger bg-danger bg-opacity-10";
  550.                     $("#sebelumnya-content-anggaran")
  551.                         .attr("class", "dash-lable d-flex align-items-center gap-1 rounded mb-0 " + colorClass)
  552.                         .html('<span class="material-icons-outlined fs-6">' + icon + '</span>' + formattedDiff + ' M');
  553.                     $("#sebelumnya-content-hps")
  554.                         .attr("class", "dash-lable d-flex align-items-center gap-1 rounded mb-0 " + colorClass_hps)
  555.                         .html('<span class="material-icons-outlined fs-6">' + icon_hps + '</span>' + formattedHps + ' M');
  556.                 },
  557.                 error: function(xhr) {
  558.                     $("#sebelumnya-content-anggaran").html('<span class="text-danger">Error load data</span>');
  559.                     console.error(xhr.responseText);
  560.                     $("#sebelumnya-content-hps").html('<span class="text-danger">Error load data</span>');
  561.                     console.error(xhr.responseText);
  562.                 }
  563.             });
  564.         } else {
  565.             $(".filter_komparasi").addClass("d-none");
  566.             $(".sebelumnya").addClass("d-none");
  567.             $("#sebelumnya-content-anggaran").html("");
  568.             $("#sebelumnya-content-hps").html("");
  569.         }
  570.     });
  571. });
  575. </script>
  576. {% endblock %}