First example on web page looks broken

[ghost]

The first example (bar chart) on http://keminglabs.com/c2/ should be updated to remove use of c2.core/style which has apparently been removed.

(also, a complete worked-out cljs example for the bar chart would be great).

Cheers

[lynaghk]

Good catch; I'll make a note to fix that and otherwise update the website. Right now there is a standalone todo list app demo for ClojureScript, but not much else. I'll look into getting a page of charts thrown into there too.

Thanks for raising the issue---I'm going to leave it open until I can close it with some links to updated content.

[ghost]

OK, thanks for the pointer to the demo!

[ghost]

Just a nag: what should the style function be replaced with? I thought simply passing a map would be enough, but in my example (adapted from the bar chart), only the background color is taken into account, the width and height attributes are simply ignored.

Cheers

[lynaghk]

It depends where you're rendering. In ClojureScript C2 uses the Singult library to build live DOM nodes, and it has some extra sugar that will turn style maps into the correct values. On JVM Clojure you will be using Hiccup to render, and that library has no special handling for certain attributes---you will have to construct the CSS style string yourself.

[ghost]

Okay, maybe this is not the right place for a chat, but... I use ClojureScript C2; what do I need to do? (using c2.dom/style on a hiccup fragment does not seem to work)

[lynaghk]

c2.dom/style is for setting live nodes on the page. If you're working with Hiccup fragments, you should construct the styles directly:

[:div.my-thing {:some-attr "123" :style {:background-color "red" :left 123}}]

As a rule of thumb though, do all constant styling in CSS via classes and other selectors, and only do inline styles for data-driven attributes.

[ghost]

Okay.

My issue, then, is that I did precisely that:

[:section#main
      [:div#bars
       (unify data (fn [[label val]]
                     [:div {:style {:height bar-height
                                           :width (s val)
                                           :background-color "gray"}}
                      [:span {:style "color: white;"} label]]))]]

and that the width and height attributes are ignored in the resulting page...

[lynaghk]

It's possible that your browser is throwing out the width and height attributes because they're being provided as integers rather than as CSS widths (e.g., "34px). The C2 style setter has some special handling for this:

https://github.com/lynaghk/c2/blob/master/src/cljs/c2/dom.cljs#L120

but right now the Singult compiler is bare bones. Not sure if I want to clear up this issue by

1. Having Singult interpret numeric values on style properties as pixel lengths, or
2. Doing interpolation on C2's scales so you can say :range ["0px", "500px"] and have it output the appropriate string.

Any thoughts?

[ghost]

My gut feeling would be to go for the second solution, it feels cleaner (i.e. less special cases). Also it may make using other units easier (no hard-coded interpretation).

What do you think?

[lynaghk]

Yeah, that's my feeling too, but having numbers be coerced to pixels is just a sane default vs. the alternative of having the browser throw them out---passing "3em" will work fine. The only downside is a rendering slowdown, but I suspect that's negligible. I'm going to leave the Singult issue open to give it some more thought.

If you want to take a look at c2's scales and d3's JavaScript-magic scale interpolation, I'd definitely be open to a pull request. I'd prefer the succinctness of d3's approach (range(["0px", "100px"])) over having some kind of decorator field on the c2 scale records that runs (decorator-fn (scale x)), but I don't know implementation-wise what the best way to implement that would be. I've been punting on the issue since day one = )

[ghost]

Alternatively, what about :range [0, 100, :px] ?

[stuarthalloway]

I could not just drop bars.clj into Visual REPL, even after following this thread. Here is a hack that worked:

(ns bars
  (:use [c2.core :only [unify]])
  (:require [c2.scale :as scale]))

(let [width 500, bar-height 20
      data {"A" 1, "B" 2, "C" 4, "D" 3}
      s (scale/linear :domain [0 (apply max (vals data))]
                      :range [0 width])
      fix ()]

  [:div#bars
   (unify data (fn [[label val]]
                 [:div {:style (str "height: " bar-height "px;"
                                    "width: " (s val) "px;"
                                    "background-color: gray")}
                  [:span {:style "color: white;"} label]]))])

[lynaghk]

@stuarthalloway Empty list action fixes issues for you? That's terrifying.

The visual REPL is pretty stale at the moment---I'd just import C2 into a standard Clojure project / REPL setup and use that. If you're targeting CLJS, take a look at the example @dribnet contributed: https://github.com/lynaghk/c2-demos/tree/master/hello-bars

[egonelbre]

Here's a quick-hack-substitute for the previous style function:

(defn style [m]
  (letfn [(px? [k] (#{:height :width :top :left :bottom :right
                      :margin :margin-left :margin-top
                              :margin-right :margin-bottom
                      :padding :padding-left :padding-top
                              :padding-right :padding-bottom} (keyword k)))
          (str-value [k v]
            (cond (string? v) v
                  (px? k) (str v "px")
                  :else v))
          (str-attr [[k v]] (str (name k) ":" (str-value k v) ";"))]
    (reduce str (map str-attr m))))

[lynaghk]

@egonelbre The style function that used to be in core was a quick-hack to begin with, which is why I took it out = )

For CSS we use Compass or raw SASS since those tools have much wider adoption and features compared to what's in the Clojure ecosystem.

[Chepkeitany]

Can you add axes to c2 with clj implementation?

[lynaghk]

@Santei A simple axis helper fn exists in the SVG namespace: https://github.com/lynaghk/c2/blob/master/src/cljx/c2/svg.cljx#L74

it'll work on both clojure and clojurescript.