Skip to content

Commit bd3aeb5

Browse files
author
Artem Makhno
committed
#120 Add slider + tests without docs
1 parent 41e1e11 commit bd3aeb5

File tree

16 files changed

+664
-50
lines changed

16 files changed

+664
-50
lines changed

‎Plotly.NET.sln

+1
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,7 @@ Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "docs", "docs", "{7B09CC0A-F
6161
docs\02_6_table.fsx = docs\02_6_table.fsx
6262
docs\02_7_heatmaps.fsx = docs\02_7_heatmaps.fsx
6363
docs\02_8_Images.fsx = docs\02_8_Images.fsx
64+
docs\02_9_Sliders.fsx = docs\02_9_Sliders.fsx
6465
docs\03_0_3d-scatter-plots.fsx = docs\03_0_3d-scatter-plots.fsx
6566
docs\03_1_3d-surface-plots.fsx = docs\03_1_3d-surface-plots.fsx
6667
docs\03_2_3d-mesh-plots.fsx = docs\03_2_3d-mesh-plots.fsx

‎docs/02_9_Sliders.fsx

+99
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
(**
2+
---
3+
title: Sliders
4+
category: Simple Charts
5+
categoryindex: 3
6+
index: 10
7+
---
8+
*)
9+
10+
(*** hide ***)
11+
12+
(*** condition: prepare ***)
13+
#r "nuget: Newtonsoft.JSON, 12.0.3"
14+
#r "nuget: DynamicObj"
15+
#r "../bin/Plotly.NET/netstandard2.0/Plotly.NET.dll"
16+
17+
(*** condition: ipynb ***)
18+
#if IPYNB
19+
#r "nuget: Plotly.NET, {{fsdocs-package-version}}"
20+
#r "nuget: Plotly.NET.Interactive, {{fsdocs-package-version}}"
21+
#endif // IPYNB
22+
23+
(**
24+
# Images
25+
26+
[![Binder]({{root}}img/badge-binder.svg)](https://mybinder.org/v2/gh/plotly/Plotly.NET/gh-pages?filepath={{fsdocs-source-basename}}.ipynb) 
27+
[![Script]({{root}}img/badge-script.svg)]({{root}}{{fsdocs-source-basename}}.fsx) 
28+
[![Notebook]({{root}}img/badge-notebook.svg)]({{root}}{{fsdocs-source-basename}}.ipynb)
29+
30+
*Summary:* This example shows how to create charts with sliders in F#.
31+
32+
The sliders give the option of passing the arguments to the Plotly chart. In the example we use the visibility parameter to make visible the step chosen in the slider.
33+
*)
34+
35+
open Plotly.NET
36+
open Plotly.NET.LayoutObjects
37+
38+
let nparange (start: double, stop:double, step: double) =
39+
let stepsCount = ((stop-start) / step) |> int
40+
seq { for i in 0 .. stepsCount -> start + double(i) * step }
41+
|> Array.ofSeq
42+
43+
let steps = nparange(0., 5., 0.1)
44+
let scatters = steps
45+
|> Seq.map
46+
(fun step ->
47+
let x = nparange(0., 10., 0.01)
48+
let y = seq { for curX in x -> sin(step * curX) }
49+
// Some plot must be visible here or the chart is empty at the beginning
50+
let chartVisibility = if step = 0. then StyleParam.Visible.True else StyleParam.Visible.False;
51+
let go =
52+
Chart2D.Chart.Scatter
53+
(
54+
x=x, y=y,
55+
mode=StyleParam.Mode.Lines,
56+
Name="v = " + string(step),
57+
Color=Color.fromHex("#00CED1"),
58+
Width=6.
59+
)
60+
|> Chart.withTraceName(Visible=chartVisibility)
61+
go
62+
)
63+
64+
let sliderSteps =
65+
steps |>
66+
Seq.indexed |>
67+
Seq.map (fun (i, step) ->
68+
let visible =
69+
(fun index -> index=i)
70+
|> Array.init(steps.Length)
71+
|> box
72+
let title =
73+
sprintf "Slider switched to step: %s"
74+
(step |> string)
75+
|> box
76+
let args = ["visible", visible; "title", title]
77+
SliderStep.init(Args = args,
78+
Method = StyleParam.Method.Update,
79+
Label="v = " + string(step))
80+
)
81+
82+
let slider = Slider.init(
83+
CurrentValue=SliderCurrentValue.init(Prefix="Frequency: "),
84+
Padding=Padding.init(T=50),
85+
Steps=sliderSteps
86+
)
87+
let combinedChart = GenericChart.combine(scatters)
88+
let chart =
89+
combinedChart
90+
|> Chart.withSlider slider
91+
92+
(*** condition: ipynb ***)
93+
#if IPYNB
94+
chart
95+
#endif // IPYNB
96+
97+
(***hide***)
98+
chart |> GenericChart.toChartHTML
99+
(***include-it-raw***)

‎src/Plotly.NET/CSharpLayer/GenericChartExtensions.fs

+11-1
Original file line numberDiff line numberDiff line change
@@ -714,4 +714,14 @@ module GenericChartExtensions =
714714
[<CompiledName("WithLayoutImages")>]
715715
[<Extension>]
716716
member this.WithLayoutImages(images:seq<LayoutImage>, [<Optional;DefaultParameterValue(true)>]?Append:bool) =
717-
this |> Chart.withLayoutImages(images, ?Append = Append)
717+
this |> Chart.withLayoutImages(images, ?Append = Append)
718+
719+
[<CompiledName("WithSlider")>]
720+
[<Extension>]
721+
member this.WithSlider(slider:Slider) =
722+
this |> Chart.withSlider(slider)
723+
724+
[<CompiledName("WithSliders")>]
725+
[<Extension>]
726+
member this.WithSliders(sliders:seq<Slider>) =
727+
this |> Chart.withSliders sliders

‎src/Plotly.NET/ChartAPI/Chart.fs

+19-2
Original file line numberDiff line numberDiff line change
@@ -854,7 +854,7 @@ type Chart =
854854
)
855855
let updatedLayout = layout |> Layout.SetLayoutGrid updatedGrid
856856
GenericChart.setLayout updatedLayout ch)
857-
857+
858858
[<CompiledName("WithConfig")>]
859859
static member withConfig (config:Config) =
860860
(fun (ch:GenericChart) ->
@@ -1710,4 +1710,21 @@ type Chart =
17101710
[<Optional;DefaultParameterValue(true)>] ?Append: bool
17111711
) =
17121712

