shmew / feliz.plotly Goto Github PK

Resolution of namespaces when deeply nested requires module aliasing, and in cases like this can't be resolved properly.

Need to figure out the best way to preserve fluent api while removing nesting as much as possible. May be able to do something similar to this on a larger scale.

Replying to Shmew/Feliz.MaterialUI#22 (comment)

1. I'll make sure to publish the generator project soon. In the meantime, the intended usage is to use Feliz.Generator as-is (as you would through a NuGet pakage), and then create a console app (like Feliz.Generator.MaterialUI) that uses it (and optionally extends it if you need that).

2. One thing I notice right off the bat is that you seem to have one interface type for each property. That shouldn't be there. You simply use IReactProperty everywhere, and all prop implementations use Interop.mkAttr (from Feliz). So Types.fs and Interop.fs can be thrown out. Check out the Feliz.MaterialUI files Props.fs and Mui.fs to see how the output should look.

3. You don't need async in Program.fs because you don't have any async code.

For very simple usage of Feliz.Generator, check out Feliz.Generator.CoreDom. Program.fs shows some base DOM components constructed manually. The output files show what the corresponding output should look like. Note that the example is special in the sense that it shows (for Zaid-Ajaj/Feliz#56) how to use it for native DOM props; For 3rd party libraries, please disregard the weird prop component that doesn't have any component overloads.

Let me know once you have had a look at the above (will give substantial changes), and I'll have another look.

The API in this lib differs slightly w.r.t animation from the raw JS approach documented here: https://plotly.com/javascript/animations/#animating-sequences-of-frames, a couple of tests/examples would be really nice

It would be really nice to have a couple of examples in code of how to do animations in plots and particularly with map geoscatter (I'm animating markers).

Description

Adding a reference to Feliz.Plotly causes my project to fail to compile.

Steps to reproduce

1. Make a new project by cloning the elmish-getting-started template.
2. Update Feliz dependencies to latest version.
3. Use femto to add reference to Feliz.Plotly.
4. Add ifly-loader dependency to webpack config.
5. npm start.
6. See error:

ERROR in ./src/Saves.fsproj
Module build failed (from ./node_modules/fable-loader/index.js):
Error: File does not exist: C:/code/saves/.fable/Feliz.Plotly.1.0.1/Props/*.fs
    at C:\code\saves\node_modules\fable-loader\index.js:98:22
    at processTicksAndRejections (internal/process/task_queues.js:97:5)

Pre-packaged repro is here. Run npm i and then npm start.

Expected behavior

No error, should still show the elmish-getting-started app (since I haven't yet added any code that actually uses Feliz.Plotly).

Additional context

dir "C:\code\saves\.fable\Feliz.Plotly.1.0.1\Props\*.fs"

*snip*

05/20/2020  10:39 AM             1,293 Uniformtext.fs
05/20/2020  10:39 AM               492 Unselected.fs
05/20/2020  10:39 AM               644 Up.fs
05/20/2020  10:39 AM             5,586 Updatemenu.fs
05/20/2020  10:39 AM               370 Updatemenus.fs
05/20/2020  10:39 AM            67,686 Violin.fs
05/20/2020  10:39 AM            70,837 Volume.fs
05/20/2020  10:39 AM            67,737 Waterfall.fs
05/20/2020  10:39 AM            12,325 X.fs
05/20/2020  10:39 AM            82,934 Xaxis.fs
05/20/2020  10:39 AM            21,139 Xbins.fs
05/20/2020  10:39 AM            12,325 Y.fs
05/20/2020  10:39 AM            82,882 Yaxis.fs
05/20/2020  10:39 AM            21,139 Ybins.fs
05/20/2020  10:39 AM            12,325 Z.fs
05/20/2020  10:39 AM            68,016 Zaxis.fs

I don't know why fable-loader is saying nothing is there.

Known workaround

Use Feliz.Plotly 0.22.0 instead of 1.0.x.

Description

plot.traces is not found anymore

Version: 1.6

I just kinda threw the typescript bindings I had converted into Bindings.fs since they have types for all of the events created. I need to go clean it up and remove anything not needed.

Advice on how to make event callbacks more usable would be appreciated, although I'm not sure if it can be improved much. An example of this is here on these properties:

 plot.onSelected <| fun o -> o.points |> SetColors |> dispatch`
plot.onClick <| fun o -> o.points |> SetColors |> dispatch

Calling:

| SetColors points -> 
            let colorPre = 
                points
                |> Array.ofSeq
                |> Array.map (fun pObj -> pObj.pointNumber)

            let colors =
                state.Colors
                |> Array.mapi (fun i origColor ->
                    if Array.contains (i |> float) colorPre then
                        match state.ColorAction with
                        | ColorAction.Erase -> 0.
                        | ColorAction.Red -> 1.
                        | ColorAction.Blue -> 2.
                    else origColor)
            
            { state with Colors = colors }, Cmd.none

The table trace expects a string and/or number array as a data array. Need to figure out how best to implement this without it being a hassle.

Example would be a table with rows like this:

var values = [
      ['Salaries', 'Office', 'Merchandise', 'Legal', '<b>TOTAL</b>'],
      [1200000, 20000, 80000, 2000, 12120000],
      [1300000, 20000, 70000, 2000, 130902000],
      [1300000, 20000, 120000, 2000, 131222000],
      [1400000, 20000, 90000, 2000, 14102000]]

Note that the top row is not a header.

For Heatmaps with Categorical Axis Labels (https://plotly.com/javascript/heatmaps/) we need a two dimensional list for the Z axis. Option values make life easier with missing samples. For one dimensional lists there are option variants, but sadly not for two dimensions.

Description

Trying to use Feliz.Plotly, but getting error message when building

Steps to reproduce

1. Create a SAFE template app
2. Add Feliz.Plotly to src/Client
3. Add required plotly.js and react-plotly.js libraries using yarn add
4. Add ife-loader: yarn add --dev ife-loader
5. Add ife-loader in webpack.config.js (not exactly sure where in the rules list it should be added)
6. Run dotnet fake build --target run

Expected behavior

Build to succeed

Additional context

Error in console:

[./node_modules/webpack/hot/dev-server.js] (webpack)/hot/dev-server.js 1.59 KiB {vendors~app~style} [built]
[./src/Client/Client.fsproj] 345 bytes {app} [built] [failed] [1 error]
[./src/Client/style.scss] 1.36 KiB {style} [built]
    + 96 hidden modules

ERROR in ./src/Client/Client.fsproj
Module build failed (from ./node_modules/fable-loader/index.js):
Error: File does not exist: /home/aru/src/FSmartDash2/.fable/Feliz.Plotly.1.1.0/Props/*.fs
    at Loader.command.then.data (/home/aru/src/FSmartDash2/node_modules/fable-loader/index.js:98:22)
    at process._tickCallback (internal/process/next_tick.js:68:7)
 @ multi ./src/Client/Client.fsproj app[0]

Files seem to be there:

Hi,

I'm new to Fable, and even more so to Feliz and React, so my question is probably stupid, but I'm very interested in the Fable binding for plotly.js you created, not so much in having to use React in my currently very simple project.

Is there any way to use Feliz.Plotly without React?

(As the next best thing, I would not mind too much if I have to use it to render a chart, but then can ignore it after that)

I tried something like the following, but I have to admit I have no idea what I'm doing, and it does not work :)

open Feliz
open Feliz.Plotly

let chart = 
    Plotly.plot [
        plot.traces [
            traces.scatter [
                scatter.x [ 1; 2; 3; 4 ]
                scatter.y [ 10; 15; 13; 17 ]
                scatter.mode.markers
            ]
            traces.scatter [
                scatter.x [ 2; 3; 4; 5 ]
                scatter.y [ 16; 5; 11; 9 ]
                scatter.mode.lines
            ]
            traces.scatter [
                scatter.x [ 1; 2; 3; 4 ]
                scatter.y [ 12; 9; 15; 12 ]
                scatter.mode [
                    scatter.mode.lines
                    scatter.mode.markers
                ]
            ]
        ]
    ]

ReactDOM.render(chart, document.getElementById "root")

(This fails at runtime with "Uncaught Error: Target container is not a DOM element.")

Is your feature request related to a problem?

Hello, would it be possible to add support of DateTimeOffset as well?

Describe the solution you'd like

Out of the box support would be nice.

Describe alternatives you've considered

I probably can convert my DateTimeOffset to a DateTime, though I'm not really sure how to proceed there.

Additional context

/

For my project I'm using Feliz and Plotly to generate nice plots for display in the GUI.

Now we want to save the plots to a location on the disk. We can use the 'save to png' button, but that is just 1 plot. We want to generate and save the plots to disk on one click, or even without user interaction. How can we achieve this?

I noticed a 'callback event' onBeforeExport in the code. Is this the event that is used to handle the 'save to png' button?

How did you generate code fro Feliz? I didn't find any tool.
Can you help me?

It seems that doing actually passing in an array or list or what have you doesn't work, when explicitly typing in the values does.

An example is this

Resolves as any seq or standalone primitive rather than what is defined in the spec:

toImageButtonOptions: {
    format: 'svg', // one of png, svg, jpeg, webp
    filename: 'custom_image',
    height: 500,
    width: 700,
    scale: 1 // Multiply title/legend/axis/canvas sizes by this factor
  }

Description

The "box" function exposed by Feliz.Plotly clobbers the built-in F# box function in F#. One needs it in order to box dependencies when using Feliz when creating stateful components. Opening this library makes the code much easier to read..Perhaps there is an easy resolution?

Steps to reproduce

1. Open Feliz.Plotly
2. Try something like React.useEffect(loadData >> Async.StartImmediate, [| (box state.startDate) |])

Expected behavior

Opening a library should probably overwrite any core language functions.

I just came along this beautiful project and tried to compose a chart with a datetime x-axis where I would like to omit saturdays and sundays.
However after a few hours of trial and error I am still clueless.
Found an example of how this works in js here: https://codepen.io/MojtabaSamimi/pen/oNjvOBa?editors=0010

Maybe something went wrong with the package but looking at the published nuget, it says it doesn't have any dependency but it does need Feliz/Fable.Core etc. Maybe because that is hard-coded in paket.template? Can you try removing that file and instead provide package information from the .fsproj file?

Is your feature request related to a problem?

Not actually. I just didn't saw any example related to this in the docs.

Describe the solution you'd like

I would like to plot a graph like this one: https://stackoverflow.com/questions/42423167/custom-vertical-line-using-plotly-js.

Describe alternatives you've considered

None yet.

Additional context

Create this type of graph with vertical line.

I see that a lot of properties have inconsistent naming convention, sometimes camelCased, some times two words merged into one and other times snake_cased properties. It is an idea to make them all camelCased from the F# API point of view?

For example

// FROM
layout.xaxis.showgrid false
layout.xaxis.showline true
layout.xaxis.tickfont [ ]
layout.paper_bgcolor (colors.rgb(254, 247, 234))
layout.plot_bgcolor (colors.rgb(254, 247, 234))
// TO
layout.xaxis.showGrid false
layout.xaxis.showLine true
layout.xaxis.tickFont [ ]
layout.paperBackgroundColor (colors.rgb(254, 247, 234))
layout.plotBackgroundColor (colors.rgb(254, 247, 234))