Skip to content

Commit 7d3ea22

Browse files
authored
Add Chart.Indicator and related Trace/Layout objects (#207)
1 parent bb5af9c commit 7d3ea22

File tree

10 files changed

+703
-7
lines changed

10 files changed

+703
-7
lines changed

Plotly.NET.sln

+1
Original file line numberDiff line numberDiff line change
@@ -82,6 +82,7 @@ Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "docs", "docs", "{7B09CC0A-F
8282
docs\07_0_candlestick.fsx = docs\07_0_candlestick.fsx
8383
docs\07_1_funnel.fsx = docs\07_1_funnel.fsx
8484
docs\07_2_funnel_area.fsx = docs\07_2_funnel_area.fsx
85+
docs\07_3_indicator.fsx = docs\07_3_indicator.fsx
8586
docs\08_0_polar_line-scatter-plots.fsx = docs\08_0_polar_line-scatter-plots.fsx
8687
docs\08_1_polar_bar_charts.fsx = docs\08_1_polar_bar_charts.fsx
8788
docs\08_2_styling_polar_layouts.fsx = docs\08_2_styling_polar_layouts.fsx

docs/07_3_indicator.fsx

+88
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
(**
2+
---
3+
title: Indicator Charts
4+
category: Finance Charts
5+
categoryindex: 7
6+
index: 4
7+
---
8+
*)
9+
10+
(*** hide ***)
11+
12+
(*** condition: prepare ***)
13+
#r "nuget: Newtonsoft.JSON, 13.0.1"
14+
#r "nuget: DynamicObj"
15+
#r "../bin/Plotly.NET/net5.0/Plotly.NET.dll"
16+
17+
(*** condition: ipynb ***)
18+
#if IPYNB
19+
#r "nuget: Plotly.NET, {{fsdocs-package-version}}"
20+
#r "nuget: Plotly.NET.Interactive, {{fsdocs-package-version}}"
21+
#endif // IPYNB
22+
23+
(**
24+
# Indicator Charts
25+
26+
[![Binder]({{root}}img/badge-binder.svg)](https://mybinder.org/v2/gh/plotly/Plotly.NET/gh-pages?filepath={{fsdocs-source-basename}}.ipynb) 
27+
[![Script]({{root}}img/badge-script.svg)]({{root}}{{fsdocs-source-basename}}.fsx) 
28+
[![Notebook]({{root}}img/badge-notebook.svg)]({{root}}{{fsdocs-source-basename}}.ipynb)
29+
30+
*Summary:* This example shows how to create indicator charts in F#.
31+
32+
Indicator Charts visualize the evolution of a value compared to a reference value, optionally inside a range.
33+
34+
There are different types of indicator charts, depending on the `IndicatorMode` used in chart generation:
35+
36+
- `Delta`/`Number` (and combinations) simply shows if the value is increasing or decreasing compared to the reference
37+
- Any combination of the above with `Gauge` adds a customizable gauge that indicates where the value lies inside a given range.
38+
*)
39+
40+
open Plotly.NET
41+
open Plotly.NET.TraceObjects
42+
open Plotly.NET.LayoutObjects
43+
44+
let allIndicatorTypes =
45+
[
46+
Chart.Indicator(
47+
120., StyleParam.IndicatorMode.NumberDeltaGauge,
48+
Title = "Bullet gauge",
49+
DeltaReference = 90.,
50+
Range = StyleParam.Range.MinMax(-200., 200.),
51+
GaugeShape = StyleParam.IndicatorGaugeShape.Bullet,
52+
ShowGaugeAxis = false,
53+
Domain = Domain.init(Row = 0, Column = 0)
54+
)
55+
Chart.Indicator(
56+
200., StyleParam.IndicatorMode.NumberDeltaGauge,
57+
Title = "Angular gauge",
58+
Delta = IndicatorDelta.init(Reference=160),
59+
Range = StyleParam.Range.MinMax(0., 250.),
60+
Domain = Domain.init(Row = 0, Column = 1)
61+
)
62+
Chart.Indicator(
63+
300., StyleParam.IndicatorMode.NumberDelta,
64+
Title = "number and delta",
65+
DeltaReference = 90.,
66+
Domain = Domain.init(Row = 1, Column = 0)
67+
)
68+
Chart.Indicator(
69+
40., StyleParam.IndicatorMode.Delta,
70+
Title = "delta",
71+
DeltaReference = 90.,
72+
Domain = Domain.init(Row = 1, Column = 1)
73+
)
74+
]
75+
|> Chart.combine
76+
|> Chart.withLayoutGridStyle(Rows = 2, Columns = 2)
77+
|> Chart.withMarginSize(Left = 200)
78+
79+
80+
(*** condition: ipynb ***)
81+
#if IPYNB
82+
allIndicatorTypes
83+
#endif // IPYNB
84+
85+
(***hide***)
86+
allIndicatorTypes |> GenericChart.toChartHTML
87+
(***include-it-raw***)
88+

src/Plotly.NET/ChartAPI/ChartDomain.fs

+51
Original file line numberDiff line numberDiff line change
@@ -509,3 +509,54 @@ module ChartDomain =
509509
)
510510
)
511511
|> GenericChart.ofTraceObject
512+
513+
/// creates table out of header sequence and row sequences
514+
[<Extension>]
515+
static member Indicator
516+
(
517+
value : IConvertible,
518+
mode : StyleParam.IndicatorMode,
519+
[<Optional;DefaultParameterValue(null)>] ?Range : StyleParam.Range,
520+
[<Optional;DefaultParameterValue(null)>] ?Name : string,
521+
[<Optional;DefaultParameterValue(null)>] ?Title : string,
522+
[<Optional;DefaultParameterValue(null)>] ?ShowLegend : bool,
523+
[<Optional;DefaultParameterValue(null)>] ?Domain : Domain,
524+
[<Optional;DefaultParameterValue(null)>] ?Align : StyleParam.IndicatorAlignment,
525+
[<Optional;DefaultParameterValue(null)>] ?DeltaReference : #IConvertible,
526+
[<Optional;DefaultParameterValue(null)>] ?Delta : IndicatorDelta,
527+
[<Optional;DefaultParameterValue(null)>] ?Number : IndicatorNumber,
528+
[<Optional;DefaultParameterValue(null)>] ?GaugeShape : StyleParam.IndicatorGaugeShape,
529+
[<Optional;DefaultParameterValue(null)>] ?Gauge : IndicatorGauge,
530+
[<Optional;DefaultParameterValue(null)>] ?ShowGaugeAxis : bool,
531+
[<Optional;DefaultParameterValue(null)>] ?GaugeAxis : LinearAxis
532+
) =
533+
let axis =
534+
GaugeAxis
535+
|> Option.defaultValue(LinearAxis.init())
536+
|> LinearAxis.style(?Range=Range, ?Visible=ShowGaugeAxis)
537+
538+
let gauge =
539+
Gauge
540+
|> Option.defaultValue(IndicatorGauge.init())
541+
|> IndicatorGauge.style(Axis=axis, ?Shape=GaugeShape)
542+
543+
let delta =
544+
Delta
545+
|> Option.defaultValue(IndicatorDelta.init())
546+
|> IndicatorDelta.style(?Reference = DeltaReference)
547+
548+
TraceDomain.initIndicator(
549+
TraceDomainStyle.Indicator(
550+
?Name = Name ,
551+
?Title = Title ,
552+
?ShowLegend = ShowLegend,
553+
Mode = mode ,
554+
Value = value ,
555+
?Domain = Domain ,
556+
?Align = Align ,
557+
Delta = delta ,
558+
?Number = Number ,
559+
Gauge = gauge
560+
)
561+
)
562+
|> GenericChart.ofTraceObject

