cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
vichus
Helper V
Helper V

Giving color using IcolorPalette

I have created a pie chart visual by following the tutorial .I'm looking to give it color using the IcolorPalette interface.I'm following the same steps as the tutorial,but it seems to be not working. Can someone help?

Here's my code :

module powerbi.extensibility.visual {
"use strict";

interface Data
{
quantity: number;
category: string;
color:string;
}

interface PieChartArc {
datapoints:Data[];
}

function visualTransform(options:VisualUpdateOptions,host:IVisualHost) : PieChartArc
{
let dataViews=options.dataViews;
let viewModel:PieChartArc=
{
datapoints:[]
};

if (!dataViews
|| !dataViews[0]
|| !dataViews[0].categorical
|| !dataViews[0].categorical.categories
|| !dataViews[0].categorical.categories[0].source
|| !dataViews[0].categorical.values)
return viewModel;

let categorical=dataViews[0].categorical;
let category=categorical.categories[0];
let dataValue=categorical.values[0];

let pieChartData:Data[]=[];
let colorPalette:IColorPalette=host.colorPalette;
// let colorPalette: IColorPalette = createColorPalette(host.colors).reset();

for(let i=0;i<Math.max(category.values.length,dataValue.values.length);i++)
{
pieChartData.push({
quantity:<number>dataValue.values[i],
category:<string>category.values[i],
color:colorPalette.getColor(<string>category.values[i]).value
});
console.log(pieChartData[i].color);

}
return {
datapoints: pieChartData
};
}

export class PieChart implements IVisual {
private target: HTMLElement;
private settings: VisualSettings;
private textNode: Text;
private pieChartContainer: d3.Selection<SVGElement>;
private arc: any;
private host: IVisualHost;
private svg: d3.Selection<SVGElement>;
private g: any;
private pie: any;
private color: string;

constructor(options: VisualConstructorOptions) {
console.log('Visual constructor', options);
 
this.target = options.element;
this.host=options.host;
let svg=this.svg=d3.select(options.element)
.append('svg')
.classed("pieChart",true)
;
this.pieChartContainer=svg.append('g').classed('pieChartContainer',true);//.attr('transform','translate('+100+',' +100+')');
}


public update(options: VisualUpdateOptions) {
let viewModel: PieChartArc = visualTransform(options, this.host);
let width=options.viewport.width;
let height=options.viewport.height;
let radius=Math.min(width,height)/2;
this.svg.attr({
width: width-20,
height: height-20,
 
});
//let colourValues = d3.scale.category20c();
this.arc=d3.svg.arc()
.innerRadius(0)
.outerRadius(radius-20);
this.pie = d3.layout.pie<Data>().value((d: Data):number => d.quantity);
let fill = ((d: Data):string=> d.color);
let tf = (d: Data) => `translate(${this.arc.centroid(d)})`;
let text = d => d.data.category;
this.svg.append('g');
// .attr('transform', 'translate(' +100 + ',' + 100 + ')');
let da=viewModel.datapoints;
this.g=this.svg.selectAll('.arc')
.data(this.pie(viewModel.datapoints))
.enter()
.append('g')
.attr('class', 'arc')
.data(this.pie(viewModel.datapoints))
// .attr("fill",fill)
;

this.g.append('path')
.attr('d', this.arc)
.attr('fill',fill)
//.style("stroke","black")
.attr("stroke-width","0.8")
/* .on("mouseover",d=>
{
 
d3.select(d)
.attr('fill','blue')
.style('opacity','0.6')
.attr('d',this.arc)
.style("stroke","black")
.style("stroke-width","3");
 
this.color=d.getAttribute('fill');

})
 
.on("mouseout",d=>
{
d3.select(d)
.attr('fill',colourValues(this.color))
.style("opacity","1")
.attr('d',this.arc)
.style("stroke-width","0.8");
 
 
})*/.append("svg:title");
//.html(d=>'<p>Quantity :'+d=>d. + '</p>');
this.g.append('text').attr('transform', tf).text(text).attr('fill',"white");
}


private static parseSettings(dataView: DataView): VisualSettings {
return VisualSettings.parse(dataView) as VisualSettings;
}

/**
* 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);
}
}
}
1 ACCEPTED SOLUTION
v-viig
Community Champion
Community Champion

Hello @vichus

 

Please use this the fill function instead:

let fill = ((d): string => {
    return d.data.color;
});

Ignat Vilesov,

Software Engineer

 

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

View solution in original post

3 REPLIES 3
v-viig
Community Champion
Community Champion

Hello @vichus

 

Please use this the fill function instead:

let fill = ((d): string => {
    return d.data.color;
});

Ignat Vilesov,

Software Engineer

 

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

View solution in original post

Thanks bro,it worked.
Could you please explain why it worked?
Thanks again.

v-viig
Community Champion
Community Champion

D3's pie layout keeps the original data in the data property.

This is why that works.

 

Ignat Vilesov,

Software Engineer

 

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

Helpful resources

Announcements
PBI User Groups

Welcome to the User Group Public Preview

Check out new user group experience and if you are a leader please create your group!

MBAS on Demand

Microsoft Business Applications Summit sessions

On-demand access to all the great content presented by the product teams and community members! #MSBizAppsSummit #CommunityRocks

MBAS Attendee Badge

Claim Your Badge & Digital Swag!

Check out how to claim yours today!

secondImage

Are You Ready?

Test your skills now with the Cloud Skills Challenge.

Top Solution Authors
Top Kudoed Authors