What is the alternative getTotalSummaryValue function for dxi-group-item in Devextreme DataGrid Angular?

Question

I have a simple datagrid in Devextreme.

My grid is groupable and my code like as below:

<dx-data-grid [dataSource]="dataSource"
              [columnAutoWidth]="true"
              keyExpr="taskTicketActionId"
              showBorders="true"
              height="auto"
              [scrolling]="{useNative:true}"
              [allowColumnReordering]="true"
              noDataText="{{l('NoData')}}"
              (onRowClick)="onRowClick($event)"
              (onToolbarPreparing)="onToolbarPreparing($event)"
              [rowAlternationEnabled]="true">
    <dxo-state-storing [enabled]="true" type="localStorage" storageKey="devextremeAnalyzingPlanFactDataGridStorage"></dxo-state-storing>

    <dxo-column-chooser [enabled]="true"
                        [title]="l('HiddenColumns')"
                        [emptyPanelText]="l('DragColumnHere')">
    </dxo-column-chooser>

    <dxo-group-panel [visible]="true"
                     [emptyPanelText]="l('DragColumnHereForGrouping')">
    </dxo-group-panel>

    <dxo-grouping [autoExpandAll]="false"
                  [allowCollapsing]="true"
                  expandMode="buttonClick">
    </dxo-grouping>
    <dxo-summary [calculateCustomSummary]="calculateMySummary">
        <dxi-group-item column="target"
                        summaryType="sum"
                        name="myTarget"
                        [valueFormat]="{type:'fixedPoint',precision:2}"
                        displayFormat="{0}"
                        [showInGroupFooter]="true">
        </dxi-group-item>
        <dxi-group-item column="result"
                        name="myResult"
                        summaryType="sum"
                        [valueFormat]="{type:'fixedPoint',precision:2}"
                        displayFormat="{0}"
                        [showInGroupFooter]="true">
        </dxi-group-item>
        <dxi-group-item column="percent"
                        summaryType="custom"
                        name="myPercent"
                        [valueFormat]="{type:'fixedPoint',precision:2}"
                        displayFormat="{0}"
                        [alignByColumn]="true"
                        [showInGroupFooter]="true">
        </dxi-group-item>
    </dxo-summary>

    <dxi-sort-by-group-summary-info summaryItem="count"></dxi-sort-by-group-summary-info>

    <dxo-pager [showPageSizeSelector]="true"
               [allowedPageSizes]="devExtremeDatatableHelper.predefinedRecordsCountPerPage"
               [showInfo]="true"
               [visible]="true"
               infoText="{2} {{l('Plan')}}">
    </dxo-pager>

    <dxi-column dataField="itemGroup"
                caption="{{l('ItemGroup')}}"
                [allowSorting]="true">
    </dxi-column>
    <dxi-column [allowGrouping]="true" dataField="lineNr"
                caption="{{l('LineNr')}}">
    </dxi-column>
    <dxi-column dataField="firmName"
                [visible]="false"
                caption="{{l('Firm')}}">
    </dxi-column>

    <dxi-column dataField="groupSpecialCode"
                [visible]="false"
                caption="{{l('GroupSpecialCode1')}}">
    </dxi-column>
    <dxi-column dataField="groupSpecialCode2"
                [visible]="false"
                caption="{{l('GroupSpecialCode2')}}">
    </dxi-column>
    <dxi-column dataField="groupSpecialCode3"
                [visible]="false"
                caption="{{l('GroupSpecialCode3')}}">
    </dxi-column>

    <dxi-column dataField="username"
                caption="{{l('Salesman')}}">
    </dxi-column>
    <dxi-column dataField="salesPersonHeadName"
                caption="{{l('SalesPersonHead')}}">
    </dxi-column>
    <dxi-column dataField="saleManagerName"
                caption="{{l('SaleManager')}}">
    </dxi-column>

    <dxi-column [allowGrouping]="false" dataField="target"
                [format]="{type:'fixedPoint',precision:2}"
                caption="{{l('Target')}}">
    </dxi-column>
    <dxi-column [allowGrouping]="false" dataField="result"
                [format]="{type:'fixedPoint',precision:2}"
                caption="{{l('Result')}}">
    </dxi-column>
    <dxi-column [allowGrouping]="false" dataField="percent"
                [format]="{type:'fixedPoint',precision:2}" alignment="right"
                caption="{{l('AmountPercentDecember')}}">
    </dxi-column>

</dx-data-grid>

My custom summary function like as below:

calculateMySummary(options) {
    if (options.name == 'myPercent') {

       let totalResult = options.component.getTotalSummaryValue('myResult'); // always returns undefined

       let totalTarget = options.component.getTotalSummaryValue('myTarget'); // always returns undefined

       options.totalValue = (totalResult / totalTarget) * 100;
    }
}

I want percent be Percent = (Result / Target ) * 100, but I can't know how I can achieve this. Because getTotalSummmaryValue function only work for dxi-total-item, but my component is dxi-group-item and getTotalSummmaryValue always returns undefined for dxi-group-item.

What is the getTotalSummmaryValue alternative for dxi-group-item ? Thanks