Comments (17)
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.
from c2.
OK, thanks for the pointer to the demo!
from c2.
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
from c2.
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.
from c2.
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)
from c2.
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.
from c2.
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...
from c2.
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
- Having Singult interpret numeric values on style properties as pixel lengths, or
- Doing interpolation on C2's scales so you can say
:range ["0px", "500px"]
and have it output the appropriate string.
Any thoughts?
from c2.
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?
from c2.
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 = )
from c2.
Alternatively, what about :range [0, 100, :px]
?
from c2.
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]]))])
from c2.
@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
from c2.
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))))
from c2.
@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.
from c2.
Can you add axes to c2 with clj implementation?
from c2.
@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.
from c2.
Related Issues (20)
- Protocol for clj->js conversions. HOT 1
- No license to use HOT 2
- Unexpected null in singult when trying to bind! HOT 6
- Hiccup-style vectors only support 2 classes HOT 1
- Cross-browser "matchesSelector" functionality?
- hello-bars demo has doctype issues? HOT 1
- core.matrix support? HOT 3
- endless loop calling (c2.ticks/search [same-number same-number]) HOT 1
- Problem rendering SVG <image> in c2.util/bind! HOT 3
- Compilation error in C2 "0.2.3-SNAPSHOT" HOT 2
- it seems that the documentation link is broken HOT 2
- docs now link back to Keming Labs page HOT 2
- Event.on for multiple elements HOT 5
- Clamp scales
- Percentage scales
- seqable NodeLists HOT 11
- Colors on sunburst example are broken HOT 1
- C2 projects cannot compile with ClojureScript 2138 HOT 2
- cljs compilation errors HOT 5
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from c2.