diff --git a/src/views/RR/HisDeployments.js b/src/views/RR/HisDeployments.js
index 37b4afcf..d3223720 100644
--- a/src/views/RR/HisDeployments.js
+++ b/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 = () =>{
+
>
)
}
diff --git a/src/views/RR/HisDeploymentsHTSMap.js b/src/views/RR/HisDeploymentsHTSMap.js
new file mode 100644
index 00000000..61f5a390
--- /dev/null
+++ b/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 + '
' +
+ this.point.properties.NAME_1 + ': ' + this.point.value + '% ';
+ }
+ },
+ 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 + '
' +
+ this.point.properties.NAME_1 + ': ' + this.point.value + '% ';
+ }
+ },
+ 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 (
+
+
+
+
+ eHTS COVERAGE BY COUNTY
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+export default HisDeploymentsHTSMap;
diff --git a/src/views/RR/RRCounty.js b/src/views/RR/RRCounty.js
index 7cc1835f..0f239a8e 100644
--- a/src/views/RR/RRCounty.js
+++ b/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' } }
],
diff --git a/src/views/RR/RROverviewTrends.js b/src/views/RR/RROverviewTrends.js
index d4aaf897..6de872d3 100644
--- a/src/views/RR/RROverviewTrends.js
+++ b/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: '{point.y} %' } } },
legend: { enabled: false },
diff --git a/src/views/Shared/countyMapping.json b/src/views/Shared/countyMapping.json
index 18d33221..ef5faa5d 100644
--- a/src/views/Shared/countyMapping.json
+++ b/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" }
-]
\ No newline at end of file
+]