Merge pull request #55 from palladiumkenya/addCharts

Add charts

package.json

@@ -9,6 +9,7 @@
     "axios": "^0.26.0",
     "babel-plugin-macros": "^3.1.0",
     "bootstrap": "^5.1.3",
+    "chart.js": "^4.4.0",
     "datatables.net": "^1.11.5",
     "datatables.net-dt": "^1.11.5",
     "exceljs": "^4.3.0",
@@ -18,6 +19,7 @@
     "oidc-client-ts": "^2.0.1",
     "react": "^17.0.2",
     "react-bootstrap-sweetalert": "^5.2.0",
+    "react-chartjs-2": "^5.2.0",
     "react-data-table-component": "^7.4.7",
     "react-dom": "^17.0.2",
     "react-flash-message": "^1.0.8",

src/components/Home.js

@@ -63,7 +63,7 @@ const Home = (props) =>{
           await userManager.getUser().then((user) =>{         
             if (user){
 
-                if (["[email protected]", "[email protected]"].includes(user.profile.email.toLowerCase())){
+                if (["[email protected]"].includes(user.profile.email.toLowerCase())){
                     setuserEmailAllowed(true)
                 }
 

src/components/ViewReports.js

@@ -1,5 +1,5 @@
 import React, { Component, useEffect, useState } from "react";
-import { Button, Spinner } from "reactstrap";
+import { Button, Form, FormGroup, Input, Label, Spinner, Container,Row,Col } from "reactstrap";
 import {FaEdit } from 'react-icons/fa';
 import Swal from 'sweetalert2'
 import { Link } from 'react-router-dom';
@@ -9,6 +9,11 @@ import { API_URL, EMAIL_URL, BASE_URL } from "../constants";
 
 import axios from "axios";
 import { useParams } from 'react-router-dom'
+import EmrTypeChart from "./charts/EmrTypeChart";
+import InfractractureTypeChart from "./charts/InfrastructureTypeChart";
+import InfrastructureTypeChart from "./charts/InfrastructureTypeChart";
+import FacilityByCountyChart from "./charts/FacilityByCountyChart";
+import ImplementationTypeChart from "./charts/ImplementationTypeChart";
 
 
 
@@ -37,7 +42,32 @@ const ViewReports = () => {
                 {!showSpinner && <ExportToExcel apiData={excelreportdata} fileName={fileName}/> }
                {showSpinner && <Spinner style={{width: "1.2rem", height: "1.2rem"}}></Spinner> }
            </h4>
-
+
+            <Container style={{'marginTop':'30px'}}>
+                <Row>
+                    <Col xs={1}>
+                    </Col>
+                    <Col xs={3}>
+                        <EmrTypeChart />
+                    </Col>
+                    <Col xs={3}>
+                        <InfrastructureTypeChart />
+                    </Col>
+                    <Col xs={3}>
+                        <ImplementationTypeChart />
+                    </Col>
+                    <Col xs={1}>
+                    </Col>
+                </Row>
+            </Container>
+            <Container style={{'marginTop':'30px'}}>
+                <Row>
+                    <Col xs={12}>
+                        <FacilityByCountyChart />
+                    </Col>
+                </Row>
+            </Container>
+
         </div>
       );
 

src/components/charts/EmrTypeChart.js

@@ -0,0 +1,86 @@
+import React, { Component, useEffect, useState } from "react";
+import { Button, Spinner } from "reactstrap";
+import {FaEdit } from 'react-icons/fa';
+import Swal from 'sweetalert2'
+import { Link } from 'react-router-dom';
+
+import { Chart as ChartJS, ArcElement, Tooltip, Legend } from "chart.js";
+import { Pie } from "react-chartjs-2";
+
+import { API_URL, EMAIL_URL, BASE_URL } from "../../constants";
+
+import axios from "axios";
+import { useParams } from 'react-router-dom'
+
+
+ChartJS.register(ArcElement, Tooltip, Legend);
+
+
+
+const EmrTypeChart = () => {
+// State to hold the fetched data
+    const [chartData, setChartData] = useState(null);
+
+    const options = {
+        responsive: true,
+        plugins: {
+            legend: {
+                position: 'top',
+            },
+            title: {
+                display: true,
+                text: 'Facilities Distributed by Emr Type',
+            },
+        },
+    };
+
+    // Function to fetch data from the API
+    const fetchData = async () => {
+        try {
+            const response = await fetch(API_URL + '/fetchEmrTypesCount');
+            const data = await response.json();
+
+            // Process the data as needed
+            // For example, extract labels and data for the chart
+            const labels = Object.keys(data[0]);
+            const values = Object.values(data[0]);
+
+            // Update the state with the chart data
+            setChartData({
+                labels: Object.keys(data[0]),
+                datasets: [
+                    {
+                        label: 'No. of Facilities',
+                        data: Object.values(data[0]),
+                        backgroundColor: [
+                            'rgba(255, 99, 132, 0.2)',
+                            'rgba(54, 162, 235, 0.2)',
+                        ],
+                        borderColor: [
+                            'rgba(255, 99, 132, 1)',
+                            'rgba(54, 162, 235, 1)',
+                        ],
+                        borderWidth: 1,
+                    },
+                ],
+            });
+        } catch (error) {
+            console.error('Error fetching data:', error);
+        }
+    };
+
+    // useEffect to fetch data on component mount
+    useEffect(() => {
+        fetchData();
+    }, []);
+
+    // Render the chart
+    return (
+        <div>
+            {chartData && <Pie data={chartData}  options={options}/>}
+        </div>
+    );
+
+}
+
+export default EmrTypeChart;

src/components/charts/FacilityByCountyChart.js

@@ -0,0 +1,103 @@
+import React, { Component, useEffect, useState } from "react";
+import { Button, Spinner } from "reactstrap";
+import {FaEdit } from 'react-icons/fa';
+import Swal from 'sweetalert2'
+import { Link } from 'react-router-dom';
+
+import {
+    Chart as ChartJS,
+    CategoryScale,
+    LinearScale,
+    BarElement,
+    Title,
+    Tooltip,
+    Legend,
+} from 'chart.js';
+import { Pie, Bar } from "react-chartjs-2";
+
+import { API_URL, EMAIL_URL, BASE_URL } from "../../constants";
+
+import axios from "axios";
+import { useParams } from 'react-router-dom'
+
+
+ChartJS.register(
+    CategoryScale,
+    LinearScale,
+    BarElement,
+    Title,
+    Tooltip,
+    Legend
+);
+
+
+
+
+const FacilityByCountyChart = () => {
+// State to hold the fetched data
+    const [chartData, setChartData] = useState(null);
+
+    const options = {
+        responsive: true,
+        plugins: {
+            legend: {
+                position: 'top',
+            },
+            title: {
+                display: true,
+                text: 'Facilities Distributed by County',
+            },
+        },
+    };
+
+
+    // Function to fetch data from the API
+    const fetchData = async () => {
+        try {
+            const response = await fetch(API_URL + '/fetchByCountiesCount');
+            const data = await response.json();
+
+            // Process the data as needed
+
+            const dataLabels = data.map(item => item['county__name']);
+            const dataValues = data.map(item => item['count']);
+
+            // Update the state with the chart data
+            setChartData({
+                labels: dataLabels,
+                datasets: [
+                    {
+                        label: 'No. of Facilities',
+                        data: dataValues,
+                        backgroundColor: [
+                            'rgba(255, 99, 132, 0.2)',
+                            'rgba(54, 162, 235, 0.2)',
+                        ],
+                        borderColor: [
+                            'rgba(255, 99, 132, 1)',
+                            'rgba(54, 162, 235, 1)',
+                        ],
+                        borderWidth: 1,
+                    },
+                ],
+            });
+        } catch (error) {
+            console.error('Error fetching data:', error);
+        }
+    };
+
+    // useEffect to fetch data on component mount
+    useEffect(() => {
+        fetchData();
+    }, []);
+
+    // Render the chart
+    return (
+        <div>
+            {chartData && <Bar data={chartData} options={options} />}
+        </div>
+    );
+
+}
+
+export default FacilityByCountyChart;

src/components/charts/ImplementationTypeChart.js

@@ -0,0 +1,91 @@
+import React, { Component, useEffect, useState } from "react";
+import { Button, Spinner } from "reactstrap";
+import {FaEdit } from 'react-icons/fa';
+import Swal from 'sweetalert2'
+import { Link } from 'react-router-dom';
+
+import { Chart as ChartJS, ArcElement, Tooltip, Legend } from "chart.js";
+import { Pie } from "react-chartjs-2";
+
+import { API_URL, EMAIL_URL, BASE_URL } from "../../constants";
+
+import axios from "axios";
+import { useParams } from 'react-router-dom'
+
+
+ChartJS.register(ArcElement, Tooltip, Legend);
+
+
+
+const ImplementationTypeChart = () => {
+// State to hold the fetched data
+    const [chartData, setChartData] = useState(null);
+
+    const options = {
+        responsive: true,
+        plugins: {
+            legend: {
+                position: 'top',
+            },
+            title: {
+                display: true,
+                text: 'Facilities Distributed Under Each Implementation Type',
+            },
+        },
+    };
+
+    // Function to fetch data from the API
+    const fetchData = async () => {
+        try {
+            const response = await fetch(API_URL + '/fetchImplementationTypesCount');
+            const data = await response.json();
+
+            // Process the data as needed
+
+            // Update the state with the chart data
+            setChartData({
+                labels: Object.keys(data[0]),
+                datasets: [
+                    {
+                        label: 'No. of Facilities',
+                        data: Object.values(data[0]),
+                        backgroundColor: [
+                            'rgba(255, 99, 132, 0.2)',
+                            'rgba(54, 162, 235, 0.2)',
+                            'rgba(255, 206, 86, 0.2)',
+                            'rgba(75, 192, 192, 0.2)',
+                            'rgba(153, 102, 255, 0.2)',
+                            'rgba(255, 159, 64, 0.2)',
+                        ],
+                        borderColor: [
+                            'rgba(255, 99, 132, 1)',
+                            'rgba(54, 162, 235, 1)',
+                            'rgba(255, 206, 86, 1)',
+                            'rgba(75, 192, 192, 1)',
+                            'rgba(153, 102, 255, 1)',
+                            'rgba(255, 159, 64, 1)',
+                        ],
+                        borderWidth: 1,
+                    },
+                ],
+            });
+        } catch (error) {
+            console.error('Error fetching data:', error);
+        }
+    };
+
+    // useEffect to fetch data on component mount
+    useEffect(() => {
+        fetchData();
+    }, []);
+
+    // Render the chart
+    return (
+        <div>
+            {chartData && <Pie data={chartData}  options={options}/>}
+        </div>
+    );
+
+}
+
+export default ImplementationTypeChart;