All geek questions in one place

User control using viz frame as aggregation

Hi, Sapui5 developers,

Today I get into a situation where I have 5 diagrams to display each of different styles and use different data, so I thought, instead of using several viz frames on my page, I want to write my own control that accepts grapghtype , data FlattenedDataset, DimensionDefinition value, MeasureDefinition name value, list of feed items.

Common SO code is below

<viz:VizFrame id="idVizFrame" 
              uiConfig="{applicationSet:'fiori'}"
              height='100%' 
              width="100%" 
              vizType='donut'>
  <viz:dataset>
    <viz.data:FlattenedDataset data="{/milk}">
      <viz.data:dimensions>
        <viz.data:DimensionDefinition name="Store Name"
                                      value="{Store Name}" />
      </viz.data:dimensions>
      <viz.data:measures>
        <viz.data:MeasureDefinition name="Revenue"
                                    value="{Revenue}" />
      </viz.data:measures>
    </viz.data:FlattenedDataset>
  </viz:dataset>

  <viz:feeds>
    <viz.feeds:FeedItem uid="size" 
                        type="Measure"
                        values="Revenue" />
    <viz.feeds:FeedItem uid="color" 
                        type="Dimension"
                        values="Store Name" />
  </viz:feeds>
</viz:VizFrame>

I want it to be like

<chart frameType="donut" 
       flattenedData="{/milk}" 
       dimensionDefinationData="{Store Name}" 
       measureDefinationData="{Revenue}" />

then in should display a donut chart.

that's what i tried

shadowChart.js:

sap.ui.define([
  "sap/ui/core/Control",
  "sap/viz/ui5/controls/VizFrame",
  "sap/viz/ui5/data/FlattenedDataset",
  "sap/viz/ui5/controls/common/feeds/FeedItem"
], function(Control, gViz, gData, gFeeds) {

  "use strict";

  return Control.extend("NWS.control.shadowCharts",  {

    "metadata": {
        "properties": {
            "value": {
                "type": "float",
                "defaultValue": 0
            },
            "frameType": {
                "type": "string",
                "defaultValue": "bar"
            },
            "flattenedData": {
                "type": "object",
                "defaultValue": ""
            },
            "dimensionDefinationData": {
                "type": "string",
                "defaultValue": ""
            },
            "measureDefinationData": {
                "type": "string",
                "defaultValue": ""
            },
            "height": {
                "type": "string",
                "defaultValue": "90%"
            },
            "width": {
                "type": "string",
                "defaultValue": "90%"
            }
        },
        "aggregations": {
            "_vizFrames": {
                "type": "sap.viz.ui5.controls.VizFrame",
                "multiple": false,
                "visibility": "hidden"
            }

        }
    },

    init: function() {

        var oDataSet = new sap.viz.ui5.data.FlattenedDataset({
            "data": {
                "path": this.getFlattenedData()
            },
            "dimensions": [{
                "name": "dimensionNameHere",
                "value": this.getDimensionDefinationData()
            }],
            "measures": [{
                "name": "measureNameHere",
                "value": this.getMeasureDefinationData()
            }]
        });
        var feedItem1 = new sap.viz.ui5.controls.common.feeds.FeedItem({
            "uid": "ValueAxis",
            "type": "Measure",
            "values": ["measureNameHere"]
        });
        var feedItem2 = new sap.viz.ui5.controls.common.feeds.FeedItem({
            "uid": "categoryAxis",
            "type": "Dimension",
            "values": ["dimensionNameHere"]
        });
        var vizFrame = new sap.viz.ui5.controls.VizFrame({
            "vizType": this.getFrameType(),
            "dataset": oDataSet,
            "feeds": [feedItem1, feedItem2],
            "iConfig" : "{applicationSet:'fiori'}",
            "selectData": this._dataSelect.bind(this)
        })
        this.setAggregation("_vizFrames", vizFrame);


    },

    _dataSelect: function(oEvent) {


    },

    renderer: function(oRM, oControl) {
        oRM.write("<div");
        oRM.writeControlData(oControl);
        oRM.addClass("customVizFrame");
        oRM.writeClasses();
        oRM.write(">");
        oRM.renderControl(oControl.getAggregation("_vizFrames"));

        oRM.write("</div>");
    }
  });
});

in login view.xml

