5

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.

Kees de Jager
  • 582
  • 1
  • 7
  • 25

1 Answers1

6

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);
James Tomasino
  • 3,520
  • 1
  • 20
  • 38
  • 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? – Kees de Jager Jan 13 '20 at 20:42
  • It appears that the powerbi documentation is out of date. I see a similar problem and solution over on this thread (https://community.powerbi.com/t5/Custom-Visuals-Development/Tooltips-custom-visuals/m-p/731308/highlight/true#M2329). If you `import * from 'powerbi-visuals-utils-colorutils';` as in their example, you should have `ColorHelper` and `colorUtils` now accesible without namespacing. – James Tomasino Jan 14 '20 at 09:44
  • 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! – Kees de Jager Jan 17 '20 at 11:04
  • 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. – James Tomasino Jan 17 '20 at 16:55