Skip to content

Commit 77fc2b0

Browse files
kMutagenekMutagene
committed
plotlyjs 2.21.0: Add texttemplate attribute to shape.label (plotly/plotly.js#6527)
1 parent c82633a commit 77fc2b0

File tree

11 files changed

+89
-20
lines changed

11 files changed

+89
-20
lines changed

Diff for: ‎src/Plotly.NET/Globals.fs

+1-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ open Giraffe.ViewEngine
77

88
/// The plotly js version loaded from cdn in rendered html docs
99
[<Literal>]
10-
let PLOTLYJS_VERSION = "2.20.0"
10+
let PLOTLYJS_VERSION = "2.21.0"
1111

1212
[<Literal>]
1313
let SCRIPT_TEMPLATE =

Diff for: ‎src/Plotly.NET/Layout/ObjectAbstractions/Common/ShapeLabel.fs

+6
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ type ShapeLabel() =
2020
/// <param name="Text">Sets padding (in px) between edge of label and edge of shape.</param>
2121
/// <param name="TextAngle">Sets padding (in px) between edge of label and edge of shape.</param>
2222
/// <param name="TextPosition">Sets the position of the label text relative to the shape. Supported values for rectangles, circles and paths are "top left", "top center", "top right", "middle left", "middle center", "middle right", "bottom left", "bottom center", and "bottom right". Supported values for lines are "start", "middle", and "end". Default: "middle center" for rectangles, circles, and paths; "middle" for lines.</param>
23+
/// <param name="TextTemplate">Template string used for rendering the shape's label. Note that this will override `text`. Variables are inserted using %{variable}, for example "x0: %{x0}". Numbers are formatted using d3-format's syntax %{variable:d3-format}, for example "Price: %{x0:$.2f}". See https://github.com/d3/d3-format/tree/v1.4.5#d3-format for details on the formatting syntax. Dates are formatted using d3-time-format's syntax %{variable|d3-time-format}, for example "Day: %{x0|%m %b %Y}". See https://github.com/d3/d3-time-format/tree/v2.2.3#locale_format for details on the date formatting syntax. A single multiplication or division operation may be applied to numeric variables, and combined with d3 number formatting, for example "Length in cm: %{x0"2.54}", "%{slope"60:.1f} meters per second." For log axes, variable values are given in log units. For date axes, x/y coordinate variables and center variables use datetimes, while all other variable values use values in ms. Finally, the template string has access to variables `x0`, `x1`, `y0`, `y1`, `slope`, `dx`, `dy`, `width`, `height`, `length`, `xcenter` and `ycenter`.</param>
2324
/// <param name="XAnchor">Sets the label's horizontal position anchor This anchor binds the specified `textposition` to the "left", "center" or "right" of the label text. For example, if `textposition` is set to "top right" and `xanchor` to "right" then the right-most portion of the label text lines up with the right-most edge of the shape.</param>
2425
/// <param name="YAnchor">Sets the label's vertical position anchor This anchor binds the specified `textposition` to the "top", "middle" or "bottom" of the label text. For example, if `textposition` is set to "top right" and `yanchor` to "top" then the top-most portion of the label text lines up with the top-most edge of the shape.</param>
2526
static member init
@@ -29,6 +30,7 @@ type ShapeLabel() =
2930
[<Optional; DefaultParameterValue(null)>] ?Text: string,
3031
[<Optional; DefaultParameterValue(null)>] ?TextAngle: StyleParam.TextAngle,
3132
[<Optional; DefaultParameterValue(null)>] ?TextPosition: StyleParam.TextPosition,
33+
[<Optional; DefaultParameterValue(null)>] ?TextTemplate: string,
3234
[<Optional; DefaultParameterValue(null)>] ?XAnchor: StyleParam.XAnchorPosition,
3335
[<Optional; DefaultParameterValue(null)>] ?YAnchor: StyleParam.YAnchorPosition
3436
) =
@@ -40,6 +42,7 @@ type ShapeLabel() =
4042
?Text = Text,
4143
?TextAngle = TextAngle,
4244
?TextPosition = TextPosition,
45+
?TextTemplate = TextTemplate,
4346
?XAnchor = XAnchor,
4447
?YAnchor = YAnchor
4548
)
@@ -52,6 +55,7 @@ type ShapeLabel() =
5255
/// <param name="Text">Sets padding (in px) between edge of label and edge of shape.</param>
5356
/// <param name="TextAngle">Sets padding (in px) between edge of label and edge of shape.</param>
5457
/// <param name="TextPosition">Sets the position of the label text relative to the shape. Supported values for rectangles, circles and paths are "top left", "top center", "top right", "middle left", "middle center", "middle right", "bottom left", "bottom center", and "bottom right". Supported values for lines are "start", "middle", and "end". Default: "middle center" for rectangles, circles, and paths; "middle" for lines.</param>
58+
/// <param name="TextTemplate">Template string used for rendering the shape's label. Note that this will override `text`. Variables are inserted using %{variable}, for example "x0: %{x0}". Numbers are formatted using d3-format's syntax %{variable:d3-format}, for example "Price: %{x0:$.2f}". See https://github.com/d3/d3-format/tree/v1.4.5#d3-format for details on the formatting syntax. Dates are formatted using d3-time-format's syntax %{variable|d3-time-format}, for example "Day: %{x0|%m %b %Y}". See https://github.com/d3/d3-time-format/tree/v2.2.3#locale_format for details on the date formatting syntax. A single multiplication or division operation may be applied to numeric variables, and combined with d3 number formatting, for example "Length in cm: %{x0"2.54}", "%{slope"60:.1f} meters per second." For log axes, variable values are given in log units. For date axes, x/y coordinate variables and center variables use datetimes, while all other variable values use values in ms. Finally, the template string has access to variables `x0`, `x1`, `y0`, `y1`, `slope`, `dx`, `dy`, `width`, `height`, `length`, `xcenter` and `ycenter`.</param>
5559
/// <param name="XAnchor">Sets the label's horizontal position anchor This anchor binds the specified `textposition` to the "left", "center" or "right" of the label text. For example, if `textposition` is set to "top right" and `xanchor` to "right" then the right-most portion of the label text lines up with the right-most edge of the shape.</param>
5660
/// <param name="YAnchor">Sets the label's vertical position anchor This anchor binds the specified `textposition` to the "top", "middle" or "bottom" of the label text. For example, if `textposition` is set to "top right" and `yanchor` to "top" then the top-most portion of the label text lines up with the top-most edge of the shape.</param>
5761
static member style
@@ -61,6 +65,7 @@ type ShapeLabel() =
6165
[<Optional; DefaultParameterValue(null)>] ?Text: string,
6266
[<Optional; DefaultParameterValue(null)>] ?TextAngle: StyleParam.TextAngle,
6367
[<Optional; DefaultParameterValue(null)>] ?TextPosition: StyleParam.TextPosition,
68+
[<Optional; DefaultParameterValue(null)>] ?TextTemplate: string,
6469
[<Optional; DefaultParameterValue(null)>] ?XAnchor: StyleParam.XAnchorPosition,
6570
[<Optional; DefaultParameterValue(null)>] ?YAnchor: StyleParam.YAnchorPosition
6671
) =
@@ -72,6 +77,7 @@ type ShapeLabel() =
7277
Text |> DynObj.setValueOpt shapeLabel "text"
7378
TextAngle |> DynObj.setValueOptBy shapeLabel "textangle" StyleParam.TextAngle.convert
7479
TextPosition |> DynObj.setValueOptBy shapeLabel "textposition" StyleParam.TextPosition.convert
80+
TextTemplate |> DynObj.setValueOpt shapeLabel "texttemplate"
7581
XAnchor |> DynObj.setValueOptBy shapeLabel "xanchor" StyleParam.XAnchorPosition.convert
7682
YAnchor |> DynObj.setValueOptBy shapeLabel "yanchor" StyleParam.YAnchorPosition.convert
7783

