Add support for Shapes

Author: muehlhaus

FSharp.Plotly.sln

@@ -1,6 +1,6 @@
 Microsoft Visual Studio Solution File, Format Version 12.00
 # Visual Studio 14
-VisualStudioVersion = 14.0.25123.0
+VisualStudioVersion = 14.0.25420.1
 MinimumVisualStudioVersion = 10.0.40219.1
 Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = ".paket", ".paket", "{63297B98-5CED-492C-A5B7-A5B4F73CF142}"
 	ProjectSection(SolutionItems) = preProject
@@ -46,6 +46,7 @@ Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "content", "content", "{8E6D
 		docs\content\plotly-wpf.fsx = docs\content\plotly-wpf.fsx
 		docs\content\polar-charts.fsx = docs\content\polar-charts.fsx
 		docs\content\range-plots.fsx = docs\content\range-plots.fsx
+		docs\content\shapes.fsx = docs\content\shapes.fsx
 	EndProjectSection
 EndProject
 Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "tests", "tests", "{ED8079DD-2B06-4030-9F0F-DC548F98E1C4}"

docs/content/bar-charts.fsx

@@ -19,7 +19,7 @@ let keys   = ["Product A"; "Product B"; "Product C";]
 let labels = ["27% market share"; "24% market share"; "19% market share";]
 
 (*** define-output:bar1 ***)
-Chart.Column(keys,values,Labels=labels,Opacity=0.3,Marker=Options.Marker(Color="rgba(222,45,38,0.8)"))
+Chart.Column(keys,values,Labels=labels,Opacity=0.3,Marker=Options.Marker(Color="rgba(222,45,38,0.8)",Size=1)) // Changing the thickness of the bar is not possible at the moment
 (*** include-it:bar1 ***)
 
 (*** define-output:bar2 ***)

docs/content/getting-started.fsx

@@ -23,8 +23,8 @@ let trace =
 
         x = [1; 2; 3; 4],
         y = [12; 9; 15; 12],
-        mode = "lines+markers"
-        //name = "lines and markers"
+        mode = "lines+markers",
+        name = "lines and markers"
     )
 
 let layout =
@@ -37,8 +37,11 @@ GenericChart.ofTraceObject trace layout
 |> Chart.Show
 
 
