Skip to content
This repository was archived by the owner on Jul 29, 2019. It is now read-only.

Graph3d tooltip styling #2780

Merged
merged 5 commits into from
Mar 9, 2017
Merged

Graph3d tooltip styling #2780

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
7b4b776
styling support for graph3d tooltips
Feb 23, 2017
d4a8e87
styling support for graph3d tooltips
Feb 23, 2017
a84cbca
graph3d styling example, deleted new example and altered the original
Feb 27, 2017
8203653
graph3d tooltip styling, documentation
Feb 27, 2017
31078ae
graph3d tooltip styling, use the util module's method for merging obj…
Feb 27, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 32 additions & 0 deletions docs/graph3d/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -498,6 +498,38 @@ <h2 id="Configuration_Options">Configuration Options</h2>
</td>
</tr>

<tr>
<td>tooltipStyle</td>
<td>Object</td>
<td>
<pre class="prettyprint lang-js">
{
content: {
padding: '10px',
border: '1px solid #4d4d4d',
color: '#1a1a1a',
background: 'rgba(255,255,255,0.7)',
borderRadius: '2px',
boxShadow: '5px 5px 10px rgba(128,128,128,0.5)'
},
line: {
height: '40px',
width: '0',
borderLeft: '1px solid #4d4d4d'
},
dot: {
height: '0',
width: '0',
border: '5px solid #4d4d4d',
borderRadius: '5px'
}
}</pre>
</td>
<td>Tooltip style properties.
Provided properties will be merged with the default object.
</td>
</tr>

<tr>
<td>valueMax</td>
<td>number</td>
Expand Down
16 changes: 15 additions & 1 deletion examples/graph3d/11_tooltips.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,12 +64,26 @@
showShadow: false,

// Option tooltip can be true, false, or a function returning a string with HTML contents
//tooltip: true,
tooltip: function (point) {
// parameter point contains properties x, y, z, and data
// data is the original object passed to the point constructor
return 'value: <b>' + point.z + '</b><br>' + point.data.extra;
},

// Tooltip default styling can be overridden
tooltipStyle: {
content: {
background : 'rgba(255, 255, 255, 0.7)',
padding : '10px',
borderRadius : '10px'
},
line: {
borderLeft : '1px dotted rgba(0, 0, 0, 0.5)'
},
dot: {
border : '5px solid rgba(0, 0, 0, 0.5)'
}
},

keepAspectRatio: true,
verticalRatio: 0.5
Expand Down
41 changes: 27 additions & 14 deletions lib/graph3d/Graph3d.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,6 +67,29 @@ var DEFAULTS = {

style : Graph3d.STYLE.DOT,
tooltip : false,

tooltipStyle : {
Copy link
Member

Choose a reason for hiding this comment

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

I haven't tested it yet. Please make sure the existing tooltips are basically not changed, or we have to consider this as a breaking change.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Tested all combos, if no tooltipStyle is provided the tooltips are not changed and are exactly as before.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

@mojoaxel changes ok?

content : {
padding : '10px',
border : '1px solid #4d4d4d',
color : '#1a1a1a',
background : 'rgba(255,255,255,0.7)',
borderRadius : '2px',
boxShadow : '5px 5px 10px rgba(128,128,128,0.5)'
},
line : {
height : '40px',
width : '0',
borderLeft : '1px solid #4d4d4d'
},
dot : {
height : '0',
width : '0',
border : '5px solid #4d4d4d',
borderRadius : '5px'
}
},

showLegend : autoByDefault, // determined by graph style
backgroundColor : autoByDefault,

Expand Down Expand Up @@ -2289,26 +2312,16 @@ Graph3d.prototype._showTooltip = function (dataPoint) {

if (!this.tooltip) {
content = document.createElement('div');
Object.assign(content.style, {}, this.tooltipStyle.content);
content.style.position = 'absolute';
content.style.padding = '10px';
content.style.border = '1px solid #4d4d4d';
content.style.color = '#1a1a1a';
content.style.background = 'rgba(255,255,255,0.7)';
content.style.borderRadius = '2px';
content.style.boxShadow = '5px 5px 10px rgba(128,128,128,0.5)';


line = document.createElement('div');
Object.assign(line.style, {}, this.tooltipStyle.line);
line.style.position = 'absolute';
line.style.height = '40px';
line.style.width = '0';
line.style.borderLeft = '1px solid #4d4d4d';

dot = document.createElement('div');
Object.assign(dot.style, {}, this.tooltipStyle.dot);
dot.style.position = 'absolute';
dot.style.height = '0';
dot.style.width = '0';
dot.style.border = '5px solid #4d4d4d';
dot.style.borderRadius = '5px';

this.tooltip = {
dataPoint: null,
Expand Down
10 changes: 6 additions & 4 deletions lib/graph3d/Settings.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
// This modules handles the options for Graph3d.
//
////////////////////////////////////////////////////////////////////////////////
var util = require('../util');
var Camera = require('./Camera');
var Point3d = require('./Point3d');

Expand Down Expand Up @@ -69,7 +70,7 @@ var OPTIONKEYS = [
'axisColor',
'gridColor',
'xCenter',
'yCenter'
'yCenter',
];


Expand Down Expand Up @@ -115,7 +116,6 @@ function isEmpty(obj) {
}



/**
* Make first letter of parameter upper case.
*
Expand Down Expand Up @@ -241,7 +241,6 @@ function setOptions(options, dst) {
throw new Error('DEFAULTS not set for module Settings');
}


// Handle the parameters which can be simply copied over
safeCopy(options, dst, OPTIONKEYS);
safeCopy(options, dst, PREFIXEDOPTIONKEYS, 'default');
Expand All @@ -250,7 +249,6 @@ function setOptions(options, dst) {
setSpecialSettings(options, dst);
}


/**
* Special handling for certain parameters
*
Expand All @@ -274,6 +272,10 @@ function setSpecialSettings(src, dst) {
if (src.onclick != undefined) {
dst.onclick_callback = src.onclick;
}

if (src.tooltipStyle !== undefined) {
util.selectiveDeepExtend(['tooltipStyle'], dst, src);
}
}


Expand Down