Skip to content

Commit b82f0bb

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

File tree

16 files changed

+662
-50
lines changed

16 files changed

+662
-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 will look at the:
33+
- From 3 Dimensional color collections, where the inner arrays contain 3 (color dimensions without alpha channel) or 4 (color dimensions and alpha channel) values. The color model can be set separately as shown below.
34+
- From a 2 dimensional collection Plotly.NETs `ARGB` type that represents rgba values
35+
- From a base64 encoded image data source
36+
37+
## Creating Image charts from raw color arrays
38+
*)
39+
40+
// 3d collection containing color values
41+
open Plotly.NET
42+
open Plotly.NET.LayoutObjects
43+
open DynamicObj
44+
45+
let nparange (start: double, stop:double, step: double) =
46+
let stepsCount = ((stop-start) / step) |> int
47+
seq { for i in 0 .. stepsCount -> start + double(i) * step }
48+
|> Array.ofSeq
49+
50+
let steps = nparange(0., 5., 0.1)
51+
let scatters = steps
52+
|> Seq.map
53+
(fun step ->
54+
let x = nparange(0., 10., 0.01)
55+
let y = seq { for curX in x -> sin(step * curX) }
56+
let go = Chart2D.Chart.Scatter
57+
(
58+
x=x, y=y,
59+
mode=StyleParam.Mode.Lines,
60+
// The visible plot must be visible here or the chart is empty at the beginning
61+
Visible= (if step = 0. then StyleParam.Visible.True else StyleParam.Visible.False),
62+
Name="v = " + string(step),
63+
Color=Color.fromHex("#00CED1"),
64+
Width=6.
65+
)
66+
go
67+
)
68+
69+
let sliderSteps =
70+
steps |>
71+
Seq.indexed |>
72+
Seq.map (fun (i, step) ->
73+
let visible = (fun index -> index=i) |> Array.init(steps.Length)
74+
let title = sprintf "Slider switched to step: %s" (step |> string)
75+
let arg1 = new DynamicObj()
76+
let arg2 = new DynamicObj()
77+
visible |> DynObj.setValue arg1 "visible"
78+
title |> DynObj.setValue arg2 "title"
79+
SliderStep.init(Args = [arg1; arg2],
80+
Method = StyleParam.Method.Update,
81+
Label="v = " + string(step))
82+
)
83+
84+
let slider = Slider.init(
85+
CurrentValue=SliderCurrentValue.init(Prefix="Frequency: "),
86+
Pad=Pad.init(T=50),
87+
Steps=sliderSteps
88+
)
89+
let combinedChart = GenericChart.combine(scatters)
90+
let chart = combinedChart |> 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)