-
Notifications
You must be signed in to change notification settings - Fork 47
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
First example on web page looks broken #22
Comments
Good catch; I'll make a note to fix that and otherwise update the website. Thanks for raising the issue---I'm going to leave it open until I can close it with some links to updated content. |
OK, thanks for the pointer to the demo! |
Just a nag: what should the Cheers |
It depends where you're rendering. |
Okay, maybe this is not the right place for a chat, but... I use ClojureScript C2; what do I need to do? (using |
[: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. |
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 |
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., https://github.com/lynaghk/c2/blob/master/src/cljs/c2/dom.cljs#L120 but right now the Singult compiler is bare bones.
Any thoughts? |
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? |
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. |
Alternatively, what about |
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]]))]) |
@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. |
Here's a quick-hack-substitute for the previous style function:
|
@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. |
Can you add axes to c2 with clj implementation? |
@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. |
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
The text was updated successfully, but these errors were encountered: