Merge pull request #26 from bvenn/developer

add plotly tables

Author: kMutagene

FSharp.Plotly.sln

@@ -1,6 +1,6 @@
 Microsoft Visual Studio Solution File, Format Version 12.00
-# Visual Studio Version 16
-VisualStudioVersion = 16.0.29613.14
+# Visual Studio 15
+VisualStudioVersion = 15.0.28307.960
 MinimumVisualStudioVersion = 10.0.40219.1
 Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = ".paket", ".paket", "{63297B98-5CED-492C-A5B7-A5B4F73CF142}"
 	ProjectSection(SolutionItems) = preProject
@@ -56,6 +56,7 @@ Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "content", "content", "{8E6D
 		docsrc\content\sankey.fsx = docsrc\content\sankey.fsx
 		docsrc\content\shapes.fsx = docsrc\content\shapes.fsx
 		docsrc\content\splom.fsx = docsrc\content\splom.fsx
+		docsrc\content\table.fsx = docsrc\content\table.fsx
 		docsrc\content\violin-plots.fsx = docsrc\content\violin-plots.fsx
 		docsrc\content\windrose-charts.fsx = docsrc\content\windrose-charts.fsx
 	EndProjectSection

docsrc/content/range-plots.fsx

@@ -14,6 +14,7 @@ values.
 *)
 
 open FSharp.Plotly 
+open StyleParam
 
 let rnd = System.Random()
 
@@ -25,7 +26,7 @@ let yLower = y |> List.map (fun v -> v - rnd.NextDouble())
 
 
 let range1 =
-    Chart.Range(x,y,yUpper,yLower,Color="grey",RangeColor="lightblue")
+    Chart.Range(x,y,yUpper,yLower,Mode.Markers,Color="grey",RangeColor="lightblue")
 
 (***do-not-eval***)
 range1 |> Chart.Show

docsrc/content/table.fsx

