You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
110 lines
4.0 KiB
110 lines
4.0 KiB
7 months ago
|
import React, { useEffect, useRef, useState } from "react"
|
||
|
|
import { Col, Row, Table } from "reactstrap"
|
||
|
|
import { format_angka } from "../util"
|
||
|
|
import collect from "collect.js"
|
||
|
|
const date = new Date()
|
||
|
|
const cBulan = date.getMonth() + 1
|
||
|
|
|
||
|
|
const Sof = ({ dataSend }) => {
|
||
|
|
const base_url = "<?=base_url()?>"
|
||
|
|
|
||
|
|
const [data, setData] = useState([])
|
||
|
|
const [total, setTotal] = useState({ totalC: 0, totalP1: 0, totalP2: 0 })
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
jQuery.get({
|
||
|
|
url: base_url + "kewilayahan/kytp/sebaranSof",
|
||
|
|
dataType: "json",
|
||
|
|
type: "POST",
|
||
|
|
data: {
|
||
|
|
...dataSend,
|
||
|
|
tahun: date.getFullYear(),
|
||
|
|
bulan: cBulan
|
||
|
|
},
|
||
|
|
success: (data) => {
|
||
|
|
console.log(data)
|
||
|
|
setData(data.data)
|
||
|
|
setTotal({
|
||
|
|
totalC: collect(data.data).sum("JML_C"),
|
||
|
|
totalP1: collect(data.data).sum("JML_P1"),
|
||
|
|
totalP2: collect(data.data).sum("JML_P2")
|
||
|
|
})
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}, [dataSend])
|
||
|
|
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<Row>
|
||
|
|
<Col>
|
||
|
|
<div className="d-flex justify-content-center">
|
||
|
|
<Table bordered style={{ width: "auto", fontSize: "0.85rem" }}>
|
||
|
|
<thead className="bg-primary text-white">
|
||
|
|
<tr>
|
||
|
|
<th class="text-center text-white" rowspan="2">
|
||
|
|
Lapisan
|
||
|
|
</th>
|
||
|
|
<th class="text-center text-white" colspan="2">
|
||
|
|
s.d Sekarang
|
||
|
|
</th>
|
||
|
|
<th class="text-center text-white" colspan="2">
|
||
|
|
s.d Bulan Lalu
|
||
|
|
</th>
|
||
|
|
<th class="text-center text-white" colspan="2">
|
||
|
|
s.d 2 Bulan Lalu
|
||
|
|
</th>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<th class="text-center text-white">Jml WP</th>
|
||
|
|
<th class="text-center text-white">%</th>
|
||
|
|
<th class="text-center text-white">Jml WP</th>
|
||
|
|
<th class="text-center text-white">%</th>
|
||
|
|
<th class="text-center text-white">Jml WP</th>
|
||
|
|
<th class="text-center text-white">%</th>
|
||
|
|
</tr>
|
||
|
|
<tr class="">
|
||
|
|
<th class="text-center text-white">1</th>
|
||
|
|
<th class="text-center text-white">2</th>
|
||
|
|
<th class="text-center text-white">3</th>
|
||
|
|
<th class="text-center text-white">4</th>
|
||
|
|
<th class="text-center text-white">5</th>
|
||
|
|
<th class="text-center text-white">6</th>
|
||
|
|
<th class="text-center text-white">7</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
{data.map((val, idx) => {
|
||
|
|
return (
|
||
|
|
<tr id={idx}>
|
||
|
|
<td class="text-start p-1 font-weight-bold">{val.LAPISAN}</td>
|
||
|
|
<td class="text-center p-1">{val.JML_C}</td>
|
||
|
|
<td class="text-center p-1">{((val.JML_C / total.totalC) * 100).toFixed(2) + "%"}</td>
|
||
|
|
<td class="text-center p-1">{val.JML_P1}</td>
|
||
|
|
<td class="text-center p-1">{((val.JML_P1 / total.totalP1) * 100).toFixed(2) + "%"}</td>
|
||
|
|
<td class="text-center p-1">{val.JML_P2}</td>
|
||
|
|
<td class="text-center p-1">{((val.JML_P2 / total.totalP2) * 100).toFixed(2) + "%"}</td>
|
||
|
|
</tr>
|
||
|
|
)
|
||
|
|
})}
|
||
|
|
</tbody>
|
||
|
|
<tfoot>
|
||
|
|
<tr className="font-weight-bold">
|
||
|
|
<td class="text-center">Total</td>
|
||
|
|
<td class="text-center">{total.totalC}</td>
|
||
|
|
<td class="text-center">100%</td>
|
||
|
|
<td class="text-center">{total.totalP1}</td>
|
||
|
|
<td class="text-center">100%</td>
|
||
|
|
<td class="text-center">{total.totalP2}</td>
|
||
|
|
<td class="text-center">100%</td>
|
||
|
|
</tr>
|
||
|
|
</tfoot>
|
||
|
|
</Table>
|
||
|
|
</div>
|
||
|
|
</Col>
|
||
|
|
</Row>
|
||
|
|
</>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
export default Sof
|