[WIP] Activity chart #14

flowirtz · 2017-01-07T17:17:46Z

Activity chart diagram in the style of GitHub activity

Todos

don't hardcode data
more (@jak-ing knows)

(currently not working and hard coded data)

maybe we have an js expert who can find a cleaner approach to solve the "this" problem.

…rect is set relative to the label's text length.

flowirtz

Really like the changes, makes the code way cleaner.

flowirtz · 2017-01-09T23:15:31Z

activitychart-basic.html

@@ -106,29 +106,57 @@
      },

      _showLabel: function (d, i) {


even though this method is private, we might wanna use more meaningful names than d, i

I'm against that here. It's a D3 thing to use precisely this signature; d being the datum and i being its index.

ah, I see. Sorry for the confusion!

flowirtz · 2017-01-09T23:20:10Z

activitychart-basic.html

+        //append rect element first so that following text element is displayed above rect
+        label.append('rect');
+
+        var labelText = label.append('text')


like this approach

flowirtz · 2017-01-09T23:22:11Z

activitychart-basic.html

+        //finish rect configuration that was appended previously
+        label.select('rect')
+          .attr('x', labelText.attr('x') - 3)
+  				.attr('y', labelText.attr('y') - 11)


where do all these hardcoded values (y -11 etc., rather e.g. y - something.width) come from and are they needed like this (probably not)?
Can you maybe rather put them into a var as well and calc them respectively?

Fixed in e4b408e or the necessity of hard coded values is explained thoroughly. ;)

flowirtz · 2017-01-09T23:23:00Z

activitychart-basic.html

        d3.select('#label-' + i).remove();
      },

