Which chart lib do you guys like using with clojurescript?

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/

It’s on cljsjs also [cljsjs/recharts "1.4.2-0"]

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

@neo2551 yeah, I use cursors for the ratom used in each rid3 visualization

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

And 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).