Display VizFrame legends in another container

user_9036787 0
Viewed 389

I have 2 donut VizFrame charts side by side and they have the same legends. I want to display legends in a common HBox below these charts.

Currently, if I make legends visible for one chart and hidden for other, few of the legend items are not visible due to width constraints of VizFrame and go into "ellipses". So displaying legends for only one chart did not resolve the issue.

I tried to go over documentation for donut charts on the link https://ui5.sap.com/docs/vizdocs/index.html#reference/chartProperty/Charts/Pie%20%20(2)/Donut%20Chart. I saw a number of properties for layout alignments, positions etc. There is one property for legendGroup.renderTo which seemed like a good fit to display legend items in another container. But I am not sure how to use it. As I tried to pass it the DOM element ID where I want to display the legends but it throws error "r is not a function".

According to the doc:

legendGroup.renderTo: Legend Group can render to an additional DOM Element. Its return value must be Dom Element.

Please advise if there is any way to display legends into another container.

View.xml:

<HBox id="ChartContainer" justifyContent="Center" width="500px">
  <viz:VizFrame id="Chart1" vizType="donut" height="150px" width="250px"></viz:VizFrame>
  <viz:VizFrame id="Chart2" vizType="donut" height="150px" width="250px"></viz:VizFrame>
</HBox>
<HBox id="LegendContainer" width="100px" height="100px"></HBox>

View1.controller.js

// FlattenedDataset required from "sap/viz/ui5/data/FlattenedDataset"
// FeedItem required from "sap/viz/ui5/controls/common/feeds/FeedItem"

drawDonutChart: function (data) {
  var oVizFrame = controller.getView().byId("Chart1");
  if (oVizFrame !== undefined) {
    oVizFrame.destroyFeeds();
    oVizFrame.destroyDataset();
  }
  var oDataset = new FlattenedDataset({
    dimensions: [
      {
        name: "Employee Status",
        value: "{EmployeeStatus}"
      }
    ],
    measures: [
      {
        name: "Salary",
        value: "{Salary}"
      }
    ],
    data: {
      path: "modelName>/DonutChart/EmpSalary"
    }
  });
  oVizFrame.setDataset(oDataset);
  oVizFrame.setVizType("donut");
  oVizFrame.setVizProperties({
    // ...
    legendGroup: {
      renderTo: document.getElementById("LegendContainer") // this seems to be a good option but results in error
    },
    // ...
  });
  var feedValueAxis = new FeedItem({
    uid: "size",
    type: "Measure",
    values: [ "Salary" ]
  });
  var feedCategoryAxis = new FeedItem({
    uid: "color",
    type: "Dimension",
    values: [ "Employee Status" ]
  });
  oVizFrame.addFeed(feedValueAxis);
  oVizFrame.addFeed(feedCategoryAxis);
},
sapui5 sap-fiori charts
1 Answers

The property renderTo awaits a function that returns a DOM reference.

{ // vizProperties
  legendGroup: {
    renderTo: () => this.byId("legendContainer").getDOMRef()
  }
}

Sample: https://embed.plnkr.co/Q5WktICjpfQrrLEo

But that's about it. It simply renders the legend group to the given DOM reference. And that DOM reference must be an SVG element in order to have the designed style applied. Also no interaction is supported in this case, such as the mouse hover effects and selecting data by clicking a legend, if the legend container is outside the VizFrame.

user_58460450
Related