Skip to content

Commit 9411e0a

Browse files
committed
Add update menu object abstraction and docs
1 parent a16f79d commit 9411e0a

14 files changed

Lines changed: 762 additions & 12 deletions

File tree

Plotly.NET.sln

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,8 @@ Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "docs", "docs", "{7B09CC0A-F
5555
docs\01_3_shapes.fsx = docs\01_3_shapes.fsx
5656
docs\01_4_annotations.fsx = docs\01_4_annotations.fsx
5757
docs\01_5_layout_images.fsx = docs\01_5_layout_images.fsx
58+
docs\01_6_Sliders.fsx = docs\01_6_Sliders.fsx
59+
docs\01_7_update_menus.fsx = docs\01_7_update_menus.fsx
5860
docs\02_0_line-scatter-plots.fsx = docs\02_0_line-scatter-plots.fsx
5961
docs\02_1_bar-and-column-charts.fsx = docs\02_1_bar-and-column-charts.fsx
6062
docs\02_2_area-plots.fsx = docs\02_2_area-plots.fsx
@@ -64,7 +66,6 @@ Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "docs", "docs", "{7B09CC0A-F
6466
docs\02_6_table.fsx = docs\02_6_table.fsx
6567
docs\02_7_heatmaps.fsx = docs\02_7_heatmaps.fsx
6668
docs\02_8_Images.fsx = docs\02_8_Images.fsx
67-
docs\02_9_Sliders.fsx = docs\02_9_Sliders.fsx
6869
docs\03_0_3d-scatter-plots.fsx = docs\03_0_3d-scatter-plots.fsx
6970
docs\03_1_3d-surface-plots.fsx = docs\03_1_3d-surface-plots.fsx
7071
docs\03_2_3d-mesh-plots.fsx = docs\03_2_3d-mesh-plots.fsx
Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
(**
22
---
33
title: Sliders
4-
category: Simple Charts
5-
categoryindex: 3
6-
index: 10
4+
category: Chart Layout
5+
categoryindex: 2
6+
index: 7
77
---
88
*)
99

docs/01_7_update_menus.fsx

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
(**
2+
---
3+
title: Update menus
4+
category: Chart Layout
5+
categoryindex: 2
6+
index: 8
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+
# Sliders
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 update menus in F#.
31+
*)
32+
33+
#r "nuget: FSharp.Data"
34+
#r "nuget: Deedle"
35+
36+
open FSharp.Data
37+
open Deedle
38+
open Plotly.NET
39+
open Plotly.NET.LayoutObjects
40+
41+
let data =
42+
"https://raw.githubusercontent.com/plotly/datasets/master/volcano.csv"
43+
|> Http.RequestString
44+
|> Frame.ReadCsvString
45+
|> Frame.toJaggedArray
46+
47+
let updateMenu =
48+
UpdateMenu.init(
49+
Buttons = [
50+
UpdateMenuButton.init(
51+
Args = ["type"; "surface"],
52+
Label = "Surface",
53+
Method = StyleParam.UpdateMethod.Restyle
54+
)
55+
UpdateMenuButton.init(
56+
Args = ["type"; "heatmap"],
57+
Label = "Heatmap",
58+
Method = StyleParam.UpdateMethod.Restyle
59+
)
60+
],
61+
Direction = StyleParam.UpdateMenuDirection.Down,
62+
Pad = Padding.init(R = 10, T = 10),
63+
ShowActive = true,
64+
X = 0.1,
65+
XAnchor = StyleParam.XAnchorPosition.Left,
66+
Y = 1.1,
67+
YAnchor = StyleParam.YAnchorPosition.Top
68+
)
69+
70+
let updateChart =
71+
Chart.Surface(
72+
data
73+
)
74+
|> Chart.withUpdateMenu updateMenu
75+
|> Chart.withAnnotation (
76+
Annotation.init(
77+
Text = "Trace Type:",
78+
ShowArrow = false,
79+
X = 0,
80+
Y = 1.085,
81+
YRef = "paper",
82+
Align = StyleParam.AnnotationAlignment.Left
83+
)
84+
)
85+
|> Chart.withScene(
86+
Scene.init(
87+
AspectRatio = AspectRatio.init(X=1.,Y=1.,Z=0.7),
88+
AspectMode = StyleParam.AspectMode.Manual
89+
)
90+
)
91+
|> Chart.withLayoutStyle(
92+
Width = 800,
93+
Height = 900,
94+
AutoSize = false,
95+
Margin = Margin.init(0,0,0,0)
96+
)
97+
98+
(*** condition: ipynb ***)
99+
#if IPYNB
100+
updateChart
101+
#endif // IPYNB
102+
103+
(***hide***)
104+
updateChart |> GenericChart.toChartHTML
105+
(***include-it-raw***)

