From 4287287179ee07151ede38a3ba6304d0f57885f6 Mon Sep 17 00:00:00 2001 From: eric Date: Wed, 17 Apr 2024 14:04:36 +0300 Subject: [PATCH 1/2] Updated KMHFR dashboard --- components/BarChart.js | 83 ----------------------------------- pages/dashboard/index.js | 94 ++++++++++++++++++++++++++++++++++------ 2 files changed, 80 insertions(+), 97 deletions(-) delete mode 100644 components/BarChart.js diff --git a/components/BarChart.js b/components/BarChart.js deleted file mode 100644 index 5cec5ba7..00000000 --- a/components/BarChart.js +++ /dev/null @@ -1,83 +0,0 @@ -import React from 'react'; - -import Highcharts from 'highcharts' -import HighchartsReact from 'highcharts-react-official' - - - - -const BarChart = props => { - - const options = { - chart: { - type: 'column', - backgroundColor: "#eff6ff" - }, - title: { - text: props.title || '' - }, - colors: ['#1f77b4', '#ff7f0e', '#5ab747', '#9217a4'], - exporting: { - enabled: true - }, - xAxis: { - categories: props.categories || [], - title: { - text: props.xaxistitle || '' - } - }, - yAxis: { - title: { - text: props.yaxistitle || '', - align: 'high' - }, - labels: { - overflow: 'justify' - }, - }, - tooltip: { - valueSuffix: props.tooltipsuffix || '' - }, - plotOptions: { - bar: { - dataLabels: { - enabled: true - } - } - }, - legend: { - layout: 'vertical', - align: 'right', - verticalAlign: 'top', - floating: true, - borderWidth: 1, - backgroundColor: '#FFFFFF', - shadow: true - }, - credits: { - enabled: false - }, - series: props.data - } - - return ( -
- -
-
- {props.data.length <= 0 ? ( -
-

Loading…

-
- ) : ( - - )} -
-
-
- ); -}; - -export default BarChart; \ No newline at end of file diff --git a/pages/dashboard/index.js b/pages/dashboard/index.js index fcd4e98c..37d5fb64 100644 --- a/pages/dashboard/index.js +++ b/pages/dashboard/index.js @@ -3,7 +3,7 @@ import MainLayout from '../../components/MainLayout' import { checkToken } from '../../controllers/auth/auth' import React, { useState, useEffect, useMemo, useRef, useContext } from 'react' import { useRouter } from 'next/router' -import BarChart from '../../components/BarChart' +import Chart from '../../components/Chart' import Select from 'react-select' import { UserContext } from '../../providers/user' import Link from 'next/link' @@ -775,7 +775,23 @@ function Dashboard(props) { {/*
*/}

Facility owners

- + cs.name) || []} + tooltipsuffix="#" + xaxistitle="Owner Type" + yaxistitle="count" + type="pie" + data={(() => { + let data = []; + data?.push({ + name: 'Facilities', + data: Array.from(props?.data?.owner_types ?? [], cs => ({ name: cs.name, y: parseFloat(cs.count)})) || [] + }); + return data; + })() || []} /> + + {/*
@@ -790,12 +806,27 @@ function Dashboard(props) { ))} -
Metric
+ */}

Facility Types

- + cs.name) || []} + tooltipsuffix="#" + xaxistitle="Facility Type" + yaxistitle="count" + type="bar" + data={(() => { + let data = []; + data?.push({ + name: 'Facilities', + data: Array.from(props?.data?.types_summary ?? [], cs => ({ name: cs.name, y: parseFloat(cs.count)})) || [] + }); + return data; + })() || []} /> + {/*
@@ -810,13 +841,28 @@ function Dashboard(props) { ))} -
Metric
+ */}
{/* Facilities summary 1/3 - FILTERABLE */}

Facilities summary

