His Deployment ui added

src/constants.js

@@ -8,6 +8,7 @@ export const HOME_TABS = {
 export const RR_TABS = {
     ct: 'CARE & TREATMENT',
     hts: 'HIV TESTING SERVICES',
+    his: 'HIS Deployments'
 };
 
 export const HTS_TABS = {

src/views/RR/HisDeployments.js

@@ -0,0 +1,41 @@
+import HisDeploymentsOverview from './HisDeploymentsOverview';
+import HisDeploymentsEMRStatusByPartner from './HisDeploymentsEMRStatusByPartner';
+import HisDeploymentsFacilityLevelByOwnershipPartner from './HisDeploymentsFacilityLevelByOwnershipPartner';
+import HisDeploymentsFacilityLevelByOwnershipCounty from './HisDeploymentsFacilityLevelByOwnershipCounty';
+import HisDeploymentsFacilityByInfrastructure from './HisDeploymentsFacilityByInfrastructure';
+import HisDeploymentsLinelist from './HisDeploymentsLinelist';
+import SectionHeader from '../Shared/SectionHeader';
+import React from 'react';
+import moment from 'moment';
+import VisibilitySensor from 'react-visibility-sensor';
+import UniversalFilter from '../Shared/UniversalFilter';
+import { disableStickyFilter, enableStickyFilter } from '../../actions/Shared/uiActions';
+import { useDispatch } from 'react-redux';
+
+const HisDeployments = () =>{
+    const dispatch = useDispatch();
+    const onVisibilityChange = (isVisible) => {
+        if (isVisible) {
+            dispatch(disableStickyFilter());
+        } else {
+            dispatch(enableStickyFilter());
+        }
+    };
+    return (
+        <>
+            <SectionHeader title="HIS Deployments" description={`Year ${moment().format('YYYY')}`}/>
+            <VisibilitySensor onChange={onVisibilityChange}>
+                <UniversalFilter/>
+            </VisibilitySensor>
+            <HisDeploymentsOverview />
+            <HisDeploymentsEMRStatusByPartner />
+            <HisDeploymentsFacilityLevelByOwnershipPartner />
+            <HisDeploymentsFacilityLevelByOwnershipCounty />
+            <HisDeploymentsFacilityByInfrastructure />
+            <HisDeploymentsLinelist />
+        </>
+    )
+}
+
+
+export default HisDeployments

src/views/RR/HisDeploymentsEMRStatusByPartner.js

@@ -0,0 +1,109 @@
+import React, { useEffect, useState, useCallback } from 'react';
+import Highcharts from 'highcharts';
+import { Card, CardBody, CardHeader } from 'reactstrap';
+import HighchartsReact from 'highcharts-react-official';;
+
+const HISDeploymentsByPartner = () => {
+    const [hisDeployments, setHisDeployments] = useState({});
+
+    const loadNewOnArtBySex = useCallback(async () => {
+        setHisDeployments({
+            chart: {
+                type: 'column',
+            },
+            title: {
+                text: '',
+                align: 'left',
+            },
+            xAxis: {
+                title: {
+                    text: 'SERVICE DELIVERY PARTNER',
+                },
+                categories: ['ampath', 'afh', 'edarp', 'wrp', 'CHAK', 'AFYA NYOTA', 'AMREF'],
+            },
+            yAxis: {
+                min: 0,
+                title: {
+                    text: 'NUMBER OF FACILITIES',
+                },
+                reversedStacks: false,
+                stackLabels: {
+                    enabled: false,
+                    style: {
+                        fontWeight: 'bold',
+                        color:
+                        // theme
+                            (Highcharts.defaultOptions.title.style &&
+                                Highcharts.defaultOptions.title.style.color) ||
+                            'gray',
+                        textOutline: 'none',
+                    },
+                },
+            },
+            legend: {
+                align: 'left',
+                verticalAlign: 'top',
+                floating: false,
+                shadow: false,
+                y: 0,
+                x: 80,
+            },
+            tooltip: {
+                headerFormat: '<b>{point.x}</b><br/>',
+                pointFormat:
+                    '{series.name}: {point.y}<br/>Total: {point.stackTotal}',
+            },
+            plotOptions: {
+                column: {
+                    stacking: 'percent',
+                    dataLabels: {
+                        enabled: false,
+                    },
+                },
+            },
+            series: [
+                {
+                    name: 'ACTIVE',
+                    data: [10, 70, 34, 90, 43,324,210],
+                    color: '#00AD30',
+                },
+                {
+                    name: 'DISCONTINUED',
+                    data: [90,23,54,77,2, 60,63],
+                    color: '#152459',
+                },
+                {
+                    name: 'STALLED/INACTIVE',
+                    data: [10,3,1,18,2, 0,6],
+                    color: '#F6941C',
+                }
+            ],
+        });
+    }, []);
+
+    useEffect(() => {
+        loadNewOnArtBySex();
+    }, [loadNewOnArtBySex]);
+
+    return (
+        <div className="row">
+            <div className="col-12">
+                <Card className="trends-card">
+                    <CardHeader className="trends-header">
+                        EMR STATUS BY PARTNER
+                    </CardHeader>
+                    <CardBody className="trends-body">
+                        <div className="col-12">
+                            <HighchartsReact
+                                highcharts={Highcharts}
+                                options={hisDeployments}
+                            />
+                        </div>
+                    </CardBody>
+                </Card>
+            </div>
+        </div>
+    );
+};
+
+export default HISDeploymentsByPartner;

src/views/RR/HisDeploymentsFacilityByInfrastructure.js

@@ -0,0 +1,104 @@
+import React, { useEffect, useState, useCallback } from 'react';
+import Highcharts from 'highcharts';
+import { Card, CardBody, CardHeader } from 'reactstrap';
+import HighchartsReact from 'highcharts-react-official';;
+
+const HisDeploymentsFacilityByInfrastructure = () => {
+    const [hisDeployments, setHisDeployments] = useState({});
+
+    const loadNewOnArtBySex = useCallback(async () => {
+        setHisDeployments({
+            chart: {
+                type: 'column',
+            },
+            title: {
+                text: '',
+                align: 'left',
+            },
+            xAxis: {
+                title: {
+                    text: 'SERVICE DELIVERY PARTNER',
+                },
+                categories: ['ampath', 'afh', 'edarp', 'wrp', 'CHAK', 'AFYA NYOTA', 'AMREF'],
+            },
+            yAxis: {
+                min: 0,
+                title: {
+                    text: 'NUMBER OF FACILITIES',
+                },
+                reversedStacks: false,
+                stackLabels: {
+                    enabled: false,
+                    style: {
+                        fontWeight: 'bold',
+                        color:
+                        // theme
+                            (Highcharts.defaultOptions.title.style &&
+                                Highcharts.defaultOptions.title.style.color) ||
+                            'gray',
+                        textOutline: 'none',
+                    },
+                },
+            },
+            legend: {
+                align: 'left',
+                verticalAlign: 'top',
+                floating: false,
+                shadow: false,
+                y: 0,
+                x: 80,
+            },
+            tooltip: {
+                headerFormat: '<b>{point.x}</b><br/>',
+                pointFormat:
+                    '{series.name}: {point.y}<br/>Total: {point.stackTotal}',
+            },
+            plotOptions: {
+                column: {
+                    stacking: 'percent',
+                    dataLabels: {
+                        enabled: false,
+                    },
+                },
+            },
+            series: [
+                {
+                    name: 'ON PREMISES',
+                    data: [80, 70, 34, 90, 43,24,110],
+                    color: '#00AD30',
+                },
+                {
+                    name: 'ON CLOUD',
+                    data: [9,23,54,77,2, 60,63],
+                    color: '#152459',
+                }
+            ],
+        });
+    }, []);
+
+    useEffect(() => {
+        loadNewOnArtBySex();
+    }, [loadNewOnArtBySex]);
+
+    return (
+        <div className="row">
+            <div className="col-12">
+                <Card className="trends-card">
+                    <CardHeader className="trends-header">
+                        FACILITY BY INFRASTRUCTURE DEPLOYMENT
+                    </CardHeader>
+                    <CardBody className="trends-body">
+                        <div className="col-12">
+                            <HighchartsReact
+                                highcharts={Highcharts}
+                                options={hisDeployments}
+                            />
+                        </div>
+                    </CardBody>
+                </Card>
+            </div>
+        </div>
+    );
+};
+
+export default HisDeploymentsFacilityByInfrastructure;

src/views/RR/HisDeploymentsFacilityLevelByOwnershipCounty.js

@@ -0,0 +1,124 @@
+import React, { useEffect, useState, useCallback } from 'react';
+import Highcharts from 'highcharts';
+import { Card, CardBody, CardHeader } from 'reactstrap';
+import HighchartsReact from 'highcharts-react-official';;
+
+const HisDeploymentsFacilityLevelByOwnershipCounty = () => {
+    const [hisDeployments, setHisDeployments] = useState({});
+
+    const loadNewOnArtBySex = useCallback(async () => {
+        setHisDeployments({
+            chart: {
+                type: 'column',
+            },
+            title: {
+                text: '',
+                align: 'left',
+            },
+            xAxis: {
+                title: {
+                    text: 'COUNTY',
+                },
+                categories: ['ampath', 'afh', 'edarp', 'wrp', 'CHAK', 'AFYA NYOTA', 'AMREF'],
+            },
+            yAxis: {
+                min: 0,
+                title: {
+                    text: 'NUMBER OF FACILITIES',
+                },
+                reversedStacks: false,
+                stackLabels: {
+                    enabled: false,
+                    style: {
+                        fontWeight: 'bold',
+                        color:
+                        // theme
+                            (Highcharts.defaultOptions.title.style &&
+                                Highcharts.defaultOptions.title.style.color) ||
+                            'gray',
+                        textOutline: 'none',
+                    },
+                },
+            },
+            legend: {
+                align: 'left',
+                verticalAlign: 'top',
+                floating: false,
+                shadow: false,
+                y: 0,
+                x: 80,
+            },
+            tooltip: {
+                headerFormat: '<b>{point.x}</b><br/>',
+                pointFormat:
+                    '{series.name}: {point.y}<br/>Total: {point.stackTotal}',
+            },
+            plotOptions: {
+                column: {
+                    stacking: 'percent',
+                    dataLabels: {
+                        enabled: false,
+                    },
+                },
+            },
+            series: [
+                {
+                    name: 'LEVEL 1',
+                    data: [10, 70, 34, 90, 43,324,210],
+                    color: '#00AD30',
+                },
+                {
+                    name: 'LEVEL 2',
+                    data: [90,23,54,77,2, 60,63],
+                    color: '#152459',
+                },
+                {
+                    name: 'LEVEL 3',
+                    data: [10,3,1,18,2, 0,6],
+                    color: '#F6941C',
+                },
+                {
+                    name: 'LEVEL 4',
+                    data: [0,3,4,27,7, 0,6],
+                    color: '#D21D7F',
+                },
+                {
+                    name: 'LEVEL 5',
+                    data: [9,3,0,7,2, 0,3],
+                    color: '#8E2C16',
+                },
+                {
+                    name: 'LEVEL 6',
+                    data: [1,2,1,3, 1, 0, 3],
+                    color: '#5FA5E6',
+                },
+            ],
+        });
+    }, []);
+
+    useEffect(() => {
+        loadNewOnArtBySex();
+    }, [loadNewOnArtBySex]);
+
+    return (
+        <div className="row">
+            <div className="col-12">
+                <Card className="trends-card">
+                    <CardHeader className="trends-header">
+                        FACILITY LEVEL BY OWNERSHIP (COUNTY)
+                    </CardHeader>
+                    <CardBody className="trends-body">
+                        <div className="col-12">
+                            <HighchartsReact
+                                highcharts={Highcharts}
+                                options={hisDeployments}
+                            />
+                        </div>
+                    </CardBody>
+                </Card>
+            </div>
+        </div>
+    );
+};
+
+export default HisDeploymentsFacilityLevelByOwnershipCounty;