How use this lib?

Question

How use this lib?

Nisgrak opened this issue 6 years ago · 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 :)

Answer 1 · 2018-09-03T15:45:25.000Z

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

Answer 2 · 2018-09-03T15:46:20.000Z

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

Answer 3 · 2018-09-04T08:00:13.000Z

Yes but it's possible compress the lib in one file with all dependencies? Like a normal lib to not need webpack. Thanks!

Answer 4 · 2018-09-04T09:08:03.000Z

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.

Answer 5 · 2018-09-04T09:36:52.000Z

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 :)

Answer 6 · 2018-09-06T11:32:41.000Z

Any help? I can't make working :_(

Answer 7 · 2018-09-07T10:14:47.000Z

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

Answer 8 · 2018-09-18T22:27:27.000Z

Just I need, thanks for the help a nice work :)