I'm trying to translate this example in clojurescript (https://uber.github.io/react-vis/documentation/series-reference/custom-svg-series):
const myData = [
{x: 1, y: 10, customComponent: 'circle', size: 10},
{x: 1.7, y: 12, size: 20, style: {stroke: 'red', fill: 'orange'}},
{x: 2, y: 5},
{x: 3, y: 15},
{x: 2.5, y: 7, customComponent: (row, positionInPixels) => {
return (
<g className="inner-inner-component">
<circle cx="0" cy="0" r={10} fill="green"/>
<text x={0} y={0}>
<tspan x="0" y="0">{`x: ${positionInPixels.x}`}</tspan>
<tspan x="0" y="1em">{`y: ${positionInPixels.y}`}</tspan>
</text>
</g>
);
}}
]
I started with this:
[:> rvis/CustomSVGSeries {:data [{:x 300 :y 4000 :size 30
:customComponent (fn [row position-in-pixels]
[:g
[:text {:x 0 :y 0}
[:tspan {:x 0 :y 0} "HidrĂ³geno"]]])}]}]
But I get this error:
The above error occurred in the <g> component:
in g
in g
in AbstractSeries
in svg
in div
in XYPlot
in div
in FlexibleXYPlot (created by lopezsolerluis.annie_web.line_chart)
in div (created by lopezsolerluis.annie_web.line_chart)
in lopezsolerluis.annie_web.line_chart (created by lopezsolerluis.annie_web.app_scaffold)
in div (created by lopezsolerluis.annie_web.app_scaffold)
in lopezsolerluis.annie_web.app_scaffold
Consider adding an error boundary to your tree to customize error handling behavior.
and
Uncaught Error: Objects are not valid as a React child (found: object with keys {ns, name, fqn, _hash, cljs$lang$protocol_mask$partition0$, cljs$lang$protocol_mask$partition1$}). If you meant to render a collection of children, use an array instead.
in g
in g
in AbstractSeries
in svg
in div
in XYPlot
in div
in FlexibleXYPlot (created by lopezsolerluis.annie_web.line_chart)
in div (created by lopezsolerluis.annie_web.line_chart)
in lopezsolerluis.annie_web.line_chart (created by lopezsolerluis.annie_web.app_scaffold)
in div (created by lopezsolerluis.annie_web.app_scaffold)
in lopezsolerluis.annie_web.app_scaffold
It's driving me mad...
Wrap [:g ...]
in your :customComponent
with reagent.core/as-element
.
:customComponent
is expected to be a function that returns a React element. JSX, when transpiled, turns its <...>
into React elements. But for a Hiccup vector you have to do it manually by calling reagent.core/as-element
.