Code Monkey home page Code Monkey logo

cbd-dashboard-ui's Introduction

CBME Dashboard UI

A react web application built on MERN Stack (MongoDB , Express , React and Node.JS) for visualizing data compiled from assessments by physician observers to enhance the Competency-Based medical Education model.

This is the repository for the front-end code,the corresponding backend-code is available here: https://github.com/kiranbandi/cbd-dashboard-server

WARNING: This is a work in progress in its pre-alpha state. It is completely functional, so feel free to fork it and try it out but expect changes that break your code in future versions.

WEB Demo

The current version of the CBD Dashboard is live at :
https://cbme.usask.ca

Issues,Bugs and Feature Requests

If something doesnt work or you have noticed a bug please create an issue using the template provided alternatively you can also drop a mail to the developer contact address below.

Since this project is supported by funding from the University of Saskatchewan we wont be able to support major Feature Requests unless they come through the official channels but if there is something tiny that you might want the tool to have please drop a mail to the contact address below.

Also the current development history of the tool including new features that we are working on can be seen here - https://trello.com/b/SuLCQr1u/cbd-design-board

Contact

This project is sponsored by the Emergency Department at University of Saskatchewan.

For bugs, feature requests - Drop a mail to the developer at [email protected] or [email protected]

To get a demo of the tool - Drop a mail to the project lead Dr.Brent Thoma - [email protected]

Architecture

Links to the design document and the site map are provided below along with a snapshot of the minimum basic data requirements for the dashboard -

https://github.com/kiranbandi/cbd-dashboard-ui/blob/master/documentation/CBME%20Dashboard%20Design%20Document.pdf

https://github.com/kiranbandi/cbd-dashboard-ui/blob/master/documentation/cbd_sitemap.png

https://github.com/kiranbandi/cbd-dashboard-ui/blob/master/documentation/dataset%20requirement.png

Features

Resident Dashboard

  • base EPA acquisition metrics
  • Rotation schendule of a resident
  • Recent EPAs that have been completed in the last month
  • A complete chart with EPAs scores corresponding to each Learning Stage
  • History of Expired EPAs if any
  • Percentage completed in each Learning stage (Transition to Discipline,Foundation,Core,Transiton to Practice)

Faculty Development Dashboard

  • base EPA observation metrics ,Number observed
  • Average EPA score and Dove Factor (Probablity of being generous in awarding higher scores)
  • Table of all EPA observtions filterable and sortable on the basis of Rating, Feedback Given or Observation Date

Export Data

  • Ability to export all the results in an CSV file for further research and analysis.

Program Evaluation

  • EPA Split Distribtuon for each learning stage.
  • EPA Monthly Distrubtion Curve

Tools

  • File processor to parse and export the difficult to analyze Royal college of medicine Export file.
  • Visualize the data on the file.

Core Dependencies

  • React
  • Redux
  • Axios
  • React-Router
  • xlsx

Development

This project is a mix of both React and D3 with D3 handling creation of visual components and React handling the actual rendering. Redux is used for managing the data store and styling is done through SaSS.

Webpack bundles

Install webpack and some plugins and loaders,

$ npm install

Webpack config can be found in build-config\webpack.config.js. Watch for changes and compile bundle if found,

$ npm run start

Generate minified production files,

$ npm run build

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.