Angular-Gridster - невозможно изменить размер диаграммы внутри адаптивной сетки

Question

Как сделать так, чтобы мои диаграммы (отрисованные в dc.js) и размещенные внутри элементов сетки (gridster.js + angular-gridster.js + AngularJS) изменяли размер и выравнивали центр при увеличении / уменьшении масштаба, изменении размера окна браузера и изменении размера элемента сетки?

Фрагмент из Dashboard.js, показанный ниже

var gridElement = angular.element(document.getElementById('risk-chart'));
gridElement.on('gridster-resized', ()=>{alert(); resize($scope.riskchart, width, height, true, 'risk-chart')});

На исходном рендере

При изменении размера элемента сетки

В окне Уменьшить / Изменить размер

dc-resizing.js

function apply_resizing(chart, width, height, onresize, id) {

         if (onresize) {
                onresize(chart, width, height, false, id);
         }

        setTimeout(function(){
            var elem = document.getElementById(id); 
            var padding = parseInt(window.getComputedStyle(elem, null).getPropertyValue('padding-top'));

            var height = (Math.floor(elem.offsetHeight)) 
                        - 2.0*parseInt(padding) - padding;
            var width = height;

            var left = (elem.getBoundingClientRect().width-padding)/2.0 -(width)/2.0 - padding;
            var top = padding/2.0;
            if (document.querySelectorAll(chart.anchor() + " svg").length > 0)
            (document.querySelectorAll(chart.anchor() + " svg g")[0]).setAttribute("transform", "translate(" + Math.floor(left) + ", " + Math.floor(top) + ")")
        }, 200); 


        window.onresize = resize(chart, width, height, onresize, id);
}

DashboardController.js

 $scope.renderCharts =  function(){  

        $scope.riskChart = new dc.pieChart('#risk-chart');


         $scope.ndx = crossfilter([{dd: new Date(), volume: 35}, {dd: new Date(), volume: 6}, {dd: new Date(), volume: 8}]);
         $scope.quarter = $scope.ndx.dimension(d => {

            const month = d.dd.getMonth();
            if (month <= 2) {
                return 'Q1';
            } else if (month > 2 && month <= 5) {
                return 'Q2';
            } else if (month > 5 && month <= 8) {
                return 'Q3';
            } else {
                return 'Q4';
            }
        });
     $scope.quarterGroup = $scope.quarter.group().reduceSum(d => d.volume);   

     $timeout(()=>{
           var riskchart = document.getElementById('risk-chart'); 
           height = Math.floor(riskchart.offsetHeight) 
                  - 2*parseInt(window.getComputedStyle(riskchart, null).getPropertyValue('padding-top'));
           width = Math.floor(parseFloat(window.getComputedStyle(riskchart, null).width)) 
           - 2*parseInt(window.getComputedStyle(riskchart, null).getPropertyValue('padding-top'));
           var padding = parseInt(window.getComputedStyle(riskchart, null).getPropertyValue('padding-top'));

           $scope.riskChart /* dc.pieChart('#quarter-chart', 'chartGroup') */
                .width(width)
                .height(height)
                .radius(Math.round(height/2.0))
                .innerRadius(Math.round(height/4.0))
                .dimension($scope.quarter)
                .group($scope.quarterGroup)
                .transitionDuration(500);
               apply_resizing($scope.riskChart, width, height, null, 'risk-chart');
               anchor = $scope.riskChart.anchor(); 
               $scope.riskChart.render();
               var left = (riskchart.getBoundingClientRect().width-padding)/2.0 -(width)/2.0 - padding;

               var top = document.querySelector("div[ng-app='Risk']").getBoundingClientRect().top + riskchart.getBoundingClientRect().top + 2*padding;
                 if (document.querySelectorAll(anchor + " svg").length > 0)
                    (document.querySelectorAll(anchor + " svg g:first-of-type")[0]).setAttribute("transform", "translate(" + Math.floor(left) + ", " + Math.floor(top) + ")")


                var gridElement = angular.element(document.getElementById('risk-chart'));
                gridElement.on('gridster-resized', ()=>{alert(); resize($scope.riskchart, width, height, true, 'risk-chart')});

     });

    }