feature/Dashboard

[rwx-yxu]

The dashboard page should contain charts and static information to the user.

[rwx-yxu]

Need a mock up and a decision on what to display to the user after logging in.

[rwx-yxu]

Chart data to add on the dashboard: Demographic Overview:

• Age distribution (histogram or bar chart)
• Gender distribution (pie chart or bar chart)

Clinical Metrics:

• Average left/right ventricular end diastolic volume (LEDV/REDV) with grouped bar chart
• Average left/right ventricular end systolic volume (LESV/RESV) with grouped bar chart
• Average left/right ventricular ejection fraction (LVEF/RVEF) with grouped bar chart
• Average left/right ventricular mass (LVMass/RVMass) with grouped bar chart
• Average left/right systolic volume (LSV/RSV) with grouped bar chart
• Prevalence of fibrosis/scarring (scar) as a percentage (donut chart or bar chart)

Medical History:

• Prevalence of apical HCM (bar chart or pie chart)
• Prevalence of sudden cardiac death (bar chart or pie chart)
• Prevalence of hypertension (bar chart or pie chart)
• Prevalence of diabetes (bar chart or pie chart)
• Prevalence of myectomy (bar chart or pie chart)

Genetic Information:

• Prevalence of specific gene mutations (MYH7, MYBPC3, TNNT2, ACTC, TPM1, TNNCI, TNNI3, MYL2, TT) as a grouped bar chart or stacked bar chart

[rwx-yxu]

Single computed value to include on the dashboard: Demographics:

• Total number of participants
• Percentage of male participants
• Percentage of female participants
• Average age of participants

Clinical Metrics:

• Average left ventricular end diastolic volume (LEDV)
• Average right ventricular end diastolic volume (REDV)
• Average left ventricular end systolic volume (LESV)
• Average right ventricular end systolic volume (RESV)
• Average left ventricular ejection fraction (LVEF)
• Average right ventricular ejection fraction (RVEF)
• Average left ventricular mass (LVMass)
• Average right ventricular mass (RVMass)
• Average left systolic volume (LSV)
• Average right systolic volume (RSV)
• Percentage of participants with fibrosis/scarring (scar)

Medical History:

• Percentage of participants with apical HCM
• Percentage of participants with a history of sudden cardiac death
• Percentage of participants with hypertension
• Percentage of participants with diabetes
• Percentage of participants who have undergone myectomy

Genetic Information:

• Percentage of participants with each specific gene mutation (MYH7, MYBPC3, TNNT2, ACTC, TPM1, TNNCI, TNNI3, MYL2, TT)

[rwx-yxu]

Layout mock

[rwx-yxu]

View code template

<template>
  <div class="dashboard-container">
    <h1 class="dashboard-title">
      Cardiomyopathy Dashboard
    </h1>
    <div class="row mt-4 mb-3">
      <div class="col-md-3 mb-3">
        <div class="card computed-integer-card">
          <div class="card-body">
            <h4 class="computed-integer-label">
              Computed Integer 1
            </h4>
            <p class="computed-integer-value">
              ###
            </p>
          </div>
        </div>
      </div>
      <div class="col-md-3 mb-3">
        <div class="card computed-integer-card">
          <div class="card-body">
            <h4 class="computed-integer-label">
              Computed Integer 2
            </h4>
            <p class="computed-integer-value">
              ###
            </p>
          </div>
        </div>
      </div>
      <div class="col-md-3 mb-3">
        <div class="card computed-integer-card">
          <div class="card-body">
            <h4 class="computed-integer-label">
              Computed Integer 3
            </h4>
            <p class="computed-integer-value">
              ###
            </p>
          </div>
        </div>
      </div>
      <div class="col-md-3 mb-3">
        <div class="card computed-integer-card">
          <div class="card-body">
            <h4 class="computed-integer-label">
              Computed Integer 4
            </h4>
            <p class="computed-integer-value">
              ###
            </p>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-6 mb-3">
        <div class="card">
          <div class="card-header">
            Chart 1
          </div>
          <div class="card-body">
            <div id="chart1-placeholder" class="chart-container" />
          </div>
        </div>
      </div>
      <div class="col-md-6">
        <div class="card">
          <div class="card-header">
            Chart 2
          </div>
          <div class="card-body">
            <div id="chart2-placeholder" class="chart-container" />
          </div>
        </div>
      </div>
    </div>
    <div class="row mt-4">
      <div class="col-md-6 mb-3">
        <div class="card">
          <div class="card-header">
            Chart 3
          </div>
          <div class="card-body">
            <div id="chart3-placeholder" class="chart-container" />
          </div>
        </div>
      </div>
      <div class="col-md-6">
        <div class="card">
          <div class="card-header">
            Chart 4
          </div>
          <div class="card-body">
            <div id="chart4-placeholder" class="chart-container" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.dashboard-container {
  margin: 2rem;
}

