Skip to content

Commit fc94777

Browse files
mortoraymortoray
committed
preparing charting example from my original test app
1 parent bf4e648 commit fc94777

22 files changed

+1205
-0
lines changed

‎Samples/Visualization/Charting/Assets/elephant.png

146 KB
Loading

‎Samples/Visualization/Charting/Assets/goat.png

128 KB
Loading

‎Samples/Visualization/Charting/Assets/pig.png

152 KB
Loading

‎Samples/Visualization/Charting/BarChart.ux

+98
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
<ChartPage Title="Vertical orientation bar chart" File="BarChart" ux:Class="BarChart" xmlns:c="Fuse.Charting">
2+
<JavaScript>
3+
var Observable = require("FuseJS/Observable")
4+
function Item( x, y ) {
5+
this.x = x
6+
this.y = y
7+
this.label = "" + x
8+
}
9+
10+
function gauss( x ) {
11+
var sigma = Math.sqrt(15)
12+
var a = 1 / (sigma * Math.sqrt(2 * Math.PI))
13+
var b = 0
14+
var c = sigma
15+
return a * Math.pow( Math.E, -(x - b)*(x-b) / (2*c*c) )
16+
}
17+
exports.data = Observable()
18+
exports.data2 = Observable()
19+
for (var i=-15; i <= 15; ++i ) {
20+
var item = new Item(i, gauss(i));
21+
exports.data.add( item )
22+
exports.data2.add( Math.max(0, item.y + (Math.random()-0.3)*0.04) )
23+
}
24+
25+
exports.offset = Observable(0)
26+
exports.incrOffset = function() {
27+
exports.offset.value += 1
28+
}
29+
exports.decrOffset = function() {
30+
exports.offset.value -= 1
31+
}
32+
</JavaScript>
33+
<AttractorConfig Unit="Normalized" Easing="SinusoidalInOut"
34+
Duration="0.3" DurationExp="0" ux:Global="plotAttract"/>
35+
36+
<c:Plot XAxisMetric="OffsetCount" Margin="5,20,40,10" Orientation="Vertical" DataLimit="10"
37+
DataOffset="{offset}" ux:Name="plot" DataExtend="1,1">
38+
<c:DataSeries Data="{data}" ux:Name="barSeries"/>
39+
<c:DataSeries Data="{data2}" ux:Name="lineSeries"/>
40+
41+
<GridLayout Columns="auto,10,5,1*" Rows="1*,5,10,20"/>
42+
43+
<c:PlotAxis Row="0" Column="0" Axis="X" Margin="0,0,4,0" Width="50"
44+
Group="1" ClipToBounds="true" ExcludeExtend="false">
45+
<Text ux:Template="Label" Alignment="CenterRight" FontSize="15"
46+
Color="#000" Value="{Plot axis.label}">
47+
<LayoutAnimation>
48+
<Move Vector="1" RelativeTo="PositionChange" Duration="0.3" Easing="SinusoidalInOut"/>
49+
</LayoutAnimation>
50+
</Text>
51+
</c:PlotAxis>
52+
<c:PlotTicks Row="0" Column="1" Axis="X" StrokeWidth="2" StrokeColor="#004"/>
53+
54+
<Panel Row="0" Column="3">
55+
<Panel ClipToBounds="true">
56+
<c:PlotData>
57+
<c:PlotBar>
58+
<Rectangle Color="#0808" Height="80%" Alignment="VerticalCenter"/>
59+
<LayoutAnimation>
60+
<Move Vector="1" RelativeTo="PositionChange" Duration="0.3" Easing="SinusoidalInOut"/>
61+
</LayoutAnimation>
62+
</c:PlotBar>
63+
<!-- Mimic a PlotBar's behavior -->
64+
<Rectangle StrokeWidth="2" StrokeColor="#000" ZOffset="1"
65+
X="0" Y="{Plot data.y}" Anchor="0%,50%"
66+
Width="{Plot data.x}" Height="1 / {Plot stepCount.y} * 80%">
67+
<LayoutAnimation>
68+
<Move Vector="1" RelativeTo="PositionChange" Duration="0.3" Easing="SinusoidalInOut"/>
69+
</LayoutAnimation>
70+
</Rectangle>
71+
</c:PlotData>
72+
73+
<Curve StrokeColor="#84A8" StrokeWidth="2" ZOffset="1">
74+
<c:PlotData Series="lineSeries">
75+
<c:PlotCurvePoint Attractor="plotAttract"/>
76+
</c:PlotData>
77+
</Curve>
78+
</Panel>
79+
80+
<WhileTrue Value="{Plot hasNext}">
81+
<ChartButton Alignment="TopRight" Layer="Overlay" Label="▲" Clicked="{incrOffset}"
82+
Anchor="0%,0%"/>
83+
</WhileTrue>
84+
<WhileTrue Value="{Plot hasPrev}">
85+
<ChartButton Alignment="BottomRight" Layer="Overlay" Label="▼" Clicked="{decrOffset}"
86+
Anchor="0%,100%"/>
87+
</WhileTrue>
88+
</Panel>
89+
90+
<c:PlotTicks Row="2" Column="3" Axis="Y" StrokeWidth="2" StrokeColor="#004"/>
91+
<c:PlotAxis Row="3" Column="3" Axis="Y">
92+
<Text ux:Template="Label" TextAlignment="Center" FontSize="15"
93+
Color="#000" Value="{{Plot axis.value}*100}%"/>
94+
</c:PlotAxis>
95+
96+
</c:Plot>
97+
98+
</ChartPage>

