Skip to content

Add Funnel chart #84

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jun 10, 2021
Merged

Add Funnel chart #84

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
98 changes: 98 additions & 0 deletions src/Plotly.NET/Chart.fs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1994,6 +1994,104 @@ type Chart =
)
|> GenericChart.ofTraceObject

/// Creates a Funnel chart.
/// 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" trace type for a different approach to visualizing funnel data.
///
/// Parameters:
///
/// x : Sets the x coordinates.
///
/// y : Sets the y coordinates.
///
/// Name : Sets the trace name. The trace name appear as the legend item and on hover
///
/// Showlegend : Determines whether or not an item corresponding to this trace is shown in the legend.
///
/// Opacity : Sets the Opacity of the trace
///
/// Labels : Sets text elements associated with each (x,y) pair. If a single string, the same string appears over all the data points. If an array of string, the items are mapped in order to the this trace's (x,y) coordinates. If trace `hoverinfo` contains a "text" flag and "hovertext" is not set, these elements will be seen in the hover labels.
///
/// TextPosition : Sets the positions of the `text` elements with respects to the (x,y) coordinates.
///
/// TextFont : Sets the text font of this trace
///
/// Color : Sets Marker Color
///
/// Line : Line type
///
/// x0 : Alternate to `x`. Builds a linear space of x coordinates. Use with `dx` where `x0` is the starting coordinate and `dx` the step.
///
/// dX : Sets the x coordinate step. See `x0` for more info.
///
/// y0 : Alternate to `y`. Builds a linear space of y coordinates. Use with `dy` where `y0` is the starting coordinate and `dy` the step.
///
/// dY : Sets the y coordinate step. See `y0` for more info.
///
/// Width : Sets the bar width (in position axis units).
///
/// Offset : Shifts the position where the bar is drawn (in position axis units). In "group" barmode, traces that set "offset" will be excluded and drawn in "overlay" mode instead.
///
/// Orientation : Sets the orientation of the funnels. With "v" ("h"), the value of the each bar spans along the vertical (horizontal). By default funnels are tend to be oriented horizontally; unless only "y" array is presented or orientation is set to "v". Also regarding graphs including only 'horizontal' funnels, "autorange" on the "y-axis" are set to "reversed".
///
/// Alignmentgroup : Set several traces linked to the same position axis or matching axes to the same alignmentgroup. This controls whether bars compute their positional range dependently or independently.
///
/// Offsetgroup : Set several traces linked to the same position axis or matching axes to the same offsetgroup where bars of the same position coordinate will line up.
///
/// Cliponaxis : Determines whether the text nodes are clipped about the subplot axes. To show the text nodes above axis lines and tick labels, make sure to set `xaxis.layer` and `yaxis.layer` to "below traces".
///
/// Connector : Connector type
///
/// Insidetextfont : Sets the font used for `text` lying inside the bar.
///
/// Outsidetextfont: Sets the font used for `text` lying outside the bar.
static member Funnel (x, y,
[<Optional;DefaultParameterValue(null)>] ?Name ,
[<Optional;DefaultParameterValue(null)>] ?Showlegend ,
[<Optional;DefaultParameterValue(null)>] ?Opacity ,
[<Optional;DefaultParameterValue(null)>] ?Labels ,
[<Optional;DefaultParameterValue(null)>] ?TextPosition ,
[<Optional;DefaultParameterValue(null)>] ?TextFont ,
[<Optional;DefaultParameterValue(null)>] ?Color ,
[<Optional;DefaultParameterValue(null)>] ?Line ,
[<Optional;DefaultParameterValue(null)>] ?x0 ,
[<Optional;DefaultParameterValue(null)>] ?dX ,
[<Optional;DefaultParameterValue(null)>] ?y0 ,
[<Optional;DefaultParameterValue(null)>] ?dY ,
[<Optional;DefaultParameterValue(null)>] ?Width ,
[<Optional;DefaultParameterValue(null)>] ?Offset ,
[<Optional;DefaultParameterValue(null)>] ?Orientation ,
[<Optional;DefaultParameterValue(null)>] ?Alignmentgroup ,
[<Optional;DefaultParameterValue(null)>] ?Offsetgroup ,
[<Optional;DefaultParameterValue(null)>] ?Cliponaxis ,
[<Optional;DefaultParameterValue(null)>] ?Connector ,
[<Optional;DefaultParameterValue(null)>] ?Insidetextfont ,
[<Optional;DefaultParameterValue(null)>] ?Outsidetextfont
) =

