F# 动态图表-寓言

我有一个使用fable elmish的模型更新视图体系结构的项目。我必须每分钟下载文件并阅读这些文件。如何下载更新函数，如何读取和解析Json

我也需要用Fable创建动态图表。有人知道怎么做

我这里有我的部分代码：

let update (msg : Msg) (model : Model) =
  match msg with
  | GetData -> 
    model, 
    Cmd.ofPromise 
      (fun () -> 
        promise {
          let wc = new WebClient()
          wc.DownloadData("https://www.quandl.com/api/v1/datasets/LBMA/SILVER.json", "SILVER.json")
          wc.DownloadData("https://www.quandl.com/api/v1/datasets/LBMA/GOLD.json", "GOLD.json")
          // Read 2 files
          // Return 2 Json.Object
        })
      ()
      (fun silver gold -> GotData silver gold)
      (fun e -> GotError e.Message)
  | GotData silver gold -> 
    (Model.SilverData silver, Model.GoldData gold), // I think this doesn't work
    Cmd.ofPromise 
      (fun () -> Promise.sleep 60000)
      ()
      (fun () -> GetData)
      (fun e -> GetData)

---

如果您有一个周期性事件，它会在您的Elmish应用程序中引起一些操作，我会使用一个。下面的代码段显示了一个函数，该函数设置一个间隔，该间隔导致每10分钟发送一次命令

let timer initial =
    let sub dispatch =
        window.setInterval(fun _ -> dispatch LoadDataSet; console.log("Timer triggered")
            , 1000 * 60 * 10) |> ignore

    Cmd.ofSub sub

您可以使用

程序。withSubscription

函数将订阅添加到主调度循环中

我会使用这个包来获取数据集，它提供了

fetch

和

promise

支持。下面的代码将从指定的端点获取文档，将它们解析为

数据集

类型的值，并将它们作为承诺成功路径上的

SilverAndGold

模型类型的值返回

type DataSet =
    { column_names : string list
      data : (string * float * float * float) list }

type SilverAndGold =
    { Silver : DataSet
      Gold : DataSet }

...

let fetchDataSets () = promise {
    let! silverData = Fetch.fetchAs<DataSet> "https://www.quandl.com/api/v1/datasets/LBMA/SILVER.json" []
    let! goldData = Fetch.fetchAs<DataSet> "https://www.quandl.com/api/v1/datasets/LBMA/GOLD.json" []

    return { Silver = silverData; Gold = goldData }
}

我们可以使用库中的函数来绘制数据集。下面的代码显示了我们如何转换和修剪数据集（在浏览器中渲染所有数据点将非常费力），并在

视图

函数中将它们显示为折线图

type ChartDataPoint =
    { Date : string
      Usd : float
      Gbp : float
      Euro : float }

let toChartData (dataSet : DataSet) =
    dataSet.data
    |> List.map (fun (dt, usd, gbp, eur) ->
        { Date = dt; Usd = usd; Gbp = gbp; Euro = eur } )
    |> Array.ofList
    |> Array.take 1000
    |> Array.rev

let priceChart (chartData : ChartDataPoint[]) =
    lineChart
        [ Chart.Data chartData
          Chart.Width 600.
          Chart.Height 500. ] [
        xaxis [ Cartesian.DataKey "Date" ] []
        yaxis [] []
        tooltip [] []
        legend [] []
        line [ Cartesian.Type "monotone"; Cartesian.DataKey "Gbp" ] []
        line [ Cartesian.Type "monotone"; Cartesian.DataKey "Euro" ] []
        line [ Cartesian.Type "monotone"; Cartesian.DataKey "Usd" ] []
    ]

let view (model : SilverAndGold option ) dispatch =
  div [ ] [
        match model with
        | Some sets ->
            yield h2 [] [ str "Silver" ]
            yield priceChart (toChartData sets.Silver)
            yield h2 [] [ str "Gold" ]
            yield priceChart (toChartData sets.Gold)
        | None ->
            yield h2 [] [ str "No data :("]
    ]

我制作了一个非常小的Elmish应用程序，其中包括所有这些主题。您可以在这里找到它，并根据您的需要进行调整

type ChartDataPoint =
    { Date : string
      Usd : float
      Gbp : float
      Euro : float }

let toChartData (dataSet : DataSet) =
    dataSet.data
    |> List.map (fun (dt, usd, gbp, eur) ->
        { Date = dt; Usd = usd; Gbp = gbp; Euro = eur } )
    |> Array.ofList
    |> Array.take 1000
    |> Array.rev

let priceChart (chartData : ChartDataPoint[]) =
    lineChart
        [ Chart.Data chartData
          Chart.Width 600.
          Chart.Height 500. ] [
        xaxis [ Cartesian.DataKey "Date" ] []
        yaxis [] []
        tooltip [] []
        legend [] []
        line [ Cartesian.Type "monotone"; Cartesian.DataKey "Gbp" ] []
        line [ Cartesian.Type "monotone"; Cartesian.DataKey "Euro" ] []
        line [ Cartesian.Type "monotone"; Cartesian.DataKey "Usd" ] []
    ]

let view (model : SilverAndGold option ) dispatch =
  div [ ] [
        match model with
        | Some sets ->
            yield h2 [] [ str "Silver" ]
            yield priceChart (toChartData sets.Silver)
            yield h2 [] [ str "Gold" ]
            yield priceChart (toChartData sets.Gold)
        | None ->
            yield h2 [] [ str "No data :("]
    ]