ghw-drawer

Github Worlds drawer is a visualization toolkit that provides
Views into JSON data that comes from the
Github GraphQL API.
It is called Github Worlds drawer because there is also a
Github Worlds menu which displays the same data and views
but with the
Menu
being the primary navigation element instead of the
Drawer

This demo is an extension of
mui-drawer and it is assumed that you have already reviewed the concepts and
documentation associated with that repo.

A Data Visualization Framework

We are in the process of developing a simple generic data visualization
framework in the context of a
Material-UI Tutorial
with the main goal of
using this framework as a test bed for elucidating different aspects of
Material-UI. So the tutorial and the framework will develop over time
in parallel. As more interesting aspects of the framework get developed,
the associated documentation teaching the Material-UI concepts will follow.

The Overall Architecture of the Framework

The concept is simple. The framework supports views and JSON data.

The views are any React component that can be accepted inside
withStyles.
The first example of this is a
Grid List with
Cards inside them.

The JSON data comes from any API call or endpoint that returns JSON data. The API call can be GraphQL, REST, or static JSON data sources such as JSON files sitting on your local disk, your cloud server or inside your Github repo.

Github World Views

The tutorial repository for ghw is called ghw-drawer and is
located here on Github
or simply click on the Github icon in the upper right hand corner
of the
AppBar.

Github Worlds (ghw) is a set of views coming from the Github GraphQL API.
Using this data visualization framework one can develop new views of data for repositories, users, statistics and anything else that can be derived from this data possibly in concert with other data sets.

The data sets for ghw are abstracted away from the underlying visualization so that the only thing needed to display the data is a JSON data file. Eventually, we might provide a live view of the data coming from the Github GraphQL API; but for now the priority is to only require JSON data sets. The generation of the JSON data sets is described in another section of the tutorial. For now, we are providing a test set of JSON data files to better understand the structure of the data along with the program which interprets the data and a sample set of views.

Users are welcome to generate out their own custom views along with the data sets to their liking.

One repo many views

In the current incarnation of the demo there are four views.

• view1: vertical scrollable gridlist of cards
• view2: horizontal single line scrollable gridlist of cards
• view3: table view with react-autosuggest
• view4: vertical scrollable gridlist of cards with no avatars

One view many repos

Each view in the system is accessible via the Views menu. The repo dropdown
allows one to switch between different Github repositories while staying on the same view. If you select a different repo the same view will be persistent.

Data Structure Examples

AppBar

At the top of the hierarchy are ways to organize information or
websites. All websites need to have an
AppBar. A nice example
of an AppBar in action is the
Material-UI Home Page.
There you will
see the Icon button for drawer open and close. In the repos
in this tutorial you
will see the same functionality.

Gridlists

The Gridlist is used to display a collection of Cards in both
a single horizontal line and with six cards per row.

Cards

The cards in this demo contain different data types about
each user that commits to a Github
repository including:

• the user’s name
• the user’s location
• the user’s username
• a link to the avatar of the user

One can also grab data surrounding stars and forks as well.