otz corrections on charts

src/actions/CT/OTZ/OtzAlhivOnArtByAgeSexActions.js

@@ -0,0 +1,36 @@
+import moment from 'moment';
+import { CACHING, PAGES } from '../../../constants';
+import * as actionTypes from '../../types';
+import { getAll } from '../../../views/Shared/Api';
+
+export const loadAlhivOnArtByAgeSex = () => async (dispatch, getState) => {
+    const diffInMinutes = moment().diff(
+        moment(getState().otzAlhivOnArtByAgeSex.lastFetch),
+        'minutes'
+    );
+    if (getState().ui.ctTab !== 'otz' &&
+        getState().ui.currentPage !== PAGES.ct) {
+        return;
+    }
+    else if ((diffInMinutes < CACHING.LONG) && getState().filters.filtered === false) {
+        return;
+    } else {
+        await dispatch(fetchAlhivOnArtByAgeSex());
+    }
+}
+
+export const fetchAlhivOnArtByAgeSex = () => async (dispatch, getState) => {
+    dispatch({ type: actionTypes.CT_OTZ_ALHIV_ON_ART_BY_AGE_SEX_REQUEST });
+    const params = {
+        county: getState().filters.counties,
+        subCounty: getState().filters.subCounties,
+        facility: getState().filters.facilities,
+        partner: getState().filters.partners,
+        agency: getState().filters.agencies,
+        project: getState().filters.projects,
+        gender: getState().filters.genders,
+        datimAgeGroup: getState().filters.datimAgeGroups,
+    };
+    const response = await getAll('care-treatment/getAlhivOnArtByAgeSex', params);
+    dispatch({ type: actionTypes.CT_OTZ_ALHIV_ON_ART_BY_AGE_SEX_FETCH, payload: { filtered: getState().filters.filtered, list: response }});
+};

src/actions/types.js

@@ -625,6 +625,10 @@ export const CT_OTZ_VL_SUPPRESSION_NOT_ENROLLED_BY_PARTNER_REQUEST = 'CT_OTZ_VL_
 export const CT_OTZ_VL_SUPPRESSION_NOT_ENROLLED_BY_PARTNER_FETCH = 'CT_OTZ_VL_SUPPRESSION_NOT_ENROLLED_BY_PARTNER_FETCH';
 export const CT_OTZ_VL_SUPPRESSION_NOT_ENROLLED_BY_PARTNER_FAILED = 'CT_OTZ_VL_SUPPRESSION_NOT_ENROLLED_BY_PARTNER_FAILED';
 
+export const CT_OTZ_ALHIV_ON_ART_BY_AGE_SEX_REQUEST = 'CT_OTZ_ALHIV_ON_ART_BY_AGE_SEX_REQUEST';
+export const CT_OTZ_ALHIV_ON_ART_BY_AGE_SEX_FETCH = 'CT_OTZ_ALHIV_ON_ART_BY_AGE_SEX_FETCH';
+export const CT_OTZ_ALHIV_ON_ART_BY_AGE_SEX_FAILED = 'CT_OTZ_ALHIV_ON_ART_BY_AGE_SEX_FAILED';
+
 export const CT_OVC_OVERALL_SERV_REQUEST = 'CT_OVC_OVERALL_SERV_REQUEST'
 export const CT_OVC_OVERALL_SERV_FETCH = 'CT_OVC_OVERALL_SERV_FETCH'
 export const CT_OVC_OVERALL_SERV_FAILED = 'CT_OVC_OVERALL_SERV_FAILED'

src/reducers/CT/OTZ/otzAlhivOnArtByAgeSex.js

@@ -0,0 +1,31 @@
+import * as actionTypes from "../../../actions/types";
+
+const initialState = {
+    lastFetch: null,
+    loading: false,
+    listUnfiltered: [],
+    listFiltered: [],
+};
+
+export default (state = initialState, action) => {
+    let newState = { ...state };
+    switch (action.type) {
+        case actionTypes.CT_OTZ_ALHIV_ON_ART_BY_AGE_SEX_REQUEST:
+            newState.loading = true;
+            return newState;
+        case actionTypes.CT_OTZ_ALHIV_ON_ART_BY_AGE_SEX_FETCH:
+            if (action.payload.filtered === true) {
+                newState.listFiltered = action.payload.list;
+            } else {
+                newState.listUnfiltered = action.payload.list;
+                newState.lastFetch = Date.now();
+            }
+            newState.loading = false;
+            return newState;
+        case actionTypes.CT_OTZ_ALHIV_ON_ART_BY_AGE_SEX_FAILED:
+            newState.loading = false;
+            return newState;
+        default:
+            return state;
+    }
+}

