1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90

namespace WorldBank

open IntelliFactory.WebSharper
open IntelliFactory.WebSharper.Html5
open IntelliFactory.WebSharper.Html
open IntelliFactory.WebSharper.JQuery
open IntelliFactory.WebSharper.Highcharts

[<JavaScript>]
module WorldBankChartPig =
    open IntelliFactory.WebSharper.Piglets
    open WBData    

    module Client =
            
        let Chart (country : WBData.Country) =              
            Div[] |>! OnAfterRender (fun el ->                          
                Highcharts.Create(JQuery.Of el.Body,
                    HighchartsCfg(
                        (*Chart = ChartCfg(
                            Width = 1000.
                        ),*)
                        Title = TitleCfg(
                            Text = country.Name,
                            X = -20.
                        ),
                        Subtitle = SubtitleCfg(
                            Text = "Source: WorldBank",
                            X = -20.
                        ),        
                        XAxis = XAxisCfg(
                            Categories = country.Years//, Labels = XAxisLabelsCfg(Step = 5.0)
                        ),
                        YAxis = YAxisCfg(
                            Title = YAxisTitleCfg(
                                Text = "%"        
                            ),
                            PlotLines = [|
                                YAxisPlotLinesCfg(
                                    Value = 0.,
                                    Width = 1.,
                                    Color = "#808080"
                                )
                            |]
                        ),
                        Tooltip = TooltipCfg(
                            ValueSuffix = "%"    
                        ), 
                        Legend = LegendCfg(
                            Layout = "vertical",
                            Align = "right",
                            VerticalAlign = "middle",
                            BorderWidth = 0.
                        ),
                        Series = [|
                            SeriesCfg(
                                Name = country.Country,
                                Data = As country.Values
                            )                        
                        |]
                    )
                ) |> ignore
            )
        
        let dataSelector (data : Country) =
            Piglet.Return (fun x -> x )
            <*> Piglet.Yield data    
         
        let d = Remoting.us()
        
        let renderCountryPiglet (countryS : Stream<Country>) =
            let countries = Remoting.countriesPig()
            Div [
                Div [
                    Controls.Select countryS countries
                    Div [] |> Controls.Show countryS (fun x -> [Chart x])
                    ]

                ]
                    
        let countryForm () =            
            dataSelector d
            |> Piglet.Render renderCountryPiglet 

    let Main () = Div [Client.countryForm()]

type WBViewerPig() =
    inherit Web.Control()
    [<JavaScript>]
    override this.Body = WorldBankChartPig.Main () :>_