Browse Source

Graph3d tooltip styling (#2780)

* styling support for graph3d tooltips

* styling support for graph3d tooltips

* graph3d styling example, deleted new example and altered the original

* graph3d tooltip styling, documentation

* graph3d tooltip styling, use the util module's method for merging objects
dependencies
p-a 7 years ago
committed by yotamberk
parent
commit
a9e14d33d4
4 changed files with 80 additions and 19 deletions
  1. +32
    -0
      docs/graph3d/index.html
  2. +15
    -1
      examples/graph3d/11_tooltips.html
  3. +27
    -14
      lib/graph3d/Graph3d.js
  4. +6
    -4
      lib/graph3d/Settings.js

+ 32
- 0
docs/graph3d/index.html View File

@ -498,6 +498,38 @@ var options = {
</td> </td>
</tr> </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> <tr>
<td>valueMax</td> <td>valueMax</td>
<td>number</td> <td>number</td>

+ 15
- 1
examples/graph3d/11_tooltips.html View File

@ -64,12 +64,26 @@
showShadow: false, showShadow: false,
// Option tooltip can be true, false, or a function returning a string with HTML contents // Option tooltip can be true, false, or a function returning a string with HTML contents
//tooltip: true,
tooltip: function (point) { tooltip: function (point) {
// parameter point contains properties x, y, z, and data // parameter point contains properties x, y, z, and data
// data is the original object passed to the point constructor // data is the original object passed to the point constructor
return 'value: <b>' + point.z + '</b><br>' + point.data.extra; 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, keepAspectRatio: true,
verticalRatio: 0.5 verticalRatio: 0.5

+ 27
- 14
lib/graph3d/Graph3d.js View File

@ -67,6 +67,29 @@ var DEFAULTS = {
style : Graph3d.STYLE.DOT, style : Graph3d.STYLE.DOT,
tooltip : false, tooltip : false,
tooltipStyle : {
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 showLegend : autoByDefault, // determined by graph style
backgroundColor : autoByDefault, backgroundColor : autoByDefault,
@ -2314,26 +2337,16 @@ Graph3d.prototype._showTooltip = function (dataPoint) {
if (!this.tooltip) { if (!this.tooltip) {
content = document.createElement('div'); content = document.createElement('div');
Object.assign(content.style, {}, this.tooltipStyle.content);
content.style.position = 'absolute'; 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'); line = document.createElement('div');
Object.assign(line.style, {}, this.tooltipStyle.line);
line.style.position = 'absolute'; line.style.position = 'absolute';
line.style.height = '40px';
line.style.width = '0';
line.style.borderLeft = '1px solid #4d4d4d';
dot = document.createElement('div'); dot = document.createElement('div');
Object.assign(dot.style, {}, this.tooltipStyle.dot);
dot.style.position = 'absolute'; dot.style.position = 'absolute';
dot.style.height = '0';
dot.style.width = '0';
dot.style.border = '5px solid #4d4d4d';
dot.style.borderRadius = '5px';
this.tooltip = { this.tooltip = {
dataPoint: null, dataPoint: null,

+ 6
- 4
lib/graph3d/Settings.js View File

@ -2,6 +2,7 @@
// This modules handles the options for Graph3d. // This modules handles the options for Graph3d.
// //
//////////////////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////////////////////
var util = require('../util');
var Camera = require('./Camera'); var Camera = require('./Camera');
var Point3d = require('./Point3d'); var Point3d = require('./Point3d');
@ -69,7 +70,7 @@ var OPTIONKEYS = [
'axisColor', 'axisColor',
'gridColor', 'gridColor',
'xCenter', 'xCenter',
'yCenter'
'yCenter',
]; ];
@ -115,7 +116,6 @@ function isEmpty(obj) {
} }
/** /**
* Make first letter of parameter upper case. * Make first letter of parameter upper case.
* *
@ -241,7 +241,6 @@ function setOptions(options, dst) {
throw new Error('DEFAULTS not set for module Settings'); throw new Error('DEFAULTS not set for module Settings');
} }
// Handle the parameters which can be simply copied over // Handle the parameters which can be simply copied over
safeCopy(options, dst, OPTIONKEYS); safeCopy(options, dst, OPTIONKEYS);
safeCopy(options, dst, PREFIXEDOPTIONKEYS, 'default'); safeCopy(options, dst, PREFIXEDOPTIONKEYS, 'default');
@ -250,7 +249,6 @@ function setOptions(options, dst) {
setSpecialSettings(options, dst); setSpecialSettings(options, dst);
} }
/** /**
* Special handling for certain parameters * Special handling for certain parameters
* *
@ -274,6 +272,10 @@ function setSpecialSettings(src, dst) {
if (src.onclick != undefined) { if (src.onclick != undefined) {
dst.onclick_callback = src.onclick; dst.onclick_callback = src.onclick;
} }
if (src.tooltipStyle !== undefined) {
util.selectiveDeepExtend(['tooltipStyle'], dst, src);
}
} }

Loading…
Cancel
Save