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 2 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
29 changes: 29 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,35 @@ <h2 id="Configuration_Options">Configuration Options</h2>
</td>
</tr>

<tr>
<td>tooltipStyle</td>
<td>Object</td>
<td>{<br>
content&nbsp;:<br>{
Copy link
Contributor

Choose a reason for hiding this comment

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

Do we really need No-break spaces here?

Copy link
Member

Choose a reason for hiding this comment

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

@p-a Better use a 

 block here.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Done!

padding&nbsp;: '10px',
border&nbsp;: '1px solid #4d4d4d',
color&nbsp;: '#1a1a1a',
background&nbsp;: 'rgba(255,255,255,0.7)',
borderRadius&nbsp;: '2px',
boxShadow&nbsp;: '5px 5px 10px rgba(128,128,128,0.5)'
},<br>
line&nbsp;:<br>{
height&nbsp;: '40px',
width&nbsp;: '0',
borderLeft&nbsp;: '1px solid #4d4d4d'
},<br>
dot&nbsp;:<br>{
height&nbsp;: '0',
width&nbsp;: '0',
border&nbsp;: '5px solid #4d4d4d',
borderRadius&nbsp;: '5px'
}<br>}
</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
132 changes: 132 additions & 0 deletions examples/graph3d/13_tooltip_styling.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,132 @@
<!doctype html>
Copy link
Contributor

Choose a reason for hiding this comment

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

This example is basically just a copy of this one. Maybe it is better to adapt the other example for such a small change. What do you think?

Copy link
Member

Choose a reason for hiding this comment

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

I think so too. Feel free to adopt the existing example to your needs.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

ok. removed "my" example and altered the original a bit

<html>
<head>
<title>Graph 3D tooltips</title>

<style>
body {font: 10pt arial;}
div#info {
width : 600px;
text-align: center;
margin-top: 2em;
font-size : 1.2em;
}
</style>

<script type="text/javascript" src="../../dist/vis.js"></script>

<script type="text/javascript">
var data = null;
var graph = null;

function custom(x, y) {
return (-Math.sin(x/Math.PI) * Math.cos(y/Math.PI) * 10 + 10);
}

// Called when the Visualization API is loaded.
function drawVisualization() {
var style = document.getElementById('style').value;
var withValue = ['bar-color', 'bar-size', 'dot-size', 'dot-color'].indexOf(style) != -1;

// Create and populate a data table.
data = new vis.DataSet();
var extra_content = [
'Arbitrary information',
'You can access data from the point source object',
'Tooltip example content',
];

// create some nice looking data with sin/cos
var steps = 5; // number of datapoints will be steps*steps
var axisMax = 10;
var axisStep = axisMax / steps;
for (var x = 0; x <= axisMax; x+=axisStep) {
for (var y = 0; y <= axisMax; y+=axisStep) {
var z = custom(x,y);
if (withValue) {
var value = (y - x);
data.add({x:x, y:y, z: z, style:value, extra: extra_content[(x*y) % extra_content.length]});
}
else {
data.add({x:x, y:y, z: z, extra: extra_content[(x*y) % extra_content.length]});
}
}
}

// specify options
var options = {
width: '600px',
height: '600px',
style: style,
showPerspective: true,
showLegend: true,
showGrid: true,
showShadow: false,

// Option tooltip can be true, false, or a function returning a string with HTML contents
//tooltip: true,
Copy link
Contributor

Choose a reason for hiding this comment

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

Remove tooltip: true,

Copy link
Contributor Author

Choose a reason for hiding this comment

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

done!

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;
},

tooltipStyle: {
content: {
background : 'rgba(255,200,230,1.0)',
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
};

var camera = graph ? graph.getCameraPosition() : null;

// create our graph
var container = document.getElementById('mygraph');
graph = new vis.Graph3d(container, data, options);

if (camera) graph.setCameraPosition(camera); // restore camera position

document.getElementById('style').onchange = drawVisualization;
}
</script>
<script src="../googleAnalytics.js"></script>
Copy link
Contributor

Choose a reason for hiding this comment

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

As far as I know, we don't want googleAnalytics anymore (reference). Can you remove it?

Copy link
Member

Choose a reason for hiding this comment

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

Yes please remove the analytics.

Copy link
Contributor Author

@p-a p-a Feb 27, 2017 •
edited
Loading

Choose a reason for hiding this comment

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

Sorry, this was probably due to me branching of master initially... But this file is now removed altogether.

</head>

<body onload="drawVisualization()">

<p>
<label for="style"> Style:
<select id="style">
<option value="bar">bar</option>
<option value="bar-color">bar-color</option>
<option value="bar-size">bar-size</option>

<option value="dot">dot</option>
<option value="dot-line">dot-line</option>
<option value="dot-color">dot-color</option>
<option value="dot-size">dot-size</option>

<option value="grid">grid</option>
<option value="line">line</option>
<option value="surface">surface</option>
</select>
</label>
</p>

<div id="mygraph"></div>

<div id="info">Hover the mouse cursor over the graph to see tooltips.</div>

</body>
</html>
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
17 changes: 15 additions & 2 deletions lib/graph3d/Settings.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,7 @@ var OPTIONKEYS = [
'axisColor',
'gridColor',
'xCenter',
'yCenter'
'yCenter',
];


Expand Down Expand Up @@ -250,6 +250,15 @@ function setOptions(options, dst) {
setSpecialSettings(options, dst);
}

/**
* Merge fields from src to dst
*/
function mergeFields(src, dst, fields) {
Copy link
Contributor

Choose a reason for hiding this comment

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

I think something like this already exists in the utils here.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Done!. Used the util's methods instead

for (var i = 0, len = fields.length; i < len; i++) {
var key = fields[i];
dst[key] = Object.assign({}, dst[key], src[key]);
}
}

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

if (src.tooltipStyle !== undefined) {
dst.tooltipStyle = dst.tooltipStyle || {};
mergeFields(src.tooltipStyle, dst.tooltipStyle, ['content', 'line', 'dot']);
}
}

/**
* Set the value of setting 'showLegend'
Expand Down