src/Plotly.NET/CommonAbstractions/StyleParams.fs

+55
Original file line numberDiff line numberDiff line change
@@ -1114,6 +1114,61 @@ module StyleParam =
11141114
// #I#
11151115
//--------------------------
11161116

1117+
[<RequireQualifiedAccess>]
1118+
type IndicatorMode =
1119+
| Number | Delta | Gauge
1120+
| NumberDelta | NumberGauge
1121+
| DeltaGauge
1122+
| NumberDeltaGauge
1123+
static member toString = function
1124+
| Number -> "number"
1125+
| Delta -> "delta"
1126+
| Gauge -> "gauge"
1127+
| NumberDelta -> "number+delta"
1128+
| NumberGauge -> "number+gauge"
1129+
| DeltaGauge -> "delta+gauge"
1130+
| NumberDeltaGauge -> "number+delta+gauge"
1131+
1132+
static member convert = IndicatorMode.toString >> box
1133+
override this.ToString() = this |> IndicatorMode.toString
1134+
member this.Convert() = this |> IndicatorMode.convert
1135+
1136+
[<RequireQualifiedAccess>]
1137+
type IndicatorAlignment =
1138+
| Left | Center | Right
1139+
static member toString = function
1140+
| Left -> "left"
1141+
| Center-> "center"
1142+
| Right -> "right"
1143+
1144+
static member convert = IndicatorAlignment.toString >> box
1145+
override this.ToString() = this |> IndicatorAlignment.toString
1146+
member this.Convert() = this |> IndicatorAlignment.convert
1147+
1148+
[<RequireQualifiedAccess>]
1149+
type IndicatorGaugeShape =
1150+
| Angular | Bullet
1151+
static member toString = function
1152+
| Angular -> "angular"
1153+
| Bullet -> "bullet"
1154+
1155+
static member convert = IndicatorGaugeShape.toString >> box
1156+
override this.ToString() = this |> IndicatorGaugeShape.toString
1157+
member this.Convert() = this |> IndicatorGaugeShape.convert
1158+
1159+
[<RequireQualifiedAccess>]
1160+
type IndicatorDeltaPosition =
1161+
| Top | Bottom | Left | Right
1162+
static member toString = function
1163+
| Top -> "top"
1164+
| Bottom -> "bottom"
1165+
| Left -> "left"
1166+
| Right -> "right"
1167+
1168+
static member convert = IndicatorDeltaPosition.toString >> box
1169+
override this.ToString() = this |> IndicatorDeltaPosition.toString
1170+
member this.Convert() = this |> IndicatorDeltaPosition.convert
1171+
11171172
[<RequireQualifiedAccess>]
11181173
type InsideTextAnchor =
11191174
| End | Middle | Start

0 commit comments

Comments
 (0)