eHts maps added to his deployments dash

src/views/RR/HisDeployments.js

@@ -25,6 +25,7 @@ import HisDeploymentsEMRStatusByCounty from './HisDeploymentsEMRStatusByCounty';
 import HisDeploymentsFacilityByInfrastructureCounty from './HisDeploymentsFacilityByInfrastructureCounty';
 import { loadHisFacilityArtHtsMnchAction } from '../../actions/RR/hisFacilityArtHtsMnchActions';
 import HisDeploymentsArtHtsMnchLinelist from './HisDeploymentsArtHtsMnchLinelist';
+import HisDeploymentsHTSMap from './HisDeploymentsHTSMap';
 
 const HisDeployments = () =>{
     const dispatch = useDispatch();
@@ -64,6 +65,7 @@ const HisDeployments = () =>{
             <HisDeploymentsTxCurr />
             <HisDeploymentsArtHtsMnchLinelist />
             <HisDeploymentsLinelist />
+            <HisDeploymentsHTSMap />
         </>
     )
 }

src/views/RR/HisDeploymentsHTSMap.js

@@ -0,0 +1,143 @@
+import React, { useEffect, useState, useCallback } from 'react';
+import Highcharts from '../../utils/highcharts';
+import HighchartsReact from 'highcharts-react-official';
+import { getAll } from '../Shared/Api';
+import countyMapping from '../Shared/countyMapping.json';
+import { useSelector } from 'react-redux';
+import { Card, CardBody, CardHeader, Col, Row } from 'reactstrap';
+
+const HisDeploymentsHTSMap = () => {
+    const filters = useSelector(state => state.filters);
+    const [htsCoverageByCounty, setHtsCoverageByCountyMap] = useState({});
+    const [htsPosCoverageByCounty, setHtsPosCoverageByCountyMap] = useState({});
+
+    const loadCurrentOnArtByCounty = useCallback(async () => {
+        let params = {
+            county: filters.counties,
+            subCounty: filters.subCounties,
+            facility: filters.facilities,
+            partner: filters.partners,
+            agency: filters.agencies,
+            project: filters.projects,
+        };
+        const htsPerData = [];
+        const htsPosPerData = [];
+        const mappedCounties = countyMapping;
+        const result = await getAll('common/getCountyCoverageHts', params);
+        for (let i = 0; i < result.length; i++) {
+            let resultCounty = result[i].County;
+            resultCounty = resultCounty ? resultCounty.toLowerCase() : '';
+            resultCounty = resultCounty.replace(/[`~!@#$%^&*()_|+\-=?;:'",.<>{}[]\\\/]/gi, '');
+            resultCounty = resultCounty.replace(' ', '');
+            for (let j = 0; j < mappedCounties.length; j++) {
+                let mappedCounty = mappedCounties[j].name;
+                mappedCounty = mappedCounty.toLowerCase();
+                mappedCounty = mappedCounty.replace(/[`~!@#$%^&*()_|+\-=?;:'",.<>{}[]\\\/]/gi, '');
+                mappedCounty = mappedCounty.replace(' ', '');
+                if ( mappedCounty === resultCounty) {
+                    let htsPer = result[i].Tested_DHIS > 0 ? (result[i].Tested_NDW / result[i].Tested_DHIS) * 100 : 0
+                    htsPerData.push({
+                        id: mappedCounties[j].id,
+                        value: htsPer.toFixed(2)
+                    });
+                    let htsPosPer = result[i].Positive_DHIS > 0 ? (result[i].Positive_NDW / result[i].Positive_DHIS) * 100 : 0
+                    htsPosPerData.push({
+                        id: mappedCounties[j].id,
+                        value: htsPosPer.toFixed(2)
+                    });
+                }
+            }
+        }
+
+        setHtsCoverageByCountyMap({
+            chart: { map: 'custom/ke-county' },
+            title: { text: '' },
+            colors: ['#62c1e5', '#E28C78', '#F17B25', '#F7DB00', '#8CC63F', '#009245'],
+            colorAxis: { dataClassColor: 'category', dataClasses: [
+                { to: 0 },
+                { from: 0.01, to: 10 },
+                { from: 10, to: 25 },
+                { from: 25, to: 45 },
+                { from: 45, to: 80 },
+                { from: 80 }
+            ]},
+            tooltip: {
+                formatter: function () {
+                    return this.series.name + '<br>' +
+                    this.point.properties.NAME_1 + ': <b>' + this.point.value + '% </b>';
+                }
+            },
+            mapNavigation: {
+                enabled: true,
+                enableMouseWheelZoom: false,
+                enableButtons: false,
+                buttonOptions: {
+                    verticalAlign: 'bottom'
+                }
+            },
+            legend: { title: { text: 'KEY: % NDW Coverage' }, layout: 'vertical', align: 'right', verticalAlign: 'bottom', valueDecimals: 0, backgroundColor: 'white', floating: true, },
+            series: [
+                { name: 'HTS_TST Coverage', data: htsPerData, joinBy: ['CC_1', 'id'], states: { hover: { color: '#000000' } } }
+            ]
+        });
+
+        setHtsPosCoverageByCountyMap({
+            chart: { map: 'custom/ke-county' },
+            title: { text: '' },
+            colors: ['#F5542D', '#F17B25', '#F7DB00', '#8CC63F', '#009245'],
+            colorAxis: { dataClassColor: 'category', dataClasses: [
+                { to: 0 },
+                { from: 0, to: 10 },
+                { from: 10, to: 20 },
+                { from: 20, to: 50 },
+                { from: 50000 }
+            ]},
+            tooltip: {
+                formatter: function () {
+                    return this.series.name + '<br>' +
+                    this.point.properties.NAME_1 + ': <b>' + this.point.value + '% </b>';
+                }
+            },
+            mapNavigation: {
+                enabled: true,
+                enableMouseWheelZoom: false,
+                enableButtons: false,
+                buttonOptions: {
+                    verticalAlign: 'bottom'
+                }
+            },
+            legend: { title: { text: 'KEY: % NDW Coverage' }, layout: 'vertical', align: 'right', verticalAlign: 'bottom', valueDecimals: 0, backgroundColor: 'white', floating: true, },
+            series: [
+                { name: 'HTS_POS Coverage', data: htsPosPerData, joinBy: ['CC_1', 'id'], states: { hover: { color: '#000000' } } }
+            ]
+        });
+    }, [filters]);
+
+    useEffect(() => {
+        loadCurrentOnArtByCounty();
+    }, [loadCurrentOnArtByCounty]);
+
+    return (
+        <div className="row">
+            <div className="col-12">
+                <Card className="trends-card">
+                    <CardHeader className="trends-header">
+                        eHTS COVERAGE BY COUNTY
+                    </CardHeader>
+                    <CardBody className="trends-body">
+                        <Row>
+                            <Col>
+                                <HighchartsReact highcharts={Highcharts} options={htsCoverageByCounty} constructorType={'mapChart'}/>
+                            </Col>
+                            <Col>
+                                <HighchartsReact highcharts={Highcharts} options={htsPosCoverageByCounty} constructorType={'mapChart'}/>
+                            </Col>
+                        </Row>
+                    </CardBody>
+                </Card>
+            </div>
+        </div>
+    );
+}
+
+export default HisDeploymentsHTSMap;

src/views/RR/RRCounty.js

@@ -114,7 +114,7 @@ const RRCounty = () => {
 
         setReportingByCounty({
             title: { text: '' },
-            xAxis: [{ categories: counties.map(name=> name?name.toUpperCase(): name), title: { text: 'Counties'.toUpperCase() }, crosshair: true }],
+            xAxis: [{ categories: counties?.map(name=> name?name.toUpperCase(): name), title: { text: 'COUNTIES' }, crosshair: true }],
             yAxis: [
                 { title: { text: 'NUMBER OF EMR SITES' } }
             ],

src/views/RR/RROverviewTrends.js

@@ -72,7 +72,7 @@ const RROverviewTrends = () => {
         const dataProcessed = dataRecent.map(d => Math.round((d/expected) * 100));
         setOverallReportingTrend({
             title: { text: '', },
-            xAxis: [{ labels: { style: { fontSize: '9px' } },categories: categories.map(name => name ? name.toUpperCase() : name), crosshair: true }],
+            xAxis: [{ labels: { style: { fontSize: '9px' } },categories: categories?.map(name => name ? name.toUpperCase() : name), crosshair: true }],
             yAxis: [{ title: { text: 'Percentage'.toUpperCase() }, labels: { format: '{value}' } }],
             plotOptions: { column: { dataLabels: { enabled: true, format: '<b>{point.y} %</b>' } } },
             legend: { enabled: false },

src/views/Shared/countyMapping.json

@@ -7,7 +7,7 @@
     { "id": 26, "name": "Trans Nzoia" },
     { "id": 7, "name": "Garissa" },
     { "id": 43, "name": "Homa Bay" },
-    { "id": 28, "name": "Elgeyo-Marakwet" },
+    { "id": 28, "name": "Elgeyo Marakwet" },
     { "id": 14, "name": "Embu" },
     { "id": 39, "name": "Bungoma" },
     { "id": 40, "name": "Busia" },
@@ -46,4 +46,4 @@
     { "id": 33, "name": "Narok" },
     { "id": 46, "name": "Nyamira" },
     { "id": 24, "name": "West Pokot" }
-]
+]