From a9e14d33d4412d9c27fa21f206a96f262fa65a5f Mon Sep 17 00:00:00 2001 From: p-a Date: Thu, 9 Mar 2017 21:16:26 +0100 Subject: [PATCH] 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 --- docs/graph3d/index.html | 32 ++++++++++++++++++++++++ examples/graph3d/11_tooltips.html | 16 +++++++++++- lib/graph3d/Graph3d.js | 41 ++++++++++++++++++++----------- lib/graph3d/Settings.js | 10 +++++--- 4 files changed, 80 insertions(+), 19 deletions(-) diff --git a/docs/graph3d/index.html b/docs/graph3d/index.html index 1a7223d4..85829ad1 100644 --- a/docs/graph3d/index.html +++ b/docs/graph3d/index.html @@ -498,6 +498,38 @@ var options = { + + tooltipStyle + Object + +
+{ 
+  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'
+  }
+}
+ + Tooltip style properties. + Provided properties will be merged with the default object. + + + valueMax number diff --git a/examples/graph3d/11_tooltips.html b/examples/graph3d/11_tooltips.html index 67d84443..d2821071 100644 --- a/examples/graph3d/11_tooltips.html +++ b/examples/graph3d/11_tooltips.html @@ -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: ' + point.z + '
' + 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 diff --git a/lib/graph3d/Graph3d.js b/lib/graph3d/Graph3d.js index 7a1884cc..e24ed2e4 100755 --- a/lib/graph3d/Graph3d.js +++ b/lib/graph3d/Graph3d.js @@ -67,6 +67,29 @@ var DEFAULTS = { style : Graph3d.STYLE.DOT, 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 backgroundColor : autoByDefault, @@ -2314,26 +2337,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, diff --git a/lib/graph3d/Settings.js b/lib/graph3d/Settings.js index 75566748..484a40b0 100755 --- a/lib/graph3d/Settings.js +++ b/lib/graph3d/Settings.js @@ -2,6 +2,7 @@ // This modules handles the options for Graph3d. // //////////////////////////////////////////////////////////////////////////////// +var util = require('../util'); var Camera = require('./Camera'); var Point3d = require('./Point3d'); @@ -69,7 +70,7 @@ var OPTIONKEYS = [ 'axisColor', 'gridColor', 'xCenter', - 'yCenter' + 'yCenter', ]; @@ -115,7 +116,6 @@ function isEmpty(obj) { } - /** * Make first letter of parameter upper case. * @@ -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'); @@ -250,7 +249,6 @@ function setOptions(options, dst) { setSpecialSettings(options, dst); } - /** * Special handling for certain parameters * @@ -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); + } }