Comments (16)
vasily-kirichenko
commented on July 19, 2024
2
Yes! It finally works :) Thank you a lot for the help.
from fable-react.
alfonsogarciacaro
commented on July 19, 2024
1
Ah, damn. I was trying to reproduce this and didn't understand until I checked vizceral-react README. The import should be made like this:
import Vizceral from 'vizceral-react';This means it's importing the default member (which is different from importing the member Vizceral which would be import { Vizceral } from 'vizceral-react') so in Fable you need to do:
let vizceralEl : obj = importDefault "vizceral-react"
// Or...
let inline vizceral (props: IProp list) (children: React.ReactElement list) : React.ReactElement =
ofImport "default" "vizceral-react" (keyValueList CaseRules.LowerFirst props) childrenWith this I'm not getting the error anymore and the React element seems to be mounted. I couldn't see anything on screen though.
BTW, the vizceral-react packages uses PropTypes so it's not compatible with React 16 (unless they change to the separate prop-types package), to prevent that you need to delete the lines with reference to PropTypes (L256-323 in dist/vizceral.js).
from fable-react.
vasily-kirichenko
commented on July 19, 2024
1
@alfonsogarciacaro Thanks you :) Sorry about such questions, I'm a total newbie in JS and React.
Your suggestions work - there are no errors anymore, however the visualization has not appeared yet :) I run the official example (it does work) and my app in parallel and try to find any differences...
from fable-react.
alfonsogarciacaro
commented on July 19, 2024
1
No worries, default member importing can be confusing in JS. The problem here is vizceral.js exporting is very dynamic to support different module systems, so Webpack doesn't realize the Vizceral member was missing.
If you need more help to identify the problem with the visualization please tell me. I used the React dev tools and the component seemed to be mounted.
from fable-react.
MangelMaxime
commented on July 19, 2024
1
@vasily-kirichenko I think in my Fable application, I am storing timestamp using a float type.
from fable-react.
vasily-kirichenko
commented on July 19, 2024
1
Yes, I will.
from fable-react.
alfonsogarciacaro
commented on July 19, 2024
The error message seems to indicate that undefined is being passed to React.createElement so apparently the import is not working. Please check the names are right (Vizceral and vizceral-react) and that you have installed the vizceral-react package with npm/yarn. If you're using Webpack, do you get any error/warning saying the Vizceral member is not exported from vizceral-react or similar?
from fable-react.
vasily-kirichenko
commented on July 19, 2024
No warnings:
dotnet fable yarn-start
Fable (1.3.7) daemon started on port 61225
CWD: E:\github\Elmish1
cmd /C yarn run start
yarn run v1.0.2
$ webpack-dev-server
Bundling for development...
Project is running at http://localhost:8080/
webpack output is served from /
Content not from webpack is served from E:\github\Elmish1\public
Parsing ./Elmish1.fsproj...
fable: Compiled src\Elmish1.fsproj
fable: Compiled src\App.fs
fable: Compiled src\Home\View.fs
fable: Compiled src\Info\View.fs
fable: Compiled C:\Users\vaski\.nuget\packages\fable.react\2.0.0-beta-002\fable\Fable.Helpers.React.fs
fable: Compiled C:\Users\vaski\.nuget\packages\fable.elmish.browser\1.0.0\fable\navigation.fs
fable: Compiled C:\Users\vaski\.nuget\packages\fable.elmish.debugger\1.0.1\fable\debugger.fs
fable: Compiled C:\Users\vaski\.nuget\packages\fable.elmish\1.0.1\fable\program.fs
fable: Compiled C:\Users\vaski\.nuget\packages\fable.elmish.hmr\1.0.0\fable\hmr.fs
fable: Compiled src\Types.fs
fable: Compiled C:\Users\vaski\.nuget\packages\fable.elmish\1.0.1\fable\cmd.fs
fable: Compiled src\Counter\View.fs
fable: Compiled src\Global.fs
fable: Compiled C:\Users\vaski\.nuget\packages\fable.elmish.react\1.0.1-beta-1\fable\react.fs
fable: Compiled src\Navbar\View.fs
fable: Compiled src\State.fs
fable: Compiled C:\Users\vaski\.nuget\packages\fable.elmish.browser\1.0.0\fable\parser.fs
fable: Compiled src\Home\Types.fs
fable: Compiled C:\Users\vaski\.nuget\packages\fable.elmish.react\1.0.1-beta-1\fable\common.fs
fable: Compiled src\Counter\State.fs
fable: Compiled C:\Users\vaski\.nuget\packages\fable.elmish.debugger\1.0.1\fable\Fable.Import.RemoteDev.fs
fable: Compiled src\Home\State.fs
fable: Compiled src\Counter\Types.fs
fable: Compiled C:\Users\vaski\.nuget\packages\fable.recharts\0.1.0-beta-002\fable\Fable.Recharts.fs
fable: Compiled C:\Users\vaski\.nuget\packages\fulma\1.0.0-beta-005\fable\Elements\Button.fs
fable: Compiled C:\Users\vaski\.nuget\packages\fulma\1.0.0-beta-005\fable\Common.fs
fable: Compiled C:\Users\vaski\.nuget\packages\fable.elmish.browser\1.0.0\fable\prelude.fs
fable: Compiled C:\Users\vaski\.nuget\packages\fulma\1.0.0-beta-005\fable\BulmaClasses.fs
Hash: cdfbb53d3821ee40033e
Version: webpack 3.10.0
Time: 16095ms
Asset Size Chunks Chunk Names
bundle.js 7.26 MB 0 [emitted] [big] main
bundle.js.map 8.26 MB 0 [emitted] main
[./node_modules/loglevel/lib/loglevel.js] ./node_modules/loglevel/lib/loglevel.js 7.86 kB {0} [built]
[./node_modules/strip-ansi/index.js] ./node_modules/strip-ansi/index.js 161 bytes {0} [built]
[./node_modules/url/url.js] ./node_modules/url/url.js 23.3 kB {0} [built]
[./node_modules/webpack-dev-server/client/index.js?http://localhost:8080] (webpack)-dev-server/client?http://localhost:8080 7.95 kB {0} [built]
[./node_modules/webpack-dev-server/client/overlay.js] (webpack)-dev-server/client/overlay.js 3.73 kB {0} [built]
[./node_modules/webpack-dev-server/client/socket.js] (webpack)-dev-server/client/socket.js 1.05 kB {0} [built]
[./node_modules/webpack/hot ^\.\/log$] (webpack)/hot nonrecursive ^\.\/log$ 170 bytes {0} [built]
[./node_modules/webpack/hot/dev-server.js] (webpack)/hot/dev-server.js 1.61 kB {0} [built]
[./node_modules/webpack/hot/emitter.js] (webpack)/hot/emitter.js 77 bytes {0} [built]
[./node_modules/webpack/hot/log-apply-result.js] (webpack)/hot/log-apply-result.js 1.31 kB {0} [built]
[./node_modules/webpack/hot/log.js] (webpack)/hot/log.js 1.04 kB {0} [built]
[./src/App.fs] ./src/App.fs 5.5 kB {0} [built]
[./src/Counter/View.fs] ./src/Counter/View.fs 3.66 kB {0} [built]
[0] multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/Elmish1.fsproj 52 bytes {0} [built]
[./src/Elmish1.fsproj] ./src/Elmish1.fsproj 25 bytes {0} [built]
+ 875 hidden modules
webpack: Compiled successfully.
...and no mention of Vizceral.
If I change the import to
let inline vizceral (props: IProp list) (children: React.ReactElement list) : React.ReactElement =
ofImport "Vizceral" "vizceral-react" (keyValueList CaseRules.LowerFirst props) childrenthen it's in the logs:
webpack: Compiling...
Parsing ./App.fs...
Parsing ./Counter/View.fs...
fable: Compiled src\Counter\View.fs
Hash: c49712fb7f580ddbe872
Version: webpack 3.10.0
Time: 4675ms
Asset Size Chunks Chunk Names
bundle.js 7.26 MB 0 [emitted] [big] main
0.4904a58fdd57b7a66562.hot-update.js 3.76 MB 0 [emitted] [big] main
4904a58fdd57b7a66562.hot-update.json 43 bytes [emitted]
bundle.js.map 8.26 MB 0 [emitted] main
0.4904a58fdd57b7a66562.hot-update.js.map 4.64 MB 0 [emitted] main
[./node_modules/vizceral-react/dist/vizceral.js] ./node_modules/vizceral-react/dist/vizceral.js 571 kB {0} [built]
[./node_modules/vizceral/dist/vizceral.js] ./node_modules/vizceral/dist/vizceral.js 3.17 MB {0} [built]
[./node_modules/webpack/hot ^\.\/log$] (webpack)/hot nonrecursive ^\.\/log$ 170 bytes {0} [built]
[./src/Counter/View.fs] ./src/Counter/View.fs 3.63 kB {0} [built]
+ 886 hidden modules
webpack: Compiled successfully.
but with the same result.
from fable-react.
vasily-kirichenko
commented on July 19, 2024
This is the head of vizceral.js file:
(function webpackUniversalModuleDefinition(root, factory) {
if(typeof exports === 'object' && typeof module === 'object')
module.exports = factory(require("react"), require("vizceral"));
else if(typeof define === 'function' && define.amd)
define(["react", "vizceral"], factory);
else if(typeof exports === 'object')
exports["Vizceral"] = factory(require("react"), require("vizceral"));
else
root["Vizceral"] = factory(root["React"], root["vizceral"]);
})from fable-react.
vasily-kirichenko
commented on July 19, 2024
The data in the Traffic field seems to be identical to the official example apart of what I thought should be of type int64 (official):
(mine):
updated field is documented:
// Unix timestamp. Only checked at this level of nodes. Last time the data was updated (Needed because the client could be passed stale data when loaded)
updated: 1462471847,What is the proper F# type for this "Unix timestamp" thing?
from fable-react.
vasily-kirichenko
commented on July 19, 2024
Removed update entirely, no changes.
from fable-react.
vasily-kirichenko
commented on July 19, 2024
My wip is here https://github.com/vasily-kirichenko/Elmish1/blob/master/src/Counter/View.fs if you like to look at it.
from fable-react.
alfonsogarciacaro
commented on July 19, 2024
Fable uses a custom type for Long in order to have the full 64 bits range, if you need to compile to JS number I suggest using int or float.
from fable-react.
vasily-kirichenko
commented on July 19, 2024
Thanks, guys. float works. But still no visualization :)
from fable-react.
alfonsogarciacaro
commented on July 19, 2024
@vasily-kirichenko Where's the official example you're comparing against? There's some code in vizceral-react README but it's missing all the data. I also found this, but it's too complex: https://github.com/Netflix/vizceral-example
I managed to visualize something using your code, by manually setting height: 500px to the element with the vizceral class. You may need to add some styling to the app for that.
from fable-react.
alfonsogarciacaro
commented on July 19, 2024
Glad to be of help :) Please do share the bindings and a sample with the community!
from fable-react.
Related Issues (20)
- React Server Components integration HOT 2
- Can't figure out how to wrap my view with a Higher Order Component HOT 4
- JsInterop helper for wrapping a higher order component HOT 2
- Can't reference React in Fable HOT 2
- Fable.ReactServer.cssProp very slow HOT 4
- Add Custom DU to DOMAttr HOT 1
- FunctionComponent.Lazy and SSR HOT 1
- Update samples to Fable 3
- ReactDOM.hydrate is no longer supported in React 18 HOT 17
- Can't update shared state passed with useContext? HOT 3
- Q: Use ReactElement import member for Storybook HOT 3
- Missing 'open' from Fable.React.Props? HOT 2
- Last Fable.React upgrade breaks my code HOT 7
- Publish source files from Fable.React.Types and Fable.ReactDom.Types to nuget HOT 5
- Fable.React version 8 depends on React.Dom gte 18 lt 19 according to femto
- Add Pointer Events HOT 3
- Why is useCallback not implemented? HOT 3
- How to obtain a component ref in a function component? HOT 5
- FunctionComponent.Of functions cache breaks reusable code HOT 1
- voidEl breaks with: $ELEMENT is a void element tag and must neither have `children` nor use `dangerouslySetInnerHTML`. HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from fable-react.