React/X-Bar chart 만들기

 

챠트를 만들어야 하는데 마땅한게 없어서 만들어 보았다. (x,y chart는 간단하니깐!)

 

데시보드

import React, { Component } from 'react';
...

class DashboardTab1 extends Component {
  ...

  render() {
    const receiptStatusCounts = {
      PAY_COMPLETE_AMOUNT: 50.0,
      PAY_COMPLETE_COUNT: 2,

      PAY_FAIL_AMOUNT: 3.0,
      PAY_FAIL_COUNT: 1,

      PAY_WAIT_AMOUNT: 7.5,
      PAY_WAIT_COUNT: 1,

      payCompletePercent: 50,
      payFailPercent: 25,
      payWatePercent: 25,
    };

    const styleBar1 = {
      width: receiptStatusCounts.payFailPercent + '%',
      marginRight: receiptStatusCounts.payFailPercent !== 0 && '4px',
    };
    const styleBar2 = {
      width: receiptStatusCounts.payWatePercent + '%',
      marginRight: receiptStatusCounts.payWatePercent !== 0 && '4px',
    };
    const styleBar3 = {
      width: receiptStatusCounts.payCompletePercent + '%',
      marginRight: receiptStatusCounts.payCompletePercent !== 0 && '4px',
    };

    return (
      <>
        <div className="dashboard-tab-wrap">
          <div className="header">
            <div className="icon">
              <img src="/images/icon_home_line_gray85_18.svg" alt="" />
            </div>
            <div className="text">이번달 수납 현황</div>
            <div className="right"></div>
          </div>
          <div className="body">
            <div className="g-chart-percent-bar-x-wrap">
              <div className="chart-x-bar" style={styleBar1}></div>
              <div className="chart-x-bar" style={styleBar2}></div>
              <div className="chart-x-bar" style={styleBar3}></div>
            </div>

            <div className="g-chart-labels-wrap">
              <div className="row">
                <div>
                  <label className="g-circle-box red"></label>
                  미납
                  <span className="g-black-700-14">{Util.getPrice(receiptStatusCounts.PAY_FAIL_COUNT)}</span>
                </div>
                <div></div>
                <div className="g-black-700-14">{Util.getPrice(receiptStatusCounts.PAY_FAIL_AMOUNT)}만원</div>
              </div>

              <div className="row">
                <div>
                  <label className="g-circle-box orange"></label>
                  예정
                  <span className="g-black-700-14">{Util.getPrice(receiptStatusCounts.PAY_WAIT_COUNT)}</span>
                </div>
                <div></div>
                <div className="g-black-700-14">{Util.getPrice(receiptStatusCounts.PAY_WAIT_AMOUNT)}만원</div>
              </div>

              <div className="row">
                <div>
                  <label className="g-circle-box green"></label>
                  완납
                  <span className="g-black-700-14">{Util.getPrice(receiptStatusCounts.PAY_COMPLETE_COUNT)}</span>
                </div>
                <div></div>
                <div className="g-black-700-14">{Util.getPrice(receiptStatusCounts.PAY_COMPLETE_AMOUNT)}만원</div>
              </div>
            </div>
          </div>
        </div>
      </>
    );
  }
}

export default wrapWithBase(DashboardTab1);

 

css

.g-chart-percent-bar-x-wrap { display: flex; flex-direction: row; align-items: flex-start; width: 100%; height: 10px; padding: 0px; padding: 0 23px;  align-self: center; justify-self: center; }
.g-chart-percent-bar-x-wrap .chart-x-bar { height: 10px; border-radius: 20px; }
.g-chart-percent-bar-x-wrap .chart-x-bar:nth-child(1) { background: #FF4D4F; }
.g-chart-percent-bar-x-wrap .chart-x-bar:nth-child(2) { background: #FAAD14; }
.g-chart-percent-bar-x-wrap .chart-x-bar:nth-child(3) { background: #52C41A; }

.g-chart-labels-wrap { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; padding: 16px 35px 0; gap: 8px; }
.g-chart-labels-wrap > .row { display: flex; flex-direction: row; align-items: center; width: 100%; height: 22px; padding: 0px; line-height: 22px; gap: 12px; }
.g-chart-labels-wrap > .row > div:nth-child(1) { display: flex; justify-content: center; align-items: center; width: fit-content; gap: 8px; }
.g-chart-labels-wrap > .row > div:nth-child(2) { border: 1px dashed rgba(0, 0, 0, 0.15); flex: 1 1 auto; border-top: none; }
.g-chart-labels-wrap > .row > div:nth-child(3) { width: fit-content; }