Skip to content

Html code generation tests: Finance charts + Polar charts + Categorical charts #111

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Aug 8, 2021
Merged

Html code generation tests: Finance charts + Polar charts + Categorical charts #111

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
f7e21bb
Candlestick charts tests
WhiteBlackGoose Aug 6, 2021
c790e67
Funnel charts tests
WhiteBlackGoose Aug 6, 2021
0698aaf
Funnel area charts tests
WhiteBlackGoose Aug 6, 2021
bd458cb
Polar charts tests
WhiteBlackGoose Aug 6, 2021
cc060f3
Windrose charts tests
WhiteBlackGoose Aug 6, 2021
e11bdb5
Sankey charts tests
WhiteBlackGoose Aug 6, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
151 changes: 0 additions & 151 deletions src/Plotly.NET/Playground.fsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -802,154 +802,3 @@ let values,labels =
|> Seq.unzip

let cols =[|"black";"blue"|]

let pointMapboxChart =
let cityNames = [
"Montreal"; "Toronto"; "Vancouver"; "Calgary"; "Edmonton";
"Ottawa"; "Halifax"; "Victoria"; "Winnepeg"; "Regina"
]

let lon = [
-73.57; -79.24; -123.06; -114.1; -113.28;
-75.43; -63.57; -123.21; -97.13; -104.6
]
let lat = [
45.5; 43.4; 49.13; 51.1; 53.34; 45.24;
44.64; 48.25; 49.89; 50.45
]
Chart.PointMapbox(
lon,lat,
Labels = cityNames,
TextPosition = StyleParam.TextPosition.TopCenter
)
|> Chart.withMapbox(
Mapbox.init(
Style=StyleParam.MapboxStyle.OpenStreetMap,
Center=(-104.6,50.45)
)
)


open Deedle
open FSharp.Data
open System.IO
open System.Text


let flightsChart =
let data =
"start_lat,start_lon,end_lat,end_lon,airline,airport1,airport2,cnt
32.89595056,-97.0372,35.04022222,-106.6091944,AA,DFW,ABQ,444
41.979595,-87.90446417,30.19453278,-97.66987194,AA,ORD,AUS,166
32.89595056,-97.0372,41.93887417,-72.68322833,AA,DFW,BDL,162
18.43941667,-66.00183333,41.93887417,-72.68322833,AA,SJU,BDL,56
32.89595056,-97.0372,33.56294306,-86.75354972,AA,DFW,BHM,168
25.79325,-80.29055556,36.12447667,-86.67818222,AA,MIA,BNA,56
32.89595056,-97.0372,42.3643475,-71.00517917,AA,DFW,BOS,422
25.79325,-80.29055556,42.3643475,-71.00517917,AA,MIA,BOS,392"
|> fun csv -> Frame.ReadCsvString(csv,true,separators=",")

let opacityVals : float [] = data.["cnt"] |> Series.values |> fun s -> s |> Seq.map (fun v -> v/(Seq.max s)) |> Array.ofSeq
let startCoords = Series.zipInner data.["start_lon"] data.["start_lat"]
let endCoords = Series.zipInner data.["end_lon"] data.["end_lat"]
let coords = Series.zipInner startCoords endCoords |> Series.values

coords
|> Seq.mapi (fun i (startCoords,endCoords) ->
Chart.LineMapbox(
[startCoords; endCoords],
Opacity = opacityVals.[i],
Color = "red"
)
)
|> Chart.Combine
|> Chart.withLegend(false)
|> Chart.withMapbox(
Mapbox.init(
Style=StyleParam.MapboxStyle.OpenStreetMap,
Center=(-97.0372,32.8959)
)
)
|> Chart.withMarginSize(0,0,50,0)
|> Chart.withTitle "Feb. 2011 American Airline flights"


