Fork me on GitHub
#clerk
<
2023-10-09
>
John Doe06:10:17

Does anybody know how to make a single plotly graph take up to full screen? I've set {:nextjournal.clerk/width :full} to make the graph full width, but there isn't any corresponding :nextjournal.clerk/height`` available, how do I make the graph also responsive to full height this case?

John Doe06:10:22

I can hard code a px height inside its :data :layout :height , but its not ideal

mkvlr06:10:04

(ns scratch
  {:nextjournal.clerk/visibility {:code :hide}}
  (:require [nextjournal.clerk :as clerk]))

(clerk/html {::clerk/width :full} [:div.h-screen.bg-green-200 "hello"])

mkvlr06:10:38

that should be about what you want, there’s still a padding at the top though which you can take out if you want

otfrom07:10:28

would wrapping a vega-lite chart in a (clerk/html {::clerk/width :full}) also make it responsive to the size of the page? I'm wondering if this might solve some of my sizing problems (though fonts are still an issue then I think)

mkvlr07:10:57

yes, that’s full width then

John Doe07:10:06

I tried to wrap it inside the fullscreen container with the docs example, still no luck. The container is green fullscreen as expected, but not the inside graph, the height is still about half the screen. Am I missing sth obvious here maybe.

(clerk/html {:nextjournal.clerk/width :full}
            [:div.h-screen.bg-green-200
             (clerk/plotly {:data [{:z [[1 2 3] [3 2 1]] :type "surface"}]
                            :layout {:margin {:l 20 :r 0 :b 20 :t 20}}
                            :config {:displayModeBar false
                                     :displayLogo false}})])
Also @U0525KG62, do you have any luck with vega-lite maybe with this approach?

mkvlr07:10:10

@U0599HVJX70 think you also need to set :responsive true in the plotly config

John Doe07:10:55

I think it's responsive by default. Anyway adding that :responsive true doesn't make any difference. Still only responsive in width's perpective.

otfrom08:10:34

@U0599HVJX70 I've not had a go yet. I will today and I'll report back

mkvlr08:10:26

@U0599HVJX70 sounds like it’s a plotly issue not a clerk one then

mkvlr08:10:15

i’d suggest trying to get it to work in https://plotly.com/javascript/responsive-fluid-layout/ first

otfrom08:10:47

h-screen ends up being too big (in slide show at least) and I'm not sure how I'd do [:div.h-4/5] as hiccup really doesn't like the slash. I'll figure out how to do that.

otfrom08:10:21

I take it the div sizes are from here? https://tailwindcss.com/docs/height

👍 1
John Doe08:10:29

@U0525KG62 you can [:div {:class "h-4/5 balaba bala"}] instead

👍 1
John Doe08:10:48

I guess my case it's indeed plotly issue, I found the height is fixed at 450px as mentioned in that issue, unless clerk has some ways to override that style, I'd have to hard code px height myself.

mkvlr08:10:42

@U0525KG62 you can use e.g. {:class "h-4/5"}

otfrom09:10:27

using (clerk/html {::clerk/width :full} [:div {:class ["h-screen" "bg-green-200"]} "hello"]) in slideshow I get this:

otfrom09:10:36

which is a bit too tall

otfrom09:10:11

using (clerk/html {::clerk/width :full} [:div {:class ["h-4/5" "bg-green-200"]} "hello"]) I get:

mkvlr09:10:54

yeah, you probably should do some calc with 100vh

👍 1
John Doe09:10:10

i think his issue is he needs to wrap another inside the full height one to get the actuall 4/5 height

(clerk/html {:nextjournal.clerk/width :full}
            [:div {:class "h-screen"}
             [:div {:class "h-4/5 bg-green-200"} "hello"]])

otfrom09:10:40

@U0599HVJX70 that is indeed the 🦡

otfrom09:10:18

or at least it gets the job done. I'd certainly prefer to set the div to be 80% of the viewport height

otfrom09:10:52

and doing the wrap does give me a scroll bar when I'd rather not have one

otfrom09:10:56

this works

(clerk/html {:nextjournal.clerk/width :full}
            [:div {:class ["h-[calc(100vh*0.80)]" "bg-green-200"]} "hello"])

otfrom09:10:33

now I just have to get vega-lite to work with it. Thx both. I've learned a lot today

John Doe09:10:39

btw @U0525KG62, how do you make the top index bar ( served from Clerk ) go away?

John Doe09:10:42

I only see {:nextjournal.clerk/visibility {:code :hide :result :show}}, there is no option to hide that bar it seems

otfrom09:10:52

@U0599HVJX70 I'm using clerk slideshow, so I wonder if that is doing it

John Doe09:10:39

I see, thanks!

mkvlr10:10:13

can paste this when I’m back at the 🧑‍💻 or maybe @U9EQP1K0X has it sooner?

otfrom10:10:56

now I'm just trying to find a way to get vega-lite to fill up the whole viewer there

otfrom10:10:07

I've never had the responsive stuff working before

otfrom10:10:50

now I'm a bit stuck as my vl canvas has a width of 0 and a height of 200. More documentation to read apparently (unless anyone here has a tip)

otfrom10:10:22

(clerk/html {:nextjournal.clerk/width :full}
            [:div {:class ["h-[calc(100vh*0.70)]" "bg-green-200"]}
             (clerk/vl
              {:nextjournal.clerk/width :full}
              {:autosize {:type "pad"}
               :data {:url ""},
               :mark "bar",
               :encoding {
                          :x {:field "Origin"},
                          :y {:aggregate "count", :title "Number of Cars"}}})])

otfrom12:10:20

hmm... I'm bumping into to many walls on this today. https://github.com/vega/vega-embed#what-css-should-i-use-to-support-container-sizing <- seems to have something to do w/it but I need to get some stuff ready for a client and what I have is good enough for that

Andrea12:10:36

@U0599HVJX70 > how do you make the top index bar ( served from Clerk ) go away? this should do it

(ns scratch.vega
  (:require [nextjournal.clerk :as clerk]
            [nextjournal.clerk.viewer :as viewer]))

(clerk/add-viewers! [(assoc viewer/header-viewer :render-fn '(fn [_ _] [:div.pt-5]))])

Andrea12:10:42

it’s kind of a hack, we should make it easier

mkvlr12:10:01

@U9EQP1K0X thanks, don’t agree this is a hack though

John Doe12:10:32

thanks for the tip @U9EQP1K0X. Hack or no hack, I guess a header option in the :nextjournal.clerk/visibility would be convenient.

mkvlr06:10:48

@U0599HVJX70 I think that’s too much of a special case and a visibility flag would be too limited. Consider some options beyond plain visibility: • hide the header but add padding instead • hide the header without padding • change header contents The viewer api gives you full control here so I think it’s the better option in this case.

1