Chart.js/FireBase를 이용하여 Vue3에서 가계부 응용 프로그램 만들기

안녕하세요. 이번에는 돈 관리가 엉망인 자신을 위해 가계부 애플리케이션을 만들었는데, 제가 소개해 드리려고 합니다.
※ 데이터는 임시로 입력된 것이기 때문에 내 수지가 아닙니다!
사용된 기술
・Windows 10(PC)
・Type Script
・HTML/CSS
・Vue3
・Chart.js
・FireBase
・Bootstrap5
・Font Awesome 6
스크린
상단: 수입/지출/저축의 수지 데이터를 계산해 낸다.
중간: 차트에서 범주별 통계 - 원형 차트로 표시
다음 부분: 분류표 및 구체적인 금액별
※ 연습이니까 포워드 화면을 참고해서 만들었어요.

데이터베이스 내용
· 사용자
사용자의 이름
· 사용자의 메일 주소(ID)
매월
• 매출: ID/범주 이름/프로젝트 이름/금액
• 지출: ID/범주 이름/프로젝트 이름/금액
・범주: ID/범주 이름/범주 색상/범주 아이콘
일부분을 잘라내는 게 이런 느낌이에요.

범주 섹션

할 수 있는 일
(1) 수입/지출/데이터 증가(공사 중)
(2) FireBase에 등록된 데이터 취득 → 케이크 맵에 분류별로 총 반영
(3) 떡그림/표는 수입과 지출을 통해 전환할 수 있다
(4) 월 자동 ~ 이달 사양
※ 공사 중인 아이템은 조금 수정한 후 Qita를 갱신해야 합니다.
하나하나 코드로 상세히 설명하다
(1) 수입/지출/데이터 증가(공사 중)
axios를 사용하여FireBase에 보낼 예정입니다.
(2) FireBase에 등록된 데이터 가져오기
Chart.js를 사용하여 떡그림을 만들었습니다.
먼저 빈 떡그림을 말씀드리겠습니다.

    const pieData1: ChartData<"pie"> = {
      labels: [],
      datasets: [
        {
          label: "inData",
          data: [],
          backgroundColor: [],
          hoverOffset: 4,
        },
      ],
    };

그리고watchEffect에서는 데이터가 바뀌면 떡그림을 다시 그려야 한다.(이하 코드는 watchEffect 내의 코드)

//取得したデータ→{色:XX,価格:XX}の配列を作成
const array1 = new Array<any>();
//カテゴリの情報配列
const categoryArray1 = ref(new Array<string>());
//描画用価格の情報配列
const priceArray1 = ref(new Array<number>());
//描画用色の情報配列
const colorArray1 = new Array<string>();
//カテゴリのアイコンの配列
const markArray1 = ref(new Array<string>());

      //response = FireBaseから持ってきたデータ
      //カテゴリ名とその価格をpush{category:XX,price:XX}
      for (const responseItem of response[nowMonth].in) {
        array1.push({
          category: String(responseItem.category),
          price: Number(responseItem.price),
        });
      }

      //カテゴリ名が被っていたら価格を合わせて排除
      for (let i = 0; i < array1.length; i++) {
        let answer = array1[i].price;
        for (let j = i + 1; j < array1.length; j++) {
          if (array1[i].category === array1[j].category) {
            answer = answer + array1[j].price;
            array1.splice(array1[j], 1);
          }
        }
        priceArray1.value.push(answer);
        categoryArray1.value.push(array1[i].category);
      }

      //円グラフデータに作成した配列データを格納
      pieData1.labels = categoryArray1.value;
      pieData1.datasets[0].data = priceArray1.value;

      //グラフの色とマーク情報を取得
      //（色はFireBase上であらかじめカテゴリごとに決めているのでそれを取得）
      for (const category1 of categoryArray1.value) {
        for (const category2 of categoryData) {
          if (category1 === category2.name) {
            colorArray1.push(category2.color);
            markArray1.value.push(category2.mark);
          }
        }
      }
      pieData1.datasets[0].backgroundColor = colorArray1;

      //v-forでHTML部分に表示させる用配列作成
      for (let i = 0; i < categoryArray1.value.length; i++) {
        inArray.value.push({
          category: categoryArray1.value[i],
          price: priceArray1.value[i],
          mark: markArray1.value[i],
          color: colorArray1[i],
        });
      }

정말 귀찮아요!!
한마디로 최초로 발표된 떡그림 데이터에 공백이 있는 부분에 데이터를 넣은 느낌.
(3) 떡그림/표는 수입과 지출을 통해 전환할 수 있다
v-show를 사용하여 디스플레이를 전환할 수 있습니다.

<!-- ボタンのコーナー -->
    <div class="btnbtn">
      <span class="out" v-on:click="inOutFlug = false"
        ><button
          type="button"
          :class="{ onswitch: !inOutFlug, offswitch: inOutFlug }"
        >
          支出
        </button></span
      >
      <span class="in" v-on:click="inOutFlug = true"
        ><button
          type="button"
          :class="{ onswitch: inOutFlug, offswitch: !inOutFlug }"
        >
          収入
        </button></span
      >
    </div>

진짜/가짜를 전환할 때 적용되는 CSS도 전환 중
지출과 수입 버튼은 때로는 회색으로, 때로는 흰색으로 변한다.
수입의 표시는 이렇다.늑대인간은 늑대로 변하기 때문에 굴러다니는 것에 주의해야 한다.(?)

(4) 월 자동 ~ 이달 사양
Date-fns에서 이달의 달을 얻었기 때문에.
이달의 달을 자동으로 표시하고 데이터도 이달에 받는다.
잘 됐다.
총결산
앞으로 추가하고 싶은 기능은
• 1년 치 데이터 확인 가능
• 카테고리 누르기 → 상세 화면으로 날아가면 무엇을 했는지 자세히 볼 수 있다
· 추가 카테고리
・ 접선 도표로 광열비 데이터의 추이를 나타낸다
잠깐...
시간 맞추기가 어려워서 이 기사를 계속 업데이트할 시간이 있을 것 같다.사실 나는 금전 공격수처럼 API를 이용해 계좌 정보와 카드 정보를 얻고 싶었지만 Giit에서push하기 어려워 잠시 사직했다.이것도 현지에서 해보고 싶어요.
↓하고 싶은 징조
Typerscript로 UFJ 은행 API를 사용해 봤어요.
그래서 이번에 초간단한 가계수지부 앱을 만들었다.
시청해 주셔서 감사합니다.