Skip to content

Commit

Permalink
plotlyjs 2.21.0: Add texttemplate attribute to shape.label (plotly/pl…
Browse files Browse the repository at this point in the history
  • Loading branch information
kMutagene committed Jul 10, 2023
1 parent c82633a commit 77fc2b0
Show file tree
Hide file tree
Showing 11 changed files with 89 additions and 20 deletions.
2 changes: 1 addition & 1 deletion src/Plotly.NET/Globals.fs
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ open Giraffe.ViewEngine

/// The plotly js version loaded from cdn in rendered html docs
[<Literal>]
let PLOTLYJS_VERSION = "2.20.0"
let PLOTLYJS_VERSION = "2.21.0"

[<Literal>]
let SCRIPT_TEMPLATE =
Expand Down
6 changes: 6 additions & 0 deletions src/Plotly.NET/Layout/ObjectAbstractions/Common/ShapeLabel.fs
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ type ShapeLabel() =
/// <param name="Text">Sets padding (in px) between edge of label and edge of shape.</param>
/// <param name="TextAngle">Sets padding (in px) between edge of label and edge of shape.</param>
/// <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>
/// <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>
/// <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>
/// <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>
static member init
Expand All @@ -29,6 +30,7 @@ type ShapeLabel() =
[<Optional; DefaultParameterValue(null)>] ?Text: string,
[<Optional; DefaultParameterValue(null)>] ?TextAngle: StyleParam.TextAngle,
[<Optional; DefaultParameterValue(null)>] ?TextPosition: StyleParam.TextPosition,
[<Optional; DefaultParameterValue(null)>] ?TextTemplate: string,
[<Optional; DefaultParameterValue(null)>] ?XAnchor: StyleParam.XAnchorPosition,
[<Optional; DefaultParameterValue(null)>] ?YAnchor: StyleParam.YAnchorPosition
) =
Expand All @@ -40,6 +42,7 @@ type ShapeLabel() =
?Text = Text,
?TextAngle = TextAngle,
?TextPosition = TextPosition,
?TextTemplate = TextTemplate,
?XAnchor = XAnchor,
?YAnchor = YAnchor
)
Expand All @@ -52,6 +55,7 @@ type ShapeLabel() =
/// <param name="Text">Sets padding (in px) between edge of label and edge of shape.</param>
/// <param name="TextAngle">Sets padding (in px) between edge of label and edge of shape.</param>
/// <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>
/// <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>
/// <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>
/// <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>
static member style
Expand All @@ -61,6 +65,7 @@ type ShapeLabel() =
[<Optional; DefaultParameterValue(null)>] ?Text: string,
[<Optional; DefaultParameterValue(null)>] ?TextAngle: StyleParam.TextAngle,
[<Optional; DefaultParameterValue(null)>] ?TextPosition: StyleParam.TextPosition,
[<Optional; DefaultParameterValue(null)>] ?TextTemplate: string,
[<Optional; DefaultParameterValue(null)>] ?XAnchor: StyleParam.XAnchorPosition,
[<Optional; DefaultParameterValue(null)>] ?YAnchor: StyleParam.YAnchorPosition
) =
Expand All @@ -72,6 +77,7 @@ type ShapeLabel() =
Text |> DynObj.setValueOpt shapeLabel "text"
TextAngle |> DynObj.setValueOptBy shapeLabel "textangle" StyleParam.TextAngle.convert
TextPosition |> DynObj.setValueOptBy shapeLabel "textposition" StyleParam.TextPosition.convert
TextTemplate |> DynObj.setValueOpt shapeLabel "texttemplate"
XAnchor |> DynObj.setValueOptBy shapeLabel "xanchor" StyleParam.XAnchorPosition.convert
YAnchor |> DynObj.setValueOptBy shapeLabel "yanchor" StyleParam.YAnchorPosition.convert

Expand Down
4 changes: 2 additions & 2 deletions src/Plotly.NET/Plotly.NET.fsproj
Original file line number Diff line number Diff line change
Expand Up @@ -40,8 +40,8 @@
<ItemGroup>
<None Include="RELEASE_NOTES.md" />
<None Include="..\..\docs\img\logo.png" Pack="true" PackagePath="\" />
<EmbeddedResource Include="plotly-2.20.0.min.js" />
<EmbeddedResource Include="plotly-2.20.0.min.js.LICENSE.txt" />
<EmbeddedResource Include="plotly-2.21.0.min.js" />
<EmbeddedResource Include="plotly-2.21.0.min.js.LICENSE.txt" />
<Compile Include="Globals.fs" />
<Compile Include="InternalUtils.fs" />
<Compile Include="CommonAbstractions\ColorKeyword.fs" />
Expand Down
8 changes: 0 additions & 8 deletions src/Plotly.NET/plotly-2.20.0.min.js

This file was deleted.

8 changes: 8 additions & 0 deletions src/Plotly.NET/plotly-2.21.0.min.js

Large diffs are not rendered by default.

5 changes: 3 additions & 2 deletions tests/Common/FSharpTestBase/FSharpTestBase.fsproj
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,8 @@

