From 71ae58e6757fc8538b7ef04e2ace63d27d6e5fcd Mon Sep 17 00:00:00 2001 From: Muhammad Sulaiman Yusuf Date: Thu, 7 Jul 2022 17:17:54 +0700 Subject: [PATCH] sort, reident, remove comment, dashboard --- src/views/DashboardSimpro/Dashboard.css | 28 +- src/views/DashboardSimpro/LineChart.js | 15 +- src/views/DashboardSimpro/PieChart.js | 5 +- src/views/DashboardSimpro/index 16.js | 531 ------------------------ src/views/DashboardSimpro/index.js | 97 +---- 5 files changed, 35 insertions(+), 641 deletions(-) delete mode 100644 src/views/DashboardSimpro/index 16.js diff --git a/src/views/DashboardSimpro/Dashboard.css b/src/views/DashboardSimpro/Dashboard.css index f57e9a6..e1d4e91 100644 --- a/src/views/DashboardSimpro/Dashboard.css +++ b/src/views/DashboardSimpro/Dashboard.css @@ -4,10 +4,6 @@ text-align: center; } -.no-padding { - -} - .text-bold { font-weight: bold; } @@ -30,6 +26,7 @@ text-align: center; background-color: #008B8B; } + .view2 { width: 220px; height: 100px; @@ -40,6 +37,7 @@ text-align: center; background-color: #8B008B; } + .view3 { width: 220px; height: 100px; @@ -50,6 +48,7 @@ text-align: center; background-color: #7CFC00; } + .view4 { width: 220px; height: 100px; @@ -60,6 +59,7 @@ text-align: center; background-color: #FF0000; } + .view5 { width: 220px; height: 100px; @@ -103,26 +103,26 @@ } .maptable-window-button-container { - float: right; - right: 0px; + float: right; + right: 0px; } .maptable-close, .maptable-maximize, .maptable-minimize { - cursor: pointer; - padding: 4px; + cursor: pointer; + padding: 4px; } .maptable-header { - margin-bottom: -10px; + margin-bottom: -10px; } .maptable-title { - font-size: 24px; - font-weight: 700; - text-align: left; - margin-left: 20px; + font-size: 24px; + font-weight: 700; + text-align: left; + margin-left: 20px; } .maptable-close:hover, .maptable-maximize:hover, .maptable-minimize:hover { - color: #20a8d8; + color: #20a8d8; } diff --git a/src/views/DashboardSimpro/LineChart.js b/src/views/DashboardSimpro/LineChart.js index 2696fef..493bfd6 100644 --- a/src/views/DashboardSimpro/LineChart.js +++ b/src/views/DashboardSimpro/LineChart.js @@ -6,26 +6,13 @@ const MultiAxisLine = ({ data, handleClickChart, optionsAdded }) => { return ( <> - {/*
-

Multi Axis Line Chart

