fable-compiler / fable-recharts Goto Github PK

Hello!
I try currently to use this module, but it throws strange errors.
This is my example: https://github.com/funkr/Try

The errors are easy to reproduce.

1. Create a new project with this template SAFE-StackWebAppv2.1.0 (Rider Default Template)
2. dotnet add package Fable.Recharts
3. dotnet restore
4. Add open Fable.Recharts and barChart [] [] to index.fs
5. dotnet fake build --target run

Specifically the last errors looks concerning.

ERROR in ./src/Client/Index.fs
Module not found: Error: Can't resolve 'recharts' in 'C:\Projects\fsharp\Try\Berta\src\Client'
@ ./src/Client/Index.fs 46:0-36 139:187-195
@ ./src/Client/App.fs
@ ./src/Client/Client.fsproj
Child html-webpack-plugin for "index.html":
1 asset
Entrypoint undefined = index.html
[./node_modules/html-webpack-plugin/lib/loader.js!./src/Client/index.html] 662 bytes {0} [built]
[./node_modules/lodash/lodash.js] 530 KiB {0} [built]
[./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 472 bytes {0} [built]
[./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 497 bytes {0} [built]
i ｢wdm｣: Failed to compile.
Error from chokidar (C:): Error: EBUSY: resource busy or locked, lstat 'C:\hiberfil.sys'
Error from chokidar (C:): Error: EBUSY: resource busy or locked, lstat 'C:\pagefile.sys'
Error from chokidar (C:): Error: EBUSY: resource busy or locked, lstat 'C:\swapfile.sys'

When using `Cartesian.Ticks [|...|] on an axis doesn't work and produces the following error:

Failed prop type: Invalid prop ticks of type object supplied to YAxis, expected array

I have the following type

type ReadingValue = {
    SensorName:string
    ReadingName:string
    ReadingDate:DateTime
    ReadingValue:float
}

and the following test function to generate a chart

let lineChartSample (dataOpt:ReadingValue [] option) =
    match dataOpt with
    |Some data ->
        let filteredData = data |> Array.filter (fun r -> r.ReadingName = "Humid")
        lineChart
            [ margin 5. 20. 5. 0.
              Chart.Width 600.
              Chart.Height 300.
              Chart.Data filteredData
              Chart.OnClick onMouseEvent ]
            [ line
                [ Cartesian.Type Monotone
                  Cartesian.DataKey "ReadingValue"
                  P.Stroke "#8884d8"
                  Cartesian.Dot false
                  P.StrokeWidth 2. ]
                []
              xaxis [ Cartesian.DataKey "ReadingDate"] []
              yaxis [] []
        ]
    |_ -> Notification.notification [] [str "No data available"]

In general, I don't know the distinct values of ReadingName at design time.
But I want to allow the user to select different reading names to add to a single chart. How can I do this given F# is a statically typed language? I would need to dynamically pivot the data so that values associated with each reading name appear in different columns. This wouldn't be too difficult in a dynamic language but F# wants me to define my types in advance.

I see from the Recharts docs that dataKey can take a function. I've been able to find an example of this so I don't know what it does, but could it potentially be useful here?

When following the sample within the SAFE template, the line chart did not render and produced this error message in the browser console:

warning: React does not recognize the dataKey prop on a DOM element

There was a reference to an issue here. My code base had the open statement in the Index.fs file as below:

open System
open Elmish
open Fable.Core
open Fable.Remoting.Client
open Fable.Recharts
open Fable.Recharts.Props
open Fable.React
open Fable.React.Props

The workaround was to re-organize the open statements like so:

open System
open Elmish
open Fable.Core
open Fable.Remoting.Client
open Fable.React
open Fable.React.Props
open Fable.Recharts
open Fable.Recharts.Prop

This order rendered the line correctly

I need to get a scatter chart with no dots. This isn't a vanilla Recharts feature, but there is a hack that can be used to accomplish it.

From #recharts/recharts#1177

<Scatter name={model.name} data={model.data} line shape={<RenderNoShape />}   />

//and elsewhere
const RenderNoShape = (props)=>{ 
 return null; 
}

The signature index on these props is not correct.

I think it should be closer to
(data, index, event). Any chance this could be fixed?

I'm moving the discussion here as the PR for sample2 it's already merged.

ActiveIndex was an Array before. The problem is that ActiveShape wasn't being fired in the initial load. Also while working with array it only works with one value in it, passing two or more prevents the ActiveShape to be fired.

Changing the type of ActiveIndex from Array to int gets the whole thing working.

The problem is that recharts accepts also an Array of number so several shapes can be active at the same time and ActiveShape will be fired for each index in the array

I'm not sure on how to debug this, so if you have some tips so I can help it would be great.