This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2019-02-21
Channels
- # announcements (6)
- # bangalore-clj (1)
- # beginners (46)
- # cider (21)
- # cljs-dev (30)
- # cljsjs (3)
- # clojure (131)
- # clojure-dev (20)
- # clojure-europe (2)
- # clojure-italy (12)
- # clojure-nl (11)
- # clojure-russia (4)
- # clojure-spec (55)
- # clojure-uk (57)
- # clojurebridge (1)
- # clojured (1)
- # clojurescript (55)
- # cursive (11)
- # data-science (1)
- # datomic (23)
- # duct (1)
- # emacs (1)
- # events (1)
- # figwheel-main (2)
- # fulcro (219)
- # graphql (16)
- # immutant (1)
- # jackdaw (3)
- # java (6)
- # juxt (30)
- # kaocha (8)
- # mount (3)
- # nyc (1)
- # off-topic (16)
- # pathom (48)
- # pedestal (1)
- # re-frame (71)
- # reagent (17)
- # ring-swagger (3)
- # shadow-cljs (96)
- # spacemacs (21)
- # specter (8)
- # speculative (20)
- # sql (21)
- # test-check (2)
- # tools-deps (12)
- # vim (6)
I like making custom charts with d3 (helper library: https://github.com/gadfly361/rid3) But there are a lot of good options with more ready made charts. Take a look at cljsjs and you can peak at the charting options easily compatible with reagent
I’ve been happy with http://recharts.org/en-US/
Here are some examples how it looks with reagent https://github.com/lipas-liikuntapaikat/lipas/blob/dev/webapp/src/cljs/lipas/ui/charts.cljs
You can also write wrappers around other react librarys 🙂
@gadfly361 How did you implement tooltip with rid3?
Do you use cursors? Because whenever I try to use tooltip viz
recompute the whole graphic
For tooltip I'd use conditional logic to show an element based on some kind of touch event .. so I'd make the tooltip element 100% opacity when not in use
Do you have an example with a cursor for rid3?
I still have the feeling that my component will be called whenever the ratom change xD
The component will call did-update
everytime the viz
's ratom changes (which can be a cursor) .. that is intended behavior. The viz component is meant to update when data that it relies on changes :man-shrugging:
I don't have an example handy, but you can also create a Form-2 component with a ratom and pass that in if you want to mock something up .. a cursor would act the same way
Oh great thanks!! While you are at it, do you know the difference between the track and reaction in reagent?!
@neo2551 I won't speak to reaction, but this may give some insight in to how track
works:
(defn tracked-counter [ratom]
(print "tracked counter ran")
(get @ratom :tracked-counter 0))
(defn track-example []
(let [ratom1 (reagent/atom {:counter 0})
ratom2 (reagent/atom {:tracked-counter 0})]
(fn []
(let [_ (print "this component has re-rendered")
untracked-count (get @ratom1 :counter 0)
tracked-count @(reagent/track tracked-counter ratom2)]
[:div
[:h1 "Counter: " untracked-count]
[:h1 "Tracked Counter: " tracked-count]
[:button
{:on-click #(swap! ratom1 update :counter inc)}
"Increment counter"]
[:button
{:on-click #(swap! ratom2 update :tracked-counter inc)}
"Increment tracked counter"]
]))))
If you click the first button, you will only see a print-out of "this component has re-rendered". However, if you click the second button, you will see that print-out plus the "tracked counter ran".
So with track, you can enable functions to only run when the ratom that they rely on changes. So if you wanted to sort a list of data ... but worry about having to pay the cost of that sort every time your component rerenders ... you can instead track the sort function so it will only run when data changesAnd regarding reactions, this is from reagent website
If you've been using reagent.ratom/reaction etc, track should be quite familiar. The main difference is that track uses named functions and variables, rather than depending on closures, and that you don’t have to manage their creation manually (since tracks are automatically cached and reused).