‎Samples/Visualization/Charting/ChartPage.ux

+48
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
<!-- A common base for tall the chart pages. This provides the standard title layout and zooming
2+
to full screen -->
3+
<Container ux:Class="ChartPage" Subtree="inner">
4+
<string ux:Property="Title"/>
5+
<string ux:Property="File"/>
6+
7+
<Rectangle ux:Class="ChartButton" CornerRadius="5" Padding="5" Color="#ADF8">
8+
<string ux:Property="Label"/>
9+
<Text Value="{Property this.Label}" FontSize="23" Color="#000" ux:Name="label"/>
10+
11+
<WhileDisabled>
12+
<Change this.Color="#DEF" Duration="0.1"/>
13+
<Change label.Color="#888" Duration="0.1"/>
14+
</WhileDisabled>
15+
</Rectangle>
16+
17+
<!-- this wrapper holds the size in the outer ColumnLayout when switching to full-screen -->
18+
<Panel ux:Binding="Children" BoxSizing="FillAspect" Aspect="1.5">
19+
<DockPanel ux:Name="chart" TransformOrigin="TopLeft">
20+
<Rectangle Layer="Background" CornerRadius="5" Color="#FFF"/>
21+
22+
<Panel Dock="Top" Padding="2,5" Margin="0,0,0,5">
23+
<Rectangle Layer="Background" CornerRadius="5,5,0,0" Color="#BBB"/>
24+
<Text Alignment="Left" Value="{Property this.Title}" Color="#000"/>
25+
<Text Alignment="Right" Value="&lt;{Property this.File}&gt;" Color="#000"/>
26+
27+
<Clicked>
28+
<Toggle Target="showFull"/>
29+
</Clicked>
30+
</Panel>
31+
32+
<Panel ux:Name="inner"/>
33+
34+
<WhileTrue ux:Name="showFull">
35+
<Change chart.LayoutMaster="{Resource fullScreen}"/>
36+
<BringToFront Target="this"/>
37+
</WhileTrue>
38+
39+
<LayoutAnimation>
40+
<Move Vector="1" RelativeTo="PositionChange" Duration="0.25" Easing="SinusoidalInOut"/>
41+
<!-- Using `Scale` instead of `Resize` as drawing a chart is too costly to be done repeatedly.
42+
Note the use of `TransformOrigin="TopLeft"` on the wrapping `DockPanel` -->
43+
<Scale Factor="1" RelativeTo="SizeChange" Duration="0.25" Easing="SinusoidalInOut"/>
44+
</LayoutAnimation>
45+
</DockPanel>
46+
</Panel>
47+
48+
</Container>

