はじめに

前回の[[僕のlonicでスマホアプリ開発]#6 データインポート/エクスポート画面作成(https://qiita.com/SSKNOK/items/2e71535b154df4670a80)続きになります。
今回作成するスマホアプリは画面が以下の通りになる想定ですが、

残高確認画面
残高登録画面
口座登録画面
データインポート/エクスポート画面

今回は残高グラフ画面を実装します。

「いや、そんな画面無いじゃん」って感じですが、隠し機能って感じですね。
前回開発した残高確認画面にくっついてる「グラフ」ボタンを押下したら遷移して画面を表示するイメージ。

残高画面開発

入力項目

入力項目は特に想定してないですが、パスパラメータで

銀行名
口座名義人名
検索日FROM
検索日TO
を受け取ります。

詰まったポイント

パスパラメータ

詰まったポイントではないんですが、他の画面と違って画面遷移時のパラメータがあるのがちょい癖ポイント1つ目です。
何か他に良いパラメータの渡し方はなかったのか。
パラメータを渡すときはvue-routerのindex.jsにパスパラメータの定義を行います。

src/router/index.js

import { createRouter, createWebHistory } from '@ionic/vue-router';
import TabsPage from '../views/TabsPage.vue'

const routes = [
  {
    path: '/',
    redirect: '/tabs/view'
  },
  {
    path: '/tabs/',
    component: TabsPage,
    children: [
      {
        path: '',
        redirect: '/tabs/view'
      },
      {
        path: 'view',
        component: () => import('@/views/View.vue')
      },
      {
        path: 'balance/:balanceNo',
        component: () => import('@/views/Balance.vue')
      },
      {
        path: 'account',
        component: () => import('@/views/Account.vue')
      },
      {
        path: 'importExport',
        component: () => import('@/views/importExport.vue')
      },
      {
        path: 'graph/:bank/:accountHolder/:fromDate/:toDate', //←ココ
        component: () => import('@/views/Graph.vue')
      }
    ]
  }
]

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes
})

export default router

グラフ描画処理

createGraphで描画するデータをコネコネして、最後にdescribeGraphに渡すことでグラフを描画しています。
グラフの描画にはChart.jsを使っています。
Chart.jsはとりあえずグラフが描画できればそれでよかったので、あんま深く調べず、コチラをまんまコピって使いました。

src/views/Graph.vue

<script setup>
/* ----------------------------------
method:グラフ作成。
detail:グラフに必用なデータを取得し、グラフを描画する。
 ---------------------------------- */
const createGraph = function (bank, accountHolder, fromDate, toDate) {
  // 検索条件の組み立て
  // 銀行
  let searchBank = checkEmptyValue(bank)
    ? SEARCH_ALL
    : SEARCH_TEMPLATE.replaceAll("{keyWord}", bank);
  // 口座名義人
  let searchAccountHolder = checkEmptyValue(accountHolder)
    ? SEARCH_ALL
    : SEARCH_TEMPLATE.replaceAll("{keyWord}", accountHolder); // 口座名義人
  // 対象日（FROM）
  let searchFromDate = checkEmptyValue(fromDate) ? MINIMUM_FROM_DATE : fromDate;
  // 対象日（TO）
  let searchToDate = checkEmptyValue(toDate) ? MAXIMUM_TO_DATE : toDate;

  // 口座情報のリストを生成
  let accountList = [];
  storage.forEach((value, key) => {
    let infoJson = JSON.parse(value);
    // データタイプがaccountInfoなら口座情報として読み込む
    if (infoJson.dataType === DATA_TYPE_FOR_ACCOUNT) {
      accountList.push({
        key: key,
        bank: infoJson.bank,
        accountHolder: infoJson.accountHolder,
      });
    }
  });

  // 日付別に残高を合算
  const recordDataMap = new Map();
  storage
    .forEach((value, key) => {
      let infoJson = JSON.parse(value);

      // accountKeyから口座情報を取得して銀行と口座名義人を取得
      let accountInfoBank = "";
      let accountInfoAccountHolder = "";
      accountList.forEach((account) => {
        if (account.key === infoJson.accountKey) {
          accountInfoBank = account.bank;
          accountInfoAccountHolder = account.accountHolder;
          return true;
        }
      });

      // データタイプがbalanceInfoなら残高情報として読み込む
      if (infoJson.dataType === DATA_TYPE_FOR_BALANCE) {
        let balanceData = {
          key: key,
          accountInfoBank: accountInfoBank,
          no: infoJson.no,
          recordDate: infoJson.recordDate,
          balance: infoJson.balance,
          bank: accountInfoBank,
          accountHolder: accountInfoAccountHolder,
        };
        // 表示対象の場合は日付別に合算する。
        if (
          checkBalanceInfoMatchCondition(
            balanceData,
            searchBank,
            searchAccountHolder,
            searchFromDate,
            searchToDate
          )
        ) {
          if (recordDataMap.has(balanceData.recordDate)) {
            let newBalance =
              Number(infoJson.balance) +
              Number(recordDataMap.get(balanceData.recordDate));
            recordDataMap.set(balanceData.recordDate, newBalance);
          } else {
            recordDataMap.set(balanceData.recordDate, infoJson.balance);
          }
        }
      }
    })
    .then(() => {
      let graphData = []; // 描画用のデータ
      recordDataMap.forEach((value, key) => {
        graphData.push({ x: key, y: value });
      });

      //データを時系列順に並べ替え
      graphData.sort(function (first, second) {
        const firstRecordDate = new Date(first.x);
        const secondRecordDate = new Date(second.x);
        if (firstRecordDate < secondRecordDate) {
          return -1;
        } else if (firstRecordDate > secondRecordDate) {
          return 1;
        } else {
          return 0;
        }
      });

      describeGraph(graphData);
    });
};

/* ----------------------------------
method:グラフ描画
detail:受け取った値のリストに対するグラフを描画する。
 ---------------------------------- */
const describeGraph = function (data) {
  // test
  new Chart("chart", {
    type: "line",
    data: {
      datasets: [
        {
          label: "BALANCE GRAPH",
          backgroundColor: "rgb(255, 99, 132)",
          borderColor: "rgb(255, 99, 132)",
          fill: false,
          data: data,
        },
      ],
    },
    options: {
      aspectRatio: 0.6,
      scales: {
        xAxes: [
          {
            type: "time",
            time: {
              unit: "day",
            },
          },
        ],
      },
    },
  });
};
</script>

ソース全量

Account.vue全量