@openui5/sap.ui.mdc 1.97.1 → 1.100.0

package/src/sap/ui/mdc/chart/ChartTypeButton.js

@@ -4,10 +4,13 @@
  * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
  */
 sap.ui.define([
-	"sap/m/OverflowToolbarButton", "sap/m/ButtonRenderer", "sap/ui/base/ManagedObjectObserver", "sap/ui/core/library"
-], function(OverflowToolbarButton, ButtonRenderer, ManagedObjectObserver, CoreLibrary) {
+	"sap/m/OverflowToolbarButton", "sap/m/ButtonRenderer", "sap/ui/base/ManagedObjectObserver", "sap/ui/core/library", "sap/m/library"
+], function(OverflowToolbarButton, ButtonRenderer, ManagedObjectObserver, CoreLibrary, mobileLibrary) {
 	"use strict";
 
+	// shortcut for sap.m.PlacementType
+	var PlacementType = mobileLibrary.PlacementType;
+
 	var HasPopup = CoreLibrary.aria.HasPopup;
 	var ResponsivePopover, List, Bar, SearchField, StandardListItem, InvisibleText, Device, oRb;
 
@@ -15,29 +18,45 @@ sap.ui.define([
 		metadata: {
 			library: "sap.ui.mdc"
 		},
-		constructor: function(oChart) {
+		constructor: function(oMDCChart) {
 
-			this.oChart = oChart;
+			if (!oMDCChart) {
+				OverflowToolbarButton.apply(this);
+				return;
+			}
 
+			this.oMDCChartModel = oMDCChart.getManagedObjectModel();
 			var mSettings = {
 				type: "Transparent",
 				press: function(oEvent) {
-					this.displayChartTypes(oEvent.getSource(), oChart);
+					this.displayChartTypes(oEvent.getSource(), oMDCChart);
 				}.bind(this),
-				id: oChart.getId() + "-btnChartType",
-				icon: '{$chart>/getTypeInfo/icon}',
-				tooltip: '{$chart>/getTypeInfo/text}',
-				text: '{$chart>/getTypeInfo/text}',
+				id: oMDCChart.getId() + "-btnChartType",
+				icon: '{$chart>/getChartTypeInfo/icon}',
+				tooltip: '{$chart>/getChartTypeInfo/text}',
+				text: '{$chart>/getChartTypeInfo/text}',
 				ariaHasPopup: HasPopup.ListBox
 			};
-
+			this.oMDCChart = oMDCChart;
 			OverflowToolbarButton.apply(this, [
 				mSettings
 			]);
+			this.setModel(this.oMDCChartModel, "$chart");
+
+			this._oObserver = new ManagedObjectObserver(function() {
+				this.oMDCChartModel.checkUpdate(true);
+			}.bind(this));
+			this._oObserver.observe(this.oMDCChart, {
+				aggregations: [
+					"items"
+				],
+				properties: [
+					"chartType"
+				]
+			});
 
 		},
 		renderer: ButtonRenderer
-
 	});
 
 	ChartTypeButton.mMatchingIcon = {
@@ -74,49 +93,20 @@ sap.ui.define([
 		"horizontal_waterfall": "sap-icon://horizontal-waterfall-chart"
 	};
 
-	ChartTypeButton.prototype.init = function(){
-		this.oChartModel = this.oChart.getManagedObjectModel();
-		this.setModel(this.oChartModel, "$chart");
-
-		if (this.oChart.getAutoBindOnInit()){
-			this.bindToInnerChart(this.oChart);
-		}
-	};
-
-	ChartTypeButton.prototype.bindToInnerChart = function(oChart) {
-		this.setEnabled(true);
-
-		this._oObserver = new ManagedObjectObserver(function() {
-			this.oChartModel.checkUpdate(true);
-		}.bind(this));
-		this._oObserver.observe(this.oChart, {
-			aggregations: [
-				"items"
-			],
-			properties: [
-				"chartType"
-			]
-		});
-	};
-
 	/**
 	 * Shows popover to select chart type
 	 * @param oButton button opening the popover
-	 * @param oChart the inner chart
+	 * @param oMDCChart the inner chart
 	 *
 	 * @experimental
 	 * @private
 	 * @ui5-restricted Fiori Elements, sap.ui.mdc
 	 */
-	ChartTypeButton.prototype.displayChartTypes = function(oButton, oChart) {
-		if (!oChart || !oButton) {
+	ChartTypeButton.prototype.displayChartTypes = function(oButton, oMDCChart) {
+		if (!oMDCChart || !oButton) {
 			return;
 		}
 
-		if (this.oPopover) {
-			return this.oPopover.openBy(oButton);
-		}
-
 		if (!this.oReadyPromise) {
 			this.oReadyPromise = new Promise(function(resolve) {
 				if (ResponsivePopover) {
@@ -147,21 +137,27 @@ sap.ui.define([
 		}
 
 		this.oReadyPromise.then(function() {
-			this.oPopover = this._createPopover(oButton, oChart);
-			return this.oPopover.openBy(oButton);
+			if (!this.oPopover){
+				this.oPopover = this._createPopover(oButton, oMDCChart);
+				this.oPopover.attachAfterClose(function(){
+					this.oPopover.destroy();
+					delete this.oPopover;
+				}.bind(this));
+				return this.oPopover.openBy(oButton);
+			}
 		}.bind(this));
 	};
 
 	/**
 	 * Creates the popover
 	 * @param oButton button opening the popover
-	 * @param oChart inner chart
+	 * @param oMDCChart inner chart
 	 *
 	 * @experimental
 	 * @private
 	 * @ui5-restricted sap.ui.mdc
 	 */
-	ChartTypeButton.prototype._createPopover = function(oButton, oChart) {
+	ChartTypeButton.prototype._createPopover = function(oButton, oMDCChart) {
 		var oItemTemplate = new StandardListItem({
 			title: "{$chart>text}",
 			icon: "{$chart>icon}",
@@ -175,6 +171,7 @@ sap.ui.define([
 				template: oItemTemplate
 			},
 			selectionChange: function(oEvent) {
+				//TODO: Implement Chart Type switch
 				if (oEvent && oEvent.mParameters && oEvent.mParameters.listItem) {
 					var oBinding = oEvent.mParameters.listItem.getBinding("title");
 					if (oBinding) {
@@ -187,10 +184,9 @@ sap.ui.define([
 								], function(FlexUtil,ChartFlex) {
 									var aChanges = [];
 									aChanges.push(ChartFlex["setChartType"].changeHandler.createChange({
-										control: oChart,
+										control: oMDCChart,
 										chartType: oObj.key
 									}));
-									//TODO: use engine for custom personalization
 									FlexUtil.handleChanges(aChanges);
 								});
 							}
@@ -207,19 +203,20 @@ sap.ui.define([
 			placeholder: oRb.getText("chart.CHART_TYPE_SEARCH")
 		});
 		oSearchField.attachLiveChange(function(oEvent) {
-			if (oChart) {
+			if (oMDCChart){
 				this._triggerSearchInPopover(oEvent, oList);
 			}
 		}.bind(this));
 		oSubHeader.addContentRight(oSearchField);
 
 		var oPopover = new ResponsivePopover({
-			placement: "Bottom",
+			id: oMDCChart.getId() + "-btnChartTypePopover",
+			placement: PlacementType.VerticalPreferredBottom,
 			subHeader: oSubHeader,
 			contentWidth: "25rem"
 		});
 
-		oPopover.setModel(this.oChartModel, "$chart");
+		oPopover.setModel(this.oMDCChartModel, "$chart");
 
 		//Show header only in mobile scenarios
 		//still support screen reader while on desktops.
@@ -240,6 +237,11 @@ sap.ui.define([
 			oSubHeader.setVisible(false);
 		}
 
+		/*
+		oPopover.attachAfterClose(function(oEvent) {
+			oPopover.destroy();
+		});*/
+
 		return oPopover;
 	};
 
@@ -295,5 +297,4 @@ sap.ui.define([
 	};
 
 	return ChartTypeButton;
-
-}, true);
+});

package/src/sap/ui/mdc/{chartNew/DrillBreadcrumbsNew.js → chart/DrillBreadcrumbs.js}

@@ -13,14 +13,14 @@ sap.ui.define([
 ) {
     "use strict";
     /**
-     * Delegate class for sap.ui.mdc.ChartNew and ODataV4.
+     * Delegate class for sap.ui.mdc.Chart and ODataV4.
      * Enables additional analytical capabilities.
      * <b>Note:</b> The class is experimental and the API/behavior is not finalized.
      *
      * @author SAP SE
      * @private
      * @since 1.88
-     * @alias sap.ui.mdc.odata.v4.vizChart.ChartDelegateNew
+     * @alias sap.ui.mdc.odata.v4.vizChart.ChartDelegate
      */
     var DrillBreadcrumbs = Breadcrumbs.extend("sap/m/Breadcrumbs", {});
 
@@ -30,9 +30,9 @@ sap.ui.define([
 
 
     /**
-	 * Updates the breadcrumps shown on the MDC Chart
+	 * Updates the breadcrumbs shown on the MDC Chart
 	 *
-	 * @param {sap.ui.mdc.Chart} oChart the MDC Chart to update the breadcrumps on
+	 * @param {sap.ui.mdc.Chart} oMDCChart the MDC Chart to update the breadcrumbs on
 	 * @param {*} oDrillableItems the drillable items
 	 *
 	 * @experimental
@@ -54,7 +54,7 @@ sap.ui.define([
                 oDrillableItems.forEach(function(dim, index, array) {
 
                     // show breadcrumbs
-                    //If Breadcrumps were set invisible for no drill stack, they need to be set visible again
+                    //If Breadcrumbs were set invisible for no drill stack, they need to be set visible again
                     this.setVisible(true);
 
                     // use the last entry of each drill-stack entry to built
@@ -121,11 +121,11 @@ sap.ui.define([
 	};
 
     /**
-	 * Creates a breadcrump with given settings
-	 * @param oChart the chart the breadcrump is for
-	 * @param oCrumbSettings settings for the breadcrump
+	 * Creates a breadcrumb with given settings
+	 * @param oMDCChart the chart the breadcrumb is for
+	 * @param oCrumbSettings settings for the breadcrumb
 	 *
-	 * @returns the created breadcrump
+	 * @returns {sap.m.Link} the created breadcrumb
 	 *
 	 * @experimental
 	 * @private
@@ -167,4 +167,4 @@ sap.ui.define([
 	};
 
     return DrillBreadcrumbs;
-}, true);
+});

package/src/sap/ui/mdc/chart/DrillStackHandler.js

@@ -8,30 +8,24 @@ sap.ui.define([
 	"sap/m/ResponsivePopover",
 	"sap/m/List",
 	"sap/m/Bar",
-	"sap/m/SearchField",
 	"sap/m/StandardListItem",
 	"sap/ui/core/InvisibleText",
 	"sap/m/library",
 	"sap/ui/Device",
-	"sap/ui/mdc/chart/DimensionItem",
-	"sap/ui/mdc/chart/ChartSettings"
+	"sap/base/Log"
 ], function(
 	Core,
 	ResponsivePopover,
 	List,
 	Bar,
-	SearchField,
 	StandardListItem,
 	InvisibleText,
 	MLibrary,
 	Device,
-	DimensionItem,
-	ChartSettings
+	Log
 ) {
 	"use strict";
 
-	var Link;
-
 	// shortcut for sap.m.PlacementType
 	var PlacementType = MLibrary.PlacementType;
 
@@ -41,8 +35,8 @@ sap.ui.define([
 	// shortcut for sap.m.ListMode
 	var ListMode = MLibrary.ListMode;
 
-	function _getDrillStackDimensions(oChart) {
-		var aDrillStack = oChart.getAggregation("_chart").getDrillStack();
+	function _getDrillStackDimensions(oMDCChart) {
+		var aDrillStack = oMDCChart.getControlDelegate().getDrillStack(oMDCChart);
 		var aStackDimensions = [];
 
 		aDrillStack.forEach(function(oStackEntry) {
@@ -57,44 +51,33 @@ sap.ui.define([
 		return aStackDimensions;
 	}
 
-	//Get all dimensions in a sorted manner
-	function _getSortedDimensions(aProperties) {
-
-		var aDimensions = aProperties.filter(function(oItem) {
-			return oItem.kind == "Dimension";
-		});
-
-		if (aDimensions) {
-			aDimensions.sort(function(a, b) {
-				if (a.label && b.label) {
-					return a.label.localeCompare(b.label);
-				}
-			});
-		}
-
-		return aDimensions;
-	}
-
 	/**
 	 * Handles all drill-stack operations on a mdc.Chart instance
-	 * inlcuding drill-downs, drill-ups and updating of depending controls
-	 * like Breadcrumbs.
+	 * including drill-downs, drill-ups and updating of depending controls
 	 * @constructor
 	 */
 	var DrillStackHandler = function() {
-
+        //TODO: Refactor to DrillDownPopover (extending Popover; like Toolbar)
 	};
 
 	/**
 	 * Creates a drill down popover
-	 * @param oChart
+	 * @param oMDCChart
 	 * @returns the popover object
 	 *
 	 * @private
 	 * @ui5-restricted sap.ui.mdc
 	 */
-	DrillStackHandler.createDrillDownPopover = function(oChart) {
+	DrillStackHandler.createDrillDownPopover = function(oMDCChart) {
 
+		var oSubHeader = new Bar();
+		var oPopover = new ResponsivePopover({
+			id: oMDCChart.getId() + "-drilldownPopover",
+			contentWidth: "25rem",
+			contentHeight: "20rem",
+			placement: PlacementType.Bottom,
+			subHeader: oSubHeader
+		});
 		var oList = new List({
 			mode: ListMode.SingleSelectMaster,
 			selectionChange: function(oControlEvent) {
@@ -103,12 +86,12 @@ sap.ui.define([
 				if (oListItem) {
 					//Call flex to capture current state before adding an item to the chart aggregation
 
-					oChart.getEngine().createChanges({
-						control: oChart,
+					oMDCChart.getEngine().createChanges({
+						control: oMDCChart,
 						key: "Item",
 						state: [{
-							name: oListItem.data("dim").name,
-							position: oChart.getItems().length
+							name: oListItem.data("dim").dim.name,
+							position: oMDCChart.getItems().length
 						}]
 					});
 				}
@@ -117,7 +100,9 @@ sap.ui.define([
 			}
 		});
 
-		var oSubHeader = new Bar();
+		oPopover.attachAfterClose(function(){
+			oPopover.destroy();
+		});
 
 		//TODO add search field
 		//var oSearchField = new SearchField({
@@ -127,13 +112,6 @@ sap.ui.define([
 		//this._triggerSearchInDrillDownPopover(oEvent, oList);
 		//}.bind(this));
 
-		var oPopover = new ResponsivePopover({
-			contentWidth: "25rem",
-			contentHeight: "20rem",
-			placement: PlacementType.Bottom,
-			subHeader: oSubHeader
-		});
-
 
 		var oRb = Core.getLibraryResourceBundle("sap.ui.mdc");
 
@@ -151,31 +129,39 @@ sap.ui.define([
 		}
 
 		oPopover.addContent(oList);
-		oChart._oDrillDownPopover = oPopover;
+		oMDCChart._oDrillDownPopover = oPopover;
 		return oPopover;
 	};
 
 	/**
 	 * Shows the drill-down popover on the toolbar button of an mdc.Chart instance
-	 * @param {sap.ui.mdc.Chart} oChart
+	 * @param {sap.ui.mdc.Chart} oMDCChart
+     * @param {sap.m.Button} oDrillBtn
 	 *
 	 * @experimental
 	 * @private
 	 * @ui5-restricted sap.ui.mdc
 	 */
-	DrillStackHandler.showDrillDownPopover = function(oChart) {
-		var oFetchPropertiesPromise = oChart.getControlDelegate().fetchProperties(oChart);
-		return oFetchPropertiesPromise.then(function(aProperties) {
+	DrillStackHandler.showDrillDownPopover = function(oMDCChart, oDrillBtn) {
+        //TODO: Rename "Measure" and "Dimensions"?
+		var pSortedDimensionsPromise = oMDCChart.getControlDelegate().getSortedDimensions(oMDCChart);
+		return pSortedDimensionsPromise.then(function(aSortedDimensions) {
 			//Remove all prior items from drill-down list
-			var oDrillDownPopover = oChart._oDrillDownPopover;
-			var oDrillDownList = oDrillDownPopover.getContent()[1];
-			var aIgnoreDimensions, aSortedDimensions, oDimension, oListItem;
+			var oDrillDownPopover = oMDCChart._oDrillDownPopover;
+			var aIgnoreDimensions, oDimension, oListItem;
+
+			var aFilteredList = oDrillDownPopover.getContent().filter(function(oEntry){return oEntry.getMetadata().getClass() == List;});
+			var oDrillDownList = aFilteredList.length > 0 ? aFilteredList[0] : null;
+
+			if (!oDrillDownList){
+				Log.error("MDC Chart: Could not determine list to show drilldown. This should not happen. Did the application modify the drill-down popover?");
+				return;
+			}
 
 			oDrillDownList.destroyItems();
 
 			// Ignore currently applied dimensions from drill-stack for selection
-			aIgnoreDimensions = _getDrillStackDimensions(oChart);
-			aSortedDimensions = _getSortedDimensions(aProperties);
+			aIgnoreDimensions = _getDrillStackDimensions(oMDCChart);
 
 			for (var i = 0; i < aSortedDimensions.length; i++) {
 				oDimension = aSortedDimensions[i];
@@ -195,7 +181,7 @@ sap.ui.define([
 					type: ListType.Active
 				});
 
-				oListItem.data("dim", oDimension);
+				oListItem.data("dim", {dim: oDimension});
 
 				/*sTooltip = this._getFieldTooltip(oDimension.name);
 				if (sTooltip) {
@@ -211,207 +197,10 @@ sap.ui.define([
 					resolve(oDrillDownPopover);
 				});
 
-				oDrillDownPopover.openBy(oChart._oDrillDownBtn);
+				oDrillDownPopover.openBy(oDrillBtn);
 			});
 		});
 	};
 
-	/**
-	 * Creates and sets breadcrumps on the MDC chart for the current drill level
-	 *
-	 * @param {sap.ui.mdc.Chart} oChart
-	 *
-	 * @experimental
-	 * @private
-	 * @ui5-protected sap.ui.mdc
-	 */
-	DrillStackHandler.createDrillBreadcrumbs = function(oChart) {
-
-		return new Promise(function(resolve, reject) {
-
-			sap.ui.require([
-				"sap/m/Breadcrumbs"
-			], function(Breadcrumbs) {
-				var oInnerChart = oChart.getAggregation("_chart");
-
-				if (oInnerChart) {
-					var oDrillBreadcrumbs = new Breadcrumbs();
-					oChart.setAggregation("_breadcrumbs", oDrillBreadcrumbs);
-
-					//initial update of current drill-path
-					this._updateDrillBreadcrumbs(oChart, oDrillBreadcrumbs).then(function() {
-						resolve(oDrillBreadcrumbs);
-					});
-				}
-			}.bind(this));
-		}.bind(this));
-	};
-
-	/**
-	 * Creates a breadcrump with given settings
-	 * @param oChart the chart the breadcrump is for
-	 * @param oCrumbSettings settings for the breadcrump
-	 *
-	 * @returns the created breadcrump
-	 *
-	 * @experimental
-	 * @private
-	 * @ui5-restricted sap.ui.mdc
-	 */
-	DrillStackHandler.createCrumb = function(oChart, oCrumbSettings) {
-		var oInnerChart = oChart.getAggregation("_chart");
-
-		var oCrumb = new Link({
-			text: oCrumbSettings.dimensionText,
-			press: function onCrumbPressed(oControlEvent) {
-				var oDrillBreadcrumbs = oChart.getAggregation("_breadcrumbs"),
-					iLinkIndex = oDrillBreadcrumbs.indexOfLink(oControlEvent.getSource());
-
-				// get drill-path which was drilled-up and needs to be removed from mdc chart
-				var aCurrentDrillStack = oInnerChart.getDrillStack()[oInnerChart.getDrillStack().length - 1].dimension,
-					aDrilledPath = aCurrentDrillStack.slice(iLinkIndex + 1);
-
-				oInnerChart.fireDeselectData();
-
-				// retrieve the actual items and remove them from mdc chart items aggregation
-				var aDrilledItems = oChart.getItemsByKeys(aDrilledPath);
-
-				// call flex to capture the current state before removing item(s) of the chart aggregation
-				var aFlexItemChanges = aDrilledItems.map(function(oDrillItem) {
-					return {
-						name: oDrillItem.getKey(),
-						visible: false
-					};
-				});
-
-				oChart.getEngine().createChanges({
-					control: oChart,
-					key: "Item",
-					state: aFlexItemChanges
-				});
-
-				// don't forget to update the bread crumbs control itself
-				this._updateDrillBreadcrumbs(oChart, oDrillBreadcrumbs);
-			}.bind(this)
-		});
-
-		// unique dimension key is needed to remove the item from the mdc chart aggregation on drilling up
-		oCrumb.data("key", oCrumbSettings.dimensionKey);
-		return oCrumb;
-	};
-
-	/**
-	 * Updates the breadcrumps shown on the MDC Chart
-	 *
-	 * @param {sap.ui.mdc.Chart} oChart the MDC Chart to update the breadcrumps on
-	 * @param {*} oDrillBreadcrumbs the breadcrumps to show
-	 *
-	 * @experimental
-	 * @private
-	 * @ui5-restricted sap.ui.mdc
-	 */
-	DrillStackHandler._updateDrillBreadcrumbs = function(oChart, oDrillBreadcrumbs) {
-
-		return new Promise(function(resolve, reject) {
-
-			sap.ui.require([
-				"sap/m/Link"
-			], function(LinkClass) {
-				Link = LinkClass;
-
-				if (!oDrillBreadcrumbs) {
-					return;
-				}
-
-				// Get access to drill history
-				var oInnerChart = oChart.getAggregation("_chart");
-
-				if (!oInnerChart) {
-					return;
-				}
-
-				var aVisibleDimensionsRev = oInnerChart.getDrillStack();
-				var newLinks = [];
-
-				// When chart is bound to non-aggregated entity there is no drill-stack
-				// existing
-				if (aVisibleDimensionsRev) {
-
-					// Reverse array to display right order of crumbs
-					aVisibleDimensionsRev.reverse();
-					aVisibleDimensionsRev.forEach(function(dim, index, array) {
-
-						// Check if stack entry has dimension names and if a
-						// dimension is existing for this name
-						if (dim.dimension.length > 0 && typeof oInnerChart.getDimensionByName(dim.dimension[dim.dimension.length - 1]) != 'undefined') {
-							// show breadcrumbs
-							//If Breadcrumps were set invisible for no drill stack, they need to be set visible again
-							oDrillBreadcrumbs.setVisible(true);
-
-
-							// use the last entry of each drill-stack entry to built
-							// up the drill-path
-							var sDimText = oInnerChart.getDimensionByName(dim.dimension[dim.dimension.length - 1]).getLabel();
-							var sDimKey = oInnerChart.getDimensionByName(dim.dimension[dim.dimension.length - 1]).getName();
-
-							// Set current drill position in breadcrumb control
-							if (index == 0) {
-
-								oDrillBreadcrumbs.setCurrentLocationText(sDimText);
-							} else {
-
-								var oCrumbSettings = {
-									dimensionKey: sDimKey,
-									dimensionText: sDimText
-								};
-
-								var oCrumb = this.createCrumb(oChart, oCrumbSettings);
-								newLinks.push(oCrumb);//note the links are added in an incorrect order need to reverse
-							}
-						} else {
-
-							// Show no text on breadcrumb if stack contains only one
-							// entry with no dimension at all (all dims are shown)
-							if (index == 0) {
-								// hide breadcrumbs
-								oDrillBreadcrumbs.setVisible(false);
-							}
-						}
-					}, this);
-				}
-
-				var currLinks = oDrillBreadcrumbs.getLinks();
-				newLinks.reverse();
-				var diff = false;
-
-				if (currLinks.length !== newLinks.length) {
-					diff = true;
-				} else {
-
-					for (var i = 0; i < newLinks.length; i++) {
-						if (newLinks[i].getText() != currLinks[i].getText()) {
-							diff = true;
-							break;
-						}
-					}
-				}
-
-				if (diff) {
-
-					// Clear aggregation before we rebuild it
-					if (oDrillBreadcrumbs.getLinks()) {
-						oDrillBreadcrumbs.destroyLinks();
-					}
-
-					for (var i = 0; i < newLinks.length; i++) {
-						oDrillBreadcrumbs.addLink(newLinks[i]);
-					}
-				}
-
-				resolve(oDrillBreadcrumbs);
-			}.bind(this));
-		}.bind(this));
-	};
-
 	return DrillStackHandler;
 });