‎Samples/Visualization/Charting/Charting.unoproj

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{
2+
"Packages": [
3+
"Fuse",
4+
"FuseJS",
5+
"Fuse.Charting",
6+
],
7+
"Includes": [
8+
"*"
9+
]
10+
}

‎Samples/Visualization/Charting/DoubleBarChart.ux

+73
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
<ChartPage Title="2-series with side-by-side bars" File="DoubeBarChart" ux:Class="DoubleBarChart" xmlns:c="Fuse.Charting">
2+
<JavaScript>
3+
var Observable = require("FuseJS/Observable")
4+
function Item( x, y ) {
5+
this.x = x
6+
this.y = y
7+
}
8+
9+
function gauss( x, u ) {
10+
var sigma = Math.sqrt(u)
11+
var a = 1 / (sigma * Math.sqrt(2 * Math.PI))
12+
var b = 0
13+
var c = sigma
14+
return a * Math.pow( Math.E, -(x - b)*(x-b) / (2*c*c) )
15+
}
16+
17+
function gaussItems( o, u, f ) {
18+
var items = []
19+
for (var i=-7; i <= 7; ++i ) {
20+
items.push( new Item(i, gauss(i + o, u)*f ) )
21+
}
22+
return items
23+
}
24+
25+
exports.data1 = Observable()
26+
exports.data2 = Observable()
27+
exports.data1.replaceAll( gaussItems( 0, 7, 1 ) )
28+
exports.data2.replaceAll( gaussItems( 5, 15, 0.5 ) )
29+
30+
exports.random = function() {
31+
exports.data1.replaceAll( gaussItems( Math.random() * 6 - 3, Math.random() * 6 + 4, 1 ) )
32+
exports.data2.replaceAll( gaussItems( Math.random() * 6 + 1, Math.random() * 8 + 11, 0.5 ) )
33+
}
34+
</JavaScript>
35+
<c:Plot Margin="5,20,20,10">
36+
<c:DataSeries Data="{data1}" ux:Name="series0"/>
37+
<c:DataSeries Data="{data2}" ux:Name="series1"/>
38+
39+
<GridLayout Columns="auto,10,5,1*" Rows="1*,5,10,20"/>
40+
41+
<c:PlotAxis Row="0" Column="0" Axis="Y" Margin="0,0,4,0">
42+
<Text ux:Template="Label" Alignment="CenterRight" FontSize="15"
43+
Color="#000" Value="{Plot axis.value}"/>
44+
</c:PlotAxis>
45+
<c:PlotTicks Row="0" Column="1" Axis="Y" StrokeWidth="2" StrokeColor="#004"/>
46+
47+
<AttractorConfig Unit="Normalized" Type="Elastic" Duration="0.3" ux:Global="plotAttract"/>
48+
49+
<Panel Row="0" Column="3">
50+
<ChartButton Alignment="TopRight" Margin="5" Clicked="{random}" Label="✧"/>
51+
52+
<!-- PlotBar isn't aware that multiple series are being plotted. It will always use the full width of the graph step along the axis. We use a child rectangle with a relative width and position to position the two bars beside each other. -->
53+
<c:PlotData Series="series0">
54+
<c:PlotBar Attractor="plotAttract">
55+
<Rectangle Width="40%" X="0%" Color="#4A4"/>
56+
</c:PlotBar>
57+
</c:PlotData>
58+
<c:PlotData Series="series1">
59+
<c:PlotBar Attractor="plotAttract">
60+
<Rectangle Width="40%" X="50%" Color="#4AA"/>
61+
</c:PlotBar>
62+
</c:PlotData>
63+
</Panel>
64+
65+
<c:PlotTicks Row="2" Column="3" Axis="X" StrokeWidth="2" StrokeColor="#004"/>
66+
<c:PlotAxis Row="3" Column="3" Axis="X">
67+
<Text ux:Template="Label" TextAlignment="Center" FontSize="15"
68+
Color="#000" Value="{Plot axis.value}"/>
69+
</c:PlotAxis>
70+
71+
</c:Plot>
72+
73+
</ChartPage>

