engineN/app/Views/kewilayahan/monitoringPerubahanPerilaku/grafik/PenambahanWpBayar.js

import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
import Highcharts from 'highcharts'
import HighchartsReact from 'highcharts-react-official'
import { Col, Row } from 'reactstrap'
import { Badge } from 'primereact/badge'
import { Button as ButtonP } from 'primereact/button'

import collect from 'collect.js'
import jquery from 'jquery'
import 'primereact/resources/themes/bootstrap4-light-blue/theme.css'
import 'primeflex/primeflex.css'

import { Sidebar } from 'primereact/sidebar'
import { MantineReactTable, useMantineReactTable } from 'mantine-react-table'
import { Text } from '@mantine/core'

import { QueryClient, QueryClientProvider, useInfiniteQuery } from '@tanstack/react-query'
import dayjs from 'dayjs'
import { useSelector } from 'react-redux'
var relativeTime = require('dayjs/plugin/relativeTime')
const fetchSize = 101

const PenambahanWpBayar = () => {
  const base_url = '/engineN/'

  const refChart = useRef(null)
  const [data, setData] = useState({
    npwp: [],
    npwp_akum: [],
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
  })

  const [selectedBulan, setSelectedBulan] = useState('')
  const [selectedBulanText, setSelectedBulanText] = useState('semua')
  const [bulan, setBulan] = useState([])

  const [visibleSidebar, setVisibleSidebar] = useState(false)
  const [query, setQuery] = useState(null)
  const storeKpdl = useSelector((state) => state.kpdl)
  //   useEffect(() => {
  //     if (selectedBulan != '') {
  //       jquery.get({
  //         url: base_url + 'kewilayahan/kytp/identifikasiLapangan',
  //         dataType: 'json',
  //         type: 'POST',
  //         data: {
  //           ...dataSend,
  //           bulan: selectedBulan
  //         },
  //         success: (data) => {
  //           setData(data)
  //         }
  //       })
  //     }
  //   }, [dataSend, selectedBulan])

  useEffect(() => {
    const dataMonitoring = storeKpdl.dataMonitoringPerubahanPerilakuPenambahanWpBayar
    const bulan = []
    const bulan_akum = []

    if (dataMonitoring) {
      let akum = 0
      for (let i = 1; i <= 12; i++) {
        const current = Number(dataMonitoring.reduce((acc, row) => acc + row['BLN_' + i], 0))
        bulan.push(current)
        akum += current
        bulan_akum.push(akum)
      }
      setData({
        npwp: bulan,
        npwp_akum: bulan_akum,
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
      })
    }
  }, [storeKpdl.dataMonitoringPerubahanPerilakuPenambahanWpBayar])

  //   useEffect(() => {
  //     jquery.get({
  //       url: base_url + 'kewilayahan/kytp/getBulan',
  //       dataType: 'json',
  //       type: 'GET',
  //       success: (data) => {
  //         setBulan(data)
  //         setSelectedBulan(data[0].value)
  //       }
  //     })
  //   }, [])

  const optionsChart1 = () => {
    return {
      chart: {
        zoomType: 'xy',
        height: '320pt'
      },
      title: {
        text: '',
        align: 'left'
      },
      subtitle: {
        align: 'left'
      },
      xAxis: [
        {
          categories: data.categories,
          crosshair: true
        }
      ],

      yAxis: [
        {
          labels: {
            style: {
              color: Highcharts.getOptions().colors[2]
            }
          },
          title: {
            text: 'NPWP',
            style: {
              color: Highcharts.getOptions().colors[2]
            }
          },
          opposite: true
        },
        {
          title: {
            text: 'NPWP s.d.',
            style: {
              color: Highcharts.getOptions().colors[0]
            }
          },
          labels: {
            style: {
              color: Highcharts.getOptions().colors[0]
            }
          },
          opposite: true
        }
      ],

      tooltip: {
        shared: true
      },
      legend: {
        layout: 'horizontal',
        align: 'center',

        verticalAlign: 'top',
        backgroundColor:
          Highcharts.defaultOptions.legend.backgroundColor || // theme
          'rgba(255,255,255,0.25)'
      },
      plotOptions: {
        series: {
          cursor: 'pointer',
          point: {
            events: {
              click: function () {
                // console.log(this)
                if (this.series.userOptions.seriesType === 'npwp_bulan') {
                  setQuery(this.index + 1)
                  setVisibleSidebar(true)
                } else {
                  return
                }
              }
            }
          }
        }
      },
      series: [
        {
          name: 'NPWP',
          seriesType: 'npwp_bulan',
          type: 'column',
          yAxis: 0,
          color: Highcharts.getOptions().colors[2],
          data: data.npwp,
          marker: {
            enabled: true
          },
          tooltip: {
            valueSuffix: ' NPWP'
          }
        },

        {
          name: 'NPWP akumulasi',
          seriesType: 'npwp_bulan_akumulasi',
          type: 'spline',
          yAxis: 1,
          data: data.npwp_akum,
          marker: {
            enabled: true
          },
          tooltip: {
            valueSuffix: ' NPWP'
          }
          //   visible: false
        }
      ]
    }
  }

  return (
    <>
      <HighchartsReact ref={refChart} highcharts={Highcharts} options={optionsChart1()} />
    </>
  )
}

export default PenambahanWpBayar