18. Vue3 + D3.js 코로나 감염 공공데이터 예제 코드 최종

이전 블로그에서 Node.js를 통해 전국 시도 코로나 감염 데이터를 가지고 왔다. 

 

이제 데이터처리를 해야하는데 데이터는 두개의 데이터로 분류된다.

 

1. D3.js 지도로 표현할 데이터

2. Chart.js에서 막대그래프로 표현할 데이터

 

메인 페이지에서 배너 팝업창 호출

 

Chart.js는 배너 팝업창으로 처리해야 하기 때문에 메인 페이지가 시작되면서 호출하면 된다.

 

<template>
    <div id="map-wrapper" class="map-wrapper">
        <div v-if="loading" class="flex justify-center">
            ...
        </div>
        <div v-else >
            
        </div>
        <Banner :mdata = "mapdata" :area="currentProvince"/>

    </div>
</template>

 

팝업창에는 지역과 데이터가 표현되어야 하기때문에 지역 정보와 데이터를 전달한다. 

 

<Banner :mdata = "mapdata" :area="currentProvince"/>

 

그런데 코로나가 감소하는 것이 아니라 증가하는 것이로 보인다.

 

CovidTrand.vue 에서 지역 데이터를 쿼리하고 데이터만  Barchart.vue에 넘겨 막대그래프를 그린다. 

 

아래의 코드는 지역데이터를 선택했을 경우 다시 request를 보내고, 결과 값을 

Barchart.vue로 넘기는 부분이 포함되어있다.

chartjs 예제 코드는 인터넷에 많은 코드가 존재하니 참고하면 될 것 같다.

 

물론 최적화는 되지 않았으니, 참고용으로 공유한다.

 

<!-- This example requires Tailwind CSS v2.0+ -->

<template>
    <div >
        <div v-if="loading" class="flex justify-center">
            ...
        </div>
        <div v-else >
            <BarChart :data="chartData" />
            
        </div>
    </div>

</template>

<script>

import { ref, computed, onMounted, watch } from "vue";
import { useStore } from "vuex";
import BarChart from '../../chart/BarChart.vue'
import { tailwindConfig } from '../../utils/Utils'

export default {
        name: 'CovidTrand',
        props: ['mdata'],
        components: {
            BarChart
        },

        setup(props) {
            const store = useStore();
            const loading = computed(()=> store.state.covidtrand.loading);
            const data = computed(() => store.state.covidtrand.data);

            const areatype = [
                { name: "서울", value: "서울특별시" },
                { name: "부산", value: "부산광역시" },
                { name: "대구", value: "대구광역시" }, 
                { name: "인천", value: "인천광역시" }, 
                { name: "광주", value: "광주광역시" }, 
                { name: "대전", value: "대전광역시" }, 
                { name: "울산", value: "울산광역시" }, 
                { name: "경기", value: "경기도" }, 
                { name: "강원", value: "강원도" }, 
                { name: "충북", value: "충청북도" }, 
                { name: "충남", value: "충청남도" }, 
                { name: "전북", value: "전라북도" }, 
                { name: "전남", value: "전라남도" }, 
                { name: "경북", value: "경상북도" }, 
                { name: "경남", value: "경상남도" }, 
                { name: "제주", value: "제주특별자치도" }, 
                { name: "세종", value: "세종특별자치시" }, 
            ]

            store.dispatch("getCovidArea", "합계");

            const clabel = [];
            const cval = [];
            const cval1 = [];

            const chartData = ref({
                labels: clabel,
                datasets: [
                    {
                        label: '확진',
                        data: cval,
                        backgroundColor: tailwindConfig().theme.colors.yellow[400],
                        hoverBackgroundColor: tailwindConfig().theme.colors.yellow[500],
                        barPercentage: 0.66,
                        categoryPercentage: 0.66, 
                    },

                ],
            })  
        
            return {
                data,
                clabel,
                cval,
                cval1,
                chartData,
                loading,
                areatype,
                store
            }    
        },
        watch: {
            data(newVal) {
 
                this.clabel.splice(0);
                this.cval.splice(0);
                this.cval1.splice(0);           
                for(var i =0 ; i < newVal.length; i++){
                    console.log(newVal[i].stdDay);
                    this.clabel.push(newVal[i].stdDay);
                    this.cval.push(newVal[i].defcnt);
                    this.cval1.push(newVal[i].deathCnt);

                }
       
            },
            mdata(newVal, oldVal){
                console.log("covid", oldVal, this.searchPro(newVal))
                this.store.dispatch("getCovidArea", this.searchPro(newVal));
            }
        },  
        created(){

        },
        mounted () {
            this.resize()
            window.addEventListener('resize', this.resize)
            this.initData();
        },
        beforeDestroy () {
            window.removeEventListener('resize', this.resize)
        },
        methods:{
            searchPro(area){
                for(var i =0 ; i < this.areatype.length; i++){
                    if(this.areatype[i].value == area){
                        return this.areatype[i].name
                    }
                }
                return "합계"

            },
            initData(){                
                console.log("initData()", this.length)
                for(var i =0 ; i < this.data.length; i++){
                    console.log(this.data[i].stdDay);
                    this.clabel.push(this.data[i].stdDay);
                    this.cval.push(this.data[i].defcnt);
                    this.cval.push(this.data[i].deathCnt);
                }
                
                this.chartData = ref({
                    labels: this.clabel,
                    datasets: [
  
                        {
                            label: '확진',
                            data: this.cval,
                            backgroundColor: tailwindConfig().theme.colors.yellow[400],
                            hoverBackgroundColor: tailwindConfig().theme.colors.yellow[500],
                            barPercentage: 0.66,
                            categoryPercentage: 0.66, 
 
                        },

                    ],
                })  
           
            },
            resize () {
                this.svgWidth = this.$refs.container
                this.svgHeight = this.$refs.container
            }
        } 
    }


</script>

 

 

메인 페이지에 코로나감염 환자 수에 따른 색 표현

 

이 부분은

 13. Vue3 + d3.js 날씨 지도 최종 예제 코드

13. Vue3 + d3.js 날씨 지도 최종 예제 코드

코드를 활용하여 사용하면 되겠다.

 

색을 선택하는 부분, 아이콘, 기타 정보 표현하는 부분만 수정하면 쉽게 활용할 수 있을 것이다.

 

---