‎Samples/Visualization/Charting/FullBarChart.ux

+67
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
<ChartPage ux:Class="FullBarChart" File="FullBarChart" Title="Selectable full height bars" xmlns:c="Fuse.Charting">
2+
<JavaScript>
3+
var Observable = require("FuseJS/Observable")
4+
5+
function Item( value, label ) {
6+
this.value = value
7+
this.label = label
8+
}
9+
exports.data = Observable(
10+
new Item(7, "2007"),
11+
new Item(20, "2008"),
12+
new Item(13, "2009"),
13+
new Item(27, "2010"),
14+
new Item(15, "2011"),
15+
new Item(5, "2012"),
16+
new Item(50, "2013")
17+
);
18+
</JavaScript>
19+
<c:Plot YRange="0,60" YAxisSteps="6" Margin="20,10,50,10" ux:Name="plot">
20+
<Selection/>
21+
<c:DataSeries Data="{data}"/>
22+
23+
<GridLayout Columns="50,20,1*" Rows="1*,20,50"/>
24+
25+
<c:PlotAxis Row="0" Column="0" Axis="Y">
26+
<Text ux:Template="Label" Alignment="CenterRight"
27+
Value="{Plot axis.value}" FontSize="20" Color="#000"/>
28+
</c:PlotAxis>
29+
<c:PlotTicks Axis="Y" StrokeWidth="1" StrokeColor="#000" AxisLine="1"/>
30+
31+
<Panel Row="0" Column="2">
32+
<c:PlotData>
33+
<Panel>
34+
<Selectable Value="{Plot data.label}"/>
35+
<WhileSelected>
36+
<Change a.Color="#FF9090" Duration="0.2"/>
37+
<Change b.Color="#90FF90" Duration="0.2"/>
38+
</WhileSelected>
39+
<c:PlotBar Color="#C89090" ux:Name="a" HitTestMode="None"/>
40+
<c:PlotBar Style="Full" Color="#90C890" ux:Name="b">
41+
<Tapped>
42+
<ToggleSelection/>
43+
</Tapped>
44+
</c:PlotBar>
45+
</Panel>
46+
</c:PlotData>
47+
</Panel>
48+
49+
<c:PlotTicks Row="1" Column="2" StrokeWidth="1" StrokeColor="#000" AxisLine="0"/>
50+
<Panel Row="2" Column="2" HitTestMode="None">
51+
<c:PlotAxisData Axis="X">
52+
<Panel>
53+
<Text X="{Plot axis.position} * 100%" Y="0" FontSize="18" Color="#000"
54+
Value="{Plot axis.label}" Anchor="105%,45%" TransformOrigin="Anchor" ux:Name="t">
55+
<Rotation Degrees="-60"/>
56+
<!-- https://github.com/fusetools/fuselibs/issues/4182 -->
57+
<Selectable Value="{Plot axis.label}"/>
58+
<WhileSelected>
59+
<Change t.Color="#080"/>
60+
</WhileSelected>
61+
</Text>
62+
</Panel>
63+
</c:PlotAxisData>
64+
</Panel>
65+
66+
</c:Plot>
67+
</ChartPage>

‎Samples/Visualization/Charting/HorzLine.ux

