20220808 [Node.js/Vue.js]

시간대별 주문내역 조회

year: { $year: { date : '$regdate', timezone:'Asia/Seoul'} },
month: { $month: { date : '$regdate', timezone:'Asia/Seoul'} },
day: { $dayOfMonth: "$regdate" },
hour: { $hour: "$regdate" },
minutes: { $minute: "$regdate" },
seconds: { $second: "$regdate" },
milliseconds: { $millisecond: "$regdate" },
dayOfYear: { $dayOfYear: "$regdate" },
dayOfWeek: { $dayOfWeek: "$regdate" },
week: { $week: "$regdate" }

routes/food/fd_order.js

// 시간대별 주문내역
// 127.0.0.1:3000/api/fd_order/hourgroup.json
// 식당의 토큰
router.get('/hourgroup.json', auth.checkToken, async function(req, res, next) {
    try {
        // 토큰에서 정보 추출 식당기본키, 권한
        const fid = req.body.FID;
        const role = req.body.ROLE;

        if(role === 'RESTAURANT') {
            // 메뉴에서 식당기본키를 이용하여 해당하는 항목 가져오기
            const result = await Food.find({ restaurantcode:fid})
                            .select({_id:1})
                            .sort({regdate:-1});

            // [ {_id:11}, {_id:22}]  => [11,22]
            let arr = [];
            for( let tmp of result) {
                arr.push( tmp._id );
            }

            console.log(arr);

            const result1 = await Order.aggregate([
                {
                    $match : {
                        foodcode : {
                            $in : arr
                        }
                    }
                },
                {
                    $project : {
                        regdate : 1, //날짜
                        cnt : 1,    // 주문수량  
                        month : { $month : { date : '$regdate', timezone:'Asia/Seoul'} },
                        hour : { $hour : { date : '$regdate', timezone:'Asia/Seoul'} },
                    }
                },
                {
                    $group : {
                        _id     : '$hour',
                        sum     : {$sum : '$cnt'},
                        count   : {$sum : 1}
                    }
                },
                {
                    $sort : {
                        _id : 1
                    }
                }
            ]);

            return res.send({status:200, result : result1});
        }
        return res.send({status:0});
    }
    catch(e){
        console.error(e);
        return res.send({status:-1, result:e});
    }
});

메뉴별 주문내역 조회

routes/food/fd_order.js

// 메뉴별 주문내역
// 127.0.0.1:3000/api/fd_order/menugroup.json
// 식당의 토큰
router.get('/menugroup.json', auth.checkToken, async function(req, res, next) {
    try {
        // 토큰에서 정보 추출 식당기본키, 권한
        const fid = req.body.FID;
        const role = req.body.ROLE;

        if(role === 'RESTAURANT') {
            // 메뉴에서 식당기본키를 이용하여 해당하는 항목 가져오기
            const result = await Food.find({ restaurantcode:fid})
                            .select({_id:1})
                            .sort({regdate:-1});

            // [ {_id:11}, {_id:22}]  => [11,22]
            let arr = [];
            for( let tmp of result) {
                arr.push( tmp._id );
            }
            console.log(arr);

            const result1 = await Order.aggregate([
                {
                    $match : {
                        foodcode : {
                            $in : arr
                        },
                        step : 1,
                    }
                },
                {
                    $project : {
                        foodcode : 1, // 메뉴 코드
                        cnt : 1,    // 주문수량  
                    }
                },
                {
                    $group : {
                        _id     : '$foodcode',
                        sum     : {$sum : '$cnt'},
                        count   : {$sum : 1}
                    }
                },
                {
                    $sort : {
                        _id : 1
                    }
                }
            ]);

            //ORDER

            /*
            [
                { _id: 1011, sum: 1, count: 1 },
                { _id: 1012, sum: 13, count: 13 },
                { _id: 1015, sum: 2, count: 2 },
                { _id: 1016, sum: 2, count: 2 }
            ]
            */
            
            // { _id: 1011, sum: 1, count: 1 }
            console.log(result1);

            //FOOD
            let arr1 = [];
            for(let tmp of result1) {
                console.log(tmp);
                const result2 = await Food.findOne({ _id:tmp._id })
                                .select( { name:1, price:1  } );
                arr1.push({group: tmp, food:result2});
            }

            return res.send({status:200, result : arr1});
        }
        return res.send({status:0});
    }
    catch(e){
        console.error(e);
        return res.send({status:-1, result:e});
    }
});

Chart.js란?

Chart.js는 데이터 시각화를 위한 JS라이브러리 3대장(D3.js, three.js, chart.js)중 접근하기 가장 쉽고 직관적인 라이브러리이다.

차트를 그리기 위한 곳에 <canvas>태그를 작성하고 js파일을 통해 해당 차트를 꾸며주면 된다.

chart.js 공식문서

차트 모듈 설치

Chart.js를 설치하는 방법은 npm방식이나 CDN방식, Github방식이 있다.

npm 방식을 이용하여 설치하여 진행
npm package - chart.js

위 사이트에 접속하여 알맞은 버전을 선택하여 cmd에서 설치를 진행한다

CMD> npm install chart.js@2