Forum Discussion
Cannot successfully implement color picker on visual using table mapping
- 8 years ago
Please this code snippet below to fix the issues with color picker:
private static getSelectionIds( dataView: DataView, host: IVisualHost ): powerbi.visuals.ISelectionId[] { const queryName: string = dataView.table.columns[0].queryName; return dataView.table.identity.map((identity: DataViewScopeIdentity) => { const categoryColumn: DataViewCategoryColumn = { source: { queryName, displayName: null }, values: null, identity: [identity] }; return host.createSelectionIdBuilder() .withCategory(categoryColumn, 0) .withMeasure(queryName) .createSelectionId(); }); }Ignat Vilesov,
Software Engineer
Microsoft Power BI Custom Visuals
- 8 years ago
Alright thank you !
For those with the same situation, I find a workaround.
You should use
d3.scale.ordinal().domain(data.map(d => d.dimension).range(color_library)
With color_library an array of color your users can pick ( I take 10 for my chart but you can use 3 or 20...).
Not the best solution, I have to admit but it works for now until I find something else :)
I didn't receive the code. Could you please share tocde by using One Drive?
Ignat Vilesov,
Software Engineer
Microsoft Power BI Custom Visuals
Please this code snippet below to fix the issues with color picker:
private static getSelectionIds(
dataView: DataView,
host: IVisualHost
): powerbi.visuals.ISelectionId[] {
const queryName: string = dataView.table.columns[0].queryName;
return dataView.table.identity.map((identity: DataViewScopeIdentity) => {
const categoryColumn: DataViewCategoryColumn = {
source: {
queryName,
displayName: null
},
values: null,
identity: [identity]
};
return host.createSelectionIdBuilder()
.withCategory(categoryColumn, 0)
.withMeasure(queryName)
.createSelectionId();
});
}Ignat Vilesov,
Software Engineer
Microsoft Power BI Custom Visuals
- aristogeiton8 years agoFrequent Visitor
Excellent! It now works! Thanks very much for this!
- anandsoftweb8 years agoAdvocate V
I am having same issue color picker does not save in custom visual stack bar.
what I have to do? do you have any example of custom visual.
Please help me.
Thanks,
Anand
- anandsoftweb8 years agoAdvocate V
Below is the code snipet from my actual visual file
let colorPalette: IColorPalette = hst.colorPalette; if (this.ColumnValues.length > 0 ) { for(var i=0; i < this.ColumnValues.length; i++) { let defaultColor: Fill = { solid: { color: colorPalette.getColor(this.ColumnValues[i] + '').value } }; var objn = { FieldName: this.ColumnValues[i] }; objn["Color"] = Visual.getCategoricalObjectValue<Fill>(this.ColumnValues[i], i, 'colorSelector', 'fill', defaultColor).solid.color, objn["LegendLabel"] = this.ColumnValues[i]; objn["selectionId"] = Visual.getSelectionIds(element.dataViews[0],hst) this.stackOriginalFields.push(objn); } } *ColumnValues = Two Different Value of Catehoryenumerate Instance
public enumerateObjectInstances(options: EnumerateVisualObjectInstancesOptions): VisualObjectInstanceEnumeration { let objectName = options.objectName; let objectEnumeration: VisualObjectInstance[] = []; var c = this.stackOriginalFields; switch(objectName) { case 'colorSelector': for (let barDataPoint of c) { objectEnumeration.push({ objectName: objectName, displayName: barDataPoint.LegendLabel , properties: { fill: { solid: { Color: barDataPoint.Color } } }, //selector: barDataPoint.LegendLabel //selector:barDataPoint.selectionId.getSelector() //Its not working selector:barDataPoint.selectionId }); } break; }; return objectEnumeration; }Get Value
public static getCategoricalObjectValue<T>(category: DataViewCategoryColumn, index: number, objectName: string, propertyName: string, defaultValue: T): T { let categoryObjects = category.objects; if (categoryObjects) { let categoryObject: DataViewObject = categoryObjects[index]; if (categoryObject) { let object = categoryObject[objectName]; if (object) { console.log("object"+object) let property: T = <T>object[propertyName]; if (property !== undefined) { return property; } } } } return defaultValue; } private static getSelectionIds( dataView: DataView, host: IVisualHost ): powerbi.visuals.ISelectionId[] { const queryName: string = dataView.table.columns[0].queryName; return dataView.table.identity.map((identity: DataViewScopeIdentity) => { const categoryColumn: DataViewCategoryColumn = { source: { queryName, displayName: null }, values: null, identity: [identity] }; return host.createSelectionIdBuilder() .withCategory(categoryColumn, 0) .withMeasure(queryName) .createSelectionId(); }); }*In Capabilities.json file
dataViewMappings": [ { "table": { "rows": { "select": [ { "for": { "in": "Columnvalues" }} ] } } } ]Thanks In Advance
- ChrisWilliams7 years agoAdvocate II
I know this is an old post, but I wanted to post a modification to this (I'm using the SDK 2.1.0).
In cases where my table was empty, I was seeing an exception in my visual. I traced it and found that dataView.table.identity can be undefined, which would lead to an exception in this method. A simple fix is to perform a check for undefined.
private getSelectionIds(dataView: DataView, host: IVisualHost): ISelectionId[] { if (dataView.table.identity === undefined){ return []; } const queryName: string = dataView.table.columns[0].queryName; return dataView.table.identity.map((identity: data.DataRepetitionSelector) => { const categoryColumn: DataViewCategoryColumn = { source: { queryName, displayName: null }, values: null, identity: [identity] }; return host.createSelectionIdBuilder() .withCategory(categoryColumn, 0) .withMeasure(queryName) .createSelectionId(); }); }- v-viig7 years agoCommunity Champion
Can you share whole source code for deeper debugging?
Ignat Vilesov,
Software Engineer
Microsoft Power BI Custom Visuals