src/reducers/index.js

@@ -149,6 +149,7 @@ import otzOutcomesByPartner from './CT/OTZ/otzOutcomesByPartner';
 import otzTotalAdolescents from './CT/OTZ/otzTotalAdolescents';
 import otzEnrolled from './CT/OTZ/otzEnrolled';
 import otzTotalWithVlResults from './CT/OTZ/otzTotalWithVlResults';
+import otzAlhivOnArtByAgeSex from './CT/OTZ/otzAlhivOnArtByAgeSex';
 import otzTotalWithWithResultsLessThan1000 from './CT/OTZ/otzTotalWithWithResultsLessThan1000';
 import ovcOverallServ from './CT/OVC/ovcOverallServ';
 import ovcServByGender from './CT/OVC/ovcServByGender';
@@ -456,6 +457,7 @@ export default combineReducers({
 
     consistencyByFacilityNotReported,
 
+    otzAlhivOnArtByAgeSex,
     otzEnrollmentAmongAlhivOnArtBySex,
     otzEnrollmentAmongAlhivOnArtByAge,
     otzEnrollmentAmongAlhivOnArtByCounty,

src/selectors/AgeGroupsArray.js

@@ -1,3 +1,4 @@
 export let childrenAgeGroups = [' Under 1', '01 to 04','05 to 09','10 to 14'];
 export let adultAgeGroups = ['15 to 19','20 to 24','25 to 29','30 to 34','35 to 39','40 to 44','45 to 49','50 to 54','55 to 59','60 to 64','65+'];
 export let ovcAgeGroups = [' Under 1', '01 to 04','05 to 09','10 to 14', '15 to 19'];
+export let otzAgeGroups = ['10 to 14', '15 to 19'];

src/selectors/CT/OTZ/otzAlhivOnArtByAgeSex.js

@@ -0,0 +1,40 @@
+import { createSelector } from 'reselect';
+import * as ageGroups from '../../AgeGroupsArray';
+import _ from 'lodash';
+
+const filtered = state => state.filters.filtered;
+const listFiltered = state => state.otzAlhivOnArtByAgeSex.listFiltered;
+const listUnfiltered = state => state.otzAlhivOnArtByAgeSex.listUnfiltered;
+
+export const getOtzAlhivOnArtByAgeSex = createSelector(
+    [listUnfiltered, listFiltered, filtered],
+    (listUnfiltered, listFiltered, filtered) => {
+        const list = filtered ? listFiltered : listUnfiltered;
+        let otzAgeGroups = ageGroups.otzAgeGroups;
+
+        let distributionMale = [];
+        let distributionFemale = [];
+
+        for (const ageGroup of otzAgeGroups) {
+            const ageGroupMaleFilter = list?.filter(obj => obj.AgeGroup === ageGroup && (obj.Gender.toLowerCase() === "M".toLowerCase() || obj.Gender.toLowerCase() === "Male".toLowerCase()));
+            const ageGroupFemaleFilter = list.filter(obj => obj.AgeGroup === ageGroup && (obj.Gender.toLowerCase() === "F".toLowerCase() || obj.Gender.toLowerCase() === "Female".toLowerCase()));
+            if (ageGroupMaleFilter.length > 0) {
+                distributionMale.push(ageGroupMaleFilter[0].CALHIVonART);
+            } else {
+                distributionMale.push(0);
+            }
+
+            if (ageGroupFemaleFilter.length > 0) {
+                distributionFemale.push(ageGroupFemaleFilter[0].CALHIVonART);
+            } else {
+                distributionFemale.push(0);
+            }
+        }
+
+        let max = _.max([_.max(distributionMale), _.max(distributionFemale)]);
+        distributionMale = distributionMale.map(x => x * -1);
+
+        return { max, otzAgeGroups, distributionMale, distributionFemale };
+        // return filtered ? listFiltered : listUnfiltered;
+    }
+);

src/selectors/CT/OTZ/otzDistributionOfPatientsByAgeSex.js

@@ -11,8 +11,8 @@ export const getOtzDistributionOfPatientsByAgeSex = createSelector(
     [listUnfiltered, listFiltered, filtered],
     (listUnfiltered, listFiltered, filtered) => {
         const list = filtered ? listFiltered : listUnfiltered;
-        
-        let otzAgeGroups = ['10 to 14', '15 to 19', '20 to 24'];
+
+        let otzAgeGroups = ['10 to 14', '15 to 19'];
 
         let distributionMale = [];
         let distributionFemale = [];

src/selectors/CT/OTZ/otzNotEnrolledAmongAlHivByPartner.js

@@ -19,7 +19,7 @@ export const getOtzNotEnrolledAmongAlHivOnArtByPartner = createSelector(
                 (obj) =>{
                     return obj.partner === listElement.CTPartner;
             });
-            
+
             if (filterTotalAdolescents.length > 0) {
                 const percentage =
                     (listElement.Num /
@@ -33,7 +33,7 @@ export const getOtzNotEnrolledAmongAlHivOnArtByPartner = createSelector(
                 });
             }
         }
-        
+
         arrayVal.sort((a, b) => {
             return b.y - a.y;
         });

src/selectors/CT/OTZ/otzProportionOfAlHivEnrolledInOtzWhoHaveCompletedTrainingByCounty.js

@@ -17,7 +17,7 @@ export const getProportionOfAlhivEnrolledInOtzWhoHaveCompletedTrainingByCounty =
             let percent = 0;
             const selectedCounty = listCounty.filter(obj => obj.County === listElement.County);
             if (selectedCounty.length > 0) {
-                percent = ((listElement.count_training / selectedCounty[0].count_training) * 100);
+                percent = ((listElement.count_training / selectedCounty[0].alhiv) * 100);
             }
             ArrayList.push(
                 {

src/selectors/CT/OTZ/otzProportionOfAlHivEnrolledInOtzWhoHaveCompletedTrainingByPartner.js

@@ -17,8 +17,9 @@ export const getProportionOfAlhivEnrolledInOtzWhoHaveCompletedTrainingByPartner
             let percent = 0;
             const selectedPartner = listPartner.filter(obj => obj.partner === listElement.partner);
             if (selectedPartner.length > 0) {
-                percent = ((listElement.count_training / selectedPartner[0].count_training) * 100);
+                percent = ((listElement.count_training / selectedPartner[0].alhiv) * 100);
             }
+            console.log(selectedPartner[0].alhiv, percent, listElement.count_training)
             ArrayList.push(
                 {
                     count_training: listElement.count_training,

src/views/CT/CT.js

@@ -335,14 +335,14 @@ import {
 import {
     loadViralLoadOverallNumberGt1000CopiesSecondlineRegiment
 } from '../../actions/CT/ViralLoad/viralLoadOverallNumberTestsGt1000CopiesSecondlineRegiment';
-import { loadCurrentOnArtVerified } from './../../actions/CT/CurrentOnArt/currentOnArtVerifiedActions';
+import { loadCurrentOnArtVerified } from '../../actions/CT/CurrentOnArt/currentOnArtVerifiedActions';
 import { loadCurrentOnArtVerifiedByPartner } from './../../actions/CT/CurrentOnArt/currentOnArtVerifiedByPartnerActions';
 import { loadCurrentOnArtVerifiedByCounty } from './../../actions/CT/CurrentOnArt/currentOnArtVerifiedByCountyActions';
-import { loadCurrentOnArtVerifiedByAgeSex } from './../../actions/CT/CurrentOnArt/currentOnArtVerifiedByAgeSexActions';
+import { loadCurrentOnArtVerifiedByAgeSex } from '../../actions/CT/CurrentOnArt/currentOnArtVerifiedByAgeSexActions';
 import { loadOtzEnrollmentTrend } from '../../actions/CT/OTZ/OtzEnrollmentTrendsActions';
 import { loadOtzEnrollmentByAgeSex } from '../../actions/CT/OTZ/OtzEnrollmentByAgeSexActions';
 import { loadOtzNotEnrolledPartner } from '../../actions/CT/OTZ/OtzNotEnrolledByPartnerActions';
-import { loadOtzNotEnrolledCounty } from './../../actions/CT/OTZ/OtzNotEnrolledByCountyActions';
+import { loadOtzNotEnrolledCounty } from '../../actions/CT/OTZ/OtzNotEnrolledByCountyActions';
 import { loadAlHivWithReSuppression } from '../../actions/CT/OTZ/AlHivWithReSuppressionActions';
 import { loadOtzVlSuppressionByAgeNotEnrolled } from '../../actions/CT/OTZ/OtzVlSuppressionByAgeNotEnrolledActions';
 import { loadOtzVlSuppressionBySexNotEnrolled } from '../../actions/CT/OTZ/OtzVlSuppressionBySexNotEnrolledActions';
@@ -361,6 +361,7 @@ import { loadIITTracing } from './../../actions/CT/TreatmentOutcomes/IITTracingA
 import { loadIITTracingOutcomes } from './../../actions/CT/TreatmentOutcomes/IITTracingOutcomesActions';
 import { loadViralLoadUptakeUToU } from '../../actions/CT/ViralLoad/viralLoadUptakeUToUActions';
 import { loadViralLoadCategorizationUToU } from '../../actions/CT/ViralLoad/viralLoadCategorizationUToUActions';
+import { loadAlhivOnArtByAgeSex } from '../../actions/CT/OTZ/OtzAlhivOnArtByAgeSexActions';
 
 const NewOnArt = Loadable({ loader: () => import('./NewOnArt/NewOnArt'), loading: Loading, delay: LOADING_DELAY });
 const CurrentOnArt = Loadable({
@@ -729,6 +730,7 @@ const CT = () => {
                 dispatch(loadOtzVlSuppressionBySexNotEnrolled());
                 dispatch(loadOtzVlSuppressionByPartnerNotEnrolled());
                 dispatch(loadOtzVlSuppressionByCountyNotEnrolled());
+                dispatch(loadAlhivOnArtByAgeSex());
                 break;
             case 'ovc':
                 dispatch(loadOvcOverallServ());

src/views/CT/OTZ/OTZByAgeSex.js

@@ -43,16 +43,7 @@ const OTZByAgeSex = () => {
                         },
                     },
                 },
-                {
-                    // min: -ovcAgeSex.distributionMale.max,
-                    // max: ovcAgeSex.distributionFemale.max,
-                    title: { text: 'MALE' },
-                    labels: {
-                        formatter: function () {
-                            return Math.abs(this.value);
-                        },
-                    },
-                },
+
             ],
             plotOptions: {
                 series: { stacking: 'normal' },
@@ -107,7 +98,7 @@ const OTZByAgeSex = () => {
                     </CardBody>
                 </Card>
             </div>
-            
+
         </div>
     );
 };

src/views/CT/OTZ/OTZDistributionOfCALHIVByAgeSex.js

@@ -0,0 +1,98 @@
+import { Card, CardBody, CardHeader } from 'reactstrap';
+import HighchartsReact from 'highcharts-react-official';
+import Highcharts from 'highcharts';
+import React, { useCallback, useEffect, useState } from 'react';
+import { useSelector } from 'react-redux';
+import * as otzDistributionOfCALHIVByAgeSexSelector from '../../../selectors/CT/OTZ/otzAlhivOnArtByAgeSex';
+
+const OTZDistributionOfCALHIVByAgeSex = () => {
+    const [ovcDistributionOfALHIVByAgeSex, setOvcDistributionOfALHIVByAgeSex] = useState({});
+    const distributionOfALHIVByAgeSex = useSelector(otzDistributionOfCALHIVByAgeSexSelector.getOtzAlhivOnArtByAgeSex);
+
+    const loadOvcDistributionOfALHIVByAgeSex = useCallback(async () => {
+        setOvcDistributionOfALHIVByAgeSex({
+            chart: { type: 'bar' },
+            title: { text: '' },
+            xAxis: [
+                {
+                    categories: [
+                        '15 to 19',
+                        '10 to 14',
+                    ],
+                    title: { text: '' },
+                    reversed: false,
+                },
+                {
+                    categories: [
+                        '15 to 19',
+                        '10 to 14',
+                    ],
+                    title: { text: '' },
+                    reversed: false,
+                    linkedTo: 0,
+                    opposite: true,
+                },
+            ],
+            yAxis: [
+                {
+                    min: -distributionOfALHIVByAgeSex.max,
+                    max: distributionOfALHIVByAgeSex.max,
+                    title: { text: 'Number Of Patients' },
+                    labels: {
+                        formatter: function () {
+                            return Math.abs(this.value);
+                        },
+                    },
+                },
+            ],
+            plotOptions: {
+                series: { stacking: 'normal' },
+            },
+            tooltip: {
+                formatter: function () {
+                    return (
+                        '<b>' +
+                        this.series.name +
+                        ', Age Group ' +
+                        this.point.category +
+                        '</b><br/>' +
+                        'Number Of Patients: ' +
+                        Highcharts.numberFormat(Math.abs(this.point.y), 1)
+                    );
+                },
+            },
+            legend: { align: 'left', verticalAlign: 'top', y: 0, x: 80 },
+            series: [
+                {
+                    name: 'Female',
+                    data: distributionOfALHIVByAgeSex.distributionFemale.reverse(),
+                    color: '#EA4C8B',
+                },
+                {
+                    name: 'Male',
+                    data: distributionOfALHIVByAgeSex.distributionMale.reverse(),
+                    color: '#14084D',
+                },
+            ],
+        });
+    }, [distributionOfALHIVByAgeSex]);
+
+    useEffect(() => {
+        loadOvcDistributionOfALHIVByAgeSex();
+    }, [loadOvcDistributionOfALHIVByAgeSex]);
+
+    return (
+        <Card className="trends-card">
+            <CardHeader className="trends-header" style={{textTransform: 'none'}}>
+                DISTRIBUTION OF ALHIV PATIENTS BY AGE AND SEX
+            </CardHeader>
+            <CardBody className="trends-body">
+                <div className="col-12">
+                    <HighchartsReact highcharts={Highcharts} options={ovcDistributionOfALHIVByAgeSex} />
+                </div>
+            </CardBody>
+        </Card>
+    );
+};
+
+export default OTZDistributionOfCALHIVByAgeSex;

src/views/CT/OTZ/OTZTabs.js

@@ -17,7 +17,7 @@ const OtzEnrollmentTrends = Loadable({
     loading: Loading,
     delay: LOADING_DELAY,
 });
-const OVCDistributionOfCALHIVByAgeSex = Loadable({ loader: () => import('../OVC/OVCDistributionOfCALHIVByAgeSex'), loading: Loading, delay: LOADING_DELAY });
+const OTZDistributionOfCALHIVByAgeSex = Loadable({ loader: () => import('./OTZDistributionOfCALHIVByAgeSex'), loading: Loading, delay: LOADING_DELAY });
 const OtzEnrollmentAmongAlhivOnArtByPartner = Loadable({ loader: () => import('./OtzEnrollmentAmongAlhivOnArtByPartner'), loading: Loading, delay: LOADING_DELAY });
 const OtzNotEnrolledAmongAlhivOnArtByCounty = Loadable({
     loader: () => import('./OtzNotEnrolledAmongAlhivOnArtByCounty'),
@@ -207,7 +207,7 @@ const OTZTabs = () => {
                                     <strong>UNSUPPRESSED &#8594;</strong>{' '}
                                     Adolescents on OTZ (10-19 years) who are
                                     current on treatment with valid viral load
-                                    results of &gt; 1,000 copies/ml
+                                    results of ≥ 200 copies/ml
                                 </li>
                                 <li>
                                     <strong>Completed Training &#8594;</strong>{' '}
@@ -242,7 +242,7 @@ const OTZTabs = () => {
                     </Row>
                     <Row>
                         <Col className={'col-6'}>
-                            <OVCDistributionOfCALHIVByAgeSex />
+                            <OTZDistributionOfCALHIVByAgeSex />
                         </Col>
                         <Col className={'col-6'}>
                             <OTZByAgeSex />

src/views/CT/OTZ/OtzEnrollmentAmongAlhivOnArtBySex.js

@@ -56,7 +56,6 @@ const OtzEnrollmentAmongAlhivOnArtBySex = () => {
                 crosshair: true
             },
             yAxis: {
-                type: 'logarithmic',
                 minorTickInterval: 0.1,
                 title: {
                     text: 'PERCENTAGE OF PATIENTS'