SapUI5: Рисуем график (VizFrame)

Опубликовано автором

SapUI5 позволяет довольно гибко визуализировать какие-либо бизнес данные. В данном посте посмотрим на то, как нарисовать простой график, как динамически управлять количеством графиков и как кастомизировать всплывающую подсказку.

Пример, который мы будем рассматривать ниже, можно импортировать в свой WebIDE отсюда https://github.com/kannade/sapui5_viz.
В примере будем рисовать колонки (тип графика Stacked Column) с ценой молока:
sapui5 graph viz

Определим json модель для графика в manifest.json

Первое, что нам нужно — данные!
Опишем json модель в manifest.json, а сами данные будем брать из обычного json файла:

/sapui5_viz/blob/master/webapp/manifest.json
"sap.app": {
…
"dataSources": {	"graphData": {
		"uri": "model/json2.json",
		"type": "JSON"
	}
}
…
},
"sap.ui5": {
…
"models": {
	"graphDataMdl": {		"type": "sap.ui.model.json.JSONModel",
		"dataSource": "graphData"
	}
},
…
},
…

Кстати, просто так получить данные json модели (которая объявлена в manifest.json) в контроллере у Вас не получится, надо использовать следующую конструкцию:

/sapui5_viz/blob/master/webapp/controller/Main.controller.js
onInit: function () {
	//получим компонент
	var oComp = this.getOwnerComponent();
	//получим модель
	var oMdl = oComp.getModel("graphDataMdl");
	//как получить содержимое модели, когда она определена через manifest
	oMdl.attachRequestCompleted(function () {
		console.log(oMdl.getData());
	});…

Опишем график с определенными свойствами

Перейдем в представление и опишем график (VizFrame):

/sapui5_viz/blob/master/webapp/view/Main.view.xml
<viz:vizframe id="idVizFrame" uiconfig="{applicationSet:'fiori'}" height="100%" width="100%" viztype="stacked_column" class="graphPpl" legendvisible="false">
	<viz:dataset>
		<viz .data:flatteneddataset="" data="/milk">
			</viz><viz .data:dimensions="">
				</viz><viz .data:dimensiondefinition="" name="Период" value="{Date}"></viz>
			<viz .data:measures="">
				</viz><viz .data:measuredefinition="" name="Revenue" value="{Revenue}"></viz>
				<viz .data:measuredefinition="" name="Cost" value="{Cost}"></viz>
	</viz:dataset>
	<viz:feeds>
		<!--<viz.feeds:FeedItem uid="valueAxis" type="Measure" values="Revenue,Cost"/>-->
		<viz .feeds:feeditem="" uid="categoryAxis" type="Dimension" values="Период"></viz>
	</viz:feeds>
</viz:vizframe>

выше мы указали, что брать данные надо из {/milk} (саму модель мы установим позже), указали, что для оси абсцисс (ось X) мы берем данные из {Date}, а данные для столбцов мы будем брать из {Revenue} и {Cost}:
milk
У представления есть свой контроллер, в котором мы получим график и установим для него ряд свойств (список всех свойств можно получить в документации):

/sapui5_viz/blob/master/webapp/controller/Main.controller.js
var oVizFrame = this.oVizFrame = this.getView().byId("idVizFrame");
	oVizFrame.setVizProperties({
		plotArea: {
		…

так же установим на график модель, динамически добавим графики и цвета:

/sapui5_viz/blob/master/webapp/controller/Main.controller.js
//получим компонент
var oComp = this.getOwnerComponent();
//получим модель
var oMdl = oComp.getModel("graphDataMdl");
…
//установим модель
oVizFrame.setModel(oMdl);
//Динамически добавим графики и цвета
var aValuesFeed = [];
var aColorPalette = [];
aValuesFeed.push("Revenue");
aColorPalette.push("#ff002a");
aValuesFeed.push("Cost");
aColorPalette.push("#019125");
var feed = new sap.viz.ui5.controls.common.feeds.FeedItem({
	'uid': "valueAxis",
	'type': "Measure",
	'values': aValuesFeed
});
//добавляем оси
oVizFrame.addFeed(feed);
//добавляем цвета для осей
oVizFrame.setVizProperties({
	plotArea: {
		colorPalette: aColorPalette
	}
});

Кастомизируем (персонализируем) всплывающую подсказку (tooltip)

уберем задержку перед появлением всплывающей подсказки и покажем всплывающую подсказку при наведении мыши:

/sapui5_viz/blob/master/webapp/controller/Main.controller.js
//Всплывающее окошко по нажатию на элемент графика
// var oPopOver = this.getView().byId("idPopOver");
// oPopOver.connect(oVizFrame.getVizUid());
// oPopOver.setFormatString(formatPattern.STANDARDFLOAT);
//Всплывающее окошко при наведении мышки на элемент графика
var oTooltip = new sap.viz.ui5.controls.VizTooltip({});
oTooltip.connect(oVizFrame.getVizUid());
oTooltip.setFormatString(formatPattern.STANDARDFLOAT);
//Уберем задержку перед появлением тултипа:
sap.viz.api.env.globalSettings({
	disableTooltipTimer: true
});

Вернемся к заданию свойств для графика и посмотрим на свойство tooltip, в котором мы можем переопределить две функции preRender и postRender:

/sapui5_viz/blob/master/webapp/controller/Main.controller.js
preRender: function (tooltipDomNode) {
	// Вызывается перед всплывающей подсказкой.
	// tooltipDomNode.append('div').text('nickcode.ru').style({
	// 	'font-weight': 'bold'
	// });
},
postRender: function (tooltipDomNode) {
	//Вызывается после всплывающей подсказки.
	//Определим тип переменной со свойствами группировки
	var oType = new sap.ui.model.type.Integer({
		//maxFractionDigits: 0,
		groupingEnabled: true,
		groupingSeparator: ","
		//decimalSeparator: "."
	});
	//Получим содержимое дива с классом v-body-measure-value
	var rev = tooltipDomNode.selectAll('.v-body-measure-value').text();
	var amt = Number(rev);
	//Применим формат для числа
	var oNumFormat = sap.ui.core.format.NumberFormat.getFloatInstance(oType);
	var amount = oNumFormat.format(parseInt(amt, 10));
	//Определим тип "Цена" со свойствами
	var oCurrency = new sap.ui.model.type.Currency({
		showMeasure: true,
		maxFractionDigits: 0,
		minFractionDigits: 0,
		groupingEnabled: true,
		groupingSeparator: ' '
	});
	//применим тип "Цена" для содержимого дива
	var money = oCurrency.formatValue([amt, "₽"], "string");
	//Вставим значение в div
	//tooltipDomNode.selectAll('.v-body-measure-value').html(amount);
	tooltipDomNode.selectAll('.v-body-measure-value').html(money);
	//Напишем во всплывающем сообщении слово milk и применим к нему css стиль
	var message = "milk";
	tooltipDomNode.append('div').text(message).style({
		'font-family': 'Arial',
		'font-size': '13px',
		'font-weight': 'bold',
		'white-space': 'normal',
		'text-overflow': 'ellipsis',
		'overflow': 'hidden',
		'padding-left': '0px',
		'padding-top': '6px',
		'color': '#000',
		'max-width': '10rem'
	});
	//tooltipDomNode.selectAll('.v-body-measure-value').attr('style', 'color: red;');
}

Выглядит это так:
tooltip sapui5
На этом все, простейший график со всплывающей подсказкой и динамическим формированием «осей» нарисован!
Больше примеров в документации https://sapui5.hana.ondemand.com/#/entity/sap.viz.ui5.controls.VizFrame.