Skip to content
React component for drill-down chart analysis of online courses
JavaScript
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src Support portal inference for LinkedIn courses Aug 11, 2019
test Introduce version 0.9.0 Jul 22, 2019
.babelrc Introduce version 0.9.0 Jul 22, 2019
.gitignore Introduce version 0.9.0 Jul 22, 2019
.nvmrc Introduce version 0.9.0 Jul 22, 2019
.prettierrc Introduce version 0.9.0 Jul 22, 2019
.travis.yml Introduce version 0.9.0 Jul 22, 2019
LICENSE Introduce version 0.9.0 Jul 22, 2019
README.md Update README Jul 22, 2019
Screenshot.png Introduce version 0.9.0 Jul 22, 2019
mainIcon.svg Update mainIcon Aug 11, 2019
package-lock.json 1.1.0 Aug 11, 2019
package.json 1.1.0 Aug 11, 2019

README.md

@giancosta86/omnicourse

React component for drill-down chart analysis of online courses

NPM Build Status

Screenshot

Introduction

OmniCourse is a tiny library (just a few hundred lines! ^__^), completely written in ES6 and JSX, providing a React component dedicated to performing aggregated, decomposable analysis of completed online courses.

More precisely, its CourseReport component displays arbitrarily-nested taxonomies of courses in the form of pie charts: when the user clicks on a pie slice, a drill-down is performed, up to the table summarizing the details of the courses belonging to the chosen path.

To improve the user experience, the UI also includes a breadcrumb navigation bar to enable arbitrary backtracking during the drill-down exploration, as well as a footer with grand-total counters for the selected slice.

OmniCourse is designed to be the kernel of the learning area of my personal website - but I wanted to package it as a library, despite its simplicity, to make it available to anyone willing to share their knowledge! ^__^

Installation

npm install @giancosta86/omnicourse

OmniCourse is currently transpiled and polyfilled to ES5 via Babel with core-js@2 and regenerator. In particular, it is designed to be compatible with:

  • Gatsby projects, for static website generation

  • projects created via create-react-app

Usage

import React, { Component } from "react"
import { CourseReport } from "@giancosta86/omnicourse"

class Example extends Component {
  render() {
    return <CourseReport sourceData={} rootLabel=""/>
  }
}

To see a more concrete example in action, please refer to its minimalist test web application, published on GitHub as well.

Properties

  • sourceData (mandatory): course data, described using a dedicated, very simple JS-based notation (see Data format below)

  • rootLabel (mandatory): text of the label for the select component in the navigation bar

  • className: the class of the top-level div generated by the component. See CSS styling below

  • loader: JSX component to be displayed while the chart is loading

  • colors: array of colors used as a color palette by the charts. Please, refer to the documentation of react-google-charts for more details

CSS styling

OmniCourse provides no styling - it is up to you to decide how to style the elements! However, a sensible default - that is, the one depicted in the screenshot - can be found in the example web application: please, feel free to start by copying the contents of its index.scss stylesheet.

For further details, the following pseudocode describes the DOM tree created by the CourseReport component:

div.<CourseReport className property> {
  nav.path-bar {
    label.root-label
    select.root-select
    button.internal.path-component
    span.leaf.path-component
  }

  .course-chart

  div.table-container {
    table.course-table {
      thead {
        tr {
          td.title
          td.duration
          td.completion-date
          td.portal
          td.certificate
        }
      }

      tbody {
        tr {
          td.title
          td.duration
          td.completion-date
          td.portal
          td.certificate
        }
      }
    }
  }

  footer.context-summary {
    div.total-duration {
      label
      span
    }

    div.total-courses {
      label
      span
    }
  }
}

Data format

Course taxonomies are described via plain JavaScript notation - which is much easier to see than to explain: in particular, please refer to the courses.js file in the example web application.

Format rules

  • the sourceData object passed to CourseReport is a JavaScript object where:

    • each key will be shown as an item in the select component of the navigation bar; consequently, in case of spaces or other characters not allowed in identifiers, you can express the key as a string
    • each value can be either:

      • another object, thus introducing a conceptual subtree where the same rules apply

      • an array of courses, where each course is described by an object whose meaningful fields are:

        • title (mandatory)

        • minutes (mandatory): the duration in minutes

        • url: the official URL. If present, the course title in the course table will be displayed as a link pointing to such URL

        • portal: the portal hosting the course. If missing, it could be inferred from the URL

        • completionDate - if present, it should be in YYYY-MM-DD format

        • certificateUrl - if present, a link to such URL will be shown in the course table

License

Apache-2.0 © giancosta86

Third-party libraries

You can’t perform that action at this time.