簡単なWebアプリ作成 ～無駄な会議を撲滅しよう!! ～ part5～

先日ご報告しました通り、日付毎の会議にて発生するお金をグラフ化するページを作成しましたので報告します！！
最終的に出来た成果物はこんな感じになりました！！

まずComboBoxには1週間ごとにデータのある週間だけ選択できるようにすること、そして1年分のデータを選択できるようにしたかったので、
Webアプリ表示時に1週間毎に1年分のデータを収集するための処理を実行しました。
まずはフロントエンドです。
サーバサイドへのpostリクエストにはajaxを用いました。
前回ご連絡しました通り、ループはフロントサイドで実行します。
ループ処理を行うにあたり、何も対策を打たないと非同期処理になってしまうため、async、awaitを用いて同期処理になるようにしました。
。。。勝手に非同期になるの結構めんどくさい！！

async function do_Init(days){
    var select = document.getElementById("Init");
    
    for(var i=0;i<50;i++){
      await Time_ajax(i,select);
    }
}

function Time_ajax(i,select){
  var flg = true;
  $.ajax({
    url:"http://192.168.56.2:3000/result_times",
    type:"POST",
    async:true,
    data:{"num":i*7},
    dataType:"json",
    success:function(result){
        for(var i=0;i<begin_buf.length;i++){
            if(begin_buf[i] == result["begin_day"]){
                flg = false;
                i = begin_buf.length;
            }
        }
        if(flg == true){
            var option = document.createElement("option");
            option.text = result["begin_day"] + "～" + result["end_day"];
            option.value = result["begin_day"] + "～" + result["end_day"];
            select.appendChild(option);
            begin_buf.push(result["begin_day"]);
        }else{
            flg = true;
        }
    }
  });
}

ここで、こちらのソースで週選択用のComboBoxを作成しています。
作成するサンプルはこちらになります。

    var select = document.getElementById("Init");
    var option = document.createElement("option");
    option.text = result["begin_day"] + "～" + result["end_day"]; 
    option.value = result["begin_day"] + "～" + result["end_day"]; 

そして、サーバサイド側のソースは下記になります！！
やっていることはpart2で実施した内容と同じになります。
postリクエストを受け取ったら、DB内のテーブルから必要なデータを読み取り、フロントサイドに返しています。
ここで、DBの読み出し処理は遅くなるのでこちらはPromise、.thenを用いて同期処理となるようにしました。

app.post('/result_times',(req,res)=>{
    var buf = req.body.num;
    p = Get_MeetingList_SplitWeek(buf);
    p.then(function(day_array){
        day_list ={day:day_array,begin_day:begin_arry,end_day:end_arry,num:buf};
        res.send(day_list); 
    });
});

function Get_MeetingList_SplitWeek_sub(GetMemSalary){
    return new Promise(resolve =>{
        var buf = null;
        var array_buf = [];
        db.all(GetMemSalary, function (err, rows) {
            rows.forEach(function(row){
                if(buf== null || row.date !=buf){
                    buf = row.date;
                    array_buf.push(row.date);
                }
            });
            resolve(array_buf);
        });
    });
}

これで1年分のデータを週ごとに選択できるComboBoxが出来ました。

次にcomboBoxで選択した週データから会議時間でのお金をグラフ化するためにサーバサイド側から日付毎に発生したお金を読み出します。
、、、といってもやっていることは先ほどのComboBoxと同じで、
フロントサイドで1日毎に日付データをサーバサイドにpost。
サーバサイドでは受け取った日付データを元にお金をresponse。
これを1週間分(7日分)実施しています。
同じようなコードを載せても面白くないかと思いますので、割愛！！

最後にグラフの表示です。
グラフ作成はこちらを参考にさせていただきました！！
qiita.com

実際に作成したコードはこちらになります。
今回は棒グラフで表示させたかったため、type: 'bar'としました。
また最大値は500にセット(特に理由はないですw)。

    var ctx = document.getElementById("myLineChart");
    var myLineChart = new Chart(ctx, {
      type: 'bar',
      data: {
        labels:weeks,
        datasets: [
          {
            label: '会議発生金額',
            data:m_meetingMoney,
            borderColor: "rgba(0,0,255,1)",
            backgroundColor: "rgba(219,39,91,0.5)"
          }
        ],
      },
      options: {
        title: {
          display: true,
          text: '会議により発生する費用'
        },
        scales: {
          yAxes: [{
            ticks: {
              suggestedMax: 500,
              suggestedMin: 0,
              stepSize: 50,
            }
          }]
        },
      }
    });

下記でx軸とY軸をセットしております。
weekには1週間分の配列。
m_meetingMoneyには各日毎のお金格納されています。

data: {
        labels:weeks, ←X軸
        datasets: [
          {
            label: '会議発生金額', ←グラフラベル名
            data:m_meetingMoney, ←Y軸
            borderColor: "rgba(0,0,255,1)", ←グラフの色
            backgroundColor: "rgba(219,39,91,0.5)" ←背景色
          }

ということで、、、part1～part5でで
会議時間により発生しているお金をサーバ側で保存しておき、結果をグラフ表示させるまで出来ました！！
結構時間かけてしまった。。。
特に番外編に記載した非同期処理にはかなり苦戦しました。。。(泣)

次回は、デバイス制御とかやっていこうかな？
Webアプリも作成していて面白いので、いいアイデア思いついたらまた作成したいと考えております！！
、、、色々作ってみたい物多くて大変だww。