Forum Discussion

Anonymous's avatar
Anonymous
Not applicable
7 years ago

R Custom Visual - Setting colours for each value in a field/column

I apologise if an answer to this has been posted previously - if it has I can't seem to locate it...   I'm writing an RHTML based custom visual (basically a bar plot that does grouping and stacking...
Need Help
dm-p's avatar
dm-p
Super User
7 years ago

Hi Anonymous,

The info is hard to find - the doc used to cover it pretty well but it's been squirreled-away in sample repos rather than being particulalry overt as to its theory.

I personally haven't done this for R visuals but I've just had a quick look at how they are created and it pretty much looks the same as for TypeScript.

The short verison is, you'll (likely) need to customise:

  • capabilities.json
  • visual.ts (specifically enumerateObjectInstances, and your code that maps your view model, or however you're managing mapping the dataView)
  • (possibly) settings.ts, depending on your requirements

It's probably easier if we can see the rest of your code, but we should be able to help get you there, particularly with respect to the R code you're adding in. Are you able to share a GitHub link or similar? Any sample data would also be useful, so that it's possible to replicate your setup and test before advising further. If you're not able to share publicly, feel free to PM details across.

Thanks!

Daniel

 

  • Anonymous's avatar
    Anonymous
    Not applicable
    7 years ago

    Hi Daniel,

    I don’t have a repository I can link to give you the code I’ve written so far (such as it is). I’m not overly familiar with TypeScript, so I’ll have to read up about that when I get a chance. The visual.ts hasn’t been modified from the structure given by the template, so enumerateObjectInstances looks like this:

        /**
     * This function gets called for each of the objects defined in the capabilities files and allows you to select which of the
     * objects and properties you want to expose to the users in the property pane.
     *
     */
    public enumerateObjectInstances(options: EnumerateVisualObjectInstancesOptions):
        VisualObjectInstance[] | VisualObjectInstanceEnumerationObject {
        return VisualSettings.enumerateObjectInstances(this.settings || VisualSettings.getDefault(), options);
    }

     

    As for the data, it’ll look something like this:

     

    columnGroups	overlayGroups	heights
A	Actual	15
B	Actual	10
C	Actual	30
D	Actual	40
E	Actual	35
A	Target	40
B	Target	70
C	Target	35
D	Target	90
E	Target	15

    The idea being that there’ll be 5 column groups (A – E), each with two columns (one for Actual and another for Target) with one column overlapping the other (by a variable amount). I’d like to be able to set colours for Actual and Target in this example. The plot itself is relatively easy to generate with R…

    I’ll follow up with the full capabilities.json file, and settings.ts.

    Thanks,

    Frank

     

    • Anonymous's avatar
      Anonymous
      Not applicable
      7 years ago

      capabilities.json:

      {
  "dataRoles": [
    {
      "displayName": "Column Groups",
	  "description": "Grouping to be used on the x-axis of the column chart.",
      "kind": "Grouping",
      "name": "columnGroups"
    },
    {
      "displayName": "Column Overlay Groups",
	  "description": "Within each value of Column Groups, the columns to overlay on each other.",
      "kind": "Grouping",
      "name": "overlayGroups"
    },
    {
      "displayName": "Stacking Groups",
	  "description": "Optional stacking of columns within Column and Overlay Groups.",
      "kind": "Grouping",
      "name": "stackingGroups"
    },
    {
      "displayName": "Heights",
	  "description": "Heights of each column.",
      "kind": "GroupingOrMeasure",
      "name": "heights"
    }
	
  ],
  "dataViewMappings": [
    {
	  "conditions": [
	    {
			"columnGroups": {
				"max": 1
			},
			"overlayGroups": {
				"max": 1
			},
			"stackingGroups": {
				"max": 1
			},
			"heights": {
				"max": 1
			}
		}
	  ],
      "scriptResult": {
        "dataInput": {
          "table": {
            "rows": {
              "select": [
                {
                  "for": {
                    "in": "columnGroups"
                  }
                },
                {
                  "for": {
                    "in": "overlayGroups"
                  }
                },
                {
                  "for": {
                    "in": "stackingGroups"
                  }
                },
                {
                  "for": {
                    "in": "heights"
                  }
                }
              ],
              "dataReductionAlgorithm": {
                "top": {}
              }
            }
          }
        },
		"script": {
          "scriptProviderDefault": "R",
          "scriptOutputType": "html",
          "source": {
            "objectName": "rcv_script",
            "propertyName": "source"
          },
          "provider": {
            "objectName": "rcv_script",
            "propertyName": "provider"
          }
        }
      }
    } 
 ],
  "objects": {
    "rcv_script": {
      "properties": {
        "provider": {
          "type": {
            "text": true
          }
        },
        "source": {
          "type": {
            "scripting": {
              "source": true
            }
          }
        }
      }
    },
	"settings_overlay_params": {
      "displayName": "Settings",
      "description": "Column overlay settings",
      "properties": {
        "alphaMin": {
          "displayName": "Alpha Bottom",
		  "description": "Alpha setting for bottom-most column",
          "type": {
            "numeric":  true
              }
            },
		"overlay": {
          "displayName": "Degree of overlay",
		  "description": "How much should columns overlay 0.0 = no overlay, 1.0 = completely overlay",
          "type": {
            "numeric":  true
              }
            },
        "alphaMax": {
          "displayName": "Alpha Top",
		  "description": "Alpha setting for top-most column",
          "type": {
            "numeric":  true
              }
            }
          }
        },
	"settings_datacolour_params": {
      "displayName": "Data Colours",
      "description": "Base colours for columns",
      "properties": {
        "fill": {
          "displayName": "Column colours",
          "description": "Specify a colour for each value in the overlay group",
          "type": {
            "fill": {
              "solid": {
                "color": true
              }
            }
          }
        }
	  }
	}
  },
   "suppressDefaultTitle": true
}
      • Anonymous's avatar
        Anonymous
        Not applicable
        7 years ago

        settings.ts:

        "use strict";

import { dataViewObjectsParser } from "powerbi-visuals-utils-dataviewutils";
import DataViewObjectsParser = dataViewObjectsParser.DataViewObjectsParser;

export class VisualSettings extends DataViewObjectsParser {
      public settings_overlay_params: settings_overlay_params = new settings_overlay_params();
      public settings_datacolour_params: settings_datacolour_params = new settings_datacolour_params();
      }

    export class settings_overlay_params {
      public alphaMin: number = 0.4;   
      public alphaMax: number = 0.8;
	  public overlay: number = 0.2;
    }
	
    export class settings_datacolour_params {
      public columnColour: string = "orange";   
    }