Skip to content

Commit

Permalink
plotly.js v2.23: add xref and yref attributes for Legend and Colo…
Browse files Browse the repository at this point in the history
…rBar

- add tests
- add attributes to Chart API functions `withLegendStyle` and `withColorBarStyle`
  • Loading branch information
kMutagene committed Oct 24, 2023
1 parent 39dcefa commit a3e1abc
Show file tree
Hide file tree
Showing 15 changed files with 261 additions and 38 deletions.
2 changes: 1 addition & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
[![Build and test](https://github.com/plotly/Plotly.NET/actions/workflows/build-and-test.yml/badge.svg)](https://github.com/plotly/Plotly.NET/actions/workflows/build-and-test.yml)
[![](https://img.shields.io/nuget/vpre/Plotly.NET)](https://www.nuget.org/packages/Plotly.NET/)
[![Discord](https://img.shields.io/discord/836161044501889064?color=purple&label=Join%20our%20Discord%21&logo=discord&logoColor=white)](https://discord.gg/k3kUtFY8DB)
![](https://img.shields.io/badge/supported%20plotly.js%20version-2.21.0-blue)
![](https://img.shields.io/badge/supported%20plotly.js%20version-2.23.2-blue)
[![DOI](https://img.shields.io/badge/DOI-10.12688%2Ff1000research.123971.1-brightgreen)](https://doi.org/10.12688/f1000research.123971.1)

### Table of contents
Expand Down
132 changes: 117 additions & 15 deletions src/Plotly.NET/ChartAPI/Chart.fs

Large diffs are not rendered by default.

16 changes: 13 additions & 3 deletions src/Plotly.NET/CommonAbstractions/ColorBar.fs
Original file line number Diff line number Diff line change
Expand Up @@ -52,9 +52,11 @@ type ColorBar() =
/// <param name="X">Sets the x position of the color bar (in plot fraction).</param>
/// <param name="XAnchor">Sets this color bar's horizontal position anchor. This anchor binds the `x` position to the "left", "center" or "right" of the color bar.</param>
/// <param name="XPad">Sets the amount of padding (in px) along the x direction.</param>
/// <param name="XRef">Sets the container `x` refers to. "container" spans the entire `width` of the plot. "paper" refers to the width of the plotting area only.</param>
/// <param name="Y">Sets the y position of the color bar (in plot fraction).</param>
/// <param name="YAnchor">Sets this color bar's vertical position anchor This anchor binds the `y` position to the "top", "middle" or "bottom" of the color bar.</param>
/// <param name="YPad">Sets the amount of padding (in px) along the y direction.</param>
/// <param name="YRef">Sets the container `y` refers to. "container" spans the entire `height` of the plot. "paper" refers to the height of the plotting area only.</param>
static member init
(
[<Optional; DefaultParameterValue(null)>] ?BGColor: Color,
Expand Down Expand Up @@ -98,9 +100,11 @@ type ColorBar() =
[<Optional; DefaultParameterValue(null)>] ?X: float,
[<Optional; DefaultParameterValue(null)>] ?XAnchor: StyleParam.HorizontalAlign,
[<Optional; DefaultParameterValue(null)>] ?XPad: float,
[<Optional; DefaultParameterValue(null)>] ?XRef: string,
[<Optional; DefaultParameterValue(null)>] ?Y: float,
[<Optional; DefaultParameterValue(null)>] ?YAnchor: StyleParam.VerticalAlign,
[<Optional; DefaultParameterValue(null)>] ?YPad: float
[<Optional; DefaultParameterValue(null)>] ?YPad: float,
[<Optional; DefaultParameterValue(null)>] ?YRef: string
) =
ColorBar()
|> ColorBar.style (
Expand Down Expand Up @@ -145,9 +149,11 @@ type ColorBar() =
?X = X,
?XAnchor = XAnchor,
?XPad = XPad,
?XRef = XRef,
?Y = Y,
?YAnchor = YAnchor,
?YPad = YPad
?YPad = YPad,
?YRef = YRef
)


Expand Down Expand Up @@ -240,9 +246,11 @@ type ColorBar() =
[<Optional; DefaultParameterValue(null)>] ?X: float,
[<Optional; DefaultParameterValue(null)>] ?XAnchor: StyleParam.HorizontalAlign,
[<Optional; DefaultParameterValue(null)>] ?XPad: float,
[<Optional; DefaultParameterValue(null)>] ?XRef: string,
[<Optional; DefaultParameterValue(null)>] ?Y: float,
[<Optional; DefaultParameterValue(null)>] ?YAnchor: StyleParam.VerticalAlign,
[<Optional; DefaultParameterValue(null)>] ?YPad: float
[<Optional; DefaultParameterValue(null)>] ?YPad: float,
[<Optional; DefaultParameterValue(null)>] ?YRef: string
) =

(fun (colorBar: ColorBar) ->
Expand Down Expand Up @@ -288,8 +296,10 @@ type ColorBar() =
X |> DynObj.setValueOpt colorBar "x"
XAnchor |> DynObj.setValueOptBy colorBar "xanchor" StyleParam.HorizontalAlign.convert
XPad |> DynObj.setValueOpt colorBar "xpad"
XRef |> DynObj.setValueOpt colorBar "xref"
Y |> DynObj.setValueOpt colorBar "y"
YAnchor |> DynObj.setValueOptBy colorBar "yanchor" StyleParam.VerticalAlign.convert
YPad |> DynObj.setValueOpt colorBar "ypad"
YRef |> DynObj.setValueOpt colorBar "yref"

colorBar)
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.22.0"
let PLOTLYJS_VERSION = "2.23.2"

[<Literal>]
let SCRIPT_TEMPLATE =
Expand Down
18 changes: 15 additions & 3 deletions src/Plotly.NET/Layout/ObjectAbstractions/Common/Legend.fs
Original file line number Diff line number Diff line change
Expand Up @@ -33,8 +33,10 @@ type Legend() =
/// <param name="Visible">Determines whether or not this legend is visible.</param>
/// <param name="X">Sets the x position (in normalized coordinates) of the legend. Defaults to "1.02" for vertical legends and defaults to "0" for horizontal legends.</param>
/// <param name="XAnchor">Sets the legend's horizontal position anchor. This anchor binds the `x` position to the "left", "center" or "right" of the legend. Value "auto" anchors legends to the right for `x` values greater than or equal to 2/3, anchors legends to the left for `x` values less than or equal to 1/3 and anchors legends with respect to their center otherwise.</param>
/// <param name="XRef">Sets the container `x` refers to. "container" spans the entire `width` of the plot. "paper" refers to the width of the plotting area only.</param>
/// <param name="Y">Sets the y position (in normalized coordinates) of the legend. Defaults to "1" for vertical legends, defaults to "-0.1" for horizontal legends on graphs w/o range sliders and defaults to "1.1" for horizontal legends on graph with one or multiple range sliders.</param>
/// <param name="YAnchor">Sets the legend's vertical position anchor This anchor binds the `y` position to the "top", "middle" or "bottom" of the legend. Value "auto" anchors legends at their bottom for `y` values less than or equal to 1/3, anchors legends to at their top for `y` values greater than or equal to 2/3 and anchors legends with respect to their middle otherwise.</param>
/// <param name="YRef">Sets the container `y` refers to. "container" spans the entire `height` of the plot. "paper" refers to the height of the plotting area only.</param>
static member init
(
[<Optional; DefaultParameterValue(null)>] ?BGColor: Color,
Expand All @@ -58,8 +60,10 @@ type Legend() =
[<Optional; DefaultParameterValue(null)>] ?Visible: bool,
[<Optional; DefaultParameterValue(null)>] ?X: float,
[<Optional; DefaultParameterValue(null)>] ?XAnchor: StyleParam.XAnchorPosition,
[<Optional; DefaultParameterValue(null)>] ?XRef: string,
[<Optional; DefaultParameterValue(null)>] ?Y: float,
[<Optional; DefaultParameterValue(null)>] ?YAnchor: StyleParam.YAnchorPosition
[<Optional; DefaultParameterValue(null)>] ?YAnchor: StyleParam.YAnchorPosition,
[<Optional; DefaultParameterValue(null)>] ?YRef: string
) =
Legend()
|> Legend.style (
Expand All @@ -84,8 +88,10 @@ type Legend() =
?Visible = Visible,
?X = X,
?XAnchor = XAnchor,
?XRef = XRef,
?Y = Y,
?YAnchor = YAnchor
?YAnchor = YAnchor,
?YRef = YRef
)

/// <summary>
Expand All @@ -112,8 +118,10 @@ type Legend() =
/// <param name="Visible">Determines whether or not this legend is visible.</param>
/// <param name="X">Sets the x position (in normalized coordinates) of the legend. Defaults to "1.02" for vertical legends and defaults to "0" for horizontal legends.</param>
/// <param name="XAnchor">Sets the legend's horizontal position anchor. This anchor binds the `x` position to the "left", "center" or "right" of the legend. Value "auto" anchors legends to the right for `x` values greater than or equal to 2/3, anchors legends to the left for `x` values less than or equal to 1/3 and anchors legends with respect to their center otherwise.</param>
/// <param name="XRef">Sets the container `x` refers to. "container" spans the entire `width` of the plot. "paper" refers to the width of the plotting area only.</param>
/// <param name="Y">Sets the y position (in normalized coordinates) of the legend. Defaults to "1" for vertical legends, defaults to "-0.1" for horizontal legends on graphs w/o range sliders and defaults to "1.1" for horizontal legends on graph with one or multiple range sliders.</param>
/// <param name="YAnchor">Sets the legend's vertical position anchor This anchor binds the `y` position to the "top", "middle" or "bottom" of the legend. Value "auto" anchors legends at their bottom for `y` values less than or equal to 1/3, anchors legends to at their top for `y` values greater than or equal to 2/3 and anchors legends with respect to their middle otherwise.</param>
/// <param name="YRef">Sets the container `y` refers to. "container" spans the entire `height` of the plot. "paper" refers to the height of the plotting area only.</param>
static member style
(
[<Optional; DefaultParameterValue(null)>] ?BGColor: Color,
Expand All @@ -137,8 +145,10 @@ type Legend() =
[<Optional; DefaultParameterValue(null)>] ?Visible: bool,
[<Optional; DefaultParameterValue(null)>] ?X: float,
[<Optional; DefaultParameterValue(null)>] ?XAnchor: StyleParam.XAnchorPosition,
[<Optional; DefaultParameterValue(null)>] ?XRef: string,
[<Optional; DefaultParameterValue(null)>] ?Y: float,
[<Optional; DefaultParameterValue(null)>] ?YAnchor: StyleParam.YAnchorPosition
[<Optional; DefaultParameterValue(null)>] ?YAnchor: StyleParam.YAnchorPosition,
[<Optional; DefaultParameterValue(null)>] ?YRef: string
) =
(fun (legend: Legend) ->
BGColor |> DynObj.setValueOpt legend "bgcolor"
Expand All @@ -162,8 +172,10 @@ type Legend() =
Visible |> DynObj.setValueOpt legend "visible"
X |> DynObj.setValueOpt legend "x"
XAnchor |> DynObj.setValueOptBy legend "xanchor" StyleParam.XAnchorPosition.convert
XRef |> DynObj.setValueOpt legend "xref"
Y |> DynObj.setValueOpt legend "y"
YAnchor |> DynObj.setValueOptBy legend "yanchor" StyleParam.YAnchorPosition.convert
YRef |> DynObj.setValueOpt legend "yref"



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.22.0.min.js" />
<EmbeddedResource Include="plotly-2.22.0.min.js.LICENSE.txt" />
<EmbeddedResource Include="plotly-2.23.2.min.js" />
<EmbeddedResource Include="plotly-2.23.2.min.js.LICENSE.txt" />
<Compile Include="Globals.fs" />
<Compile Include="InternalUtils.fs" />
<Compile Include="CommonAbstractions\ColorKeyword.fs" />
Expand Down
2 changes: 2 additions & 0 deletions src/Plotly.NET/RELEASE_NOTES.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@
[Milestone link with all the fixed/closed issues](https://github.com/plotly/Plotly.NET/milestone/5)

- Keep up with plotlyjs 2.x incremental updates:
- v2.22:
- [Implement multi legend support](https://github.com/plotly/Plotly.NET/issues/406)

### 4.2.0 - August 02 2023

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

This file was deleted.

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

Large diffs are not rendered by default.

7 changes: 4 additions & 3 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.22.0.min.js" />
<EmbeddedResource Include="..\..\..\src\Plotly.NET\plotly-2.22.0.min.js.LICENSE.txt" />
<EmbeddedResource Include="..\..\..\src\Plotly.NET\plotly-2.23.2.min.js" />
<EmbeddedResource Include="..\..\..\src\Plotly.NET\plotly-2.23.2.min.js.LICENSE.txt" />
</ItemGroup>

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

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


module ``Colorbar X and Y ref`` =

let ``Heatmap with horizontal colorbar with x/yref = container`` =
Chart.Heatmap(
[
[1; 2; 3]
[3; 2; 1]
],
UseDefaults = false
)
|> Chart.withColorBar(
ColorBar.init(
X = 0.5,
Y = 0.1,
Orientation = StyleParam.Orientation.Horizontal,
XRef = "container",
YRef = "container",
Title = Title.init(
Text = "Colorbar 1"
)
)
)

module ``Legend X and Y ref`` =

let ``Point chart with horizontal legend with x/yref = container`` =
Chart.Point(
[1,2],
ShowLegend = true,
UseDefaults = false
)
|> Chart.withLegend(
Legend.init(
X = 0.5,
Y = 0.1,
Orientation = StyleParam.Orientation.Horizontal,
XRef = "container",
YRef = "container",
BorderColor = Color.fromKeyword Blue,
BorderWidth = 2,
Title = Title.init(
Text = "Legend 1"
)
)
)
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.22.0.min.js" />
<EmbeddedResource Include="..\..\..\src\Plotly.NET\plotly-2.22.0.min.js.LICENSE.txt" />
<EmbeddedResource Include="..\..\..\src\Plotly.NET\plotly-2.23.2.min.js" />
<EmbeddedResource Include="..\..\..\src\Plotly.NET\plotly-2.23.2.min.js.LICENSE.txt" />
<!--HTMLCodegen-->
<Compile Include="HTMLCodegen\Chart2D.fs" />
<Compile Include="HTMLCodegen\Chart3D.fs" />
Expand All @@ -36,6 +36,7 @@
<Compile Include="Traces\TraceStaticMembers.fs" />
<Compile Include="Traces\TraceStyle.fs" />
<Compile Include="Traces\TraceID.fs" />
<Compile Include="UpstreamFeatures\2.23.fs" />
<Compile Include="UpstreamFeatures\2.22.fs" />
<Compile Include="UpstreamFeatures\2.21.fs" />
<Compile Include="UpstreamFeatures\2.20.fs" />
Expand Down
43 changes: 43 additions & 0 deletions tests/CoreTests/CoreTests/UpstreamFeatures/2.23.fs
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
module CoreTests.UpstreamFeatures.PlotlyJS_2_23

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


open TestUtils.HtmlCodegen
open PlotlyJS_2_23_TestCharts

module ``Colorbar X and Y ref`` =

[<Tests>]
let ``Colorbar X/YRef HTML codegeneration tests`` =
testList "UpstreamFeatures.PlotlyJS_2_23" [
testList "Colorbar X/YRef" [
testCase "Heatmap with horizontal colorbar with x/yref = container data" ( fun () ->
"""var data = [{"type":"heatmap","z":[[1,2,3],[3,2,1]],"colorbar":{"orientation":"h","title":{"text":"Colorbar 1"},"x":0.5,"xref":"container","y":0.1,"yref":"container"}}];"""
|> chartGeneratedContains ``Colorbar X and Y ref``.``Heatmap with horizontal colorbar with x/yref = container``
)
testCase "Heatmap with horizontal colorbar with x/yref = container layout" ( fun () ->
emptyLayout ``Colorbar X and Y ref``.``Heatmap with horizontal colorbar with x/yref = container``
)
]
]

module ``Legend X and Y ref`` =

[<Tests>]
let ``Legend X/YRef HTML codegeneration tests`` =
testList "UpstreamFeatures.PlotlyJS_2_23" [
testList "Legend X/YRef" [
testCase "Point chart with horizontal legend with x/yref = container data" ( fun () ->
"""var data = [{"type":"scatter","showlegend":true,"mode":"markers","x":[1],"y":[2],"marker":{},"line":{}}];"""
|> chartGeneratedContains ``Legend X and Y ref``.``Point chart with horizontal legend with x/yref = container``
)
testCase "Point chart with horizontal legend with x/yref = container layout" ( fun () ->
"""var layout = {"legend":{"bordercolor":"rgba(0, 0, 255, 1.0)","borderwidth":2.0,"orientation":"h","title":{"text":"Legend 1"},"x":0.5,"xref":"container","y":0.1,"yref":"container"}};"""
|> chartGeneratedContains ``Legend X and Y ref``.``Point chart with horizontal legend with x/yref = container``
)
]
]

0 comments on commit a3e1abc

Please sign in to comment.