Trace.initFunnel(
TraceStyle.Funnel(
x = x ,
y = y ,
?x0 = x0 ,
?dX = dX ,
?y0 = y0 ,
?dY = dY ,
?Width = Width ,
?Offset = Offset ,
?Orientation = Orientation ,
?Alignmentgroup = Alignmentgroup ,
?Offsetgroup = Offsetgroup ,
?Cliponaxis = Cliponaxis ,
?Connector = Connector ,
?Insidetextfont = Insidetextfont ,
?Outsidetextfont = Outsidetextfont
)
)
|> TraceStyle.TraceInfo(?Name=Name,?Showlegend=Showlegend,?Opacity=Opacity)
|> TraceStyle.Marker(?Color=Color,?Line=Line)
|> TraceStyle.TextLabel(?Text=Labels,?Textposition=TextPosition,?Textfont=TextFont)
|> GenericChart.ofTraceObject

/// Creates a ScatterGeo chart, where data is visualized on a geographic map.
/// ScatterGeo charts are the basis of GeoPoint, GeoLine, and GeoBubble Charts, and can be customized as such. We also provide abstractions for those: Chart.GeoPoint, Chart.GeoLine, Chart.GeoBubble
///
Expand Down
43 changes: 43 additions & 0 deletions src/Plotly.NET/FunnelConnector.fs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
namespace Plotly.NET

/// Styles for connector lines in Funnel Charts.
///
/// Parameters:
///
/// Line : Sets the Line style for this WaterfallConnector
///
/// Visible : Wether or not connectors are visible
///
/// ConnectorMode : Sets the shape of connector lines.
type FunnelConnector () =
inherit DynamicObj ()

static member init
(
?Fillcolor : string,
?Line : Line,
?Visible : bool
) =

FunnelConnector()
|> FunnelConnector.style
(
?Fillcolor = Fillcolor,
?Line = Line ,
?Visible = Visible
)

static member style
(
?Fillcolor ,
?Line : Line,
?Visible : bool
) =
(fun (connector:FunnelConnector) ->

Fillcolor |> DynObj.setValueOpt connector "fillcolor"
Line |> DynObj.setValueOpt connector "line"
Visible |> DynObj.setValueOpt connector "visible"

connector
)
12 changes: 12 additions & 0 deletions src/Plotly.NET/Playground.fsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@
#load "Domain.fs"
#load "Line.fs"
#load "WaterfallConnector.fs"
#load "FunnelConnector.fs"
#load "Box.fs"
#load "Meanline.fs"
#load "Marker.fs"
Expand Down Expand Up @@ -569,4 +570,15 @@ let doughnut1 =
Colors=cols,
Textinfo=labels
)
|> Chart.Show

// Funnel example 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
1 change: 1 addition & 0 deletions src/Plotly.NET/Plotly.NET.fsproj
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,7 @@
<Compile Include="Domain.fs" />
<Compile Include="Line.fs" />
<Compile Include="WaterfallConnector.fs" />
<Compile Include="FunnelConnector.fs" />
<Compile Include="Box.fs" />
<Compile Include="Meanline.fs" />
<Compile Include="Marker.fs" />
Expand Down
40 changes: 40 additions & 0 deletions src/Plotly.NET/Trace.fs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1443,6 +1443,46 @@ module Trace =
trace
)

static member Funnel
(
x : seq<#IConvertible>,
y : seq<#IConvertible>,
?x0,
?dX : float,
?y0,
?dY : float,
?Width : float,
?Offset : float,
?Orientation : StyleParam.Orientation,
?Alignmentgroup : string,
?Offsetgroup : string,
?Cliponaxis : bool,
?Connector : FunnelConnector,
?Insidetextfont : Font,
?Outsidetextfont: Font
) =
(fun (trace:('T :> Trace)) ->

x |> DynObj.setValue trace "x"
y |> DynObj.setValue trace "y"
x0 |> DynObj.setValueOpt trace "x0"
dX |> DynObj.setValueOpt trace "dx"
y0 |> DynObj.setValueOpt trace "y0"
dY |> DynObj.setValueOpt trace "dy"
Width |> DynObj.setValueOpt trace "width"
Offset |> DynObj.setValueOpt trace "offset"
Orientation |> DynObj.setValueOptBy trace "orientation" StyleParam.Orientation.convert
Alignmentgroup |> DynObj.setValueOpt trace "alignmentgroup"
Offsetgroup |> DynObj.setValueOpt trace "offsetgroup"
Cliponaxis |> DynObj.setValueOpt trace "cliponaxis"
Connector |> DynObj.setValueOpt trace "connector"
Insidetextfont |> DynObj.setValueOpt trace "insidetextfont"
Outsidetextfont |> DynObj.setValueOpt trace "insidetextfont"

trace

)

static member ScatterGeo
(
mode : StyleParam.Mode,
Expand Down