복붙노트

[REACTJS] 모든 값 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>
    
  3. from https://stackoverflow.com/questions/48580593/reactjs-calculate-sum-of-all-values-present-in-table-column by cc-by-sa and MIT license