src/Plotly.NET/CSharpLayer/GenericChartExtensions.fs

Lines changed: 159 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -422,6 +422,151 @@ module GenericChartExtensions =
422422
[<Extension>]
423423
member this.WithLayout(layout: Layout) = GenericChart.addLayout layout this
424424

425+
// Set the Layout style of a Chart
426+
[<CompiledName("WithLayoutStyle")>]
427+
member this.WithLayoutStyle
428+
(
429+
[<Optional; DefaultParameterValue(null)>] ?Title: Title,
430+
[<Optional; DefaultParameterValue(null)>] ?ShowLegend: bool,
431+
[<Optional; DefaultParameterValue(null)>] ?Legend: Legend,
432+
[<Optional; DefaultParameterValue(null)>] ?Margin: Margin,
433+
[<Optional; DefaultParameterValue(null)>] ?AutoSize: bool,
434+
[<Optional; DefaultParameterValue(null)>] ?Width: int,
435+
[<Optional; DefaultParameterValue(null)>] ?Height: int,
436+
[<Optional; DefaultParameterValue(null)>] ?Font: Font,
437+
[<Optional; DefaultParameterValue(null)>] ?UniformText: UniformText,
438+
[<Optional; DefaultParameterValue(null)>] ?Separators: string,
439+
[<Optional; DefaultParameterValue(null)>] ?PaperBGColor: Color,
440+
[<Optional; DefaultParameterValue(null)>] ?PlotBGColor: Color,
441+
[<Optional; DefaultParameterValue(null)>] ?AutoTypeNumbers: StyleParam.AutoTypeNumbers,
442+
[<Optional; DefaultParameterValue(null)>] ?Colorscale: DefaultColorScales,
443+
[<Optional; DefaultParameterValue(null)>] ?Colorway: Color,
444+
[<Optional; DefaultParameterValue(null)>] ?ModeBar: ModeBar,
445+
[<Optional; DefaultParameterValue(null)>] ?HoverMode: StyleParam.HoverMode,
446+
[<Optional; DefaultParameterValue(null)>] ?ClickMode: StyleParam.ClickMode,
447+
[<Optional; DefaultParameterValue(null)>] ?DragMode: StyleParam.DragMode,
448+
[<Optional; DefaultParameterValue(null)>] ?SelectDirection: StyleParam.SelectDirection,
449+
[<Optional; DefaultParameterValue(null)>] ?HoverDistance: int,
450+
[<Optional; DefaultParameterValue(null)>] ?SpikeDistance: int,
451+
[<Optional; DefaultParameterValue(null)>] ?Hoverlabel: Hoverlabel,
452+
[<Optional; DefaultParameterValue(null)>] ?Transition: Transition,
453+
[<Optional; DefaultParameterValue(null)>] ?DataRevision: string,
454+
[<Optional; DefaultParameterValue(null)>] ?UIRevision: string,
455+
[<Optional; DefaultParameterValue(null)>] ?EditRevision: string,
456+
[<Optional; DefaultParameterValue(null)>] ?SelectRevision: string,
457+
[<Optional; DefaultParameterValue(null)>] ?Template: DynamicObj,
458+
[<Optional; DefaultParameterValue(null)>] ?Meta: string,
459+
[<Optional; DefaultParameterValue(null)>] ?Computed: string,
460+
[<Optional; DefaultParameterValue(null)>] ?Grid: LayoutGrid,
461+
[<Optional; DefaultParameterValue(null)>] ?Calendar: StyleParam.Calendar,
462+
[<Optional; DefaultParameterValue(null)>] ?NewShape: Shape,
463+
[<Optional; DefaultParameterValue(null)>] ?ActiveShape: ActiveShape,
464+
[<Optional; DefaultParameterValue(null)>] ?HideSources: bool,
465+
[<Optional; DefaultParameterValue(null)>] ?BarGap: float,
466+
[<Optional; DefaultParameterValue(null)>] ?BarGroupGap: float,
467+
[<Optional; DefaultParameterValue(null)>] ?BarMode: StyleParam.BarMode,
468+
[<Optional; DefaultParameterValue(null)>] ?BarNorm: StyleParam.BarNorm,
469+
[<Optional; DefaultParameterValue(null)>] ?ExtendPieColors: bool,
470+
[<Optional; DefaultParameterValue(null)>] ?HiddenLabels: seq<#IConvertible>,
471+
[<Optional; DefaultParameterValue(null)>] ?PieColorWay: Color,
472+
[<Optional; DefaultParameterValue(null)>] ?BoxGap: float,
473+
[<Optional; DefaultParameterValue(null)>] ?BoxGroupGap: float,
474+
[<Optional; DefaultParameterValue(null)>] ?BoxMode: StyleParam.BoxMode,
475+
[<Optional; DefaultParameterValue(null)>] ?ViolinGap: float,
476+
[<Optional; DefaultParameterValue(null)>] ?ViolinGroupGap: float,
477+
[<Optional; DefaultParameterValue(null)>] ?ViolinMode: StyleParam.ViolinMode,
478+
[<Optional; DefaultParameterValue(null)>] ?WaterfallGap: float,
479+
[<Optional; DefaultParameterValue(null)>] ?WaterfallGroupGap: float,
480+
[<Optional; DefaultParameterValue(null)>] ?WaterfallMode: StyleParam.WaterfallMode,
481+
[<Optional; DefaultParameterValue(null)>] ?FunnelGap: float,
482+
[<Optional; DefaultParameterValue(null)>] ?FunnelGroupGap: float,
483+
[<Optional; DefaultParameterValue(null)>] ?FunnelMode: StyleParam.FunnelMode,
484+
[<Optional; DefaultParameterValue(null)>] ?ExtendFunnelAreaColors: bool,
485+
[<Optional; DefaultParameterValue(null)>] ?FunnelAreaColorWay: Color,
486+
[<Optional; DefaultParameterValue(null)>] ?ExtendSunBurstColors: bool,
487+
[<Optional; DefaultParameterValue(null)>] ?SunBurstColorWay: Color,
488+
[<Optional; DefaultParameterValue(null)>] ?ExtendTreeMapColors: bool,
489+
[<Optional; DefaultParameterValue(null)>] ?TreeMapColorWay: Color,
490+
[<Optional; DefaultParameterValue(null)>] ?ExtendIcicleColors: bool,
491+
[<Optional; DefaultParameterValue(null)>] ?IcicleColorWay: Color,
492+
[<Optional; DefaultParameterValue(null)>] ?Annotations: seq<Annotation>,
493+
[<Optional; DefaultParameterValue(null)>] ?Shapes: seq<Shape>,
494+
[<Optional; DefaultParameterValue(null)>] ?Images: seq<LayoutImage>,
495+
[<Optional; DefaultParameterValue(null)>] ?Sliders: seq<Slider>,
496+
[<Optional; DefaultParameterValue(null)>] ?UpdateMenus: seq<UpdateMenu>
497+
) =
498+
this
499+
|> Chart.withLayoutStyle (
500+
?Title = Title,
501+
?ShowLegend = ShowLegend,
502+
?Legend = Legend,
503+
?Margin = Margin,
504+
?AutoSize = AutoSize,
505+
?Width = Width,
506+
?Height = Height,
507+
?Font = Font,
508+
?UniformText = UniformText,
509+
?Separators = Separators,
510+
?PaperBGColor = PaperBGColor,
511+
?PlotBGColor = PlotBGColor,
512+
?AutoTypeNumbers = AutoTypeNumbers,
513+
?Colorscale = Colorscale,
514+
?Colorway = Colorway,
515+
?ModeBar = ModeBar,
516+
?HoverMode = HoverMode,
517+
?ClickMode = ClickMode,
518+
?DragMode = DragMode,
519+
?SelectDirection = SelectDirection,
520+
?HoverDistance = HoverDistance,
521+
?SpikeDistance = SpikeDistance,
522+
?Hoverlabel = Hoverlabel,
523+
?Transition = Transition,
524+
?DataRevision = DataRevision,
525+
?UIRevision = UIRevision,
526+
?EditRevision = EditRevision,
527+
?SelectRevision = SelectRevision,
528+
?Template = Template,
529+
?Meta = Meta,
530+
?Computed = Computed,
531+
?Grid = Grid,
532+
?Calendar = Calendar,
533+
?NewShape = NewShape,
534+
?ActiveShape = ActiveShape,
535+
?HideSources = HideSources,
536+
?BarGap = BarGap,
537+
?BarGroupGap = BarGroupGap,
538+
?BarMode = BarMode,
539+
?BarNorm = BarNorm,
540+
?ExtendPieColors = ExtendPieColors,
541+
?HiddenLabels = HiddenLabels,
542+
?PieColorWay = PieColorWay,
543+
?BoxGap = BoxGap,
544+
?BoxGroupGap = BoxGroupGap,
545+
?BoxMode = BoxMode,
546+
?ViolinGap = ViolinGap,
547+
?ViolinGroupGap = ViolinGroupGap,
548+
?ViolinMode = ViolinMode,
549+
?WaterfallGap = WaterfallGap,
550+
?WaterfallGroupGap = WaterfallGroupGap,
551+
?WaterfallMode = WaterfallMode,
552+
?FunnelGap = FunnelGap,
553+
?FunnelGroupGap = FunnelGroupGap,
554+
?FunnelMode = FunnelMode,
555+
?ExtendFunnelAreaColors = ExtendFunnelAreaColors,
556+
?FunnelAreaColorWay = FunnelAreaColorWay,
557+
?ExtendSunBurstColors = ExtendSunBurstColors,
558+
?SunBurstColorWay = SunBurstColorWay,
559+
?ExtendTreeMapColors = ExtendTreeMapColors,
560+
?TreeMapColorWay = TreeMapColorWay,
561+
?ExtendIcicleColors = ExtendIcicleColors,
562+
?IcicleColorWay = IcicleColorWay,
563+
?Annotations = Annotations,
564+
?Shapes = Shapes,
565+
?Images = Images,
566+
?Sliders = Sliders,
567+
?UpdateMenus = UpdateMenus
568+
)
569+
425570
// Set the LayoutGrid options of a Chart
426571
[<CompiledName("WithLayoutGrid")>]
427572
[<Extension>]
@@ -847,6 +992,20 @@ module GenericChartExtensions =
847992
) =
848993
this |> Chart.withLayoutImages (images, ?Append = Append)
849994

995+
[<CompiledName("WithUpdateMenu")>]
996+
[<Extension>]
997+
member this.WithUpdateMenu(updateMenu: UpdateMenu, [<Optional; DefaultParameterValue(true)>] ?Append: bool) =
998+
this |> Chart.withUpdateMenu (updateMenu, ?Append = Append)
999+
1000+
[<CompiledName("WithUpdateMenus")>]
1001+
[<Extension>]
1002+
member this.WithUpdateMenus
1003+
(
1004+
updateMenus: seq<UpdateMenu>,
1005+
[<Optional; DefaultParameterValue(true)>] ?Append: bool
1006+
) =
1007+
this |> Chart.withUpdateMenus (updateMenus, ?Append = Append)
1008+
8501009
[<CompiledName("WithSlider")>]
8511010
[<Extension>]
8521011
member this.WithSlider(slider: Slider) = this |> Chart.withSlider (slider)

0 commit comments

Comments
 (0)