Update release notes and docs

plotly · Jun 16, 2021 · 15ea8d4 · 15ea8d4
1 parent 266facf
commit 15ea8d4
Show file tree

Hide file tree

Showing 5 changed files with 180 additions and 24 deletions.
diff --git a/Plotly.NET.sln b/Plotly.NET.sln
@@ -76,6 +76,8 @@ Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "content", "content", "{60FB
 		docs\4_5_splom.fsx = docs\4_5_splom.fsx
 		docs\5_0_choropleth-map.fsx = docs\5_0_choropleth-map.fsx
 		docs\6_0_candlestick.fsx = docs\6_0_candlestick.fsx
+		docs\6_1_funnel.fsx = docs\6_1_funnel.fsx
+		docs\6_2_funnel_area.fsx = docs\6_2_funnel_area.fsx
 		docs\7_0_polar-charts.fsx = docs\7_0_polar-charts.fsx
 		docs\7_1_windrose-charts.fsx = docs\7_1_windrose-charts.fsx
 		docs\8_0_parallel-categories.fsx = docs\8_0_parallel-categories.fsx

diff --git a/RELEASE_NOTES.md b/RELEASE_NOTES.md
@@ -27,6 +27,8 @@
  * [Add Waterfall Chart](https://github.com/plotly/Plotly.NET/commit/4d93598aa03a965abc75007aea2885ff4d282059)
  * [Add ScatterGeo, PointGeo, LineGeo Charts](https://github.com/plotly/Plotly.NET/commit/4865c5ac0356bfb2465422a2352e18c4fce018c3)
  * [Add HeatmapGL, thanks [@Joott](https://github.com/Joott)](https://github.com/plotly/Plotly.NET/commit/b39f4705b86653aebf8ccb0fadf5d12b89150848)
+ * [Add Funnel Chart, thanks [@Joott](https://github.com/Joott)](https://github.com/plotly/Plotly.NET/commit/aae24a780e88d74786f25854559ff44c7350d035)
+ * [Add FunnelArea Chart, thanks [@Joott](https://github.com/Joott)](https://github.com/plotly/Plotly.NET/commit/126f5513afcc259ba2945ffe32aaeb987a1ded71)
 
 **Minor Additions/fixes:**
 

diff --git a/docs/6_1_funnel.fsx b/docs/6_1_funnel.fsx
@@ -0,0 +1,64 @@
+(**
+---
+title: Funnel Charts
+category: Finance Charts
+categoryindex: 7
+index: 2
+---
+*)
+
+(*** hide ***)
+
+(*** condition: prepare ***)
+#r "nuget: Newtonsoft.JSON, 12.0.3"
+#r "../bin/Plotly.NET/netstandard2.0/Plotly.NET.dll"
+
+(*** condition: ipynb ***)
+#if IPYNB
+#r "nuget: Plotly.NET, {{fsdocs-package-version}}"
+#r "nuget: Plotly.NET.Interactive, {{fsdocs-package-version}}"
+#endif // IPYNB
+
+(** 
+# Funnel Charts
+
+[![Binder]({{root}}img/badge-binder.svg)](https://mybinder.org/v2/gh/plotly/Plotly.NET/gh-pages?filepath={{fsdocs-source-basename}}.ipynb)&emsp;
+[![Script]({{root}}img/badge-script.svg)]({{root}}{{fsdocs-source-basename}}.fsx)&emsp;
+[![Notebook]({{root}}img/badge-notebook.svg)]({{root}}{{fsdocs-source-basename}}.ipynb)
+
+*Summary:* This example shows how to create funnel charts in F#.
+
+let's first create some data for the purpose of creating example charts:
+*)
+
+let y = [|"Sales person A"; "Sales person B"; "Sales person C"; "Sales person D"; "Sales person E"|]
+let x = [|1200.; 909.4; 600.6; 300.; 80.|]
+
+(**
+Funnel charts visualize stages in a process using length-encoded bars. This trace can be used to show data in either a part-to-whole 
+representation wherein each item appears in a single stage, or in a "drop-off" representation wherein each item appears in each stage 
+it traversed. See also the [FunnelArea]({{root}}/6_2_funnel_area.html) chart for a different approach to visualizing funnel data.
+*)
+
+open Plotly.NET 
+
+// Customize the connector lines used to connect the funnel bars
+let connectorLine = Line.init (Color="royalblue", Dash=StyleParam.DrawingStyle.Dot, Width=3.)
+let connector = FunnelConnector.init(Line=connectorLine)
+
+// Customize the outline of the funnel bars
+let line = Line.init(Width=2.,Color="3E4E88")
+
+// create a funnel chart using custom connectors and outlines
+let funnel =
+    Chart.Funnel (x,y,Color="59D4E8", Line=line, Connector=connector)
+    |> Chart.withMarginSize(Left=100)
+
+(*** condition: ipynb ***)
+#if IPYNB
+funnel
+#endif // IPYNB
+
+(***hide***)
+funnel |> GenericChart.toChartHTML
+(***include-it-raw***)
diff --git a/docs/6_2_funnel_area.fsx b/docs/6_2_funnel_area.fsx
@@ -0,0 +1,59 @@
+(**
+---
+title: FunnelArea Charts
+category: Finance Charts
+categoryindex: 7
+index: 3
+---
+*)
+
+(*** hide ***)
+
+(*** condition: prepare ***)
+#r "nuget: Newtonsoft.JSON, 12.0.3"
+#r "../bin/Plotly.NET/netstandard2.0/Plotly.NET.dll"
+
+(*** condition: ipynb ***)
+#if IPYNB
+#r "nuget: Plotly.NET, {{fsdocs-package-version}}"
+#r "nuget: Plotly.NET.Interactive, {{fsdocs-package-version}}"
+#endif // IPYNB
+
+(** 
+# FunnelArea Charts
+
+[![Binder]({{root}}img/badge-binder.svg)](https://mybinder.org/v2/gh/plotly/Plotly.NET/gh-pages?filepath={{fsdocs-source-basename}}.ipynb)&emsp;
+[![Script]({{root}}img/badge-script.svg)]({{root}}{{fsdocs-source-basename}}.fsx)&emsp;
+[![Notebook]({{root}}img/badge-notebook.svg)]({{root}}{{fsdocs-source-basename}}.ipynb)
+
+*Summary:* This example shows how to create funnel area charts in F#.
+
+let's first create some data for the purpose of creating example charts:
+*)
+
+let values = [|5; 4; 3; 2; 1|]
+let text = [|"The 1st"; "The 2nd"; "The 3rd"; "The 4th"; "The 5th"|]
+
+(**
+FunnelArea charts visualize stages in a process using area-encoded trapezoids. 
+This trace can be used to show data in a part-to-whole representation similar to a "pie" trace, 
+wherein each item appears in a single stage. See also the the [Funnel]({{root}}/6_1_funnel.html) chart for a different approach 
+to visualizing funnel data.
+*)
+
+open Plotly.NET 
+
+let line = Line.init (Color="purple", Width=3.)
+
+let funnelArea = 
+    Chart.FunnelArea(Values=values, Text=text, Line=line)
+
+(*** condition: ipynb ***)
+#if IPYNB
+funnelArea
+#endif // IPYNB
+
+(***hide***)
+funnelArea |> GenericChart.toChartHTML
+(***include-it-raw***)
+
diff --git a/src/Plotly.NET/Playground.fsx b/src/Plotly.NET/Playground.fsx
@@ -49,6 +49,57 @@
 open Plotly.NET
 open GenericChart
 
+// Funnel examples adapted from Plotly docs: https://plotly.com/javascript/funnel-charts/
+let funnel =
+    let y = [|"Sales person A"; "Sales person B"; "Sales person C"; "Sales person D"; "Sales person E"|]
+    let x = [|1200.; 909.4; 600.6; 300.; 80.|]
+    let line = Line.init(Width=2.,Color="3E4E88")
+    let connectorLine = Line.init (Color="royalblue", Dash=StyleParam.DrawingStyle.Dot, Width=3.)
+    let connector = FunnelConnector.init(Line=connectorLine)
+    Chart.Funnel (x,y,Color="59D4E8", Line=line, Connector=connector)
+    |> Chart.withMarginSize(Left=100)
+    |> Chart.Show
+
+let funnelArea =
+    let values = [|5; 4; 3; 2; 1|]
+    let text = [|"The 1st"; "The 2nd"; "The 3rd"; "The 4th"; "The 5th"|]
+    let line = Line.init (Color="purple", Width=3.)
+    Chart.FunnelArea(Values=values, Text=text, Line=line)
+    |> Chart.Show
+
+let funnelArea2 =
+    let labels = [|1;2;2;3;3;3|]
+    Chart.FunnelArea(Labels=labels)
+    |> Chart.Show
+
+let yAxis =
+    Axis.LinearAxis.init(
+        Title = "Y",
+        Showline = true,
+        Range = StyleParam.Range.MinMax (0.0, 2.0),
+        Tickvals = [0.0 .. 2.0],
+        Ticktext = [ "zero"; "one"; "two" ]
+    )
+
+Chart.Range(
+    [1;2],
+    [1;1],
+    [0.0;0.53622183],
+    [1.0;2.0],
+    StyleParam.Mode.None,
+    Name = "",
+    LowerName = "Lower",
+    UpperName = "Upper",
+    Labels = [])
+|> Chart.withY_Axis (yAxis)
+|> GenericChart.mapiTrace (fun i t ->
+    match i with
+    | 0 -> t |> Trace.TraceStyle.TextLabel ["upperOne";"upperTwo"]
+    | 1 -> t |> Trace.TraceStyle.TextLabel ["lowerOne";"lowerTwo"]
+    | 2 -> t
+)
+|> Chart.Show
+
 let testAnnotation =
     Annotation.init(X=System.DateTime.Now, Y=0,Text="test")
 
@@ -125,7 +176,7 @@ let xAxis =
     tmp?showline <- true    
     tmp
 
-let yAxis =
+let yAxis2 =
     let tmp = Axis.LinearAxis()
     tmp?title <- "yAxis"
     tmp?showgrid <- false
@@ -135,7 +186,7 @@ let yAxis =
 let layout =
     let tmp = Layout()
     tmp?xaxis <- xAxis
-    tmp?yaxis <- yAxis
+    tmp?yaxis <- yAxis2
     tmp?showlegend <- true
     tmp
 
@@ -572,25 +623,3 @@ let doughnut1 =
     )
     |> Chart.Show
 
-// Funnel examples adapted from Plotly docs: https://plotly.com/javascript/funnel-charts/
-let funnel =
-    let y = [|"Sales person A"; "Sales person B"; "Sales person C"; "Sales person D"; "Sales person E"|]
-    let x = [|1200.; 909.4; 600.6; 300.; 80.|]
-    let line = Line.init(Width=2.,Color="3E4E88")
-    let connectorLine = Line.init (Color="royalblue", Dash=StyleParam.DrawingStyle.Dot, Width=3.)
-    let connector = FunnelConnector.init(Line=connectorLine)
-    Chart.Funnel (x,y,Color="59D4E8", Line=line, Connector=connector)
-    |> Chart.withMarginSize(Left=100)
-    |> Chart.Show
-
-let funnelArea =
-    let values = [|5; 4; 3; 2; 1|]
-    let text = [|"The 1st"; "The 2nd"; "The 3rd"; "The 4th"; "The 5th"|]
-    let line = Line.init (Color="purple", Width=3.)
-    Chart.FunnelArea(Values=values, Text=text, Line=line)
-    |> Chart.Show
-
-let funnelArea2 =
-    let labels = [|1;2;2;3;3;3|]
-    Chart.FunnelArea(Labels=labels)
-    |> Chart.Show