Wijmo 5 - PivotPanel Custom Layout

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://cdn.wijmo.com/5.latest/styles/wijmo.min.css">
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.input.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.grid.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.chart.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.grid.filter.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.olap.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/interop/angular/wijmo.angular.min.js"></script>
<!-- mark this as an Angular application and give it a controller -->
<div ng-app="app" ng-controller="appCtrl" class="container">

  <h1>PivotPanel with Custom Layout</h1>

  <p>
    This is a <b>PivotPanel</b> control with a custom layout. The layout
    was created by changing the <b>PivotPanel.controlTemplate</b>
    property.
  </p>
  <wj-pivot-panel items-source="data" control="thePanel">
  </wj-pivot-panel>
  <wj-pivot-grid items-source="thePanel">
  </wj-pivot-grid>

  </div>

CSS

.wj-flexgrid {
  height: 150px; 
  margin-top:10px;
 }
 .wj-flexchart {
   height: 300px;
 }

JavaScript

// customize PivotPanel controlTemplate to show field list and
// drag-drop area side-by-side
wijmo.olap.PivotPanel.controlTemplate = '<div>' +

    '<div style="display:flex">' +

        // fields
        '<div>' +
            '<label wj-part="g-flds"></label>' +
            '<div wj-part="d-fields"></div>' +
        '</div>' +

        // drag/drop area
        '<div>' +
            '<label wj-part="g-drag"></label>' +
            '<table>' +
                '<tr>' +
                    '<td width="50%">' +
                        '<label><span class="wj-glyph wj-glyph-filter"></span> <span wj-part="g-flt"></span></label>' +
                        '<div wj-part="d-filters"></div>' +
                    '</td>' +
                    '<td width= "50%" style= "border-left-style:solid">' +
                        '<label><span class="wj-glyph">&#10996;</span> <span wj-part="g-cols"></span></label>' +
                        '<div wj-part="d-cols"></div>' +
                    '</td>' +
                '</tr>' +
                '<tr style= "border-top-style:solid">' +
                    '<td width="50%">' +
                        '<label><span class="wj-glyph">&#8801;</span> <span wj-part="g-rows"></span></label>' +
                        '<div wj-part="d-rows"></div>' +
                    '</td>' +
                    '<td width= "50%" style= "border-left-style:solid">' +
                        '<label><span class="wj-glyph">&#931;</span> <span wj-part="g-vals"></span></label>' +
                        '<div wj-part="d-vals"></div>' +
                    '</td>' +
                '</tr>' +
            '</table>' +
        '</div>' +
    '</div>' +

    // progress indicator
    '<div wj-part="d-prog" class="wj-state-selected" style="width:0px;height:3px"></div>' +

    // update panel
    '<div style="display:table">' +
        '<label style="display:table-cell;vertical-align:middle">' +
            '<input wj-part="chk-defer" type="checkbox"/> <span...