<mvc:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m"
    controllerName="view.Login" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:l="sap.ui.layout" xmlns:f="sap.ui.layout.form" xmlns:cViz="NWS.control">
  <Page title="{i18n>Title}" >
    <content>
      <VBox class="sapUiSmallMargin">
         <cViz:shadowCharts frameType="donut" 
                            flattenedData="{gDataModel>/milk}"     
                            dimensionDefinationData="{Store Name}"                     
                            measureDefinationData="{Revenue}" />
      </VBox>
    </content>
  </Page>
</mvc:View>

An error while debugging (in the init function) is related to passing the binding data .. since I get

this.getFrameType() as "bar" but not "donut",this.getFlattenedData() as ""

perhaps it has something to do with the type of properties.

+4
2

.

, init, renderer.

chartController.js

sap.ui.define([
"sap/ui/core/Control",
"sap/viz/ui5/controls/VizFrame",
"sap/viz/ui5/data/FlattenedDataset",
"sap/viz/ui5/controls/common/feeds/FeedItem"], function(Control, gViz, gData, gFeeds) {
"use strict";

return Control.extend("NWS.control.shadowCharts", {

    "metadata": {
        "properties": {
            "value": {
                "type": "float"

            },

            "frameType": {
                "type": "string"
            },
            "flattenedData": {
                "type": "string"
            },
            "dimensionDefinationData": {
                "type": "string"

            },
            "measureDefinationData": {
                "type": "string"

            },
            "height": {
                "type": "string"

            },
            "width": {
                "type": "string"

            },
            "press":{
                "type":"string"
            }
        },
        "aggregations": {
            "_vizFrames": {
                "type": "sap.viz.ui5.controls.VizFrame",
                "multiple": false,
                "visibility": "hidden"
            }

        },
        "events":{
            press:{}
        }
    },

    init: function() {
      this.getControlInstance=this;
    },

    _dataSelect: function(oEvent) {

          this.fireEvent("press");

    },



    renderer: function(oRM, oControl) {

        var oDataSet = new sap.viz.ui5.data.FlattenedDataset({
            "data": {
                "path": oControl.getFlattenedData()
            },
            "dimensions": [{
                "name": oControl.getDimensionDefinationData(),
                "value": "{"+oControl.getDimensionDefinationData()+"}"
            }],
            "measures": [{
                "name": oControl.getMeasureDefinationData(),
                "value": "{"+oControl.getMeasureDefinationData()+"}"
            }]
        });
        var gType=oControl.getFrameType();
        var measureUid="";
        var dimesionUid="";
        switch(gType){
            case "donut":measureUid="size";dimesionUid="color";break;
            case "bar":measureUid="valueAxis";dimesionUid="categoryAxis";break;
            default:throw "error beacause of unknown graph type"

        }
        var feedItem1 = new sap.viz.ui5.controls.common.feeds.FeedItem({
            "uid": measureUid,
            "type": "Measure",
            "values": [oControl.getMeasureDefinationData()]
        });
        var feedItem2 = new sap.viz.ui5.controls.common.feeds.FeedItem({
            "uid": dimesionUid,
            "type": "Dimension",
            "values": [oControl.getDimensionDefinationData()]
        });
        var vizFrame = new sap.viz.ui5.controls.VizFrame({
            "vizType": oControl.getFrameType(),
            "dataset": oDataSet,
            "feeds": [feedItem1, feedItem2],
            "iConfig": "{applicationSet:'fiori'}",
            "selectData": oControl._dataSelect.bind(oControl.getControlInstance)
        })
            vizFrame.setVizProperties({

                    title: {
                        visible: false,
                        text: 'Statastics'
                    }
                });
        oControl.setAggregation("_vizFrames", vizFrame);
        oRM.write("<div");
        oRM.writeControlData(oControl);
        oRM.addClass("customVizFrame");
        oRM.writeClasses();
        oRM.write(">");
        oRM.renderControl(oControl.getAggregation("_vizFrames"));

        oRM.write("</div>");
    }
});});

, xml:

 <cViz:shadowCharts frameType="bar" flattenedData="/milk" dimensionDefinationData="Store Name" measureDefinationData="Revenue" press="shadowChartsClick"></cViz:shadowCharts>

: -)

+1

"INIT". , this.getFrameType , "INIT" , .

setter (setValue), , INIT.

0

Source: https://habr.com/ru/post/1650881/

More articles:


All Articles