@@ -0,0 +1,191 @@
+(*** hide ***)
+#r "netstandard"
+#r @"../../lib/Formatting/FSharp.Plotly.dll"
+
+(** 
+# FSharp.Plotly: Tables
+
+This example shows how to create tables in F#.
+
+
+*)
+
+open FSharp.Plotly 
+open FSharp.Plotly.StyleParam
+  
+let header = ["<b>RowIndex</b>";"A";"simple";"table"]
+let rows = 
+    [
+     ["0";"I"     ;"am"     ;"a"]        
+     ["1";"little";"example";"!"]       
+    ]
+
+let table1 = Chart.Table(header, rows)
+
+
+(***do-not-eval***)
+table1 |> Chart.Show
+
+(*** include-value:table1 ***)   
+
+(**
+A little bit of styling:
+*)
+
+let table2 =
+    Chart.Table(
+        header,
+        rows,
+        //sets global header alignment
+        AlignHeader = [HorizontalAlign.Center],
+        //sets alignment for each column separately 
+        //(The last alignment is applied to all potential following columns)
+        AlignCells  = [HorizontalAlign.Left;HorizontalAlign.Center;HorizontalAlign.Right],
+        //sets global header color
+        ColorHeader = "#45546a",    
+        //sets specific color to each header column
+        //ColorHeader=["#45546a";"#deebf7";"#45546a";"#deebf7"],    
+        //sets global cell color
+        //ColorRows = "#deebf7",
+        //sets cell column colors
+        ColorCells  = ["#deebf7";"lightgrey";"#deebf7";"lightgrey"],
+        //sets cell row colors
+        //ColorCells=[["#deebf7";"lightgrey"]],
+        //sets font of header
+        FontHeader  = Font.init(FontFamily.Courier_New, Size=12, Color="white"),      
+        //sets the height of the header
+        HeightHeader= 30.,
+        //sets lines of header
+        LineHeader  = Line.init(2.,"black"),                     
+        ColumnWidth = [70;50;100;70],      
+        //defines order of columns
+        ColumnOrder = [1;2;3;4]                                  
+        )
+
+(***do-not-eval***)
+table2 |> Chart.Show
+
+(*** include-value:table2 ***)
+
+(**
+Value dependent cell coloring:
+*)
+
+let header2 = ["Identifier";"T0";"T1";"T2";"T3"]
+let rowvalues = 
+    [
+     [10001.;0.2;2.0;4.0;5.0]
+     [10002.;2.1;2.0;1.8;2.1]
+     [10003.;4.5;3.0;2.0;2.5]
+     [10004.;0.0;0.1;0.3;0.2]
+     [10005.;1.0;1.6;1.8;2.2]
+     [10006.;1.0;0.8;1.5;0.7]
+     [10007.;2.0;2.0;2.1;1.9]
+    ]
+    |> Seq.sortBy (fun x -> x.[1])
+
+//map color from value to hex representation
+let mapColor min max value = 
+    let proportion = 
+        (255. * (value - min) / (max - min))
+        |> int
+    Colors.fromRgb 255 (255 - proportion) proportion
+    |> Colors.toWebColor
+    
+//Assign a color to every cell seperately. Matrix must be transposed for correct orientation.
+let cellcolor = 
+     rowvalues
+     |> Seq.map (fun row ->
+        row 
+        |> Seq.mapi (fun index value -> 
+            if index = 0 then "white"
+            else mapColor 0. 5. value
+            )
+        )
+    |> Seq.transpose
+
+let table3 = Chart.Table(header2,rowvalues,ColorCells=cellcolor)
+
+(***do-not-eval***)
+table3 |> Chart.Show
+
+
+(*** include-value:table3 ***)
+
+
+(**
+Sequence representation:
+
+*)
+
+let sequence =
+        [
+        "ATGAGACGTCGAGACTGATAGACGTCGATAGACGTCGATAGACCG"
+        "ATAGACTCGTGATAGACGTCGATAGACGTCGATAGAGTATAGACC"
+        "GTGATAGACGTCGAGAAGACGTCGATAGACGTCGATAGACGTCGA"
+        "TAGAGATAGACGTCGATAGACCGTATAGAAGACGTCGATAGATAG"
+        "ACGTCGATAGACCGTAGACGTCGATAGACGTCGATAGACCGT"
+        ]
+        |> String.concat ""
+
+let elementsPerRow = 60
+
+let headers = 
+    [0..elementsPerRow] 
+    |> Seq.map (fun x -> 
+        if x%10=0 && x <> 0 then "|" 
+        else ""
+        )
+
+let cells = 
+    sequence
+    |> Seq.chunkBySize elementsPerRow
+    |> Seq.mapi (fun i x -> Seq.append [string (i * elementsPerRow)] (Seq.map string x))
+
+let cellcolors =
+    cells
+    |> Seq.map (fun row -> 
+        row 
+        |> Seq.map (fun element -> 
+            match element with
+            //colors taken from DRuMS 
+            //(http://biomodel.uah.es/en/model4/dna/atgc.htm)
+            | "A" -> "#5050FF" 
+            | "T" -> "#E6E600"
+            | "G" -> "#00C000"
+            | "C" -> "#E00000"
+            | "U" -> "#B48100"
+            | _   -> "white"
+            )
+        )
+    |> Seq.transpose
+    |> Seq.map (fun x -> Seq.append x (seq ["white"]))
+
+let font = Font.init(FontFamily.Consolas,Size=14)
+let line = Line.init(0,"white")
+let chartwidth = 50. + 10. * float elementsPerRow
+
+let table4 =
+    Chart.Table(
+        headers,
+        cells,
+        LineCells   = line,
+        LineHeader  = line,
+        HeightCells = 20,
+        FontHeader  = font,
+        FontCells   = font,
+        ColumnWidth = [50;10],
+        AlignCells  = [HorizontalAlign.Right;HorizontalAlign.Center],
+        ColorCells  = cellcolors
+        )
+    |> Chart.withSize(chartwidth,nan)
+    |> Chart.withTitle "Sequence A"
+
+
+(***do-not-eval***)
+table4 |> Chart.Show
+
+
+(*** include-value:table4 ***)
+
+

docsrc/tools/templates/template.cshtml

@@ -59,6 +59,7 @@
               <li><a href="@Root/box-plots.html">Box Plots</a></li>
               <li><a href="@Root/violin-plots.html">Violin Plots</a></li>
               <li><a href="@Root/bubble-charts.html">Bubble Charts</a></li>
