Browse Source

HUE-429. Make HueChart.Box's series events set all applicable series as arguments.

Marcus McLaughlin 15 years ago
parent
commit
0469d6ffe4
2 changed files with 35 additions and 17 deletions
  1. 12 3
      desktop/core/static/css/shared.css
  2. 23 14
      desktop/core/static/js/Source/Hue/HueChart.Box.js

+ 12 - 3
desktop/core/static/css/shared.css

@@ -109,13 +109,17 @@ div.solid-win div.bottom_lr {
 	font-weight: bold;
 	font-size: 11px;
 	margin: 0;
-	color: #9FD4FF;
 	padding: 4px 8px 0px;
 	background: black;
 	opacity: .8;
 	filter: alpha(opacity=80);
 }
 
+.huechart .tip-series-name {
+	color: #9FD4FF;
+	font-weight: bold;
+}
+
 .huechart .tip-text {
 	-moz-border-radius-bottomleft: 5px;
 	-moz-border-radius-bottomright: 5px;
@@ -125,7 +129,6 @@ div.solid-win div.bottom_lr {
 	color: white;
 	opacity: .8;
 	filter: alpha(opacity=80);
-	text-align: center;
 }
 
 .huechart .tip-series-color {
@@ -133,6 +136,12 @@ div.solid-win div.bottom_lr {
 	height: 3px;
 	border: 1px solid white;
 	padding: 2px;
+	top: 4px;
 	display: inline-block;
 	margin-right: 5px;
-}
+	float: left;
+}
+
+.huechart .tip-series-value {
+	text-align: center;
+}

+ 23 - 14
desktop/core/static/js/Source/Hue/HueChart.Box.js

@@ -351,14 +351,15 @@ HueChart.Box = new Class({
 
 		getDataSeriesFromPointAndY: function(dataPoint, y) {
 				var yRange = this.getYRange(y);
+				var seriesList = [];
 				//Find closest y-values
 				for (var i = 0; i < this.series.length; i++) {
 						var item = this.series[i];
 						if(yRange[0] < dataPoint[item] && dataPoint[item] < yRange[1]) {
-								return {'name': item, 'value': dataPoint[item]};
-						}  
+								seriesList.push({'name': item, 'value': dataPoint[item]});
+						}
 				}
-				return null;
+				return seriesList;
 		},
 		 
 		//Add handlers to detect mouse events.
@@ -370,8 +371,7 @@ HueChart.Box = new Class({
 								var dataPoint = this.getData(true).getObjects()[dataIndex];
 								this.fireEvent('point' + eventName.capitalize(), [ dataPoint, dataIndex ]);
 								var dataSeries = this.getDataSeriesFromPointAndY(dataPoint, position.y);
-
-								this.fireEvent('series' + eventName.capitalize(), dataSeries);
+								this.fireEvent('series' + eventName.capitalize(), [dataSeries]);
 						}
 				}.bind(this);
 				//Create functions which handle the graph specific aspects of the event and call the event arguments.
@@ -538,18 +538,27 @@ HueChart.Box = new Class({
 		},
 		
 		//Updates the display of the currently visible tip
-		updatePointValue: function(series) {
-				if (series != null) {
+		updatePointValue: function(seriesList) {
+				if (seriesList.length > 0) {
+					var tipList = new Element('div');
+					seriesList.each(function(series) {
+						var tipBlock = new Element('div', {'class': 'tip-series'});
 						var tipColor = new Element('div', {'class': 'tip-series-color'});
-						var tipBlock = new Element('div', {'class': 'tip-block'});
-						tipBlock.set('text', series.name);
+						var tipText = new Element('div', {'class': 'tip-series-value'});
+						var tipSeriesName = new Element('span', {'class': 'tip-series-name'});
+						tipSeriesName.set('text', series.name);
+						tipSeriesName.inject(tipBlock, 'top');
 						tipColor.inject(tipBlock, 'top');
 						tipColor.setStyle('background-color', this.getColor(series.name));
-						this.tip.setTitle(tipBlock);
-						this.tip.setText(this.options.yType == 'bytes' ? series.value.toInt().convertFileSize() : String(series.value));
-						var tipElem = this.tip.toElement();
-						if(!tipElem.getParent() || !document.body.hasChild(tipElem))tipElem.dispose();
-						this.tip.show(this.element, true);
+						tipText.set('text', this.options.yType == 'bytes' ? series.value.toInt().convertFileSize() : String(series.value));
+						tipText.inject(tipBlock, 'bottom');
+						tipBlock.inject(tipList, 'bottom');
+					}.bind(this));
+					this.tip.setTitle('');
+					this.tip.setText(tipList);
+					var tipElem = this.tip.toElement();
+					if(!tipElem.getParent() || !document.body.hasChild(tipElem)) tipElem.dispose();
+					this.tip.show(this.element, true);
 				} else {
 						this.tip.hide();
 				}