Fix parallel chart styling options (#477)

Author: kMutagene

docs/categorical-charts/parallel-categories.fsx

@@ -63,6 +63,7 @@ parcats |> GenericChart.toChartHTML
 ## More styled example
 
 This example shows the usage of some of the styling options using `Chart.ParallelCategories`.
+`LineShape = StyleParam.Shape.HSpline` draws horizontal spline paths between categories, while `TickFont` controls the category tick labels.
 For even more styling control, use the respective TraceStyle function `TraceDomainStyle.ParallelCategories`
 *)
 
@@ -76,6 +77,8 @@ let parcatsStyled =
         dimensions = dims,
         LineColor = Color.fromColorScaleValues [ 0; 1; 2; 2; 1; 1; 0; 0 ], // These values map to the last category axis, meaning [AAA => 0; AAB = 1; AAC => 2]
         LineColorScale = StyleParam.Colorscale.Viridis,
+        LineShape = StyleParam.Shape.HSpline,
+        TickFont = Font.init(Family = StyleParam.FontFamily.Arial, Size = 14.),
         BundleColors = false
     )
 

src/Plotly.NET/CommonAbstractions/StyleParams.fs

@@ -3056,7 +3056,7 @@ module StyleParam =
         member this.Convert() =
             this |> MarkerSymbol.toInteger |> string |> box
 
-    /// Determines the line shape. With "spline" the lines are drawn using spline interpolation. The other available values correspond to step-wise line shapes.
+    /// Determines the line shape. "spline" uses spline interpolation; "hspline" draws horizontal spline paths in parallel categories plots. "hv", "vh", "hvh", and "vhv" are step-wise shapes. Supported values depend on the trace type.
     [<RequireQualifiedAccess>]
     type Shape =
         | Linear
@@ -3065,6 +3065,7 @@ module StyleParam =
         | Vh
         | Hvh
         | Vhv
+        | HSpline
 
         static member toString =
             function
@@ -3074,6 +3075,7 @@ module StyleParam =
             | Vh -> "vh"
             | Hvh -> "hvh"
             | Vhv -> "vhv"
+            | HSpline -> "hspline"
 
         static member convert = Shape.toString >> box
         override this.ToString() = this |> Shape.toString

src/Plotly.NET/RELEASE_NOTES.md

