update chart.js react-chartjs-2 version, add DashboardBOD by link /dashboard-bod

package.json

@@ -33,8 +33,8 @@
     "antd": "^4.16.13",
     "axios": "^0.21.1",
     "bootstrap": "^4.3.1",
-    "chart.js": "^2.8.0",
+    "chart.js": "^3.9.1",
-    "chartjs-plugin-datalabels": "^1.0.0",
+    "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",

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 },

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;

src/views/Dashboard/graphProjectExpenditure.js

@@ -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;

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(
+const Dashboard = () => {
-//   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 token = localStorage.getItem("token")
   const HEADER = {
     headers: {
@@ -152,56 +11,9 @@ const DashboardPMO = () => {
 
   return (
     <div style={{marginLeft: -25, marginRight: -25}}>
-      <Row>
+      Dashboard
-        <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>
     </div>
   );
 }
 
-export default DashboardPMO;
+export default Dashboard;

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>