diff --git a/src/csv_upload.js b/src/csv_upload.js index 39a925324997b817f3c69c6725bed3a220f0b9cb..ae612cf6d2d509ce4db50e16babafc919b302601 100644 --- a/src/csv_upload.js +++ b/src/csv_upload.js @@ -18,7 +18,7 @@ const config = { const uploadButton = document.querySelector('#csv_upload_btn'); uploadButton.addEventListener('click', async (event) => { - event.preventDefault(); + //event.preventDefault(); const csv_file = document.querySelector('#csv_file_upload').files[0]; const stream = fs.createReadStream(csv_file.path).pipe(csv()); diff --git a/src/data.js b/src/data.js index 75407731fe0cb5d4d02f16ead20376e55708cc16..d0acfae5aba4ef5d83d22fc05323e32bcb6250a8 100644 --- a/src/data.js +++ b/src/data.js @@ -77,53 +77,61 @@ function displayDataTable(data){ }, "columns": [ { "data": "patient_id", - "defaultContent": "NULL"}, + "defaultContent": "Null"}, { "data": "patient_end_tidal_co2", - "defaultContent": "NULL"}, + "defaultContent": "Null"}, { "data": "patient_feed_vol", - "defaultContent": "NULL"}, + "defaultContent": "Null"}, { "data": "patient_feed_vol_adm", - "defaultContent": "NULL"}, + "defaultContent": "Null"}, { "data": "patient_fio2", - "defaultContent": "NULL"}, + "defaultContent": "Null"}, { "data": "patient_fio2_ratio", - "defaultContent": "NULL"}, + "defaultContent": "Null"}, { "data": "patient_insp_time", - "defaultContent": "NULL"}, + "defaultContent": "Null"}, { "data": "patient_oxygen_flow_rate", - "defaultContent": "NULL"}, + "defaultContent": "Null"}, { "data": "patient_peep", - "defaultContent": "NULL"}, + "defaultContent": "Null"}, { "data": "patient_pip", - "defaultContent": "NULL"}, + "defaultContent": "Null"}, { "data": "patient_resp_rate", - "defaultContent": "NULL"}, + "defaultContent": "Null"}, { "data": "patient_sip", - "defaultContent": "NULL"}, + "defaultContent": "Null"}, { "data": "patient_tidal_vol", - "defaultContent": "NULL"}, + "defaultContent": "Null"}, { "data": "patient_tidal_vol_actual", - "defaultContent": "NULL"}, + "defaultContent": "Null"}, { "data": "patient_tidal_vol_kg", - "defaultContent": "NULL"}, + "defaultContent": "Null"}, { "data": "patient_tidal_vol_spon", - "defaultContent": "NULL"}, + "defaultContent": "Null"}, { "data": "patient_bmi", - "defaultContent": "NULL"}, - { "data": "referral_recommended", // Column for ML algorithm -> To display whether a referral is recommended. - "defaultContent": "N/A"}, + "defaultContent": "Null"}, + { "data": "recommend_patient_referral", // Column for ML algorithm -> To display whether a referral is recommended. + "defaultContent": "Null"}, { "data": "patient_referral", - "defaultContent": "NULL"}, + "defaultContent": "Null"}, ], aoColumnDefs: [{ targets: 18, mRender: function (data, type, full, meta) { return '<input type="checkbox" class="minimal" onchange="checkReferral(this)" id='+ full.patient_id +''+ (data ? ' checked' : '') +'/>'; } + },{ + targets: 17, + mRender: function(data, type, full, meta) { + return '<input type="checkbox" class="minimal" onclick="return false" id='+ full.patient_id +''+ (data ? ' checked' : '') +'/>'; + } },{ responsivePriority: 1, targets: 18 // Adds priority of 1 to referral column -> Will be last displayed due to responsiveness },{ responsivePriority: 2, targets: 17 // Adds priority of 2 to recommended referral column + },{ + orderDataType: "dom-checkbox", + targets: 17 }] }).on( 'select', function ( e, dt, type, indexes ) { //if not responsive view launch responsive modal diff --git a/src/index.css b/src/index.css index 9536beb8702bb1521042f22bd9e7ff619706eb68..bacb2fec98468b3c5297e33e1c7cc32216d2606d 100644 --- a/src/index.css +++ b/src/index.css @@ -2,6 +2,10 @@ --text-colour: #FFFFFF; } +body { + background-color: #E8EDEE !important; +} + #background { background: linear-gradient(#005EB8, #0072CE, #41B6E6, #0072CE, #005EB8); background-size: 200% 200%; @@ -83,6 +87,10 @@ div.report_box { padding-bottom: 1.25rem; } +table.dataTable.dtr-inline.collapsed>tbody>tr>td.dtr-control:before, table.dataTable.dtr-inline.collapsed>tbody>tr>th.dtr-control:before { + background-color: #005EB8 !important; +} + /* Upload CSV page */ div.upload_csv_content { @@ -156,4 +164,28 @@ i.csv_x { .block-header { padding: .5rem 1.25rem; + border-top-left-radius: .5rem; + border-top-right-radius: .5rem; +} + +.block-content { + padding: 1.25rem 1.25rem 1px; +} + +.block-content.block-content-full { + padding-bottom: 1.25rem; +} + +.bg-body-light { + background: #f6f7f9; +} + +.block-content:last-child { + border-bottom-left-radius: .5rem; + border-bottom-right-radius: .5rem; +} + +#bar-title { + text-transform: uppercase; + margin-top: .5rem; } \ No newline at end of file diff --git a/src/index.html b/src/index.html index 2881423eb8d5c46dd371b7b67cb29c45a37a6c35..b802e972d130ff8b7d128b742e0edbac01cc9657 100644 --- a/src/index.html +++ b/src/index.html @@ -61,6 +61,18 @@ <div class="col-xl-10 d-flex flex-column"> <main class="row overflow-auto"> <div class="col pt-5"> + <div class="content" style="width: 90%; padding: 1.75rem 1.75rem 1px; margin: 0 auto;"> + <div class="d-flex flex-column flex-md-row justify-content-md-between align-items-md-center py-2 text-center text-md-start"> + <div class="flex-grow-1 mb-1 mb-md-0"> + <h1 class="h3 fw-bold mb-2 text-reset"> + CCU Patient Dashboard + </h1> + <h2 class="h6 fw-medium text-muted mb-0"> + Lorem ipsum dolor, sit amet consectetur adipisicing elit. + </h2> + </div> + </div> + </div> <table class="table table-striped table-hover table-bordered border-dark table-sm datatable-table pt-4" id="dashboardTable"> <thead class="datatable-table table-dark"> <tr> diff --git a/src/reports.html b/src/reports.html index 16dc991a1b4e25ff39455aea020a599bdcbbcc3a..b4f84a2dd87b8d5c6e6d9be34d30194812aba10c 100644 --- a/src/reports.html +++ b/src/reports.html @@ -54,7 +54,7 @@ <div class="d-flex flex-column flex-md-row justify-content-md-between align-items-md-center py-2 text-center text-md-start"> <div class="flex-grow-1 mb-1 mb-md-0"> <h1 class="h3 fw-bold mb-2 text-reset"> - Dashboard reports + Dashboard Reports </h1> <h2 class="h6 fw-medium text-muted mb-0"> Lorem ipsum dolor, sit amet consectetur adipisicing elit. @@ -121,11 +121,33 @@ <div class="col-xl-8 col-xxl-9 d-flex flex-column"> <div class="block block-rounded flex-grow-1 d-flex flex-column"> <div class="block-header block-header-default"> - <h4 class="block-title">Patient referral</h4> + <h4 class="block-title" id="bar-title">Patient referrals</h4> </div> <div class="block-content block-content-full flex-grow-1 d-flex align-items-center"> <canvas id="patient-referrals"></canvas> </div> + <div class="block-content bg-body-light"> + <div class="row text-center w-100"> + <div class="col-sm-4"> + <dl class=""> + <dt class="fs-3 fw-bold d-inline-flex align-items-center" id="percent_not_referred">%</dt> + <dd class="fs-6 fw-medium text-muted mb-0">Of patients not referred</dd> + </dl> + </div> + <div class="col-sm-4"> + <dl class=""> + <dt class="fs-3 fw-bold d-inline-flex align-items-center" id="percent_referred">%</dt> + <dd class="fs-6 fw-medium text-muted mb-0">Of patients referred</dd> + </dl> + </div> + <div class="col-sm-4"> + <dl class=""> + <dt class="fs-3 fw-bold d-inline-flex align-items-center" id="percent_recommended_referrals">%</dt> + <dd class="fs-6 fw-medium text-muted mb-0">Of patients recommended for referral</dd> + </dl> + </div> + </div> + </div> </div> </div> <div class="col-xl-4 col-xxl-3 d-flex flex-column"> diff --git a/src/reports.js b/src/reports.js index 1bcc22ed424d8d003772c68cf44ec998d07f216b..27c095b34dbeade53335acb86db9db8addfe48d0 100644 --- a/src/reports.js +++ b/src/reports.js @@ -6,6 +6,7 @@ var sql = require("mssql"); (async function() { var total_num_patients; var total_patients_referred; + var total_recommended_referrals; const config = { server: 'uwe-sdgp.database.windows.net', @@ -23,20 +24,25 @@ var sql = require("mssql"); if (err) console.log(err); const request = new sql.Request() + // Gather stats for displaying bar chart for referrals, non referrals and recommended referrals request.query('SELECT (SELECT COUNT(*) AS num1 FROM fid_patients WHERE patient_referral = 0) as notReferred, (SELECT COUNT(*) AS num2 FROM fid_patients WHERE patient_referral = 1) as referred, (SELECT COUNT(*) AS num3 FROM fid_patients WHERE recommend_patient_referral = 1 AND patient_referral = 0) as recommended', (err, result) => { if (err) console.log(err); displayGraph(result.recordset[0]); }) + // Gather stats for displaying number of patients admitted to CCU request.query('SELECT COUNT(patient_id) FROM fid_patients', (err, result) => { if (err) console.log(err); $('#num_patients_admitted').html(result.recordset[0][""]); total_num_patients = result.recordset[0][""]; }) + // Gather stats for displaying number of referrals recommended request.query('SELECT COUNT(patient_id) FROM fid_patients WHERE recommend_patient_referral = 1 AND patient_referral = 0', (err, result) => { if (err) console.log(err); + total_recommended_referrals = result.recordset[0][""]; $('#num_referrals_recommended').html(result.recordset[0][""]); - }) // TO DISPLAY NUMBER OF REFERRALS RECOMMENDED BY ML ALGORITHM WHEN IMPLEMENTED + }) + // Gather stats for displaying number of patients referred and calculate percentage of patients referred request.query('SELECT COUNT(patient_id) FROM fid_patients WHERE patient_referral = 1', (err, result) => { if (err) console.log(err); $('#num_patients_referred').html(result.recordset[0][""]); @@ -44,21 +50,29 @@ var sql = require("mssql"); total_patients_referred = result.recordset[0][""]; $('#num_percent_patients').html(((total_patients_referred/total_num_patients)*100).toFixed(2)+'%'); + // For below bar chart + $('#percent_referred').html(((total_patients_referred/total_num_patients)*100).toFixed(2)+'%'); + + var total_patients_not_referred = total_num_patients - total_patients_referred; + $('#percent_not_referred').html(((total_patients_not_referred/total_num_patients)*100).toFixed(2)+'%'); + + $('#percent_recommended_referrals').html(((total_recommended_referrals/total_num_patients)*100).toFixed(2)+'%'); + sql.close(); - }) + }) }); function displayGraph(data){ const graphData = { labels: [ - 'Referred', 'Not referred', + 'Referred', 'Recommended' ], datasets: [ { - data: [data.referred, data.notReferred, data.recommended], + data: [data.notReferred, data.referred, data.recommended], } ] }; @@ -66,16 +80,27 @@ var sql = require("mssql"); new Chart( document.getElementById('patient-referrals'), { - type: 'pie', + type: 'bar', data: graphData, options: { responsive: true, + backgroundColor: 'rgba(0, 94, 184, 0.85)', + scales: { + x: { + display: true, + }, + y: { + ticks: { + display: false, + } + } + }, plugins: { tooltip: { - enabled: false + enabled: true }, legend: { - display: true + display: false } } },