[Ovirt-devel] [PATCH server] First round of (largely) cosmetic changes to flexchart.
Steve Linabery
slinabery at redhat.com
Fri May 15 21:49:38 UTC 2009
Missing are capitalization/formatting of data type & function labels,
as well as addressing the unit labels for the y-axis.
---
src/flexchart/flexchart.mxml | 4 +
src/flexchart/org/ovirt/Constants.as | 17 +++
src/flexchart/org/ovirt/charts/BarChart.as | 155 ++++++++++++++++--------
src/flexchart/org/ovirt/charts/HostChart.as | 42 ++++++-
src/flexchart/org/ovirt/data/DataSource.as | 1 -
src/flexchart/org/ovirt/elements/Scale.as | 9 +-
src/flexchart/org/ovirt/elements/SingleBar.as | 62 +++++++++-
src/flexchart/org/ovirt/elements/XAxisLabel.as | 2 +
8 files changed, 231 insertions(+), 61 deletions(-)
diff --git a/src/flexchart/flexchart.mxml b/src/flexchart/flexchart.mxml
index 7a86cd9..d4d097b 100644
--- a/src/flexchart/flexchart.mxml
+++ b/src/flexchart/flexchart.mxml
@@ -22,6 +22,9 @@
private function myInit():void {
+ Constants.setWidth(this.stage.stageWidth);
+ Constants.setHeight(this.stage.stageHeight);
+
var bus:ApplicationBus = ApplicationBus.instance();
mainChart.height = Constants.height;
mainChart.width = Constants.width;
@@ -57,6 +60,7 @@
}
private function zoomOutSeries(e:Event):void {
+ ApplicationBus.instance().mainChart.clearSelection();
expandHistory.end(); expandHistory.play();
contractResources.end(); contractResources.play();
hostChart.visible = false;
diff --git a/src/flexchart/org/ovirt/Constants.as b/src/flexchart/org/ovirt/Constants.as
index 14f6465..e3e3703 100644
--- a/src/flexchart/org/ovirt/Constants.as
+++ b/src/flexchart/org/ovirt/Constants.as
@@ -24,5 +24,22 @@ package org.ovirt {
public static var height:int = 297;
public static var barSpacing:int = 2;
public static var labelHeight:int = 20;
+ public static var summaryBarColor:String = "0x2875c1";
+ public static var summaryBarLitColor:String = "0x369aff";
+ public static var hostsBarColor:String = "0x9fd100";
+ public static var hostsBarLitColor:String = "0xc4ff00";
+ public static var elementPercentHeight:Number = .98;
+ public static var timeFieldWidth:int = 42;
+ public static var labelTextColor:String = "0x666666";
+ public static var axisColor:Number = 0xbbccdd;
+ public static var axisColorString:String = "0xbbccdd";
+
+ public static function setWidth(w:int):void {
+ width = w;
+ }
+ public static function setHeight(h:int):void {
+ height = h;
+ }
+
}
}
diff --git a/src/flexchart/org/ovirt/charts/BarChart.as b/src/flexchart/org/ovirt/charts/BarChart.as
index d59883c..1b9cb33 100644
--- a/src/flexchart/org/ovirt/charts/BarChart.as
+++ b/src/flexchart/org/ovirt/charts/BarChart.as
@@ -19,8 +19,10 @@
*/
package org.ovirt.charts {
+ import flash.display.Graphics;
import flash.events.Event;
import flash.events.MouseEvent;
+ import flash.geom.Rectangle;
import mx.collections.ArrayCollection;
import mx.containers.Box;
import mx.containers.HBox;
@@ -29,9 +31,11 @@ package org.ovirt.charts {
import mx.controls.TextInput;
import mx.controls.DateField;
import mx.controls.Button;
+ import mx.controls.Label;
import mx.controls.PopUpMenuButton;
import mx.controls.Text;
import mx.events.MenuEvent;
+ import mx.events.FlexEvent;
import mx.formatters.DateFormatter;
import org.ovirt.data.*;
import org.ovirt.elements.*;
@@ -54,10 +58,22 @@ package org.ovirt.charts {
private var functionMenu:PopUpMenuButton;
private var dateBar:Box;
private var datePattern:RegExp;
+ private var selectedBar:SingleBar;
/*
Private, class-specific functions
*/
+
+ //this has to happen after the scale area has been rendered, or it will have no width.
+ private function drawLine(event:Event):void {
+ var xg:Graphics = XAxisLabelArea.graphics;
+ xg.beginFill(Constants.axisColor);
+ xg.lineStyle(1,Constants.axisColor);
+ xg.moveTo(yScale.width,0);
+ xg.lineTo(Constants.width,0);
+ xg.endFill();
+ }
+
private function timeRangeAdjusted(event:Event):void {
var t1:Number = startDateField.selectedDate.getTime()
+ (parseHour(startTimeField.text) * 3600 * 1000)
@@ -73,6 +89,13 @@ package org.ovirt.charts {
load();
}
+ private function selectClickedBar(event:MouseEvent):void {
+ if (selectedBar) {
+ selectedBar.deselect();
+ }
+ selectedBar = event.target as SingleBar;
+ selectedBar.select();
+ }
private function updateHostChart(event:MouseEvent):void {
var hostChart:HostChart = ApplicationBus.instance().hostChart;
@@ -138,8 +161,25 @@ package org.ovirt.charts {
}
/*
+ Public functions
+ */
+
+ public function clearSelection():void {
+ if (selectedBar) {
+ selectedBar.deselect();
+ }
+ selectedBar = null;
+ }
+
+ /*
Overriden functions
*/
+
+ override public function load():void {
+ clearSelection();
+ super.load();
+ }
+
override protected function initializeDataSource():void {
dataSource = new BarChartDataSource(this);
}
@@ -186,19 +226,20 @@ package org.ovirt.charts {
chartArea = new Canvas();
chartArea.percentHeight = 100;
chartArea.percentWidth = 100 - yLabelPercentWidth;
- chartArea.setStyle("backgroundColor","0xbbccdd");
+ chartArea.setStyle("backgroundColor","0xffffff");
chartArea.verticalScrollPolicy = ScrollPolicy.OFF
chartFrame.addChild(yScale);
chartFrame.addChild(chartArea);
- this.container.addChild(chartFrame);
+
+ chartFrame.addEventListener(FlexEvent.CREATION_COMPLETE,drawLine);
XAxisLabelArea = new Canvas();
XAxisLabelArea.height = Constants.labelHeight;
XAxisLabelArea.minHeight = Constants.labelHeight;
XAxisLabelArea.percentWidth = 100;
- this.container.addChild(XAxisLabelArea);
+
var t1:Date = new Date(startTime * 1000);
var t2:Date = new Date(endTime * 1000);
@@ -208,7 +249,10 @@ package org.ovirt.charts {
dateBar = new HBox();
dateBar.setVisible(true);
this.container.addChild(dateBar);
+ this.container.addChild(chartFrame);
+ this.container.addChild(XAxisLabelArea);
var dataPoints:Array = dataSeries.getDataPoints();
+
var maxValue:Number = dataSeries.getMaxValue();
var scale:Number = maxValue;
yScale.setMax(maxValue);
@@ -264,12 +308,18 @@ package org.ovirt.charts {
var value:Number = dataPoint.getValue();
var bar:SingleBar = new SingleBar(dataPoint,scale);
+ bar.setColor(Constants.summaryBarColor)
+ bar.setLitColor(Constants.summaryBarLitColor)
+
chartArea.addChild(bar);
bar.width = barWidth;
bar.addEventListener(MouseEvent.CLICK,
ApplicationBus.instance().mainChartBarClickAction);
bar.addEventListener(MouseEvent.CLICK,
updateHostChart);
+ bar.addEventListener(MouseEvent.CLICK,
+ selectClickedBar);
+
bar.x = currentBarPosition;
if (makeup > 0 && i % makeup == 0 && madeup < shortfall) {
bar.width = bar.width + 1;
@@ -295,14 +345,15 @@ package org.ovirt.charts {
//add a 'tick' in the center of the bar to which this label
//corresponds
var ind:Box = new Box();
- ind.opaqueBackground = 0x000000;
- ind.width=1;
- ind.height=3;
+ ind.width=2;
+ ind.height=4;
ind.x = label.getCenter();
ind.y = 0;
ind.setVisible(true);
- ind.setStyle("backgroundColor","0x000000");
+ ind.setStyle("backgroundColor",Constants.axisColorString);
XAxisLabelArea.addChild(ind);
+
+
lastDate = dataPoint.getTimestamp().date;
}
currentBarPosition += (bar.width + Constants.barSpacing);
@@ -311,6 +362,8 @@ package org.ovirt.charts {
t1 = new Date(dataPoints[0].getTimestamp().getTime());
t2 = new Date(dataPoints[size - 1].getTimestamp().getTime());
+
+
} catch (e:Error) {
trace(e.message);
if (size == 0) {
@@ -325,51 +378,15 @@ package org.ovirt.charts {
}
}
- //fill in the time range selection bar
-
- var f1:Text = new Text();
- f1.text = "View data between";
- dateBar.addChild(f1);
-
- startDateField = new DateField();
- startDateField.selectedDate = t1;
- startDateField.editable = true;
- startTimeField = new TextInput();
- startTimeField.minWidth = 50;
- startTimeField.maxWidth = 50;
- startTimeField.text = pad(t1.hours) + ":" + pad(t1.minutes);
- dateBar.addChild(startTimeField);
- dateBar.addChild(startDateField);
- var f2:Text = new Text();
- f2.text = "and";
- dateBar.addChild(f2);
-
-
- endDateField = new DateField();
- endDateField.selectedDate = t2;
- endDateField.editable = true;
- endTimeField = new TextInput();
- endTimeField.minWidth = 50;
- endTimeField.maxWidth = 50;
- endTimeField.text = pad(t2.hours) + ":" + pad(t2.minutes);
- dateBar.addChild(endTimeField);
- dateBar.addChild(endDateField);
-
- button = new Button();
- button.label = "go";
- button.addEventListener(MouseEvent.CLICK,timeRangeAdjusted);
-
- dateBar.addChild(button);
-
//FIXME: these should be fetched from the graph controller so
//that different types can be added (or restricted) dynamically
var menuItems:ArrayCollection =
- new ArrayCollection( [{label: "memory"},
- {label: "cpu"},
+ new ArrayCollection( [{label: "cpu"},
+ {label: "disk"},
{label: "load"},
+ {label: "memory"},
{label: "netin"},
- {label: "netout"},
- {label: "disk"}
+ {label: "netout"}
]);
if (menu != null) {
@@ -384,12 +401,12 @@ package org.ovirt.charts {
var functionMenuItems:ArrayCollection =
- new ArrayCollection( [{label: "peak"},
- {label: "average"},
+ new ArrayCollection( [{label: "average"},
{label: "min"},
+ {label: "peak"},
{label: "rolling avg"},
- {label: "rolling peak"},
- {label: "rolling min"}
+ {label: "rolling min"},
+ {label: "rolling peak"}
]);
if (functionMenu != null) {
@@ -402,6 +419,42 @@ package org.ovirt.charts {
functionMenu.addEventListener(MenuEvent.ITEM_CLICK,functionSelected);
dateBar.addChild(functionMenu);
+
+ //fill in the time range selection bar
+
+ var f1:Text = new Text();
+ f1.text = "From:";
+ dateBar.addChild(f1);
+
+ startDateField = new DateField();
+ startDateField.selectedDate = t1;
+ startDateField.editable = true;
+ startTimeField = new TextInput();
+ startTimeField.minWidth = Constants.timeFieldWidth;
+ startTimeField.maxWidth = Constants.timeFieldWidth;
+ startTimeField.text = pad(t1.hours) + ":" + pad(t1.minutes);
+ dateBar.addChild(startTimeField);
+ dateBar.addChild(startDateField);
+ var f2:Text = new Text();
+ f2.text = "to";
+ dateBar.addChild(f2);
+
+
+ endDateField = new DateField();
+ endDateField.selectedDate = t2;
+ endDateField.editable = true;
+ endTimeField = new TextInput();
+ endTimeField.minWidth = Constants.timeFieldWidth;
+ endTimeField.maxWidth = Constants.timeFieldWidth;
+ endTimeField.text = pad(t2.hours) + ":" + pad(t2.minutes);
+ dateBar.addChild(endTimeField);
+ dateBar.addChild(endDateField);
+
+ button = new Button();
+ button.label = "go";
+ button.addEventListener(MouseEvent.CLICK,timeRangeAdjusted);
+
+ dateBar.addChild(button);
}
}
}
diff --git a/src/flexchart/org/ovirt/charts/HostChart.as b/src/flexchart/org/ovirt/charts/HostChart.as
index ad46236..6649ca5 100644
--- a/src/flexchart/org/ovirt/charts/HostChart.as
+++ b/src/flexchart/org/ovirt/charts/HostChart.as
@@ -19,6 +19,7 @@
*/
package org.ovirt.charts {
+ import flash.display.Graphics;
import flash.events.Event;
import flash.events.MouseEvent;
import mx.collections.ArrayCollection;
@@ -29,9 +30,11 @@ package org.ovirt.charts {
import mx.controls.TextInput;
import mx.controls.DateField;
import mx.controls.Button;
+ import mx.controls.Label;
import mx.controls.PopUpMenuButton;
import mx.controls.Text;
import mx.events.MenuEvent;
+ import mx.events.FlexEvent;
import mx.formatters.DateFormatter;
import org.ovirt.data.*;
import org.ovirt.elements.*;
@@ -42,10 +45,22 @@ package org.ovirt.charts {
public class HostChart extends Chart {
private var yScale:Scale;
+ private var navBar:HBox;
private var chartFrame:HBox;
private var chartArea:Canvas;
private var XAxisLabelArea:Canvas;
+ //this has to happen after the scale area has been rendered, or it will have no width.
+ private function drawLine(event:Event):void {
+ var xg:Graphics = XAxisLabelArea.graphics;
+ xg.beginFill(Constants.axisColor);
+ xg.lineStyle(1,Constants.axisColor);
+ xg.moveTo(yScale.width,0);
+ xg.lineTo(Constants.width,0);
+ xg.endFill();
+ }
+
+
/*
Constructors
*/
@@ -74,6 +89,27 @@ package org.ovirt.charts {
var i:int;
var yLabelPercentWidth:int = 8;
+ var myDate:Date = new Date();
+ myDate.setTime(startTime * 1000);
+ var dateFormat:DateFormatter = new DateFormatter();
+ dateFormat.formatString = "JJ:NN DD-MMM-YYYY";
+
+ navBar = new HBox();
+ navBar.setStyle("horizontalGap","1");
+ navBar.height = 20;
+ navBar.percentWidth = 100;
+ navBar.setVisible(true);
+ var navBarLabel:Label = new Label();
+ navBarLabel.text = "Host status at " + dateFormat.format(myDate);
+ navBar.addChild(navBarLabel);
+
+ var closeLink:Label = new Label();
+ closeLink.setStyle("color","0x2875c1");
+ closeLink.setStyle("textDecoration","underline");
+ closeLink.text = "Close";
+ navBar.addChild(closeLink);
+ this.container.addChild(navBar);
+
chartFrame = new HBox();
chartFrame.percentHeight = 80;
chartFrame.percentWidth = 100;
@@ -88,12 +124,13 @@ package org.ovirt.charts {
chartArea = new Canvas();
chartArea.percentHeight = 100;
chartArea.percentWidth = 100 - yLabelPercentWidth;
- chartArea.setStyle("backgroundColor","0xbbccdd");
+ chartArea.setStyle("backgroundColor","0xffffff");
chartArea.verticalScrollPolicy = ScrollPolicy.OFF
chartFrame.addChild(yScale);
chartFrame.addChild(chartArea);
+ chartFrame.addEventListener(FlexEvent.CREATION_COMPLETE,drawLine);
this.container.addChild(chartFrame);
XAxisLabelArea = new Canvas();
@@ -143,6 +180,8 @@ package org.ovirt.charts {
var dataPoint:DataPoint = dataPoints[i] as DataPoint;
var bar:SingleBar = new SingleBar(dataPoint,scale);
+ bar.setColor(Constants.hostsBarColor)
+ bar.setLitColor(Constants.hostsBarLitColor)
chartArea.addChild(bar);
bar.width = barWidth;
bar.x = currentBarPosition;
@@ -173,5 +212,6 @@ package org.ovirt.charts {
trace(e.getStackTrace())
}
}
+
}
}
diff --git a/src/flexchart/org/ovirt/data/DataSource.as b/src/flexchart/org/ovirt/data/DataSource.as
index 4fdd8e8..152df1b 100644
--- a/src/flexchart/org/ovirt/data/DataSource.as
+++ b/src/flexchart/org/ovirt/data/DataSource.as
@@ -61,6 +61,5 @@ package org.ovirt.data {
protected function getUrl(dto:FlexchartDataTransferObject):String {
return null;
}
-
}
}
diff --git a/src/flexchart/org/ovirt/elements/Scale.as b/src/flexchart/org/ovirt/elements/Scale.as
index 4c120d6..4401003 100644
--- a/src/flexchart/org/ovirt/elements/Scale.as
+++ b/src/flexchart/org/ovirt/elements/Scale.as
@@ -26,6 +26,7 @@ package org.ovirt.elements {
import mx.events.FlexEvent;
import mx.events.ResizeEvent;
import mx.controls.Label;
+ import org.ovirt.Constants;
public class Scale extends Box {
@@ -44,10 +45,12 @@ package org.ovirt.elements {
addEventListener(FlexEvent.UPDATE_COMPLETE,myResize);
maxLabel = new Label();
+ maxLabel.setStyle("color",Constants.labelTextColor);
this.addChild(maxLabel);
maxLabel.setVisible(true);
midLabel = new Label();
+ midLabel.setStyle("color",Constants.labelTextColor);
this.addChild(midLabel);
midLabel.setVisible(true);
@@ -67,11 +70,11 @@ package org.ovirt.elements {
private function myResize(event:Event):void {
- this.height = parent.height * .90 * -1;
+ this.height = parent.height * Constants.elementPercentHeight * -1;
this.y = parent.height;
graphics.clear();
- graphics.beginFill(0x000000);
- graphics.lineStyle(1);
+ graphics.beginFill(Constants.axisColor);
+ graphics.lineStyle(1,Constants.axisColor);
graphics.moveTo(width - 1,-1);
graphics.lineTo(width - 1,height);
diff --git a/src/flexchart/org/ovirt/elements/SingleBar.as b/src/flexchart/org/ovirt/elements/SingleBar.as
index 40ae651..1d44c60 100644
--- a/src/flexchart/org/ovirt/elements/SingleBar.as
+++ b/src/flexchart/org/ovirt/elements/SingleBar.as
@@ -31,6 +31,7 @@ package org.ovirt.elements {
import mx.formatters.DateFormatter;
import mx.managers.ToolTipManager;
import org.ovirt.data.DataPoint;
+ import org.ovirt.Constants;
public class SingleBar extends Canvas {
@@ -38,6 +39,10 @@ package org.ovirt.elements {
private var dataPoint:DataPoint;
private var scale:Number;
private var dateFormat:DateFormatter = new DateFormatter();
+ private var color:String = Constants.summaryBarColor;
+ private var litColor:String = Constants.summaryBarLitColor;
+ private var selectedColor:String = Constants.hostsBarColor;
+ private var selected:Boolean = Boolean(false);
public function SingleBar(dataPoint:DataPoint,scale:Number) {
super();
@@ -45,16 +50,20 @@ package org.ovirt.elements {
this.scale = scale;
addEventListener(MouseEvent.MOUSE_OVER,showTip);
addEventListener(MouseEvent.MOUSE_OUT,destroyTip);
+ addEventListener(MouseEvent.MOUSE_OVER,colorLit);
+ addEventListener(MouseEvent.MOUSE_OUT,colorNormal);
addEventListener(ResizeEvent.RESIZE,myResize);
addEventListener(FlexEvent.CREATION_COMPLETE,myResize);
addEventListener(Event.RENDER,myResize);
- this.setStyle("backgroundColor","0x2875c1");
+ this.setStyle("backgroundColor",color);
dateFormat.formatString = "DD-MMM-YYYY JJ:NN";
}
public function destroy():void {
removeEventListener(MouseEvent.MOUSE_OVER,showTip);
removeEventListener(MouseEvent.MOUSE_OUT,destroyTip);
+ removeEventListener(MouseEvent.MOUSE_OVER,colorLit);
+ removeEventListener(MouseEvent.MOUSE_OUT,colorNormal);
removeEventListener(ResizeEvent.RESIZE,myResize);
removeEventListener(FlexEvent.CREATION_COMPLETE,myResize);
removeEventListener(FlexEvent.UPDATE_COMPLETE,myResize);
@@ -63,7 +72,7 @@ package org.ovirt.elements {
private function myResize(event:Event):void {
- this.height = (dataPoint.getValue() / scale) * parent.height * .9 * -1;
+ this.height = (dataPoint.getValue() / scale) * parent.height * Constants.elementPercentHeight * -1;
this.y = parent.height;
}
@@ -79,17 +88,41 @@ package org.ovirt.elements {
dateFormat.format(dataPoint.getTimestamp()) +
"\n" +
dataPoint.getValue(),
- xPos,yPos) as ToolTip;
+ xPos + 6,yPos) as ToolTip;
+
+
+ var chartBounds:Rectangle = this.stage.getBounds(this.parent);
+
tip.x = Math.min(tip.x,
w - tip.width);
- tip.y = Math.max(0,
- tip.y - tip.height);
+ tip.y = Math.max(yPos + this.height - tip.height,
+ chartBounds.y + tip.height);
+ tip.setStyle("backgroundColor","0xFFFFFF");
}
private function destroyTip(event:Event):void {
ToolTipManager.destroyToolTip(tip);
}
+ private function colorNormal(event:Event):void {
+ if (!selected) {
+ this.setStyle("backgroundColor",color);
+ }
+ }
+ private function colorLit(event:Event):void {
+ if (!selected) {
+ this.setStyle("backgroundColor",litColor);
+ }
+ }
+
+ private function colorSelected(event:Event):void {
+ this.setStyle("backgroundColor",selectedColor);
+ }
+
+ public function getNodeName():String {
+ return dataPoint.getNodeName();
+ }
+
public function getResolution():Number {
return dataPoint.getResolution();
}
@@ -97,5 +130,24 @@ package org.ovirt.elements {
public function getStartTime():Number {
return dataPoint.getTimestamp().getTime();
}
+
+ public function setColor(color:String):void {
+ this.color = color;
+ this.setStyle("backgroundColor",color);
+ }
+
+ public function setLitColor(litColor:String):void {
+ this.litColor = litColor;
+ }
+
+ public function deselect():void {
+ this.setStyle("backgroundColor",color);
+ selected = Boolean(false);
+ }
+
+ public function select():void {
+ this.setStyle("backgroundColor",selectedColor);
+ selected = Boolean(true);
+ }
}
}
diff --git a/src/flexchart/org/ovirt/elements/XAxisLabel.as b/src/flexchart/org/ovirt/elements/XAxisLabel.as
index 9bf4c26..e066f93 100644
--- a/src/flexchart/org/ovirt/elements/XAxisLabel.as
+++ b/src/flexchart/org/ovirt/elements/XAxisLabel.as
@@ -26,6 +26,7 @@ package org.ovirt.elements {
import flash.events.MouseEvent;
import mx.events.*;
import mx.events.FlexEvent;
+ import org.ovirt.Constants;
public class XAxisLabel extends Box {
@@ -36,6 +37,7 @@ package org.ovirt.elements {
super();
labelText = new TextLiberation(text);
labelText.setVisible(true);
+ labelText.setStyle("color",Constants.labelTextColor);
this.addChild(labelText);
this.horizontalScrollPolicy = ScrollPolicy.OFF;
this.verticalScrollPolicy = ScrollPolicy.OFF;
--
1.6.0.6
More information about the ovirt-devel
mailing list