- + cs.name) || []} + tooltipsuffix="#" + xaxistitle="Facility Summaries" + yaxistitle="count" + type="bar" + data={(() => { + let data = []; + data?.push({ + name: 'Facilities', + data: Array.from(totalSummary ?? [], cs => ({ name: cs.name, y: parseFloat(cs.count)})) || [] + }); + return data; + })() || []} /> + {/*
@@ -831,7 +877,7 @@ function Dashboard(props) { ))} -
Metric
+ */}
{/* CUs summary - FILTERABLE 1/3 */}
@@ -876,7 +922,22 @@ function Dashboard(props) { {/* facilities by keph level */}

Facility KEPH Level

- + cs.name) || []} + tooltipsuffix="#" + xaxistitle="" + yaxistitle="" + type="pie" + data={(() => { + let data = []; + data?.push({ + name: 'Facilities', + data: Array.from(props?.data?.keph_level ?? [], cs => ({ name: cs.name, y: parseFloat(cs.count)})) || [] + }); + return data; + })() || []} /> + {/*
@@ -891,18 +952,19 @@ function Dashboard(props) { ))} -
Metric
+ */}
{/* Facilities & CHUs by county (bar) 1/1 */} {(groupID === 7 || groupID === 5) &&

Facilities & CHUs by County

- cs.name) || []} tooltipsuffix="#" xaxistitle="County" yaxistitle="Number" + type="bar" data={(() => { let data = []; data?.push({ @@ -921,12 +983,13 @@ function Dashboard(props) { {groupID === 1 &&

Facilities & CHUs by Subcounty

- cs.name) || []} tooltipsuffix="#" xaxistitle="Subcounty" yaxistitle="Number" + type="column" data={(() => { let data = []; data?.push({ @@ -945,12 +1008,13 @@ function Dashboard(props) { {groupID === 2 &&

Facilities & CHUs by Ward

- cs.name) || []} tooltipsuffix="#" xaxistitle="Ward" yaxistitle="Number" + type="bar" data={(() => { let data = []; data?.push({ @@ -968,12 +1032,13 @@ function Dashboard(props) { {/* Facility owners & categories - national summary - FILTERABLE (bar) 1/2 */}

Facility owners

- ot.name) || []} tooltipsuffix="#" xaxistitle="Owner" yaxistitle="Number" + type="column" data={(() => { return [{ name: "Owner", data: Array.from(props?.data?.owner_types ?? [], ot => parseFloat(ot.count)) || [] }]; })() || []} /> @@ -981,12 +1046,13 @@ function Dashboard(props) { {/* Facility types - national summary - FILTERABLE (bar) 1/2 */}

Facility types

- ts.name) || []} tooltipsuffix="#" xaxistitle="Type" yaxistitle="Number" + type="column" data={(() => { return [{ name: "Type", data: Array.from(props?.data?.types_summary ?? [], ts => parseFloat(ts.count)) || [] }]; })() || []} /> From fea248969d0275781b18e5a829e05c4b86158b30 Mon Sep 17 00:00:00 2001 From: eric Date: Wed, 17 Apr 2024 14:05:51 +0300 Subject: [PATCH 2/2] Updated KMHFR dashboard --- components/Chart.js | 106 ++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 106 insertions(+) create mode 100644 components/Chart.js diff --git a/components/Chart.js b/components/Chart.js new file mode 100644 index 00000000..fcd11c65 --- /dev/null +++ b/components/Chart.js @@ -0,0 +1,106 @@ +import React from 'react'; + +import Highcharts from 'highcharts' +import HighchartsReact from 'highcharts-react-official' + + + + +function Chart(props){ + + const options = { + chart: { + type: props?.type, + backgroundColor: "#f9fafb" // "#eff6ff" + }, + title: { + text: props.title || '' + }, + colors: ['#1f77b4', '#ff7f0e', '#5ab747', '#9217a4'], + exporting: { + enabled: true + }, + xAxis: { + categories: props.categories || [], + title: { + text: props.xaxistitle || '' + } + }, + yAxis: { + title: { + text: props.yaxistitle || '', + align: 'high' + }, + labels: { + overflow: 'justify' + }, + }, + tooltip: { + valueSuffix: props.tooltipsuffix || '' + }, + plotOptions: { + bar: { + dataLabels: { + enabled: true + } + }, + // series: { + // allowPointSelect: true, + // cursor: 'pointer', + // dataLabels: [{ + // enabled: true, + // distance: 20 + // }, { + // enabled: true, + // distance: -40, + // format: '{point.percentage:.1f}%', + // style: { + // fontSize: '1.2em', + // textOutline: 'none', + // opacity: 0.7 + // }, + // filter: { + // operator: '>', + // property: '', + // value: 10 + // } + // }] + // } + + }, + legend: { + layout: 'vertical', + align: 'right', + verticalAlign: 'top', + floating: true, + borderWidth: 1, + backgroundColor: '#FFFFFF', + shadow: true + }, + credits: { + enabled: false + }, + series: props.data + } + + return ( +
+ +
+
+ {props.data.length <= 0 ? ( +
+

Loading…

+
+ ) : ( + + )} +
+
+
+ ); +}; + +export default Chart; \ No newline at end of file