Fork me on GitHub
#reagent
<
2016-08-20
>
zarkone02:08:20

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
what could possibly cause this trouble? deps interfere problem..? I tried to set the same cljs version: [org.clojure/clojurescript "1.8.51”] but it didn’t help. Actually, the same trouble for reagent-0.6.0-alpha

timothypratley03:08:02

hmmm what Clojure version?

zarkone03:08:03

also, 0.5.0 seem to work fine

zarkone03:08:24

at least I have clojurescript have been built

zarkone03:08:36

i mean, reagent-0.5.0

timothypratley03:08:53

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

zarkone04:08:12

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

pesterhazy09:08:52

try updating boot and clojurescript as dependencies

pesterhazy09:08:48

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

zarkone14:08:02

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

borongkim16:08:02

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

juhoteperi16:08:29

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

borongkim16:08:00

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

mnewhook17:08:08

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?

gadfly36117:08:47

@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

gadfly36118:08:24

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

gadfly36118:08:02

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

mnewhook18:08:36

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?

gadfly36118:08:44

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

mnewhook18:08:29

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

gadfly36118:08:51

can you show what you have done?

mnewhook18:08:51

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

mnewhook18:08:19

(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}))

mnewhook18:08:04

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

mnewhook18:08:04

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

gadfly36118:08:52

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

gadfly36118:08:55

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?

mnewhook18:08:32

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

gadfly36118:08:59

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

mnewhook18:08:09

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

mnewhook18:08:59

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>
I was using this as its what is recommended on the morris.js page.

gadfly36118:08:43

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.

mnewhook18:08:00

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.

gadfly36118:08:02

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! 🙂

mnewhook18:08:26

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

mnewhook18:08:13

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?

gadfly36118:08:43

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

mnewhook18:08:56

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

gadfly36118:08:10

how are you calling overview-chart?

gadfly36118:08:25

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

mnewhook18:08:34

[h-box
                   :padding "0px"
                   :margin "0px"
                   :size "auto"
                   :children [[overview-chart timeseries]]]
gotta head out, I’ll be back later 🙂

gadfly36118:08:51

ahh very curious - try it without using re-com

gadfly36118:08:59

and see what happens

gadfly36118:08:13

catch you later 🙂

mnewhook21:08:54

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

gadfly36121:08:58

Oh interesting

mnewhook23:08:55

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

mnewhook23:08:13

commit 88e3fe6211d86a87782fdc7e601dfe33732a9aa7
Author: Olly Smith <[email protected]>
Date:   Sat Nov 9 19:33:36 2013 +0000
This revision of morris removed that behavior.

mnewhook23:08:37

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();

mnewhook23:08:44

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.

gadfly36123:08:22

Ahh yeah, that makes sense :)

mnewhook23:08:16

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

mnewhook23:08:44

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

gadfly36123:08:23

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