let dataDensityMapbox =
"Date,Latitude,Longitude,Magnitude
01/02/1965,19.246,145.616,6.0
01/04/1965,1.8630000000000002,127.352,5.8
01/05/1965,-20.579,-173.972,6.2
01/08/1965,-59.076,-23.557,5.8
01/09/1965,11.937999999999999,126.427,5.8
01/10/1965,-13.405,166.62900000000002,6.7
01/12/1965,27.357,87.867,5.9
01/15/1965,-13.309000000000001,166.21200000000002,6.0
01/16/1965,-56.452,-27.043000000000003,6.0
01/17/1965,-24.563000000000002,178.487,5.8
01/17/1965,-6.807,108.988,5.9
01/24/1965,-2.608,125.95200000000001,8.2
01/29/1965,54.636,161.703,5.5
02/01/1965,-18.697,-177.864,5.6
02/02/1965,37.523,73.251,6.0
02/04/1965,-51.84,139.741,6.1
02/04/1965,51.251000000000005,178.715,8.7
02/04/1965,51.638999999999996,175.055,6.0
02/04/1965,52.528,172.007,5.7
02/04/1965,51.626000000000005,175.74599999999998,5.8
02/04/1965,51.037,177.84799999999998,5.9
02/04/1965,51.73,173.975,5.9
02/04/1965,51.775,173.058,5.7
02/04/1965,52.611000000000004,172.588,5.7
02/04/1965,51.831,174.368,5.7
02/04/1965,51.948,173.96900000000002,5.6
02/04/1965,51.443000000000005,179.605,7.3
02/04/1965,52.773,171.97400000000002,6.5
02/04/1965,51.772,174.696,5.6
02/04/1965,52.975,171.09099999999998,6.4
02/04/1965,52.99,170.87400000000002,5.8
02/04/1965,51.536,175.045,5.8
02/04/1965,13.245,-44.922,5.8
02/04/1965,51.812,174.206,5.7
02/05/1965,51.762,174.84099999999998,5.7
02/05/1965,52.438,174.321,6.3
02/05/1965,51.946000000000005,173.84,5.7
02/05/1965,51.738,174.56599999999997,6.0
02/05/1965,51.486999999999995,176.558,5.6
02/06/1965,53.008,-162.00799999999998,6.4
02/06/1965,52.184,175.505,6.2
02/06/1965,52.076,172.918,5.6
02/06/1965,51.744,175.213,5.7
02/06/1965,52.056999999999995,174.11599999999999,5.7
02/06/1965,53.191,-161.859,6.3
02/06/1965,51.446999999999996,176.46900000000002,5.8
02/07/1965,51.258,173.393,5.7
02/07/1965,52.031000000000006,175.41099999999997,5.7
02/07/1965,51.294,179.092,5.8
02/08/1965,55.223,165.426,5.9
02/09/1965,-18.718,169.386,5.6
02/09/1965,52.815,171.90400000000002,6.0
02/12/1965,52.188,172.752,5.8
02/15/1965,51.00899999999999,179.325,5.8
02/15/1965,3.0260000000000002,125.95100000000001,5.9
02/16/1965,38.908,142.095,5.7
02/17/1965,51.693999999999996,176.446,5.7
02/17/1965,21.526999999999997,143.08100000000002,5.6
02/18/1965,25.011,94.186,5.6"
|> fun d -> Frame.ReadCsvString(d,true,separators=",")

let lon = dataDensityMapbox.["Longitude"] |> Series.values
let lat= dataDensityMapbox.["Latitude"] |> Series.values
let magnitudes = dataDensityMapbox.["Magnitude"] |> Series.values
Chart.DensityMapbox(
lon,
lat,
Z = magnitudes,
Radius=8.,
Colorscale=StyleParam.Colorscale.Viridis
)
|> Chart.withMapbox(
Mapbox.init(
Style = StyleParam.MapboxStyle.StamenTerrain,
Center = (60.,30.)
)
) |> Chart.Show
117 changes: 117 additions & 0 deletions tests/Plotly.NET.Tests/HtmlCodegen/CategoricalCharts.fs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,117 @@
module Tests.CategoricalCharts

open Expecto
open Plotly.NET
open TestUtils
open Plotly.NET.GenericChart
open System

let parallelCategoriesChart =
let dims =
[
Dimensions.init(["Cat1";"Cat1";"Cat1";"Cat1";"Cat2";"Cat2";"Cat3"],Label="A")
Dimensions.init([0;1;0;1;0;0;0],Label="B",TickText=["YES";"NO"])
]

Chart.ParallelCategories(
dims,
Color=[0.;1.;0.;1.;0.;0.;0.],
Colorscale = StyleParam.Colorscale.Blackbody
)

