[REACTJS] 모든 값 ReactJs 계산 합계 표 열에 제시

모든 값 ReactJs 계산 합계 표 열에 제시

해결법

1. ---

   1.나는 감소하여 합계를 얻을 것입니다 :

   나는 감소하여 합계를 얻을 것입니다 :

   const SumValue = this.state.value && this.state.value.reduce((a, v) => a + v, 0)
   

2. ---

   2.

   1) initial columnNames and array list
   
   state = {
       callList: [],
       columnModel: [
          { columnName: "date" },
          { columnName: "totalCalls" },
          { columnName: "answeredCalls" },
          { columnName: "abandonedCalls" },
          { columnName: "abandonRate" },
          { columnName: "avgAnswerSpeed" },
       ]
   
   };
   
   2) Get data from api and prepare array data
   
   try {
       const { errors, list, success } = (await apiService.getCalls(request)).data;
       if (success) {
   
           // first list is normal numbers count only, 
           // if you want count avg sum for some columns send second param array list and include column names
           // now i want count avg for 'abandonRate', 'avgAnswerSpeed' , others just count sum
   
           this.setState({ 
               callList: list,
               callListSum: this.sumCount(
                   list, 
                   ['abandonRate', 'avgAnswerSpeed']
               )
           })
       }
   } catch (error) {
       console.log(error);
   }
   
   sumCount = (list = [], avgColumns = []) => {
       const sum = {};
   
       // count numbers
       list.map((item) => {
           Object.entries(item).map(([key, val]) => {
               if (typeof (val) === 'number') {
                   sum[key] = sum[key] ? (sum[key] + val) : val;
               }
           })
       });
       
       // count avg
       avgColumns.map(key => {
           if (sum[key]) {
               sum[key] = sum[key] / list.length;
           }
       })
       return sum;
   }
   
   
   3) Render data
   
   <table>
       <thead>
           <tr style={{ backgroundColor: "#F5F7FA" }}>
               {
                   this.state.columnModel.map((item, i) =>
                     <th key={i}> {item.columnName}</th>
                   )
               }
           </tr>
       </thead>
       <tbody>
           {
               this.state.callList.map(
               (info, index) => (
                   <tr
                       key={index}
                   >
                       {
                           this.state.columnModel.map((item, i) =>
                              (
                               <td key={i}>
                                 {info[item.columnName]}
                               </td>
                              )
                           )
                       }
                   </tr>
               )
           )}
           {/* Render sum area */}
           <tr 
               style={{ backgroundColor: "#F5F7FA" }}
           >
               {
                   this.state.columnModel.map((item, i) =>
                       (
                           <td style={{ fontWeight: "bold" }} >
                            {this.state.callListSum[item.columnName]}
                           </td>
                       )
                   )
               }
           </tr>
       </tbody>
   </table>
   

from https://stackoverflow.com/questions/48580593/reactjs-calculate-sum-of-all-values-present-in-table-column by cc-by-sa and MIT license