This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2020-02-07
Channels
- # announcements (2)
- # babashka (18)
- # beginners (45)
- # bristol-clojurians (1)
- # calva (2)
- # cider (8)
- # clara (8)
- # clj-kondo (4)
- # cljdoc (6)
- # clojure (69)
- # clojure-chennai (1)
- # clojure-dev (21)
- # clojure-europe (3)
- # clojure-gamedev (3)
- # clojure-india (1)
- # clojure-italy (4)
- # clojure-nl (5)
- # clojure-norway (1)
- # clojure-spec (7)
- # clojure-uk (70)
- # clojurescript (122)
- # cloverage (5)
- # cursive (2)
- # data-science (3)
- # fulcro (21)
- # graalvm (3)
- # graphql (14)
- # jackdaw (2)
- # jobs (2)
- # lumo (2)
- # malli (1)
- # mount (1)
- # off-topic (22)
- # re-frame (2)
- # reitit (5)
- # ring (7)
- # shadow-cljs (47)
- # spacemacs (11)
- # tools-deps (127)
- # vim (16)
- # xtdb (9)
https://apexcharts.com/docs/creating-first-javascript-chart/ this integration step
adn this is my code https://gist.github.com/metehan/34a3aa432a2b8304637b79435e5c1cfa
(defn history []
(let [data {:chart {:type "bar"}
:series
[{:name "sales"
:data [30 40 45 50 49 60 70 91 125]}]
:xaxis
{:categories
[1991
1992
1993
1994
1995
1996
1997
1998
1999]}}
]
[:div [:div#chart {:style {:border "red solid thin"}}]
[:button {:on-click
(fn []
(let [chart (charts. (.getElementById
js/document
"chart")
data)]
(.render chart)))}
"Render chart"]
]
))
Your data is a CLJS data structure. The library probably expects a JS data structure.
https://twitch.tv/elixirBeam could you check me for a second @p-himik if you have 1 minute
This particular example is exactly what you're looking for: https://github.com/reagent-project/reagent-cookbook/tree/master/recipes/highcharts
I suggest browsing through reagent-cookbook
repo for useful ideas in general.
with a ref you get direct access to the dom node. so you don't need to query the dom to get it via an id
The cookbook uses reagent/dom-node
, but it's discouraged and deprecated, as stated in the docs linked by thheller.
in cookbook i couldn't find sample for :ref usage, i tried like this but didn't work
(defn history []
(let [data (clj->js {:chart {:type "bar"}
:series
[{:name "sales"
:data [30 40 45 50 49 60]}]
:xaxis
{:categories
[1991
1992
1993
1994
1995
1996]}})]
[:div [:div {:ref (fn [elm] (charts. elm data))}]]))
:ref
just lets you get the DOM node without relying on its ID. Otherwise, it's the same as ID. Meaning, you have to do all the work at some other place.
The link provided by thheller has more information.
@m373h4n in the ref example you posted you are missing the (.render chart)
call you had in the other example. I guess it would work if you add that?
(defn history []
(let [data (clj->js {:chart {:type "bar"}
:series
[{:name "sales"
:data [30 40 45 50 49 60]}]
:xaxis
{:categories
[1991
1992
1993
1994
1995
1996]}})
ref-fn
(fn [elm]
(-> (charts. elm data)
(.render)))]
[:div [:div {:ref ref-fn}]]))
and if ref-fn is constructed that way in render itself it'll be called twice in each render because it first unmounts the old one and then the new one
well, it should be created when the component mounts but I don't know how to do that with reagent 😛
or not even mounted. when it is created, dunno if that is even accessible in reagent
You just save the ref in a regular atom in a form-2 component, and then use it in the :component-did-mount
handler. Or did I misunderstand something?
you could resolve the var for a symbol passed in to a macro, and get any metadata that's defined on the var. like a return type hint or a spec. if that's what you mean
you can look at :ret-tag
in the analyzer data. dunno how reliable that ultimately is though.
I’m looking at the analyzer data, and all I see is :tag
- is it in some nested bits in :info
or :env
?
I have a macro that emits a (def ~name …)
which contains a value that is a function. is there a way to add the ret-tag to that var?
I am also annotating the fn
that I pass in but there’s a couple steps of indirection, which I’m guess is obscuring it from the analyzer
it makes things a billion times easier to follow if you just paste what the macro actually emits 😛
here’s the macro. it’s a bit long: https://github.com/Lokeh/helix/blob/master/src/helix/core.clj#L157
so you have (def something-wrapped ...)
and then (def something something-wrapped)
? whats the point of that? ::P
the problem I’m trying to solve is:
my code base at work has a mix of helix + reagent components. I’d like the $
macro (https://github.com/Lokeh/helix/blob/master/src/helix/core.clj#L7) to detect if it’s passed a reagent component or a regular React component, and warn if it’s a reagent component
I was hoping to leverage the return type of the function to see if it’s a vector or react element. but i’m not sure I can get good enough fidelity with this approach even if I get the annotation of the helix component correct
I count helix components also as “react components”, which are defed in CLJS as well
so I have 3 cases: • helix component: returns React elements • JS component: no analyzer data • anything else
the little corner case I’m trying to solve is when someone passes a reagent component to $
(since we have a lot of them still)
dunno really ... I'm so done with react and happy that I don't have to care about details like that anymore 😛
the component body gets the props wrapped as a bean. it has a certain elegance since there’s no difference between interop and using a CLJS component in terms of how you create a component. it also can be a little faster as long as you’re writing your props map literally
I feel like I just need a processor from clojure to css, everything else I see css solutions doing is /seems trivel. Like tailwinds utility classes seem mainly useful for cross browser support but the way that information is expressed is akward. E.d pl5 pl6 a class for each property seems like an idea taken to an extreme.
tailwind is really nice for building things like component libraries, or whipping up a prototype
our emotion wrapper is nice for ad-hoc CSS, but again, the goal is to use it for our component library with minor styling in our actual application
emotion allows you to ad-hoc do things like:
(def my-styles
(css {:color "green"
"&:hover" {:color "red"}}))
;; => "auto-generated-class-name-asdf1234"
and then you can refer my-styles
wherever you would pass in a class name"I feel like I just need a processor from clojure to css" - isn't this exactly what Garden does, or am I misreading your statement?
For tailwind, you can also create components out of common patterns. For example:
.btn {
@apply p-2 font-semibold text-base border rounded-sm;
}
.btn-blue {
@apply bg-blue-700 text-white border-blue-900;
}
In general yes it can look a little verbose sometimes, but I just don't think the alternative is better
I'm trying to pull my graphql queries out of my cljs files and into their own files. How do I read them back in from the cljs file?
Read them in as edn. Look at the Lacinia tutorial for some good examples of loading a schema from edn.
it popped up on my radar the other day and i saw feb so i thought it was brand new lol
Wow, thanks!