[<Tests>]
let ``Parallel categories charts`` =
testList "CategoricalCharts.Parallel categories charts" [
testCase "Parallel categories data" ( fun () ->
"var data = [{\"type\":\"parcats\",\"dimensions\":[{\"values\":[\"Cat1\",\"Cat1\",\"Cat1\",\"Cat1\",\"Cat2\",\"Cat2\",\"Cat3\"],\"label\":\"A\"},{\"values\":[0,1,0,1,0,0,0],\"label\":\"B\",\"ticktext\":[\"YES\",\"NO\"]}],\"color\":[0.0,1.0,0.0,1.0,0.0,0.0,0.0],\"line\":{\"colorscale\":\"Blackbody\"}}];"
|> chartGeneratedContains parallelCategoriesChart
);
testCase "Parallel categories layout" ( fun () ->
emptyLayout parallelCategoriesChart
);
]


let parcoords1Chart =
let data =
[
"A",[1.;4.;3.4;0.7;]
"B",[3.;1.5;1.7;2.3;]
"C",[2.;4.;3.1;5.]
"D",[4.;2.;2.;4.;]
]
Chart.ParallelCoord(data,Color="blue")

let parcoordsChart =
let v = [|
Dimensions.init([|1.;4.;|],
StyleParam.Range.MinMax (1.,5.),StyleParam.Range.MinMax (1.,2.),Label="A");
Dimensions.init([|3.;1.5;|],
StyleParam.Range.MinMax (1.,5.),Label="B",Tickvals=[|1.5;3.;4.;5.;|]);
Dimensions.init([|2.;4.;|],
StyleParam.Range.MinMax (1.,5.),Label="C",Tickvals=[|1.;2.;4.;5.;|],
TickText=[|"txt 1";"txt 2";"txt 4";"txt 5";|]);
Dimensions.init([|4.;2.;|],
StyleParam.Range.MinMax (1.,5.),Label="D");
|]

let dyn = Trace("parcoords")

dyn?dimensions <- v
dyn?line <- Line.init(Color = "blue")

dyn
|> GenericChart.ofTraceObject

[<Tests>]
let ``Parallel coordinates charts`` =
testList "CategoricalCharts.Parallel coordinates charts" [
testCase "Parallel coordinates 1 data" ( fun () ->
"var data = [{\"type\":\"parcoords\",\"dimensions\":[{\"values\":[1.0,4.0,3.4,0.7],\"label\":\"A\"},{\"values\":[3.0,1.5,1.7,2.3],\"label\":\"B\"},{\"values\":[2.0,4.0,3.1,5.0],\"label\":\"C\"},{\"values\":[4.0,2.0,2.0,4.0],\"label\":\"D\"}],\"line\":{\"color\":\"blue\"}}];"
|> chartGeneratedContains parcoords1Chart
);
testCase "Parallel coordinates 1 layout" ( fun () ->
emptyLayout parcoords1Chart
);
testCase "Parallel coordinates data" ( fun () ->
"var data = [{\"type\":\"parcoords\",\"dimensions\":[{\"values\":[1.0,4.0],\"range\":[1.0,5.0],\"constraintrange\":[1.0,2.0],\"label\":\"A\"},{\"values\":[3.0,1.5],\"range\":[1.0,5.0],\"label\":\"B\",\"tickvals\":[1.5,3.0,4.0,5.0]},{\"values\":[2.0,4.0],\"range\":[1.0,5.0],\"label\":\"C\",\"tickvals\":[1.0,2.0,4.0,5.0],\"ticktext\":[\"txt 1\",\"txt 2\",\"txt 4\",\"txt 5\"]},{\"values\":[4.0,2.0],\"range\":[1.0,5.0],\"label\":\"D\"}],\"line\":{\"color\":\"blue\"}}];"
|> chartGeneratedContains parcoordsChart
);
testCase "Parallel coordinates layout" ( fun () ->
emptyLayout parcoordsChart
);
]


let sankey1 =
// create nodes
let n1 = Node.Create("a",color="Black")
let n2 = Node.Create("b",color="Red")
let n3 = Node.Create("c",color="Purple")
let n4 = Node.Create("d",color="Green")
let n5 = Node.Create("e",color="Orange")

