import { useLayoutEffect , useRef } from "react" ; import { barycentric , ternaryPlot } from "../../index" ; import type { Domains , TextAnchor , Barycentric , TernaryPlot , } from "../../types" ; interface TernaryDataPoint { a : number ; b : number ; c : number ; } interface UseTernaryPlotProps { radius : number ; labels : [ string , string , string ] ; domains : Domains ; tickTextAnchors : [ TextAnchor , TextAnchor , TextAnchor ] ; tickAngles : [ number , number , number ] ; tickSizes : [ number , number , number ] | number ; tickCounts : [ number , number , number ] | number ; gridLineCounts : [ number , number , number ] | number ; labelAngles : [ number , number , number ] ; labelOffsets : [ number , number , number ] | number ; } export function useTernaryPlot ( { radius = 300 , labels , domains , tickTextAnchors , tickAngles , tickCounts , tickSizes , gridLineCounts , labelAngles , labelOffsets , } ) { const nonZeroRadius = radius === 0 ? 200 : radius ; const barycentricRef = useRef < Barycentric > ( null ! ) ; const ternaryPlotRef = useRef < TernaryPlot > ( null ! ) ; function getBarycentric ( ) { if ( barycentricRef . current === null ) { barycentricRef . current = barycentric ( ) . a ( ( d ) => d . a ) . b ( ( d ) => d . b ) . c ( ( d ) => d . c ) ; } return barycentricRef . current ; } const ternaryProjection = getBarycentric ( ) ; function getTernaryPlot ( ) { if ( ternaryPlotRef . current === null ) { ternaryPlotRef . current = ternaryPlot ( ternaryProjection ) . radius ( nonZeroRadius ) ; } return ternaryPlotRef . current ; } const plot = getTernaryPlot ( ) ; plot . radius ( nonZeroRadius ) . domains ( domains ) . labels ( labels ) . tickAngles ( tickAngles ) . tickTextAnchors ( tickTextAnchors ) . labelOffsets ( tickCounts ) . tickSizes ( tickSizes ) . labelAngles ( labelAngles ) . labelOffsets ( labelOffsets ) . labelOffsets ( gridLineCounts ) ; return plot ; }