Diff for: ‎src/Plotly.NET/Plotly.NET.fsproj

+2-2
Original file line numberDiff line numberDiff line change
@@ -40,8 +40,8 @@
4040
<ItemGroup>
4141
<None Include="RELEASE_NOTES.md" />
4242
<None Include="..\..\docs\img\logo.png" Pack="true" PackagePath="\" />
43-
<EmbeddedResource Include="plotly-2.20.0.min.js" />
44-
<EmbeddedResource Include="plotly-2.20.0.min.js.LICENSE.txt" />
43+
<EmbeddedResource Include="plotly-2.21.0.min.js" />
44+
<EmbeddedResource Include="plotly-2.21.0.min.js.LICENSE.txt" />
4545
<Compile Include="Globals.fs" />
4646
<Compile Include="InternalUtils.fs" />
4747
<Compile Include="CommonAbstractions\ColorKeyword.fs" />

Diff for: ‎src/Plotly.NET/plotly-2.20.0.min.js

-8
This file was deleted.

Diff for: ‎src/Plotly.NET/plotly-2.21.0.min.js

+8
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

Diff for: ‎src/Plotly.NET/plotly-2.20.0.min.js.LICENSE.txt renamed to ‎src/Plotly.NET/plotly-2.21.0.min.js.LICENSE.txt

File renamed without changes.