// create links between nodes
let link1 = Link.Create(n1,n2,value=1.0)
let link2 = Link.Create(n2,n3,value=2.0)
let link3 = Link.Create(n1,n5,value=1.3)
let link4 = Link.Create(n4,n5,value=1.5)
let link5 = Link.Create(n3,n5,value=0.5)
Chart.Sankey(
[n1;n2;n3;n4;n5],
[link1;link2;link3;link4;link5]
)
|> Chart.withTitle "Sankey Sample"

[<Tests>]
let ``Sankey charts`` =
testList "CategoricalCharts.Sankey charts" [
testCase "Sankey data" ( fun () ->
"var data = [{\"type\":\"sankey\",\"node\":{\"label\":[\"a\",\"b\",\"c\",\"d\",\"e\"],\"color\":[\"Black\",\"Red\",\"Purple\",\"Green\",\"Orange\"]},\"link\":{\"source\":[0,1,0,3,2],\"target\":[1,2,4,4,4],\"value\":[1.0,2.0,1.3,1.5,0.5]}}];"
|> chartGeneratedContains sankey1
);
testCase "Sankey layout" ( fun () ->
"var layout = {\"title\":\"Sankey Sample\"};"
|> chartGeneratedContains sankey1
);
]
98 changes: 98 additions & 0 deletions tests/Plotly.NET.Tests/HtmlCodegen/FinanceCharts.fs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,98 @@
module Tests.FinanceCharts

open Expecto
open Plotly.NET
open TestUtils
open Plotly.NET.GenericChart
open System

let candles =
[|("2020-01-17T13:40:00", 0.68888, 0.68888, 0.68879, 0.6888);
("2020-01-17T13:41:00", 0.68883, 0.68884, 0.68875, 0.68877);
("2020-01-17T13:42:00", 0.68878, 0.68889, 0.68878, 0.68886);
("2020-01-17T13:43:00", 0.68886, 0.68886, 0.68876, 0.68879);
("2020-01-17T13:44:00", 0.68879, 0.68879, 0.68873, 0.68874);
("2020-01-17T13:45:00", 0.68875, 0.68877, 0.68867, 0.68868);
("2020-01-17T13:46:00", 0.68869, 0.68887, 0.68869, 0.68883);
("2020-01-17T13:47:00", 0.68883, 0.68899, 0.68883, 0.68899);
("2020-01-17T13:48:00", 0.68898, 0.689, 0.68885, 0.68889);
("2020-01-17T13:49:00", 0.68889, 0.68893, 0.68881, 0.68893);
("2020-01-17T13:50:00", 0.68891, 0.68896, 0.68886, 0.68891);
|]
|> Array.map (fun (d,o,h,l,c)->System.DateTime.Parse d, StockData.Create(o,h,l,c))

let candles1Chart = Chart.Candlestick candles


let candles2Chart =
let rangeslider = RangeSlider.init(Visible=false)
Chart.Candlestick candles
|> Chart.withX_AxisRangeSlider rangeslider

