[WIP] Add m.e.i.n.e.l - FAILS

openHPI · Jul 2, 2017 · b988780 · b988780
1 parent e2aa79b
commit b988780
Show file tree

Hide file tree

Showing 1,078 changed files with 1,004,232 additions and 6 deletions.
diff --git a/bower_components/m.e.i.n.e.l/.bower.json b/bower_components/m.e.i.n.e.l/.bower.json
@@ -0,0 +1,32 @@
+{
+  "name": "m.e.i.n.e.l",
+  "description": "Visualization library for data gathered trough Massive Open Online Courses (MOOCs)",
+  "main": "barchart-basic.html",
+  "authors": [
+    "Jakob Edding",
+    "Lars Lange",
+    "Maximilian Voelkers",
+    "Florian Wirtz"
+  ],
+  "homepage": "https://openhpi.github.io/m.e.i.n.e.l/",
+  "dependencies": {
+    "polymer": "^1.7.1",
+    "plotly.js": "^1.22.0"
+  },
+  "devDependencies": {
+    "iron-component-page": "^1.1.8",
+    "iron-demo-helpers": "^1.2.5",
+    "web-component-tester": "^5.0.0",
+    "webcomponentsjs": "^0.7.23"
+  },
+  "_release": "f219ae1211",
+  "_resolution": {
+    "type": "branch",
+    "branch": "master",
+    "commit": "f219ae1211ec6fe3cfd79ee5bbd54ec451aed09f"
+  },
+  "_source": "https://github.com/openhpi/m.e.i.n.e.l.git",
+  "_target": "*",
+  "_originalSource": "openhpi/m.e.i.n.e.l",
+  "_direct": true
+}
diff --git a/bower_components/m.e.i.n.e.l/.gitignore b/bower_components/m.e.i.n.e.l/.gitignore
@@ -0,0 +1,3 @@
+*bower_components/*
+.DS_Store
+*build/
diff --git a/bower_components/m.e.i.n.e.l/.zappr.yaml b/bower_components/m.e.i.n.e.l/.zappr.yaml
@@ -0,0 +1,13 @@
+approvals:
+  # PR needs at least 2 approvals
+  minimum: 2
+  # approval = comment that matches this regex
+  pattern: "^(:\\+1:|👍)$"
+  veto:
+    # veto/blocking a PR = comment that matches this regex
+    pattern: "^(:\\-1:|👎)$"
+  # note that `from` is by default empty,
+  # accepting any matching comment as approval
+  from:
+    # OR a collaborator of the repo
+    collaborators: true
diff --git a/bower_components/m.e.i.n.e.l/README.md b/bower_components/m.e.i.n.e.l/README.md
@@ -0,0 +1,60 @@
+# Modern, Extensible and Interactive Number Exploration Library (m.e.i.n.e.l.)
+
+The **M**odern, **E**xtensible and **I**nteractive **N**umber **E**xploration **L**ibrary (or short: m.e.i.n.e.l.) is a visualization library for various forms of data. It focuses on abstracting the interfaces in a way that one only needs to supply the data and few (optional) parameters to embed visually appealing charts into existing environments. These interfaces are implemented by utilizing Polymer components.
+
+## Technology stack
+
+[Plotly.js](https://plot.ly/javascript/) and [D3.js](https://d3js.org/) for visualization and [Polymer.js](https://www.polymer-project.org/1.0/) for leveraging the full power of Web Components build the base for the m.e.i.n.e.l. project.<br>
+[Plotly.js](https://plot.ly/javascript/) is used for basic visualizations whereas [D3.js](https://d3js.org/) is used for more complex and custom visualizations.
+
+## Cloning
+
+1. clone the repo with `git clone https://github.com/openHPI/m.e.i.n.e.l.git`
+2. change into the cloned directory with `cd m.e.i.n.e.l`
+3. [install Bower & Polymer](https://www.polymer-project.org/1.0/docs/tools/polymer-cli)
+4. perform `bower install` to install the dependencies
+5. do `polymer serve`
+6. head to `localhost:8080/components/m.e.i.n.e.l/` in your browser & you are done! :blush:
+
+## Creating custom components
+
+1. copy an existing diagram's main file (i.e. `barchart-basic.html` for the barchart)
+2. copy the corresponding demo file in `demo/` (i.e. `demo/barchart_basic_demo.html`)
+3. rename both to a name of choice (keep in mind that Polymer components need to have a dash in the name)
+4. make the following changes to the main file you just copied from `src/`:
+
+  - [ ] change the title in the first comment and also its description
+  - [ ] change the `@demo` reference to the new file you copied in `demo/`
+  - [ ] change the `<dom-module id=""`
+  - [ ] change the Polymer id in the JS part `Polymer({is: ""})...`
+  - [ ] change the rest of the code to match your needs
+  - [ ] document it correspondingly (see [Polymer doc](https://www.polymer-project.org/1.0/docs/tools/documentation))
+
+5. edit the file you copied in `demo/`:
+
+  - change the title
+  - change the import tag to import your custom component
+  - change the headline (`<h3>`)
+  - embed your component accordingly inside the `<demo-snippet><template>HERE</template></demo-snippet>` part
+
+6. append your diagram to the `to all-imports.html` file
+
+## Typical problems when combining Polymer with D3 and Plotly.js
+- `d3.select(...)` typically scans the whole DOM, how can I limit it to the local DOM of the Polymer component?
+  - in your `<template>` section, use a `<div>` which wraps all parts of your chart
+  - everytime when you would do `d3.select(...)`, make sure to do a preselection using that div's ID to limit traversal to the local DOM: `d3.select(this.$.divID).select(...)`
+- When passing my function `f` to a D3 built-in function, I can't access my Polymer component's attributes using `this.attributeName` inside `f`
+  - Make sure to pass `f.bind(this)` instead of `f` to the D3 built-in function
+- It seems like the `data` attribute is `null` when my code attempts to plot the diagram
+  - Make sure to read up on [Polymer Lifecycle Callbacks](https://www.polymer-project.org/1.0/docs/devguide/registering-elements#lifecycle-callbacks). If you're using the `ready` function as a trigger to plot your diagram, it might be worth to see whether using `attached` can fix your issue.
+
+## Optimize for production
+
+To optimize the polymer components for production, you can use Vulcanize. More information can be found [in the Polymer docs.](https://www.polymer-project.org/1.0/docs/tools/optimize-for-production)
+
+1. install [Polymer Bundler](https://github.com/Polymer/polymer-bundler): `npm install -g polymer-bundler`
+2. figure out which chart you want from `src/`
+3. do `polymer-bundler --inline-scripts --inline-css src/YOUR-CHART.html > CHART.html`
+4. include the `CHART.html` as `<link rel="import" href="../path/CHART.html">`
+5. include `<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/0.7.23/webcomponents-lite.min.js"></script>` in your header to make polyfills work with firefox etc.
+6. use the `<CHART></CHART>` tag you just created
diff --git a/bower_components/m.e.i.n.e.l/bower.json b/bower_components/m.e.i.n.e.l/bower.json
@@ -0,0 +1,22 @@
+{
+    "name": "m.e.i.n.e.l",
+    "description": "Visualization library for data gathered trough Massive Open Online Courses (MOOCs)",
+    "main": "barchart-basic.html",
+    "authors": [
+        "Jakob Edding",
+        "Lars Lange",
+        "Maximilian Voelkers",
+        "Florian Wirtz"
+    ],
+    "homepage": "https://openhpi.github.io/m.e.i.n.e.l/",
+    "dependencies": {
+        "polymer": "^1.7.1",
+        "plotly.js": "^1.22.0"
+    },
+    "devDependencies": {
+        "iron-component-page": "^1.1.8",
+        "iron-demo-helpers": "^1.2.5",
+        "web-component-tester": "^5.0.0",
+        "webcomponentsjs": "^0.7.23"
+    }
+}
diff --git a/bower_components/m.e.i.n.e.l/demo/activitychart_basic_demo.html b/bower_components/m.e.i.n.e.l/demo/activitychart_basic_demo.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
+
+    <title>activitychart-basic demo</title>
+
+    <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+
+    <link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html">
+    <link rel="import" href="../../iron-demo-helpers/demo-snippet.html">
+    <link rel="import" href="../src/activitychart-basic.html">
+
+    <style is="custom-style" include="demo-pages-shared-styles">
+      div.vertical-section-container {
+        max-width: 1500px;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="vertical-section-container centered">
+      <h3>basic activitychart demo (custom element)</h3>
+      <demo-snippet>
+        <template>
+          <!-- <activitychart-basic primarycolor="#4a148c" accentcolor="#ffcc80" dataurl="https://open.hpi.de/api/v2/stats/course/timebased.json?metric=CourseActivityTimebased&course_id=7793dd60-9a2f-4f01-828a-0dce340d8acd&start_date=2016-09-05T24:00:00.000Z&end_date=2016-10-31T17:00:00.000Z" min-value='1000' axis-labels='{
+            "x": {
+              "title": "Days"
+            },
+            "y": {
+          		"title": "Hours",
+              "values": ["0 AM", "1 AM", "2 AM", "3 AM", "4 AM", "5 AM", "6 AM", "7 AM", "8 AM", "9 AM", "10 AM", "11 AM", "12 PM", "1 PM", "2 PM", "3 PM", "4 PM", "5 PM", "6 PM", "7 PM", "8 PM", "9 PM", "10 PM", "11 PM"]
+            }
+          }' label-separator=' at '></activitychart-basic> -->
+
+          <activitychart-basic width="600" primarycolor="#4a148c" accentcolor="#ffcc80"
+
+          data='[
+            {
+              "x": ["1451948400","1452034800","1452121200","1452207600","1452294000","1452380400","1452466800","1452553200","1452639600","1452726000","1452812400","1452898800","1452985200","1453071600","1453158000","1453244400","1453330800","1453417200","1453503600","1453590000","1453676400","1453762800","1453849200","1453935600","1454022000","1454108400","1454194800","1454281200","1454367600","1454454000","1454540400","1454626800","1454713200","1454799600","1454886000","1454972400","1455058800","1455145200","1455231600","1455318000","1455404400","1455490800","1455577200","1455663600","1455750000","1455836400","1455922800","1456009200","1456095600","1456182000","1456268400","1456354800","1456441200","1456527600","1456614000","1456700400","1456786800","1456873200","1456959600","1457046000","1457132400","1457218800","1457305200","1457391600","1457478000","1457564400","1457650800","1457737200","1457823600","1457910000","1457996400","1458082800","1458169200","1458255600","1458342000","1458428400","1458514800","1458601200","1458687600","1458774000","1458860400","1458946800","1459033200","1459116000","1459202400","1459288800","1459375200","1459461600","1459548000","1459634400","1459720800","1459807200","1459893600","1459980000","1460066400","1460152800","1460239200","1460325600","1460412000","1460498400","1460584800","1460671200","1460757600","1460844000","1460930400","1461016800","1461103200","1461189600","1461276000","1461362400","1461448800","1461535200","1461621600","1461708000","1461794400","1461880800","1461967200","1462053600","1462140000","1462226400","1462312800","1462399200","1462485600","1462572000","1462658400","1462744800","1462831200","1462917600","1463004000","1463090400","1463176800","1463263200","1463349600","1463436000","1463522400","1463608800","1463695200","1463781600","1463868000","1463954400","1464040800","1464127200","1464213600","1464300000","1464386400","1464472800","1464559200","1464645600","1464732000","1464818400","1464904800","1464991200","1465077600","1465164000","1465250400","1465336800","1465423200","1465509600","1465596000","1465682400","1465768800","1465855200","1465941600","1466028000","1466114400","1466200800","1466287200","1466373600","1466460000","1466546400","1466632800","1466719200","1466805600","1466892000","1466978400","1467064800","1467151200","1467237600","1467324000","1467410400","1467496800","1467583200","1467669600","1467756000","1467842400","1467928800","1468015200","1468101600","1468188000","1468274400","1468360800","1468447200","1468533600","1468620000","1468706400","1468792800","1468879200","1468965600","1469052000","1469138400","1469224800","1469311200","1469397600","1469484000","1469570400","1469656800","1469743200","1469829600","1469916000","1470002400","1470088800","1470175200","1470261600","1470348000","1470434400","1470520800","1470607200","1470693600","1470780000","1470866400","1470952800","1471039200","1471125600","1471212000","1471298400","1471384800","1471471200","1471557600","1471644000","1471730400","1471816800","1471903200","1471989600","1472076000","1472162400","1472248800","1472335200","1472421600","1472508000","1472594400","1472680800","1472767200","1472853600","1472940000","1473026400","1473112800","1473199200","1473285600","1473372000","1473458400","1473544800","1473631200","1473717600","1473804000","1473890400","1473976800","1474063200","1474149600","1474236000","1474322400","1474408800","1474495200","1474581600","1474668000","1474754400","1474840800","1474927200","1475013600","1475100000","1475186400","1475272800","1475359200","1475445600","1475532000","1475618400","1475704800","1475791200","1475877600","1475964000","1476050400","1476136800","1476223200","1476309600","1476396000","1476482400","1476568800","1476655200","1476741600","1476828000","1476914400","1477000800","1477087200","1477173600","1477260000","1477346400","1477432800","1477519200","1477605600","1477692000","1477778400","1477868400","1477954800","1478041200","1478127600","1478214000","1478300400","1478386800","1478473200","1478559600","1478646000","1478732400","1478818800","1478905200","1478991600","1479078000","1479164400","1479250800","1479337200","1479423600","1479510000","1479596400","1479682800","1479769200","1479855600","1479942000","1480028400","1480114800","1480201200","1480287600","1480374000","1480460400","1480546800","1480633200","1480719600","1480806000","1480892400","1480978800","1481065200","1481151600","1481238000","1481324400","1481410800","1481497200","1481583600","1481670000","1481756400","1481842800","1481929200","1482015600","1482102000","1482188400"],
+
+              "y": [17,0,0,0,0,0,0,3,0,0,11,10,0,5,25,7,0,19,0,0,5,29,8,1,58,0,102,8,108,2,27,2,36,0,2,12,30,29,9,29,1,18,1,30,1,8,83,0,10,11,18,6,12,0,0,2,24,2,66,18,27,91,41,61,3,2,11,0,0,46,21,46,80,41,0,0,19,37,36,18,22,0,1,0,0,34,11,4,0,0,2,44,14,20,14,0,0,7,45,38,5,22,20,93,20,15,1,0,7,1,1,64,19,9,8,7,0,1,5,30,18,1,44,2,2,19,0,15,31,0,0,0,41,99,24,4,8,0,0,7,15,10,7,17,3,0,9,96,4,1,1,121,0,110,0,4,0,6,0,0,0,18,32,0,0,0,0,0,9,0,0,1,0,0,68,0,3,1,2,9,3,11,0,0,45,6,56,8,9,1,0,0,4,5,14,43,0,0,5,2,0,0,2,29,1,16,6,0,0,0,0,33,1,24,0,0,0,0,0,0,0,0,0,0,0,0,39,0,0,0,0,0,0,0,0,0,0,0,0,5,0,0,0,0,0,4,0,0,0,2,16,0,0,0,118,5,0,0,1,1,0,0,0,0,3,0,2,10,0,20,1,0,0,0,0,11,4,0,32,0,48,22,27,86,0,0,0,52,3,4,0,14,0,1,1,0,0,0,0,141,2,0,0,2,23,21,0,15,0,0,0,0,9,0,0,0,10,0,0,20,0,4,0,0,0,0,0,0,0,17,17,0,0,0,0,0,19,0,16,16,10,0,1,0,9,2,3,0,0,0,2]
+            }
+          ]'
+
+          axis-labels='{
+            "x": {
+              "title": "Calendar Week",
+              "type": "week"
+            },
+            "y": {
+          		"title": "Weekday",
+              "values": ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
+            }
+          }' label-separator='at' x-axis-label-frequency='4'></activitychart-basic>
+        </template>
+      </demo-snippet>
+    </div>
+  </body>
+</html>
diff --git a/bower_components/m.e.i.n.e.l/demo/ajax_wrapper_demo.html b/bower_components/m.e.i.n.e.l/demo/ajax_wrapper_demo.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
+
+    <title>ajax-wrapper demo</title>
+
+    <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+
+    <link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html">
+    <link rel="import" href="../../iron-demo-helpers/demo-snippet.html">
+    <link rel="import" href="../src/ajax-wrapper.html">
+
+    <style is="custom-style" include="demo-pages-shared-styles">
+        div.vertical-section-container {
+            max-width: 1500px;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="vertical-section-container centered">
+        <h3>ajax-wrapper demo (custom element)</h3>
+        <demo-snippet>
+            <template>
+                <ajax-wrapper primarycolor="rgba(221,97,8,1)" accentcolor="rgba(177,6,58,1)" dataurl="https://open.hpi.de/api/v2/stats/course/timebased.json?metric=CourseActivityTimebased&course_id=7793dd60-9a2f-4f01-828a-0dce340d8acd&start_date=2016-09-05T22:00:00.000Z&end_date=2016-10-31T22:00:00.000Z">
+                    <linechart-basic></linechart-basic>
+                    <barchart-basic></barchart-basic>
+                </ajax-wrapper>
+
+                <ajax-wrapper dataurl="https://open.hpi.de/api/v2/stats/course/timebased.json?metric=CourseActivityTimebased&course_id=7793dd60-9a2f-4f01-828a-0dce340d8acd&start_date=2016-09-05T22:00:00.000Z&end_date=2016-10-31T22:00:00.000Z" width="600">
+                  <activitychart-basic></activitychart-basic>
+                </ajax-wrapper>
+
+                <ajax-wrapper diagram-type="linechart-basic" scrollzoom="true" dataurl="https://open.hpi.de/api/v2/stats/course/timebased.json?metric=CourseActivityTimebased&course_id=7793dd60-9a2f-4f01-828a-0dce340d8acd&start_date=2016-09-05T22:00:00.000Z&end_date=2016-10-31T22:00:00.000Z"></ajax-wrapper>
+            </template>
+        </demo-snippet>
+    </div>
+</body>
+
+</html>
diff --git a/bower_components/m.e.i.n.e.l/demo/barchart_basic_demo.html b/bower_components/m.e.i.n.e.l/demo/barchart_basic_demo.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
+
+    <title>barchart-basic demo</title>
+
+    <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+
+    <link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html">
+    <link rel="import" href="../../iron-demo-helpers/demo-snippet.html">
+    <link rel="import" href="../src/barchart-basic.html">
+
+    <style is="custom-style" include="demo-pages-shared-styles">
+        div.vertical-section-container {
+            max-width: 1500px;
+        }
+    </style>
+</head>
+
+<body>
+    <div>
+        <h3>basic barchart demo (custom element)</h3>
+        <demo-snippet>
+            <template>
+          <!-- <barchart-basic primarycolor="rgba(221,97,8,1)" accentcolor="rgba(177,6,58,1)" dataurl="https://open.hpi.de/api/v2/stats/course/timebased.json?metric=CourseActivityTimebased&course_id=7793dd60-9a2f-4f01-828a-0dce340d8acd&start_date=2016-09-05T22:00:00.000Z&end_date=2016-10-31T22:00:00.000Z"></barchart-basic> -->
+          <barchart-basic width="400" height="400" primarycolor="rgba(221,97,8,1)" accentcolor="rgba(177,6,58,1)" data='[{ "x": [1, 2, 3, 4], "y": [10, 15, 13, 17]}]'></barchart-basic>
+          <barchart-basic width="400" height="400" stackedbar="true" primarycolor="rgba(221,97,8,1)" accentcolor="rgba(177,6,58,1)" data='[{ "x": [1, 2, 3, 4], "y": [10, 15, 13, 17]}, { "x": [1, 2, 3, 4], "y": [10, 15, 13, 17]}]'></barchart-basic>
+        </template>
+        </demo-snippet>
+    </div>
+</body>
+
+</html>
diff --git a/bower_components/m.e.i.n.e.l/demo/bubblechart_basic_demo.html b/bower_components/m.e.i.n.e.l/demo/bubblechart_basic_demo.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
+
+    <title>bubblechart-basic demo</title>
+
+    <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+
+    <link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html">
+    <link rel="import" href="../../iron-demo-helpers/demo-snippet.html">
+    <link rel="import" href="../src/bubblechart-basic.html">
+
+    <style is="custom-style" include="demo-pages-shared-styles">
+        div.vertical-section-container {
+            max-width: 1500px;
+        }
+    </style>
+</head>
+
+<body>
+    <div>
+        <h3>basic bubblechart demo (custom element)</h3>
+        <demo-snippet>
+          <template>
+            <bubblechart-basic width="400" height="400" primarycolor="rgba(221,97,8,1)" accentcolor="rgba(177,6,58,1)" data='[{ "x": [1, 2, 3, 4], "y": [10, 15, 13, 17], "marker": {"size":[30, 80, 30, 40]}}]'></bubblechart-basic>
+          </template>
+        </demo-snippet>
+    </div>
+</body>
+
+</html>
diff --git a/bower_components/m.e.i.n.e.l/demo/circular_progress_demo.html b/bower_components/m.e.i.n.e.l/demo/circular_progress_demo.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
+
+    <title>circular-progress demo</title>
+
+    <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+
+    <link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html">
+    <link rel="import" href="../../iron-demo-helpers/demo-snippet.html">
+    <link rel="import" href="../src/circular-progress.html">
+
+    <style is="custom-style" include="demo-pages-shared-styles">
+        div.vertical-section-container {
+            max-width: 1500px;
+        }
+    </style>
+</head>
+
+<body>
+    <div>
+        <h3>circular-progress demo (custom element)</h3>
+        <demo-snippet>
+            <template>
+              <circular-progress primarycolor="#f2503f" accentcolor="#404F70" data='42' width="400" height="250"></circular-progress>
+              <circular-progress primarycolor="#f2503f" accentcolor="#404F70" data='70' secdata="40" width="400" height="250"></circular-progress>
+              <circular-progress primarycolor="#f2503f" accentcolor="#404F70" data='42' width="100" height="100"></circular-progress>
+            </template>
+        </demo-snippet>
+    </div>
+</body>
+
+</html>