Sorry, not sure that i should post here such questions… I’m having troubles with reagent-0.6.0-rc:

clojure.lang.Compiler$CompilerException: java.lang.ClassNotFoundException: cljs.analyzer, compiling:(reagent/debug.clj:49:12)
       java.lang.ClassNotFoundException: cljs.analyzer

hmmm what Clojure version?

@timothypratley 1.8.0

also, 0.5.0 seem to work fine

at least I have clojurescript have been built

i mean, reagent-0.5.0

hmmmm lein clean? https://github.com/bhauman/lein-figwheel/issues/285 <-- this thread suggests the lein version may matter too

yeah, i’ve seen this… I have clean env initially and tried to clean it too. However, this is Boot project

try updating boot and clojurescript as dependencies

also boot-reload perhaps? We use [reagent "0.6.0-rc"] successfully from boot

@pesterhazy thanks! I think that some other deps interfere and cause this situation

reagent does not recognize input tag’s refs [:input {:ref "ref-id"}] who knows this matter? but another tag is normal operation .. only input tag

@borongkim: Use callback refs, string refs don't usually work with Reagent (also they are considered legacy feature in React)

@juhoteperi thank you deraen. https://facebook.github.io/react/docs/more-about-refs.html this article ? I’ll see

Yes, it can be used like here: https://github.com/cljsjs/cljsjs.github.io/blob/real-code/src/frontend/core.cljs#L46-L54

thank you.. it’s very helpful. may be lexial scoped variable el -> refs callback => using reset! to assign el variable

I was asking this question in the #C073DKH9P channel, but perhaps here is more appropriate. I was using this cookbook https://github.com/reagent-project/reagent-cookbook/tree/master/recipes/morris to build a chart in my app. However, what this doesn’t address is updating the chart. When I updated the chart naively by rebuilding the chart Morris added another element to the container div (in the cookbook example, its the donut-example div). Either I need to wipe out the content of that div when updating the chart, or I need to change the data on the existing chart. Anyone got any ideas on the best way to approach this?

@mnewhook: That recipe is very basic. If you want to be able to change the data, i recommend shoving the data into a ratom, then i initializing the chart with component-did-mount and then updating the chart using component-did-update

@mnewhook ☝️ this should be a working example for how to update data with component-did-update

shoot, my comment should say neeeded to call component-did-update (not mount)

that seems very similar to what I’ve done? Won’t that re-create the chart each time adding more and more stuff to the div?

It will redraw the chart, but it doesnt add to the div. Single svg.

Its very similar to what I’ve done… I wonder why what I’ve done doesn’t work then...

can you show what you have done?

I don’t reference the atom in the render part.

(defn overview-chart-did-mount [component]
  (let [timeseries (:data (r/props component))
        {timestamps :timestamps
         counts :counts} timeseries]
    (.Bar js/Morris
          (clj->js {:element "overview-chart"
                              :data (map #(hash-map :y %1 :a %2) timestamps counts)
                              :axes "y" ;; Only render the y axis.
                              ;;:resize true
                              ;;:redraw true
                              :xkey "y"
                              :ykeys ["a"]
                              :labels ["Count"]
                              :hideHover "auto"}))))

(defn overview-chart-render []
  [:div#overview-chart {:style {:height "150px" :width "100%"}}])

(defn overview-chart []
  (r/create-class {:component-did-mount overview-chart-did-mount
                   :component-did-update overview-chart-did-mount
                   :display-name "overview-chart"
                   :reagent-render overview-chart-render}))

[overview-chart {:data @timeseries}] <- embedded in some other component.

I just tried doing the same thing as your example, and I end up with two charts in the div 😞

http://s.cust.io/1iqpT

steps to reproduce minimal working version i shared above:

1) lein new reagent-figwheel morris-example
2) go to core.cljs and replace it with the code snippet i shared above
3) add to index.html
    <!-- jQuery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <!-- Morris.js -->
    <script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
    <script src="http://cdn.oesmith.co.uk/morris-0.4.1.min.js"></script>
4) lein figwheel dev
5) navigate to localhost:3449

hmm, nothing jumps out at me from your code snippet - i agree it looks the same. Out of curiosity, are you able to reproduce the minimal example and confirm it doesnt create a new div?

I just tested the minimal example you gave and it created a new div 😞

http://s.cust.io/T2u0

very odd, still works for me. i just editted the reproduce steps above - are you using different versions of jquery and morris by chance?

yes, sec I’ll try the ones you gave there

ok, that works. Erg!?

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css">
     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
     <script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
     <script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>

damn, that is super frustrating - no real clue on how to resolve version issues. looks like you are using the newer stuff too 😞 All i can tell you is the pattern i showed above is how i generally interact when needing to update data and using a third party lib - that is how i do d3 at least.

yeah, ok, well at least I know I wasn’t on the wrong track after all! That was pretty confusing! Thanks, probably I can use the older versions otherwise I’ll need to figure out what went wrong 🙂 Thanks for your help.

anytime! glad we were able to figure it out - when you showed your second snippet i was at a loss bc it should have worked! 🙂

weeellllll… I changed up the versions in the actual app and I still get two svg elements 😞 Bummer.

do you know what arranges for the svg in the previous div to get erased? Does reagent create a replacement div, or does morris somehow remove the old svg?

did it not work with your r/props version or the deref version? (i am assuming both, but just want to make sure)

the deref version (the content of the second snippet I posted, not the first).

how are you calling overview-chart?

and to answer your question above about svg -- no idea lol 😞

[h-box
                   :padding "0px"
                   :margin "0px"
                   :size "auto"
                   :children [[overview-chart timeseries]]]

ahh very curious - try it without using re-com

and see what happens

catch you later 🙂

@gadfly361: I think its a problem with Bar. If you substitute Bar for Donut in the same code you gave its breaks too.

Oh interesting

The problem appears to be that the donut clears the div, whereas the other functions don’t.

commit 88e3fe6211d86a87782fdc7e601dfe33732a9aa7
Author: Olly Smith <[email protected]>
Date:   Sat Nov 9 19:33:36 2013 +0000

Donut.prototype.redraw = function() {
       var C, cx, cy, i, idx, last, max_value, min, next, seg, total, value, w, _i, _j, _k, _len, _len1, _len2, _ref, _ref1, _ref2, _results;
-      this.el.empty();
-      this.raphael = new Raphael(this.el[0]);
+      this.raphael.clear();

thats why I think 0.5.1 breaks things for Donut. The other versions don’t work at all for grid/bar since they don’t clear the div. Now, perhaps a work around (short of fixing the issue) would be to create the chart in component-did-mount and calling setData in component-did-update.

Ahh yeah, that makes sense :)

Any idea how to do what I suggest? Put the chart in a property of the component or an atom or similar?

Don’t use morris and switch to charts.js or similar? 🙂

Haha i am away from keyboard for the time being. I think it can be done, but i dont use morris, just use d3 for the minimal charting i have to do