Sankey-diagram PowerBI custom visual with color nodes and ordering

Question

The sankey diagram of PowerBI has many possibilities but as you can read on the github site there are some important limitations. The first is that it is not possible to color the nodes. In addition, it is also not possible to change the order of the nodes (both source and destination).

Attached is an example PowerBI file in which a sankey is displayed. In this file is indicated which colors the nodes should have and what the order of the nodes should be.

The best solution is of course to use PowerBI to indicate the colors as in this example with the links. But probably it is easier to indicate the colors of the nodes (names) in the code itself with a hard value this would also be a nice alternative. Same holds for the ordering of the nodes

I looked at the colorscale function of d3 to link it to fillcolor. But I got an error message that the string values cannot be linked to colorscale.

The Github page with the code can be found here: https://github.com/microsoft/powerbi-visuals-sankey

I think this line of code should change:

nodeFillColor = this.colorHelper.isHighContrast ? this.colorHelper.getThemeColor() : this.colorPalette.getColor(index.toString()).value;
console.log(nodeFillColor);
nodeStrokeColor = this.colorHelper.getHighContrastColor("foreground", nodeFillColor);

The colors are now based on a theme color. Hopefully it is possible to link the nodes (name) to a color instead of a theme.

Hopefully you can help me and other users of the Sankey.

Yukyukaghir

Answer 1

It looks like if you need to inject some 3rd party color values (whether hex or some other format) you can use the ColorHelper instance at play in the code you highlighted to "cheat". The following example can be found in the powerbi documentation here: https://github.com/microsoft/powerbi-visuals-utils-colorutils/blob/master/docs/api/colorUtils.md#calculatehighlightcolor

import ColorUtility = powerbi.extensibility.utils.color;

let yellow = "#FFFF00",
    yellowRGB = ColorUtility.parseColorString(yellow);

ColorUtility.calculateHighlightColor(yellowRGB, 0.8, 0.2);

// returns: '#CCCC00'

Ultimately I think it comes down to this one helper method:

ColorUtility.parseColorString('<colorhex>')

I don't know exactly the best way to plug it in to what you're doing, but you might try generating a random hex color and plugging it in to see what comes out the other side.

// thanks Paul Irish: https://www.paulirish.com/2009/random-hex-color-code-snippets/
let randcolor = '#'+Math.floor(Math.random()*16777215).toString(16)
// Then to replace the example code you had in your question...
nodeFillColor = this.colorHelper.parseColorString(randcolor)
nodeStrokeColor = this.colorHelper.getHighContrastColor("foreground", nodeFillColor);

Rosettarosette

Hi James, Thanks for your reply. If i try to import "powerbi.extensibility.utils.color" i get a error "Namespace 'powerbi.extensibility' has no exported member 'utils'.ts(2694)". I tried to update the package by "npm install powerbi-visuals-utils-colorutils --save" but this doesn't work. Do you know what the problem is? – Yukyukaghir

It appears that the powerbi documentation is out of date. I see a similar problem and solution over on this thread (community.powerbi.com/t5/Custom-Visuals-Development/…). If you import * from 'powerbi-visuals-utils-colorutils'; as in their example, you should have ColorHelper and colorUtils now accesible without namespacing. – Rosettarosette

Thanks again. I adjusted line 102 to "import { ColorHelper, parseColorString } from "powerbi-visuals-utils-colorutils";" The problem is that now "this.colorHelper.parseColorString(randcolor)" is depending on ColorHelper and not colorutils. That is why i get the error "Property 'parseColorString' does not exist on type 'ColorHelper'". I try to change it to "this.colorutils.parseColorString(randcolor)". But now i get the error that "Property 'colorutils' does not exist on type 'SankeyDiagram'". Do you know a solution for this? Thanks again for all your help! – Yukyukaghir

If you import it to import {ColorHelper, colorUtils} from 'powerbi-visuals-utils-colorutils' then you can reference colorUtils without the this keyword. parseColorString should be a method of that class, from what I can see. – Rosettarosette