Animated Sunburst can not take SVG Pattern

Hi all

Similar to this #721 , when I tried to applied the SVG pattern to the Sunburst, it shows the black box like the following:

However, when I remove animation from Sunburst, it works perfectly!

Just wondering if this is caused by the animated Sunburst? I think I met a similar issue for the animated bar chart as well.

[martin-luo]

Thanks Wattengerger! That’s a quite good point. I modified the code to try to replicate the problem, but it looks well for me now. I’ll dig into it tomorrow and let you know the results!

[martin-luo]

I think I found out the reason why it does not work with animation: instead of get d.color in getColor in Sunburst, I add some logics in to find out the Id of the SVG pattern.

The function of SVG pattern generation looks like this:

 private __getSVGPatternID = (
    showPattern: boolean,
    legendColor: string = "#ffffff"
  ): string => (showPattern ? `sunburst-legend-${legendColor}` : "");

It work well on static Sunburst because the value we get from d.color is a hex code, for example, #52BAAB. However, in animated Sunburst, the color we get changed to RGB which is rgb(82, 186, 171).

My pattern ID generation function did not recognize the changes and keep treating the color as hex code, and the SVG with that ID does not exist, that is why the second ring in the animated sunburst turns to black.

Hopefully this helps.

Regards

After updating my id generation logic. the animation works well!

  private __getSVGPatternID = (
    showPattern: boolean,
    legendColor: string = "#ffffff"
  ): string => {
    if (!showPattern) {
      return "";
    }
    let hexColor: string = legendColor;
    const isHex: boolean =
      hexColor.length > 1 &&
      hexColor.slice(1).length === 6 &&
      !isNaN(parseInt(hexColor.slice(1), 16));

    if (!isHex) {
      hexColor = hexColor
        .split("(")[1]
        .split(")")[0]
        .split(",")
        .map(color => {
          const hex = parseInt(color).toString(16);
          return hex.length === 1 ? "0" + hex : hex;
        })
        .join("");
      hexColor = `#${hexColor.toUpperCase()}`;
    }

    return `sunburst-legend-${hexColor}`;
  };

Just a suggestion, should we make it more clear in the documentation that when use animation, the color representation changed?

Kind Regards

References:

• https://stackoverflow.com/questions/5623838/rgb-to-hex-and-hex-to-rgb