Hi,
I am new, i made a simple bar chart that the user can put a category and a measure. Now I would like to show the Axis information, can anyone help?
This is where I got by myself:
capabilities.json
{
"dataRoles": [
{
"displayName": "Category Data",
"name": "category",
"kind": "Grouping"
},
{
"displayName": "Measure Data",
"name": "measure",
"kind": "Measure"
}
],
"objects": {
"newbar": {
"displayName": "New Bar",
"properties": {
"barColor": {
"displayName": "Color",
"description": "The fill color of the new bar.",
"type": {
"fill": {
"solid": {
"color": true
}
}
}
}
}
}
},
"dataViewMappings": [
{
"conditions": [
{
"category": {
"max": 1
},
"measure": {
"max": 1
}
}
],
"categorical": {
"categories": {
"for": {
"in": "category"
},
"dataReductionAlgorithm": {
"top": {}
}
},
"values": {
"select": [
{
"bind": {
"to": "measure"
}
}
]
}
}
}
]
}
settings.ts
module powerbi.extensibility.visual {
"use strict";
import DataViewObjectsParser = powerbi.extensibility.utils.dataview.DataViewObjectsParser;
export class barSettings {
public barColor: string = "black";
}
export class VisualSettings extends DataViewObjectsParser {
public newbar: barSettings = new barSettings();
}
visual.ts
module powerbi.extensibility.visual {
interface BarChartViewModel {
dataPoints: BarChartDataPoint[];
dataMax: number;
};
interface BarChartDataPoint {
value: number;
category: string;
};
function visualTransform(options: VisualUpdateOptions, host: IVisualHost): BarChartViewModel {
let dataViews = options.dataViews;
let viewModel: BarChartViewModel = {
dataPoints: [],
dataMax: 0
};
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 barChartDataPoints: BarChartDataPoint[] = [];
let dataMax: number;
let colorPalette: IColorPalette = host.colorPalette;
for (let i = 0, len = Math.max(category.values.length, dataValue.values.length); i < len; i++) {
barChartDataPoints.push({
category: <string>category.values[i],
value: <number>dataValue.values[i]
});
}
dataMax = <number>dataValue.maxLocal;
return {
dataPoints: barChartDataPoints,
dataMax: dataMax
};
}
export class Visual implements IVisual {
private svg: d3.Selection<SVGElement>;
private host: IVisualHost;
private barChartContainer: d3.Selection<SVGElement>;
private barContainer: d3.Selection<SVGElement>;
private bars: d3.Selection<SVGElement>;
private visualSettings: VisualSettings;
static Config = {
xScalePadding: 0.1,
};
constructor(options: VisualConstructorOptions) {
console.log('Visual constructor', options);
this.host = options.host;
let svg = this.svg = d3.select(options.element)
.append('svg')
.classed('barChart', true);
this.barContainer = svg.append('g')
.classed('barContainer', true);
}
public enumerateObjectInstances(options: EnumerateVisualObjectInstancesOptions): VisualObjectInstanceEnumeration {
const settings: VisualSettings = this.visualSettings ||
VisualSettings.getDefault() as VisualSettings;
return VisualSettings.enumerateObjectInstances(settings, options);
}
public update(options: VisualUpdateOptions) {
let viewModel: BarChartViewModel = visualTransform(options, this.host);
let dataView: DataView = options.dataViews[0]
this.visualSettings = VisualSettings.parse<VisualSettings>(dataView);
let width = options.viewport.width;
let height = options.viewport.height;
this.svg.attr({
width: width,
height: height
});
let yScale = d3.scale.linear()
.domain([0, viewModel.dataMax])
.range([height, 0]);
let xScale = d3.scale.ordinal()
.domain(viewModel.dataPoints.map(d => d.category))
.rangeRoundBands([0, width], Visual.Config.xScalePadding);
let bars = this.barContainer.selectAll('.bar').data(viewModel.dataPoints);
bars.enter()
.append('rect')
.classed('bar', true);
bars.attr({
width: xScale.rangeBand(),
height: d => height - yScale(d.value),
y: d => yScale(d.value),
x: d => xScale(d.category),
fill: d => this.visualSettings.newbar.barColor
//d.color
});
bars.exit()
.remove();
}
public destroy(): void {
//TODO: Perform any cleanup tasks here
//Perform any cleanup tasks here
}
}
}
