From f3fe28bdac26218a9d6b242bd3435245e2b68c38 Mon Sep 17 00:00:00 2001
From: ardhi <ardhi.irfan.syabani@gmail.com>
Date: Fri, 23 Sep 2022 16:34:49 +0700
Subject: [PATCH] update chart.js react-chartjs-2 version, add DashboardBOD by
 link /dashboard-bod

---
 package.json                                  |   6 +-
 src/routes.js                                 |   4 +-
 src/views/Dashboard/DashboardBOD.js           | 483 ++++++++++++++++++
 .../Dashboard/graphProjectExpenditure.js      |  65 ---
 src/views/Dashboard/index.js                  | 194 +------
 src/views/Map/Map.js                          |  75 ++-
 6 files changed, 558 insertions(+), 269 deletions(-)
 create mode 100644 src/views/Dashboard/DashboardBOD.js
 delete mode 100644 src/views/Dashboard/graphProjectExpenditure.js

diff --git a/package.json b/package.json
index 6fbea17..483378e 100644
--- a/package.json
+++ b/package.json
@@ -33,8 +33,8 @@
     "antd": "^4.16.13",
     "axios": "^0.21.1",
     "bootstrap": "^4.3.1",
-    "chart.js": "^2.8.0",
-    "chartjs-plugin-datalabels": "^1.0.0",
+    "chart.js": "^3.9.1",
+    "chartjs-plugin-datalabels": "^2.1.0",
     "chartjs-plugin-zoom": "^0.7.7",
     "classnames": "^2.2.6",
     "core-js": "^3.1.4",
@@ -64,7 +64,7 @@
     "react-bootstrap-table2-paginator": "^2.1.0",
     "react-bootstrap-table2-toolkit": "^2.1.1",
     "react-calendar-timeline": "^0.27.0",
-    "react-chartjs-2": "^2.7.6",
+    "react-chartjs-2": "^4.3.1",
     "react-color": "^2.17.3",
     "react-content-loader": "^6.0.3",
     "react-dom": "^16.14.0",
diff --git a/src/routes.js b/src/routes.js
index 87b08be..bdca249 100644
--- a/src/routes.js
+++ b/src/routes.js
@@ -43,11 +43,13 @@ const TestGantt = React.lazy(() => import('./views/testgantt'));
 const UserAdmin = React.lazy(() => import('./views/Master/UserAdmin'));
 const UserShift = React.lazy(() => import('./views/SimproV2/UserShift'));
 const DashboardProject = React.lazy(() => import('./views/DashboardProject'));
