Fork me on GitHub

Hi, Is it possible to get the headers from a response usinh http-xhrio ? Thanks


So http-xhrio is simply forwarding to ajax-request, and the latter can receive a raw response by passing this map as of the response-format ->

{:read identity :description "raw"}


I haven't tested it yet, but it seems this should be enough to get a raw response including headers 🙂


reference ->


@lucio Many Thanks i'll look at this

🙂 4

Hello everyone, I'm doing my first re-frame SPA, things are going nicely but I'd like to do a line chart with both a single row of data, or multiple rows. I've read the docs on wrapping a stateful js object for reagent, and I've found some examples, but I have yet to make it work. I know clojure much better than js, so that is not helping me with the js interop. Is there something out there that I should be using ? Or is there a good up to date example that works with re-frame ? Im using shadow-cljs, and I've got chart.js loaded...


Given example is pretty minimal, so you should probably be able to make a copy to work for your system


Cool. Thanks. This piece has turned out to be more complicated than everything else I've done.


@U21QNFC5C I'm finally trying to get this working. But my project uses shadow-clj so I can't use cljsjs version of highcharts. I didn't know what I was getting into with shadowcljs. I'm having trouble with the mount code. I don't know enough js yet to understand. It appears that I'm calling chart. ok. but the node specification is not right, so I get a stack overflow with js/Highcharts, or if I get it wrong I get a null node. How do I know what node to give it ? Here's my code.

(ns prod-inv-ui.views
   [re-frame.core :as rf]
   [reagent.core :as r]
    :refer [h-box v-box box gap single-dropdown radio-button button alert-box
            input-text checkbox label title hyperlink-href p p-span throbber]]
   [prod-inv-ui.subs :as subs]
   [ :as events]
   [re-frame-datatable.core :as dt]
   ["highcharts" :as highcharts]))

(defn mount-chart [comp]
  (highcharts/chart. highcharts/Highcharts (r/dom-node comp) (clj->js (r/props comp))))

;; (defn mount-chart [comp]
;;   (.chart js/Highcharts (r/dom-node comp) (clj->js (r/props comp))))

(defn update-chart [comp]
  (mount-chart comp))

(defn chart-inner []
   {:component-did-mount   mount-chart
    :component-did-update  update-chart
    :reagent-render        (fn [comp] [:div])}))

(defn chart-outer [config]
  [chart-inner @config])

(defn test-chart
  (let [chart-data (rf/subscribe [::subs/test-chart])]
    (when (some? chart-data)
      (fn []
        [chart-inner chart-data]))))
test-chart has you original chart data in it.


your are not derefing chart-data subscription at the bottom


oh wait, i see what you are doing now


This bit seems off

(defn mount-chart [comp]
  (highcharts/chart. highcharts/Highcharts (r/dom-node comp) (clj->js (r/props comp))))


yea. definitely. I just don't know what. If I leave the node as js/Highcharts I get a stack overflow.


putting a . after chart means you are calling the chart constructor, the dot should be at the start of the word to mean a function call


use the correct function interop syntax, and try to remove the component-did-update parts. I’m suspecting they are causing your loop


ok. that helped. Now I'm getting this.

views.cljs:14 Uncaught TypeError: Cannot read property 'highcharts' of undefined
    at Constructor.prod_inv_ui$views$mount_chart (views.cljs:14)
    at Constructor.reagent$impl$component$custom_wrapper_$_componentDidMount (component.cljs:194)
    at Constructor.componentDidMount (factory.js:666)
    at commitAllLifeCycles (react-dom.development.js:17335)
    at HTMLUnknownElement.callCallback (react-dom.development.js:150)
    at Object.invokeGuardedCallbackImpl (react-dom.development.js:200)
    at invokeGuardedCallback (react-dom.development.js:257)
    at commitRoot (react-dom.development.js:18949)
    at react-dom.development.js:20419
    at Object.exports.unstable_runWithPriority (scheduler.development.js:256)
from this
(defn mount-chart [comp]
  (.highcharts/chart highcharts/Highcharts (r/dom-node comp) (clj->js (r/props comp))))


js/Highcharts gives reference error Highcharts undefined.


the correct way is (.chart the-highchart-object)


And given your require, i’m no shadow-cljs expert, but I would guess it might look like (.chart highcharts)


you might want to log out the value of your highcharts required object to see what it is.


yea, I've tried that, and I've tried changing my require to just `["highcharts"] and using the original code. js/Highcharts is still undefined.


printing js/Highcharts prints nothing.


with this, (.highcharts/chart highcharts (r/dom-node comp) (clj->js (r/props comp))) and the did-mount code I get maximum call stack size exceeded.


Of course, commending out the did-mount works but I get no chart.


I still think your use of interop is wrong


you should try to do (js/console.log highcharts)


I suspect npm imported throught shadow-cljs should not be prefixed with js/


Did you try (.chart highcharts)?


Yes. It cant find chart.


So given that this is most likely about how you do interop in shadow, you should ask about that specifically on shadow channel


Yea. I was just thinking that.


skimmed it, might be that you need (highcharts/chart params)


Ah. No dot ?


if you read the guide i pasted, it seems that’s the correct way


Reading now.


I think you are right. I am walking. I will try it when I get back.


So still not working. Highcharts is an undefined symbol. I added a compiler option to preserve externes that doesnt seem to be working. So it is close. I posted a question in shadow-cljs.


@U21QNFC5C In the end this is what worked.

(hc/chart (r/dom-node comp) (clj->js (r/props comp)))
I've got it all working nicely now. Thanks for your help.

👍 4

What example are you following?


I have this. it seems simple enough, hard coded data and everything.

(defn show-revenue-chart
  (let [context (.getContext (.getElementById js/document "rev-chartjs") "2d")
        chart-data {:type "bar"
                    :data {:labels ["2012" "2013" "2014" "2015" "2016"]
                           :datasets [{:data [5 10 15 20 25]
                                       :label "Rev in MM"
                                       :backgroundColor "#90EE90"}
                                      {:data [3 6 9 12 15]
                                       :label "Cost in MM"
                                       :backgroundColor "#F08080"}]}}]
    (chart. context (clj->js chart-data))))

(defn rev-chartjs-component
   {:component-did-mount #(show-revenue-chart)
    :display-name        "chartjs-component"
    :reagent-render      (fn []
                           [:canvas {:id "rev-chartjs" :width "700" :height "380"}])}))


I don't get any errors but I don't get any output either. I'm also using re-com, but that seems like it shouldn't be a problem. maybe I'm wrong about that. I have it in an v-box [(rev-chart-js-component)]


I've been trying to mock a re-frame http effect as follows:

(deftest getting-types
    (rf/dispatch [::events/initialize-db])
    (rf/dispatch [::events/change-owner "goo goo"])
    (with-redefs [ajax-request (fn [_opts]
                                 (println _opts)
                                 [true {:file_path    "/bubbies"
                                        :db           "goo"
                                        :name         "goo"
                                        :type_mapping {:goober "datetime"}}])]
                 (rf/dispatch [::events/get-types]))
    (let [types @(rf/subscribe [::subs/upload-file-results])]
      (is (= {:goober "datetime"} (:type_mapping types))))))
The get-types event fires off an :http-xhrio ajax-request, and the mocked/re-defined ajax-request runs instead (verified). The problem is that the get-types event's :on-success handler never gets triggered. Anyone know why?


Just off the cuff but the Ajax handler was what fired the events. And you’ve modified it to a no op


Presumably you want to modify the mock to just dispatch the onsuccess?


Makes sense, yea. Thanks matey!

parens 4