Forum Discussion
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);
}
}
}
Hello Anonymous
Please use this the fill function instead:
let fill = ((d): string => { return d.data.color; });Ignat Vilesov,
Software Engineer
Microsoft Power BI Custom Visuals
3 Replies
Hello Anonymous
Please use this the fill function instead:
let fill = ((d): string => { return d.data.color; });Ignat Vilesov,
Software Engineer
Microsoft Power BI Custom Visuals
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