How to use the @nivo/colors.useInheritedColor function in @nivo/colors

To help you get started, we’ve selected a few @nivo/colors examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github plouc / nivo / packages / network / src / Network.js View on Github external
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, {
github plouc / nivo / packages / chord / src / ChordCanvas.js View on Github external
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
github plouc / nivo / packages / swarmplot / src / SwarmPlotCanvas.js View on Github external
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)
github plouc / nivo / packages / line / src / hooks.js View on Github external
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({
github plouc / nivo / packages / bump / src / area-bump / hooks.js View on Github external
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]
github plouc / nivo / packages / chord / src / Chord.js View on Github external
})

    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,
github plouc / nivo / packages / radar / src / RadarShapes.js View on Github external
({
        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 (
github plouc / nivo / packages / swarmplot / src / SwarmPlot.js View on Github external
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: (
github plouc / nivo / packages / chord / src / ChordCanvas.js View on Github external
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')
github plouc / nivo / packages / line / src / Line.js View on Github external
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]
    )