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.
658 lines
18 KiB
658 lines
18 KiB
7 months ago
|
import React, { useEffect, useRef, useState } from "react"
|
||
|
|
import ReactDOM from "react-dom"
|
||
|
|
import { Button, Card, CardBody, CardText, CardTitle, Col, Label, Nav, NavItem, NavLink, Row, TabContent, TabPane } from "reactstrap"
|
||
|
|
import Select from "react-select"
|
||
|
|
import jQuery from "jquery"
|
||
|
|
import collect from "collect.js"
|
||
|
|
import { format_angka, isObjEmpty } from "./util"
|
||
|
|
import { MultiSelect } from "react-multi-select-component"
|
||
|
|
import Highcharts from 'highcharts'
|
||
|
|
import HighchartsReact from 'highcharts-react-official'
|
||
|
|
import { Toast } from 'primereact/toast';
|
||
|
|
import { Button as ButtonP } from 'primereact/button';
|
||
|
|
import "primereact/resources/themes/bootstrap4-light-blue/theme.css";
|
||
|
|
import TabProgresifitas from "./TabProgresifitas"
|
||
|
|
// import 'bootstrap/dist/css/bootstrap.m in.css';
|
||
|
|
|
||
|
|
const Root = () => {
|
||
|
|
const base_url = "<?=base_url()?>"
|
||
|
|
const refChart1 = useRef(null)
|
||
|
|
const toast = useRef(null);
|
||
|
|
const [active, setActive] = useState('wilayah')
|
||
|
|
const toggle = tab => {
|
||
|
|
setActive(tab)
|
||
|
|
}
|
||
|
|
|
||
|
|
const [prop, setProp] = useState({})
|
||
|
|
const [kota, setKota] = useState({})
|
||
|
|
const [kec, setKec] = useState([])
|
||
|
|
const [kel, setKel] = useState([])
|
||
|
|
|
||
|
|
const [propSelected, setPropSelected] = useState({})
|
||
|
|
const [kotaSelected, setKotaSelected] = useState({})
|
||
|
|
const [kecSelected, setKecSelected] = useState([])
|
||
|
|
const [kelSelected, setKelSelected] = useState([])
|
||
|
|
|
||
|
|
const [kanwil, setKanwil] = useState({})
|
||
|
|
const [kpp, setKpp] = useState({})
|
||
|
|
const [seksi, setSeksi] = useState([])
|
||
|
|
const [ar, setAr] = useState([])
|
||
|
|
const [zp, setZp] = useState([])
|
||
|
|
|
||
|
|
const [kanwilSelected, setKanwilSelected] = useState({})
|
||
|
|
const [kppSelected, setKppSelected] = useState({})
|
||
|
|
const [seksiSelected, setSeksiSelected] = useState([])
|
||
|
|
const [arSelected, setArSelected] = useState([])
|
||
|
|
const [zpSelected, setZpSelected] = useState([])
|
||
|
|
|
||
|
|
const [dataGraphMatoa, setDataGraphMatoa] = useState({ poi_agg: [], kpdl_agg: [] })
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
|
||
|
|
jQuery.ajax({
|
||
|
|
url: base_url + 'kewilayahan/ref/propinsi', method: "GET", dataType: "json", success: ((data) => {
|
||
|
|
setProp(data)
|
||
|
|
})
|
||
|
|
})
|
||
|
|
|
||
|
|
jQuery.ajax({
|
||
|
|
url: base_url + 'kewilayahan/ref/zpkanwil', method: "GET", dataType: "json", success: ((data) => {
|
||
|
|
setKanwil(data)
|
||
|
|
})
|
||
|
|
})
|
||
|
|
}, [])
|
||
|
|
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
setKota({})
|
||
|
|
setKec([])
|
||
|
|
setKel([])
|
||
|
|
setKotaSelected({})
|
||
|
|
setKecSelected([])
|
||
|
|
setKelSelected([])
|
||
|
|
if (propSelected && !isObjEmpty(propSelected)) {
|
||
|
|
const prop = propSelected.value
|
||
|
|
jQuery.ajax({
|
||
|
|
url: base_url + 'kewilayahan/ref/kota',
|
||
|
|
method: "GET",
|
||
|
|
dataType: "json",
|
||
|
|
data: { prop },
|
||
|
|
success: ((data) => {
|
||
|
|
setKota(data)
|
||
|
|
})
|
||
|
|
})
|
||
|
|
}
|
||
|
|
}, [propSelected])
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
setKec([])
|
||
|
|
setKel([])
|
||
|
|
setKecSelected([])
|
||
|
|
setKelSelected([])
|
||
|
|
if (kotaSelected && !isObjEmpty(kotaSelected)) {
|
||
|
|
const kota = kotaSelected.value
|
||
|
|
jQuery.ajax({
|
||
|
|
url: base_url + 'kewilayahan/ref/kecamatan',
|
||
|
|
method: "GET",
|
||
|
|
dataType: "json",
|
||
|
|
data: { kota },
|
||
|
|
success: ((data) => {
|
||
|
|
setKec(data)
|
||
|
|
})
|
||
|
|
})
|
||
|
|
|
||
|
|
}
|
||
|
|
}, [kotaSelected])
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
setKel([])
|
||
|
|
setKelSelected([])
|
||
|
|
console.log({ kecSelected })
|
||
|
|
if (kecSelected.length && !isObjEmpty(kecSelected)) {
|
||
|
|
const kec = collect(kecSelected).pluck('value').all()
|
||
|
|
console.log({ kec })
|
||
|
|
jQuery.ajax({
|
||
|
|
url: base_url + 'kewilayahan/ref/kelurahan',
|
||
|
|
method: "GET",
|
||
|
|
dataType: "json",
|
||
|
|
data: { kec },
|
||
|
|
success: ((data) => {
|
||
|
|
setKel(data)
|
||
|
|
})
|
||
|
|
})
|
||
|
|
|
||
|
|
}
|
||
|
|
}, [kecSelected])
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
setKpp([])
|
||
|
|
setSeksi([])
|
||
|
|
setAr([])
|
||
|
|
setZp([])
|
||
|
|
setKppSelected([])
|
||
|
|
setSeksiSelected([])
|
||
|
|
setArSelected([])
|
||
|
|
setZpSelected([])
|
||
|
|
if (kanwilSelected && !isObjEmpty(kanwilSelected)) {
|
||
|
|
const kanwil = kanwilSelected.value
|
||
|
|
jQuery.ajax({
|
||
|
|
url: base_url + 'kewilayahan/ref/zpkpp',
|
||
|
|
method: "GET",
|
||
|
|
dataType: "json",
|
||
|
|
data: { kanwil },
|
||
|
|
success: ((data) => {
|
||
|
|
setKpp(data)
|
||
|
|
})
|
||
|
|
})
|
||
|
|
}
|
||
|
|
}, [kanwilSelected])
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
setSeksi([])
|
||
|
|
setAr([])
|
||
|
|
setZp([])
|
||
|
|
setSeksiSelected([])
|
||
|
|
setArSelected([])
|
||
|
|
setZpSelected([])
|
||
|
|
if (kppSelected && !isObjEmpty(kppSelected)) {
|
||
|
|
const kpp = collect(kppSelected).pluck('value').all()
|
||
|
|
jQuery.ajax({
|
||
|
|
url: base_url + 'kewilayahan/ref/zpseksi',
|
||
|
|
method: "GET",
|
||
|
|
dataType: "json",
|
||
|
|
data: { kpp },
|
||
|
|
success: ((data) => {
|
||
|
|
setSeksi(data)
|
||
|
|
})
|
||
|
|
})
|
||
|
|
}
|
||
|
|
}, [kppSelected])
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
setAr([])
|
||
|
|
setZp([])
|
||
|
|
setArSelected([])
|
||
|
|
setZpSelected([])
|
||
|
|
if (seksiSelected && !isObjEmpty(seksiSelected)) {
|
||
|
|
const kpp = collect(kppSelected).pluck('value').all()
|
||
|
|
const seksi = collect(seksiSelected).pluck('value').all()
|
||
|
|
|
||
|
|
jQuery.ajax({
|
||
|
|
url: base_url + 'kewilayahan/ref/zpar',
|
||
|
|
method: "GET",
|
||
|
|
dataType: "json",
|
||
|
|
data: { kpp, seksi },
|
||
|
|
success: ((data) => {
|
||
|
|
setAr(data)
|
||
|
|
})
|
||
|
|
})
|
||
|
|
}
|
||
|
|
}, [seksiSelected])
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
setZp([])
|
||
|
|
setZpSelected([])
|
||
|
|
if (arSelected && !isObjEmpty(arSelected)) {
|
||
|
|
const kpp = collect(kppSelected).pluck('value').all()
|
||
|
|
const seksi = collect(seksiSelected).pluck('value').all()
|
||
|
|
const ar = collect(arSelected).pluck('value').all()
|
||
|
|
jQuery.ajax({
|
||
|
|
url: base_url + 'kewilayahan/ref/zpzp',
|
||
|
|
method: "GET",
|
||
|
|
dataType: "json",
|
||
|
|
data: { kpp, seksi, ar },
|
||
|
|
success: ((data) => {
|
||
|
|
setZp(data)
|
||
|
|
})
|
||
|
|
})
|
||
|
|
}
|
||
|
|
}, [arSelected])
|
||
|
|
|
||
|
|
const buttonProsesOnClick = () => {
|
||
|
|
const opsiWilZona = active
|
||
|
|
const adm4_pcode = collect(kelSelected).pluck('value').all()
|
||
|
|
const id_poly_zona = collect(zpSelected).pluck('value').all()
|
||
|
|
|
||
|
|
|
||
|
|
let datasend = {
|
||
|
|
opsiWilZona,
|
||
|
|
}
|
||
|
|
|
||
|
|
switch (opsiWilZona) {
|
||
|
|
case 'wilayah':
|
||
|
|
if (adm4_pcode.length) {
|
||
|
|
datasend.adm4_pcode = adm4_pcode
|
||
|
|
} else {
|
||
|
|
toast.current.show({ severity: 'info', summary: 'Info', detail: 'Kelurahan harus dipilih' });
|
||
|
|
}
|
||
|
|
break;
|
||
|
|
case 'zona':
|
||
|
|
if (id_poly_zona.length) {
|
||
|
|
|
||
|
|
datasend.id_poly_zona = id_poly_zona
|
||
|
|
} else {
|
||
|
|
toast.current.show({ severity: 'info', summary: 'Info', detail: 'Zona harus dipilih' });
|
||
|
|
|
||
|
|
}
|
||
|
|
break;
|
||
|
|
default:
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
|
||
|
|
jQuery.ajax({
|
||
|
|
url: base_url + 'kewilayahan/kytp/graph_matoa',
|
||
|
|
dataType: "json",
|
||
|
|
type: "POST",
|
||
|
|
data: datasend,
|
||
|
|
success: (data) => {
|
||
|
|
setDataGraphMatoa(data)
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
Highcharts.setOptions({
|
||
|
|
lang: {
|
||
|
|
decimalPoint: ',',
|
||
|
|
thousandsSep: '.',
|
||
|
|
numericSymbols: ["rb", "jt", "M", "T", "P", "E"]
|
||
|
|
},
|
||
|
|
|
||
|
|
tooltip: {
|
||
|
|
yDecimals: 2 // If you want to add 2 decimals
|
||
|
|
}
|
||
|
|
})
|
||
|
|
jQuery.ajax({
|
||
|
|
url: base_url + 'kewilayahan/kytp/graph_matoa',
|
||
|
|
dataType: "json",
|
||
|
|
type: "POST",
|
||
|
|
success: (data) => {
|
||
|
|
setDataGraphMatoa(data)
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
|
||
|
|
}, [])
|
||
|
|
|
||
|
|
const optionsGraphMatoaAgg = {
|
||
|
|
chart: {
|
||
|
|
zoomType: 'xy',
|
||
|
|
height: '320',
|
||
|
|
},
|
||
|
|
title: {
|
||
|
|
text: 'Poi Google dan Matoa',
|
||
|
|
// align: 'center'
|
||
|
|
},
|
||
|
|
|
||
|
|
xAxis: [{
|
||
|
|
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
|
||
|
|
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
|
||
|
|
crosshair: true
|
||
|
|
}],
|
||
|
|
yAxis: [
|
||
|
|
{
|
||
|
|
gridLineWidth: 0,
|
||
|
|
title: {
|
||
|
|
text: '',
|
||
|
|
style: {
|
||
|
|
color: Highcharts.getOptions().colors[0]
|
||
|
|
}
|
||
|
|
},
|
||
|
|
labels: {
|
||
|
|
//format: '{value}',
|
||
|
|
style: {
|
||
|
|
color: Highcharts.getOptions().colors[0]
|
||
|
|
}
|
||
|
|
},
|
||
|
|
visible: false
|
||
|
|
},
|
||
|
|
{
|
||
|
|
labels: {
|
||
|
|
//format: '{value}',
|
||
|
|
style: {
|
||
|
|
color: Highcharts.getOptions().colors[1]
|
||
|
|
}
|
||
|
|
},
|
||
|
|
title: {
|
||
|
|
text: 'NPWP Work True',
|
||
|
|
style: {
|
||
|
|
color: Highcharts.getOptions().colors[1]
|
||
|
|
}
|
||
|
|
},
|
||
|
|
opposite: true,
|
||
|
|
visible: false
|
||
|
|
|
||
|
|
},
|
||
|
|
{
|
||
|
|
gridLineWidth: 0,
|
||
|
|
title: {
|
||
|
|
text: 'Rupiah',
|
||
|
|
style: {
|
||
|
|
color: Highcharts.getOptions().colors[2]
|
||
|
|
}
|
||
|
|
},
|
||
|
|
labels: {
|
||
|
|
//format: '{value}',
|
||
|
|
style: {
|
||
|
|
color: Highcharts.getOptions().colors[2]
|
||
|
|
}
|
||
|
|
},
|
||
|
|
opposite: true,
|
||
|
|
visible: false
|
||
|
|
},
|
||
|
|
{
|
||
|
|
gridLineWidth: 0,
|
||
|
|
title: {
|
||
|
|
text: '',
|
||
|
|
style: {
|
||
|
|
color: "#FF0000"
|
||
|
|
}
|
||
|
|
},
|
||
|
|
labels: {
|
||
|
|
//format: '{value}',
|
||
|
|
style: {
|
||
|
|
color: "##FF0000"
|
||
|
|
}
|
||
|
|
},
|
||
|
|
opposite: true
|
||
|
|
}
|
||
|
|
],
|
||
|
|
tooltip: {
|
||
|
|
shared: true
|
||
|
|
},
|
||
|
|
legend: {
|
||
|
|
layout: 'horizontal',
|
||
|
|
align: 'center',
|
||
|
|
//x: 80,
|
||
|
|
verticalAlign: 'top',
|
||
|
|
//y: 55,
|
||
|
|
//floating: true,
|
||
|
|
backgroundColor:
|
||
|
|
Highcharts.defaultOptions.legend.backgroundColor || // theme
|
||
|
|
'rgba(255,255,255,0.25)'
|
||
|
|
},
|
||
|
|
series: [{
|
||
|
|
color: '#FF0000',
|
||
|
|
name: 'Jml PoI',
|
||
|
|
type: 'column',
|
||
|
|
yAxis: 3,
|
||
|
|
data: dataGraphMatoa.poi_agg,
|
||
|
|
marker: {
|
||
|
|
enabled: true
|
||
|
|
},
|
||
|
|
tooltip: {
|
||
|
|
valueSuffix: ' PoI'
|
||
|
|
},
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: 'Matoa',
|
||
|
|
type: 'spline',
|
||
|
|
yAxis: 3,
|
||
|
|
data: dataGraphMatoa.kpdl_agg,
|
||
|
|
marker: {
|
||
|
|
enabled: true
|
||
|
|
},
|
||
|
|
tooltip: {
|
||
|
|
pointFormatter: function () {
|
||
|
|
const idx = this.index
|
||
|
|
let pct_coverage;
|
||
|
|
const jml_poi_agg = dataGraphMatoa.poi_agg
|
||
|
|
if (jml_poi_agg[idx] && jml_poi_agg[idx] !== 0) {
|
||
|
|
pct_coverage = format_angka(parseFloat((parseFloat(this.y) / jml_poi_agg[idx] * 100)).toFixed(2)) + '%';
|
||
|
|
}
|
||
|
|
|
||
|
|
let s = '<span style="color:' + this.color + '">\u25CF</span> ' + this.series.name + ': <b>' + format_angka(this.y) + ' lokasi kpdl</b> ' + ((pct_coverage) ? '(' + pct_coverage + ')<br>\n' : '<br>')
|
||
|
|
return s;
|
||
|
|
},
|
||
|
|
shared: false
|
||
|
|
},
|
||
|
|
visible: true,
|
||
|
|
color: "#8000ff"
|
||
|
|
}],
|
||
|
|
}
|
||
|
|
|
||
|
|
return <>
|
||
|
|
|
||
|
|
<Row className="text-center">
|
||
|
|
<Col >
|
||
|
|
<h2>E-Geospatial Thematic Tax</h2>
|
||
|
|
</Col>
|
||
|
|
</Row>
|
||
|
|
<Row>
|
||
|
|
<Col sm="12">
|
||
|
|
<Card>
|
||
|
|
<CardBody>
|
||
|
|
<Nav tabs >
|
||
|
|
<NavItem >
|
||
|
|
<NavLink style={{ cursor: "pointer" }}
|
||
|
|
active={active === 'wilayah'}
|
||
|
|
onClick={() => {
|
||
|
|
toggle('wilayah')
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
Wilayah Adm.
|
||
|
|
</NavLink>
|
||
|
|
</NavItem>
|
||
|
|
<NavItem >
|
||
|
|
<NavLink style={{ cursor: "pointer" }}
|
||
|
|
active={active === 'zona'}
|
||
|
|
onClick={() => {
|
||
|
|
toggle('zona')
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
Zona Pengawasan
|
||
|
|
</NavLink>
|
||
|
|
</NavItem>
|
||
|
|
</Nav>
|
||
|
|
<TabContent className="py-3" activeTab={active}>
|
||
|
|
<TabPane tabId="wilayah">
|
||
|
|
<Row>
|
||
|
|
<Col md="3">
|
||
|
|
<Label className='form-label' for='basicInput'>
|
||
|
|
Propinsi
|
||
|
|
</Label>
|
||
|
|
<Select
|
||
|
|
placeholder="Pilih Propinsi"
|
||
|
|
className="basic-single w-100"
|
||
|
|
onChange={(e) => {
|
||
|
|
setPropSelected(e)
|
||
|
|
}}
|
||
|
|
classNamePrefix="select"
|
||
|
|
defaultValue={propSelected}
|
||
|
|
value={propSelected}
|
||
|
|
isClearable={false}
|
||
|
|
options={prop}
|
||
|
|
/>
|
||
|
|
</Col>
|
||
|
|
<Col md="3">
|
||
|
|
<Label className='form-label' for='basicInput'>
|
||
|
|
Kota/Kab
|
||
|
|
</Label>
|
||
|
|
<Select
|
||
|
|
placeholder="Pilih Kota/Kab"
|
||
|
|
className="basic-single w-100"
|
||
|
|
onChange={(e) => {
|
||
|
|
setKotaSelected(e)
|
||
|
|
}}
|
||
|
|
classNamePrefix="select"
|
||
|
|
defaultValue={kotaSelected}
|
||
|
|
value={kotaSelected}
|
||
|
|
isClearable={false}
|
||
|
|
options={kota}
|
||
|
|
/>
|
||
|
|
</Col>
|
||
|
|
<Col md="3">
|
||
|
|
<Label className='form-label' for='Pilih Kecamatan'>
|
||
|
|
Kecamatan
|
||
|
|
</Label>
|
||
|
|
<MultiSelect
|
||
|
|
className="me-1 w-full"
|
||
|
|
hasSelectAll={true}
|
||
|
|
debounceDuration={300}
|
||
|
|
options={kec}
|
||
|
|
value={kecSelected}
|
||
|
|
onChange={(e) => {
|
||
|
|
setKecSelected(e)
|
||
|
|
}}
|
||
|
|
labelledBy="Pilih Kecamatan"
|
||
|
|
overrideStrings={{ allItemsAreSelected: "Semua dipilih", selectSomeItems: "Pilih Kecamatan" }}
|
||
|
|
/>
|
||
|
|
</Col>
|
||
|
|
<Col md="3">
|
||
|
|
<Label className='form-label' for='Pilih Kelurahan'>
|
||
|
|
Kelurahan
|
||
|
|
</Label>
|
||
|
|
<MultiSelect
|
||
|
|
className="me-1 w-full"
|
||
|
|
hasSelectAll={true}
|
||
|
|
debounceDuration={300}
|
||
|
|
options={kel}
|
||
|
|
value={kelSelected}
|
||
|
|
onChange={(e) => {
|
||
|
|
setKelSelected(e)
|
||
|
|
}}
|
||
|
|
labelledBy="Pilih Kelurahan"
|
||
|
|
overrideStrings={{ allItemsAreSelected: "Semua dipilih", selectSomeItems: "Pilih Kelurahan" }}
|
||
|
|
/>
|
||
|
|
</Col>
|
||
|
|
<Col md="3">
|
||
|
|
<ButtonP onClick={() => buttonProsesOnClick()} label="Proses" severity="success" />
|
||
|
|
</Col>
|
||
|
|
</Row>
|
||
|
|
|
||
|
|
</TabPane>
|
||
|
|
<TabPane tabId="zona">
|
||
|
|
<Row>
|
||
|
|
<Col md="2">
|
||
|
|
<Label className='form-label' for='basicInput'>
|
||
|
|
Kanwil
|
||
|
|
</Label>
|
||
|
|
<Select
|
||
|
|
placeholder="Pilih Kanwil"
|
||
|
|
className="basic-single w-100"
|
||
|
|
onChange={(e) => {
|
||
|
|
setKanwilSelected(e)
|
||
|
|
}}
|
||
|
|
classNamePrefix="select"
|
||
|
|
defaultValue={kanwilSelected}
|
||
|
|
value={kanwilSelected}
|
||
|
|
isClearable={false}
|
||
|
|
options={kanwil}
|
||
|
|
/>
|
||
|
|
</Col>
|
||
|
|
<Col md="2">
|
||
|
|
<Label className='form-label' for='Pilih KPP'>
|
||
|
|
KPP
|
||
|
|
</Label>
|
||
|
|
<MultiSelect
|
||
|
|
className="me-1 w-full"
|
||
|
|
hasSelectAll={true}
|
||
|
|
debounceDuration={300}
|
||
|
|
options={kpp}
|
||
|
|
value={kppSelected}
|
||
|
|
onChange={(e) => {
|
||
|
|
setKppSelected(e)
|
||
|
|
}}
|
||
|
|
labelledBy="Pilih KPP"
|
||
|
|
overrideStrings={{ allItemsAreSelected: "Semua dipilih", selectSomeItems: "Pilih KPP" }}
|
||
|
|
/>
|
||
|
|
</Col>
|
||
|
|
<Col md="2">
|
||
|
|
<Label className='form-label' for='Pilih Seksi'>
|
||
|
|
Seksi
|
||
|
|
</Label>
|
||
|
|
<MultiSelect
|
||
|
|
className="me-1 w-full"
|
||
|
|
hasSelectAll={true}
|
||
|
|
debounceDuration={300}
|
||
|
|
options={seksi}
|
||
|
|
value={seksiSelected}
|
||
|
|
onChange={(e) => {
|
||
|
|
setSeksiSelected(e)
|
||
|
|
}}
|
||
|
|
labelledBy="Pilih Seksi"
|
||
|
|
overrideStrings={{ allItemsAreSelected: "Semua dipilih", selectSomeItems: "Pilih Seksi" }}
|
||
|
|
/>
|
||
|
|
</Col>
|
||
|
|
<Col md="3">
|
||
|
|
<Label className='form-label' for='Pilih AR'>
|
||
|
|
AR
|
||
|
|
</Label>
|
||
|
|
<MultiSelect
|
||
|
|
className="me-1 w-full"
|
||
|
|
hasSelectAll={true}
|
||
|
|
debounceDuration={300}
|
||
|
|
options={ar}
|
||
|
|
value={arSelected}
|
||
|
|
onChange={(e) => {
|
||
|
|
setArSelected(e)
|
||
|
|
}}
|
||
|
|
labelledBy="Pilih AR"
|
||
|
|
overrideStrings={{ allItemsAreSelected: "Semua dipilih", selectSomeItems: "Pilih AR" }}
|
||
|
|
/>
|
||
|
|
</Col>
|
||
|
|
<Col md="3">
|
||
|
|
<Label className='form-label' for='Pilih Zona'>
|
||
|
|
Zona Pengawasan
|
||
|
|
</Label>
|
||
|
|
<MultiSelect
|
||
|
|
className="me-1 w-full"
|
||
|
|
hasSelectAll={true}
|
||
|
|
debounceDuration={300}
|
||
|
|
options={zp}
|
||
|
|
value={zpSelected}
|
||
|
|
onChange={(e) => {
|
||
|
|
setZpSelected(e)
|
||
|
|
}}
|
||
|
|
labelledBy="Pilih Zona"
|
||
|
|
overrideStrings={{ allItemsAreSelected: "Semua dipilih", selectSomeItems: "Pilih Zona" }}
|
||
|
|
/>
|
||
|
|
</Col>
|
||
|
|
|
||
|
|
<Col md="2">
|
||
|
|
|
||
|
|
<ButtonP onClick={() => buttonProsesOnClick()} label="Proses" severity="success" />
|
||
|
|
</Col>
|
||
|
|
</Row>
|
||
|
|
</TabPane>
|
||
|
|
</TabContent>
|
||
|
|
|
||
|
|
</CardBody>
|
||
|
|
</Card>
|
||
|
|
</Col>
|
||
|
|
</Row>
|
||
|
|
|
||
|
|
<Row>
|
||
|
|
<Col sm="12">
|
||
|
|
<Card>
|
||
|
|
<CardBody>
|
||
|
|
<div id="graph_matoa_agg">
|
||
|
|
<HighchartsReact
|
||
|
|
ref={refChart1}
|
||
|
|
highcharts={Highcharts}
|
||
|
|
options={optionsGraphMatoaAgg}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</CardBody>
|
||
|
|
</Card>
|
||
|
|
</Col>
|
||
|
|
</Row>
|
||
|
|
<Row>
|
||
|
|
<Col sm="12">
|
||
|
|
<Card>
|
||
|
|
<CardBody>
|
||
|
|
<TabProgresifitas />
|
||
|
|
|
||
|
|
</CardBody>
|
||
|
|
</Card>
|
||
|
|
</Col>
|
||
|
|
</Row>
|
||
|
|
<Toast ref={toast} />
|
||
|
|
</>
|
||
|
|
}
|
||
|
|
|
||
|
|
const container = document.getElementById("app")
|
||
|
|
const component = <Root />
|
||
|
|
|
||
|
|
ReactDOM.render(component, container)
|