.dashboard-title {
  margin-bottom: 2rem;
}

.chart-container {
  min-height: 300px;
}

.computed-integer-card {
  text-align: center;
}

.computed-integer-label {
  margin-bottom: 1rem;
}

.computed-integer-value {
  font-size: 1.5rem;
  font-weight: bold;
}
</style>

[advweb-grp1]

Development will be broken down into multiple stages:

• stage 1: Scaffolding Set the initial layout for the page. Should also include chartJS dependency. Branch name will be feature/dashboard_scaffold
• Next stages: having a branch for each chart / computed value. Branch naming will be feature/dashboard_Daniel ect

[advweb-grp1]

Chart data:

• Age distribution (histogram or bar chart)
• Percentage of participants with each specific gene mutation (MYH7, MYBPC3, TNNT2, ACTC, TPM1, TNNCI, TNNI3, MYL2, TT)
• Prevalence of diabetes (bar chart or pie chart)
• Average left ventricular end diastolic volume (LEDV)
• Average right ventricular end diastolic volume (REDV)
• Percentage of participants with fibrosis/scarring (scar)

  Single computed value:

• Total number of participants
• Average age of participants
• Percentage of participants with diabetes
• Percentage of participants who have undergone myectomy

[advweb-grp1]

Daniel - Age distribution (histogram or bar chart) and Total number of participants Rehman - Percentage of participants with each specific gene mutation (MYH7, MYBPC3, TNNT2, ACTC, TPM1, TNNCI, TNNI3, MYL2, TT) pie chart and Average age of participants Liam - Prevalence of diabetes (bar chart or pie chart) and Percentage of participants with diabetes Yongle - Average left ventricular end diastolic volume (LEDV) and Average right ventricular end diastolic volume (REDV) and Percentage of participants who have undergone myectomy Rehman - Percentage of participants with fibrosis/scarring (scar)

[advweb-grp1]

Branch naming will be feature/dashboard_Daniel ect

[rwx-yxu]

I have split out the big template code into computed int and chart components to be rendered by passing in title and objects to construct the components.

[rwx-yxu]

Decided to use apex charts because there are lab examples that I can follow from. Was facing some troubles with chartjs integration because of the way you have to extend the base components and the examples to follow online are in typescript rather than javascript.

I am facing some design decisions on how I want to build the chart objects because the way to generate the different charts are different. I would want to avoid having a really big array for each chart defined in the dashboard view. The best preference would be to have a util function that can dynamically generate the chart objects. So, ideally, all you need to do is pass in the params, title:"Age distribution (histogram or bar chart),data:[{}]" This means that the potential end code for everyone would be like:

let dashboardCharts = ref([])
const chart1 = ChartBuilder("Age distribution",getAgeDist(),"Bar")
dashboardCharts.value.push(chart1)
const chart2 = ChartBuilder("gene mutation spread",getGeneMutationSpread(),"Pie")
dashboardCharts.value.push(chart2)
ect

[rwx-yxu]

I dont think it is possible to have a singular function to rule them all because barcharts expect the series to be like this

      series:  [
        {
          data: [400, 430, 448, 470, 540, 580, 690, 1100, 1200, 1380]
        }
      ]

where as pie charts expect the series to be like this:

series:[44, 55, 13, 43, 22]

Labels are also required for piecharts as well.

[rwx-yxu]

I'll just have two builder functions for barchart and pie chart.

[rwx-yxu]

wonderful documentation page from ApexCharts 🤦‍♂️

[rwx-yxu]

Posting final view

[rwx-yxu]

Issue still needs to be open because the pull request just set the layout only. Data population for the charts still remain to be implemented.

[advweb-grp1]

all charts have been merged in. Closing issue.