reagent

A minimalistic ClojureScript interface to React.js http://reagent-project.github.io/
2020-12-26T12:00:06.432700Z

Moreover, I believe that could lead cross plateform UI template [since they are pure data].

GGfpc 2020-12-26T18:32:52.434100Z

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"}]))

2020-12-27T12:57:07.439400Z

cljs-bean is great! I like this library too https://github.com/applied-science/js-interop

p-himik 2020-12-26T18:34:57.434200Z

In JS, it's called "template literal". It's just string substitution, which in CLJS can be done as:

(str (.toFixed (* percent 100) 0) "%")

GGfpc 2020-12-26T19:02:02.434400Z

Thanks! Also does reagent have any way of destructuring js objects?

p-himik 2020-12-26T19:06:08.434600Z

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)

👍 1