+      _spaceLabelHor: function(d, i, labelWidth) {


maybe rename d, i to something more meaningful

if dataurl is provided, this will be used, otherwise the parameters dataset and labels are processed.

flowirtz · 2017-01-10T13:27:13Z

activitychart-basic.html

@@ -72,27 +82,35 @@
      * @param {Object} data The data to be plotted
      */
      handleResponse: function (data) {


maybe make that private?

flowirtz · 2017-01-10T13:57:21Z

activitychart-basic.html

+        //so far, the appropriate color is calculated based on the value of the datum, there is no set of fixed colors
+        var colorScale = d3.scaleLinear()
+          .domain([datasetMin, datasetMax])
+          .range(['#F5E8BB', '#930517']);


make that a parameter 😊 maybe

replacing ready by attached has done the trick

Set SVG height and width dynamically based on the size of the dataset and squaresPerRow. Use ES6 notation for calculating min and max values of the dataset.

Make the dataset that is passed to D3 and which the visualization is built from look like this: [ {'x': timeStamp0, 'y': value0}, ... ,{'x': timeStampN, 'y': valueN}]

Use the two custom colors marking the minimum and the maximum color. Custom colors can be passed to the component via an attribute in the HTML tag.

Change orientation changing the focus from rows to columns. Improve the calculation of positions and sizes for the labels to make these values more consistent among different square sizes, spacing options etc by mostly dropping hardcoded values.

Allow the minimum and maximum value used for the color scale to be overwritten by arguments in the HTML tag. By default, these values are derived from the dataset.

flowirtz

LGTM when finished

flowirtz · 2017-01-12T13:27:32Z

demo/activitychart_basic_demo.html

@@ -13,6 +13,9 @@
    <link rel="import" href="../activitychart-basic.html">

    <style is="custom-style" include="demo-pages-shared-styles">
+      div.vertical-section-container {
+        max-width: 1500px;


seems to not be working on Mac w/ Firefox though, couldnt find a reason why... see #25

flowirtz · 2017-01-12T15:10:46Z

activitychart-basic.html

+        on-response="handleResponse"
+        debounce-duration="300">
+    </iron-ajax>
+    <div style="display:none;">{{dataset}}</div>


that bloody issue...
see #26

flowirtz

Looks great!
Do we want to remove the dataurl and AJAX part and everything related to it though, so we can put that into another component effectively letting this one here only accept direct json via the data attributes, as discussed? see #28

flowirtz · 2017-01-12T15:18:32Z

activitychart-basic.html

+        return data;
+      },
+
+      _plotDiagram: function () {


Please document

flowirtz · 2017-01-12T16:16:25Z

activitychart-basic.html

+        this._plotDiagram();
+      },
+
+      _buildDataset: function(labels, dataset) {


Please document

flowirtz · 2017-01-12T16:17:50Z

activitychart-basic.html

+      _showLabel: function (d, i) {
+        //using a group element 'label' with an appended text element and a rect element as background to display a label
+
+        var polyElement = Polymer.dom(this).parentNode.parentNode.parentNode;


is there maybe a better way to traverse the dom than .parentNode.parentNode.parentNode? Seems kinda odd to me, definitely don't know better though... 😅

I'm sure there is; Jan made a remark about this earlier.

Let's discuss / investigate in the next team meeting

flowirtz · 2017-01-17T10:31:08Z

activitychart-basic.html

+      },
+
+      attached: function() {
+        if(this.dataurl != "") {


the != "" part can be omitted afaik
http://stackoverflow.com/a/154068

flowirtz · 2017-01-17T10:35:13Z

activitychart-basic.html

+
+        var data = this._buildDataset(this.labels, this.dataset);
+
+        var dataset = this.dataset;


if we move this line above var data = this._buildDataset(this.labels, this.dataset); we can omit the this. in the latter part of the params

flowirtz · 2017-01-17T10:38:44Z

activitychart-basic.html

+        //append rect element first so that following text element is displayed above rect
+        label.append('rect');
+        var labelText = label.append('text')
+					.text(d.y + ' at ' + d.x)


is the at part hardcoded? Might be bad for translations

Yes, changed this in cf43575.

flowirtz · 2017-01-17T10:44:37Z

activitychart-basic.html

+        if (Polymer.dom(this).node.nodeName != "ACTIVITYCHART-BASIC") {
+          var polyElement = Polymer.dom(this).parentNode.parentNode.parentNode;
+        }
+				return polyElement.squareSpacing * (Math.floor(i / polyElement.squaresPerColumn));


maybe we should use a pre-commit hook for beautify.js

Omitted unnecessary != "" part in if Moved a var declaration above its use

SquaresPerColumn is now always derived from the number of axis labels. Add stub for alternating between user and course activity. Fix Polymer.dom(this).parentNode problem. Limit D3 to only scan the Polymer component's local DOM instead of the whole DOM thus avoiding problems when instantiating a component more than once on a page.

Improve some naming of the attributes too.

Langleu · 2017-02-06T08:08:12Z

👍

JakobEdding

Appears to be ready to be merged into master.

JakobEdding · 2017-02-06T10:41:50Z

👍

MaximilianV added 2 commits January 2, 2017 20:32

add d3 as bower dependency

db88e95

create activitychart skeleton code and import @jak-ing code

69a01b6

(currently not working and hard coded data)

flowirtz assigned MaximilianV and JakobEdding Jan 7, 2017

flowirtz added the todo label Jan 7, 2017

MaximilianV and others added 2 commits January 8, 2017 12:13

chart is now working, still hard coded data

da3fe2a

maybe we have an js expert who can find a cleaner approach to solve the "this" problem.

Labels are displayed inside the SVG. Width of the label's background …

6ccb6e2

…rect is set relative to the label's text length.

flowirtz commented Jan 9, 2017

View reviewed changes

MaximilianV added 2 commits January 10, 2017 11:40

data might be passed as json in parameters

018b182

if dataurl is provided, this will be used, otherwise the parameters dataset and labels are processed.

passing parameters now works

1747cad

flowirtz commented Jan 10, 2017

View reviewed changes

MaximilianV and others added 9 commits January 11, 2017 10:47

ajax call isn't performed when supplying data directly

af4c3fd

replacing ready by attached has done the trick

Fix SVG chart dimensions, use ES6 notation

7613df8

Set SVG height and width dynamically based on the size of the dataset and squaresPerRow. Use ES6 notation for calculating min and max values of the dataset.

Use a more D3-y approach for the dataset.

3bdcfac

Make the dataset that is passed to D3 and which the visualization is built from look like this: [ {'x': timeStamp0, 'y': value0}, ... ,{'x': timeStampN, 'y': valueN}]

Use custom colors

f37fe84

Use the two custom colors marking the minimum and the maximum color. Custom colors can be passed to the component via an attribute in the HTML tag.

Add support for custom minimum/maximum value

58995ce

Allow the minimum and maximum value used for the color scale to be overwritten by arguments in the HTML tag. By default, these values are derived from the dataset.

Merge master changes into activity-chart

8a8e155

Fix width of demo page containers for activity-chart page

50b04ca

Edit .gitignore

410a22f

flowirtz mentioned this pull request Jan 12, 2017

Decide on further visualization types #11

Closed

4 tasks

flowirtz commented Jan 12, 2017

View reviewed changes

Prepare activity chart for showing axis labels

2f04302

flowirtz commented Jan 12, 2017

View reviewed changes

flowirtz commented Jan 17, 2017

View reviewed changes

JE and others added 4 commits January 19, 2017 17:30

Add more padding to label

ff9c404

Refactor from squareWidth to squareSize

fdad5bf

Fix style

6082b13

Omitted unnecessary != "" part in if Moved a var declaration above its use

JE added 11 commits January 30, 2017 12:05

Merge with origin

349387b

Support customizable separator for labels

cf43575

Switch to Plotly.d3 to reduce overall number of dependencies

690c8dc

Make sure to wait for Polyfills to be loaded completely

816a9b9

Show calendar week when activity type is set to 'user'

9c7163a

Improve insertion of hover-label

68ca7a4

Generalize attributes and their possible values

2074174

Improve some naming of the attributes too.

Add better demo for showing daily activity

785a759

Refactor, decompose code and add method comments

f18bbc3

Make diagram scrollable along x axis

a59e687

Start scrolling from the right with the latest activity

3216b17

Lars Lange and others added 3 commits February 6, 2017 10:43

Merge branch 'master' into activity-chart

b726e20

Merge branch 'master' into activity-chart

027045b

Make style explicit to fix Firefox compatibility issues

1230a84

JakobEdding approved these changes Feb 6, 2017

View reviewed changes

Langleu merged commit edc6071 into master Feb 6, 2017

Langleu deleted the activity-chart branch February 6, 2017 10:45

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[WIP] Activity chart #14

[WIP] Activity chart #14

flowirtz commented Jan 7, 2017 •

edited by JakobEdding

flowirtz left a comment •

edited

flowirtz Jan 9, 2017

JakobEdding Jan 10, 2017 •

edited

flowirtz Jan 10, 2017

flowirtz Jan 9, 2017

flowirtz Jan 9, 2017

JakobEdding Jan 12, 2017

flowirtz Jan 9, 2017

flowirtz Jan 10, 2017

flowirtz Jan 10, 2017

flowirtz left a comment

flowirtz Jan 12, 2017

flowirtz Jan 12, 2017

flowirtz left a comment •

edited

flowirtz Jan 12, 2017

flowirtz Jan 12, 2017

flowirtz Jan 12, 2017

JakobEdding Jan 12, 2017

janrenz Jan 13, 2017

flowirtz Jan 17, 2017

flowirtz Jan 17, 2017

flowirtz Jan 17, 2017

JakobEdding Jan 30, 2017

flowirtz Jan 17, 2017

Langleu commented Feb 6, 2017

JakobEdding left a comment

JakobEdding commented Feb 6, 2017


		var data = this._buildDataset(this.labels, this.dataset);

		var dataset = this.dataset;

[WIP] Activity chart #14

[WIP] Activity chart #14

Conversation

flowirtz commented Jan 7, 2017 • edited by JakobEdding

Todos

flowirtz left a comment • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

JakobEdding Jan 10, 2017 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

flowirtz left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

flowirtz left a comment • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Langleu commented Feb 6, 2017

JakobEdding left a comment

Choose a reason for hiding this comment

JakobEdding commented Feb 6, 2017

flowirtz commented Jan 7, 2017 •

edited by JakobEdding

flowirtz left a comment •

edited

JakobEdding Jan 10, 2017 •

edited

flowirtz left a comment •

edited