-
- - Github Source - -
-
*/} ); } -export default MultiAxisLine; \ No newline at end of file +export default MultiAxisLine; diff --git a/src/views/DashboardSimpro/PieChart.js b/src/views/DashboardSimpro/PieChart.js index 614a48e..ef26568 100644 --- a/src/views/DashboardSimpro/PieChart.js +++ b/src/views/DashboardSimpro/PieChart.js @@ -11,9 +11,6 @@ const options = { legend: { display: true, position: 'bottom' - // labels: { - // fontColor: 'rgb(255, 99, 132)' - // } } } @@ -23,4 +20,4 @@ const PieChart = ({data}) => ( ); -export default PieChart; \ No newline at end of file +export default PieChart; diff --git a/src/views/DashboardSimpro/index 16.js b/src/views/DashboardSimpro/index 16.js deleted file mode 100644 index 27e2cc4..0000000 --- a/src/views/DashboardSimpro/index 16.js +++ /dev/null @@ -1,531 +0,0 @@ -import { DatePicker } from 'antd'; -import Chart from 'chart.js'; -import ChartDataLabels from 'chartjs-plugin-datalabels'; -import moment from 'moment'; -import React, { useEffect, useState } from 'react'; -import { - Card, Modal, ModalHeader, ModalBody, ModalFooter, Button, - CardBody, CardHeader, Col, Dropdown, DropdownItem, DropdownMenu, DropdownToggle, Row -} from 'reactstrap'; -import { Pagination, Tooltip, Tree, List, Checkbox } from 'antd'; -import '../../../node_modules/react-grid-layout/css/styles.css'; -import '../../../node_modules/react-resizable/css/styles.css'; -import { - DONE_COLOR, IZIN_COLOR, NOT_YET_COLOR, - PRESENT_COLOR, TOTAL_COLOR, - RED_COLOR, - ORANGE_COLOR, - GREEN_COLOR, - DARK_GREY_COLOR, - BLUE_COLOR, - PURPLE_COLOR -} from '../../const/AppConst.js'; -import '../Map/CustomScroll.css'; -import './Dashboard.css'; -import { BASE_SIMPRO } from '../../const/ApiConst'; -import { NotificationContainer, NotificationManager } from 'react-notifications'; -import axios from 'axios' -import numeral from 'numeral'; -import ContentLoader from "react-content-loader" -import LineChart from './LineChart'; -import PieChart from './PieChart'; -import { projectTreeConst } from '../../const/LayerTreeConst.js'; -import { PLANNING_REALISASI_SEARCH, PLANNING_SEARCH, PROYEK_SEARCH_DETAIL, PROYEK_EDIT } from '../../const/ApiConst.js'; -import { getChildrenTree, formatRupiah, DATE_TIME_FORMAT } from '../../const/CustomFunc.js'; - -const id_org = window.localStorage.getItem('id_org'); -const roleName = window.localStorage.getItem('role_name'); - -Chart.plugins.register(ChartDataLabels); -const { RangePicker } = DatePicker; - -let menu = [ - // { - // "id": 1, - // "title": "PLANNING", - // "key": "total karyawan", - // // "total": this.state.sumEmployee, - // "color": TOTAL_COLOR - // }, - // { - // "id": 2, - // "title": "REALISASI", - // "key": "presensi", - // // "total": this.state.sumPresensi, - // "color": PRESENT_COLOR - // }, - { - "id": 3, - "title": "PANIC BUTTON", - "key": "absent", - // "total": this.state.sumAbsensi, - "color": IZIN_COLOR - }, - { - "id": 4, - "title": "WASPANG ACTIVE", - "key": "karyawan telat", - // "total": this.state.sumTelat, - "color": GREEN_COLOR - }, - { - "id": 5, - "title": "WASPANG ABSENT", - "key": "karyawan tanpa keterangan", - // "total": this.state.sumTanpaKet, - "color": ORANGE_COLOR - } - // { - // "id": 6, - // "title": "PANIK BUTTON", - // "key": "panic button", - // "total": this.state.sumPanicBtn, - // "color": ABSENT_COLOR - // } -] - -const defaultPersentaseProyek = { - labels: [], - datasets: [ - { - label: 'Progress', - data: [], - fill: false, - backgroundColor: 'rgb(54, 162, 235)', - borderColor: 'rgba(54, 162, 235, 0.2)', - yAxisID: 'y-axis-1', - }, - ], -}; - -const defaultCostProyek = { - labels: [], - datasets: [ - { - label: 'Perencanaan', - data: [], - fill: false, - backgroundColor: 'rgb(255, 99, 132)', - borderColor: 'rgba(255, 99, 132, 0.2)', - yAxisID: 'y-axis-1', - }, - { - label: 'Realisasi', - data: [], - fill: false, - backgroundColor: 'rgb(54, 162, 235)', - borderColor: 'rgba(54, 162, 235, 0.2)', - yAxisID: 'y-axis-1', - }, - ], -}; - -const defaultStatusProyek = { - labels: ['Aman', 'Alert', 'Critical'], - datasets: [ - { - label: '# of Votes', - data: [], - backgroundColor: [ - 'rgba(54, 162, 235, 0.2)', - 'rgba(255, 206, 86, 0.2)', - 'rgba(255, 99, 132, 0.2)', - ], - borderColor: [ - 'rgba(54, 162, 235, 1)', - 'rgba(255, 206, 86, 1)', - 'rgba(255, 99, 132, 1)', - ], - borderWidth: 1, - }, - ], -}; - -const DashboardSimpro = () => { - const token = localStorage.getItem("token") - const HEADER = { - headers: { - "Content-Type": "application/json", - "Authorization": `Bearer ${token}` - } - } - const [openPlanRealisasi, setopenPlanRealisasi] = useState(false); - const [openCostPlanRealisasi, setopenCostPlanRealisasi] = useState(false); - const [dataChart, setDataChart] = useState([]); - const [projectTree, setProjectTree] = useState([]); - const [allProyek, setAllProyek] = useState(true); - const [dataStatusProyek, setDataStatusProyek] = useState(null); - const [dataPersentaseProyek, setDataPersentaseProyek] = useState(null); - const [dataCostProyek, setdataCostProyek] = useState(null); - const [projectTreeVisible, setProjectTreeVisible] = useState(false); - const [checkedKeysProjectTree, setCheckedKeysProjectTree] = useState([]); - const [openModalTable, setOpenModalTable] = useState(false); - const [dataDashboard, setDataDashboard] = useState(null); - - const handleGetDataDashboard = async () => { - const URL = `${BASE_SIMPRO}/dashboard-proyek/search` - const payload = { - "columns": [ - { "name": "created_at", "logic_operator": "range", "value": "2021-11-06 00:00:00", "value1": "2021-11-06 23:59:59", "operator": "AND" } - ], - "paging": { "start": 0, "length": -1 } - } - // console.log(payload) - const result = await axios.post(URL, payload, HEADER).then(res => res).catch(err => err.response) - if (result.data.code === 200) { - setDataDashboard(result.data.data); - } else { - NotificationManager.error('Gaga Menambah Data!!', 'Failed'); - } - - } - - const handleGetDataDashboardChart = async () => { - const URL = `${BASE_SIMPRO}/dashboard-status/search` - let str = '' - checkedKeysProjectTree.map((res, idx) => { - if (idx == 0) str += `${res}` - if (idx != 0) str += `,${res}` - }) - console.log(str) - const payload = { - "columns": [ - { "name": "id", "logic_operator": "in", "value": str ? str : "0", "operator": "AND" } - ], - "orders": { "columns": ["nama"], "ascending": true } - } - // console.log(payload) - const result = await axios.post(URL, payload, HEADER).then(res => res).catch(err => err.response) - if (result.data.code === 200) { - - const { persentase_progress, progress_cost_planning, progress_cost_realisasi, status_proyek } = result.data.data - - const labelPersentaseProyek = persentase_progress ? persentase_progress.map(res => res.label) : [] - const valuePersentaseProyek = persentase_progress ? persentase_progress.map(res => res.total) : [] - const persentaseProyek = { - labels: labelPersentaseProyek, - datasets: [ - { - label: 'Progress', - data: valuePersentaseProyek, - fill: false, - backgroundColor: 'rgb(54, 162, 235)', - borderColor: 'rgba(54, 162, 235, 0.2)', - yAxisID: 'y-axis-1', - }, - ], - }; - setDataPersentaseProyek(persentaseProyek) - const labelCostPlaning = progress_cost_planning ? progress_cost_planning.map(res => res.label) : [] - const valueCostPlaning = progress_cost_planning ? progress_cost_planning.map(res => res.total) : [] - const valueCostRealisasi = progress_cost_realisasi ? progress_cost_realisasi.map(res => res.total) : [] - - const costProyek = { - labels: labelCostPlaning, - datasets: [ - { - label: 'Perencanaan', - data: valueCostPlaning, - fill: false, - backgroundColor: 'rgb(255, 99, 132)', - borderColor: 'rgba(255, 99, 132, 0.2)', - yAxisID: 'y-axis-1', - }, - { - label: 'Realisasi', - data: valueCostRealisasi, - fill: false, - backgroundColor: 'rgb(54, 162, 235)', - borderColor: 'rgba(54, 162, 235, 0.2)', - yAxisID: 'y-axis-1', - }, - ], - }; - setdataCostProyek(costProyek) - - const valueStatusProyek = status_proyek ? status_proyek.map(res => res.total) : [] - - const statusProyek = { - labels: ['Aman', 'Alert', 'Critical'], - datasets: [ - { - label: '# of Votes', - data: valueStatusProyek, - backgroundColor: [ - 'rgba(54, 162, 235, 0.2)', - 'rgba(255, 206, 86, 0.2)', - 'rgba(255, 99, 132, 0.2)', - ], - borderColor: [ - 'rgba(54, 162, 235, 1)', - 'rgba(255, 206, 86, 1)', - 'rgba(255, 99, 132, 1)', - ], - borderWidth: 1, - }, - ], - }; - - setDataStatusProyek(statusProyek) - - } else { - NotificationManager.error('Gaga Menambah Data!!', 'Failed'); - } - - } - - const getProyek = async () => { - const URL = `${BASE_SIMPRO}/proyek/list?start=0&length=-1&orderby=nama&asc=true` - const result = await axios.get(URL, HEADER).then(res => res).catch(err => err.response) - if (result.data.code === 200) { - setProjectTree(result.data.data); - const arr = result.data.data.map(res => res.id) - // console.log("checked all", data) - setCheckedKeysProjectTree(arr) - } else { - NotificationManager.error('Gaga Menambah Data!!', 'Failed'); - } - } - useEffect(() => { - handleGetDataDashboardChart() - // console.log(checkedKeysProjectTree) - }, [checkedKeysProjectTree]); - - useEffect(() => { - if (allProyek) { - const data = projectTree.map(res => res.id) - console.log("checked all", data) - setCheckedKeysProjectTree(data) - } - }, [allProyek]); - - useEffect(() => { - handleGetDataDashboard() - getProyek() - // return () => { - // cleanup - // }; - }, []); - - const renderDailyInfo = () => { - - return ( - <> - {/*
-

{dataDashboard ? dataDashboard.planning : 0}

-

PLANNING

-
-
-

{dataDashboard ? dataDashboard.realisasi : 0}

-

REALISASI

-
*/} -
-

{dataDashboard ? dataDashboard.panic_button : 0}

-

PANIC BUTTON

-
-
-

{dataDashboard ? dataDashboard.waspang_status.presensi : 0}

-

WASPANG ACTIVE

-
-
-

{dataDashboard ? dataDashboard.waspang_status.absensi : 0}

-

WASPANG ABSENT

-
- - ) - } - - const handleClickChart = param => { - if (!param.length) return; - console.log(param) - const { _datasetIndex, _index } = param[0]; - const data = dataPersentaseProyek.datasets[_datasetIndex].label - console.log(data) - setOpenModalTable(true) - } - - const handleClickProyek = id => { - const arr = [...checkedKeysProjectTree] - const idx = arr.indexOf(id) - if (idx == -1) { - arr.push(id) - } else { - arr.splice(idx, 1) - } - setCheckedKeysProjectTree(arr) - } - - return ( -
- setOpenModalTable(!openModalTable)} - > - setOpenModalTable(!openModalTable)}> - Modal title - - - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. - - - - {' '} - - - - -
- - - - - -
Proyek
- {/* -
- - - -
- */} - - - -
- setAllProyek(!allProyek)}>Semua - Header
} - // footer={
Footer
} - // bordered - dataSource={projectTree} - renderItem={item => ( - - handleClickProyek(item.id)}>{item.nama} - - )} - /> -
- - - - - - {/* - - Waspang Status - - */} -
- {renderDailyInfo()} -
- {/* - */} - - -
- -
- - -
- -
- - - {/*
*/} - - {/*
*/} - - - {/*
*/} - - {/*
*/} - - -
- - - ); -} - -export default DashboardSimpro; \ No newline at end of file diff --git a/src/views/DashboardSimpro/index.js b/src/views/DashboardSimpro/index.js index c9574a2..8e42c12 100644 --- a/src/views/DashboardSimpro/index.js +++ b/src/views/DashboardSimpro/index.js @@ -1,15 +1,28 @@ -import { DatePicker } from 'antd'; +import '../../../node_modules/react-grid-layout/css/styles.css'; +import '../../../node_modules/react-resizable/css/styles.css'; +import '../Map/CustomScroll.css'; +import './Dashboard.css'; import Chart from 'chart.js'; import ChartDataLabels from 'chartjs-plugin-datalabels'; -import moment from 'moment'; +import ContentLoader from "react-content-loader" +import LineChart from './LineChart'; +import PieChart from './PieChart'; import React, { useEffect, useState } from 'react'; +import SiopasMap from '../Map/Map_16.js'; +import axios from 'axios' +import moment from 'moment'; +import numeral from 'numeral'; +import { BASE_SIMPRO } from '../../const/ApiConst'; +import { DatePicker } from 'antd'; +import { NotificationContainer, NotificationManager } from 'react-notifications'; +import { PLANNING_REALISASI_SEARCH, PLANNING_SEARCH, PROYEK_SEARCH_DETAIL, PROYEK_EDIT } from '../../const/ApiConst.js'; +import { Pagination, Tooltip, Tree, List, Checkbox } from 'antd'; +import { getChildrenTree, formatRupiah, DATE_TIME_FORMAT } from '../../const/CustomFunc.js'; +import { projectTreeConst } from '../../const/LayerTreeConst.js'; import { Card, Modal, ModalHeader, ModalBody, ModalFooter, Button, CardBody, CardHeader, Col, Dropdown, DropdownItem, DropdownMenu, DropdownToggle, Row } from 'reactstrap'; -import { Pagination, Tooltip, Tree, List, Checkbox } from 'antd'; -import '../../../node_modules/react-grid-layout/css/styles.css'; -import '../../../node_modules/react-resizable/css/styles.css'; import { DONE_COLOR, IZIN_COLOR, NOT_YET_COLOR, PRESENT_COLOR, TOTAL_COLOR, @@ -20,19 +33,6 @@ import { BLUE_COLOR, PURPLE_COLOR } from '../../const/AppConst.js'; -import '../Map/CustomScroll.css'; -import './Dashboard.css'; -import { BASE_SIMPRO } from '../../const/ApiConst'; -import { NotificationContainer, NotificationManager } from 'react-notifications'; -import axios from 'axios' -import numeral from 'numeral'; -import ContentLoader from "react-content-loader" -import LineChart from './LineChart'; -import PieChart from './PieChart'; -import { projectTreeConst } from '../../const/LayerTreeConst.js'; -import { PLANNING_REALISASI_SEARCH, PLANNING_SEARCH, PROYEK_SEARCH_DETAIL, PROYEK_EDIT } from '../../const/ApiConst.js'; -import { getChildrenTree, formatRupiah, DATE_TIME_FORMAT } from '../../const/CustomFunc.js'; -import SiopasMap from '../Map/Map_16.js'; const id_org = window.localStorage.getItem('id_org'); const roleName = window.localStorage.getItem('role_name'); @@ -40,48 +40,24 @@ Chart.plugins.register(ChartDataLabels); const { RangePicker } = DatePicker; let menu = [ - // { - // "id": 1, - // "title": "PLANNING", - // "key": "total karyawan", - // // "total": this.state.sumEmployee, - // "color": TOTAL_COLOR - // }, - // { - // "id": 2, - // "title": "REALISASI", - // "key": "presensi", - // // "total": this.state.sumPresensi, - // "color": PRESENT_COLOR - // }, { "id": 3, "title": "PANIC BUTTON", "key": "absent", - // "total": this.state.sumAbsensi, "color": IZIN_COLOR }, { "id": 4, "title": "WASPANG ACTIVE", "key": "karyawan telat", - // "total": this.state.sumTelat, "color": GREEN_COLOR }, { "id": 5, "title": "WASPANG ABSENT", "key": "karyawan tanpa keterangan", - // "total": this.state.sumTanpaKet, "color": ORANGE_COLOR } - // { - // "id": 6, - // "title": "PANIK BUTTON", - // "key": "panic button", - // "total": this.state.sumPanicBtn, - // "color": ABSENT_COLOR - // } ] const defaultPersentaseProyek = { @@ -170,7 +146,6 @@ const DashboardSimpro = () => { ], "paging": { "start": 0, "length": -1 } } - // console.log(payload) const result = await axios.post(URL, payload, HEADER).then(res => res).catch(err => err.response) if (result.data.code === 200) { setDataDashboard(result.data.data); @@ -187,14 +162,12 @@ const DashboardSimpro = () => { if (idx == 0) str += `${res}` if (idx != 0) str += `,${res}` }) - console.log(str) const payload = { "columns": [ { "name": "id", "logic_operator": "in", "value": str ? str : "0", "operator": "AND" } ], "orders": { "columns": ["nama"], "ascending": true } } - // console.log(payload) const result = await axios.post(URL, payload, HEADER).then(res => res).catch(err => err.response) if (result.data.code === 200) { @@ -280,45 +253,15 @@ const DashboardSimpro = () => { if (result.data.code === 200) { setProjectTree(result.data.data); const arr = result.data.data.map(res => res.id) - // console.log("checked all", data) setCheckedKeysProjectTree(arr) } else { NotificationManager.error('Gaga Menambah Data!!', 'Failed'); } } - // useEffect(() => { - // handleGetDataDashboardChart() - // // console.log(checkedKeysProjectTree) - // }, [checkedKeysProjectTree]); - - // useEffect(() => { - // if (allProyek) { - // const data = projectTree.map(res => res.id) - // console.log("checked all", data) - // setCheckedKeysProjectTree(data) - // } - // }, [allProyek]); - - // useEffect(() => { - // handleGetDataDashboard() - // getProyek() - // // return () => { - // // cleanup - // // }; - // }, []); const renderDailyInfo = () => { - return ( <> - {/*
-

{dataDashboard ? dataDashboard.planning : 0}

-

PLANNING

-
-
-

{dataDashboard ? dataDashboard.realisasi : 0}

-

REALISASI

-
*/}

{dataDashboard ? dataDashboard.panic_button : 0}

PANIC BUTTON

@@ -337,10 +280,8 @@ const DashboardSimpro = () => { const handleClickChart = param => { if (!param.length) return; - console.log(param) const { _datasetIndex, _index } = param[0]; const data = dataPersentaseProyek.datasets[_datasetIndex].label - console.log(data) setOpenModalTable(true) } @@ -363,4 +304,4 @@ const DashboardSimpro = () => { ); } -export default DashboardSimpro; \ No newline at end of file +export default DashboardSimpro;