npm

Need private packages and team management tools?Check out npm Orgs. »

@giancosta86/omnicourse

1.1.0 • Public • Published

@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

install

npm i @giancosta86/omnicourse

Downloadsweekly downloads

1

version

1.1.0

license

Apache-2.0

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability