Moreover, I believe that could lead cross plateform UI template [since they are pure data].
Hello, I'm trying to convert this to cljs
const renderCustomizedLabel = ({ cx, cy, midAngle, innerRadius, outerRadius, percent, index }) => {
const radius = innerRadius + (outerRadius - innerRadius) * 0.5;
const x = cx + radius * Math.cos(-midAngle * RADIAN);
const y = cy + radius * Math.sin(-midAngle * RADIAN);
return (
<text x={x} y={y} fill="white" textAnchor={x > cx ? 'start' : 'end'} dominantBaseline="central">
{`${(percent * 100).toFixed(0)}%`}
</text>
);
};
And I got this far but I'm struggling to convert the part between braces in the content of text
(defn render-custom-label
[{cx :cx
cy :cy
midAngle :midAngle
innerRadius :innerRadius
outerRadius :outerRadius
percent :percent
index :index}]
(let [radian (/ Math/PI 180)
radius (* 0.5 (+ innerRadius (- outerRadius innerRadius)))
x (+ cx (* radius (Math/cos (* (- midAngle) radian))))
y (+ cy (* radius (Math/sin (* (- midAngle) radian))))]
[:text {:x x
:y y
:fill "white"
:textAnchor (if (> x cx) "start" "end")
:dominantBaseline "central"}]))
cljs-bean
is great! I like this library too https://github.com/applied-science/js-interop
In JS, it's called "template literal". It's just string substitution, which in CLJS can be done as:
(str (.toFixed (* percent 100) 0) "%")
Thanks! Also does reagent have any way of destructuring js objects?
Destructuring is a pretty low level thing compared to the level at which Reagent operates, so no. The correct level would be ClojureScript itself. But alas it doesn't have anything built-in for that as well. However, there are multiple libraries (including Google Closure library that's built into ClojureScript) that allow you to get a JS object's fields or wrap it into something that does support destructuring (like https://github.com/mfikes/cljs-bean for example)