1713-
Chart.withLayoutImages([image], ?Append = Append)
1713+
Chart.withLayoutImages([image], ?Append = Append)
1714+
1715+
[<CompiledName("WithSliders")>]
1716+
static member withSliders
1717+
(
1718+
sliders:seq<Slider>
1719+
) =
1720+
fun (ch:GenericChart) ->
1721+
ch
1722+
|> GenericChart.mapLayout
1723+
(Layout.style (Sliders = sliders))
1724+
1725+
[<CompiledName("WithSlider")>]
1726+
static member withSlider
1727+
(
1728+
slider:Slider
1729+
) =
1730+
Chart.withSliders([slider])

‎src/Plotly.NET/CommonAbstractions/StyleParams.fs

+25-1
Original file line numberDiff line numberDiff line change
@@ -1401,6 +1401,25 @@ module StyleParam =
14011401
//--------------------------
14021402
// #M#
14031403
//--------------------------
1404+
1405+
[<RequireQualifiedAccess>]
1406+
type Method =
1407+
| Restyle
1408+
| Relayout
1409+
| Animate
1410+
| Update
1411+
| Skip
1412+
1413+
static member toString = function
1414+
| Restyle -> "restyle"
1415+
| Relayout -> "relayout"
1416+
| Animate -> "animate"
1417+
| Update -> "update"
1418+
| Skip -> "skip"
1419+
1420+
static member convert = Method.toString >> box
1421+
override this.ToString() = this |> Method.toString
1422+
member this.Convert() = this |> Method.convert
14041423

14051424
[<RequireQualifiedAccess>]
14061425
type ModeBarButton =
@@ -2676,12 +2695,17 @@ module StyleParam =
26762695
type Visible =
26772696
| True | False | LegendOnly
26782697

