<?xml version="1.0" encoding="utf-8"?>
<s:Module xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:containers="containers.*"
xmlns:data="containers.data.*"
xmlns:separators="ardisia.components.separators.*"
xmlns:dataTypes="ardisia.components.timebarContainer.dataTypes.*"
xmlns:sparklines="ardisia.charts.sparklines.*"
xmlns:colorPicker="ardisia.components.colorPicker.*"
xmlns:timebarContainer="ardisia.components.timebarContainer.*"
xmlns:timebarContainer1="components.timebarContainer.*"
frameRate="60"
width="100%" height="100%"
removedFromStage="removedFromStageHandler(event)">
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.core.IVisualElement;
import ardisia.utils.DateUtils;
import flashx.textLayout.elements.TextFlow;
[Bindable]protected var dp:ArrayCollection;
protected var child:IVisualElement;
public function creationComplete():void
{
var dateIter:Date = new Date(1900, 0, 15);
var end:Number = new Date(2000, 0, 15).time;
var scratch:ArrayCollection = new ArrayCollection();
while (dateIter.time < end + 100)
{
var xVal:Number = dateIter.time;
var yVal:Number = Math.round(Math.random() * 100);
scratch.addItem({x: xVal, y: yVal, date: DateUtils.format(new Date(xVal), 'MMM D, YYY')});
dateIter.month += 1;
}
dp = scratch;
}
protected function exampleChangeHandler(event:Event):void
{
timebar.selectionPeriodBegin = timebar.selectionPeriodEnd = null;
switch (timebarRadioGroup.selectedIndex)
{
case 0:
if (child)
timebar.removeElement(child);
timebar.periodBegin = new Date(1999, 0, 1);
timebar.periodEnd = new Date(2000, 0, 1);
timebar.visiblePeriodBegin = new Date(1999, 0, 1);
timebar.visiblePeriodEnd = new Date(2000, 0, 1);
timebar.minimumVisibleDuration = 1000 * 60 * 60 * 24 * 10;
minVisibleLabel.text = "10 days";
child = null;
break;
case 1:
if (child)
timebar.removeElement(child);
timebar.addElement(sparkLine);
timebar.periodBegin = new Date(1900, 0, 15);
timebar.periodEnd = new Date(2000, 0, 15);
timebar.visiblePeriodBegin = new Date(1950, 0, 1);
timebar.visiblePeriodEnd = new Date(1951, 0, 1);
timebar.minimumVisibleDuration = 1000 * 60 * 60 * 24 * 30 * 5;
minVisibleLabel.text = "5 months";
child = sparkLine;
break;
case 2:
if (child)
timebar.removeElement(child);
timebar.periodBegin = new Date(2010, 0, 1, 0);
timebar.periodEnd = new Date(2010, 0, 1, 6);
timebar.visiblePeriodBegin = new Date(2010, 0, 1, 0);
timebar.visiblePeriodEnd = new Date(2010, 0, 1, 6);
timebar.minimumVisibleDuration = 1000 * 5;
minVisibleLabel.text = "5 minutes";
child = null;
break;
case 3:
if (child)
timebar.removeElement(child);
timebar.periodBegin = new Date(-4400, 0, 1);
timebar.periodEnd = new Date();
timebar.visiblePeriodBegin = new Date(-4400, 0, 1);
timebar.visiblePeriodEnd = new Date();
timebar.minimumVisibleDuration = 1000 * 60 * 60 * 24 * 365.25 * 10;
minVisibleLabel.text = "10 years";
child = null;
break;
}
}
protected function removedFromStageHandler(event:Event):void
{
}
protected function dataTipFormatFunction(value:Object):Object
{
var textFlow:TextFlow = new Tf();
Object(textFlow).data = value;
return textFlow;
}
]]>
</fx:Script>
<fx:Declarations>
<fx:Component className="Tf">
<s:TextFlow>
<fx:Script>
<![CDATA[
public function set data(item:Object):void
{
date.text = item.date + ": ";
val.text = item.y;
}
]]>
</fx:Script>
<s:span id="date" fontWeight="bold" fontSize="11"></s:span> <s:span id="val" fontSize="11"></s:span>
</s:TextFlow>
</fx:Component>
<s:RadioButtonGroup id="timebarRadioGroup"
change="exampleChangeHandler(event)"/>
<fx:Array id="intervalsExample">
<dataTypes:IntervalMode name="decaMillenium" years="10000" />
<dataTypes:IntervalMode name="pentaMillenium" years="5000" />
<dataTypes:IntervalMode name="biMillenium" years="2000" />
<dataTypes:IntervalMode name="millenium" years="1000" />
<dataTypes:IntervalMode name="halfMillenium" years="500" />
<dataTypes:IntervalMode name="century" years="100" />
<dataTypes:IntervalMode name="halfCentury" years="50" />
<dataTypes:IntervalMode name="quarterCentury" years="25" />
<dataTypes:IntervalMode name="decade" years="10" />
<dataTypes:IntervalMode name="halfDecade" years="5" />
<dataTypes:IntervalMode name="year" years="1" />
<dataTypes:IntervalMode name="halfYear" months="6" />
<dataTypes:IntervalMode name="quarter" months="3" />
<dataTypes:IntervalMode name="month" months="1" />
<dataTypes:IntervalMode name="week" days="7" />
<dataTypes:IntervalMode name="day" days="1" />
<dataTypes:IntervalMode name="hours" hours="1" />
<dataTypes:IntervalMode name="thirtyMinutes" minutes="30" />
<dataTypes:IntervalMode name="tenMinutes" minutes="10" />
<dataTypes:IntervalMode name="minutes" minutes="1" />
<dataTypes:IntervalMode name="thirtySeconds" seconds="30" />
<dataTypes:IntervalMode name="fifteenSeconds" seconds="15" />
<dataTypes:IntervalMode name="seconds" seconds="1" />
</fx:Array>
<sparklines:SparklineLine id="sparkLine"
dataTipHideDelay="1000"
dataTipFormatFunction="dataTipFormatFunction"
form="segment"
verticalCenter="0" height="50%"
backgroundAlpha="0"
width="100%"
markerRadius="2"
strokeColor="#006B9F"
strokeThickness="2"
xField="x" yField="y"
showDataTip="true"
showMarkers="false"
showNormalRange="false"
showAxis="false"
dataProvider="{dp}"/>
</fx:Declarations>
<s:states>
<s:State name="stockholm" />
<s:State name="london" />
<s:State name="spark" />
</s:states>
<containers:DemoApplicationWrapper id="demoAppWrapper"
width="100%" height="100%"
westRegionTitle="TimebarContainer Description"
description="Container used to display and select a time period behind child content. Time intervals can be zoomed in/out via both the mouse wheel and buttons on the left and right edges of the horizontal scrollbar thumb. Selected time periods can be selected via mouse interaction and can be dragged. The time intervals displayed can be completely customized to fit the application's needs. For example, each time interval could be 5 seconds, 5 years, or 5 millennia. Any content can be added to the TimebarContainer to be displayed in the time period region, but often times, a simple sparkline is most appropriate. See the examples."
currentState.stockholm="stockholm" currentState.london="london" currentState.spark="spark">
<containers:expandingContainerContent>
<!--- expanding container #1 -->
<data:ExpandingContainerData>
<data:label>API</data:label>
<data:content>
<s:FormHeading label="Properties"/>
<s:FormItem label="Enable Selection:">
<s:CheckBox id="enableSelectionSelect"
selected="true"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="True to allow users to set the selected time period."/>
</s:helpContent>
</s:FormItem>
<s:FormItem label="Zoom Factor:">
<s:HSlider id="zoomFactorSelect"
width="100"
minimum="0.01" maximum="0.5" snapInterval="0.01" stepSize="0.01" value="0.1"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="The amount of zoom applied on each mouse wheel tick. E.G. a value of 0.1 means that each mouse wheel tick zooms in +-10% of the visible period duration."/>
</s:helpContent>
</s:FormItem>
<s:FormItem label="Scroll Threshold:">
<s:HSlider id="autoScrollThresholdSelect"
width="100"
minimum="1" maximum="100" snapInterval="10" value="50"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="Defines the threshold in pixels from the left and right boundaries of the viewport in which to trigger automatic scrolling during a drag."/>
</s:helpContent>
</s:FormItem>
<s:FormHeading label="Styles"/>
<s:FormItem label="Border Visible:">
<s:CheckBox id="borderVisibleSelect"
selected="true"/>
</s:FormItem>
<s:FormItem enabled="{borderVisibleSelect.selected}"
label="Border Color:">
<colorPicker:ColorPicker id="borderColorSelect"
selectedColor="#9B9B9B" selectedColor.london="#7A7A7A"/>
</s:FormItem>
<s:FormItem enabled="{borderVisibleSelect.selected}"
label="Border Alpha:">
<s:HSlider id="borderAlphaSelect"
width="100"
minimum="0" maximum="1" snapInterval="0"
value="1" value.london="0.85"/>
</s:FormItem>
</data:content>
</data:ExpandingContainerData>
</containers:expandingContainerContent>
<containers:centerContent>
<!--- example #1 -->
<data:PrimaryContentData>
<data:tabLabel>Intervals Example</data:tabLabel>
<data:exampleDescription>Illustrates how the TimebarContainer can display periods ranging from seconds to millennia. Also illustrates how the displayed time intervals can be changed during runtime. Remember to test zooming via the mouse wheel or via the buttons on the left and right of the scrollbar track thumb. Also, try selecting a time period via mouse interaction and dragging it.</data:exampleDescription>
<data:toolbarContent>
<s:HGroup gap="20">
<s:Form>
<s:FormHeading label="Intervals:"/>
<s:FormItem label="1 Year:">
<s:RadioButton groupName="timebarRadioGroup"
selected="true"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="Total period displayed is one year. The minimum interval is a day."/>
</s:helpContent>
</s:FormItem>
<s:FormItem label="SparkLine (100 years):">
<s:RadioButton id="sparklineRadioSelect"
groupName="timebarRadioGroup"
selected="false"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="Total period is one hundred years with a sparkline embedded with a data point for each month. The minimum interval is a month."/>
</s:helpContent>
</s:FormItem>
<s:FormItem enabled="{sparklineRadioSelect.selected}"
label="Force Overflow:">
<s:CheckBox id="forceOverflowSelect"
selected="false"
change="if(forceOverflowSelect.selected){sparkLine.height=1000;}else{sparkLine.height=NaN;sparkLine.percentHeight=50;}"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="Force vertical overflow in the TimebarContainer to test that dynamic scrollbars appear when content overflows the available vertical space."/>
</s:helpContent>
</s:FormItem>
<s:FormItem label="6 Hours:">
<s:RadioButton groupName="timebarRadioGroup"
selected="false"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="Total period displayed is 6 hours. The minimum interval is a 1 minute."/>
</s:helpContent>
</s:FormItem>
<s:FormItem label="Millennia:">
<s:RadioButton groupName="timebarRadioGroup"
selected="false"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="Total period displayed is ~ 4500 years. The minimum interval is 1 years."/>
</s:helpContent>
</s:FormItem>
</s:Form>
<s:Form>
<s:FormHeading label="Periods"/>
<s:FormItem label="Period Begin:">
<s:Label text="{DateUtils.format(timebar.periodBegin, 'MMM D YYYY H:NN:SS')}"
paddingTop="5"/>
</s:FormItem>
<s:FormItem label="Period End:">
<s:Label text="{DateUtils.format(timebar.periodEnd, 'MMM D YYYY H:NN:SS')}"
paddingTop="5"/>
</s:FormItem>
</s:Form>
<s:Form>
<s:FormHeading label="Visible Periods"/>
<s:FormItem label="Visible Begin:">
<s:Label text="{DateUtils.format(timebar.visiblePeriodBegin, 'MMM D YYYY H:NN:SS')}"
paddingTop="5"/>
</s:FormItem>
<s:FormItem label="Visible End:">
<s:Label text="{DateUtils.format(timebar.visiblePeriodEnd, 'MMM D YYYY H:NN:SS')}"
paddingTop="5"/>
</s:FormItem>
<s:FormItem label="Min Visible Period:">
<s:Label id="minVisibleLabel"
text="10 days"
paddingTop="5"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="The minimum displayed period for the displayed example."/>
</s:helpContent>
</s:FormItem>
</s:Form>
<s:Form>
<s:FormHeading label="Selected Periods"/>
<s:FormItem label="Start:">
<s:Label text="{DateUtils.format(timebar.selectionPeriodBegin, 'MMM D YYYY H:NN:SS')}"
paddingTop="5"/>
</s:FormItem>
<s:FormItem label="End:">
<s:Label text="{DateUtils.format(timebar.selectionPeriodEnd, 'MMM D YYYY H:NN:SS')}"
paddingTop="5"/>
</s:FormItem>
</s:Form>
</s:HGroup>
</data:toolbarContent>
<data:primaryContent>
<s:VGroup top="20" right="40" bottom="40" left="40"
horizontalAlign="justify"
gap="10">
<s:Label fontWeight="bold"
text="Use the MOUSE WHEEL to zoom in / out"
fontSize="13"
paddingTop="4" paddingBottom="10"/>
<timebarContainer:TimebarContainer id="timebar"
height="100%"
selectionEnabled="{enableSelectionSelect.selected}"
selectionPeriodBegin="{new Date(1999, 8, 1)}"
selectionPeriodEnd="{new Date(1999, 10, 1)}"
minimumVisibleDuration="{1000 * 60 * 60 * 24 * 10}"
horizontalCenter="0" verticalCenter="0"
autoScrollThreshold="{autoScrollThresholdSelect.value}"
zoomFactor="{zoomFactorSelect.value}"
periodBegin="{new Date(1999, 0, 1)}"
periodEnd="{new Date(2000, 0, 1)}"
visiblePeriodBegin="{new Date(1999, 0, 1)}"
visiblePeriodEnd="{new Date(2000, 0, 1)}"
intervalModes="{intervalsExample}"
borderVisible="{borderVisibleSelect.selected}"
borderColor="{borderColorSelect.selectedColor}"
borderAlpha="{borderAlphaSelect.value}"/>
</s:VGroup>
</data:primaryContent>
</data:PrimaryContentData>
<!--- example #2 -->
<data:PrimaryContentData>
<data:tabLabel>Sparkline Chart Example</data:tabLabel>
<data:exampleDescription>Using an Ardisia Sparkline as child content. Arbitrary content can be added to the TimebarContainer.</data:exampleDescription>
<data:toolbarContent>
<s:Form>
<s:FormHeading label="Content Padding"/>
<s:FormItem label="Padding Top">
<s:HSlider id="paddingTopSelect1"
minimum="0" maximum="100" value="60" snapInterval="1" />
</s:FormItem>
<s:FormItem label="Padding Bottom">
<s:HSlider id="paddingBottomSelect1"
minimum="0" maximum="100" value="10" snapInterval="1" />
</s:FormItem>
</s:Form>
</data:toolbarContent>
<data:primaryContent>
<timebarContainer:TimebarContainer id="timebar2"
top="40" right="40" bottom="40" left="40"
selectionEnabled="{enableSelectionSelect.selected}"
minimumVisibleDuration="{1000 * 60 * 60 * 24 * 30 * 5}"
autoScrollThreshold="{autoScrollThresholdSelect.value}"
zoomFactor="{zoomFactorSelect.value}"
periodBegin="{new Date(1900, 0, 15)}"
periodEnd="{new Date(2000, 0, 15)}"
visiblePeriodBegin="{new Date(1940, 0, 1)}"
visiblePeriodEnd="{new Date(1960, 0, 1)}"
intervalModes="{intervalsExample}"
borderVisible="{borderVisibleSelect.selected}"
borderColor="{borderColorSelect.selectedColor}"
borderAlpha="{borderAlphaSelect.value}"
paddingTop="{paddingTopSelect1.value}"
paddingBottom="{paddingBottomSelect1.value}">
<sparklines:SparklineLine id="sparkLine2"
dataTipFormatFunction="dataTipFormatFunction"
dataTipHideDelay="1000"
form="segment"
top="5" bottom="5" width="100%"
backgroundAlpha="0"
markerRadius="2"
strokeColor="#006B9F"
strokeThickness="2"
xField="x" yField="y"
showDataTip="true"
showMarkers="false"
showNormalRange="false"
showAxis="false"
dataProvider="{dp}"/>
</timebarContainer:TimebarContainer>
</data:primaryContent>
</data:PrimaryContentData>
<!--- example #3 -->
<data:PrimaryContentData>
<data:tabLabel>Bar Chart Example</data:tabLabel>
<data:exampleDescription>Adding a bar chart with a bar for each day of the year to illustrate how general child content can be added to the TimebarContainer.</data:exampleDescription>
<data:toolbarContent>
<s:Form>
<s:FormHeading label="Content Padding"/>
<s:FormItem label="Padding Top">
<s:HSlider id="paddingTopSelect2"
minimum="0" maximum="100" value="60" snapInterval="1" />
</s:FormItem>
<s:FormItem label="Padding Bottom">
<s:HSlider id="paddingBottomSelect2"
minimum="0" maximum="100" value="0" snapInterval="1" />
</s:FormItem>
</s:Form>
</data:toolbarContent>
<data:primaryContent>
<s:VGroup top="40" right="40" bottom="40" left="40"
horizontalAlign="justify"
mouseFocusEnabled="true" focusEnabled="true"
gap="10">
<s:Label text="Relative Rainfall Each Day - 1999"
fontWeight="bold"/>
<timebarContainer:TimebarContainer id="timebar3"
height="100%"
selectionEnabled="{enableSelectionSelect.selected}"
minimumVisibleDuration="{1000 * 60 * 60 * 24 * 10}"
autoScrollThreshold="{autoScrollThresholdSelect.value}"
zoomFactor="{zoomFactorSelect.value}"
periodBegin="{new Date(1999, 0, 1)}"
periodEnd="{new Date(2000, 0, 1)}"
visiblePeriodBegin="{new Date(1999, 5, 1)}"
visiblePeriodEnd="{new Date(1999, 7, 1)}"
intervalModes="{intervalsExample}"
borderVisible="{borderVisibleSelect.selected}"
borderColor="{borderColorSelect.selectedColor}"
borderAlpha="{borderAlphaSelect.value}"
paddingTop="{paddingTopSelect2.value}"
paddingBottom="{paddingBottomSelect2.value}">
<timebarContainer1:BarExample width="100%" height="100%"/>
</timebarContainer:TimebarContainer>
</s:VGroup>
</data:primaryContent>
</data:PrimaryContentData>
</containers:centerContent>
</containers:DemoApplicationWrapper>
</s:Module>