+              <li><a href="@Root/candlestick.html">Candlestick Plots</a></li>
               <li><a href="@Root/contour-plots.html">Contour Plots</a></li>
               <li><a href="@Root/heatmaps.html">Heatmaps</a></li>
               <li><a href="@Root/histograms.html">Histograms</a></li>
@@ -73,13 +74,16 @@
               <li><a href="@Root/candlestick.html">Candlestick Charts</a></li>
               <li><a href="@Root/sankey.html">Sankey Diagrams</a></li>
               <li><a href="@Root/splom.html">Splom Plots</a></li>
+              <li><a href="@Root/sankey.html">Sankey Plots</a></li>
               <li class="nav-header">Map Charts</li>
               <li><a href="@Root/choropleth-map.html">Choropleth</a></li>
               <li class="nav-header">Plotly 3d-Charts</li>
               <li><a href="@Root/3d-scatter-plots.html">3D Scatter Plots</a></li>
               <li><a href="@Root/3d-line-plots.html">3D Line Plots</a></li>
               <li><a href="@Root/3d-surface-plots.html">3D Surface Plots</a></li>
               <li><a href="@Root/3d-mesh-plots.html">3D Mesh Plots</a></li>
+              <li class="nav-header">Plotly Tables</li>
+              <li><a href="@Root/table.html">Table</a></li>
               <li class="nav-header">Styling</li>
               <li><a href="@Root/multiple-charts.html">Multiple Charts</a></li>
               <li><a href="@Root/errorbars.html">Error bars</a></li>

lib/Formatting/FSharp.Plotly.dll

@@ -137,7 +137,7 @@ type Chart =
 
 
     /// Displays a range of data by plotting two Y values per data point, with each Y value being drawn as a line 
-    static member Range(x, y, upper, lower,?Name,?ShowMarkers,?Showlegend,?Color,?RangeColor,?Labels,?TextPosition,?TextFont) =             
+    static member Range(x, y, upper, lower,mode,?Name,?ShowMarkers,?Showlegend,?Color,?RangeColor,?Labels,?TextPosition,?TextFont) =             
         // if text position or font is set than show labels (not only when hovering)
         let changeMode = 
             let isShowMarker =
@@ -150,7 +150,7 @@ type Chart =
 
         let trace = 
             Trace.initScatter (
-                    TraceStyle.Scatter(X = x,Y = y, Mode=changeMode StyleParam.Markers, ?Fillcolor=Color) )               
+                    TraceStyle.Scatter(X = x,Y = y, Mode=mode, ?Fillcolor=Color) )               
             |> TraceStyle.TraceInfo(?Name=Name,?Showlegend=Showlegend)
             |> TraceStyle.Line(?Color=Color)
             |> TraceStyle.Marker(?Color=Color)
@@ -161,22 +161,22 @@ type Chart =
                     TraceStyle.Scatter(X = x,Y = lower, Mode=StyleParam.Lines, ?Fillcolor=RangeColor) )               
             |> TraceStyle.TraceInfo(Showlegend=false)
             |> TraceStyle.Line(Width=0)
-            |> TraceStyle.Marker(Color=if RangeColor.IsSome then RangeColor.Value else "rgba(0,0,,0.5)")             
+            |> TraceStyle.Marker(Color=if RangeColor.IsSome then RangeColor.Value else "rgba(0,0,0,0.5)")             
 
         let upper = 
             Trace.initScatter (
                     TraceStyle.Scatter(X = x,Y = upper, Mode=StyleParam.Lines, ?Fillcolor=RangeColor, Fill=StyleParam.ToNext_y) )               
             |> TraceStyle.TraceInfo(Showlegend=false)
             |> TraceStyle.Line(Width=0)
-            |> TraceStyle.Marker(Color=if RangeColor.IsSome then RangeColor.Value else "rgba(0,0,,0.5)")             
+            |> TraceStyle.Marker(Color=if RangeColor.IsSome then RangeColor.Value else "rgba(0,0,0,0.5)")             
 
         GenericChart.MultiChart ([lower;upper;trace],Layout(),Config())
 
 
     /// Displays a range of data by plotting two Y values per data point, with each Y value being drawn as a line 
-    static member Range(xy, upper, lower,?Name,?ShowMarkers,?Showlegend,?Color,?RangeColor,?Labels,?TextPosition,?TextFont) =   
+    static member Range(xy, upper, lower, mode, ?Name,?ShowMarkers,?Showlegend,?Color,?RangeColor,?Labels,?TextPosition,?TextFont) =   
         let x,y = Seq.unzip xy
