Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add Images as Background as option #2500

Closed
nico-limo opened this issue Jan 26, 2024 · 1 comment
Closed

Add Images as Background as option #2500

nico-limo opened this issue Jan 26, 2024 · 1 comment
Labels

Comments

@nico-limo
Copy link

nico-limo commented Jan 26, 2024

Is your feature request related to a problem? Please describe.
I am doing a treechart that works good but is require that use an especific images as background and not the colors that is provided. I tried to update the nodeComponent but if I touch that one, it break all the logics and features from the treeMap. Is a way to add the Images?

Describe the solution you'd like
Get the img as background

image

Additional context
Here is some code I have

    <ResponsiveTreeMapHtml
      data={{ name: "MEMES", children: memesTop }}
      identity="name"
      value="value"
      leavesOnly={true}
      valueFormat=".02s"
      margin={{ top: 10, right: 10, bottom: 10, left: 10 }}
      labelSkipSize={40}
      tile="binary"
      orientLabel={false}
      borderWidth={1}
      enableParentLabel={false}
      labelTextColor="transparent"
      nodeOpacity={1}
      // nodeComponent={({ animatedProps, node }) => {
      //   const { img } = node.data
      //   const { width, height } = animatedProps
      //   return (
      //     <div
      //       style={{
      //         width: animatedProps.width,
      //         height: animatedProps.height,
      //       }}
      //     >
      //       <Image src={img} width={400} height={400} alt="asd" />
      //     </div>
      //   )
      // }}
      tooltip={({ node }) => {
        const { name, value } = node.data as TokenType

        return (
          <div style={{ color: "#ffffff" }} className="rounded-xl bg-black p-4">
            <Text tag="h6">{name}:</Text>

            <Amount
              textStart="Market Cap:"
              type="price"
              amount={value.toString()}
            />
          </div>
        )
      }}
    />```
@plouc
Copy link
Owner

plouc commented May 1, 2024

@nico-limo, I don't really plan to add this feature by default atm, but that's something you can do by overriding the default node component, you need to replicate what's implemented in the default component, please have a look at https://github.com/plouc/nivo/blob/master/packages/treemap/src/TreeMapHtmlNode.tsx. Also, I'd recommend to define your custom components outside your render function.

@plouc plouc closed this as completed May 1, 2024
@plouc plouc added 🌳 treemap @nivo/treemap package 🆕 feature request labels May 1, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants