Thanks,
replaced
module powerbi.extensibility.visual {
"use strict";
interface VisualViewModel {
dataPoints: VisualDataPoint[];
dataLegends: VisualDataLegend[];
dataMax: number;
settings: VisualSettings;
};
interface VisualDataPoint {
category: string;
valueName: string;
value: PrimitiveValue;
sumHeight: PrimitiveValue;
conventions: string;
color: string;
selectionId: powerbi.visuals.ISelectionId;
};
interface VisualDataLegend {
valueName: string;
index: PrimitiveValue;
conventions: string;
color: string;
selectionId: powerbi.visuals.ISelectionId;
};
interface VisualSettings {
enableAxis: {
show: boolean;
};
generalView: {
opacity: number;
};
legend: {
show: boolean;
};
/*
colorSelector: {
defaultColor: string[];
};*/
}
function visualTransform(options: VisualUpdateOptions, host: IVisualHost): VisualViewModel {
let dataViews = options.dataViews;
let defaultSettings: VisualSettings = {
enableAxis: {
show: false
},
generalView: {
opacity: 100
},
legend: {
show: true
}/*,
colorSelector: {
defaultColor: []
}*/
};
let viewModel: VisualViewModel = {
dataPoints: [],
dataLegends: [],
dataMax: 0,
settings: <VisualSettings>{}
};
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;
let VisualDataPoints: VisualDataPoint[] = [];
let VisualDataLegends: VisualDataLegend[] = [];
let dataMax: number;
let colorPalette: IColorPalette = host.colorPalette;
let objects = dataViews[0].metadata.objects;
let VisualSettings: VisualSettings = {
enableAxis: {
show: getValue<boolean>(objects, 'enableAxis', 'show', defaultSettings.enableAxis.show),
},
generalView: {
opacity: getValue<number>(objects, 'generalView', 'opacity', defaultSettings.generalView.opacity),
},
legend: {
show: getValue<boolean>(objects, 'legend', 'show', defaultSettings.legend.show),
}/*,
colorSelector: {
defaultColor: []
}*/
};
dataValue.sort(function(a,b) {return d3.ascending(a.source.groupName+'', b.source.groupName+'');});
for (let k = 0; k < dataValue.length; k++) {
//VisualSettings.colorSelector.defaultColor[k] = colorPalette.getColor(dataValue[k].source.groupName + '').value;
VisualDataLegends.push({
valueName: dataValue[k].source.groupName + '',
index: k,
conventions: 'dataValue[k].source.groupName',
color: colorPalette.getColor(dataValue[k].source.groupName+'').value,
selectionId: host.createSelectionIdBuilder().withMeasure(dataValue[k].source.groupName+'').createSelectionId()
});
}
dataMax=0;
dataValue.sort(function(a,b) {return d3.descending(a.source.groupName+'', b.source.groupName+'');});
for (let i = 0; i < category.values.length; i++) {
let sumHeight=0;
for (let k = 0; k < dataValue.length; k++) {
sumHeight += <number>dataValue[k].values[i];
VisualDataPoints.push({
category: category.values[i] + '',
valueName: dataValue[k].source.groupName + '',
value: dataValue[k].values[i],
sumHeight: sumHeight,
conventions: 'dataValue[k].source.groupName',
color: colorPalette.getColor(dataValue[k].source.groupName+'').value,
selectionId: host.createSelectionIdBuilder().withMeasure(dataValue[k].source.groupName+'').createSelectionId()
});
}
dataMax = sumHeight > dataMax ? sumHeight : dataMax;
}
return {
dataPoints: VisualDataPoints,
dataLegends: VisualDataLegends,
dataMax: dataMax,
settings: VisualSettings,
};
}
export class Visual implements IVisual {
private svg: d3.Selection<SVGElement>;
private host: IVisualHost;
private selectionManager: ISelectionManager;
private VisualContainer: d3.Selection<SVGElement>;
private barContainer: d3.Selection<SVGElement>;
private xAxis: d3.Selection<SVGElement>;
private labelDataLegends: VisualDataLegend[];
private VisualSettings: VisualSettings;
private tooltipServiceWrapper: ITooltipServiceWrapper;
private locale: string;
private title: d3.Selection<SVGElement>;
private legend: d3.Selection<SVGElement>;
static Config = {
xScalePadding: 0.2,
solidOpacity: 1,
transparentOpacity: 0.5,
margins: {
top: 30,
right: 160,
bottom: 30,
left: 0,
},
xAxisFontMultiplier: 0.04,
};
constructor(options: VisualConstructorOptions) {
this.host = options.host;
this.selectionManager = options.host.createSelectionManager();
this.tooltipServiceWrapper = createTooltipServiceWrapper(this.host.tooltipService, options.element);
let svg = this.svg = d3.select(options.element).append('svg').classed('Visual', true);
this.locale = options.host.locale;
this.barContainer = svg.append('g').classed('barContainer', true);
this.xAxis = svg.append('g').classed('xAxis', true);
this.title = svg.append("g").classed("textLabel", true);
this.legend = svg.append("g").classed("legend", true);
}
public update(options: VisualUpdateOptions, title: string) {
let viewModel: VisualViewModel = visualTransform(options, this.host);
let settings = this.VisualSettings = viewModel.settings;
this.labelDataLegends = viewModel.dataLegends;
let width = options.viewport.width;
let height = options.viewport.height;
let margins = Visual.Config.margins;
this.svg.attr({
width: width,
height: height
});
if (settings.enableAxis.show) { height -= margins.bottom; }
if (settings.legend.show) { width -= margins.right; }
height -= margins.top;
width -= margins.left;
this.xAxis.style({
'font-size': d3.min([height, width]) * Visual.Config.xAxisFontMultiplier,
});
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, 0.2);
let xAxis = d3.svg.axis()
.scale(xScale)
.orient('bottom');
this.xAxis.attr('transform', 'translate('+margins.left+', ' + (height+margins.top) + ')')
.call(xAxis);
// This must be an anonymous function instead of a lambda because
// d3 uses 'this' as the reference to the element that was clicked.
let selectionManager = this.selectionManager;
let allowInteractions = this.host.allowInteractions;
let legend = this.legend.selectAll('.legend').data(viewModel.dataLegends);
//bars (with series)
let barsSeries = this.barContainer.selectAll('.bar').data(viewModel.dataPoints);
barsSeries.enter().append('rect').classed('bar', true).attr({
width: xScale.rangeBand(),
height: d => height - yScale(<number>d.value),
x: d => xScale(d.category)+margins.left,
y: d => yScale(<number>d.sumHeight)+margins.top,
fill: d => d.color,
'fill-opacity': viewModel.settings.generalView.opacity / 100
});
//console.log(viewModel.dataPoints);
barsSeries.on('click', function(d) {
// Allow selection only if the visual is rendered in a view that supports interactivity (e.g. Report)
if (allowInteractions) {
selectionManager.select(d.selectionId).then((ids: ISelectionId[]) => {
barsSeries.attr({
'fill-opacity': ids.length > 0 ? Visual.Config.transparentOpacity : Visual.Config.solidOpacity
});
d3.select(this).attr({
'fill-opacity': Visual.Config.solidOpacity
});
if (settings.legend.show) {
legend.attr({
'fill-opacity': Visual.Config.solidOpacity
});
}
});
(<Event>d3.event).stopPropagation();
}
});
//Legends
if (settings.legend.show) {
legend.enter().append('circle').classed('legend', true).attr({
r: 4,
cx: width+margins.right-8,
cy: d => <number>d.index * 14+margins.top-4,
fill: d => d.color
});
legend.enter().append('text').classed('legend', true).attr({
x: width+margins.right-20,
y: d => <number>d.index * 14+margins.top,
'font-size': 12,
fill: d => '#777',
'text-anchor': 'end'
}).text(d => d.valueName);
legend.on('click', function(bar) {
// Allow selection only if the visual is rendered in a view that supports interactivity (e.g. Report)
if (allowInteractions) {
selectionManager.select(bar.selectionId).then((ids: ISelectionId[]) => {
barsSeries.attr({
'fill-opacity': ids.length > 0 ? Visual.Config.transparentOpacity : Visual.Config.solidOpacity
});
legend.attr({ //hide all legend
'fill-opacity': ids.length > 0 ? Visual.Config.transparentOpacity : Visual.Config.solidOpacity
});
barsSeries.attr({ //show active bars
'fill-opacity': d => ids[0]['key'] == d.selectionId['key'] ? Visual.Config.solidOpacity : Visual.Config.transparentOpacity
});
d3.select(this).attr({ //show active legend
'fill-opacity': Visual.Config.solidOpacity
});
});
(<Event>d3.event).stopPropagation();
}
});
}
this.tooltipServiceWrapper.addTooltip(this.barContainer.selectAll('.bar'),
(tooltipEvent: TooltipEventArgs<number>) => this.getTooltipData(tooltipEvent.data),
(tooltipEvent: TooltipEventArgs<number>) => null);
// Title
let fontSizeValue: number = Math.min(width, height) / 5;
let fontSizeLabel: number = fontSizeValue / 4;
this.title.append('text').attr({
x: "50%",
y: 16,
fill: '#000',
"text-anchor": "middle"
}).text('Гистограмма с накоплением');
barsSeries.exit().remove();
legend.exit().remove();
}
public enumerateObjectInstances(options: EnumerateVisualObjectInstancesOptions): VisualObjectInstanceEnumeration {
let objectName = options.objectName;
let objectEnumeration: VisualObjectInstance[] = [];
switch (objectName) {
case 'enableAxis':
objectEnumeration.push({
objectName: objectName,
properties: {
show: this.VisualSettings.enableAxis.show,
},
selector: null
});
break;
case 'colorSelector':
for (let labelDataLegend of this.labelDataLegends) {
objectEnumeration.push({
objectName: objectName,
displayName: labelDataLegend.valueName,
properties: {
fill: {
solid: {
color: labelDataLegend.color
}
}
},
selector: labelDataLegend.selectionId.getSelector()
});
}
break;
case 'generalView':
objectEnumeration.push({
objectName: objectName,
properties: {
opacity: this.VisualSettings.generalView.opacity,
},
validValues: {
opacity: {
numberRange: {
min: 10,
max: 100
}
}
},
selector: null
});
break;
case 'legend':
objectEnumeration.push({
objectName: objectName,
displayName: 'show',
properties: {
show: this.VisualSettings.legend.show
},
selector: null
});
break;
};
return objectEnumeration;
}
public destroy(): void {
// Perform any cleanup tasks here
}
private getTooltipData(value: any): VisualTooltipDataItem[] {
return [{
displayName: value.valueName,
value: value.value.toString(),
color: value.color
}];
}
}
}May be i don't understand something, but, for example, this.legend = svg.append("g").classed("legend", true); - created "layer", then let legend = this.legend.selectAll('.legend').data(viewModel.dataLegends); - put some prepared elements with class "legend", fill with data, then put some elements based at previous prepared elements legend.enter().append('circle').classed('legend', true), legend.enter().append('text').classed('legend', true) ?
So, we have some elements with data and visualization. Next, i have legend.on('click', function(bar) that doing something at clicking at "legends". Why it working with last added legend.enter().append('text') only , but not working at both (legend.enter().append('circle') and legend.enter().append('text')). What i understand wrong?