@@ -12,6 +12,8 @@ As a consequence, the html dsl dependency switches back from `Giraffe.ViewEngine
 
 - Bump bundled plotly.js to **2.28.0**
 
+- [#477](https://github.com/plotly/Plotly.NET/issues/477): Fix tick-font serialization for parallel categories and parallel coordinates charts, and add `StyleParam.Shape.HSpline` for horizontal spline paths in parallel categories plots.
+
 - [#441](https://github.com/plotly/Plotly.NET/issues/441): **Encoded typed array support** — plotly.js 2.28 introduced a base64 representation for numeric arrays. Plotly.NET supports it for selected trace fields and chart constructors:
 
   - New `EncodedTypedArray` type (in `Plotly.NET`) carrying a base64 payload (`bdata`), a dtype tag (`dtype`), and an optional shape for multi-dimensional data. Supported dtypes: `Float64`, `Float32`, `Int32`, `UInt32`, `Int16`, `UInt16`, `Int8`, `UInt8`, `UInt8Clamped`.

src/Plotly.NET/Traces/TraceDomain.fs

@@ -674,7 +674,7 @@ type TraceDomainStyle() =
             |> DynObj.withOptionalProperty   "labelfont"        LabelFont          
             |> DynObj.withOptionalProperty   "labelside"        LabelSide          
             |> DynObj.withOptionalProperty   "rangefont"        RangeFont          
-            |> DynObj.withOptionalProperty   "tickfont "        TickFont           
+            |> DynObj.withOptionalProperty   "tickfont"         TickFont
             |> DynObj.withOptionalProperty   "uirevision"       UIRevision         
 
     /// <summary>
@@ -745,7 +745,7 @@ type TraceDomainStyle() =
             |> DynObj.withOptionalPropertyBy             "sortpaths"       SortPaths                           StyleParam.SortAlgorithm.convert
             |> DynObj.withOptionalPropertyBy             "hoveron"         Hoveron                             StyleParam.HoverOn.convert
             |> DynObj.withOptionalProperty               "labelfont"       LabelFont                           
-            |> DynObj.withOptionalProperty               "tickfont "       TickFont                            
+            |> DynObj.withOptionalProperty               "tickfont"        TickFont
             |> DynObj.withOptionalProperty               "uirevision"      UIRevision                          
 
     /// <summary>

tests/Common/FSharpTestBase/TestCharts/ChartDomainTestCharts.fs

@@ -187,6 +187,13 @@ module ParallelCoord =
             UseDefaults = false
         )
 
+    let ``Parallel coordinates with tick font`` =
+        Chart.ParallelCoord(
+            keyValues = [ "A", [ 1; 2 ]; "B", [ 3; 4 ] ],
+            TickFont = Font.init(Family = StyleParam.FontFamily.Arial, Size = 14., Color = Color.fromString "purple"),
+            UseDefaults = false
+        )
+
 module ParallelCategories = 
 
     let ``Simple parallel categories chart`` =
@@ -219,6 +226,14 @@ module ParallelCategories =
             UseDefaults = false
         )
 
+    let ``Parallel categories with horizontal splines and tick font`` =
+        Chart.ParallelCategories(
+            keyValues = [ "A", [ "a"; "b" ]; "B", [ "c"; "d" ] ],
+            LineShape = StyleParam.Shape.HSpline,
+            TickFont = Font.init(Family = StyleParam.FontFamily.Arial, Size = 14., Color = Color.fromString "purple"),
+            UseDefaults = false
+        )
+
 module Sankey = 
 
     let ``Styled sankey chart`` = 
@@ -478,4 +493,4 @@ module Icicle =
             SectionOutlineColor = Color.fromKeyword Black,
             Tiling = IcicleTiling.init(Flip = StyleParam.TilingFlip.XY),
             UseDefaults = false
-        )
+        )

tests/CoreTests/CoreTests/HTMLCodegen/ChartDomain.fs

@@ -125,6 +125,10 @@ module ParallelCoord =
                 testCase "Parallel coordinates styled layout" ( fun () ->
                     emptyLayout ParallelCoord.``Styled parallel coordinates chart``
                 );
+                testCase "Parallel coordinates tick font" ( fun () ->
+                    """var data = [{"type":"parcoords","dimensions":[{"label":"A","values":[1,2],"axis":{}},{"label":"B","values":[3,4],"axis":{}}],"line":{},"tickfont":{"family":"Arial","size":14.0,"color":"purple"}}];"""
+                    |> chartGeneratedContains ParallelCoord.``Parallel coordinates with tick font``
+                );
             ]
         ]
 
@@ -147,6 +151,10 @@ module ParallelCategories =
                 testCase "Parallel categories styled layout" ( fun () ->
                     emptyLayout ParallelCategories.``Styled parallel categories chart``
                 );
+                testCase "Parallel categories horizontal splines and tick font" ( fun () ->
+                    """var data = [{"type":"parcats","dimensions":[{"label":"A","values":["a","b"],"axis":{}},{"label":"B","values":["c","d"],"axis":{}}],"line":{"shape":"hspline"},"tickfont":{"family":"Arial","size":14.0,"color":"purple"}}];"""
+                    |> chartGeneratedContains ParallelCategories.``Parallel categories with horizontal splines and tick font``
+                );
             ]
         ]
 

tests/ExtensionLibsTests/CSharpTests/htmlcodegen/ChartDomain/ParallelStylingTests.cs

@@ -0,0 +1,79 @@
+using System;
+using Plotly.NET;
+using Plotly.NET.TraceObjects;
+using Xunit;
+using Chart = Plotly.NET.CSharp.Chart;
+
+namespace CSharp.Tests.HtmlCodegen.ChartDomain;
+
+public class ParallelStylingTests
+{
+    [Theory]
+    [InlineData("ParallelCoord")]
+    [InlineData("ParallelCoordEncoded")]
+    [InlineData("ParallelCategories")]
+    [InlineData("ParallelCategoriesEncoded")]
+    public void ConstructorsPreserveTickFontAndSupportedLineShape(string chartName)
+    {
+        var (chart, expectedData) = CreateCase(chartName);
+
+        TestUtils.ChartGeneratedSectionEquals(chart, ChartMarkupSection.Data, expectedData);
+    }
+
+    private static Dimension Dimension(string label, int[] values) =>
+        Plotly.NET.TraceObjects.Dimension.initParallel<string, string, int, int>(
+            ConstraintRange: default,
+            Label: label,
+            MultiSelect: default,
+            Name: default,
+            Range: default,
+            TemplateItemName: default,
+            TickFormat: default,
+            TickText: default,
+            Tickvals: default,
+            Values: values,
+            ValuesEncoded: default,
+            Visible: default
+        );
+
+    // Baselines generated with tools/chart-baseline-generation/generate-chart-markup.fsx.
+    private static (GenericChart Chart, string Data) CreateCase(string chartName)
+    {
+        var font = Font.init(
+            Family: StyleParam.FontFamily.Arial,
+            Size: 14.0,
+            Color: Color.fromString("purple")
+        );
+        var dimensions = new[] { Dimension("A", new[] { 1, 2 }), Dimension("B", new[] { 3, 4 }) };
+        var encoded = new[]
+        {
+            ("A", EncodedTypedArray.ofInt32Array(new[] { 1, 2 }, shape: default)),
+            ("B", EncodedTypedArray.ofInt32Array(new[] { 3, 4 }, shape: default))
+        };
+
+        return chartName switch
+        {
+            "ParallelCoord" => (
+                Chart.ParallelCoord(dimensions: dimensions, TickFont: font, UseDefaults: false),
+                """var data = [{"type":"parcoords","dimensions":[{"label":"A","values":[1,2],"axis":{}},{"label":"B","values":[3,4],"axis":{}}],"line":{},"tickfont":{"family":"Arial","size":14.0,"color":"purple"}}];"""
+            ),
+            "ParallelCoordEncoded" => (
+                Chart.ParallelCoord(keyValuesEncoded: encoded, TickFont: font, UseDefaults: false),
+                """var data = [{"type":"parcoords","dimensions":[{"label":"A","values":{"bdata":"AQAAAAIAAAA=","dtype":"i4"},"axis":{}},{"label":"B","values":{"bdata":"AwAAAAQAAAA=","dtype":"i4"},"axis":{}}],"line":{},"tickfont":{"family":"Arial","size":14.0,"color":"purple"}}];"""
+            ),
+            "ParallelCategories" => (
+                Chart.ParallelCategories(
+                    dimensions: dimensions, LineShape: StyleParam.Shape.HSpline,
+                    TickFont: font, UseDefaults: false),
+                """var data = [{"type":"parcats","dimensions":[{"label":"A","values":[1,2],"axis":{}},{"label":"B","values":[3,4],"axis":{}}],"line":{"shape":"hspline"},"tickfont":{"family":"Arial","size":14.0,"color":"purple"}}];"""
+            ),
+            "ParallelCategoriesEncoded" => (
+                Chart.ParallelCategories(
+                    keyValuesEncoded: encoded, LineShape: StyleParam.Shape.HSpline,
+                    TickFont: font, UseDefaults: false),
+                """var data = [{"type":"parcats","dimensions":[{"label":"A","values":{"bdata":"AQAAAAIAAAA=","dtype":"i4"},"axis":{}},{"label":"B","values":{"bdata":"AwAAAAQAAAA=","dtype":"i4"},"axis":{}}],"line":{"shape":"hspline"},"tickfont":{"family":"Arial","size":14.0,"color":"purple"}}];"""
+            ),
+            _ => throw new ArgumentOutOfRangeException(nameof(chartName), chartName, null)
+        };
+    }
+}