Demographics

Additional Documentation

User roles and what each is able to do:

EPICS Team member

• A member of the internal EPICS staff. Concerned with tracking EPICS' demographic statistics and how they change over time.

Demographics Display/UI Functionality

1. Filter Management

• Course Filter: Users can filter data based on selected courses (e.g., "2200" and "3200"). Multiple courses can be selected.
• Demographic Filter: Users can filter data by gender or ethnicity, with multiple selections allowed.
• Year and Semester Filter: Users can filter data by specific years and semesters. Multiple years or semesters can be selected.
• Y-axis Metric Selection: Users can choose to display data as either raw counts or percentages.
• Validation: Ensures that required filters (e.g., Course, Year, Semester) are selected. Throws error if mandatory filters are not provided.

2. Data Visualization

• Charts: Data is displayed as bar, line, or pie charts based on the user's selection. The chart is updated dynamically when filters change.
  • Bar Chart: Displays total students per semester by course. The bars represent the selected demographic data.
  • Line Chart: Displays trends over time (e.g., semester-wise changes in demographics).
  • Pie Chart: Shows the distribution of selected demographics (gender/ethnicity) across all selected semesters and courses.
• Tooltip: Tooltips display additional information when hovering over the chart segments, such as the raw count and percentage of total.
  • Example Tooltip:

    chartConfig.options.plugins.tooltip.callbacks.label = (context) => {
      const value = context.raw;
      const percentage = ((value / grandTotal) * 100).toFixed(1);
      return `${context.dataset.label}: ${value} students (${percentage}% of total)`;
    };

3. Data Export

• Exporting Data: Users can export the filtered data in CSV or Excel format.
• Chart Export: Users can download the chart as an image (e.g., PNG).

4. Handling Demographics and Courses

• Demographics: Data can be filtered based on ethnicity or gender. Users can choose which demographic (or both) to view.
• Course Filtering: Data can be filtered for specific courses, and the app supports combined data from multiple courses (e.g., 2200 and 3200).
  • Example of filtering data by courses:

    const courses = Course ? String(Course).split(",") : [];

5. Data Sorting and Display

• Sorting Data: The records are sorted by year and semester to display in chronological order. This ensures data is displayed in the correct order for visual analysis.
  • Sorting logic:

    records.sort((first, second) => {
      const firstYear = first.Name.substring(0, 2);
      const firstSem = first.Name.substring(2, 3);
      const secondYear = second.Name.substring(0, 2);
      const secondSem = second.Name.substring(2, 3);
      if (firstYear > secondYear) return 1;
      if (firstYear < secondYear) return -1;
      const semesterOrder = ['F', 'U', 'S'];
      return semesterOrder.indexOf(firstSem) - semesterOrder.indexOf(secondSem);
    });

6. Validation and Error Handling

• Validation for Filters: Ensures that at least one course, one semester, and both years are selected before data is processed. Throws error if conditions are not met.
  • Example error handling:

    if (courses[0] == "Empty") {
      throw new Error("You must pick at least one Course");
    } else if (years[0] == "Empty" || years.length < 2) {
      throw new Error("Both Years must be chosen");
    } else if (semesters[0] == "Empty") {
      throw new Error("You must pick at least one Semester");
    }

7. Dynamic Data Updates

• Dynamic Chart Updates: When users select or change filters (such as ethnicity, gender, etc.), the charts update dynamically with the new data.
  • Example of updating charts dynamically:

    chartConfig.data.datasets = selectedCategories.map((category, index) => ({
      label: category,
      data: this.chartData.map((item) => {
        return this.filters.find(f => f.name === "Y-axis").selectedOptions[0] === "Percentages"
          ? (item[category] / item.Total) * 100
          : item[category];
      }),
      backgroundColor: isGenderMode ? this.getColorForGender(category) : this.getColorForEthnicity(category),
      borderColor: isGenderMode ? this.getColorForGender(category) : this.getColorForEthnicity(category),
      fill: false,
      tension: chartType === "Line" ? 0.4 : undefined
    }));

8. User Interface (UI) and Layout

• Responsive Design: The app is designed to be responsive across devices (desktop, tablet, and mobile).
• Navigation: Easy-to-use navigation menus for users to access different pages, such as filtering data, viewing charts, and exporting data.

---

Third-Party Integrations

• The Demographics page makes use of a single table in the overall Teambuilder database. It does this using Prisma, which simplifies database functionality and acts as an interface between JavaScript and the database. However, this only tentatively counts as a third-party integration, so no additional page is necessary.