This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2023-10-09
Channels
- # announcements (2)
- # babashka (11)
- # beginners (9)
- # biff (7)
- # calva (20)
- # catalyst (1)
- # cider (8)
- # clerk (46)
- # clj-kondo (18)
- # clj-otel (2)
- # clojure-brasil (22)
- # clojure-europe (18)
- # clojure-gamedev (23)
- # clojure-italy (5)
- # clojure-nl (2)
- # clojure-norway (14)
- # clojure-uk (6)
- # clr (1)
- # datomic (13)
- # emacs (1)
- # hoplon (13)
- # hyperfiddle (53)
- # introduce-yourself (1)
- # java (23)
- # malli (7)
- # obb (35)
- # off-topic (31)
- # polylith (2)
- # portal (9)
- # rdf (15)
- # reitit (12)
- # releases (3)
- # ring (4)
- # shadow-cljs (6)
- # solo-full-stack (3)
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?
(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
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)
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?@U0599HVJX70 think you also need to set :responsive true
in the plotly config
I think it's responsive by default. Anyway adding that :responsive true
doesn't make any difference. Still only responsive in width's perpective.
@U0599HVJX70 I've not had a go yet. I will today and I'll report back
@U0599HVJX70 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 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.
@U0525KG62 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:
using (clerk/html {::clerk/width :full} [:div {:class ["h-4/5" "bg-green-200"]} "hello"])
I get:
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"]])
@U0599HVJX70 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
this works
(clerk/html {:nextjournal.clerk/width :full}
[:div {:class ["h-[calc(100vh*0.80)]" "bg-green-200"]} "hello"])
btw @U0525KG62, 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
@U0599HVJX70 I'm using clerk slideshow, so I wonder if that is doing it
can paste this when I’m back at the 🧑💻 or maybe @U9EQP1K0X has it sooner?
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
@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]))])
@U9EQP1K0X thanks, don’t agree this is a hack though
thanks for the tip @U9EQP1K0X. Hack or no hack, I guess a header option in the :nextjournal.clerk/visibility
would be convenient.
@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.