From 1747e6e37259e1cd409c89f6f20520b82c1d2d18 Mon Sep 17 00:00:00 2001 From: ardhi Date: Wed, 3 Aug 2022 09:51:11 +0700 Subject: [PATCH] change gantt chart to kurva s on dashboardproject --- src/views/DashboardProject/index.js | 174 +++++++++++++++++++++++++++- 1 file changed, 171 insertions(+), 3 deletions(-) diff --git a/src/views/DashboardProject/index.js b/src/views/DashboardProject/index.js index b8f5b88..724d2c5 100644 --- a/src/views/DashboardProject/index.js +++ b/src/views/DashboardProject/index.js @@ -12,6 +12,8 @@ import { Badge } from 'reactstrap'; import { BASE_OSPRO } from '../../const/ApiConst'; import {formatRibuanDecimal} from "../../const/CustomFunc"; import ProgressBar from "./progressBar"; +import { Line } from 'react-chartjs-2'; +import numeral from 'numeral'; function BoxDashboard({ value, title, secondaryTitle, icon, bgColor }) { return ( @@ -35,6 +37,81 @@ function RenderHealthProject({params}){ } } +const optionsChartKurvaS = { + // title: { + // display: true, + // text: 'Progress Cost Perencanaan dan Realisasi' + // }, + responsive: true, + maintainAspectRatio: false, + aspectRatio: 1, + tooltips: { + callbacks: { + label: function (tooltipItem, data) { + const label = data.datasets[tooltipItem.datasetIndex].label || ""; + return `${label}: ${numeral(tooltipItem.value).format("0,0")}`; + }, + }, + }, + scales: { + yAxes: [ + { + type: "linear", + display: true, + position: "left", + id: "y-axis-1", + ticks: { + beginAtZero: true, + max: 100, + callback: function (value, index, values) { + return numeral(value).format("0,0"); + }, + }, + min: 0, + max: 100, + }, + ], + }, + zoom: { + enabled: true, + mode: "xy", + limits: { + y: { min: 0, max: 100 }, + }, + }, + pan: { + enabled: true, + mode: "xy", + limits: { + y: { min: 0, max: 100 }, + }, + }, +}; + +const DEFAULT_KURVAS = { + labels: [], + datasets: [ + { + label: "Perencanaan", + data: [], + fill: false, + backgroundColor: "rgba(255, 99, 132, 0.5)", + borderColor: "rgba(255, 99, 132, 0.5)", + // stack: 'Stack-0' + yAxisID: "y-axis-1", + }, + { + label: "Aktual", + data: [], + fill: false, + backgroundColor: "rgba(54, 162, 235, 0.5)", + borderColor: "rgba(54, 162, 235, 0.5)", + // stack: 'Stack-1' + yAxisID: "y-axis-1", + }, + ], +}; + const DashboardProject = () => { const { ID } = useParams(); @@ -56,8 +133,8 @@ const DashboardProject = () => { const [BUDGETHEALTH, SET_BUDGETHEALTH] = useState([]) const [COMMENT, SET_COMMENT] = useState([]) const [MANPOWER, SET_MANPOWER] = useState([]) - - + const [DATAKURVAS, SET_DATAKURVAS] = useState([]) + const [CHARTKURVAS, SET_CHARTKURVAS] = useState([]); const token = localStorage.getItem("token") const HEADER = { @@ -89,8 +166,93 @@ const DashboardProject = () => { SET_MANPOWER(resData.man_power) } + const getKurvaS = async () => { + const URL = `${BASE_OSPRO}/api/activity/get-curva-s` + const payload = { + project_id: [`${ID}`], + period: "week", + }; + const result = await axios.post(URL, payload, HEADER).then(res => res).catch(err => err.response) + if (result.data.code !== 200) { + NotificationManager.error('Belum ada data kurva S!', 'Failed'); + } + let resData = result.data.data; + console.log('resData kurvaS', resData); + + let dataCurvaS = resData[0]; + + if (dataCurvaS) { + let dataChart = []; + let proyekName = dataCurvaS.proyek_name ? dataCurvaS.proyek_name : "-"; + let dataRes = dataCurvaS.data; + // let labelCostPlanning = dataRes ? dataRes.map(res => res.kode_sortname) : []; // ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'] + // let labels = dataRes ? dataRes.date ? moment(dataRes.date).format('DD-MM-YY') : '-' : []; + let labels = + dataRes && dataRes.date + ? dataRes.date.map((item, idx) => { + let date = item[0]; + let bcwp = item[1]; + let acwp = item[2]; + date = date ? moment(date).format("DD MMM YY") : "-"; + bcwp = bcwp + ? this.renderFormatRupiah(bcwp.toString(), "Rp") + : ""; + acwp = acwp + ? this.renderFormatRupiah(acwp.toString(), "Rp") + : ""; + return [date, bcwp, acwp]; + }) + : []; + // let valueCostPlaning = dataRes ? dataRes.map(res => res.rencana_biaya) : []; // [10, 23, 39, 47, 55, 68, 70, 82, 90, 100] + // let valueCostPlanning = dataRes ? dataRes.map(res => parseFloat(res.cal_budget_cost)) : []; // [10, 23, 39, 47, 55, 68, 70, 82, 90, 100] + let valuePlanning = dataRes + ? dataRes.percentage.map((res) => + res && res[0] !== null ? res[0] : null + ) + : []; // validate if null (holiday) + // let valueCostRealisasi = dataRes ? dataRes.map(res => res.biaya_actual) : []; // [10, 23, 39, 47, 55, 68, 70, 82, 90, 100] + // let valueCostRealisasi = dataRes ? dataRes.map(res => parseFloat(res.cal_actual_cost)) : []; // [10, 23, 39, 47, 55, 68, 70, 82, 90, 100] + let valueRealisasi = dataRes + ? dataRes.percentage.map((res) => + res && res[1] !== null ? res[1] : null + ) + : []; // validate if null (holiday) + + // console.log('labelCostPlanning', labelCostPlanning) + let chartData = { + proyek_name: proyekName, + // labels: [['P1',1500,1000],['P2',2000,1500],['P3',2500,1800],['P4',3000,2000],['P5',3500,3000],['P5',3500,3000],['P5',3500,3000],['P5',3500,3000],['P5',3500,3000],['P5',3500,3000],['P5',3500,3000],['P5',3500,3000],['P5',3500,3000],['P5',3500,3000],['P5',3500,3000],['P5',3500,3000],['P5',3500,3000],['P5',3500,3000],['P5',3500,3000],['P5',3500,3000],['P5',3500,3000],['P5',3500,3000],['P5',3500,3000],['P5',3500,3000],['P5',3500,3000],['P5',3500,3000],['P5',3500,3000],['P5',3500,3000],['P5',3500,3000],['P5',3500,3000],['P5',3500,3000],['P5',3500,3000],['P5',3500,3000],['P5',3500,3000],['P5',3500,3000],['P5',3500,3000],['P5',3500,3000],['P5',3500,3000],['P5',3500,3000]], + labels: labels, + datasets: [ + { + label: "Perencanaan", + data: valuePlanning, + fill: false, + backgroundColor: "rgba(255, 99, 132, 0.5)", + borderColor: "rgba(255, 99, 132, 0.5)", + yAxisID: "y-axis-1", + // stack: 'Stack-0' + }, + { + label: "Aktual", + data: valueRealisasi, + fill: false, + backgroundColor: "rgba(54, 162, 235, 0.5)", + borderColor: "rgba(54, 162, 235, 0.5)", + yAxisID: "y-axis-1", + // stack: 'Stack-1' + }, + ], + }; + + // dataChart.push(chartData); + SET_DATAKURVAS(chartData); + } + } + useEffect(() => { getProjectDetail(); + getKurvaS(); }, []) @@ -250,7 +412,13 @@ const DashboardProject = () => {
- + + {/* */} {/*
Curva S