Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[WIP] Activity chart #14

Merged
merged 34 commits into from Feb 6, 2017
Merged

[WIP] Activity chart #14

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
34 commits
Select commit Hold shift + click to select a range
db88e95
add d3 as bower dependency
MaximilianV Jan 2, 2017
69a01b6
create activitychart skeleton code and import @jak-ing code
MaximilianV Jan 2, 2017
da3fe2a
chart is now working, still hard coded data
MaximilianV Jan 8, 2017
6ccb6e2
Labels are displayed inside the SVG. Width of the label's background …
Jan 9, 2017
018b182
data might be passed as json in parameters
MaximilianV Jan 10, 2017
1747cad
passing parameters now works
MaximilianV Jan 10, 2017
af4c3fd
ajax call isn't performed when supplying data directly
MaximilianV Jan 11, 2017
7613df8
Fix SVG chart dimensions, use ES6 notation
Jan 11, 2017
3bdcfac
Use a more D3-y approach for the dataset.
Jan 11, 2017
f37fe84
Use custom colors
Jan 11, 2017
e4b408e
Change orientation, improve label positioning
Jan 11, 2017
58995ce
Add support for custom minimum/maximum value
Jan 12, 2017
8a8e155
Merge master changes into activity-chart
Jan 12, 2017
50b04ca
Fix width of demo page containers for activity-chart page
Jan 12, 2017
410a22f
Edit .gitignore
Jan 12, 2017
2f04302
Prepare activity chart for showing axis labels
Jan 12, 2017
ff9c404
Add more padding to label
Jan 19, 2017
fdad5bf
Refactor from squareWidth to squareSize
Jan 19, 2017
6082b13
Fix style
flowirtz Jan 22, 2017
5257e4a
Add dynamic axes and labels, fix traversal problem
Jan 30, 2017
349387b
Merge with origin
Jan 30, 2017
cf43575
Support customizable separator for labels
Jan 30, 2017
690c8dc
Switch to Plotly.d3 to reduce overall number of dependencies
Feb 2, 2017
816a9b9
Make sure to wait for Polyfills to be loaded completely
Feb 2, 2017
9c7163a
Show calendar week when activity type is set to 'user'
Feb 2, 2017
68ca7a4
Improve insertion of hover-label
Feb 2, 2017
2074174
Generalize attributes and their possible values
Feb 2, 2017
785a759
Add better demo for showing daily activity
Feb 2, 2017
f18bbc3
Refactor, decompose code and add method comments
Feb 4, 2017
a59e687
Make diagram scrollable along x axis
Feb 5, 2017
3216b17
Start scrolling from the right with the latest activity
Feb 5, 2017
b726e20
Merge branch 'master' into activity-chart
Feb 6, 2017
027045b
Merge branch 'master' into activity-chart
Feb 6, 2017
1230a84
Make style explicit to fix Firefox compatibility issues
Feb 6, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
54 changes: 35 additions & 19 deletions activitychart-basic.html
View file
Open in desktop
Expand Up @@ -24,6 +24,7 @@
on-response="handleResponse"
debounce-duration="300">
</iron-ajax>
<div style="display:none;">{{dataset}}</div>
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

that bloody issue...
see #26

<div id="diagram"></div>
</template>

