change gantt chart to kurva s on dashboardproject

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 = () => {
       <div style={{ paddingTop: 20 }}>
         <Row>
           <Col span={19}>
-            <Gantt />
+            <Line
+              options={optionsChartKurvaS}
+              height={100}
+              width={100}
+              data={DATAKURVAS}
+            />
+            {/* <Gantt /> */}
             {/* <div style={{ marginTop: 15 }}>
               <h6>Curva S</h6>
               <TableDashboard />