QuarterGroups.ux

<ChartPage ux:Class="QuarterGroups" File="QuarterGroups(plot)" 
	Title="Monthly data grouped into Quarters" xmlns:c="Fuse.Charting" Model="QuarterGroups">
	<JavaScript>
		exports.incrOffset = function() {
			plot.stepOffset(1)
		}
		
		exports.decrOffset = function() {
			plot.stepOffset(-1)
		}
	</JavaScript>
	<!-- Refer to the README.md to understand why `DataExtend` is used -->
	<c:Plot RangePadding="0.1" Margin="20,10,50,10" ux:Name="plot" DataExtend="3,1">
		<c:DataSeries Data="{data}"/>

		<GridLayout Columns="50,20,1*" Rows="1*,10,20"/>
	
		<c:PlotAxis Row="0" Column="0" Axis="Y">
			<Text ux:Template="Label" Alignment="CenterRight" 
				Value="{Plot axis.value}k" FontSize="20" Color="#000"/>
		</c:PlotAxis>
		<c:PlotTicks Axis="Y" StrokeWidth="1" StrokeColor="#000" AxisLine="1"/>
		
		<Panel>
			<c:PlotArea YStepSize="40" XStepSize="100/3"/>
			
			<StackPanel Orientation="Horizontal" Alignment="TopRight" ItemSpacing="10">
				<ChartButton Label="◀" Clicked="{decrOffset}" Padding="2,0" ux:Name="dataPrev"
					IsEnabled="{Plot hasPrev}"/>
				<ChartButton Label="▶" Clicked="{incrOffset}" Padding="2,0" ux:Name="dataNext"
					IsEnabled="{Plot hasNext}"/>
			</StackPanel>
		
			<Panel ClipToBounds="true">
				<c:PlotData>
					<c:PlotPoint Width="10" Height="10">
						<Circle Color="#FFF" StrokeColor="#000" StrokeWidth="1.5"/>
					</c:PlotPoint>
				</c:PlotData>
			
				<Curve>
					<Stroke Width="5" Color="#000"/>
					<Stroke Width="2" Color="#FFF"/>
					<c:PlotData>
						<c:PlotCurvePoint/>
					</c:PlotData>
				</Curve>
			</Panel>
		</Panel>
		
		<c:PlotTicks Row="1" Column="2" StrokeWidth="1" StrokeColor="#000" AxisLine="0"/>
		<c:PlotAxis Row="2" Column="2" Axis="X" Group="3" ContentPosition="Anchor" 
			ClipToBounds="true" ExcludeExtend="false">
			<Panel ux:Template="Label" Padding="2,0">
				<Text TextAlignment="Center" FontSize="20" Color="#000" Value="{Plot axis.label}"/>
				<Rectangle Color="#DEF"/>
				
				<!-- Obscure visual if the label is partially out-of-view -->
				<WhileTrue Value="({Plot axis.index} &lt; {Plot offset}) 
					|| ( ({Plot axis.index}+3) &gt; ({Plot offset} + {Plot count}))">
					<Change Label.Opacity="0.4"/>
				</WhileTrue>
			</Panel>
		</c:PlotAxis>

	</c:Plot>
</ChartPage>