plotly.js v2.19.0: Add label attribute to shapes (plotly/plotly.js#6454)

src/Plotly.NET/CommonAbstractions/StyleParams.fs

@@ -3079,6 +3079,17 @@ module StyleParam =
     //--------------------------
     // #T#
     //--------------------------
+    [<RequireQualifiedAccess>]
+    type TextAngle =
+        | Auto
+        | Degrees of float
+
+        static member convert =
+            function
+            | Auto -> box "auto"
+            | Degrees d -> box d
+
+        member this.Convert() = this |> TextAngle.convert
 
     [<RequireQualifiedAccess>]
     type TriangulationAlgorithm =

src/Plotly.NET/Globals.fs

@@ -7,7 +7,7 @@ open Giraffe.ViewEngine
 
 /// The plotly js version loaded from cdn in rendered html docs
 [<Literal>]
-let PLOTLYJS_VERSION = "2.18.1"
+let PLOTLYJS_VERSION = "2.19.1"
 
 [<Literal>]
 let SCRIPT_TEMPLATE =

src/Plotly.NET/InternalUtils.fs

@@ -25,7 +25,7 @@ let getFullPlotlyJS () =
         Assembly.GetExecutingAssembly()
 
     use str =
-        assembly.GetManifestResourceStream("Plotly.NET.plotly-2.18.1.min.js")
+        assembly.GetManifestResourceStream($"Plotly.NET.plotly-{Globals.PLOTLYJS_VERSION}.min.js")
 
     use r = new StreamReader(str)
     r.ReadToEnd()

src/Plotly.NET/Layout/ObjectAbstractions/Common/Shape.fs

@@ -15,6 +15,7 @@ type Shape() =
     /// <param name="Editable">Determines whether the shape could be activated for edit or not. Has no effect when the older editable shapes mode is enabled via `config.editable` or `config.edits.shapePosition`.</param>
     /// <param name="FillColor">Sets the color filling the shape's interior. Only applies to closed shapes.</param>
     /// <param name="FillRule">Determines which regions of complex paths constitute the interior. For more info please visit https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/fill-rule</param>
+    /// <param name="Label">The text label of this shape.</param>
     /// <param name="Layer">Specifies whether shapes are drawn below or above traces.</param>
     /// <param name="Line">Sets the Shape outline</param>
     /// <param name="Name">When used in a template, named items are created in the output figure in addition to any items the figure already has in this array. You can modify these items in the output figure by making your own item with `templateitemname` matching this `name` alongside your modifications (including `visible: false` or `enabled: false` to hide it). Has no effect outside of a template.</param>
@@ -38,6 +39,7 @@ type Shape() =
             [<Optional; DefaultParameterValue(null)>] ?Editable: bool,
             [<Optional; DefaultParameterValue(null)>] ?FillColor: Color,
             [<Optional; DefaultParameterValue(null)>] ?FillRule: StyleParam.FillRule,
+            [<Optional; DefaultParameterValue(null)>] ?Label: ShapeLabel,
             [<Optional; DefaultParameterValue(null)>] ?Layer: StyleParam.Layer,
             [<Optional; DefaultParameterValue(null)>] ?Line: Line,
             [<Optional; DefaultParameterValue(null)>] ?Name: string,
@@ -62,6 +64,7 @@ type Shape() =
             ?Editable = Editable,
             ?FillColor = FillColor,
             ?FillRule = FillRule,
+            ?Label = Label,
             ?Layer = Layer,
             ?Line = Line,
             ?Name = Name,
@@ -88,6 +91,7 @@ type Shape() =
     /// <param name="Editable">Determines whether the shape could be activated for edit or not. Has no effect when the older editable shapes mode is enabled via `config.editable` or `config.edits.shapePosition`.</param>
     /// <param name="FillColor">Sets the color filling the shape's interior. Only applies to closed shapes.</param>
     /// <param name="FillRule">Determines which regions of complex paths constitute the interior. For more info please visit https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/fill-rule</param>
+    /// <param name="Label">The text label of this shape.</param>
     /// <param name="Layer">Specifies whether shapes are drawn below or above traces.</param>
     /// <param name="Line">Sets the Shape outline</param>
     /// <param name="Name">When used in a template, named items are created in the output figure in addition to any items the figure already has in this array. You can modify these items in the output figure by making your own item with `templateitemname` matching this `name` alongside your modifications (including `visible: false` or `enabled: false` to hide it). Has no effect outside of a template.</param>
@@ -111,6 +115,7 @@ type Shape() =
             [<Optional; DefaultParameterValue(null)>] ?Editable: bool,
             [<Optional; DefaultParameterValue(null)>] ?FillColor: Color,
             [<Optional; DefaultParameterValue(null)>] ?FillRule: StyleParam.FillRule,
+            [<Optional; DefaultParameterValue(null)>] ?Label: ShapeLabel,
             [<Optional; DefaultParameterValue(null)>] ?Layer: StyleParam.Layer,
             [<Optional; DefaultParameterValue(null)>] ?Line: Line,
             [<Optional; DefaultParameterValue(null)>] ?Name: string,
@@ -135,6 +140,7 @@ type Shape() =
             Editable |> DynObj.setValueOpt shape "editable"
             FillColor |> DynObj.setValueOpt shape "fillcolor"
             FillRule |> DynObj.setValueOptBy shape "fillrule" StyleParam.FillRule.convert
+            Label |> DynObj.setValueOpt shape "label"
             Layer |> DynObj.setValueOptBy shape "layer" StyleParam.Layer.convert
             Line |> DynObj.setValueOpt shape "line"
             Name |> DynObj.setValueOpt shape "name"

src/Plotly.NET/Layout/ObjectAbstractions/Common/ShapeLabel.fs

@@ -0,0 +1,79 @@
+namespace Plotly.NET.LayoutObjects
+
+open Plotly.NET
+open DynamicObj
+open System
+open System.Runtime.InteropServices
+
+
+///<summary>
+///The label of a shape.
+///</summary>
+type ShapeLabel() =
+    inherit DynamicObj()
+
+    /// <summary>
+    /// Returns a new ShapeLabel object with the given styling.
+    /// </summary>
+    /// <param name="Font">Sets the shape label text font.</param>
+    /// <param name="Padding">Sets padding (in px) between edge of label and edge of shape.</param>
+    /// <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="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
+        (
+            [<Optional; DefaultParameterValue(null)>] ?Font: Font,
+            [<Optional; DefaultParameterValue(null)>] ?Padding: int,
+            [<Optional; DefaultParameterValue(null)>] ?Text: string,
+            [<Optional; DefaultParameterValue(null)>] ?TextAngle: StyleParam.TextAngle,
+            [<Optional; DefaultParameterValue(null)>] ?TextPosition: StyleParam.TextPosition,
+            [<Optional; DefaultParameterValue(null)>] ?XAnchor: StyleParam.XAnchorPosition,
+            [<Optional; DefaultParameterValue(null)>] ?YAnchor: StyleParam.YAnchorPosition
+        ) =
+
+        ShapeLabel()
+        |> ShapeLabel.style (
+            ?Font           = Font,
+            ?Padding        = Padding,
+            ?Text           = Text,
+            ?TextAngle      = TextAngle,
+            ?TextPosition   = TextPosition,
+            ?XAnchor        = XAnchor,
+            ?YAnchor        = YAnchor
+        )
+
+    /// <summary>
+    /// Returns a function that applies the given styles to a ShapeLabel object
+    /// </summary>
+    /// <param name="Font">Sets the shape label text font.</param>
+    /// <param name="Padding">Sets padding (in px) between edge of label and edge of shape.</param>
+    /// <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="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
+        (
+            [<Optional; DefaultParameterValue(null)>] ?Font: Font,
+            [<Optional; DefaultParameterValue(null)>] ?Padding: int,
+            [<Optional; DefaultParameterValue(null)>] ?Text: string,
+            [<Optional; DefaultParameterValue(null)>] ?TextAngle: StyleParam.TextAngle,
+            [<Optional; DefaultParameterValue(null)>] ?TextPosition: StyleParam.TextPosition,
+            [<Optional; DefaultParameterValue(null)>] ?XAnchor: StyleParam.XAnchorPosition,
+            [<Optional; DefaultParameterValue(null)>] ?YAnchor: StyleParam.YAnchorPosition
+        ) =
+
+        (fun (shapeLabel: ShapeLabel) ->
+
+            Font |> DynObj.setValueOpt shapeLabel "font" 
+            Padding |> DynObj.setValueOpt shapeLabel "padding"
+            Text |> DynObj.setValueOpt shapeLabel "text"
+            TextAngle |> DynObj.setValueOptBy shapeLabel "textangle" StyleParam.TextAngle.convert
+            TextPosition |> DynObj.setValueOptBy shapeLabel "textposition" StyleParam.TextPosition.convert
+            XAnchor |> DynObj.setValueOptBy shapeLabel "xanchor" StyleParam.XAnchorPosition.convert
+            YAnchor |> DynObj.setValueOptBy shapeLabel "yanchor" StyleParam.YAnchorPosition.convert
+
+            shapeLabel
+        )

src/Plotly.NET/Plotly.NET.fsproj

@@ -33,11 +33,15 @@
     <FsDocsLicenseLink>https://github.com/plotly/Plotly.NET/blob/dev/LICENSE</FsDocsLicenseLink>
     <FsDocsReleaseNotesLink>https://github.com/plotly/Plotly.NET/blob/dev/RELEASE_NOTES.md</FsDocsReleaseNotesLink>
   </PropertyGroup>
+  <ItemGroup>
+    <EmbeddedResource Remove="Layout\ObjectAbstractions\2D\**" />
+    <EmbeddedResource Remove="Layout\ObjectAbstractions\Carpet\**" />
+  </ItemGroup>
   <ItemGroup>
     <None Include="RELEASE_NOTES.md" />
     <None Include="..\..\docs\img\logo.png" Pack="true" PackagePath="\" />
-    <EmbeddedResource Include="plotly-2.18.1.min.js" />
-    <EmbeddedResource Include="plotly-2.18.1.min.js.LICENSE.txt" />
+    <EmbeddedResource Include="plotly-2.19.1.min.js" />
+    <EmbeddedResource Include="plotly-2.19.1.min.js.LICENSE.txt" />
     <Compile Include="Globals.fs" />
     <Compile Include="InternalUtils.fs" />
     <Compile Include="CommonAbstractions\ColorKeyword.fs" />
@@ -62,6 +66,7 @@
     <Compile Include="Layout\ObjectAbstractions\Common\Domain.fs" />
     <Compile Include="Layout\ObjectAbstractions\Common\ActiveShape.fs" />
     <Compile Include="Layout\ObjectAbstractions\Common\NewShape.fs" />
+    <Compile Include="Layout\ObjectAbstractions\Common\ShapeLabel.fs" />
     <Compile Include="Layout\ObjectAbstractions\Common\Shape.fs" />
     <Compile Include="Layout\ObjectAbstractions\Common\ActiveSelection.fs" />
     <Compile Include="Layout\ObjectAbstractions\Common\NewSelection.fs" />
@@ -137,7 +142,6 @@
     <Compile Include="Traces\TraceDomain.fs" />
     <Compile Include="Traces\TraceSmith.fs" />
     <Compile Include="Traces\TraceID.fs" />
-    <Folder Include="Layout\ObjectAbstractions\2D\" />
     <Compile Include="Config\ObjectAbstractions\Edits.fs" />
     <Compile Include="Config\ObjectAbstractions\ToImageButtonOptions.fs" />
     <Compile Include="Config\Config.fs" />
@@ -165,7 +169,4 @@
     <PackageReference Include="DynamicObj" Version="2.0.0" />
     <PackageReference Include="Giraffe.ViewEngine.StrongName" Version="2.0.0-alpha1" />
   </ItemGroup>
-  <ItemGroup>
-    <Folder Include="Layout\ObjectAbstractions\Carpet\" />
-  </ItemGroup>
 </Project>

tests/Plotly.NET.CSharp.Tests/Plotly.NET.CSharp.Tests.csproj

@@ -5,6 +5,12 @@
     <IsPackable>false</IsPackable>
   </PropertyGroup>
 
+  <ItemGroup>
+    <Compile Remove="extensionmethods\**" />
+    <EmbeddedResource Remove="extensionmethods\**" />
+    <None Remove="extensionmethods\**" />
+  </ItemGroup>
+
   <ItemGroup>
     <PackageReference Include="Microsoft.NET.Test.Sdk" Version="16.9.4" />
     <PackageReference Include="xunit" Version="2.4.1" />
@@ -22,8 +28,4 @@
     <ProjectReference Include="..\..\src\Plotly.NET.CSharp\Plotly.NET.CSharp.csproj" />
   </ItemGroup>
 
-  <ItemGroup>
-    <Folder Include="extensionmethods\" />
-  </ItemGroup>
-
 </Project>

tests/Plotly.NET.Tests.FSharpConsole/Program.fs

@@ -11,48 +11,39 @@ open Newtonsoft.Json
 
 [<EntryPoint>]
 let main argv =
-    Config.init(
-        StaticPlot              = false,
-        TypesetMath             = true,
-        PlotlyServerUrl         = "myserver.me.meme",
-        Editable                = true,
-        Edits                   = Edits.init(AnnotationPosition = true, ShapePosition = true),
-        EditSelection           = true,
-        Autosizable             = true,
-        Responsive              = true,
-        FillFrame               = true,
-        FrameMargins            = 1.337,
-        ScrollZoom              = StyleParam.ScrollZoom.All,
-        DoubleClick             = StyleParam.DoubleClick.Reset,
-        DoubleClickDelay        = 1337,
-        ShowAxisDragHandles     = true,
-        ShowAxisRangeEntryBoxes = true,
-        ShowTips                = true,
-        ShowLink                = true,
-        LinkText                = "never gonna give you up",
-        SendData                = true,
-        ShowSources             = true,
-        DisplayModeBar          = true,
-        ShowSendToCloud         = true,
-        ShowEditInChartStudio   = true,
-        ModeBarButtonsToRemove  = [StyleParam.ModeBarButton.AutoScale2d],
-        ModeBarButtonsToAdd     = [StyleParam.ModeBarButton.DrawCircle],
-        ModeBarButtons          = [[StyleParam.ModeBarButton.DrawClosedPath; StyleParam.ModeBarButton.DrawOpenPath];[StyleParam.ModeBarButton.OrbitRotation]],
-        ToImageButtonOptions    = ToImageButtonOptions.init(Format = StyleParam.ImageFormat.SVG, Filename="soos.svg"),
-        Displaylogo             = true,
-        Watermark               = true,
-        plotGlPixelRatio        = 1.0,
-        SetBackground           = box "function(x) => {return x}",
-        TopojsonURL             = "myserver.me.meme",
-        MapboxAccessToken       = "4Tw20BlzLT",
-        Logging                 = 2,
-        NotifyOnLogging         = 2,
-        QueueLength             = 1337,
-        GlobalTransforms        = box "function(x) => {return x}",
-        Locale                  = "de-DE",
-        Locales                 = box """{"yes": "no"}"""
-    )
-    :> DynamicObj 
-    |> JsonConvert.SerializeObject
-    |> printfn "%A"
+    let x  = [1.; 2.; 3.; 4.; 5.; 6.; 7.; 8.; 9.; 10.; ]
+    let y' = [2.; 1.5; 5.; 1.5; 3.; 2.5; 2.5; 1.5; 3.5; 1.]
+    let s1 = 
+        Shape.init(
+            ShapeType=StyleParam.ShapeType.Rectangle,
+            X0=2.,X1=4.,Y0=3.,Y1=4.,
+            Opacity=0.3,
+            FillColor=Color.fromHex "#d3d3d3",
+            Label = ShapeLabel.init(Text="Rectangle")
+        )
+    let s2 = 
+        Shape.init(
+            ShapeType=StyleParam.ShapeType.Circle,
+            X0=5.,X1=7.,Y0=3.,Y1=4.,
+            Opacity=0.3,
+            FillColor=Color.fromHex "#d3d3d3",
+            Label = ShapeLabel.init(Text="Circle")
+        )
+    let s3 = 
+        Shape.init(
+            ShapeType=StyleParam.ShapeType.Line,
+                X0=1.,X1=2.,Y0=1.,Y1=2.,
+                Opacity=0.3,
+                FillColor=Color.fromHex "#d3d3d3",
+                Label = ShapeLabel.init(Text="Line")
+        )
+    let s4 = 
+        Shape.init(
+            ShapeType=StyleParam.ShapeType.SvgPath,
+            Path=" M 3,7 L2,8 L2,9 L3,10, L4,10 L5,9 L5,8 L4,7 Z",
+            Label = ShapeLabel.init(Text="SVGPath", TextAngle = StyleParam.TextAngle.Degrees 33)
+        )
+    Chart.Line(x = x,y = y',Name="line", UseDefaults = false)    
+    |> Chart.withShapes([s1;s2;s3;s4])
+    |> Chart.show
     0