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.