Diff for: ‎tests/Common/FSharpTestBase/FSharpTestBase.fsproj

+3-2
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,8 @@
77

88
<ItemGroup>
99
<EmbeddedResource Include="..\..\..\docs\img\logo.png" />
10-
<EmbeddedResource Include="..\..\..\src\Plotly.NET\plotly-2.20.0.min.js" />
11-
<EmbeddedResource Include="..\..\..\src\Plotly.NET\plotly-2.20.0.min.js.LICENSE.txt" />
10+
<EmbeddedResource Include="..\..\..\src\Plotly.NET\plotly-2.21.0.min.js" />
11+
<EmbeddedResource Include="..\..\..\src\Plotly.NET\plotly-2.21.0.min.js.LICENSE.txt" />
1212
</ItemGroup>
1313

1414
<ItemGroup>
@@ -21,6 +21,7 @@
2121
<Compile Include="TestCharts\ChartCarpetTestCharts.fs" />
2222
<Compile Include="TestCharts\ChartDomainTestCharts.fs" />
2323
<Compile Include="TestCharts\ChartSmithTestCharts.fs" />
24+
<Compile Include="TestCharts\UpstreamFeatures\2.21.fs" />
2425
<Compile Include="TestCharts\UpstreamFeatures\2.20.fs" />
2526
<Compile Include="TestCharts\UpstreamFeatures\2.19.fs" />
2627
</ItemGroup>

Diff for: ‎tests/Common/FSharpTestBase/TestCharts/UpstreamFeatures/2.21.fs

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
module PlotlyJS_2_21_TestCharts
2+
3+
open Plotly.NET
4+
open Plotly.NET.TraceObjects
5+
open Plotly.NET.LayoutObjects
6+
7+
8+
module ShapeLabelTextTemplate =
9+
10+
let ``Line shape with all template item variables accessed``=
11+
Chart.Point(
12+
[(0,10);(10,10)],
13+
UseDefaults = false
14+
)
15+
|> Chart.withShape(
16+
Shape.init(
17+
X0 = 0,
18+
X1 = 10,
19+
Y0 = 10,
20+
Y1 = 10,
21+
ShapeType = StyleParam.ShapeType.Line,
22+
Label = ShapeLabel.init(
23+
TextTemplate = "Here are the values i can access:<br><b>Raw variables (from shape definition):</b><br><br>x0: %{x0}<br>x1: %{x1}<br>y0: %{y0}<br>y1: %{y1}<br><br><b>Calculated variables:</b><br><br>xcenter (calculated as (x0+x1)/2): %{xcenter}<br>ycenter (calculated as (y0+y1)/2): %{ycenter}<br>dx (calculated as x1-x0): %{dx}<br>dy (calculated as y1-y0): %{dy}<br>width (calculated as abs(x1-x0)): %{width}<br>height (calculated as abs(y1-y0)): %{height}<br>length (calculated as sqrt(dx^2+dy^2)) -- for lines only: %{length}<br>slope (calculated as (y1-y0)/(x1-x0)): %{slope}<br>"
24+
)
25+
)
26+
)
27+
|> Chart.withSize(1000,1000)

Diff for: ‎tests/ConsoleApps/FSharpConsole/Program.fs