-        Chart.Range(x, y, upper, lower, ?Name=Name,?ShowMarkers=ShowMarkers,?Showlegend=Showlegend,?Color=Color,?RangeColor=RangeColor,?Labels=Labels,?TextPosition=TextPosition,?TextFont=TextFont)
+        Chart.Range(x, y, upper, lower, mode, ?Name=Name,?ShowMarkers=ShowMarkers,?Showlegend=Showlegend,?Color=Color,?RangeColor=RangeColor,?Labels=Labels,?TextPosition=TextPosition,?TextFont=TextFont)
 
 
     /// Emphasizes the degree of change over time and shows the relationship of the parts to a whole.
@@ -573,4 +573,25 @@ type Chart =
         |> TraceStyle.TextLabel(?Text=Labels,?Textposition=TextPosition,?Textfont=TextFont)
         |> GenericChart.ofTraceObject 
 
-
+    /// creates table out of header sequence and row sequences
+    static member Table(headerValues, cellValues, ?AlignHeader, ?AlignCells, ?ColumnWidth, ?ColumnOrder, ?ColorHeader, ?ColorCells, ?FontHeader, ?FontCells, ?HeightHeader, ?HeightCells, ?LineHeader, ?LineCells) = 
+        Trace.initTable (
+
+                let CellFilling =
+                    match ColorCells with 
+                    | Some color  -> Some (CellColor.init (?Color=ColorCells))
+                    | Option.None -> Option.None
+
+                let HeaderFilling =
+                    match ColorHeader with 
+                    | Some color   -> Some (CellColor.init (?Color=ColorHeader))
+                    | Option.None  -> Option.None
+                              
+                TraceStyle.Table (
+                    Header = TableHeader.init (headerValues|> Seq.map seq, ?Align=AlignHeader, ?Fill=HeaderFilling, ?Font=FontHeader, ?Height=HeightHeader, ?Line=LineHeader),
+                    Cells  = TableCells.init(cellValues |> Seq.transpose, ?Align=AlignCells, ?Fill=CellFilling, ?Font=FontCells, ?Height=HeightCells, ?Line=LineCells),  
+                    ?ColumnWidth = ColumnWidth,
+                    ?ColumnOrder = ColumnOrder
+                    )
+                )
+        |> GenericChart.ofTraceObject 

src/FSharp.Plotly/Chart.fs

@@ -31,6 +31,7 @@
     <Compile Include="Scene.fs" />
     <Compile Include="Shape.fs" />
     <Compile Include="Error.fs" />
+    <Compile Include="Table.fs" />
     <Compile Include="Trace.fs" />
     <Compile Include="Trace3d.fs" />
     <Compile Include="Layout.fs" />

src/FSharp.Plotly/FSharp.Plotly.fsproj

@@ -140,7 +140,7 @@ module StyleParam =
         | Markers | Markers_Text
         | Text
         static member toString = function
-            | None               -> "None"             
+            | None               -> "none"             
             | Lines              -> "lines"            
             | Lines_Markers      -> "lines+markers"    
             | Lines_Text         -> "lines+text"       
@@ -210,12 +210,13 @@ module StyleParam =
 
     /// Names of installed font families
     type FontFamily =
-        | Arial | Balto | Courier_New | Droid_Sans | Droid_Serif | Droid_Sans_Mono | Gravitas_One | Old_Standard_TT | Open_Sans | Overpass | PT_Sans_Narrow | Raleway | Times_New_Roman
+        | Arial | Balto | Courier_New | Consolas | Droid_Sans | Droid_Serif | Droid_Sans_Mono | Gravitas_One | Old_Standard_TT | Open_Sans | Overpass | PT_Sans_Narrow | Raleway | Times_New_Roman
 
         static member toString = function
             | Arial           -> "Arial"
             | Balto           -> "Balto"
             | Courier_New     -> "Courier New"
+            | Consolas        -> "Consolas"
             | Droid_Sans      -> "Droid Sans"     
             | Droid_Serif     -> "Droid Serif"    
             | Droid_Sans_Mono -> "Droid Sans Mono"