Clojurians Log v2

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)

yes, that’s full width then

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}})])

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

https://plotly.com/javascript/responsive-fluid-layout/

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

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

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

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

I skimmed over https://github.com/plotly/plotly.js/issues/106 and https://github.com/plotly/plotly.js/pull/635 but the solution isn’t obvious to me

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.

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

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

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.

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

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

which is a bit too tall

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

yeah, you probably should do some calc with 100vh

or 80vh

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"]])

@snow40479 that is indeed the 🦡

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

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

this works

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

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

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

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

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

I see, thanks!

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

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

I've never had the responsive stuff working before

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)

(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"}}})])

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

@snow40479 > 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]))])

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

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

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

@snow40479 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.

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

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

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

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