소스 검색

HUE-325. Add ability for HueChart.Box charts to show DynamicTips

Marcus McLaughlin 15 년 전
부모
커밋
2cf0597526
2개의 변경된 파일81개의 추가작업 그리고 6개의 파일을 삭제
  1. 39 1
      desktop/core/static/css/shared.css
  2. 42 5
      desktop/core/static/js/Source/CCS/HueChart.Box.js

+ 39 - 1
desktop/core/static/css/shared.css

@@ -633,7 +633,45 @@ Takes a multi-select box and makes it so you can click to move elements from a s
 	-webkit-box-shadow: 0px -1px 3px #aaa;
 	-moz-box-shadow: 0px -1px 3px #aaa;
 }
-/* -----------------------------------------------------------------------
+
+.huechart .tip-wrap {
+        width: 139px;
+        z-index: 13000;
+}
+
+.huechart .tip-title {
+        -moz-border-radius-topleft: 5px;
+        -moz-border-radius-topright: 5px;
+        font-weight: bold;
+        font-size: 11px;
+        margin: 0;
+        color: #9FD4FF;
+        padding: 4px 8px 0px;
+        background: black;
+        opacity: .8;
+        filter: alpha(opacity=80);
+}
+
+.huechart .tip-text {
+        -moz-border-radius-bottomleft: 5px;
+        -moz-border-radius-bottomright: 5px;
+        font-size: 11px;
+        padding: 0px 8px 8px;
+        background: black;
+        color: white;
+        opacity: .8;
+        filter: alpha(opacity=80);
+        text-align: center;
+}
+
+.huechart .tip-series-color {
+        width: 3px;
+        height: 3px;
+        border: 1px solid white;
+        padding: 2px;
+        display: inline-block;
+        margin-right: 5px;
+}/* -----------------------------------------------------------------------
 
 
  Blueprint CSS Framework 0.9

+ 42 - 5
desktop/core/static/js/Source/CCS/HueChart.Box.js

@@ -17,6 +17,7 @@ requires:
 - Core/Options
 - ccs-shared/Number.Files
 - ccs-shared/HueChart
+- More/DynamicTips
 
 provides: [ HueChart.Box ]
 
@@ -50,7 +51,8 @@ HueChart.Box = new Class({
                 selectColor: "rgba(255, 128, 128, .4)", //the color that should be used to fill selections in this chart
                 selectedIndicatorColor: "black", //color that should be used to show the position of the selected index, when using the position indicator
                 highlightedIndicatorColor: "rgba(255, 255, 255, .5)",
-                yType: 'string' //the type of value that is being graphed on the y-axis
+                yType: 'string', //the type of value that is being graphed on the y-axis,
+                showPointValue: false //show the value at the point when moused over
                 /*
                 onPointMouseOut: function that should be run when the mouse is moved out of the chart
                 onPointMouseOver: function that should be run when the mouse is moved over a datapoint, takes the dataPoint and index as arguments
@@ -76,6 +78,15 @@ HueChart.Box = new Class({
                         //Otherwise sort by the x property.
                         this.getData(true).sortByProperty(this.options.xProperty);
                 }
+                //Create tip to show if showPointValue is true.
+                if (this.options.showPointValue) {
+                        this.tip = new DynamicTips(this.element, {
+                                className: 'huechart tip-wrap',
+                                title: $lambda("Title"),
+                                text: $lambda("Text")
+                        });
+                        this.addEvent('seriesMouseOver', this.updatePointValue);
+                }
                 //When the setupChart event is fired, the full ProtoVis visualization is being set up, in preparation for render.
                 //The addGraph function is responsible for adding the actual representation of the data, be that a group of lines, or a group of area graphs.
                 this.addEvent('setupChart', function(vis) {
@@ -238,11 +249,12 @@ HueChart.Box = new Class({
         getDataSeriesFromPointAndY: function(dataPoint, y) {
                 var yRange = this.getYRange(y);
                 //Find closest y-values
-                this.options.series.each(function(item) {
+                for (var i = 0; i < this.options.series.length; i++) {
+                        var item = this.options.series[i];
                         if(yRange[0] < dataPoint[item] && dataPoint[item] < yRange[1]) {
                                 return {'name': item, 'value': dataPoint[item]};
                         }  
-                });
+                }
                 return null;
         },
          
@@ -255,6 +267,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);
                         }
                 }.bind(this);
@@ -336,7 +349,24 @@ HueChart.Box = new Class({
                 if (point > high) return high;
                 return point;
         },
-        
+
+        updatePointValue: function(series) {
+                if (series != null) {
+                        var tipColor = new Element('div', {'class': 'tip-series-color'});
+                        var tipBlock = new Element('div', {'class': 'tip-block'});
+                        tipBlock.set('text', series.name);
+                        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() : series.value);
+                        var tipElem = this.tip.toElement();
+                        if(!tipElem.getParent() || !document.body.hasChild(tipElem))tipElem.dispose();
+                        this.tip.show();
+                } else {
+                        this.tip.hide();
+                }
+        }, 
+
         //Returns highlighted data index
         getHighlightedIndex: function() {
                 return this.highlighted_index;
@@ -345,8 +375,15 @@ HueChart.Box = new Class({
         //Sets higlighted data index
         setHighlightedIndex: function(index) {
                 this.highlighted_index = index;
-        }
+        },
 
+        //Do any cleanup necessary of chart
+        destroy: function() {
+                if(this.tip) {
+                         this.tip.toElement().destroy();
+                         delete this.tip;
+                }
+        } 
 });
 })();