RustyNail

<template>
    <!-- <fe-card style=" margin-top: 10px;"> -->
        <div class="trend-panel">
            <div class="trend-row" v-for="(r, index) in days" :key="index">
                <fe-popover v-for="(c, ci) in r" :key="ci">
                    {{c.date + '(' + c.num +')'}}
                    <template #widget><div class="trend-cell"  v-bind:style="('background-color:' + calColor(c.num))" ></div></template>
                </fe-popover>
            </div>
        </div>
    <!-- </fe-card> -->
</template>

<style>




.trend-panel {
    margin-top: 10px;
    display: flex;
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
}

.trend-row {
    display: flex;
    flex-direction: column;
}

.trend-cell{
    width: 15px;
    height: 15px;
    background-color: bisque;
    margin: 1px;
}
</style>


<script>

let formateDate = (d) => d.getFullYear() + "-" 
+ ((d.getMonth() + 1) < 10 ? "0" + (d.getMonth() + 1) : d.getMonth() + 1) + "-" 
+ ((d.getDate() + 1) < 10 ? "0" + (d.getDate() + 1) : d.getDate() + 1)

import {Card, Popover} from '@fect-ui/vue'

export default defineComponent( {
    name: "Trendy",
    data() {
        return {
            days: []
        }
    },
    components: {
        [Card.name]: Card,
        [Popover.name]: Popover,
    },
    methods: {
        calColor: function(num) {
            // if (num == 0) return '#aaa'
            if (num == 0) return '#454a57b3'
            if (num >= 6) return '#516939'
            if (num >= 4 && num < 6) return '#6c8c4c'
            if (num >= 2 && num < 4) return '#87ab63'
            if (num > 0 && num < 2) return '#9fbc82'
            // if (num > 0 && num < 2) return '#b7cda1'
        }
    },
    mounted() {
        let now = new Date()
        let nowFormatted = formateDate(now)
        console.log("now: ", nowFormatted)
        // from 60 days ago
        let lastDay = new Date(now.getTime() - 140 * 24 * 60 * 60 * 1000) 

        var tmp = []

        while(true) {
            if (lastDay.getTime() >= now.getTime()) {
                break
            }
            tmp.push({
                date: formateDate(lastDay)
            })
            lastDay = new Date(lastDay.getTime() + 24 * 60 * 60 * 1000)
        }

        var tM = []
        var row = []
        for(var d of tmp) {
            row.push(d)
            if (row.length < 7) {
                // row.push(d)
            } else {
                tM.push(row)
                row = []
            }
        }
        if (row.length > 0) {
            tM.push(row)
            row = []
        }


        fetch(`https://rustynail.me/someone/api/comment/latestCount/1000`)
        .then(resp => resp.json())
        .then(data => {
            var dm = new Map()
            for (var d of data) {
                dm.set(d.DateName, d.Num)
            }
            // console.log(data)
            for (var r of tM) {
                for (var c of r) {
                    if (dm.has(c.date)) {
                        c.num = dm.get(c.date)
                    } else {
                        c.num = 0
                    }
                }
            }
            console.log(tM)
            this.days = tM
        })

        
        // var m = []
        // for (var i=0; i < 7; i++) {
        //     var row = []
        //     for (var j=0; j < tM.length; j++) {
        //         if (tM[j].length < i + 1) {
        //             continue
        //         }
        //         row.push(tM[j][i])
        //    }
        //    m.push(row)
        // }


        // console.log(tM)
        
    }
})
</script>