engineN/app/Views/kewilayahan/kytp/kpdl.js

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)