Integrating LiveCharts2 into Elmish app

[matthewcrews]

I am trying to integrate LiveCharts2 into an AvaloniaFuncUI app using the Elmish style of composition. I am inspired by the approach that was taken in this blog post.

I have a full app here if you wish to see all of the code.

I tried creating bindings following the docs here. The code I have for the binding is:

namespace AvaloniaFuncUIwithLiveCharts


open Avalonia.FuncUI.Builder
open Avalonia.FuncUI.DSL
open Avalonia.FuncUI.Types
open LiveChartsCore.SkiaSharpView
open LiveChartsCore.SkiaSharpView.Avalonia


[<AutoOpen>]
module CartesianChart =

    let create (attrs: IAttr<CartesianChart> list): IView<CartesianChart> =
        ViewBuilder.Create<CartesianChart>(attrs)

    type CartesianChart with
        static member stepLinePlot<'T when 'T :> CartesianChart> (value: StepLineSeries<_>) : IAttr<'T> =
            AttrBuilder<'T>.CreateProperty<StepLineSeries<_>>(CartesianChart.content, value, ValueNone)

    let plotFromData (values: _ list) =
        let series = StepLineSeries<_>()
        series.Values <- values
        series

Right now the compiler is complaining about this line:

AttrBuilder<'T>.CreateProperty<StepLineSeries<_>>(CartesianChart.content, value, ValueNone)

I cannot figure out what kind of overload I should be providing.

The view function is:

let view (state: State) (dispatch) =
    DockPanel.create [
        DockPanel.children [
            CartesianChart.create [
                CartesianChart.plotFromData [0.0; 1.0; 0.0]
            ]
        ]
    ]

But the compiler says it is not compatible:

I feel like I'm missing some basic understanding. Any help or guidance is appreciated.

[JaggerJo]

You need to "follow the API" when creating bindings. Take a look at existing bindings for the basic Avalonia controls. It's usually a 1:1 mapping.

For example:

[<AutoOpen>]
module CartesianChart =

    let create (attrs: IAttr<CartesianChart> list): IView<CartesianChart> =
        ViewBuilder.Create<CartesianChart>(attrs)

    type CartesianChart with

        static member series<'T when 'T :> CartesianChart> (value: seq<ISeries>) : IAttr<'T> =
            AttrBuilder<'T>.CreateProperty<seq<ISeries>>(
                property = CartesianChart.SeriesProperty,
                value = value,
                comparer = ValueNone
            )

If you need more help, I'm open to contract work. Just send me an e-mail and we'll figure something out.

[matthewcrews]

You should have an email from hi@fastfsharp.com 😊

[matthewcrews]

Is there something else you did to get the chart to work? I'm getting an error saying:

System.InvalidOperationException: No runtime platform services configured

[matthewcrews]

Never mind. I noticed that the versions were not aligned with the requirements, so I went and updated everything. I now have a pretty chart 😊

[JaggerJo]

You can also use the charting control without writing any bindings at all. I would not recommend that style in combination with elmish tho, it works well with the component model.

View.createGeneric<CartesianChart> [
    CartesianChart.init (fun control ->
        control.Series <- series
        control.Title <-
            LabelVisual<LabelGeometry, SkiaSharpDrawingContext>(
                Text = "My chart title",
                TextSize = 25,
                Padding = new LiveChartsCore.Drawing.Padding(15),
                Paint = new SolidColorPaint(SKColors.DarkSlateGray)
            )
    )
]