Fork me on GitHub
David Pham12:12:06

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


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 for example)

šŸ‘ 3