+const DashboardBOD = React.lazy(() => import('./views/Dashboard/DashboardBOD'));
+
 
 const routes = [
 	{ path: '/', exact: true, name: 'Home' },
 	{ path: '/dashboard', name: 'Dashboard', component: Dashboard},
-
+	{ path: '/dashboard-bod', name: 'DashboardBOD', component: DashboardBOD},
 	{ path: '/projects', exact: true, name: 'Projects', component: CreatedProyek },
 	{ path: '/projects/:id/:project/gantt', exact: true, name: 'Gantt', component: Gantt },
 	{ path: '/human-resource', exact: true, name: 'Human Resource', component: ResourceWorker },
diff --git a/src/views/Dashboard/DashboardBOD.js b/src/views/Dashboard/DashboardBOD.js
new file mode 100644
index 0000000..3705ab1
--- /dev/null
+++ b/src/views/Dashboard/DashboardBOD.js
@@ -0,0 +1,483 @@
+import React, { useEffect, useState } from 'react';
+import axios from 'axios'
+import { Row, Col, Button } from 'antd';
+import {
+  Chart as ChartJS,
+  CategoryScale,
+  LineController,
+  LineElement,
+  LinearScale,
+  BarController,
+  BarElement,
+  PieController,
+  Title,
+  Tooltip,
+  Legend,
+  ArcElement
+} from 'chart.js';
+// import Chart from 'chart.js/auto';
+import {Chart, Bar, Line, Pie } from 'react-chartjs-2';
+import ChartDataLabels from 'chartjs-plugin-datalabels';
+
+ChartJS.register(
+  CategoryScale,
+  LineController,
+  LineElement,
+  LinearScale,
+  BarController,
+  BarElement,
+  PieController,
+  Title,
+  Tooltip,
+  Legend,
+  ArcElement,
+  ChartDataLabels
+);
+
+const styles = {
+  cardContainer: {backgroundColor: '#F8F8F8', margin: 2, paddingLeft: 20, paddingRight: 20, paddingTop: 10},
+  cardHeaderContainer: {display: 'flex', flexDirection: 'row', marginBottom: 10},
+  cardChartContainer: {position: 'relative', height: '21vh', margin: 'auto', paddingBottom: 10, justifyContent: 'center'},
+  cardTitle: {color: '#444444', fontSize: 16, fontWeight: 'bold'},
+  cardSubtitle: {color: '#888888', fontSize: 12}
+}
+
+const verticalBarChartOption = {
+  elements: {
+    bar: {
+      borderWidth: 2,
+    },
+  },
+  indexAxis: 'x',
+  responsive: true,
+  maintainAspectRatio: false,
+  plugins: {
+    legend: {
+      display: true,
+      position: 'right',
+      labels: {
+        boxWidth: 10
+      }
+    },
+    datalabels: {
+      color: '#FFFFFF'
+    }
+  }
+}
+
+const horizontalBarChartOption = {
+  indexAxis: 'y',
+  elements: {
+    bar: {
+      borderWidth: 2,
+    },
+  },
+  responsive: true,
+  maintainAspectRatio: false,
+  plugins: {
+    legend: {
+      display: false,
+    },
+    datalabels: {
+      color: '#FFFFFF'
+    }
+  }
+}
+
+const pieChartOption = {
+  elements: {
+    pie: {
+      borderWidth: 2,
+    },
+  },
+  responsive: true,
+  maintainAspectRatio: false,
+  plugins: {
+    legend: {
+      display: true,
+      position: 'right',
+      labels: {
+        boxWidth: 10
+      }
+    },
+    datalabels: {
+      color: '#FFFFFF'
+    }
+  }
+}
+
+const lineChartOption = {
+  elements: {
+    line: {
+      borderWidth: 2,
+    },
+  },
+  responsive: false,
+  plugins: {
+    datalabels: {
+      color: '#FFFFFF'
+    }
+  }
+}
+
+const optionsExpenditure = {
+  indexAxis: 'y',
+  elements: {
+    bar: {
+      borderWidth: 2,
+    },
+  },
+  responsive: true,
+  maintainAspectRatio: false,
+  plugins: {
+    legend: {
+      display: false,
+      position: 'right',
+      labels: {
+        boxWidth: 10
+      }
+    },
+    datalabels: {
+      color: '#FFFFFF'
+    }
+    // title: {
+    //   display: true,
+    //   text: 'Chart.js Horizontal Bar Chart',
+    // },
+  },
+};
+
+const optionsScheduleHealthPerDivision = {
+  elements: {
+    bar: {
+      borderWidth: 2,
+    },
+  },
+  responsive: false,
+  plugins: {
+    legend: {
+      display: true,
+      position: 'top',
+      labels: {
+        boxWidth: 10
+      }
+    },
+    datalabels: {
+      color: '#FFFFFF'
+    }
+  }
+}
+
+const dataExpenditure = {
+  labels: ['Total Budget', 'Expenditure', 'Invoice', 'Cash In'],
+  datasets: [
+    {
+      label: '',
+      data: [302, 197, 197, 157],
+      borderColor: ['#480CA8', '#B5179E', '#A26A16', '#4C4747'],
+      backgroundColor: ['#480CA8', '#B5179E', '#A26A16', '#4C4747'],
+      borderRadius: 5,
+      borderSkipped: false
+    }
+  ],
+};
+
+const dataScheduleHealthPerDivision = {
+  labels: ['Telecommunication Solution Service', 'Telecommunication Solution Product', 'Energy Solution', 'Constructions'],
+  datasets: [
+    {
+      label: "Behind Schedule",
+      data: [1, 0, 0, 0],
+      borderColor: '#E80053',
+      backgroundColor: '#E80053',
+      borderWidth: 2,
+      borderRadius: 20,
+      borderSkipped: false
+    },
+    {
+      label: "Early Warning",
+      data: [2, 0, 1, 1],
+      borderColor: '#FFD600',
+      backgroundColor: '#FFD600',
+      borderWidth: 2,
+      borderRadius: 20,
+      borderSkipped: false
+    },
+    {
+      label: "On Schedule",
+      data: [4, 2, 3, 1],
+      borderColor: '#52AC0B',
+      backgroundColor: '#52AC0B',
+      borderWidth: 2,
+      borderRadius: 20,
+      borderSkipped: false
+    }
+  ],
+}
+
+const CardExpenditure = ({title, subtitle}) => {
+  return (
+    <div style={styles.cardContainer}>
+      <div style={styles.cardHeaderContainer}>
+        <div style={{flex: 20, display: 'flex', flexDirection: 'column'}}>
+          <div style={styles.cardTitle}>{title}</div>
+          <div style={styles.cardSubtitle}>{subtitle}</div>
+        </div>
+        <div style={{flex: 6, display: 'flex', justifyContent: 'center', alignItems: 'center'}}>
+          <div style={{backgroundColor: '#DDDDDD', color: '#4C4747', borderRadius: 5, padding: 4, fontWeight: 500, cursor: 'pointer', fontSize: 12, textAlign: 'center', lineHeight: 'normal'}}>Detailed View</div>
+        </div>
+      </div>
+
+      <div style={styles.cardChartContainer}>
+        <Bar options={optionsExpenditure} data={dataExpenditure} />
+      </div>
+      
+    </div>
+  )
+}
+const CardDashboard = ({title, subtitle, chartType, chartData, chartOption}) => {
+  let chart = null;
+  if (chartType === 'vertical-bar') {
+    chart = <Bar 
+      options={chartOption ? chartOption : verticalBarChartOption} 
+      data={chartData ? chartData : null}
+    />
+  }
+  else if (chartType === 'horizontal-bar') {
+    chart = <Bar
+      options={chartOption ? chartOption : horizontalBarChartOption}
+      data={chartData ? chartData : null}
+    />
+  }
+  else if (chartType === 'pie') {
+    chart = <Pie 
+      options={chartOption ? chartOption : pieChartOption}
+      data={chartData ? chartData : null}
+    />
+  }
+  else if (chartType === 'line') {
+    chart = <Line 
+      options={chartOption ? chartOption : lineChartOption}
+      data={chartData ? chartData : null}
+    />
+  }
+
+  return (
+    <div style={styles.cardContainer}>
+      <div style={styles.cardHeaderContainer}>
+        <div style={{flex: 20, display: 'flex', flexDirection: 'column'}}>
+          <div style={styles.cardTitle}>{title}</div>
+          <div style={styles.cardSubtitle}>{subtitle}</div>
+        </div>
+      </div>
+
+      <div style={styles.cardChartContainer}>
+        {chart}
+      </div>
+      
+    </div>
+  )
+}
+
+const CardScheduleHealthPerDivision = ({title, subtitle, chartData, chartOption}) => {
+  return (
+    <div style={styles.cardContainer}>
+      <div style={styles.cardHeaderContainer}>
+        <div style={{flex: 20, display: 'flex', flexDirection: 'column'}}>
+          <div style={styles.cardTitle}>{title}</div>
+          <div style={styles.cardSubtitle}>{subtitle}</div>
+        </div>
+        <div style={{flex: 6, display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center'}}>
+          <div style={{width: '100%', textAlign: 'center', height: 24, fontSize: 12, verticalAlign: 'middle', cursor: 'pointer', color: '#FFFFFF', backgroundColor: '#777777'}}>Budget</div>
+          <div style={{width: '100%', textAlign: 'center', height: 24, fontSize: 12, verticalAlign: 'middle', cursor: 'pointer', color: '#FFFFFF', backgroundColor: '#52AC0B'}} >Schedule</div>
+        </div>
+      </div>
+
+      <div style={styles.cardChartContainer}>
+        <Bar options={optionsScheduleHealthPerDivision} data={dataScheduleHealthPerDivision} />
+      </div>
+      
+    </div>
+  )
+}
+
+const DashboardBOD = () => {
+  const token = localStorage.getItem("token")
+  const HEADER = {
+    headers: {
+      "Content-Type": "application/json",
+      "Authorization": `Bearer ${token}`
+    }
+  }
+
+  return (
+    <div style={{marginLeft: -25, marginRight: -25}}>
+      <Row>
+        <Col span={8}>
+          <CardExpenditure 
+            title="Project Expenditure" 
+            subtitle="Total Project Expenditure from on-going project."
+          />
+        </Col>
+        <Col span={16}>
+          <CardDashboard 
+            title="Project Invoice vs Cash In" 
+            subtitle="Total Invoice vs Cash In taken from all project."
+            chartType="vertical-bar"
+            chartData={{
+              // labels: ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i'],
+              labels: ["Gedung Tenaga Panel Surya", "Pembangunan Gedung Tower ABC", "Tower Jaringan Jawa Barat", "Tower Jaringan Jawa Timur", "Tower Jaringan Jawa Tengah", "Tower Jaringan Bali", "Project Tower ABC", "Tower Jaringan DKI Jakarta", "Tower Jaringan NTT"],
+              datasets: [
+                {
+                  label: "This Year",
+                  data: [16, 8, 12, 10, 13, 12, 10, 10, 8],
+                  borderColor: '#A36A16',
+                  backgroundColor: '#A36A16',
+                  // borderWidth: 2,
+                  borderRadius: 5,
+                  borderSkipped: false
+                },
+                {
+                  label: "Last Year",
+                  data: [1, 1, 7, 6, 10, 9.5, 8, 9, 7.5],
+                  borderColor: '#4C4747',
+                  backgroundColor: '#4C4747',
+                  // borderWidth: 2,
+                  borderRadius: 5,
+                  borderSkipped: false
+                }
+              ],
+            }}
+          />
+        </Col>
+      </Row>
+      <Row>
+        <Col span={8}>
+          <CardDashboard 
+            title="Project By Financial Health" 
+            subtitle="Amount of project grouped by financial health."
+            chartType="pie"
+            chartData={{
+              labels: ["Cost Overrun", "Early Warning", "On Budget"],
+              datasets: [
+                {
+                  label: "",
+                  data: [2, 4, 10],
+                  borderColor: ["#E80053", "#FFD600", "#52AC0B",],
+                  backgroundColor: ["#E80053", "#FFD600", "#52AC0B",],
+                  borderWidth: 2,
+                  borderSkipped: false
+                },
+              ],
+            }}
+          />
+        </Col>
+        <Col span={8}>
+          <CardDashboard 
+            title="Project By Schedule Health" 
+            subtitle="Amount of project grouped by Schedule health."
+            chartType="pie"
+            chartData={{
+              labels: ["Behind Schedule", "Early Warning", "On Schedule"],
+              datasets: [
+                {
+                  label: "",
+                  data: [1, 3, 11],
+                  borderColor: ["#E80053", "#FFD600", "#52AC0B"],
+                  backgroundColor: ["#E80053", "#FFD600", "#52AC0B"],
+                  borderWidth: 2,
+                  borderSkipped: false
+                },
+              ],
+            }}
+          />
+        </Col>
+        <Col span={8}>
+          <CardScheduleHealthPerDivision 
+            title="Project By Schedule Health" 
+            subtitle="Amount of project grouped by Schedule health."
+            chartData={{
+              labels: ["Behind Schedule", "Early Warning", "On Schedule"],
+              datasets: [
+                {
+                  label: "",
+                  data: [1, 3, 11],
+                  borderColor: ["#E80053", "#FFD600", "#52AC0B"],
+                  backgroundColor: ["#E80053", "#FFD600", "#52AC0B"],
+                  borderWidth: 2,
+                  borderRadius: 5,
+                  borderSkipped: false
+                },
+              ],
+            }}
+          />
+        </Col>
+      </Row>
+      <Row>
+        <Col span={8}>
+          <CardDashboard 
+            title="Project By Phase" 
+            subtitle="Progress of project from multiple division."
+            chartType="horizontal-bar"
+            chartData={{
+              labels: ["Initiation", "Planning", "Execution", "Control Monitoring", "Close"],
+              datasets: [
+                {
+                  label: "",
+                  data: [3, 1, 2, 3, 7],
+                  borderColor: ["#F74B25", "#B5179E", "#7209B7", "#023E8A", "#3B009A"],
+                  backgroundColor: ["#F74B25", "#B5179E", "#7209B7", "#023E8A", "#3B009A"],
+                  borderWidth: 2,
+                  borderRadius: 5,
+                  borderSkipped: false
+                },
+              ],
+            }}
+          />
+        </Col>
+        <Col span={8}>
+          <CardDashboard 
+            title="Project By Division" 
+            subtitle="Amount of project from multiple division."
+            chartType="pie"
+            chartData={{
+              labels: ['Telecommunication Solution Service', 'Telecommunication Solution Product', 'Energy Solution', 'Constructions'],
+              datasets: [
+                {
+                  label: "",
+                  data: [7, 2, 4, 3],
+                  borderColor: ["#023E8A", "#C851B7", "#FD7034", "#3A0CA3"],
+                  backgroundColor: ["#023E8A", "#C851B7", "#FD7034", "#3A0CA3"],
+                  borderWidth: 2,
+                  borderSkipped: false
+                },
+              ],
+            }}
+          />
+        </Col>
+        <Col span={8}>
+        <CardDashboard 
+            title="Project Value By Division" 
+            subtitle="Value of project from multiple division."
+            chartType="pie"
+            chartData={{
+              labels: [['Telecommunication', 'Solution Service'], ['Telecommunication','Solution Product'], 'Energy Solution', 'Constructions'],
+              datasets: [
+                {
+                  label: "",
+                  data: [50, 120, 72, 60],
+                  borderColor: ["#023E8A", "#C851B7", "#FD7034", "#3A0CA3"],
+                  backgroundColor: ["#023E8A", "#C851B7", "#FD7034", "#3A0CA3"],
+                  borderWidth: 2,
+                  borderSkipped: false
+                },
+              ],
+            }}
+          />
+        </Col>
+      </Row>
+    </div>
+  );
+}
+
+export default DashboardBOD;
diff --git a/src/views/Dashboard/graphProjectExpenditure.js b/src/views/Dashboard/graphProjectExpenditure.js
deleted file mode 100644
index 32e95d8..0000000
--- a/src/views/Dashboard/graphProjectExpenditure.js
+++ /dev/null
@@ -1,65 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import axios from 'axios'
-import { Bar } from 'react-chartjs-2';
-
-const labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
-
-const data = {
-	labels,
-	datasets: [
-		{
-			label: 'Dataset 1',
-			borderColor: 'rgb(255, 99, 132)',
-			backgroundColor: 'rgba(255, 99, 132, 0.5)',
-			data: []
-		},
-		{
-			label: 'Dataset 2',
-			borderColor: 'rgb(53, 162, 235)',
-			backgroundColor: 'rgba(53, 162, 235, 0.5)',
-		},
-	],
-};
-
-
-const options = {
-	indexAxis: 'y',
-	elements: {
-		bar: {
-			borderWidth: 2,
-		},
-	},
-	responsive: true,
-	plugins: {
-		legend: {
-			position: 'right',
-		},
-		title: {
-			display: true,
-			text: 'Chart.js Horizontal Bar Chart',
-		},
-	},
-};
-
-const DashboardPMO = () => {
-	const token = localStorage.getItem("token")
-	const HEADER = {
-		headers: {
-			"Content-Type": "application/json",
-			"Authorization": `Bearer ${token}`
-		}
-	}
-
-	return (
-		<>
-			<div>
-				<Bar
-					options={options}
-					data={data}
-				/>
-			</div>
-		</>
-	);
-}
-
-export default DashboardPMO;
diff --git a/src/views/Dashboard/index.js b/src/views/Dashboard/index.js
index 4a4b4fc..5c23e6c 100644
--- a/src/views/Dashboard/index.js
+++ b/src/views/Dashboard/index.js
@@ -1,147 +1,6 @@
 import React, { useEffect, useState } from 'react';
-import axios from 'axios'
-import { Row, Col, Button } from 'antd';
-// import {
-//   Chart as ChartJS,
-//   CategoryScale,
-//   LinearScale,
-//   BarElement,
-//   Title,
-//   Tooltip,
-//   Legend,
-// } from 'chart.js';
-import { Bar, HorizontalBar } from 'react-chartjs-2';
 
-// ChartJS.register(
-//   CategoryScale,
-//   LinearScale,
-//   BarElement,
-//   Title,
-//   Tooltip,
-//   Legend
-// );
-
-const verticalBarChartOption = {
-  elements: {
-    bar: {
-      borderWidth: 2,
-    },
-  },
-  maintainAspectRatio: false,
-  responsive: true,
-  legend: {
-    display: true,
-    position: 'right'
-  },
-}
-
-const horizontalBarChartOption = {
-  elements: {
-    bar: {
-      borderWidth: 2,
-    },
-  },
-  responsive: false,
-  legend: {
-    display: false
-  }
-}
-
-const optionsExpenditure = {
-  indexAxis: 'y',
-  elements: {
-    bar: {
-      borderWidth: 2,
-    },
-  },
-  responsive: false,
-  legend: {
-    display: false
-  },
-  // plugins: {
-  //   legend: {
-  //     position: 'right',
-  //   },
-  //   title: {
-  //     display: true,
-  //     text: 'Chart.js Horizontal Bar Chart',
-  //   },
-  // },
-};
-const labelsExpenditure = ['Total Budget', 'Expenditure', 'Invoice', 'Cash In'];
-const dataExpenditure = {
-  labels: labelsExpenditure,
-  datasets: [
-    {
-      label: '',
-      data: [302, 197, 197, 157],
-      borderColor: 'rgb(255, 99, 132)',
-      backgroundColor: 'rgba(255, 99, 132, 0.5)',
-    }
-  ],
-};
-const CardExpenditure = ({title, subtitle}) => {
-  return (
-    <div style={{backgroundColor: '#F8F8F8', margin: 2, paddingLeft: 20, paddingRight: 20, paddingTop: 10}}>
-      <div style={{display: 'flex', flexDirection: 'row', marginBottom: 10}}>
-        <div style={{flex: 20, display: 'flex', flexDirection: 'column'}}>
-          <div style={{color: '#444444', fontSize: 20, fontWeight: 'bold'}}>{title}</div>
-          <div style={{color: '#888888', fontSize: 12}}>{subtitle}</div>
-        </div>
-        <div style={{flex: 6, display: 'flex', justifyContent: 'center', alignItems: 'center'}}>
-          <Button>Detail</Button>
-        </div>
-      </div>
-
-      <div style={{height: 200, marginVertical: 10}}>
-        <HorizontalBar options={optionsExpenditure} data={dataExpenditure} />
-      </div>
-      
-    </div>
-  )
-}
-const CardDashboard = ({title, subtitle, chartType, chartData, chartOption}) => {
-  let chart = null;
-  if (chartType === 'vertical-bar') {
-    chart = <Bar 
-      options={chartOption ? chartOption : verticalBarChartOption} 
-      data={chartData ? chartData : null}
-    />
-  }
-  else if (chartType === 'horizontal-bar') {
-    chart = <HorizontalBar
-      options={chartOption ? chartOption : horizontalBarChartOption}
-      data={chartData ? chartData : null}
-    />
-  }
-  else if (chartType === 'pie') {
-
-  }
-  else if (chartType === 'line') {
-
-  }
-  else if (chartType === '') {
-
-  }
-
-  return (
-    <div style={{backgroundColor: '#F8F8F8', margin: 2, paddingLeft: 20, paddingRight: 20, paddingTop: 10}}>
-      <div style={{display: 'flex', flexDirection: 'row', marginBottom: 10}}>
-        <div style={{flex: 20, display: 'flex', flexDirection: 'column'}}>
-          <div style={{color: '#444444', fontSize: 20, fontWeight: 'bold'}}>{title}</div>
-          <div style={{color: '#888888', fontSize: 12}}>{subtitle}</div>
-        </div>
-      </div>
-
-      <div style={{height: 200, marginVertical: 10}}>
-        {chart}
-      </div>
-      
-    </div>
-  )
-}
-
-const DashboardPMO = () => {
+const Dashboard = () => {
   const token = localStorage.getItem("token")
   const HEADER = {
     headers: {
@@ -152,56 +11,9 @@ const DashboardPMO = () => {
 
   return (
     <div style={{marginLeft: -25, marginRight: -25}}>
-      <Row>
-        <Col span={8}>
-          <CardExpenditure 
-            title="Project Expenditure" 
-            subtitle="Total Project Expenditure from on-going project."
-          />
-        </Col>
-        <Col span={16}>
-          <CardDashboard 
-            title="Project Invoice vs Cash In" 
-            subtitle="Total Invoice vs Cash In taken from all project."
-            chartType="vertical-bar"
-            chartData={{
-              labels: ["Gedung Tenaga Panel Surya", "Pembangunan Gedung Tower ABC", "Tower Jaringan Jawa Barat", "Tower Jaringan Jawa Timur", "Tower Jaringan Jawa Tengah", "Tower Jaringan Bali", "Project Tower ABC", "Tower Jaringan DKI Jakarta", "Tower Jaringan NTT"],
-              datasets: [
-                {
-                  label: "This Year",
-                  data: [16, 8, 12, 10, 13, 12, 10, 10, 8],
-                  borderColor: '#A36A16',
-                  backgroundColor: '#A36A16',
-                  borderWidth: 2,
-                  borderRadius: 20,
-                  borderSkipped: false
-                },
-                {
-                  label: "Last Year",
-                  data: [1, 1, 7, 6, 10, 9.5, 8, 9, 7.5],
-                  borderColor: '#4C4747',
-                  backgroundColor: '#4C4747',
-                  borderWidth: 2,
-                  borderRadius: 20,
-                  borderSkipped: false
-                }
-              ],
-            }}
-          />
-        </Col>
-      </Row>
-      <Row>
-        <Col span={8}></Col>
-        <Col span={8}></Col>
-        <Col span={8}></Col>
-      </Row>
-      <Row>
-        <Col span={8}></Col>
-        <Col span={8}></Col>
-        <Col span={8}></Col>
-      </Row>
+      Dashboard
     </div>
   );
 }
 
-export default DashboardPMO;
+export default Dashboard;
diff --git a/src/views/Map/Map.js b/src/views/Map/Map.js
index 40049f1..a363508 100644
--- a/src/views/Map/Map.js
+++ b/src/views/Map/Map.js
@@ -87,9 +87,66 @@ import Loader from 'react-loader-spinner'
 import "react-loader-spinner/dist/loader/css/react-spinner-loader.css"
 import * as alasql from 'alasql';
 import * as lodash from 'lodash';
-import { Pie, Line } from 'react-chartjs-2';
+// import {
+//   Chart,
+//   ArcElement,
+//   LineElement,
+//   BarElement,
+//   PointElement,
+//   BarController,
+//   BubbleController,
+//   DoughnutController,
+//   LineController,
+//   PieController,
+//   PolarAreaController,
+//   RadarController,
+//   ScatterController,
+//   CategoryScale,
+//   LinearScale,
+//   LogarithmicScale,
+//   RadialLinearScale,
+//   TimeScale,
+//   TimeSeriesScale,
+//   Decimation,
+//   Filler,
+//   Legend,
+//   Title,
+//   Tooltip,
+//   SubTitle
+// } from 'chart.js';
+
+// Chart.register(
+//   ArcElement,
+//   LineElement,
+//   BarElement,
+//   PointElement,
+//   BarController,
+//   BubbleController,
+//   DoughnutController,
+//   LineController,
+//   PieController,
+//   PolarAreaController,
+//   RadarController,
+//   ScatterController,
+//   CategoryScale,
+//   LinearScale,
+//   LogarithmicScale,
+//   RadialLinearScale,
+//   TimeScale,
+//   TimeSeriesScale,
+//   Decimation,
+//   Filler,
+//   Legend,
+//   Title,
+//   Tooltip,
+//   SubTitle
+// );
+import { Chart, LineController, LineElement, PointElement, LinearScale, Title } from 'chart.js'
+// import { Pie, Line } from 'react-chartjs-3';
 import numeral from 'numeral';
 
+Chart.register(LineController, LineElement, PointElement, LinearScale, Title);
+
 const MappifiedNominatimSearch = mappify(NominatimSearch);
 const MappifiedMeasureButton = mappify(MeasureButton);
 const Map = mappify(onDropAware(MapComponent));
@@ -1994,7 +2051,7 @@ class SiopasMap extends Component {
                   <span style={{left:'50', right:'50',marginLeft:'auto',marginRight:'auto'}}>Persentase Progress Proyek</span> <span onClick={this.closeProggressBottom} style={{float:'right',marginLeft:'auto',right:0,cursor:'pointer'}}>x</span>
                   </CardHeader>
                   <CardBody>
-                  <Line
+                  {/* <Line
                     options={{
                       tooltips: {
                         callbacks: {
@@ -2025,7 +2082,7 @@ class SiopasMap extends Component {
                     }}
                     data={dataPersentaseProyek || defaultPersentaseProyek}
                     handleClickChart={() => console.log('click persentase linechart')}
-                  /> 
+                  />  */}
                   </CardBody>
                 </Card>
               </Col>
@@ -2035,7 +2092,7 @@ class SiopasMap extends Component {
                     <span style={{left:'50', right:'50',marginLeft:'auto',marginRight:'auto'}}>Progress Cost Perencanaan dan Realisasi</span> <span onClick={this.closeProggressBottom} style={{marginRight:'7px',float:'right',marginLeft:'auto',right:0,cursor:'pointer'}}>x</span>
                     </CardHeader>
                     <CardBody>
-                      <Line
+                      {/* <Line
                         options={
                           {
                             tooltips: {
@@ -2062,7 +2119,7 @@ class SiopasMap extends Component {
                               ],
                             },
                           }} data={dataCostProyek || defaultCostProyek}
-                      />
+                      /> */}
                     </CardBody>
                   </Card>
               </Col>
@@ -2079,7 +2136,7 @@ class SiopasMap extends Component {
                   </CardHeader>
                   <CardBody>
                     {/* <PieChart data={dataStatusProyek || defaultStatusProyek} /> */}
-                    <Pie 
+                    {/* <Pie 
                       options={{
                         responsive: true,
                         maintainAspectRatio: false,
@@ -2089,7 +2146,7 @@ class SiopasMap extends Component {
                         }
                       }}
                       data={dataStatusProyek || defaultStatusProyek} 
-                    />
+                    /> */}
 
                   </CardBody>
                 </Card>
@@ -2100,7 +2157,7 @@ class SiopasMap extends Component {
                   <span style={{left:'50', right:'50',marginLeft:'auto',marginRight:'auto'}}>Status Pengawas Lapangan</span> <span onClick={this.closeStatusRight} style={{float:'right',marginLeft:'auto',right:0,cursor:'pointer'}}>x</span>
                   </CardHeader>
                   <CardBody>
-                    <Pie 
+                    {/* <Pie 
                       options={{
                         responsive: true,
                         maintainAspectRatio: false,
@@ -2110,7 +2167,7 @@ class SiopasMap extends Component {
                         }
                       }}
                       data={dataStatusWaspang || defaultStatusWaspang} 
-                    />
+                    /> */}
                   </CardBody>
                 </Card>
               </Col>