Fork me on GitHub

Anyone know how to replicate the following imports using figwheel-main?

import Highcharts from 'highcharts';
import Heatmap from 'highcharts/modules/heatmap.js';


I tried

(ns highcharts.demo
    ["highcharts" :as Highcharts]
    ["highcharts/modules/heatmap.js" :as Heatmap]))
but no dice


I’m getting Highcharts ok, just not the nested heatmap module


I’ve tried with and without the .js suffix


I guess you can't nav to the heatmap from Highcharts - or don't want to without bringing in all the modules? requiring a single module/file from an npm lib is not possible in cljs afaik. maybe shadow can do it? I don't know highcharts, but googling cljs highcharts there seems to be quite a few results, so maybe something there?


yeah, can’t navigate through the Highcharts object sadly


> requiring a single module/file from an npm lib is not possible in cljs afaik do you know if there’s a reference somewhere for the cljs string requires? I’m struggling to find the right google search terms


... but actually the feature that's described as new is not what you're after. I think it's just sugar for navigating js object


yeah but good shout, maybe if I look back over the release notes


I wonder if I’m doing something dumb


oh holup it looks like its working now


did a restart and a refresh etc and used the “highcharts/modules/heatmap” incantation

👍 2

I am creating a very simple landing page as a ClojureScript Single Page App. I have identified 4 different views, home, reference, tutorials, support, which are fairly separate from each other. There may be a few functions shared between these views, but the overall layout will be different. What is the simplest approach to displaying each view based on a user action, eg clicking on the tutorials button on the home view changes the view to the tutorials view. • do i just hide and unhide the • do i need to include some kind of router like a compojure equivallent (seems a little excessive) I am using reagent, for CSS and figwheel-main as I am most familiar with these and would prefer to avoid JavaScript and npm (not familiar and its supposed to be a simple site). Thank you for sharing any ideas or examples.


Simplest - indeed the "hide and unhide" approach. And tad less simple but more scalable and useful in general - the router approach. If your app is limited to those four views and it's OK that people can't share links to particular views, then the first approach is reasonable.


Just to clarify - what do you refer to by 'hide'/'unhide'? Is this better/worse compared to using a cond? Like in

Adam Kalisz14:06:08

I am strugling with I have:

(.set "test" "test" #js{:maxAge   1000
                                                   :path     "/"
                                                   :domain   "localhost"
                                                   :sameSite (.-LAX
                                                   :secure   true})
but this keeps telling me "this.document_ is undefined". I don't know, how to provide the context so that understands where to set the cookies. Any clues?


Don't call prototype functions. Instead, create a concrete object and call a regular method on it. In this case, use .Cookies.getInstance to get the actual Cookies instance and call the set method on it instead of its prototype.

Adam Kalisz14:06:54