Expand All @@ -35,6 +36,15 @@
/** URL of data to be plotted */
dataurl: {
type: String,
value: '',
},
/** y values in JSON format (data to be displayed) */
dataset: {
type: Array,
},
/** x values in JSON format (labels for data) */
labels: {
type: Array,
},
/** Primary color of chart */
primarycolor: {
Expand Down Expand Up @@ -72,27 +82,35 @@
* @param {Object} data The data to be plotted
*/
handleResponse: function (data) {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

maybe make that private?

//var goodData = this._normalizeJSON(data.detail.response);
if(this.dataurl != "") {
var goodData = this._normalizeJSON(data.detail.response);
this.dataset = goodData[0]["y"];
this.labels = goodData[0]["x"];
}
this._plotDiagram();
},

_plotDiagram: function () {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please document

console.log("Plotting...");
console.log(this.dataset);
console.log(this.labels);
var diagramDiv = this.$.diagram;
var svgWidth = 500,
svgHeight = 500;
//values should range between 1, 100
var dataset = [1, 10, 20, 35, 47, 65, 87, 100,
1, 10, 65, 20, 35, 47, 87, 100,
1, 10, 20, 47, 65, 87, 35, 100,
1, 10, 20, 100, 35, 47, 65, 87,
1, 20, 35, 10, 47, 65, 87, 100,
47, 65, 87, 1, 10, 20, 35, 100];

//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([1, 100])
.range(['#F5E8BB', '#930517']);
svgHeight = 500;
var dataset = this.dataset;
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

var datasetMin = Math.min.apply(null, dataset);
var datasetMax = Math.max.apply(null, dataset);

//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']);
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

make that a parameter 😊 maybe


var svg = d3.select('#diagram').append('svg')
.attr('width', svgWidth)
.attr('height', svgHeight);


var squares = svg.selectAll('rect')
.data(dataset)
.enter().append('rect')
Expand All @@ -109,15 +127,13 @@
//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;
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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... 😅

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's discuss / investigate in the next team meeting


var label = d3.select('svg').append('g')
.attr('id', 'label-' + i);

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

var labelText = label.append('text')
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

like this approach

.text(d + ' at ' + i)
.text(d + ' at ' + polyElement.labels[i])
.style('font-size', '0.8em')
.attr('fill', 'black');
//this split is necessary because the position is set relative to the size of the text element
Expand Down Expand Up @@ -159,15 +175,15 @@

_spaceSquareHor: function (d, i) {
var polyElement = this;
if (Polymer.dom(this).childNodes.length == 0) {
if (Polymer.dom(this).node.nodeName != "ACTIVITYCHART-BASIC") {
var polyElement = Polymer.dom(this).parentNode.parentNode.parentNode;
}
return polyElement.squareSpacing * (i % polyElement.squaresPerRow);
},

_spaceSquareVert: function (d, i) {
var polyElement = this;
if (Polymer.dom(this).childNodes.length == 0) {
if (Polymer.dom(this).node.nodeName != "ACTIVITYCHART-BASIC") {
var polyElement = Polymer.dom(this).parentNode.parentNode.parentNode;
}
return polyElement.squareSpacing * (Math.floor(i / polyElement.squaresPerRow));
Expand Down
16 changes: 15 additions & 1 deletion demo/activitychart_basic_demo.html
View file
Open in desktop
Expand Up @@ -20,7 +20,21 @@
<h3>basic activitychart demo (custom element)</h3>
<demo-snippet>
<template>
<activitychart-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>
<activitychart-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" squares-per-row="15"></activitychart-basic>
<!-- <activitychart-basic primarycolor="rgba(221,97,8,1)" accentcolor="rgba(177,6,58,1)" dataset='
[1, 10, 20, 35, 47, 65, 87, 100,
1, 10, 65, 20, 35, 47, 87, 100,
1, 10, 20, 47, 65, 87, 35, 100,
1, 10, 20, 100, 35, 47, 65, 87,
1, 20, 35, 10, 47, 65, 87, 100,
47, 65, 87, 1, 10, 20, 35, 100]'
labels='
["5.9.2016, 22:00:00", "5.9.2016, 23:00:00", "6.9.2016, 00:00:00", "6.9.2016, 01:00:00", "6.9.2016, 02:00:00", "6.9.2016, 03:00:00", "6.9.2016, 04:00:00", "6.9.2016, 05:00:00",
"6.9.2016, 06:00:00", "6.9.2016, 07:00:00", "6.9.2016, 08:00:00", "6.9.2016, 09:00:00", "6.9.2016, 10:00:00", "6.9.2016, 11:00:00", "6.9.2016, 12:00:00", "6.9.2016, 13:00:00",
"6.9.2016, 14:00:00", "6.9.2016, 15:00:00", "6.9.2016, 16:00:00", "6.9.2016, 17:00:00", "6.9.2016, 18:00:00", "6.9.2016, 19:00:00", "6.9.2016, 20:00:00", "6.9.2016, 21:00:00",
"6.9.2016, 22:00:00", "6.9.2016, 23:00:00", "7.9.2016, 00:00:00", "7.9.2016, 01:00:00", "7.9.2016, 02:00:00", "7.9.2016, 03:00:00", "7.9.2016, 04:00:00", "7.9.2016, 05:00:00",
"7.9.2016, 06:00:00", "7.9.2016, 07:00:00", "7.9.2016, 08:00:00", "7.9.2016, 09:00:00", "7.9.2016, 10:00:00", "7.9.2016, 11:00:00", "7.9.2016, 12:00:00", "7.9.2016, 13:00:00",
"7.9.2016, 14:00:00", "7.9.2016, 15:00:00", "7.9.2016, 16:00:00", "7.9.2016, 17:00:00", "7.9.2016, 18:00:00", "7.9.2016, 19:00:00", "7.9.2016, 20:00:00", "7.9.2016, 21:00:00"]'></activitychart-basic> -->
</template>
</demo-snippet>
</div>
Expand Down