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 +]