(.set (.getInstance js/ "test" "test" #js{:maxAge 1000 :path "/" :domain "localhost" :sameSite (.-LAX :secure true})

Adam Kalisz14:06:23

Thank you for the explanation. It works!


Also, don't use js/goog .... Instead, require it properly. E.g. (:require [ :as Cookies]) with a consequent (Cookies/getInstance).

👍 2
Adam Kalisz16:06:45

This is all related to my problem in the shadow-cljs channel: basically, it works in dev and doesn't work in release. Something is totally off here. I feel like I have learned a great deal in the last day, but this really is a problem I must fix - we need to set the SameSite option. Thank you for your mentoring

Stephen Kershaw20:06:26

I'm trying to make work with but so far I'm unable to convert from tick/joda's LocalDate to a Date that react-datepicker can recognize. Is there a recommended datepicker to use with tick, or can anyone point me to an example of how to convert to javascript native date-fns? @henryw374

nate sire21:06:37

I like to keep all my dates in UTC with the location data because of daylight savings time.

👍 2
nate sire21:06:19

because time varies based on location even when in the same longitude... and UTC is coordinated across all locations and time zones

Stephen Kershaw21:06:54

what libraries do you use for managing temporal data and for date-picking UI ?

nate sire21:06:11

Datomic is for temporal snapshots of data based on time

nate sire21:06:26

I used some jquery date picker libs... but...

nate sire21:06:53

if you have time... I'd write my own at some point... to reduce your dependencies

nate sire21:06:00

why are you not able to convert between date formats?

nate sire21:06:36

I actually wrote a machine learning algo to recognize the hundreds of ways to write dates/times. Fun project.

nate sire21:06:34

Formatting If you want to create custom formatters from patterns, such as "dd MMM yyyy", add this require

nate sire21:06:04

Looks like tick has a way to custom format but it is not very well documented... this is only in alpha?

nate sire21:06:58

hmmm... I used regex to recognize and convert dates to a standard utc format

nate sire21:06:50

I always use UTC since a manager told the team to switch over our servers at midnight on Tuesday...

Stephen Kershaw21:06:07

I'll try to add clarity by pasting in the errors I'm getting. One sec.

nate sire21:06:00

I found an example...

Stephen Kershaw21:06:01

So I've got a LocalDate object, and I get this error when passing it in to react-datepicker: No protocol method IConversion.inst defined for type object: 2020-01-23

nate sire21:06:42

it is missing some methods

nate sire21:06:22

the JS object is expected to have some methods available

nate sire21:06:32

you need to change how you are passing it in

Stephen Kershaw21:06:33

so I need to find the right set of conversion(s) if I want to use this datepicker UI that relies on native javascript date objects

nate sire21:06:15

you need to search the correct way to instantiate an object for that react date picker

nate sire21:06:33

so all the methods are there


so you want to convert to/from LocalDate to js/Date, in UTC I think

👍 2
nate sire21:06:43

where is your code that instantiates the react js object?

nate sire21:06:31

ReactDate.create( ) ?

nate sire21:06:03

the LocalDate object is not compatible with the React object... those are two different classes

nate sire21:06:23

you need to use dependency injection

Stephen Kershaw21:06:28

#(tick/date %) where the argument is a string

Stephen Kershaw21:06:42

tick makes use of js-joda ....

nate sire21:06:17

I know what you need...

nate sire21:06:49

you need to focus on creating the React object... then read the tick string into it...

nate sire21:06:08

not pass a foreign tick object to a foreign react object


(-> (t/date)
    (t/in (t/zone "UTC"))

👍 2
nate sire21:06:37

inst is not defined on the React object?


t is alias for tick.alpa.api ns

nate sire21:06:32

what does "inst" do?

Stephen Kershaw21:06:42

Trying to make that code work. I'm currently seeing this error: No protocol method defined for type null


as in (:require [tick.alpha.api :as t])

👍 2

t/inst converts an object to a native Date object

nate sire21:06:19

ahhh... for native fns


well, that is what the react date picker api expects I guess

👍 4

so, if user selects a date, and that api gives you a native Date obj, convert it to a LocalDate with :

(-> js-date-obj
    ( (t/zone "UTC"))


it does seem a bit complicated... I'm thinking this specific thing should be documented as it seems like a normal thing to want to do. longer term.. this will all become easier with the new js date objects . fyi see

❤️ 2
Stephen Kershaw22:06:58

So I've got a date from a postgres db that I've coerced to LocalDate via #(t/date %) In the DatePicker I'm formatting the value as you said, I think: `(-> start-date (tick/midnight) (tick/in (tick/zone "UTC")) (tick/inst))`

Stephen Kershaw22:06:42

Does the No protocol method defined for type null error make sense to you?

nate sire22:06:13

I found some github comments about that IExtract error

nate sire22:06:25

looks like a parsing format error


well that means the thing you're passing in is null I think

nate sire22:06:22

yea... what is the output of your clojure tick code?

nate sire22:06:10

(-> (t/date)
    (t/in (t/zone "UTC"))

nate sire22:06:17

what does this output?


a native Date object

nate sire22:06:00

is it actually outputting it... though... because of the null?

nate sire22:06:08

paste that into your REPL

nate sire22:06:14

see what it returns


(t/date) creates a date, but you put your date from postgres instead of that

Stephen Kershaw22:06:43

aha, sorry, I had some old code in a let block that was throwing that error

Stephen Kershaw22:06:59

so it does appear to be working! Thank you both so much

nate sire22:06:20

yea... make sure your % is working

nate sire22:06:27

the pg field