Fork me on GitHub
#clojurescript
<
2021-06-29
>
danielneal10:06:13

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

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

danielneal10:06:51

I tried

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

danielneal10:06:48

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

danielneal10:06:12

I’ve tried with and without the .js suffix

henryw37410:06:31

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?

danielneal10:06:34

yeah, can’t navigate through the Highcharts object sadly

danielneal10:06:04

> 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

henryw37410:06:35

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

danielneal10:06:52

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

danielneal10:06:23

I wonder if I’m doing something dumb

danielneal11:06:41

oh holup it looks like its working now

danielneal11:06:11

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

👍 2
practicalli-johnny12:06:42

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, http://bulma.io 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.

p-himik12:06:52

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.

henrik4207:06:38

Just to clarify - what do you refer to by 'hide'/'unhide'? Is this better/worse compared to using a cond? Like in https://github.com/henrik42/solo/blob/83064f711b3cec897fd5f59fec50dd418b309f88/src/cljs/solo/spa.cljs#L276

Adam Kalisz14:06:08

I am strugling with http://goog.net.Cookies.prototype.set: https://github.com/google/closure-library/blob/master/closure/goog/net/cookies.js#L167-L229 I have:

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

p-himik14:06:49

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/goog.net.Cookies) "test" "test" #js{:maxAge 1000 :path "/" :domain "localhost" :sameSite (.-LAX http://goog.net.Cookies.SameSite) :secure true})

Adam Kalisz14:06:23

Thank you for the explanation. It works!

p-himik14:06:13

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

👍 2
Adam Kalisz16:06:45

This is all related to my problem in the shadow-cljs channel: https://github.com/reagent-project/reagent-utils/issues/19 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 https://clojars.org/tick/versions/0.4.32 work with https://www.npmjs.com/package/react-datepicker 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

henryw37421:06:21

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

henryw37421:06:18

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

👍 2
nate sire21:06:37

inst is not defined on the React object?

henryw37421:06:43

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 IExtraction.date defined for type null

henryw37421:06:42

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

👍 2
henryw37421:06:01

t/inst converts an object to a native Date object

nate sire21:06:19

ahhh... for native fns

henryw37421:06:39

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

👍 4
henryw37421:06:21

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/instant
    (cljc.java-time.zoned-date-time/of-instant (t/zone "UTC"))
    t/date)

henryw37421:06:14

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 https://github.com/henryw374/tempo

❤️ 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 IExtraction.date 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

henryw37422:06:41

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/midnight)
    (t/in (t/zone "UTC"))
    (t/inst))

nate sire22:06:17

what does this output?

henryw37422:06:32

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

henryw37422:06:15

(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