Add tests layout for adding upstream features from plotlyjs, add tests for shapelabel

Author: kMutagene

2.19.fs

@@ -21,6 +21,7 @@
     <Compile Include="TestCharts\ChartCarpetTestCharts.fs" />
     <Compile Include="TestCharts\ChartDomainTestCharts.fs" />
     <Compile Include="TestCharts\ChartSmithTestCharts.fs" />
+    <Compile Include="TestCharts\UpstreamFeatures\2.19.fs" />
   </ItemGroup>
 
   <ItemGroup>

tests/Common/FSharpTestBase/FSharpTestBase.fsproj

@@ -0,0 +1,57 @@
+module PlotlyJS_2_19_TestCharts
+
+open Plotly.NET
+open Plotly.NET.TraceObjects
+open Plotly.NET.LayoutObjects
+
+module ShapeLabel =
+    
+    let internal x  = [1.; 2.; 3.; 4.; 5.; 6.; 7.; 8.; 9.; 10.; ]
+    let internal y = [2.; 1.5; 5.; 1.5; 3.; 2.5; 2.5; 1.5; 3.5; 1.]
+    
+    let internal shapes = 
+        [
+            Shape.init(
+                ShapeType=StyleParam.ShapeType.Rectangle,
+                X0=2.,X1=4.,Y0=3.,Y1=4.,
+                Opacity=0.3,
+                FillColor=Color.fromHex "#d3d3d3",
+                Label = ShapeLabel.init(Text="Rectangle")
+            )
+            Shape.init(
+                ShapeType=StyleParam.ShapeType.Circle,
+                X0=5.,X1=7.,Y0=3.,Y1=4.,
+                Opacity=0.3,
+                FillColor=Color.fromHex "#d3d3d3",
+                Label = ShapeLabel.init(Text="Circle", Padding = 20)
+            )
+            Shape.init(
+                ShapeType=StyleParam.ShapeType.Line,
+                    X0=1.,X1=2.,Y0=1.,Y1=2.,
+                    Opacity=0.3,
+                    FillColor=Color.fromHex "#d3d3d3",
+                    Label = ShapeLabel.init(Text="Line")
+            )
+            Shape.init(
+                ShapeType=StyleParam.ShapeType.SvgPath,
+                Path=" M 3,7 L2,8 L2,9 L3,10, L4,10 L5,9 L5,8 L4,7 Z",
+                Label = ShapeLabel.init(Text="SVGPath", TextAngle = StyleParam.TextAngle.Degrees 33)
+            )
+        ]
+
+
+    let ``Rectangular shape with label`` =
+        Chart.Line(x = x,y = y, UseDefaults = false)    
+        |> Chart.withShape(shapes[0])
+
+    let ``Circular shape with label and padding`` =
+        Chart.Line(x = x,y = y, UseDefaults = false)    
+        |> Chart.withShape(shapes[1])
+
+    let ``Line shape with label`` =
+        Chart.Line(x = x,y = y, UseDefaults = false)    
+        |> Chart.withShape(shapes[2])
+
+    let ``SVGPath shape with angled label`` =
+        Chart.Line(x = x,y = y, UseDefaults = false)    
+        |> Chart.withShape(shapes[3])

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

@@ -12,38 +12,41 @@ open Newtonsoft.Json
 [<EntryPoint>]
 let main argv =
     let x  = [1.; 2.; 3.; 4.; 5.; 6.; 7.; 8.; 9.; 10.; ]