+85
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
<ChartPage ux:Class="HorzLine" File="HorzLine" Title="Decorated line chart" xmlns:c="Fuse.Charting">
2+
<JavaScript>
3+
var Observable = require("FuseJS/Observable")
4+
5+
function Item( value, label ) {
6+
this.value = value
7+
this.label = label
8+
}
9+
exports.data = Observable(
10+
new Item(7, "2007"),
11+
new Item(20, "2008"),
12+
new Item(13, "2009"),
13+
new Item(27, "2010"),
14+
new Item(15, "2011"),
15+
new Item(5, "2012"),
16+
new Item(50, "2013"),
17+
new Item(20, "2014"),
18+
new Item(30, "2015"),
19+
new Item(35, "2016"),
20+
new Item(15, "2017")
21+
);
22+
23+
exports.incrOffset = function() {
24+
plot.stepOffset(1)
25+
}
26+
exports.decrOffset = function() {
27+
plot.stepOffset(-1)
28+
}
29+
</JavaScript>
30+
<c:Plot XAxisMetric="OffsetCount" RangePadding="0.1" Margin="20,10,50,10" ux:Name="plot"
31+
DataExtend="1,1">
32+
<c:DataSeries Data="{data}"/>
33+
34+
<GridLayout Columns="50,20,1*" Rows="1*,20,20"/>
35+
36+
<c:PlotAxis Row="0" Column="0" Axis="Y">
37+
<Text ux:Template="Label" Alignment="CenterRight"
38+
Value="{Plot axis.value}k" FontSize="20" Color="#000"/>
39+
</c:PlotAxis>
40+
<c:PlotTicks Axis="Y" StrokeWidth="1" StrokeColor="#000" AxisLine="1"/>
41+
42+
<Panel ClipToBounds="true">
43+
<c:PlotArea YStepSize="40" XStepSize="100"/>
44+
45+
<Curve StrokeWidth="5" StrokeColor="#000">
46+
<c:PlotData>
47+
<c:PlotCurvePoint/>
48+
</c:PlotData>
49+
</Curve>
50+
51+
<Panel ZOffset="1">
52+
<c:PlotData>
53+
<c:PlotPoint>
54+
<Circle Width="10" Height="10" Color="#FFF"/>
55+
<Circle Width="20" Height="20" Color="#000"/>
56+
</c:PlotPoint>
57+
</c:PlotData>
58+
</Panel>
59+
60+
<!-- Show the minimum and maximum values of the data. These lines are for the entire data set, not just he part that is visible. -->
61+
<Rectangle Y="{Plot dataMaxline.y} * 100%" Height="2" Color="#ADA"/>
62+
<Rectangle Y="{Plot dataMinline.y} * 100%" Height="2" Color="#DAA"/>
63+
</Panel>
64+
65+
<c:PlotTicks Row="1" Column="2" StrokeWidth="1" StrokeColor="#000" AxisLine="0"/>
66+
<c:PlotAxis Row="2" Column="2" Axis="X" HitTestMode="None">
67+
<Text ux:Template="Label" TextAlignment="Center" FontSize="20" Color="#000"
68+
Value="{Plot axis.label}"/>
69+
</c:PlotAxis>
70+
71+
<Panel Row="1" RowSpan="2" Column="2">
72+
<WhileTrue Value="{Plot hasNext}">
73+
<Panel Layer="Overlay" Alignment="BottomRight" Anchor="0%,100%">
74+
<ChartButton Label="▶" Clicked="{incrOffset}" Padding="2,0"/>
75+
</Panel>
76+
</WhileTrue>
77+
78+
<WhileTrue Value="{Plot hasPrev}">
79+
<Panel Layer="Overlay" Alignment="BottomLeft" Anchor="100%,100%">
80+
<ChartButton Label="◀" Clicked="{decrOffset}" Padding="2,0"/>
81+
</Panel>
82+
</WhileTrue>
83+
</Panel>
84+
</c:Plot>
85+
</ChartPage>

0 commit comments

Comments
 (0)