mirror/librenms-librenms
1
0
Fork 0
mirror of https://github.com/librenms/librenms.git synced 2024-10-07 16:52:45 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

New attribute textPosition for areas and plots accepting "right", "left", "center", "top" or "inner" value

Browse Source
This commit is contained in:
Vincent Broute
2013-07-04 22:47:20 +02:00
parent c7440b767c
commit dbd0c08e1e
1 changed files with 62 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
js/jquery.mapael.js
View File

@ -30,7 +30,9 @@
, plotParams = {} , plotParams = {}
, textElem = {} , textElem = {}
, coords = {} , coords = {}
, resizeTO = 0; , resizeTO = 0
, textX = 0
, textY = 0;
options.map.tooltip.css && $tooltip.css(options.map.tooltip.css); options.map.tooltip.css && $tooltip.css(options.map.tooltip.css);
paper.setViewBox(0, 0, mapConf.width, mapConf.height, false); paper.setViewBox(0, 0, mapConf.width, mapConf.height, false);
@ -50,7 +52,6 @@
} }
mapElem = paper.path(mapConf.elems[id]).attr(areaParams.attrs); mapElem = paper.path(mapConf.elems[id]).attr(areaParams.attrs);
mapElem.elemType = 'area';
areaParams.tooltip && areaParams.tooltip.content && $.fn.mapael.setTooltip(mapElem, $tooltip, areaParams.tooltip.content); areaParams.tooltip && areaParams.tooltip.content && $.fn.mapael.setTooltip(mapElem, $tooltip, areaParams.tooltip.content);
$.fn.mapael.paramHover(mapElem, areaParams.attrs, areaParams.attrsHover); $.fn.mapael.paramHover(mapElem, areaParams.attrs, areaParams.attrsHover);
@ -58,11 +59,34 @@
// Set a text label in the area // Set a text label in the area
if (areaParams.text) { if (areaParams.text) {
bbox = mapElem.getBBox(); bbox = mapElem.getBBox();
textElem = paper.text( switch (areaParams.textPosition) {
(bbox.x + bbox.x2) / 2 case 'bottom' :
, (bbox.y + bbox.y2) / 2 textX = (bbox.x + bbox.x2) / 2;
, areaParams.text textY = bbox.y2 + 15;
).attr(areaParams.textAttrs); areaParams.textAttrs['text-anchor'] = "middle";
break;
case 'top' :
textX = (bbox.x + bbox.x2) / 2;
textY = bbox.y - 15;
areaParams.textAttrs['text-anchor'] = "middle";
break;
case 'left' :
textX = bbox.x - 10;
textY = (bbox.y + bbox.y2) / 2;
areaParams.textAttrs['text-anchor'] = "end";
break;
case 'left' :
textX = bbox.x2 + 10;
textY = (bbox.y + bbox.y2) / 2;
areaParams.textAttrs['text-anchor'] = "start";
break;
default : // 'inner' position
textX = (bbox.x + bbox.x2) / 2;
textY = (bbox.y + bbox.y2) / 2;
areaParams.textAttrs['text-anchor'] = "middle";
}
textElem = paper.text(textX, textY, areaParams.text).attr(areaParams.textAttrs);
areaParams.tooltip && areaParams.tooltip.content && $.fn.mapael.setTooltip(textElem, $tooltip, areaParams.tooltip.content); areaParams.tooltip && areaParams.tooltip.content && $.fn.mapael.setTooltip(textElem, $tooltip, areaParams.tooltip.content);
areaParams.attrs.href && (textElem.attr({href: areaParams.attrs.href})); areaParams.attrs.href && (textElem.attr({href: areaParams.attrs.href}));
@ -107,7 +131,6 @@
throw "Unknown plot type '" + plotParams.type + "'"; throw "Unknown plot type '" + plotParams.type + "'";
} }
mapElem.elemType = 'plot';
mapElem.attr(plotParams.attrs); mapElem.attr(plotParams.attrs);
plotParams.tooltip && plotParams.tooltip.content && $.fn.mapael.setTooltip(mapElem, $tooltip, plotParams.tooltip.content); plotParams.tooltip && plotParams.tooltip.content && $.fn.mapael.setTooltip(mapElem, $tooltip, plotParams.tooltip.content);
@ -115,11 +138,34 @@
// Set a text label next to the plot // Set a text label next to the plot
if (plotParams.text) { if (plotParams.text) {
textElem = (mapElem.type == "circle") ?
paper.text(coords.x + (plotParams.size / 2) + 10, coords.y, plotParams.text) switch (plotParams.textPosition) {
: paper.text(coords.x + plotParams.size + 10, coords.y, plotParams.text); case 'bottom' :
textX = coords.x;
textElem.attr(plotParams.textAttrs); textY = coords.y + (plotParams.size / 2) + 10;
plotParams.textAttrs['text-anchor'] = "center";
break;
case 'top' :
textX = coords.x;
textY = coords.y - (plotParams.size / 2) - 10;
plotParams.textAttrs['text-anchor'] = "center";
break;
case 'inner' :
textX = coords.x;
textY = coords.y;
plotParams.textAttrs['text-anchor'] = "center";
break;
case 'left' :
textX = coords.x - (plotParams.size / 2) - 10;
textY = coords.y;
plotParams.textAttrs['text-anchor'] = "end";
break;
default : // 'right' position
textX = coords.x + (plotParams.size / 2) + 10;
textY = coords.y;
plotParams.textAttrs['text-anchor'] = "start";
}
textElem = paper.text(textX, textY, plotParams.text).attr(plotParams.textAttrs);
plotParams.tooltip && plotParams.tooltip.content && $.fn.mapael.setTooltip(textElem, $tooltip, plotParams.tooltip.content); plotParams.tooltip && plotParams.tooltip.content && $.fn.mapael.setTooltip(textElem, $tooltip, plotParams.tooltip.content);
plotParams.attrs.href && (textElem.attr({"href": plotParams.attrs.href})); plotParams.attrs.href && (textElem.attr({"href": plotParams.attrs.href}));
@ -298,9 +344,7 @@
, legendParams.slices[i].size , legendParams.slices[i].size
, legendParams.slices[i].size , legendParams.slices[i].size
).attr(legendParams.slices[i].attrs); ).attr(legendParams.slices[i].attrs);
} }
elem.elemType = 'plot';
label = paper.text( label = paper.text(
marginLeft + legendParams.slices[i].size + marginLeftLabel marginLeft + legendParams.slices[i].size + marginLeftLabel
@ -440,10 +484,10 @@
fill: "#f38a03" fill: "#f38a03"
, animDuration : 300 , animDuration : 300
} }
, textPosition: 'inner'
, textAttrs: { , textAttrs: {
"font-size": 15 "font-size": 15
, fill:"#c7c7c7" , fill:"#c7c7c7"
, "text-anchor": "center"
} }
, textAttrsHover: { , textAttrsHover: {
fill:"#eaeaea" fill:"#eaeaea"
@ -463,10 +507,10 @@
"stroke-width": 3 "stroke-width": 3
, animDuration : 300 , animDuration : 300
} }
, textPosition: 'right'
, textAttrs: { , textAttrs: {
"font-size": 15 "font-size": 15
, fill:"#c7c7c7" , fill:"#c7c7c7"
, "text-anchor": "start"
}, },
textAttrsHover: { textAttrsHover: {
fill:"#eaeaea" fill:"#eaeaea"