Skip to content

Commit

Permalink
Change orientation, improve label positioning
Browse files Browse the repository at this point in the history 
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.
  • Loading branch information
JE committed Jan 11, 2017
1 parent f37fe84 commit e4b408e
Show file tree
Hide file tree
Showing 2 changed files with 25 additions and 21 deletions.
40 changes: 22 additions & 18 deletions activitychart-basic.html
View file
Expand Up @@ -56,8 +56,8 @@
type: String,
value: '#F5E8BB',
},
/** Number of colored dots per row (opt, default 8) */
squaresPerRow: {
/** Number of colored dots per column (opt, default 8) */
squaresPerColumn: {
type: Number,
value: 8,
},
Expand Down Expand Up @@ -115,8 +115,8 @@
var datasetMin = Math.min(...dataset);
var datasetMax = Math.max(...dataset);

var svgWidth = this.squaresPerRow * this.squareSpacing,
svgHeight = Math.ceil(dataset.length / this.squaresPerRow) * this.squareSpacing;
var svgWidth = Math.ceil(dataset.length / this.squaresPerColumn) * this.squareSpacing,
svgHeight = this.squaresPerColumn * this.squareSpacing;

//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()
Expand Down Expand Up @@ -152,18 +152,22 @@
.text(d.y + ' at ' + d.x)
.style('font-size', '0.8em')
.attr('fill', 'black');

var labelWidth = labelText.node().getBBox().width;
var labelHeight = labelText.node().getBBox().height;

//this split is necessary because the position is set relative to the size of the text element
labelText
.attr('x', polyElement._spaceLabelHor(d, i, labelText.node().getBBox().width))
.attr('y', polyElement._spaceLabelVert(d, i));
.attr('x', polyElement._spaceLabelHor(d, i, labelWidth))
.attr('y', polyElement._spaceLabelVert(d, i, labelHeight));

//finish rect configuration that was appended previously
label.select('rect')
.attr('x', labelText.attr('x') - 3)
.attr('y', labelText.attr('y') - 11)
.attr('x', labelText.attr('x') - 1)
.attr('y', labelText.attr('y') - 0.7 * labelHeight) // 0.7 as factor because labelHeight is bigger than actual height of text
.attr('fill', 'white')
.attr('width', labelText.node().getBBox().width + 3)
.attr('height', labelText.node().getBBox().height);
.attr('width', labelWidth + 1) //ok, so that it doesn't become too short for the text because of the visual offset above
.attr('height', 0.8 * labelHeight);
},

_hideLabel: function (d, i) {
Expand All @@ -173,18 +177,18 @@
_spaceLabelHor: function(d, i, labelWidth) {
var x = this._spaceSquareHor(d, i);
//calculate the maximum x position possible so that the label won't be cut off on the edge of the SVG
var maxPosition = ((this.squareSpacing * (this.squaresPerRow - 1)) + this.squareWidth) - labelWidth;
var maxPosition = d3.select('svg').attr('width') - (this.squareSpacing - this.squareWidth) - labelWidth;

if(x > maxPosition) { // label would normally be "shown" outside the SVG space
x = maxPosition + 1;
x = maxPosition;
}
return x;
},

_spaceLabelVert: function(d, i) {
var y = this._spaceSquareVert(d, i) - 3;
if(y < 0) { // label would normally be "shown" outside the SVG space
y = this.squareSpacing * 1.5;
_spaceLabelVert: function(d, i, labelHeight) {
var y = this._spaceSquareVert(d, i) - 2;
if(y < 0) { // label would normally be "shown" just exactly outside the SVG space
y = this.squareWidth + 0.7 * labelHeight;
}
return y;
},
Expand All @@ -194,15 +198,15 @@
if (Polymer.dom(this).node.nodeName != "ACTIVITYCHART-BASIC") {
var polyElement = Polymer.dom(this).parentNode.parentNode.parentNode;
}
return polyElement.squareSpacing * (i % polyElement.squaresPerRow);
return polyElement.squareSpacing * (Math.floor(i / polyElement.squaresPerColumn));
},

_spaceSquareVert: function (d, i) {
var polyElement = this;
if (Polymer.dom(this).node.nodeName != "ACTIVITYCHART-BASIC") {
var polyElement = Polymer.dom(this).parentNode.parentNode.parentNode;
}
return polyElement.squareSpacing * (Math.floor(i / polyElement.squaresPerRow));
return polyElement.squareSpacing * (i % polyElement.squaresPerColumn);
},
/**
* Normalizes the data supplied by the API to work with Plotly
Expand Down
6 changes: 3 additions & 3 deletions demo/activitychart_basic_demo.html
View file
Expand Up @@ -20,8 +20,8 @@
<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-05T22:00:00.000Z&end_date=2016-10-31T22:00:00.000Z" squares-per-row="15"></activitychart-basic> -->
<activitychart-basic primarycolor="#4a148c" accentcolor="#ffcc80" dataset='
<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" squares-per-column="24"></activitychart-basic>
<!-- <activitychart-basic primarycolor="#4a148c" accentcolor="#ffcc80" 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,
Expand All @@ -34,7 +34,7 @@ <h3>basic activitychart demo (custom element)</h3>
"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>
"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

0 comments on commit e4b408e

Please sign in to comment.