Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
nodeBorderColor,
linkThickness,
linkColor,
} = props
const { margin, innerWidth, innerHeight, outerWidth, outerHeight } = useDimensions(
width,
height,
partialMargin
)
const { animate } = useMotionConfig()
const theme = useTheme()
const getColor = useNodeColor(nodeColor)
const getBorderColor = useInheritedColor(nodeBorderColor, theme)
const getLinkThickness = useLinkThickness(linkThickness)
const getLinkColor = useInheritedColor(linkColor, theme)
const [nodes, links] = useNetwork({
nodes: rawNodes,
links: rawLinks,
linkDistance,
repulsivity,
distanceMin,
distanceMax,
iterations,
center: [innerWidth / 2, innerHeight / 2],
})
const layerById = {
links: React.createElement(animate === true ? AnimatedLinks : StaticLinks, {
colors,
})
const { currentArc, setCurrentArc, getArcOpacity, getRibbonOpacity } = useChordSelection({
arcs,
arcOpacity,
arcHoverOpacity,
arcHoverOthersOpacity,
ribbons,
ribbonOpacity,
ribbonHoverOpacity,
ribbonHoverOthersOpacity,
})
const theme = useTheme()
const getLabelTextColor = useInheritedColor(labelTextColor, theme)
const getArcBorderColor = useInheritedColor(arcBorderColor, theme)
const getRibbonBorderColor = useInheritedColor(ribbonBorderColor, theme)
const layerContext = useChordLayerContext({
center,
radius,
arcs,
arcGenerator,
ribbons,
ribbonGenerator,
})
useEffect(() => {
canvasEl.current.width = outerWidth * pixelRatio
canvasEl.current.height = outerHeight * pixelRatio
gap,
colors,
colorBy,
forceStrength,
simulationIterations,
})
const boundAnnotations = useSwarmPlotAnnotations(nodes, annotations)
const computedAnnotations = useComputedAnnotations({
annotations: boundAnnotations,
innerWidth,
innerHeight,
})
const getBorderWidth = useBorderWidth(borderWidth)
const getBorderColor = useInheritedColor(borderColor, theme)
const { delaunay, voronoi } = useVoronoiMesh({
points: nodes,
width: innerWidth,
height: innerHeight,
debug: debugMesh,
})
useEffect(() => {
canvasEl.current.width = outerWidth * pixelRatio
canvasEl.current.height = outerHeight * pixelRatio
const ctx = canvasEl.current.getContext('2d')
ctx.scale(pixelRatio, pixelRatio)
yFormat,
width,
height,
colors = LineDefaultProps.colors,
curve = LineDefaultProps.curve,
areaBaselineValue = LineDefaultProps.areaBaselineValue,
pointColor = LineDefaultProps.pointColor,
pointBorderColor = LineDefaultProps.pointBorderColor,
enableSlices = LineDefaultProps.enableSlicesTooltip,
}) => {
const formatX = useValueFormatter(xFormat)
const formatY = useValueFormatter(yFormat)
const getColor = useOrdinalColorScale(colors, 'id')
const theme = useTheme()
const getPointColor = useInheritedColor(pointColor, theme)
const getPointBorderColor = useInheritedColor(pointBorderColor, theme)
const { xScale, yScale, series: rawSeries } = useMemo(
() => computeXYScalesForSeries(data, xScaleSpec, yScaleSpec, width, height),
[data, xScaleSpec, yScaleSpec, width, height]
)
const series = useMemo(
() =>
rawSeries.map(serie => ({
...serie,
color: getColor(serie),
})),
[rawSeries, getColor]
)
const points = usePoints({
export const useSeriesLabels = ({ series, position, padding, color }) => {
const theme = useTheme()
const getColor = useInheritedColor(color, theme)
return useMemo(() => {
let textAnchor
let signedPadding
if (position === 'start') {
textAnchor = 'end'
signedPadding = padding * -1
} else {
textAnchor = 'start'
signedPadding = padding
}
return series.map(serie => {
const point =
position === 'start' ? serie.points[0] : serie.points[serie.points.length - 1]
})
const { setCurrentArc, setCurrentRibbon, getArcOpacity, getRibbonOpacity } = useChordSelection({
arcs,
arcOpacity,
arcHoverOpacity,
arcHoverOthersOpacity,
ribbons,
ribbonOpacity,
ribbonHoverOpacity,
ribbonHoverOthersOpacity,
})
const theme = useTheme()
const getLabelTextColor = useInheritedColor(labelTextColor, theme)
const getArcBorderColor = useInheritedColor(arcBorderColor, theme)
const getRibbonBorderColor = useInheritedColor(ribbonBorderColor, theme)
const layerContext = useChordLayerContext({
center,
radius,
arcs,
arcGenerator,
ribbons,
ribbonGenerator,
})
if (radius <= 0) return null
const legendData = arcs.map(arc => ({
id: arc.id,
label: arc.label,
({
data,
keys,
colorByKey,
radiusScale,
angleStep,
curveInterpolator,
borderWidth,
borderColor,
fillOpacity,
blendMode,
}) => {
const theme = useTheme()
const { animate, springConfig } = useMotionConfig()
const getBorderColor = useInheritedColor(borderColor, theme)
const lineGenerator = useMemo(() => {
return lineRadial()
.radius(d => radiusScale(d))
.angle((d, i) => i * angleStep)
.curve(curveInterpolator)
}, [radiusScale, angleStep, curveInterpolator])
if (animate !== true) {
return (
label,
value,
valueFormat,
valueScale,
size,
spacing,
layout,
gap,
colors,
colorBy,
forceStrength,
simulationIterations,
})
const getBorderWidth = useBorderWidth(borderWidth)
const getBorderColor = useInheritedColor(borderColor, theme)
const layerById = {
grid: (
),
axes: (
const { currentArc, setCurrentArc, getArcOpacity, getRibbonOpacity } = useChordSelection({
arcs,
arcOpacity,
arcHoverOpacity,
arcHoverOthersOpacity,
ribbons,
ribbonOpacity,
ribbonHoverOpacity,
ribbonHoverOthersOpacity,
})
const theme = useTheme()
const getLabelTextColor = useInheritedColor(labelTextColor, theme)
const getArcBorderColor = useInheritedColor(arcBorderColor, theme)
const getRibbonBorderColor = useInheritedColor(ribbonBorderColor, theme)
const layerContext = useChordLayerContext({
center,
radius,
arcs,
arcGenerator,
ribbons,
ribbonGenerator,
})
useEffect(() => {
canvasEl.current.width = outerWidth * pixelRatio
canvasEl.current.height = outerHeight * pixelRatio
const ctx = canvasEl.current.getContext('2d')
xScale: xScaleSpec,
xFormat,
yScale: yScaleSpec,
yFormat,
width: innerWidth,
height: innerHeight,
colors,
curve,
areaBaselineValue,
pointColor,
pointBorderColor,
enableSlices,
})
const theme = useTheme()
const getPointColor = useInheritedColor(pointColor, theme)
const getPointBorderColor = useInheritedColor(pointBorderColor, theme)
const [currentPoint, setCurrentPoint] = useState(null)
const [currentSlice, setCurrentSlice] = useState(null)
const legendData = useMemo(
() =>
series
.map(line => ({
id: line.id,
label: line.id,
color: line.color,
}))
.reverse(),
[series]
)