<ItemGroup>
<EmbeddedResource Include="..\..\..\docs\img\logo.png" />
<EmbeddedResource Include="..\..\..\src\Plotly.NET\plotly-2.20.0.min.js" />
<EmbeddedResource Include="..\..\..\src\Plotly.NET\plotly-2.20.0.min.js.LICENSE.txt" />
<EmbeddedResource Include="..\..\..\src\Plotly.NET\plotly-2.21.0.min.js" />
<EmbeddedResource Include="..\..\..\src\Plotly.NET\plotly-2.21.0.min.js.LICENSE.txt" />
</ItemGroup>

<ItemGroup>
Expand All @@ -21,6 +21,7 @@
<Compile Include="TestCharts\ChartCarpetTestCharts.fs" />
<Compile Include="TestCharts\ChartDomainTestCharts.fs" />
<Compile Include="TestCharts\ChartSmithTestCharts.fs" />
<Compile Include="TestCharts\UpstreamFeatures\2.21.fs" />
<Compile Include="TestCharts\UpstreamFeatures\2.20.fs" />
<Compile Include="TestCharts\UpstreamFeatures\2.19.fs" />
</ItemGroup>
Expand Down
27 changes: 27 additions & 0 deletions tests/Common/FSharpTestBase/TestCharts/UpstreamFeatures/2.21.fs
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
module PlotlyJS_2_21_TestCharts

open Plotly.NET
open Plotly.NET.TraceObjects
open Plotly.NET.LayoutObjects


module ShapeLabelTextTemplate =

let ``Line shape with all template item variables accessed``=
Chart.Point(
[(0,10);(10,10)],
UseDefaults = false
)
|> Chart.withShape(
Shape.init(
X0 = 0,
X1 = 10,
Y0 = 10,
Y1 = 10,
ShapeType = StyleParam.ShapeType.Line,
Label = ShapeLabel.init(
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>"
)
)
)
|> Chart.withSize(1000,1000)
17 changes: 12 additions & 5 deletions tests/ConsoleApps/FSharpConsole/Program.fs
Original file line number Diff line number Diff line change
Expand Up @@ -12,14 +12,21 @@ open Newtonsoft.Json
[<EntryPoint>]
let main argv =
Chart.Point(
[1,2],
[(0,10);(10,10)],
UseDefaults = false
)
|> Chart.withTitle(
Title.init(
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.""",
AutoMargin = true
|> Chart.withShape(
Shape.init(
X0 = 0,
X1 = 10,
Y0 = 10,
Y1 = 10,
ShapeType = StyleParam.ShapeType.Line,
Label = ShapeLabel.init(
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>"
)
)
)
|> Chart.withSize(1000,1000)
|> Chart.show
0
5 changes: 3 additions & 2 deletions tests/CoreTests/CoreTests/CoreTests.fsproj
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,8 @@
</PropertyGroup>

<ItemGroup>
<EmbeddedResource Include="..\..\..\src\Plotly.NET\plotly-2.20.0.min.js" />
<EmbeddedResource Include="..\..\..\src\Plotly.NET\plotly-2.20.0.min.js.LICENSE.txt" />
<EmbeddedResource Include="..\..\..\src\Plotly.NET\plotly-2.21.0.min.js" />
<EmbeddedResource Include="..\..\..\src\Plotly.NET\plotly-2.21.0.min.js.LICENSE.txt" />
<!--HTMLCodegen-->
<Compile Include="HTMLCodegen\Chart2D.fs" />
<Compile Include="HTMLCodegen\Chart3D.fs" />
Expand All @@ -34,6 +34,7 @@
<Compile Include="Traces\TraceStaticMembers.fs" />
<Compile Include="Traces\TraceStyle.fs" />
<Compile Include="Traces\TraceID.fs" />
<Compile Include="UpstreamFeatures\2.21.fs" />
<Compile Include="UpstreamFeatures\2.20.fs" />
<Compile Include="UpstreamFeatures\2.19.fs" />
<Compile Include="Main.fs" />
Expand Down
27 changes: 27 additions & 0 deletions tests/CoreTests/CoreTests/UpstreamFeatures/2.21.fs
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
module CoreTests.UpstreamFeatures.PlotlyJS_2_21

open Expecto
open Plotly.NET
open Plotly.NET.LayoutObjects
open Plotly.NET.TraceObjects
open Plotly.NET.GenericChart

open TestUtils.HtmlCodegen
open PlotlyJS_2_21_TestCharts

module ShapeLabelTextTemplate =

[<Tests>]
let ``ShapeLabel TextTemplate chart HTML codegeneration tests`` =
testList "UpstreamFeatures.PlotlyJS_2_21" [
testList "ShapeLabelTextTemplate" [
testCase "Line shape with all template item variables accessed data" ( fun () ->
"""var data = [{"type":"scatter","mode":"markers","x":[0,10],"y":[10,10],"marker":{},"line":{}}];"""
|> chartGeneratedContains ShapeLabelTextTemplate.``Line shape with all template item variables accessed``
)
testCase "Line shape with all template item variables accessed layout" ( fun () ->
"""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};"""
|> chartGeneratedContains ShapeLabelTextTemplate.``Line shape with all template item variables accessed``
)
]
]

0 comments on commit 77fc2b0

Please sign in to comment.