多次元配列オブジェクトを一定のルールで横並びする方法はありますか

Question

多次元配列オブジェクトを一定のルールで横並びさせたいです。

map関数のループ中にCSSのpositionのtop, leftの値を取得して配列内の別の値をそのposition通りに、Vue.jsのfor文で出力したいのですが、topの値を思ったように取得できません。どなたか力をお貸しください。

やりたいこと

CSSのtopを合わせたい

現状

ループされるたびにtopを生成するため一定の間隔になっています。

topとleftを生成するために配列オブジェクトをmap関数でループします。その時leftの値をmoment.jsを使用してもとめます。topは一回ループするたびに値を取得したいのですが、現状一定の値であるため、task_codeごとにtopを取得するためにはどうすればよいでしょうか。

以下,コードです。お粗末だと思いますが、お力をお貸しください。

// data.js
export default
[
    [ // user_id:1 start
        [
            {
                input_time: 8,
                user_id: 1,
                task_code: "100",
                daily_day: "2021-02-01"
            },
            {
                input_time: 8,
                user_id: 1,
                task_code: "100",
                daily_day: "2021-02-02"
            },
            {
                input_time: 8,
                user_id: 1,
                task_code: "100",
                daily_day: "2021-02-08"
            }
        ],
        [
            {
                input_time: 8,
                user_id: 1,
                task_code: "101",
                daily_day: "2021-02-03"
            }
        ]
    ],// user_id:1 end
    [ // user_id:2 start
        [
            {
                input_time: 5,
                user_id: 2,
                task_code: "105",
                daily_day: "2021-02-01"
            },
            {
                input_time: 8.5,
                user_id: 2,
                task_code: "105",
                daily_day: "2021-02-02"
            },
        ],
        [
            {
                input_time: 0.5,
                user_id: 2,
                task_code: "100",
                daily_day: "2021-02-01"
            },
            {
                input_time: 3.5,
                user_id: 2,
                task_code: "100",
                daily_day: "2021-02-04"
            }
        ],
        [
            {
                input_time: 1,
                user_id: 2,
                task_code: "103",
                daily_day: "2021-02-01"
            }
        ]
    ]
]

<template>
  <div>
      <div class="p_hello">
          <div v-for="(d, index) in fn" :key="`first-${index}`" class="first">
              <div v-for="(i, index) in d" :key="`seconde-${index}`" class="seconde">
                  <div v-for="(j, index) in i" :key="`third-${index}`">
                      <div class="third" :style="j.style" :class="inputColor(j.item.input_time)">
                          {{j.item.input_time}}
                      </div>
                  </div>
              </div>
          </div>
      </div>
  </div>
</template>

<script>
import moment from 'moment'
import data from '../assets/api/data'
// console.log('data', data)

export default {
    data () {
        return {
            data,
            date: '2021-02-01',
            size: 30
        }
    },
    computed : {
        fn () {
            const start = moment(this.date)
            let top = 20
            let style
            return this.data.map(value => {
                return value.map(value => {
                    return value.map(item => {
                        const from = moment(item.daily_day)
                        let diff = from.diff(start, 'days')
                        let left = diff * this.size
                        style = {
                            top: `${top}px`,
                            left: `${left}px`,
                            color: 'black'
                        }
                        top = top + 40

                        return {
                            style,
                            item
                        }
                    })
                })
            })
        }
    },
    methods: {
        inputColor(input) {
            if (input > 7) {
                return 'green'
            }
            if (input < 4) {
                return 'red'
            }
        }
    }
}
</script>


<style>
    .first {
        position: relative;
        display:flex;
    }
     .seconde {
        position: relative;
        display: flex;

        background-color:azure;

    }

    .third {
        position: absolute;
        font-size: 20px;
    }
    .green {
        background: rgb(153, 235, 210);
    }
    .red {
        background: rgb(236, 81, 127);
    }
</style>

Answer 1

解決案

3dkoiさんが実現されたいtask_codeごとにtop位置を合わせる方法は色々ありそうですが、3dkoiさんが現在実装されている方法に出来るだけ沿って実装してみます。

fn() のロジックを下記のようにすれば、添付したスクリーンショットのようにtopの位置を揃えることができます。

fn () {
    const start = moment(this.date)
    let top = 20
    let style
    return this.data.map(value => {
        return value.map((value)  => {
            const result = value.map(item => {
                const from = moment(item.daily_day)
                let diff = from.diff(start, 'days')
                let left = diff * this.size
                style = {
                    top: `${top}px`,
                    left: `${left}px`,
                    color: 'black'
                }
                return {
                    style,
                    item
                }
            })
            top = top + 40
            return result
        })
    })
}

解説

変わった部分は、value.mapの部分からです。
同じtask_code内のループでtop = top + 40を行ってしまうと、3dkoiさんのおっしゃる通りループするたびにtopの位置が変わってしまいます。
上記のコードは、この問題に対して「task_codeが切り替わる時にtopの位置を更新する」ことで、それを解決しています。
value.map()内で、同じtask_codeの位置をそれぞれ割り出した後、それをreturnする前にtopの位置を更新することで、同じtask_code内のtopの値が同じになるようにしています。

何か不明な点などあればお伝えください。
ご確認をよろしくお願いします！

Comments

[3dkoi]

回答ありがとうございます。
3dkoiです。
topを更新するタイミングがずれておりました。
勉強になりました。
ありがとうございました。

[3dkoi]

先日はご回答ありがとうございました。大変勉強になりました。

大変申し訳ないのですが、もう一つ質問があります。
この質問の続きのような実装なのですが、この配列オブジェクトをセレクトボックスでフィルタリングするとなった場合のtopの再計算の方法で悩んでおります。
新たに質問を投稿しております。
もし、ご興味があれば、ご教示おねがいしたいと思います。