-    let y' = [2.; 1.5; 5.; 1.5; 3.; 2.5; 2.5; 1.5; 3.5; 1.]
-    let s1 = 
-        Shape.init(
-            ShapeType=StyleParam.ShapeType.Rectangle,
-            X0=2.,X1=4.,Y0=3.,Y1=4.,
-            Opacity=0.3,
-            FillColor=Color.fromHex "#d3d3d3",
-            Label = ShapeLabel.init(Text="Rectangle")
-        )
-    let s2 = 
-        Shape.init(
-            ShapeType=StyleParam.ShapeType.Circle,
-            X0=5.,X1=7.,Y0=3.,Y1=4.,
-            Opacity=0.3,
-            FillColor=Color.fromHex "#d3d3d3",
-            Label = ShapeLabel.init(Text="Circle")
-        )
-    let s3 = 
-        Shape.init(
-            ShapeType=StyleParam.ShapeType.Line,
-                X0=1.,X1=2.,Y0=1.,Y1=2.,
+    let y = [2.; 1.5; 5.; 1.5; 3.; 2.5; 2.5; 1.5; 3.5; 1.]
+    
+    let shapes = 
+        [
+            Shape.init(
+                ShapeType=StyleParam.ShapeType.Rectangle,
+                X0=2.,X1=4.,Y0=3.,Y1=4.,
                 Opacity=0.3,
                 FillColor=Color.fromHex "#d3d3d3",
-                Label = ShapeLabel.init(Text="Line")
-        )
-    let s4 = 
-        Shape.init(
-            ShapeType=StyleParam.ShapeType.SvgPath,
-            Path=" M 3,7 L2,8 L2,9 L3,10, L4,10 L5,9 L5,8 L4,7 Z",
-            Label = ShapeLabel.init(Text="SVGPath", TextAngle = StyleParam.TextAngle.Degrees 33)
-        )
-    Chart.Line(x = x,y = y',Name="line", UseDefaults = false)    
-    |> Chart.withShapes([s1;s2;s3;s4])
-    |> Chart.show
+                Label = ShapeLabel.init(Text="Rectangle")
+            )
+            Shape.init(
+                ShapeType=StyleParam.ShapeType.Circle,
+                X0=5.,X1=7.,Y0=3.,Y1=4.,
+                Opacity=0.3,
+                FillColor=Color.fromHex "#d3d3d3",
+                Label = ShapeLabel.init(Text="Circle", Padding = 20)
+            )
+            Shape.init(
+                ShapeType=StyleParam.ShapeType.Line,
+                    X0=1.,X1=2.,Y0=1.,Y1=2.,
+                    Opacity=0.3,
+                    FillColor=Color.fromHex "#d3d3d3",
+                    Label = ShapeLabel.init(Text="Line")
+            )
+            Shape.init(
+                ShapeType=StyleParam.ShapeType.SvgPath,
+                Path=" M 3,7 L2,8 L2,9 L3,10, L4,10 L5,9 L5,8 L4,7 Z",
+                Label = ShapeLabel.init(Text="SVGPath", TextAngle = StyleParam.TextAngle.Degrees 33)
+            )
+        ]
+    shapes
+    |> Seq.iter (fun shape ->
+        Chart.Line(x = x,y = y, UseDefaults = false)    
+        |> Chart.withShape(shape)
+        |> Chart.show
+    )
     0

tests/ConsoleApps/FSharpConsole/Program.fs

@@ -34,6 +34,7 @@
     <Compile Include="Traces\TraceStaticMembers.fs" />
     <Compile Include="Traces\TraceStyle.fs" />
     <Compile Include="Traces\TraceID.fs" />
+    <Compile Include="UpstreamFeatures\2.19.fs" />
     <Compile Include="Main.fs" />
   </ItemGroup>
 

tests/CoreTests/CoreTests/CoreTests.fsproj

@@ -0,0 +1,50 @@
+module CoreTests.UpstreamFeatures.PlotlyJS_2_19
+
+open Expecto
+open Plotly.NET
+open Plotly.NET.LayoutObjects
+open Plotly.NET.TraceObjects
+open Plotly.NET.GenericChart
+
+open TestUtils.HtmlCodegen
+open PlotlyJS_2_19_TestCharts
+
+module ShapeLabel = 
+    [<Tests>]
+    let ``ShapeLabel chart HTML codegeneration tests`` =
+        testList "UpstreamFeatures.PlotlyJS_2_19" [
+            testList "ShapeLabel" [
+                testCase "Rectangular shape label data" ( fun () ->
+                    """var data = [{"type":"scatter","mode":"lines","x":[1.0,2.0,3.0,4.0,5.0,6.0,7.0,8.0,9.0,10.0],"y":[2.0,1.5,5.0,1.5,3.0,2.5,2.5,1.5,3.5,1.0],"marker":{},"line":{}}];"""
+                    |> chartGeneratedContains ShapeLabel.``Rectangular shape with label``
+                )
+                testCase "Rectangular shape label layout" ( fun () ->
+                    """var layout = {"shapes":[{"fillcolor":"rgba(211, 211, 211, 1.0)","label":{"text":"Rectangle"},"opacity":0.3,"type":"rect","x0":2.0,"x1":4.0,"y0":3.0,"y1":4.0}]};"""
+                    |> chartGeneratedContains ShapeLabel.``Rectangular shape with label``
+                )
+                testCase "Circular shape label with padding data" ( fun () ->
+                    """var data = [{"type":"scatter","mode":"lines","x":[1.0,2.0,3.0,4.0,5.0,6.0,7.0,8.0,9.0,10.0],"y":[2.0,1.5,5.0,1.5,3.0,2.5,2.5,1.5,3.5,1.0],"marker":{},"line":{}}];"""
+                    |> chartGeneratedContains ShapeLabel.``Circular shape with label and padding``
+                )
+                testCase "Circular shape label with padding layout" ( fun () ->
+                    """var layout = {"shapes":[{"fillcolor":"rgba(211, 211, 211, 1.0)","label":{"padding":20,"text":"Circle"},"opacity":0.3,"type":"circle","x0":5.0,"x1":7.0,"y0":3.0,"y1":4.0}]};"""
+                    |> chartGeneratedContains ShapeLabel.``Circular shape with label and padding``
+                )                
+                testCase "Line shape label data" ( fun () ->
+                    """var data = [{"type":"scatter","mode":"lines","x":[1.0,2.0,3.0,4.0,5.0,6.0,7.0,8.0,9.0,10.0],"y":[2.0,1.5,5.0,1.5,3.0,2.5,2.5,1.5,3.5,1.0],"marker":{},"line":{}}];"""
+                    |> chartGeneratedContains ShapeLabel.``Line shape with label``
+                )
+                testCase "Line shape label layout" ( fun () ->
+                    """var layout = {"shapes":[{"fillcolor":"rgba(211, 211, 211, 1.0)","label":{"text":"Line"},"opacity":0.3,"type":"line","x0":1.0,"x1":2.0,"y0":1.0,"y1":2.0}]};"""
+                    |> chartGeneratedContains ShapeLabel.``Line shape with label``
+                )                
+                testCase "SVGPath angled shape label data" ( fun () ->
+                    """var data = [{"type":"scatter","mode":"lines","x":[1.0,2.0,3.0,4.0,5.0,6.0,7.0,8.0,9.0,10.0],"y":[2.0,1.5,5.0,1.5,3.0,2.5,2.5,1.5,3.5,1.0],"marker":{},"line":{}}];"""
+                    |> chartGeneratedContains ShapeLabel.``SVGPath shape with angled label``
+                )
+                testCase "SVGPath angled shape label layout" ( fun () ->
+                    """var layout = {"shapes":[{"label":{"text":"SVGPath","textangle":33.0},"path":" M 3,7 L2,8 L2,9 L3,10, L4,10 L5,9 L5,8 L4,7 Z","type":"path"}]};"""
+                    |> chartGeneratedContains ShapeLabel.``SVGPath shape with angled label``
+                )
+            ]
+        ]