+12-5
Original file line numberDiff line numberDiff line change
@@ -12,14 +12,21 @@ open Newtonsoft.Json
1212
[<EntryPoint>]
1313
let main argv =
1414
Chart.Point(
15-
[1,2],
15+
[(0,10);(10,10)],
1616
UseDefaults = false
1717
)
18-
|> Chart.withTitle(
19-
Title.init(
20-
Text = """Lorem ipsum dolor sit amet, <br>consetetur sadipscing elitr, sed diam nonumy eirmod <br>tempor invidunt ut labore et dolore magna aliquyam erat, <br>sed diam voluptua. At vero eos et accusam et justo <br>duo dolores et ea rebum. Stet clita kasd gubergren,<br>no sea takimata sanctus est Lorem ipsum dolor sit amet. <br>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, <br>sed diam nonumy eirmod tempor invidunt ut labore et <br>dolore magna aliquyam erat, sed diam voluptua. <br>At vero eos et accusam et justo duo dolores et ea rebum. <br>Stet clita kasd gubergren, no sea takimata sanctus est <br>Lorem ipsum dolor sit amet.""",
21-
AutoMargin = true
18+
|> Chart.withShape(
19+
Shape.init(
20+
X0 = 0,
21+
X1 = 10,
22+
Y0 = 10,
23+
Y1 = 10,
24+
ShapeType = StyleParam.ShapeType.Line,
25+
Label = ShapeLabel.init(
26+
TextTemplate = "Here are the values i can access:<br><b>Raw variables (from shape definition):</b><br><br>x0: %{x0}<br>x1: %{x1}<br>y0: %{y0}<br>y1: %{y1}<br><br><b>Calculated variables:</b><br><br>xcenter (calculated as (x0+x1)/2): %{xcenter}<br>ycenter (calculated as (y0+y1)/2): %{ycenter}<br>dx (calculated as x1-x0): %{dx}<br>dy (calculated as y1-y0): %{dy}<br>width (calculated as abs(x1-x0)): %{width}<br>height (calculated as abs(y1-y0)): %{height}<br>length (calculated as sqrt(dx^2+dy^2)) -- for lines only: %{length}<br>slope (calculated as (y1-y0)/(x1-x0)): %{slope}<br>"
27+
)
2228
)
2329
)
30+
|> Chart.withSize(1000,1000)
2431
|> Chart.show
2532
0

Diff for: ‎tests/CoreTests/CoreTests/CoreTests.fsproj

+3-2
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,8 @@
88
</PropertyGroup>
99

1010
<ItemGroup>
11-
<EmbeddedResource Include="..\..\..\src\Plotly.NET\plotly-2.20.0.min.js" />
12-
<EmbeddedResource Include="..\..\..\src\Plotly.NET\plotly-2.20.0.min.js.LICENSE.txt" />
11+
<EmbeddedResource Include="..\..\..\src\Plotly.NET\plotly-2.21.0.min.js" />
12+
<EmbeddedResource Include="..\..\..\src\Plotly.NET\plotly-2.21.0.min.js.LICENSE.txt" />
1313
<!--HTMLCodegen-->
1414
<Compile Include="HTMLCodegen\Chart2D.fs" />
1515
<Compile Include="HTMLCodegen\Chart3D.fs" />
@@ -34,6 +34,7 @@
3434
<Compile Include="Traces\TraceStaticMembers.fs" />
3535
<Compile Include="Traces\TraceStyle.fs" />
3636
<Compile Include="Traces\TraceID.fs" />
37+
<Compile Include="UpstreamFeatures\2.21.fs" />
3738
<Compile Include="UpstreamFeatures\2.20.fs" />
3839
<Compile Include="UpstreamFeatures\2.19.fs" />
3940
<Compile Include="Main.fs" />

Diff for: ‎tests/CoreTests/CoreTests/UpstreamFeatures/2.21.fs

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
module CoreTests.UpstreamFeatures.PlotlyJS_2_21
2+
3+
open Expecto
4+
open Plotly.NET
5+
open Plotly.NET.LayoutObjects
6+
open Plotly.NET.TraceObjects
7+
open Plotly.NET.GenericChart
8+
9+
open TestUtils.HtmlCodegen
10+
open PlotlyJS_2_21_TestCharts
11+
12+
module ShapeLabelTextTemplate =
13+
14+
[<Tests>]
15+
let ``ShapeLabel TextTemplate chart HTML codegeneration tests`` =
16+
testList "UpstreamFeatures.PlotlyJS_2_21" [
17+
testList "ShapeLabelTextTemplate" [
18+
testCase "Line shape with all template item variables accessed data" ( fun () ->
19+
"""var data = [{"type":"scatter","mode":"markers","x":[0,10],"y":[10,10],"marker":{},"line":{}}];"""
20+
|> chartGeneratedContains ShapeLabelTextTemplate.``Line shape with all template item variables accessed``
21+
)
22+
testCase "Line shape with all template item variables accessed layout" ( fun () ->
23+
"""var layout = {"shapes":[{"label":{"texttemplate":"Here are the values i can access:<br><b>Raw variables (from shape definition):</b><br><br>x0: %{x0}<br>x1: %{x1}<br>y0: %{y0}<br>y1: %{y1}<br><br><b>Calculated variables:</b><br><br>xcenter (calculated as (x0+x1)/2): %{xcenter}<br>ycenter (calculated as (y0+y1)/2): %{ycenter}<br>dx (calculated as x1-x0): %{dx}<br>dy (calculated as y1-y0): %{dy}<br>width (calculated as abs(x1-x0)): %{width}<br>height (calculated as abs(y1-y0)): %{height}<br>length (calculated as sqrt(dx^2+dy^2)) -- for lines only: %{length}<br>slope (calculated as (y1-y0)/(x1-x0)): %{slope}<br>"},"type":"line","x0":0,"x1":10,"y0":10,"y1":10}],"width":1000,"height":1000};"""
24+
|> chartGeneratedContains ShapeLabelTextTemplate.``Line shape with all template item variables accessed``
25+
)
26+
]
27+
]

0 commit comments

Comments
 (0)