Hello, I am trying to develop a visual for power bi in the form of a pie chart. Problem is i couldnt find a toutorial that teaches so and the ones I could find are using syntax and outdated d3 versions. I saw one made by user "@dm-p" and tried to copy his code. It works but now i couldn't figure out how to expand it, add data from my power bi dataset or how can i manipulate it. Any help would be greatly appreciated.
Source code is as follows
'use strict';
import 'core-js/stable';
import './../style/visual.less';
import powerbi from 'powerbi-visuals-api';
import VisualConstructorOptions = powerbi.extensibility.visual.VisualConstructorOptions;
import VisualUpdateOptions = powerbi.extensibility.visual.VisualUpdateOptions;
import IVisual = powerbi.extensibility.visual.IVisual;
import EnumerateVisualObjectInstancesOptions = powerbi.EnumerateVisualObjectInstancesOptions;
import VisualObjectInstance = powerbi.VisualObjectInstance;
import DataView = powerbi.DataView;
import VisualObjectInstanceEnumerationObject = powerbi.VisualObjectInstanceEnumerationObject;
import { VisualSettings } from './settings';
import * as d3 from 'd3';
export class Visual implements IVisual {
[x: string]: any;
private svg: d3.Selection<any, any, any, any>;
private visualSettings: VisualSettings;
constructor(options: VisualConstructorOptions) {
console.log('Visual constructor', options);
this.svg = d3
.select(options.element)
.append('svg')
.classed('pieChart', true);
}
public update(options: VisualUpdateOptions) {
let dataView: DataView = options.dataViews[0];
this.visualSettings = VisualSettings.parse<VisualSettings>(dataView);
console.log('Visual update', options);
console.log('Removing elements...');
this.svg.selectAll('*').remove();
console.log('Resolving dimensions...');
let width = options.viewport.width,
height = options.viewport.height,
radius = Math.min(width, height) / 2;
console.log('Setting and appending SVG elements...');
this.svg
.attr('width', width)
.attr('height', height);
let container = this.svg
.append('g')
.attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')');
interface IData {
category: string;
value: number;
color: string;
}
console.log('Assigning data...');
let data: IData[] = [
{ category: 'a', value: 9, color: 'red' },
{ category: 'b', value: 20, color: 'blue' },
{ category: 'c', value: 30, color: 'green'},
{ category: 'd', value: 8, color: 'yellow' },
{ category: 'e', value: 12, color: 'orange' }
];
console.log('Creating pie function...');
let pie = d3.pie<IData>()
.value((d) => d.value);
console.log('Drawing chart...');
container
.selectAll('*')
.data(pie(data))
.enter()
.append('path')
.attr('d', d3.arc<d3.PieArcDatum<IData>>()
.innerRadius(0)
.outerRadius(radius)
)
.attr('fill', (d) => d.data.color)
.attr('stroke', 'black')
.style('stroke-width', '2px')
.style('opacity', 0.7);
console.log('Rendered!');
}
private static parseSettings(dataView: DataView😞 VisualSettings {
return VisualSettings.parse(dataView) as VisualSettings;
}
public enumerateObjectInstances(options: EnumerateVisualObjectInstancesOptions😞 VisualObjectInstance[] | VisualObjectInstanceEnumerationObject {
return VisualSettings.enumerateObjectInstances(this.settings || VisualSettings.getDefault(), options);
}
}
And this is what it looks like:
Any help is greatly appreciated
2 ACCEPTED SOLUTIONS
