in src/visual.ts [467:636]
public update(options: VisualUpdateOptions) {
let dataView: DataView = this.dataView = options.dataViews && options.dataViews[0];
if (!dataView ||
!dataView.metadata ||
!dataView.metadata.columns) {
this.displayRootElement(false);
return;
}
let data: IDualKpiData = this.data = DualKpi.converter(this.dataView, this.localizationManager, this.colorHelper);
let availableHeight = options.viewport.height < 90 ? 90 : options.viewport.height,
availableWidth = options.viewport.width < 220 ? 220 : options.viewport.width,
chartWidth = availableWidth,
chartSpaceBetween, chartTitleSpace, iconOffset;
let size: DualKpiSize = DualKpi.getChartSize({ height: availableHeight, width: availableWidth });
switch (size) {
case DualKpiSize.large:
this.size = DualKpiSize.large;
this.sizeCssClass = "large";
iconOffset = -1;
chartSpaceBetween = 25;
chartTitleSpace = 46;
break;
case DualKpiSize.medium:
this.size = DualKpiSize.medium;
this.sizeCssClass = "medium";
iconOffset = -8;
chartSpaceBetween = 20;
chartTitleSpace = 30;
break;
case DualKpiSize.small:
this.size = DualKpiSize.small;
this.sizeCssClass = "small";
iconOffset = -6;
chartSpaceBetween = 15;
chartTitleSpace = 22;
break;
case DualKpiSize.extrasmall:
this.size = DualKpiSize.extrasmall;
this.sizeCssClass = "extra-small";
iconOffset = -8;
chartSpaceBetween = 12;
chartTitleSpace = 20;
break;
case DualKpiSize.supersmall:
this.size = DualKpiSize.supersmall;
this.sizeCssClass = "super-small";
iconOffset = -8;
chartSpaceBetween = 10;
chartTitleSpace = 18;
break;
default:
break;
}
this.titleSize = DualKpi.DefaultTitleSizes[this.sizeCssClass];
this.updateViewport({
width: availableWidth,
height: availableHeight
});
let chartHeight = (availableHeight - (chartSpaceBetween + chartTitleSpace)) / 2;
let topChartAxisConfig = { min: data.settings.dualKpiAxis.topChartAxisMin, max: data.settings.dualKpiAxis.topChartAxisMax };
let bottomChartAxisConfig = { min: data.settings.dualKpiAxis.bottomChartAxisMin, max: data.settings.dualKpiAxis.bottomChartAxisMax };
let topChartPercentChangeStartPoint = DualKpi.getPercentChangeStartPoint(data.topValues, data.topPercentCalcDate);
let bottomChartPercentChangeStartPoint = DualKpi.getPercentChangeStartPoint(data.bottomValues, data.bottomPercentCalcDate);
const wasDataSetRendered: boolean = data.topValues.length > 0 || data.bottomValues.length > 0;
this.displayRootElement(wasDataSetRendered);
if (data.settings.dualKpiProperties.topChartShow) {
this.chartGroupTop.group.classed(DualKpi.INVISIBLE, false);
this.chartGroupTop.hoverDataContainer.container.classed(DualKpi.INVISIBLE, true);
if (data.topValues.length > 0) {
this.drawChart({
element: this.chartGroupTop,
abbreviateValue: data.settings.dualKpiProperties.abbreviateValues,
abbreviateHoverValue: data.settings.dualKpiProperties.abbreviateHoverValues,
hoverDataPercentType: data.settings.dualKpiProperties.hoverDataPercentType,
axisConfig: topChartAxisConfig,
chartData: data.topValues,
chartTitle: data.topChartName,
chartType: data.settings.dualKpiChart.topChartType,
height: data.settings.dualKpiProperties.bottomChartShow && data.settings.dualKpiProperties.topChartShow ? chartHeight : chartHeight * 2 + chartSpaceBetween,
percentChangeStartPoint: topChartPercentChangeStartPoint,
showZeroLine: data.settings.dualKpiAxis.topChartZeroLine,
tooltipText: data.settings.dualKpiProperties.topChartToolTipText,
top: 0,
valueAsPercent: data.topValueAsPercent,
width: chartWidth,
position: DualKpiChartPositionType["top"],
showTextOverlay: data.settings.dualKpiValues.show,
showDefaultTextOverlay: !data.settings.dualKpiValues.showKpiValuesTop,
defaultTextOverlay: data.settings.dualKpiValues.topChartDefaultKpiValue,
fontSizeAutoFormattingTitle: data.settings.dualKpiTitleFormatting.fontSizeAutoFormatting,
fontSizeAutoFormattingValue: data.settings.dualKpiValueFormatting.fontSizeAutoFormatting,
titleFontSize: data.settings.dualKpiTitleFormatting.fontSize,
valueFontSize: data.settings.dualKpiValueFormatting.fontSize,
isBoldTitle: data.settings.dualKpiTitleFormatting.isBold,
isBoldValue: data.settings.dualKpiValueFormatting.isBold,
isItalicTitle: data.settings.dualKpiTitleFormatting.isItalic,
isItalicValue: data.settings.dualKpiValueFormatting.isItalic,
isUpperCasedTitle: data.settings.dualKpiTitleFormatting.upperCase,
fontFamilyTitle: data.settings.dualKpiTitleFormatting.fontFamily,
fontFamilyValue: data.settings.dualKpiValueFormatting.fontFamily
});
}
} else {
this.chartGroupTop.group.classed(DualKpi.INVISIBLE, true);
this.chartGroupTop.hoverDataContainer.container.classed(DualKpi.INVISIBLE, true);
}
if (data.settings.dualKpiProperties.bottomChartShow) {
// draw bottom chart
this.chartGroupBottom.group.classed(DualKpi.INVISIBLE, false);
this.chartGroupBottom.hoverDataContainer.container.classed(DualKpi.INVISIBLE, true);
if (data.bottomValues.length > 0) {
this.drawChart({
element: this.chartGroupBottom,
abbreviateValue: data.settings.dualKpiProperties.abbreviateValues,
abbreviateHoverValue: data.settings.dualKpiProperties.abbreviateHoverValues,
hoverDataPercentType: data.settings.dualKpiProperties.hoverDataPercentType,
axisConfig: bottomChartAxisConfig,
chartData: data.bottomValues,
chartTitle: data.bottomChartName,
chartType: data.settings.dualKpiChart.bottomChartType,
height: data.settings.dualKpiProperties.bottomChartShow && data.settings.dualKpiProperties.topChartShow ? chartHeight : chartHeight * 2 + chartSpaceBetween,
percentChangeStartPoint: bottomChartPercentChangeStartPoint,
showZeroLine: data.settings.dualKpiAxis.bottomChartZeroLine,
tooltipText: data.settings.dualKpiProperties.bottomChartToolTipText,
top: data.settings.dualKpiProperties.bottomChartShow && data.settings.dualKpiProperties.topChartShow ? chartHeight + chartSpaceBetween : 0,
valueAsPercent: data.bottomValueAsPercent,
width: chartWidth,
position: DualKpiChartPositionType["bottom"],
showTextOverlay: data.settings.dualKpiValues.show,
showDefaultTextOverlay: !data.settings.dualKpiValues.showKpiValuesBottom,
defaultTextOverlay: data.settings.dualKpiValues.bottomChartDefaultKpiValue,
fontSizeAutoFormattingTitle: data.settings.dualKpiTitleFormatting.fontSizeAutoFormatting,
fontSizeAutoFormattingValue: data.settings.dualKpiValueFormatting.fontSizeAutoFormatting,
titleFontSize: data.settings.dualKpiTitleFormatting.fontSize,
valueFontSize: data.settings.dualKpiValueFormatting.fontSize,
isBoldTitle: data.settings.dualKpiTitleFormatting.isBold,
isBoldValue: data.settings.dualKpiValueFormatting.isBold,
isItalicTitle: data.settings.dualKpiTitleFormatting.isItalic,
isItalicValue: data.settings.dualKpiValueFormatting.isItalic,
isUpperCasedTitle: data.settings.dualKpiTitleFormatting.upperCase,
fontFamilyTitle: data.settings.dualKpiTitleFormatting.fontFamily,
fontFamilyValue: data.settings.dualKpiValueFormatting.fontFamily
});
}
} else {
this.chartGroupBottom.group.classed(DualKpi.INVISIBLE, true);
this.chartGroupBottom.hoverDataContainer.container.classed(DualKpi.INVISIBLE, true);
}
if (wasDataSetRendered) {
this.drawBottomContainer(chartWidth, chartHeight, chartTitleSpace, chartSpaceBetween, iconOffset);
}
}