-let red = FSharp.Care.Colors.Table.Office.red
-let red' = FSharp.Care.Colors.toHex false red
+
+
+
+open FSharp.Care.Colors
+let red' = FSharp.Care.Colors.toHex false Table.Office.red
 
 Chart.Point([1; 2; 3; 4],[12; 9; 15; 12])
 |> Chart.withMarkerStyle(Color=red')

docs/content/shapes.fsx

@@ -0,0 +1,24 @@
+(*** hide ***)
+#r "../../bin/Newtonsoft.Json.dll"
+#r "../../bin/FSharp.Plotly.dll"
+
+(** 
+# FSharp.Plotly: Shapes
+
+*Summary:* This example shows how to create Shapes and add them to the Charts in F#.
+
+*)
+
+open FSharp.Plotly 
+  
+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 = Options.Shape(StyleOption.ShapeType.Rectangle,2.,4.,3.,4.,Opacity=0.3,Fillcolor="#d3d3d3")
+let s2 = Options.Shape(StyleOption.ShapeType.Rectangle,5.,7.,3.,4.,Opacity=0.3,Fillcolor="#d3d3d3")
+(*** define-output:line1 ***)
+Chart.Line(x,y',Name="line")    
+//|> Chart.withShape(Options.Shape(StyleOption.ShapeType.Rectangle,2.,4.,3.,4.,Opacity=0.3,Fillcolor="#d3d3d3"))
+|> Chart.withShapes([s1;s2])
+(*** include-it:line1 ***)
+|> Chart.Show

src/FSharp.Plotly/AxisObjects.fs

@@ -1134,6 +1134,7 @@ module AxisObjects =
         let mutable _opacity: float option = None
         let mutable _line: Line option = None
         let mutable _fillcolor: string option = None
+        let mutable _layer: string option = None
         //let mutable _role: string option = Some "object"
 
         /// Specifies the shape type to be drawn. If *line*, a line is drawn from (`x0`,`y0`) to (`x1`,`y1`) If *circle*, a circle is drawn from ((`x0`+`x1`)/2, (`y0`+`y1`)/2)) with radius (|(`x0`+`x1`)/2 - `x0`|, |(`y0`+`y1`)/2 -`y0`)|) If *rect*, a rectangle is drawn linking (`x0`,`y0`), (`x1`,`y0`), (`x1`,`y1`), (`x0`,`y1`), (`x0`,`y0`) If *path*, draw a custom SVG path using `path`.
@@ -1190,6 +1191,11 @@ module AxisObjects =
             with get () = Option.get _fillcolor
             and set value = _fillcolor <- Some value
 
+        /// Sets if the shapes is drawn on top or above
+        member __.layer
+            with get () = Option.get _layer
+            and set value = _layer <- Some value
+
     //    member __.role
     //        with get () = Option.get _role
     //        and set value = _role <- Some value
@@ -1205,4 +1211,5 @@ module AxisObjects =
         member __.ShouldSerializeopacity() = not _opacity.IsNone
         member __.ShouldSerializeline() = not _line.IsNone
         member __.ShouldSerializefillcolor() = not _fillcolor.IsNone
+        member __.ShouldSerializelayer() = not _layer.IsNone
         //member __.ShouldSerializerole() = not _role.IsNone

src/FSharp.Plotly/Chart.fs

@@ -334,7 +334,7 @@ type Chart =
         let values,labels = Seq.unzip data 
         Chart.Doughnut(values,Labels=labels,?Name=Name,?Showlegend=Showlegend,?Color=Color,?Hole=Hole,?Text=Text,?Textposition=Textposition,?TextFont=TextFont,?Hoverinfo=Hoverinfo,?Textinfo=Textinfo,?Opacity=Opacity)
 
-    
+
 //    /// Computes the bi-dimensional histogram of two data samples and auto-determines the bin size.
 //    static member Histogram2d(x,y,?Name,?HistNorm,?HistFunc,?Colorscale,?Showscale,?zSmooth,?Colorbar,?zAuto,?zMin,?zMax,?nBinsx,?nBinsy,?Xbins,?Ybins) =         
 //        let trace = 

src/FSharp.Plotly/ChartExtensions.fs

@@ -201,6 +201,23 @@ module ChartExtensions =
         // TODO: Include withError
 
         // TODO: Include withShapes
+    //Specifies the shape type to be drawn. If "line", a line is drawn from (`x0`,`y0`) to (`x1`,`y1`) If "circle", a circle is drawn from 
+    //((`x0`+`x1`)/2, (`y0`+`y1`)/2)) with radius (|(`x0`+`x1`)/2 - `x0`|, |(`y0`+`y1`)/2 -`y0`)|) If "rect", a rectangle is drawn linking 
+    //(`x0`,`y0`), (`x1`,`y0`), (`x1`,`y1`), (`x0`,`y1`), (`x0`,`y0`)  
+        static member withShape(shape:ShapeOptions) =
+            (fun (ch:GenericChart) ->                 
+                
+                let shape' = Shape() |> shape
+                let layout = Options.Layout(Shapes=[shape'])
+                GenericChart.addLayout layout ch)  
+
+        static member withShapes(shapes:ShapeOptions seq) =
+            (fun (ch:GenericChart) ->                 
+                
+                let shapes' =
+                    shapes |> Seq.map (fun shape -> shape (Shape()))
+                let layout = Options.Layout(Shapes=shapes')
+                GenericChart.addLayout layout ch)  
 
 
 

src/FSharp.Plotly/Options.fs

@@ -146,15 +146,60 @@ type Options() =
             ?Color,
             ?Symbol:StyleOption.Symbol,
             ?Opacity:float,
-            ?MultiSizes:seq<#IConvertible>
+            ?MultiSizes:seq<#IConvertible>,
+            ?Line : LineOptions,
+            ?Colorbar       ,
+            ?Colorscale     ,
+            ?Colors         ,
+                        
+            ?Maxdisplayed   ,
+            ?Sizeref        ,
+            ?Sizemin        ,
+            ?Sizemode       ,
+            ?Cauto          ,
+            ?Cmax           ,
+            ?Cmin           ,
+            ?Autocolorscale ,
+            ?Reversescale   ,
+            ?Showscale      ,
+                        
+            ?Symbolsrc      ,
+            ?Opacitysrc     ,
+            ?Sizesrc        ,
+            ?Colorsrc       ,
+            ?Cutliercolor   ,
+            ?Colorssrc      
+
         ) =
             (fun (marker:('T :> Marker)) -> 
-                Size       |> Option.iter marker.set_size 
-                Color      |> Option.iter marker.set_color
-                Symbol     |> Option.iter marker.set_symbol
-                Opacity    |> Option.iter marker.set_opacity
-                MultiSizes |> Option.iter marker.set_size
-            
+                Size           |> Option.iter marker.set_size 
+                Color          |> Option.iter marker.set_color
+                Symbol         |> Option.iter marker.set_symbol
+                Opacity        |> Option.iter marker.set_opacity
+                MultiSizes     |> Option.iter marker.set_size
+                Line           |> Option.iter (updatePropertyValueAndIgnore marker <@ marker.line @>)        
+                Colorbar       |> Option.iter marker.set_colorbar       
+                Colorscale     |> Option.iter marker.set_colorscale
+                Colors         |> Option.iter marker.set_colors     
+                                               
+                Maxdisplayed   |> Option.iter marker.set_maxdisplayed   
+                Sizeref        |> Option.iter marker.set_sizeref        
+                Sizemin        |> Option.iter marker.set_sizemin        
+                Sizemode       |> Option.iter marker.set_sizemode            
+                Cauto          |> Option.iter marker.set_cauto          
+                Cmax           |> Option.iter marker.set_cmax           
+                Cmin           |> Option.iter marker.set_cmin           
+                Autocolorscale |> Option.iter marker.set_autocolorscale 
+                Reversescale   |> Option.iter marker.set_reversescale   
+                Showscale      |> Option.iter marker.set_showscale      
+                                                   
+                Symbolsrc      |> Option.iter marker.set_symbolsrc      
+                Opacitysrc     |> Option.iter marker.set_opacitysrc     
+                Sizesrc        |> Option.iter marker.set_sizesrc        
+                Colorsrc       |> Option.iter marker.set_colorsrc       
+                Cutliercolor   |> Option.iter marker.set_outliercolor            
+                Colorssrc      |> Option.iter marker.set_colorssrc      
+
                 marker
             )
 
@@ -285,12 +330,14 @@ type Options() =
             ?Separators,
             ?Barmode:StyleOption.Barmode,
             ?Bargap, // Some bar.. /box... is missing
+            // bargroupgap
+            //
             ?Radialaxis:RadialAxisOptions,
             ?Angularaxis:AngularAxisOptions,
             ?Scene:SceneOptions,
             ?Direction:StyleOption.Direction,
             ?Orientation,
-            ?Shapes:ShapeOptions,
+            ?Shapes:Shape seq,
 
             ?Hidesources,?Smith,?Geo
 
@@ -319,6 +366,7 @@ type Options() =
                 Orientation |> Option.iter layout.set_orientation
                 Barmode |> Option.iter (StyleOption.Barmode.toString >> layout.set_barmode)
                 Bargap |> Option.iter layout.set_bargap
+                Shapes |> Option.iter layout.set_shapes
 
                 // Update
                 Font        |> Option.iter (updatePropertyValueAndIgnore layout <@ layout.font @>)
@@ -332,7 +380,7 @@ type Options() =
                 Radialaxis  |> Option.iter (updatePropertyValueAndIgnore layout <@ layout.radialaxis @>)
                 Angularaxis |> Option.iter (updatePropertyValueAndIgnore layout <@ layout.angularaxis @>)
                 Scene       |> Option.iter (updatePropertyValueAndIgnore layout <@ layout.scene @>)
-                Shapes      |> Option.iter (updatePropertyValueAndIgnore layout <@ layout.shapes @>)
+                //Shapes      |> Option.iter (updatePropertyValueAndIgnore layout <@ layout.shapes @>)
 
                 layout
             )
@@ -906,6 +954,43 @@ type Options() =
             ) 
 
 
+    // Applies the styles to Shape()
+    static member Shape
+        (   
+           ?ShapeType : StyleOption.ShapeType,
+           ?X0        ,
+           ?X1        ,           
+           ?Y0        ,
+           ?Y1        ,
+           ?Path      ,
+           ?Opacity   ,
+           ?Line : LineOptions,
+           ?Fillcolor ,
+           ?Layer :StyleOption.Layer,
+           ?Xref      ,
+           ?Yref
+           
+          
+        ) =
+            (fun (shape:('T :> Shape)) -> 
+
+                
+                ShapeType |> Option.iter (StyleOption.ShapeType.toString >> shape.set_type)    
+                Xref      |> Option.iter shape.set_xref     
+                X0        |> Option.iter shape.set_x0        
+                X1        |> Option.iter shape.set_x1        
+                Yref      |> Option.iter shape.set_yref     
+                Y0        |> Option.iter shape.set_y0       
+                Y1        |> Option.iter shape.set_y1       
+                Path      |> Option.iter shape.set_path     
+                Opacity   |> Option.iter shape.set_opacity      
+                Line      |> Option.iter (updatePropertyValueAndIgnore shape <@ shape.line  @>)
+                Fillcolor |> Option.iter shape.set_fillcolor
+                Layer     |> Option.iter (StyleOption.Layer.toString >> shape.set_layer)
+                // out ->
+                shape
+            ) 
+
 
 
 

src/FSharp.Plotly/StyleOption.fs

@@ -506,6 +506,34 @@ module StyleOption =
 
         static member convert = function
             | MinMax (min,max)   -> box [|min;max|]
-            
+ 
+ 
+
+
+    /// Specifies the shape type to be drawn. If "line", a line is drawn from (`x0`,`y0`) to (`x1`,`y1`) If "circle", a circle is drawn from ((`x0`+`x1`)/2, (`y0`+`y1`)/2))
+    /// with radius (|(`x0`+`x1`)/2 - `x0`|, |(`y0`+`y1`)/2 -`y0`)|) If "rect", a rectangle is drawn linking (`x0`,`y0`), (`x1`,`y0`), (`x1`,`y1`), (`x0`,`y1`), (`x0`,`y0`)
+    /// If "path", draw a custom SVG path using `path`.          
+    type ShapeType =
+        | Circle | Rectangle | SvgPath | Line 
+        
+        static member toString = function
+            | Circle    -> "circle"
+            | Rectangle -> "rect"
+            | SvgPath   -> "path"
+            | Line      -> "line"
+
+
+        static member convert = ShapeType.toString >> box
+
+
+    /// Specifies whether shapes are drawn below or above traces. Default is Above
+    type Layer =
+        | Below | Above
+        
+        static member toString = function
+            | Below   -> "below"
+            | Above   -> "above"
+
 
 
+        static member convert = Layer.toString >> box