@openui5/sap.ui.mdc 1.93.3 → 1.96.2

package/src/sap/ui/mdc/odata/v4/vizChart/ChartDelegateNew.js

@@ -17,7 +17,10 @@ sap.ui.define([
     "sap/ui/mdc/chartNew/ChartTypeButtonNew",
     "sap/ui/mdc/chartNew/ItemNew",
     "sap/ui/model/Sorter",
-    "sap/m/VBox"
+    "sap/m/VBox",
+    "sap/ui/base/ManagedObjectObserver",
+    "sap/ui/core/ResizeHandler",
+    "sap/ui/mdc/p13n/panels/ChartItemPanelNew"
 ], function (
     V4ChartDelegate,
     loadModules,
@@ -31,7 +34,10 @@ sap.ui.define([
     ChartTypeButton,
     MDCChartItem,
     Sorter,
-    VBox
+    VBox,
+    ManagedObjectObserver,
+    ResizeHandler,
+    ChartItemPanel
 ) {
     "use strict";
     /**
@@ -46,6 +52,8 @@ sap.ui.define([
      */
     var ChartDelegate = Object.assign({}, V4ChartDelegate);
 
+
+    var mStateMap = new window.WeakMap();
     //var ChartLibrary;
     var Chart;
     var Dimension;
@@ -54,9 +62,106 @@ sap.ui.define([
     var Measure;
     //var VizPopover;
     var VizTooltip;
-    var oColorings;
-    var aInSettings = [];
-    var aColMeasures = [];
+
+    //API to access state
+    ChartDelegate._getState = function (oMDCChart) {
+        if (mStateMap.has(oMDCChart)){
+            return mStateMap.get(oMDCChart);
+        }
+
+        Log.info("Couldn't get state for " + oMDCChart.getId());
+    };
+
+    ChartDelegate._setState = function(oMDCChart, oState) {
+        mStateMap.set(oMDCChart, oState);
+    };
+
+    ChartDelegate._deleteState = function(oMDCChart) {
+
+        if (this._getState(oMDCChart).vizTooltip) {
+            this._getState(oMDCChart).vizTooltip.destroy();
+        }
+
+        if (this._getState(oMDCChart).observer) {
+            this._getState(oMDCChart).observer.disconnect();
+            this._getState(oMDCChart).observer = null;
+        }
+
+        return mStateMap.delete(oMDCChart);
+    };
+
+
+    ChartDelegate._getChart = function (oMDCChart){
+
+        if (mStateMap.has(oMDCChart)) {
+            return mStateMap.get(oMDCChart).innerChart;
+        }
+
+        Log.info("Couldn't get state for " + oMDCChart.getId());
+
+        return undefined;
+
+    };
+
+    ChartDelegate._setChart = function (oMDCChart, oInnerChart) {
+        if (mStateMap.has(oMDCChart)) {
+            mStateMap.get(oMDCChart).innerChart = oInnerChart;
+        } else {
+            mStateMap.set(oMDCChart, {innerChart: oInnerChart});
+        }
+    };
+
+    ChartDelegate._getInnerStructure = function (oMDCChart) {
+        if (mStateMap.has(oMDCChart)) {
+            return mStateMap.get(oMDCChart).innerStructure;
+        }
+
+        Log.info("Couldn't get state for " + oMDCChart.getId());
+
+        return undefined;
+    };
+
+    ChartDelegate._setInnerStructure = function (oMDCChart, oInnerStructure) {
+        if (mStateMap.has(oMDCChart)) {
+            mStateMap.get(oMDCChart).innerStructure = oInnerStructure;
+        } else {
+            mStateMap.set(oMDCChart, {innerStructure: oInnerStructure});
+        }
+    };
+
+    ChartDelegate._getBindingInfoFromState = function (oMDCChart) {
+        if (mStateMap.has(oMDCChart)) {
+            return mStateMap.get(oMDCChart).bindingInfo;
+        }
+
+        Log.info("Couldn't get state for " + oMDCChart.getId());
+
+        return undefined;
+    };
+
+    ChartDelegate._setBindingInfoForState = function (oMDCChart, oBindingInfo) {
+        if (mStateMap.has(oMDCChart)) {
+            mStateMap.get(oMDCChart).bindingInfo = oBindingInfo;
+        } else {
+            mStateMap.set(oMDCChart, {bindingInfo: oBindingInfo});
+        }
+    };
+
+    ChartDelegate._setUpChartObserver = function(oMDCChart) {
+		var mChartMap = this._getState(oMDCChart);
+
+		if (!mChartMap.observer) {
+			mChartMap.observer = new ManagedObjectObserver(function(oChange) {
+				if (oChange.type === "destroy") {
+                    this.exit(oChange.object);
+				}
+			}.bind(this));
+		}
+
+		mChartMap.observer.observe(oMDCChart, {
+			destroy: true
+		});
+	};
 
 
     /**
@@ -96,15 +201,23 @@ sap.ui.define([
         };
     };
 
+    ChartDelegate.exit = function(oMDCChart) {
+        if (this._getInnerStructure(oMDCChart)){
+            this._getInnerStructure(oMDCChart).destroy();
+        }
+
+        this._deleteState(oMDCChart);
+    };
+
     /**
      * Toolbar relevant API (WIP)
      */
-    ChartDelegate.zoomIn = function (iValue) {
-        this._oInnerChart.zoom({direction: "in"});
+    ChartDelegate.zoomIn = function (oMDCChart, iValue) {
+        this._getChart(oMDCChart).zoom({direction: "in"});
     };
 
-    ChartDelegate.zoomOut = function (iValue) {
-        this._oInnerChart.zoom({direction: "out"});
+    ChartDelegate.zoomOut = function (oMDCChart, iValue) {
+        this._getChart(oMDCChart).zoom({direction: "out"});
     };
 
 
@@ -112,10 +225,10 @@ sap.ui.define([
      * Gets the current zooming information for the inner chart
      * @returns {integer} Current zoom level on the inner chart
      */
-    ChartDelegate.getZoomState = function () {
+    ChartDelegate.getZoomState = function (oMDCChart) {
 
-        if (this._oInnerChart) {
-            return this._oInnerChart.getZoomInfo(this);
+        if (this._getChart(oMDCChart)) {
+            return this._getChart(oMDCChart).getZoomInfo(this);
         }
 
     };
@@ -128,8 +241,91 @@ sap.ui.define([
      *
      * @returns {object} event handler for chartSelectionDetails
      */
-    ChartDelegate.getInnerChartSelectionHandler = function () {
-        return {eventId: "_selectionDetails", listener: this._oInnerChart};
+    ChartDelegate.getInnerChartSelectionHandler = function (oMDCChart) {
+        return {eventId: "_selectionDetails", listener: this._getChart(oMDCChart)};
+    };
+
+    /**
+     * This function is used by P13n to determine which chart type supports which layout options.
+     * There might be chart tyoes which do not support certain layout options (i.e. "Axis3").
+     * Layout config is defined as followed:
+     * {
+     *  key: string //identifier for the chart type
+     *  allowedLayoutOptions : [] //array containing allowed layout options as string
+     * }
+     *
+     * @returns {array}
+     */
+    ChartDelegate.getChartTypeLayoutConfig = function() {
+
+        if (this._aChartTypeLayout) {
+            return this._aChartTypeLayout;
+        }
+
+        var aAxis1Only = [MDCLib.ChartItemRoleType.axis1, MDCLib.ChartItemRoleType.category, MDCLib.ChartItemRoleType.series];
+		var aAxis1And2 = [MDCLib.ChartItemRoleType.axis1, MDCLib.ChartItemRoleType.axis2, MDCLib.ChartItemRoleType.category, MDCLib.ChartItemRoleType.series];
+		var aCat2Axis1Only = [MDCLib.ChartItemRoleType.axis1, MDCLib.ChartItemRoleType.category, MDCLib.ChartItemRoleType.category2];
+		var aCat1AllAxis = [MDCLib.ChartItemRoleType.axis1, MDCLib.ChartItemRoleType.axis2, MDCLib.ChartItemRoleType.axis3, MDCLib.ChartItemRoleType.category, MDCLib.ChartItemRoleType.series];
+
+        this._aChartTypeLayout = [
+            {key: "column", allowedLayoutOptions: aAxis1Only},
+            {key: "bar", allowedLayoutOptions:  aAxis1Only},
+			{key: "line", allowedLayoutOptions:  aAxis1Only},
+			{key: "combination", allowedLayoutOptions:  aAxis1Only},
+			{key: "pie", allowedLayoutOptions:  aAxis1Only},
+			{key: "donut", allowedLayoutOptions:  aAxis1Only},
+            {key: "dual_column", allowedLayoutOptions:  aAxis1And2},
+			{key: "dual_bar", allowedLayoutOptions:  aAxis1And2},
+			{key: "dual_line", allowedLayoutOptions:  aAxis1And2},
+			{key: "stacked_bar", allowedLayoutOptions:  aAxis1Only},
+			{key: "scatter", allowedLayoutOptions:  aAxis1And2},
+			{key: "bubble", allowedLayoutOptions:  aCat1AllAxis},
+			{key: "heatmap", allowedLayoutOptions:  aCat2Axis1Only},
+			{key: "bullet", allowedLayoutOptions:  aAxis1Only},
+			{key: "vertical_bullet", allowedLayoutOptions:  aAxis1Only},
+			{key: "dual_stacked_bar", allowedLayoutOptions:  aAxis1And2},
+			{key: "100_stacked_bar", allowedLayoutOptions:  aAxis1Only},
+			{key: "stacked_column", allowedLayoutOptions:  aAxis1Only},
+			{key: "dual_stacked_column", allowedLayoutOptions:  aAxis1And2},
+			{key: "100_stacked_column", allowedLayoutOptions:  aAxis1Only},
+			{key: "dual_combination", allowedLayoutOptions:  aAxis1And2},
+			{key: "dual_horizontal_combination", allowedLayoutOptions:  aAxis1And2},
+			{key: "dual_horizontal_combination", allowedLayoutOptions:  aAxis1And2},
+			{key: "dual_stacked_combination", allowedLayoutOptions:  aAxis1And2},
+			{key: "dual_horizontal_stacked_combination", allowedLayoutOptions:  aAxis1And2},
+			{key: "stacked_combination", allowedLayoutOptions:  aAxis1Only},
+			{key: "100_dual_stacked_bar", allowedLayoutOptions:  aAxis1Only},
+			{key: "100_dual_stacked_column", allowedLayoutOptions:  aAxis1Only},
+			{key: "horizontal_stacked_combination", allowedLayoutOptions:  aAxis1Only},
+			{key: "waterfall", allowedLayoutOptions:  aCat2Axis1Only},
+			{key: "horizontal_waterfall", allowedLayoutOptions:  aCat2Axis1Only}
+        ];
+
+        return this._aChartTypeLayout;
+    };
+
+    ChartDelegate.getAdaptionUI = function(oMDCChart) {
+
+        var oLayoutConfig = this.getChartTypeLayoutConfig().find(function(it){return it.key === oMDCChart.getChartType();});
+
+        //Default case -> everything allowed
+        if (!oLayoutConfig) {
+            var aRoles = [MDCLib.ChartItemRoleType.axis1, MDCLib.ChartItemRoleType.axis2, MDCLib.ChartItemRoleType.axis3, MDCLib.ChartItemRoleType.category, MDCLib.ChartItemRoleType.category2, MDCLib.ChartItemRoleType.series];
+            oLayoutConfig = {key: oMDCChart.getChartType(), allowedLayoutOptions: aRoles};
+        }
+
+        var aStandardSetup = [
+            {kind: "Groupable"},
+            {kind: "Aggregatable"}
+        ];
+
+        oLayoutConfig.templateConfig = aStandardSetup;
+
+
+        //var aRolesAvailable = [MDCLib.ChartItemRoleType.axis1, MDCLib.ChartItemRoleType.axis2, MDCLib.ChartItemRoleType.axis3, MDCLib.ChartItemRoleType.category, MDCLib.ChartItemRoleType.category2, MDCLib.ChartItemRoleType.series];
+        var oArguments = {panelConfig: oLayoutConfig};
+
+        return Promise.resolve(new ChartItemPanel(oArguments));
     };
 
     /**
@@ -141,9 +337,9 @@ sap.ui.define([
      * @private
      * @ui5-restricted Fiori Elements, sap.ui.mdc
      */
-    ChartDelegate.setLegendVisible = function (bVisible) {
-        if (this._oInnerChart) {
-            this._oInnerChart.setVizProperties({
+    ChartDelegate.setLegendVisible = function (oMDCChart, bVisible) {
+        if (this._getChart(oMDCChart)) {
+            this._getChart(oMDCChart).setVizProperties({
                 'legend': {
                     'visible': bVisible
                 },
@@ -180,25 +376,38 @@ sap.ui.define([
      * @param {sap.ui.mdc.chartNew-ItemNew} oMDCChartItem the MDC CHart Item to insert into the inner chart
      * @param {int} iIndex the index to insert into
      */
-    ChartDelegate.insertItemToInnerChart = function (oMDCChartItem, iIndex) {
+    ChartDelegate.insertItemToInnerChart = function (oMDCChart, oMDCChartItem, iIndex) {
         //TODO: Create Measures/Dimension only when required?
         if (oMDCChartItem.getType() === "groupable") {
-            this.createInnerDimension(oMDCChartItem);
-            var aVisibleDimension = this._oInnerChart.getVisibleDimensions();
+
+            var oDim = this._getChart(oMDCChart).getDimensionByName(oMDCChartItem.getName());
+
+            if (!oDim) {
+                this.createInnerDimension(oMDCChart, oMDCChartItem);
+            } else {
+                //Update Dimension
+                oDim.setLabel(oMDCChartItem.getLabel());
+                oDim.setRole(oMDCChartItem.getRole() ? oMDCChartItem.getRole() : "category");
+            }
+
+            var aVisibleDimension = this._getChart(oMDCChart).getVisibleDimensions();
             aVisibleDimension.splice(iIndex, 0, oMDCChartItem.getName()); //Insert Item without deleting existing dimension
-            this._oInnerChart.setVisibleDimensions(aVisibleDimension);
+            this._getChart(oMDCChart).setVisibleDimensions(aVisibleDimension);
+
         } else if (oMDCChartItem.getType() === "aggregatable") {
-            this.createInnerMeasure(oMDCChartItem);
-            var aVisibleMeasures = this._oInnerChart.getVisibleMeasures();
+            this.createInnerMeasure(oMDCChart, oMDCChartItem);
+            var aVisibleMeasures = this._getChart(oMDCChart).getVisibleMeasures();
             aVisibleMeasures.splice(iIndex, 0, this._getAggregatedMeasureNameForMDCItem(oMDCChartItem));
-            this._oInnerChart.setVisibleMeasures(aVisibleMeasures);
+            this._getChart(oMDCChart).setVisibleMeasures(aVisibleMeasures);
         }
 
         //Update coloring and semantical patterns on Item change
-        this._prepareColoringForItem(oMDCChartItem);
-        this._updateColoring(this._oInnerChart.getVisibleDimensions(), this._oInnerChart.getVisibleMeasures());
+        this._prepareColoringForItem(oMDCChartItem).then(function(){
+            this._updateColoring(oMDCChart, this._getChart(oMDCChart).getVisibleDimensions(), this._getChart(oMDCChart).getVisibleMeasures());
+        }.bind(this));
+
         this.fetchProperties(oMDCChartItem.getParent()).then(function (aProperties) {
-            this._updateSemanticalPattern(aProperties);
+            this._updateSemanticalPattern(oMDCChart, aProperties);
         }.bind(this));
     };
 
@@ -207,27 +416,33 @@ sap.ui.define([
      * This function is called by MDC Chart on a change of the <code>Items</code> aggregation
      * @param {sap.ui.mdc.chartNew.ItemNew} oMDCChartItem The Item to remove from the inner chart
      */
-    ChartDelegate.removeItemFromInnerChart = function (oMDCChartItem) {
-        if (oMDCChartItem.getType() === "groupable" && this._oInnerChart.getVisibleDimensions().includes(oMDCChartItem.getName())) {
-            var aNewVisibleDimensions = this._oInnerChart.getVisibleDimensions().filter(function (e) {
+    ChartDelegate.removeItemFromInnerChart = function (oMDCChart, oMDCChartItem) {
+        if (oMDCChartItem.getType() === "groupable" && this._getChart(oMDCChart).getVisibleDimensions().includes(oMDCChartItem.getName())) {
+            var aNewVisibleDimensions = this._getChart(oMDCChart).getVisibleDimensions().filter(function (e) {
                 return e !== oMDCChartItem.getName();
             });
-            this._oInnerChart.setVisibleDimensions(aNewVisibleDimensions);
 
-            this._oInnerChart.removeDimension(this._oInnerChart.getDimensionByName(oMDCChartItem.getName()));
-        } else if (oMDCChartItem.getType() === "aggregatable" && this._oInnerChart.getVisibleMeasures().includes(this._getAggregatedMeasureNameForMDCItem(oMDCChartItem))) {
-            var aNewVisibleMeasures = this._oInnerChart.getVisibleMeasures().filter(function (e) {
+            if (oMDCChart.getDelegate().inResultDimensions && oMDCChart.getDelegate().inResultDimensions instanceof Array) {
+                this._getChart(oMDCChart).setInResultDimensions(oMDCChart.getDelegate().inResultDimensions);
+            }
+
+            this._getChart(oMDCChart).setVisibleDimensions(aNewVisibleDimensions);
+
+            //this._getChart(oMDCChart).removeDimension(this._getChart(oMDCChart).getDimensionByName(oMDCChartItem.getName()));
+
+        } else if (oMDCChartItem.getType() === "aggregatable" && this._getChart(oMDCChart).getVisibleMeasures().includes(this._getAggregatedMeasureNameForMDCItem(oMDCChartItem))) {
+            var aNewVisibleMeasures = this._getChart(oMDCChart).getVisibleMeasures().filter(function (e) {
                 return e !== this._getAggregatedMeasureNameForMDCItem(oMDCChartItem);
             }.bind(this));
-            this._oInnerChart.setVisibleMeasures(aNewVisibleMeasures);
+            this._getChart(oMDCChart).setVisibleMeasures(aNewVisibleMeasures);
 
-            this._oInnerChart.removeMeasure(this._oInnerChart.getMeasureByName(this._getAggregatedMeasureNameForMDCItem(oMDCChartItem)));
+            this._getChart(oMDCChart).removeMeasure(this._getChart(oMDCChart).getMeasureByName(this._getAggregatedMeasureNameForMDCItem(oMDCChartItem)));
         }
 
         //Update coloring and semantical patterns on Item change
-        this._updateColoring(this._oInnerChart.getVisibleDimensions(), this._oInnerChart.getVisibleMeasures());
+        this._updateColoring(oMDCChart, this._getChart(oMDCChart).getVisibleDimensions(), this._getChart(oMDCChart).getVisibleMeasures());
         this.fetchProperties(oMDCChartItem.getParent()).then(function (aProperties) {
-            this._updateSemanticalPattern(aProperties);
+            this._updateSemanticalPattern(oMDCChart, aProperties);
         }.bind(this));
     };
 
@@ -291,24 +506,25 @@ sap.ui.define([
      * @returns {Promise} resolved when inner chart is ready
      */
     ChartDelegate.initializeInnerChart = function (oMDCChart) {
-        this._oMDCChart = oMDCChart;
 
         return new Promise(function (resolve, reject) {
 
             this._loadChart().then(function (aModules) {
 
-                this._oInnerStructure = new VBox({
+                this._setInnerStructure(oMDCChart, new VBox({
                     justifyContent: "Center",
 				    alignItems: "Center",
                     height: "100%",
                     width: "100%"
-                });
+                }));
                 var oText = new Text();
                 oText.setText(oMDCChart.getNoDataText());
 
-                this._oInnerStructure.addItem(oText);
+                this._getInnerStructure(oMDCChart).addItem(oText);
+
+                this._setUpChartObserver(oMDCChart);
 
-                resolve(this._oInnerStructure); //Not applicable in this case
+                resolve(this._getInnerStructure(oMDCChart)); //Not applicable in this case
             }.bind(this));
         }.bind(this));
     };
@@ -343,38 +559,14 @@ sap.ui.define([
                 switch (oItem.getType()) {
                     case "groupable":
                         aVisibleDimensions.push(oItem.getName());
-                        var oDimension = new Dimension({name: oItem.getName(), label: oItem.getLabel(), role: "category"});
-
-                        if (oPropertyInfo.textProperty){
-                            oDimension.setTextProperty(oPropertyInfo.textProperty);
-                            oDimension.setDisplayText(true);
-                        }
-
-                        this._oInnerChart.addDimension(oDimension);
+                        this._addInnerDimension(oMDCChart, oItem, oPropertyInfo);
                         break;
                     case "aggregatable":
 
-                        var aggregationMethod = oPropertyInfo.aggregationMethod;
-                        var propertyPath = oPropertyInfo.propertyPath;
-
                         //TODO: Alias might be changing after backend request
                         aVisibleMeasures.push(this._getAggregatedMeasureNameForMDCItem(oItem));
 
-                        var oMeasureSettings = {
-                            name: this._getAggregatedMeasureNameForMDCItem(oItem),//"average" + oItem.getName(),
-                            label: oItem.getLabel(),
-                            role: oItem.getRole() ? oItem.getRole() : "axis1"
-                        };
-
-                        if (aggregationMethod && propertyPath) {
-                            oMeasureSettings.analyticalInfo = {
-                                propertyPath: propertyPath,
-                                "with": aggregationMethod
-                            };
-                        }
-
-                        var oMeasure = new Measure(oMeasureSettings);
-                        this._oInnerChart.addMeasure(oMeasure);
+                        this._addInnerMeasure(oMDCChart, oItem, oPropertyInfo);
                         break;
 
                     default:
@@ -384,64 +576,96 @@ sap.ui.define([
                 aColorPromises.push(this._prepareColoringForItem(oItem));
             }.bind(this));
 
-            aColMeasures.forEach(function(sKey) {
+            this._getState(oMDCChart).aColMeasures.forEach(function(sKey) {
 
-                if (aInSettings.indexOf(sKey) == -1) {
+                if (this._getState(oMDCChart).aInSettings.indexOf(sKey) == -1) {
 
                     var oPropertyInfo = aProperties.find(function (oCurrentPropertyInfo) {
                         return oCurrentPropertyInfo.name === sKey;
                     });
 
-                    var oMeasure = new Measure({
-                        name: this._getAggregatedMeasureNameForMDCItem(oPropertyInfo),//"average" + oItem.getName(),
+                    var aggregationMethod = oPropertyInfo.aggregationMethod;
+                    var propertyPath = oPropertyInfo.propertyPath;
+
+                    var oMeasureSettings = {
+                        name: sKey,
                         label: oPropertyInfo.label,
-                        role: "axis1",
-                        analyticalInfo: {
-                            propertyPath: oPropertyInfo.name, //TODO: What to fill here without PropertyInfos? Consider property at MDC Item level
-                            "with": oPropertyInfo.aggregationMethod
-                        }
-                    });
+                        role: "axis1"
+                    };
 
-                    aVisibleMeasures.push();
-                    this._oInnerChart.addMeasure(oMeasure);
+                    if (aggregationMethod && propertyPath) {
+                        oMeasureSettings.analyticalInfo = {
+                            propertyPath: propertyPath,
+                            "with": aggregationMethod
+                        };
+                    }
+
+                    var oMeasure = new Measure(oMeasureSettings);
+
+                    aVisibleMeasures.push(oMeasure);
+                    this._getChart(oMDCChart).addMeasure(oMeasure);
                 }
 
             }.bind(this));
 
             Promise.all(aColorPromises).then(function(){
-                this._oInnerChart.setVisibleDimensions(aVisibleDimensions);
-                this._oInnerChart.setVisibleMeasures(aVisibleMeasures);
+                this._getChart(oMDCChart).setVisibleDimensions(aVisibleDimensions);
+                this._getChart(oMDCChart).setVisibleMeasures(aVisibleMeasures);
+
+                var aInResultDimensions = oMDCChart.getDelegate().inResultDimensions;
+                if (aInResultDimensions && aInResultDimensions instanceof Array && aInResultDimensions.length != 0) {
+
+                    var aInResultPromises = [];
 
-                this._updateColoring(aVisibleDimensions, aVisibleMeasures);
-                this._updateSemanticalPattern(aProperties);
+                    aInResultDimensions.forEach(function(sInResultDim){
+
+                        aInResultPromises.push(this._getPropertyInfosByName(sInResultDim, oMDCChart).then(function(oPropertyInfos){
+                            var oDim = new Dimension({
+                                name: oPropertyInfos.name,
+                                label: oPropertyInfos.label
+                            });
+
+                            this._getChart(oMDCChart).addDimension(oDim);
+                        }.bind(this)));
+
+                    }.bind(this));
+
+                    Promise.all(aInResultPromises).then(function(){
+                        this._getChart(oMDCChart).setInResultDimensions(oMDCChart.getDelegate().inResultDimensions);
+                    }.bind(this));
+
+                }
+
+                this._updateColoring(oMDCChart, aVisibleDimensions, aVisibleMeasures);
+                this._updateSemanticalPattern(oMDCChart, aProperties);
             }.bind(this));
 
         }.bind(this));
 
     };
 
-    ChartDelegate.getInnerChart = function () {
-        return this._oInnerChart;
+    ChartDelegate.getInnerChart = function (oMDCChart) {
+        return this._getChart(oMDCChart);
     };
 
 
     ChartDelegate._prepareColoringForItem = function(oItem) {
         //COLORING
         return this._addCriticality(oItem).then(function(){
-            aInSettings.push(oItem.getName());
+            this._getState(oItem.getParent()).aInSettings.push(oItem.getName());
 
             if (oItem.getType === "aggregatable") {
 
                 this._getPropertyInfosByName(oItem.getName(), oItem.getParent()).then(function (oPropertyInfo) {
                     for (var j = 0; j < this._getAdditionalColoringMeasuresForItem(oPropertyInfo); j++) {
 
-                        if (aColMeasures.indexOf(this._getAdditionalColoringMeasuresForItem(oPropertyInfo)[j]) == -1) {
-                            aColMeasures.push(this._getAdditionalColoringMeasuresForItem(oPropertyInfo)[j]);
+                        if (this._getState(oItem.getParent()).aColMeasures.indexOf(this._getAdditionalColoringMeasuresForItem(oPropertyInfo)[j]) == -1) {
+                            this._getState(oItem.getParent()).aColMeasures.push(this._getAdditionalColoringMeasuresForItem(oPropertyInfo)[j]);
                         }
                     }
                 }.bind(this));
             }
-        });
+        }.bind(this));
 
     };
 
@@ -472,7 +696,7 @@ sap.ui.define([
         return this._getPropertyInfosByName(oItem.getName(), oItem.getParent()).then(function (oPropertyInfo) {
 
             if (oPropertyInfo.criticality || (oPropertyInfo.datapoint && oPropertyInfo.datapoint.criticality)){
-                oColorings = oColorings || {
+                var oColorings = this._getState(oItem.getParent()).oColorings || {
                     Criticality: {
                         DimensionValues: {},
                         MeasureValues: {}
@@ -493,6 +717,7 @@ sap.ui.define([
                     }
 
                     oColorings.Criticality.DimensionValues[oItem.getName()] = mChartCrit;
+
                 } else {
                     var mCrit = oPropertyInfo.datapoint  && oPropertyInfo.datapoint.criticality ? oPropertyInfo.datapoint.criticality : [];
 
@@ -502,9 +727,14 @@ sap.ui.define([
 
                     oColorings.Criticality.MeasureValues[oItem.getName()] = mChartCrit;
                 }
+
+                var oState = this._getState(oItem.getParent());
+                oState.oColorings = oColorings;
+                this._setState(oItem.getParent(), oState);
+
             }
 
-        });
+        }.bind(this));
 
     };
 
@@ -518,8 +748,8 @@ sap.ui.define([
      * @private
      * @ui5-restricted Fiori Elements
      */
-    ChartDelegate._updateColoring = function (aVisibleDimensions, aVisibleMeasures) {
-        var oTempColorings = jQuery.extend(true, {}, oColorings), k;
+    ChartDelegate._updateColoring = function (oMDCChart, aVisibleDimensions, aVisibleMeasures) {
+        var oTempColorings = jQuery.extend(true, {}, this._getState(oMDCChart).oColorings), k;
 
         if (oTempColorings && oTempColorings.Criticality) {
             var oActiveColoring;
@@ -527,7 +757,7 @@ sap.ui.define([
             //dimensions overrule
             for (k = 0; k < aVisibleDimensions.length; k++) {
 
-                if (oColorings.Criticality.DimensionValues[aVisibleDimensions[k]]) {
+                if (this._getState(oMDCChart).oColorings.Criticality.DimensionValues[aVisibleDimensions[k]]) {
                     oActiveColoring = {
                         coloring: "Criticality",
                         parameters: {
@@ -559,8 +789,8 @@ sap.ui.define([
             }
 
             if (oActiveColoring) {
-                this._oInnerChart.setColorings(oTempColorings);
-                this._oInnerChart.setActiveColoring(oActiveColoring);
+                this._getChart(oMDCChart).setColorings(oTempColorings);
+                this._getChart(oMDCChart).setActiveColoring(oActiveColoring);
             }
         }
     };
@@ -576,9 +806,9 @@ sap.ui.define([
      * @private
      * @ui5-restricted Fiori Elements, sap.ui.mdc
      */
-    ChartDelegate._updateSemanticalPattern = function (aProperties) {
+    ChartDelegate._updateSemanticalPattern = function (oMDCChart, aProperties) {
 
-        var aVisibleMeasures = this._oInnerChart.getVisibleMeasures();
+        var aVisibleMeasures = this._getChart(oMDCChart).getVisibleMeasures();
 
         aVisibleMeasures.forEach(function(sVisibleMeasureName){
             //first draft only with semantic pattern
@@ -595,12 +825,12 @@ sap.ui.define([
             if (oDataPoint) {
 
                 if (oDataPoint.targetValue || oDataPoint.foreCastValue) {
-                    var oActualMeasure = this._oInnerChart.getMeasureByName(sVisibleMeasureName);
+                    var oActualMeasure = this._getChart(oMDCChart).getMeasureByName(sVisibleMeasureName);
 
                     oActualMeasure.setSemantics("actual");
 
                     if (oDataPoint.targetValue != null) {
-                        var oReferenceMeasure = this._oInnerChart.getMeasureByName(oDataPoint.targetValue);
+                        var oReferenceMeasure = this._getChart(oMDCChart).getMeasureByName(oDataPoint.targetValue);
 
                         if (oReferenceMeasure) {
                             oReferenceMeasure.setSemantics("reference");
@@ -610,7 +840,7 @@ sap.ui.define([
                     }
 
                     if (oDataPoint.foreCastValue) {
-                        var oProjectionMeasure = this._oInnerChart.getMeasureByName(oDataPoint.foreCastValue);
+                        var oProjectionMeasure = this._getChart(oMDCChart).getMeasureByName(oDataPoint.foreCastValue);
 
                         if (oProjectionMeasure) {
                             oProjectionMeasure.setSemantics("projected");
@@ -639,12 +869,12 @@ sap.ui.define([
      * @returns {object} information about the current chart type
      * @throws exception if inner chart is not yet ready
      */
-    ChartDelegate.getChartTypeInfo = function () {
-        if (!this._oInnerChart) {
+    ChartDelegate.getChartTypeInfo = function (oMDCChart) {
+        if (!this._getChart(oMDCChart)) {
             throw 'inner chart is not bound';
         }
 
-        var sType = this._oMDCChart.getChartType(),
+        var sType = oMDCChart.getChartType(),
             oMDCResourceBundle = Core.getLibraryResourceBundle("sap.ui.mdc");
 
         var mInfo = {
@@ -666,11 +896,11 @@ sap.ui.define([
      * @private
      * @ui5-restricted Fiori Elements
      */
-    ChartDelegate.getAvailableChartTypes = function () {
+    ChartDelegate.getAvailableChartTypes = function (oMDCChart) {
         var aChartTypes = [];
 
-        if (this._oInnerChart) {
-            var aAvailableChartTypes = this._oInnerChart.getAvailableChartTypes().available;
+        if (this._getChart(oMDCChart)) {
+            var aAvailableChartTypes = this._getChart(oMDCChart).getAvailableChartTypes().available;
 
             if (aChartTypes) {
 
@@ -682,7 +912,7 @@ sap.ui.define([
                         key: sType,
                         icon: ChartTypeButton.mMatchingIcon[sType],
                         text: oChartResourceBundle.getText("info/" + sType),
-                        selected: (sType == this._oMDCChart.getChartType())
+                        selected: (sType == oMDCChart.getChartType())
                     });
                 }
             }
@@ -701,9 +931,9 @@ sap.ui.define([
      * The returned objects need at least a "label" and a "name" property
      * @returns {array} Array containing the drill stack
      */
-    ChartDelegate.getDrillStack = function () {
+    ChartDelegate.getDrillStack = function (oMDCChart) {
         //TODO: Generify the return values here for other chart frameworks
-        return this._oInnerChart.getDrillStack();
+        return this._getChart(oMDCChart).getDrillStack();
     };
 
     /**
@@ -752,8 +982,8 @@ sap.ui.define([
      * Is called by MDC Chart when <code>chartType</code> property is updated
      * @param {string} sChartType the new chart type
      */
-    ChartDelegate.setChartType = function (sChartType) {
-        this._oInnerChart.setChartType(sChartType);
+    ChartDelegate.setChartType = function (oMDCChart, sChartType) {
+        this._getChart(oMDCChart).setChartType(sChartType);
     };
 
     /**
@@ -761,47 +991,92 @@ sap.ui.define([
      */
     ChartDelegate.createInnerChartContent = function (oMDCChart, fnCallbackDataLoaded) {
 
-        //Create content based on propertyInfos and MDCChart items
-        //var oPropertyHelper = oMDCChart.getPropertyHelper();
-        //var aGroupableProperties = oPropertyHelper.getAllGroupableProperties();
-        //var aAggregatableProperties = oPropertyHelper.getAllAggregatableProperties();
-
-        //create inner instances for aggregations
-        //this.createInnerDimensions(aGroupableProperties);
-        //this.createInnerMeasures(aAggregatableProperties, oPropertyHelper);
-        //rebind after everything is ready
-
-        this._oInnerChart = new Chart({
+        this._setChart(oMDCChart, new Chart({
             id: oMDCChart.getId() + "--innerChart",
             chartType: "column",
-            height: "330px",
             width: "100%",
             isAnalytical: true//,
-        });
+        }));
+
+        if (oMDCChart.getHeight()){
+            this._getChart(oMDCChart).setHeight(this._calculateInnerChartHeight(oMDCChart));
+        }
+
+        //Set height correctly again if chart changes
+        ResizeHandler.register(oMDCChart, function(){
+            this.adjustChartHeight(oMDCChart);
+        }.bind(this));
+
+        var oState = this._getState(oMDCChart);
+        oState.aColMeasures = [];
+        oState.aInSettings = [];
+        this._setState(oMDCChart, oState);
+
         //Create initial content during pre-processing
         this._createContentFromItems(oMDCChart);
 
         //Since zoom information is not yet available for sap.chart.Chart after data load is complete, do it on renderComplete instead
         //This is a workaround which is hopefully not needed in other chart libraries
-        this._oInnerChart.attachRenderComplete(function () {
-            oMDCChart._updateToolbar();
-        });
+        this._getChart(oMDCChart).attachRenderComplete(function () {
+            if (this._getState(oMDCChart).toolbarUpdateRequested){
+                oMDCChart._updateToolbar();
+                this._getState(oMDCChart).toolbarUpdateRequested = false;
+            }
+        }.bind(this));
+
+        this._getInnerStructure(oMDCChart).removeAllItems();
+        this._getInnerStructure(oMDCChart).setJustifyContent(sap.m.FlexJustifyContent.Start);
+        this._getInnerStructure(oMDCChart).setAlignItems(sap.m.FlexAlignItems.Stretch);
+        this._getInnerStructure(oMDCChart).addItem(this._getChart(oMDCChart));
 
-        this._oInnerStructure.removeAllItems();
-        this._oInnerStructure.setJustifyContent(sap.m.FlexJustifyContent.Start);
-        this._oInnerStructure.setAlignItems(sap.m.FlexAlignItems.Stretch);
-        this._oInnerStructure.addItem(this._oInnerChart);
+        oState.dataLoadedCallback = fnCallbackDataLoaded;
 
-        this._fnDataLoadedCallback = fnCallbackDataLoaded;
+        this._setState(oMDCChart, oState);
         var oBindingInfo = this._getBindingInfo(oMDCChart);
         this.updateBindingInfo(oMDCChart, oBindingInfo); //Applies filters
         this.rebindChart(oMDCChart, oBindingInfo);
     };
 
-    ChartDelegate.createInnerDimension = function (oMDCChartItem) {
+    ChartDelegate._calculateInnerChartHeight = function(oMDCChart) {
+        var iTotalHeight = jQuery(oMDCChart.getDomRef()).height();
+        var iToolbarHeight = 0;
+        var oToolbar = oMDCChart.getAggregation("_toolbar");
+        var iBreadcrumbsHeight = 0;
+        var oBreadcrumbs = oMDCChart.getAggregation("_breadcrumbs");
+
+        if (oToolbar){
+            iToolbarHeight = jQuery(oToolbar.getDomRef()).outerHeight(true);
+        }
+
+        if (oBreadcrumbs){
+            iBreadcrumbsHeight = jQuery(oBreadcrumbs.getDomRef()).outerHeight(true);
+        }
+
+        var iSubHeight = iBreadcrumbsHeight + iToolbarHeight;
+
+        if (!iTotalHeight){
+            return "480px";
+        }
+
+        return iTotalHeight - iSubHeight +  "px";
+    };
+
+    /**
+     * Adjust chart height to changed content strucutre, if needed
+     */
+    ChartDelegate.adjustChartHeight = function(oMDCChart){
+        if (oMDCChart.getHeight() && this._getChart(oMDCChart)){
+            this._getChart(oMDCChart).setHeight(this._calculateInnerChartHeight(oMDCChart));
+        }
+    };
+
+    ChartDelegate.requestToolbarUpdate = function(oMDCChart) {
+        this._getState(oMDCChart).toolbarUpdateRequested = true;
+    };
+
+    ChartDelegate.createInnerDimension = function (oMDCChart, oMDCChartItem) {
         //TODO: Check for Hierachy and Time
         //TODO: Check for role annotation
-        //var aVisibleDimensions = [];
 
         this.fetchProperties(oMDCChartItem.getParent()).then(function (aProperties) {
 
@@ -809,63 +1084,70 @@ sap.ui.define([
                 return oCurrentPropertyInfo.name === oMDCChartItem.getName();
             });
 
-            var oDimension = new Dimension({
-                name: oMDCChartItem.getName(),
-                role: oMDCChartItem.getRole() ? oMDCChartItem.getRole() : "category",
-                label: oMDCChartItem.getLabel()
-            });
-
-            if (oPropertyInfo.textProperty){
-                oDimension.setTextProperty(oPropertyInfo.textProperty);
-                oDimension.setDisplayText(true);
-            }
-
-            this._oInnerChart.addDimension(oDimension);
+            this._addInnerDimension(oMDCChart, oMDCChartItem, oPropertyInfo);
 
         }.bind(this));
 
-
-        //add to visibleDimensions
-        //TODO: Check this
-        /*
-        if (oProperty.isVisible()){
-            aVisibleDimensions.push(oProperty.getName());
-        }*/
-
-        //this._oInnerChart.setVisibleDimensions(aVisibleDimensions);
     };
 
-    ChartDelegate.createInnerMeasure = function (oMDChartItem) {
+    ChartDelegate.createInnerMeasure = function (oMDCChart, oMDCChartItem) {
 
-        this.fetchProperties(oMDChartItem.getParent()).then(function (aProperties) {
+        this.fetchProperties(oMDCChartItem.getParent()).then(function (aProperties) {
 
             var oPropertyInfo = aProperties.find(function (oCurrentPropertyInfo) {
-                return oCurrentPropertyInfo.name === oMDChartItem.getName();
+                return oCurrentPropertyInfo.name === oMDCChartItem.getName();
             });
 
-            var aggregationMethod = oPropertyInfo.aggregationMethod;
-            var propertyPath = oPropertyInfo.propertyPath;
+            this._addInnerMeasure(oMDCChart, oMDCChartItem, oPropertyInfo);
 
-            //TODO: Check for Criticality, Coloring and so on
+        }.bind(this));
 
-            var oMeasureSettings = {
-                name: this._getAggregatedMeasureNameForMDCItem(oMDChartItem),//"average" + oItem.getName(),
-                label: oMDChartItem.getLabel(),
-                role: oMDChartItem.getRole() ? oMDChartItem.getRole() : "axis1"
-            };
+    };
 
-            if (aggregationMethod && propertyPath) {
-                oMeasureSettings.analyticalInfo = {
-                    propertyPath: propertyPath, //TODO: What to fill here without PropertyInfos? Consider property at MDC Item level
-                    "with": aggregationMethod
-                };
+    /**
+     * @private
+     */
+    ChartDelegate._addInnerDimension = function(oMDCChart, oMDCChartItem, oPropertyInfo) {
+        var oDimension = new Dimension({
+            name: oMDCChartItem.getName(),
+            role: oMDCChartItem.getRole() ? oMDCChartItem.getRole() : "category",
+            label: oMDCChartItem.getLabel()
+        });
+
+        if (oPropertyInfo.textProperty){
+            oDimension.setTextProperty(oPropertyInfo.textProperty);
+            if (oPropertyInfo.textFormatter){
+                oDimension.setTextFormatter(oPropertyInfo.textFormatter);
             }
+            oDimension.setDisplayText(true);
+        }
 
+        this._getChart(oMDCChart).addDimension(oDimension);
+    };
 
-            var oMeasure = new Measure(oMeasureSettings);
-            this._oInnerChart.addMeasure(oMeasure);
-        }.bind(this));
+    /**
+     * @private
+     */
+    ChartDelegate._addInnerMeasure = function(oMDCChart, oMDCChartItem, oPropertyInfo) {
+        var aggregationMethod = oPropertyInfo.aggregationMethod;
+        var propertyPath = oPropertyInfo.propertyPath;
+
+        var oMeasureSettings = {
+            name: this._getAggregatedMeasureNameForMDCItem(oMDCChartItem),//"average" + oItem.getName(),
+            label: oMDCChartItem.getLabel(),
+            role: oMDCChartItem.getRole() ? oMDCChartItem.getRole() : "axis1"
+        };
 
+        if (aggregationMethod && propertyPath) {
+            oMeasureSettings.analyticalInfo = {
+                propertyPath: propertyPath,
+                "with": aggregationMethod
+            };
+        }
+
+
+        var oMeasure = new Measure(oMeasureSettings);
+        this._getChart(oMDCChart).addMeasure(oMeasure);
     };
 
     ChartDelegate._getAggregatedMeasureNameForProperty = function(oPoperty){
@@ -879,9 +1161,9 @@ sap.ui.define([
      * @param {object} oBindingInfo The bindingInfo of the chart
      */
     ChartDelegate.rebindChart = function (oMDCChart, oBindingInfo) {
-        if (oMDCChart && oBindingInfo && this._oInnerChart) {
+        if (oMDCChart && oBindingInfo && this._getChart(oMDCChart)) {
             //TODO: bindData sap.chart.Chart specific and therefore needs to be changed to a general API.
-            this._addBindingListener(oBindingInfo, "change", this._onDataLoadComplete.bind(this));
+            this._addBindingListener(oBindingInfo, "dataReceived", this._getState(oMDCChart).dataLoadedCallback.bind(oMDCChart));
 
             //TODO: Clarify why sap.ui.model.odata.v4.ODataListBinding.destroy this.bHasAnalyticalInfo is false
             //TODO: on second call, as it leads to issues when changing layout options within the settings dialog.
@@ -891,29 +1173,23 @@ sap.ui.define([
             }
 
 
-            this._oInnerChart.bindData(oBindingInfo);
-            this._oBindingInfo = oBindingInfo;
-            this._innerChartBound = true;
+            this._getChart(oMDCChart).bindData(oBindingInfo);
+            this._setBindingInfoForState(oMDCChart, oBindingInfo);
+            var oState = this._getState(oMDCChart);
+            oState.innerChartBound = true;
         }
     };
 
     ChartDelegate._getBindingInfo = function (oMDCChart) {
 
-        if (this._oBindingInfo) {
-            return this._oBindingInfo;
+        if (this._getBindingInfoFromState(oMDCChart)) {
+            return this._getBindingInfoFromState(oMDCChart);
         }
 
         var oMetadataInfo = oMDCChart.getDelegate().payload;
         var sEntitySetPath = "/" + oMetadataInfo.collectionName;
         var oBindingInfo = {
-            path: sEntitySetPath,
-            parameters: {
-                entitySet: oMetadataInfo.collectionName,
-                useBatchRequests: true,
-                provideGrandTotals: true,
-                provideTotalResultSize: true,
-                noPaging: true
-            }
+            path: sEntitySetPath
         };
         return oBindingInfo;
     };
@@ -922,8 +1198,14 @@ sap.ui.define([
      * Returns whether the inner chart is currently bound
      * @returns {bool} true if inner chart is bound; false if not
      */
-    ChartDelegate.getInnerChartBound = function () {
-        return !!this._innerChartBound;
+    ChartDelegate.getInnerChartBound = function (oMDCChart) {
+        var oState = this._getState(oMDCChart);
+
+        if (!oState) {
+            return false;
+        }
+
+        return oState.innerChartBound ? true : false;
     };
 
     /**
@@ -972,6 +1254,7 @@ sap.ui.define([
             } else if (oBindingInfo.parameters && oBindingInfo.parameters.$search) {
                 delete oBindingInfo.parameters.$search;
             }
+
         }
     };
 
@@ -1041,18 +1324,22 @@ sap.ui.define([
      * Sets tooltips visible/invisible on inner chart
      * @param {bool}  bFlag true for visible, false for invisible
      */
-    ChartDelegate.setChartTooltipVisibility = function (bFlag) {
+    ChartDelegate.setChartTooltipVisibility = function (oMDCChart, bFlag) {
 
-        if (this._oInnerChart) {
+        if (this._getChart(oMDCChart)) {
             if (bFlag) {
-                if (!this._vizTooltip) {
-                    this._vizTooltip = new VizTooltip();
+                if (!this._getState(oMDCChart).vizTooltip) {
+
+                    var oState = this._getState(oMDCChart);
+                    oState.vizTooltip = new VizTooltip();
+                    this._setState(oMDCChart, oState);
                 }
                 // Make this dynamic for setter calls
-                this._vizTooltip.connect(this._oInnerChart.getVizUid());
-            } else if (this._vizTooltip) {
-                    this._vizTooltip.destroy();
-                }
+                //this._vizTooltip.connect(this._oInnerChart.getVizUid());
+                this._getState(oMDCChart).vizTooltip.connect(this._getChart(oMDCChart).getVizUid());
+            } else if (this._getState(oMDCChart).vizTooltip) {
+                this._getState(oMDCChart).vizTooltip.destroy();
+            }
         } else {
             Log.error("Trying to set chart tooltip while inner chart was not yet initialized");
         }
@@ -1220,6 +1507,7 @@ sap.ui.define([
                             role: MDCLib.ChartItemRoleType.category, //standard, normally this should be interpreted from UI.Chart annotation
                             criticality: null ,//To be implemented by FE
                             textProperty: oPropertyAnnotations["@com.sap.vocabularies.Common.v1.Text"] ? oPropertyAnnotations["@com.sap.vocabularies.Common.v1.Text"].$Path  : null //To be implemented by FE
+                            //textFormatter: function(){} -> can be used to provide a custom formatter for the textProperty
                         });
                     }
                 }
@@ -1290,11 +1578,12 @@ sap.ui.define([
         }
     };
 
+    /*
     ChartDelegate._onDataLoadComplete = function (mEventParams) {
         if (mEventParams.mParameters.reason === "change" && !mEventParams.mParameters.detailedReason) {
             this._fnDataLoadedCallback.call();
         }
-    };
+    };*/
 
     return ChartDelegate;
 });