Source for Alarm Ratio Bar component:
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas
xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="initComponent()" x="0" y="0" width="100%" height="100%" >
<mx:Script>
<![CDATA[
private var _stageWidth : Number;
private var _showShadows : Boolean;
private var _okayCount : Number;
private var _infoCount : Number;
private var _minorCount : Number;
private var _majorCount : Number;
private var _criticalCount : Number;
private var _totalCount : Number;
[Bindable]
private var _okaySkinImage : String = "images/ratioBarOkay.jpg";
[Bindable]
private var _infoSkinImage : String = "images/ratioBarInformational.jpg";
[Bindable]
private var _minorSkinImage : String = "images/ratioBarMinor.jpg";
[Bindable]
private var _majorSkinImage : String = "images/ratioBarMajor.jpg";
[Bindable]
private var _criticalSkinImage : String = "images/ratioBarCritical.jpg";
private function initComponent() : void
{
this._okayCount = this.OkayCount;
this._infoCount = this.InfoCount;
this._minorCount = this.MinorCount;
this._majorCount = this.MajorCount;
this._criticalCount = this.CriticalCount;
this._totalCount = this._okayCount;
this._totalCount += this._infoCount;
this._totalCount += this._minorCount;
this._totalCount += this._majorCount;
this._totalCount += this._criticalCount;
this.drawComponent();
}
public function setCountValues(values : Array) : void
{
this._okayCount = values[0];
this._infoCount = values[1];
this._minorCount = values[2];
this._majorCount = values[3];
this._criticalCount = values[4];
this._totalCount = this._okayCount;
this._totalCount += this._infoCount;
this._totalCount += this._minorCount;
this._totalCount += this._majorCount;
this._totalCount += this._criticalCount;
this.drawComponent();
}
private function getSeverityBarWidth(count : Number) : Number
{
var pixels : Number;
pixels = this._graphCanvas.width / this._totalCount;
return count * pixels;
}
private function drawComponent() : void
{
var okayWidth : Number;
var infoWidth : Number;
var minorWidth : Number;
var majorWidth : Number;
var criticalWidth : Number;
this._stageWidth = this._graphCanvas.width;
okayWidth = getSeverityBarWidth(this._okayCount);
infoWidth = getSeverityBarWidth(this._infoCount);
minorWidth = getSeverityBarWidth(this._minorCount);
majorWidth = getSeverityBarWidth(this._majorCount);
criticalWidth = getSeverityBarWidth(this._criticalCount);
if (okayWidth != 0)
{
this._okaySkin.x = 0;
this._okaySkin.y = 0;
this._okaySkin.width = okayWidth;
this._okaySkin.visible = true;
}
else
{
this._okaySkin.visible = false;
}
if (infoWidth != 0)
{
this._infoSkin.x = okayWidth;
this._infoSkin.width = infoWidth;
this._infoSkin.visible = true;
}
else
{
this._infoSkin.visible = false;
}
if (minorWidth != 0)
{
this._minorSkin.x = okayWidth + infoWidth;
this._minorSkin.width = minorWidth;
this._minorSkin.visible = true;
}
else
{
this._minorSkin.visible = false;
}
if (majorWidth != 0)
{
this._majorSkin.x = okayWidth + infoWidth + minorWidth;
this._majorSkin.width = majorWidth;
this._majorSkin.visible = true;
}
else
{
this._majorSkin.visible = false;
}
if (criticalWidth != 0)
{
this._criticalSkin.x = okayWidth + infoWidth + minorWidth + majorWidth;
this._criticalSkin.width = criticalWidth;
this._criticalSkin.visible = true;
}
else
{
this._criticalSkin.visible = false;
}
if (this._showShadows)
{
showShadows();
}
else
{
hideShadows();
}
}
private function hideShadows() : void
{
this._okaySkin.filters = [];
this._infoSkin.filters = [];
this._minorSkin.filters = [];
this._majorSkin.filters = [];
this._criticalSkin.filters = [];
this._graphCanvas.filters = [];
}
private function showShadows() : void
{
this._okaySkinShadow.strength = 1;
this._infoSkinShadow.strength = 1;
this._minorSkinShadow.strength = 1;
this._majorSkinShadow.strength = 1;
this._criticalSkinShadow.strength = 1;
this._graphCanvasShadow.strength = 1;
}
public function set ShowShadows(state : Boolean) : void
{
_showShadows = state;
}
public function get ShowShadows() : Boolean
{
return _showShadows;
}
]]>
</mx:Script>
<mx:Image id="_okaySkin" source="{_okaySkinImage}" scaleContent="true" maintainAspectRatio="false" height="100%">
<mx:filters>
<mx:DropShadowFilter id="_okaySkinShadow" distance="4" angle="90"
blurX="8" blurY="8" quality="4" />
</mx:filters>
</mx:Image>
<mx:Image id="_infoSkin" source="{_infoSkinImage}" scaleContent="true"
maintainAspectRatio="false" height="100%" >
<mx:filters>
<mx:DropShadowFilter id="_infoSkinShadow" distance="4" angle="90" blurX="8" blurY="8" quality="4" />
</mx:filters>
</mx:Image>
<mx:Image id="_minorSkin" source="{_minorSkinImage}" scaleContent="true" maintainAspectRatio="false" height="100%" >
<mx:filters>
<mx:DropShadowFilter id="_minorSkinShadow" distance="4" angle="90" blurX="8" blurY="8" quality="4" />
</mx:filters>
</mx:Image>
<mx:Image id="_majorSkin" source="{_majorSkinImage}" scaleContent="true" maintainAspectRatio="false" height="100%" >
<mx:filters>
<mx:DropShadowFilter id="_majorSkinShadow" distance="4" angle="90" blurX="8" blurY="8" quality="4" />
</mx:filters>
</mx:Image>
<mx:Image id="_criticalSkin" source="{_criticalSkinImage}" scaleContent="true" maintainAspectRatio="false" height="100%" >
<mx:filters>
<mx:DropShadowFilter id="_criticalSkinShadow" distance="4" angle="90" blurX="8" blurY="8" quality="4" />
</mx:filters>
</mx:Image>
<mx:Label id="_graphText" text="{CaptionText}" fontFamily="{CaptionFontFamily}" fontSize="{CaptionFontSize}" fontWeight="bold" textAlign="{CaptionAlign}" color="{CaptionColor}" alpha="0.9" left="24" top="24" right="{this._graphCanvas.width - 24}" bottom="{this._graphCanvas.height - 24}" >
<mx:filters>
<mx:DropShadowFilter distance="4" angle="90" blurX="8" blurY="8" quality="5" />
</mx:filters>
</mx:Label>
<mx:Canvas id="_graphCanvas" x="0" y="0" width="100%" height="100%"
borderThickness="8" borderColor="white" >
<mx:filters>
<mx:DropShadowFilter id="_graphCanvasShadow" distance="0" angle="90" blurX="8" blurY="8" quality="5" alpha="0.25" />
</mx:filters>
</mx:Canvas>
<mx:Number id="OkayCount">10</mx:Number>
<mx:Number id="InfoCount">20</mx:Number>
<mx:Number id="MinorCount">30</mx:Number>
<mx:Number id="MajorCount">40</mx:Number>
<mx:Number id="CriticalCount">50</mx:Number>
<mx:Number id="FrameColor">#ffffff</mx:Number>
<mx:Number id="FrameThickness">0x08</mx:Number>
<mx:String id="CaptionText">Element Name</mx:String>
<mx:Number id="CaptionColor">#ffffff</mx:Number>
<mx:String id="CaptionFontFamily">Tahoma</mx:String>
<mx:Number id="CaptionFontSize">40</mx:Number>
<mx:String id="CaptionAlign">center</mx:String>
</mx:Canvas>