Linechart-basic uses string as type for data-parameter

Our other components are using array as type. Polymer then handles all the json stuff automatically

make charts responsive

Todo

make bar chart responsive
make pie chart responsive
width and height as attribute

Update to polymer 2

Now that Polymer 2 is live this should be Updated to avoid issues when running together with Polymer 2 components.

Activity diagramm axis labels

Should be the same as with github, labels should come from outside so we can translate them

Add doc on how to add new charts

Currently there is a lot of code duplication: We should figure out a way to minimize that and only supply the url of the data endpoint to a component and the rest is done via another ajax component or some

References #8

Upgrade to Polymer 3

Since Chrome will deprecate HTML Imports, we need to upgrade to Polymer 3.

Minimize plotly build

https://github.com/plotly/plotly.js/blob/master/dist/README.md#partial-bundles

Decide on further visualization types

ideas:

GitHub Stats like heatmap (see #14 )
spinner
more standard plotly elements
line graph that allows toggeling on/off specific lines

look deeper into d3.select()

There might be a problem, as d3 seems to search the complete site for the wanted div/id and not the local/shadow dom of the polymer element.
This will cause problems when using multiple components on the same site, using the same div identifiers.

DomStringMap: Data not transmitted correctly if Array of Numbers

if data is supplied as array of numbers (see dataset in i.e. activityChart and pieChart), one must insert the following code into the component at the top:

<div style="display:none;">{{dataset}}</div>

If not, only a DomStringMap whill be returned on this.dataset.
This only applies to Arrays of Numbers, Arrays of Strings are not included.

WTF?!

TODO: find more elegant way to solve this. Maybe even file a bug with Polymer.

Create ajax-like component for loading & parsing data and piping it into the diagrams

ToDos

create component
document component
create example of component having a diagram nested inside it that uses the data
remove ajax part from diagram components

JSON:API Support

We created the following endpoint and want to create a line chart with data filters. Therefore we need:

the ajax-wrapper has to understand json:api
a whitelist of attributes that should be displayed as lines (y)
the attribute that should be used as timestamps (x) - updated_at in our example below

{
  "data": [
    {
      "type": "course-statistics",
      "id": "4c3c9808-1433-4160-aaa1-89b8f34bf2d1",
      "links": {
        "self": "/api/v2/course-statistics/4c3c9808-1433-4160-aaa1-89b8f34bf2d1"
      },
      "attributes": {
        "course_name": "Cloud und Virtualisierung",
        "course_code": "cloud2013",
        "course_id": "00000001-3300-4444-9999-000000000001",
        "total_enrollments": 198,
        "current_enrollments": 198,
        "course_status": "archive",
        "no_shows": 197,
        "enrollments_last_day": 0,
        "enrollments_at_course_start": 0,
        "enrollments_at_course_middle_netto": 0,
        "enrollments_at_course_middle": 0,
        "enrollments_at_course_end": null,
        "total_questions": 4,
        "questions_last_day": 0,
        "total_answers": 3,
        "answers_last_day": 0,
        "total_comments_on_answers": 2,
        "comments_on_answers_last_day": 0,
        "total_comments_on_questions": 103,
        "comments_on_questions_last_day": 0,
        "certificates": 0,
        "helpdesk_tickets": 0,
        "helpdesk_tickets_last_day": 0,
        "start_date": "2015-04-07T00:00:00.000Z",
        "end_date": "2017-06-06T00:00:00.000Z",
        "new_users": 200,
        "completion_rate": 0,
        "consumption_rate": 0,
        "enrollments_per_day": [],
        "hidden": false,
        "updated_at": "2016-11-11T08:17:52.068Z",
        "created_at": "2016-11-11T08:17:51.868Z"
      },
      "relationships": {
        "course": {
          "data": {
            "type": "courses",
            "id": "00000001-3300-4444-9999-000000000001"
          },
          "links": {
            "related": "/api/v2/courses/00000001-3300-4444-9999-000000000001"
          }
        }
      }
    },
    {
      "type": "course-statistics",
      "id": "4c3c9808-1433-4160-aaa1-89b8f34bf2d1",
      "links": {
        "self": "/api/v2/course-statistics/4c3c9808-1433-4160-aaa1-89b8f34bf2d1"
      },
      "attributes": {
        "course_name": "Cloud und Virtualisierung",
        "course_code": "cloud2013",
        "course_id": "00000001-3300-4444-9999-000000000001",
        "total_enrollments": 199,
        "current_enrollments": 199,
        "course_status": "archive",
        "no_shows": 198,
        "enrollments_last_day": 0,
        "enrollments_at_course_start": 0,
        "enrollments_at_course_middle_netto": 0,
        "enrollments_at_course_middle": 0,
        "enrollments_at_course_end": 0,
        "total_questions": 4,
        "questions_last_day": 0,
        "total_answers": 3,
        "answers_last_day": 0,
        "total_comments_on_answers": 2,
        "comments_on_answers_last_day": 0,
        "total_comments_on_questions": 103,
        "comments_on_questions_last_day": 0,
        "certificates": 0,
        "helpdesk_tickets": 0,
        "helpdesk_tickets_last_day": 0,
        "start_date": null,
        "end_date": "2017-01-24T00:00:00.000Z",
        "new_users": 200,
        "completion_rate": 0,
        "consumption_rate": 0,
        "enrollments_per_day": [],
        "hidden": false,
        "updated_at": "2017-03-07T13:21:15.885Z",
        "created_at": "2016-11-11T08:17:51.868Z"
      },
      "relationships": {
        "course": {
          "data": {
            "type": "courses",
            "id": "00000001-3300-4444-9999-000000000001"
          },
          "links": {
            "related": "/api/v2/courses/00000001-3300-4444-9999-000000000001"
          }
        }
      }
    }
  ],
  "meta": {
    "current_page": 1,
    "total_pages": 1
  },
  "links": {
    "first": "http://0.0.0.0:3000/api/v2/course-statistics?filter%5Bcourse_id%5D=00000001-3300-4444-9999-000000000001&filter%5Bhistoric_data%5D=true&page%5Bnumber%5D=1",
    "last": "http://0.0.0.0:3000/api/v2/course-statistics?filter%5Bcourse_id%5D=00000001-3300-4444-9999-000000000001&filter%5Bhistoric_data%5D=true&page%5Bnumber%5D=1"
  }
}

div.vertical-section-container {
  max-width: 1500px;
}

to the CSS. This doesn't work on Mac w/ Firefox though (discovered by @jak-ing ).

Look into this and find an appropriate lasting fix.

Technology Stack Decisions: Visualization

Currently, we are deciding between native D3...

D3 (vanilla)

Good

plenty (endless) chart types
vanilla => expandable

Bad

vanilla => complexity 👎 => lots of code for standard charts

... and these four frameworks built on top of D3:

NVD3

Good

~30 chart types

Bad

<=IE8 not supported?!

Plotly

Good

~20 chart types
quickstart guide

Bad

documentation not great (good enough though?)

C3

Good

~16 chart types

Bad

last update: spring 2016

Vega lite

Good

~20 chart types

Bad

all JSON
no interaction?
no data updates?
components?

Comment further arguments / frameworks below to add to the discussion. 😊

Focus on piechart

Focus on piechart so that integration test can be done with it

Roadmap

Auto publish docs on GitHub pages

https://www.polymer-project.org/1.0/docs/tools/reusable-elements

Fill /doc

add intro / description of project (#24, #21, #32)
add "howto use component"
auto publish documentation (see #19)

openhpi / m.e.i.n.e.l Goto Github PK

m.e.i.n.e.l's People

Contributors

Stargazers

Watchers

Forkers

m.e.i.n.e.l's Issues

WTF?!

ToDos

D3 (vanilla)

Good

Bad

NVD3

Good

Bad

Plotly

Good

Bad

C3

Good

Bad

Vega lite

Good

Bad

Roadmap

Recommend Projects

Recommend Topics

Recommend Org