plotlyjs 2.26: Add "top left" & "top center" side options to legend title

Author: kMutagene

src/Plotly.NET/CommonAbstractions/StyleParams.fs

@@ -3069,6 +3069,8 @@ module StyleParam =
     type Side =
         | Top
         | TopLeft
+        | TopCenter
+        | TopRight
         | Bottom
         | Left
         | Right
@@ -3077,6 +3079,8 @@ module StyleParam =
             function
             | Top -> "top"
             | TopLeft -> "top left"
+            | TopCenter -> "top center"
+            | TopRight -> "top right"
             | Bottom -> "bottom"
             | Left -> "left"
             | Right -> "right"

tests/Common/FSharpTestBase/TestCharts/UpstreamFeatures/2.26.fs

@@ -164,4 +164,50 @@ module ``N-sigma (std deviations) box plots`` =
             Trace2DStyle.BoxPlot(
                 SDMultiple = 2.
             )
-        )
+        )
+
+module ``New Side options for (legend) titles`` =
+    
+    let ``Point charts with horizontal legend title top left`` =
+        [
+            Chart.Point([1,2], UseDefaults = false)
+            Chart.Point([3,4], UseDefaults = false)
+        ]
+        |> Chart.combine
+        |> Chart.withLegendStyle(
+            Title = Title.init(
+                Text = "Legend title (top left)",
+                Side = StyleParam.Side.TopLeft
+            ),
+            Orientation = StyleParam.Orientation.Horizontal
+    )
+
+    let ``Point charts with horizontal legend title top center`` =
+        [
+            Chart.Point([1,2], UseDefaults = false)
+            Chart.Point([3,4], UseDefaults = false)
+        ]
+        |> Chart.combine
+        |> Chart.withLegendStyle(
+            Title = Title.init(
+                Text = "Legend title (top center)",
+                Side = StyleParam.Side.TopCenter
+            ),
+            Orientation = StyleParam.Orientation.Horizontal
+    )
+
+    let ``Point charts with horizontal legend title top right`` =
+        [
+            Chart.Point([1,2], UseDefaults = false)
+            Chart.Point([3,4], UseDefaults = false)
+        ]
+        |> Chart.combine
+        |> Chart.withLegendStyle(
+            Title = Title.init(
+                Text = "Legend title (top right)",
+                Side = StyleParam.Side.TopRight
+            ),
+            Orientation = StyleParam.Orientation.Horizontal
+    )
+
+

tests/ConsoleApps/FSharpConsole/Program.fs

@@ -11,16 +11,17 @@ open Newtonsoft.Json
 
 [<EntryPoint>]
 let main argv =
-    Chart.BoxPlot(
-        data = [-20; 1; 2; 3; 1; 2; 3; 3; 3; 3; 3; 1; 5; 20],
-        orientation = StyleParam.Orientation.Vertical,
-        SizeMode = StyleParam.BoxSizeMode.SD,
-        UseDefaults = false
-    )
-    |> GenericChart.mapTrace (
-        Trace2DStyle.BoxPlot(
-            SDMultiple = 2.
-        )
+    [
+        Chart.Point([1,2], UseDefaults = false)
+        Chart.Point([3,4], UseDefaults = false)
+    ]
+    |> Chart.combine
+    |> Chart.withLegendStyle(
+        Title = Title.init(
+            Text = "Legend title (top right)",
+            Side = StyleParam.Side.TopRight
+        ),
+        Orientation = StyleParam.Orientation.Horizontal
     )
     |> Chart.show
     0

tests/CoreTests/CoreTests/UpstreamFeatures/2.26.fs

@@ -81,4 +81,36 @@ module ``N-sigma (std deviations) box plots`` =
                     emptyLayout ``N-sigma (std deviations) box plots``.``2-sigma BoxPlot``
                 )
             ]
+        ]
+
+module ``New Side options for (legend) titles`` =
+    [<Tests>]
+    let ``New Title Side options`` =
+        testList "UpstreamFeatures.PlotlyJS_2_26" [
+            testList "New Side options for (legend) titles" [
+                testCase "top left data" ( fun () -> 
+                    """var data = [{"type":"scatter","mode":"markers","x":[1],"y":[2],"marker":{},"line":{}},{"type":"scatter","mode":"markers","x":[3],"y":[4],"marker":{},"line":{}}];"""
+                    |> chartGeneratedContains ``New Side options for (legend) titles``.``Point charts with horizontal legend title top left``
+                )
+                testCase "top left layout" ( fun () -> 
+                    """var layout = {"legend":{"orientation":"h","title":{"text":"Legend title (top left)","side":"top left"}}};"""
+                    |> chartGeneratedContains ``New Side options for (legend) titles``.``Point charts with horizontal legend title top left``
+                )
+                testCase "top center data" ( fun () -> 
+                    """var data = [{"type":"scatter","mode":"markers","x":[1],"y":[2],"marker":{},"line":{}},{"type":"scatter","mode":"markers","x":[3],"y":[4],"marker":{},"line":{}}];"""
+                    |> chartGeneratedContains ``New Side options for (legend) titles``.``Point charts with horizontal legend title top center``
+                )
+                testCase "top center layout" ( fun () -> 
+                    """var layout = {"legend":{"orientation":"h","title":{"text":"Legend title (top center)","side":"top center"}}};"""
+                    |> chartGeneratedContains ``New Side options for (legend) titles``.``Point charts with horizontal legend title top center``
+                )
+                testCase "top right data" ( fun () -> 
+                    """var data = [{"type":"scatter","mode":"markers","x":[1],"y":[2],"marker":{},"line":{}},{"type":"scatter","mode":"markers","x":[3],"y":[4],"marker":{},"line":{}}];"""
+                    |> chartGeneratedContains ``New Side options for (legend) titles``.``Point charts with horizontal legend title top right``
+                )
+                testCase "top right layout" ( fun () -> 
+                    """var layout = {"legend":{"orientation":"h","title":{"text":"Legend title (top right)","side":"top right"}}};"""
+                    |> chartGeneratedContains ``New Side options for (legend) titles``.``Point charts with horizontal legend title top right``
+                )
+            ]
         ]