How use this lib?
Nisgrak opened this issue · 8 comments
Hi!
I'm triying to create a page with multiple chars in same page, but I don't understand this lib, is server or client side?
How can I use with a single file in client, or make functional in server, whatever works is valid to me.
Thanks :)
Hi!
The simplest way depends on your goal:
- If you want to create a page that is fully public (accessible for anyone on the internet) you simply have to create a GitHub gist. Follow this guide: https://kantord.github.io/just-dashboard/getting-started
- You can self host this, for example if you want to add HTTP password. The easiest way is just to copy the "official" server's implementation, as it's pretty simple: https://github.com/kantord/bottoml.in-e
Alternatively, it's also possible to use it as a desktop application. You can take a look at this repo to see how it's done: https://github.com/kantord/ledger-cli-dashboard
Yes but it's possible compress the lib in one file with all dependencies? Like a normal lib to not need webpack. Thanks!
Note that you don't need webpack if you use the official server or the desktop version.
Now, it's definitely possible to compile just-dashboard into a single file with all the dependencies. The easiest way is to just use webpack to do that, but as you want to avoid using webpack, you have alternatives.
Perhaps the simplest solution is to use https://unpkg.com/, which is a service that you can use to load npm packages in an HTML file using a <script>
tag.
Actually, the documentation of just-dashboard does exactly that, as you can see in this source code:
<div class="loader">Loading...</div>
<script src="https://unpkg.com/just-dashboard@latest/dist/dashboard.js"></script>
<script>
function render_code(code) {
var json_code = dashboard.yaml_parser(code)
var render = dashboard.json_parser(json_code)
render(dashboard.d3.selection())
dashboard.d3.select("body").attr("class", "typeset")
}
</script>
As you can see, I didn't have to load any dependencies and I didn't need any build systems at all.
Nice! The unpkg solution is what I want, thanks!
Last thing, how can I insert the char in div I choose? I tried that but nothing happend.
var json_code = dashboard.yaml_parser(code)
var render = dashboard.json_parser(json_code)
render(dashboard.d3.select(".mydiv"))
dashboard.d3.select(".mydiv").attr("class", "mydiv typeset")
Anyway thanks for the help :)
Any help? I can't make working :_(
I haven't tested this use case yet, as for now this library is more designed to create entire pages than small embedded things in a <div>
. It's probably not impossible to do what you want. Perhaps you just selected the wrong <div>
in this line:
render(dashboard.d3.select(".mydiv"))
I'd look at the console in my browser to see if any errors come up.
Now, the easiest solution to embed a dashboard made like this would probably be simply to use an <iframe>
. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe
Just I need, thanks for the help a nice work :)