public update(options: VisualUpdateOptions) {
let dataView: DataView = options.dataViews[0];
let width: number = options.viewport.width;
let height: number = options.viewport.height;
this.svg.attr("width", width);
this.svg.attr("height", height);
this.visualSettings = VisualSettings.parse<VisualSettings>(dataView);
this.visualSettings.rect.rectThickness = Math.max(0, this.visualSettings.rect.rectThickness);
this.visualSettings.rect.rectThickness = Math.min(100, this.visualSettings.rect.rectThickness);
this.rect
.style("fill", this.visualSettings.rect.rectColor)
//.style("stroke", "red")
.style("stroke-width", this.visualSettings.rect.rectThickness)
.attr("x", 10)
.attr("y", 1)
.attr("width", width - 20)
.attr("height", height - 20)
let fontSizetextLabel: number = Math.min(width, height) / 7;
function green_and_red(val: number😞 string {
let my_color = 'red';
if (val > 1) {
my_color = 'green'
}
else {
my_color = 'red'
}
return my_color
}
function razryad(val: number, onPersent: boolean😞 string {
let zhach: string = "";
if (val > 0) {
zhach = '▲'
}
else {
zhach = '▼'
}
let mym: number = 0;
let per: string = ""
if (onPersent === false) {
mym = 1
}
else {
mym = 100
per = '%'
}
let two_val = val * mym
let new_v = zhach + " " + (two_val).toString().replace(/\B(?=(\d{3})+(?!\d))/g, " ") + per
return new_v
}
function razryadn(val: number😞 string {
let x: number = Math.round(val)
let new_v = val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, " ")
var parts = val.toString().split(".");
parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, " ");
return parts.join(".")
}
let my_arry = dataView.categorical.values.map(values)
this.textValue_sub
.text(razryadn(my_arry[1][1]))
//.text('ValueCenter')
.attr("x", "50%")
.attr("y", "30%")
.attr("dy", "0.35em")
.attr("text-anchor", "middle")
//.attr('fill', green_and_red(my_arry[0][1]))
.style("font-size", this.visualSettings.rect.sizeCenterValue + "px");
this.textValue_sub_left
.text(razryad(my_arry[0][1], this.visualSettings.rect.QQQRightValuewww))
//.text('ValueLeft')
.attr("x", "30%")
.attr("y", "70%")
.attr("dy", "0.35em")
.attr("format", "")
.attr("text-anchor", "middle")
.attr('fill', green_and_red(my_arry[0][1]))
.style("font-size", this.visualSettings.rect.sizeLeftValue + "px");
this.textValue_sub_right
.text("к факту")
.attr("x", "70%")
.attr("y", "70%")
.attr("dy", "0.35em")
.attr("text-anchor", "middle")
.style("font-size", this.visualSettings.rect.sizeRightValue + "px");
this.tooltipServiceWrapper.addTooltip(this.barContainer.selectAll('.bar'),
(tooltipEvent: TooltipEventArgs<number>) => Visual.getTooltipData(tooltipEvent.data),
(tooltipEvent: TooltipEventArgs<number>) => tooltipEvent.data[0]);
}
private static getTooltipData(value: any😞 any {
return [{
displayName: value.category,
value: value.value.toString(),
color: value.color
}];
}
}