2698+
static member toObject = function
2699+
| True -> box(true)
2700+
| False -> box(false)
2701+
| LegendOnly -> box("legendonly")
2702+
26792703
static member toString = function
26802704
| True -> "true"
26812705
| False -> "false"
26822706
| LegendOnly -> "legendonly"
26832707

2684-
static member convert = Visible.toString >> box
2708+
static member convert = Visible.toObject >> box
26852709
override this.ToString() = this |> Visible.toString
26862710
member this.Convert() = this |> Visible.convert
26872711

‎src/Plotly.NET/Layout/Layout.fs

+7-3
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,8 @@ type Layout() =
7777
[<Optional;DefaultParameterValue(null)>] ?IcicleColorWay : Color,
7878
[<Optional;DefaultParameterValue(null)>] ?Annotations : seq<Annotation>,
7979
[<Optional;DefaultParameterValue(null)>] ?Shapes : seq<Shape>,
80-
[<Optional;DefaultParameterValue(null)>] ?Images : seq<LayoutImage>
80+
[<Optional;DefaultParameterValue(null)>] ?Images : seq<LayoutImage>,
81+
[<Optional;DefaultParameterValue(null)>] ?Sliders : seq<Slider>
8182
) =
8283
Layout()
8384
|> Layout.style
@@ -147,7 +148,8 @@ type Layout() =
147148
?IcicleColorWay = IcicleColorWay ,
148149
?Annotations = Annotations ,
149150
?Shapes = Shapes ,
150-
?Images = Images
151+
?Images = Images ,
152+
?Sliders = Sliders
151153
)
152154

153155
// Applies the styles to Layout()
@@ -218,7 +220,8 @@ type Layout() =
218220
[<Optional;DefaultParameterValue(null)>] ?IcicleColorWay : Color,
219221
[<Optional;DefaultParameterValue(null)>] ?Annotations : seq<Annotation>,
220222
[<Optional;DefaultParameterValue(null)>] ?Shapes : seq<Shape>,
221-
[<Optional;DefaultParameterValue(null)>] ?Images : seq<LayoutImage>
223+
[<Optional;DefaultParameterValue(null)>] ?Images : seq<LayoutImage>,
224+
[<Optional;DefaultParameterValue(null)>] ?Sliders : seq<Slider>
222225
) =
223226
(fun (layout:Layout) ->
224227

@@ -288,6 +291,7 @@ type Layout() =
288291
Annotations |> DynObj.setValueOpt layout "annotations"
289292
Shapes |> DynObj.setValueOpt layout "shapes"
290293
Images |> DynObj.setValueOpt layout "images"
294+
Sliders |> DynObj.setValueOpt layout "sliders"
291295

292296
layout
293297
)

‎src/Plotly.NET/Layout/ObjectAbstractions/Common/Padding.fs

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
namespace Plotly.NET.LayoutObjects
2+
3+
open DynamicObj
4+
5+
type Padding() =
6+
inherit DynamicObj ()
7+
8+
/// <summary>
9+
/// Set the padding of the slider component along each side
10+
/// </summary>
11+
/// <param name="B">The amount of padding (in px) along the bottom of the component</param>
12+
/// <param name="L">The amount of padding (in px) on the left side of the component</param>
13+
/// <param name="R">The amount of padding (in px) on the right side of the component</param>
14+
/// <param name="T">The amount of padding (in px) along the top of the component</param>
15+
static member init
16+
(
17+
?B : int,
18+
?L : int,
19+
?R : int,
20+
?T : int
21+
) = Padding() |> Padding.style
22+
(
23+
?B=B,
24+
?L=L,
25+
?R=R,
26+
?T=T
27+
)
28+
29+
static member style(?B : int, ?L : int, ?R : int, ?T : int) = (fun (padding : Padding) ->
30+
B |> DynObj.setValueOpt padding "b"
31+
L |> DynObj.setValueOpt padding "l"
32+
R |> DynObj.setValueOpt padding "r"
33+
T |> DynObj.setValueOpt padding "t"
34+
padding)

0 commit comments

Comments
 (0)