[<Tests>]
let ``Candlestick charts`` =
testList "FinanceCharts.Candlestick charts" [
testCase "Finance 1 data" ( fun () ->
"var data = [{\"type\":\"candlestick\",\"open\":[0.68888,0.68883,0.68878,0.68886,0.68879,0.68875,0.68869,0.68883,0.68898,0.68889,0.68891],\"high\":[0.68888,0.68884,0.68889,0.68886,0.68879,0.68877,0.68887,0.68899,0.689,0.68893,0.68896],\"low\":[0.68879,0.68875,0.68878,0.68876,0.68873,0.68867,0.68869,0.68883,0.68885,0.68881,0.68886],\"close\":[0.6888,0.68877,0.68886,0.68879,0.68874,0.68868,0.68883,0.68899,0.68889,0.68893,0.68891],\"x\":[\"2020-01-17T13:40:00\",\"2020-01-17T13:41:00\",\"2020-01-17T13:42:00\",\"2020-01-17T13:43:00\",\"2020-01-17T13:44:00\",\"2020-01-17T13:45:00\",\"2020-01-17T13:46:00\",\"2020-01-17T13:47:00\",\"2020-01-17T13:48:00\",\"2020-01-17T13:49:00\",\"2020-01-17T13:50:00\"],\"xaxis\":\"x\",\"yaxis\":\"y\"}];"
|> chartGeneratedContains candles1Chart
);
testCase "Finance 1 layout" ( fun () ->
emptyLayout candles1Chart
);
testCase "Finance 2 data" ( fun () ->
"var data = [{\"type\":\"candlestick\",\"open\":[0.68888,0.68883,0.68878,0.68886,0.68879,0.68875,0.68869,0.68883,0.68898,0.68889,0.68891],\"high\":[0.68888,0.68884,0.68889,0.68886,0.68879,0.68877,0.68887,0.68899,0.689,0.68893,0.68896],\"low\":[0.68879,0.68875,0.68878,0.68876,0.68873,0.68867,0.68869,0.68883,0.68885,0.68881,0.68886],\"close\":[0.6888,0.68877,0.68886,0.68879,0.68874,0.68868,0.68883,0.68899,0.68889,0.68893,0.68891],\"x\":[\"2020-01-17T13:40:00\",\"2020-01-17T13:41:00\",\"2020-01-17T13:42:00\",\"2020-01-17T13:43:00\",\"2020-01-17T13:44:00\",\"2020-01-17T13:45:00\",\"2020-01-17T13:46:00\",\"2020-01-17T13:47:00\",\"2020-01-17T13:48:00\",\"2020-01-17T13:49:00\",\"2020-01-17T13:50:00\"],\"xaxis\":\"x\",\"yaxis\":\"y\"}];"
|> chartGeneratedContains candles2Chart
);
testCase "Finance 2 layout" ( fun () ->
"var layout = {\"xaxis\":{\"rangeslider\":{\"visible\":false,\"yaxis\":{}}}};"
|> chartGeneratedContains candles2Chart
);
]


let funnelChart =
let y = [|"Sales person A"; "Sales person B"; "Sales person C"; "Sales person D"; "Sales person E"|]
let x = [|1200.; 909.4; 600.6; 300.; 80.|]

// Customize the connector lines used to connect the funnel bars
let connectorLine = Line.init (Color="royalblue", Dash=StyleParam.DrawingStyle.Dot, Width=3.)
let connector = FunnelConnector.init(Line=connectorLine)

// Customize the outline of the funnel bars
let line = Line.init(Width=2.,Color="3E4E88")

Chart.Funnel (x,y,Color="59D4E8", Line=line, Connector=connector)
|> Chart.withMarginSize(Left=100)

[<Tests>]
let ``Funnel charts`` =
testList "FinanceCharts.Funnel charts" [
testCase "Funnel data" ( fun () ->
"var data = [{\"type\":\"funnel\",\"x\":[1200.0,909.4,600.6,300.0,80.0],\"y\":[\"Sales person A\",\"Sales person B\",\"Sales person C\",\"Sales person D\",\"Sales person E\"],\"connector\":{\"line\":{\"color\":\"royalblue\",\"width\":3.0,\"dash\":\"dot\"}},\"marker\":{\"color\":\"59D4E8\",\"line\":{\"color\":\"3E4E88\",\"width\":2.0}}}];"
|> chartGeneratedContains funnelChart
);
testCase "Funnel layout" ( fun () ->
"var layout = {\"margin\":{\"l\":100}};"
|> chartGeneratedContains funnelChart
);
]



let funnelArea =
let values = [|5; 4; 3; 2; 1|]
let text = [|"The 1st"; "The 2nd"; "The 3rd"; "The 4th"; "The 5th"|]
let line = Line.init (Color="purple", Width=3.)
Chart.FunnelArea(Values=values, Text=text, Line=line)

[<Tests>]
let ``Funnel area charts`` =
testList "FinanceCharts.Funnel area charts" [
testCase "Funnel area data" ( fun () ->
"var data = [{\"type\":\"funnelarea\",\"values\":[5,4,3,2,1],\"marker\":{\"line\":{\"color\":\"purple\",\"width\":3.0}},\"domain\":{},\"text\":[\"The 1st\",\"The 2nd\",\"The 3rd\",\"The 4th\",\"The 5th\"]}];"
|> chartGeneratedContains funnelArea
);
testCase "Funnel area layout" ( fun () ->
emptyLayout funnelArea
);
]
Loading