Hi here is the sample for code realted to your requrement :
 

public class OpportunitybyOwnerbasedontotal{

  @AuraEnabled
  public static List<aggregateResult> getopps() {
      return [SELECT Owner.name namee, Owner.Id oId, Sum(Amount) Totalsum, COUNT(Id) Total FROM Opportunity GROUP BY Owner.name,Owner.Id];
  }
      
    @AuraEnabled
    public static List<Opportunity> getOpportunityRecords(string ownerId) {
        return new List<Opportunity>([Select id,Name,Owner.name,Stagename,CloseDate from Opportunity Where OwnerId =: ownerId LIMIT 100]);
    }
}

LC :

<aura:component controller="OpportunitybyOwnerbasedontotal" implements="flexipage:availableForAllPageTypes,force:appHostable" access="global">
    <aura:handler name="init" value="{!this}" action="{!c.myAction}"/>
    <aura:attribute name="opportunities" type="Opportunity[]"/>
    <aura:attribute name="opportunitiesbByowner" type="Opportunity[]"/>
    
    
    <div class="slds-box" style="background:rgb(0, 161, 223);font-weight:bold;font-size:15pt;">
        <p>Opportunities Totals by Owner</p>
    </div><br/>
    
    
    <table class="slds-table slds-table--bordered slds-table--striped slds-table--cell-buffer slds-table--fixed-layout">
        <thead>
            <tr>
                <th scope="col">
                    <div class="slds-truncate" title="Owner" style="font-weight:bold;font-size:12pt;">
                        Owner
                    </div>
                </th>
                <th scope="col">
                    <div class="slds-truncate" title="Number of Opportunities" style="font-weight:bold;font-size:12pt;text-align:center;">
                        Number of Opportunities
                    </div>
                </th>
                <th scope="col">
                    <div class="slds-truncate" title="Opportunity Total by Owner" style="font-weight:bold;font-size:12pt;text-align:center;">
                        Opportunity Total by Owner
                    </div>
                </th>
            </tr>
        </thead>
        <tbody>
            
            <aura:iteration items="{!v.opportunities}" var="opp">
                <tr>
                    <td><div class="slds-truncate" title="{!opp.namee}"><a><ui:outputText click="{!c.Clicked}" title="{!opp.oId}" value="{!opp.namee}" /></a></div></td>
                    <td style="text-align:center"><div class="slds-truncate" title="{!opp.Total}">{!opp.Total}</div></td>
                    <td style="text-align:center"><div class="slds-truncate" title="{!opp.Totalsum}"><ui:outputNumber value="{!opp.Totalsum}" format='$###,###,###.00'/></div></td>  
                </tr>
            </aura:iteration>
        </tbody>
    </table>
    <div>
        
        
        <div style="text-align:center;font-size:25px;margin-top25px;">
            Opportunities
        </div>
        
        <table class="slds-table slds-table--bordered slds-table--striped slds-table--cell-buffer slds-table--fixed-layout">
            <thead>
                <tr>
                    <th scope="col">
                        <div class="slds-truncate" title="Number of Opportunities" style="font-weight:bold;font-size:12pt;text-align:center;">
                            Name
                        </div>
                    </th>
                    <th scope="col">
                        <div class="slds-truncate" title="Opportunity Total by Owner" style="font-weight:bold;font-size:12pt;text-align:center;">
                            Stage
                        </div>
                    </th>
                </tr>
            </thead>
            <tbody>
                <aura:iteration items="{!v.opportunitiesbByowner}" var="opp">
                    <tr>
                        <td><div class="slds-truncate">{!opp.Name}</div></td>
                        <td style="text-align:center"><div class="slds-truncate" title="{!opp.StageName}">{!opp.StageName}</div></td>
                    </tr>
                </aura:iteration>
            </tbody>
        </table> 
    </div>
</aura:component>

JS

({
	myAction : function(component, event, helper) {
		var action =component.get("c.getopps");
        console.log('The action value is: '+action);
         action.setCallback(this, function(a){ 
             
            component.set("v.opportunities", a.getReturnValue());
           //  console.log('The accs are :'+JSON.stringify(a.getReturnValue()));
            console.log('The accs are :'+JSON.stringify(a.getReturnValue()));
          
        });
        $A.enqueueAction(action);
	},
    Clicked : function(component, event, helper){
        var ctarget = event.getSource().get("v.title");
        console.log(ctarget);
        var action = component.get("c.getOpportunityRecords");
         action.setParams({ ownerId :  ctarget});
         action.setCallback(this, function(response) {
            var state = response.getState(); //Checking response status
            console.log("opportunities... "+JSON.stringify(response.getReturnValue()));
            if (component.isValid() && state === "SUCCESS")
                component.set("v.opportunitiesbByowner", response.getReturnValue());  // Adding values in Aura attribute variable.   
        });
        $A.enqueueAction(action);
    }
})

i hope it helps you.
  Let me inform if it helps you and kindly mark it best answer if it helps you so it make proper solution for others
thanks
http://sfdcmonkey.com