범죄 관리 시스템 - 통계 자료를 SweetAlert 하기

Citizen은 각 지역의 범죄 및 사건을 열람할 수 있다.

 

우선 Citizen의 ID를 입력하면 자신이 속한 지역을 안내해준다,

열람 기능은 2가지로 나뉘는데, 첫번째로 연간, 월간 범죄 통계 자료 열람이고 두번째가 범죄 내역 상세열람이다.

두번째 기능은 저번에 이미 구현한 것으로 설명을 생략하겠다.

---

첫번째 기능인 연도별, 월별 범죄 통계자료의 경우 데이터베이스에서 해당 지역의 범죄 횟수를 가져와야 한다.

자바스크립트에서 region값을 파이썬 플라스크로 보내준다. 통신 방식은 AXIOS

    const region = document.getElementById('region').value;
    axios.post('/crime_data_lookup', {
        region : region
    })

---

region 값을 파이썬에서 받은 다음 postgresql에서 연도별, 월별 범죄 횟수를 가져온다.

    data = request.get_json()
    region = data.get('region')

    # 연도별 범죄 통계
    cur.execute(f"""select extract(year from date) as region_year,
                count(*) as cnt
                from crime c
                where region_id = {region}
                group by region_year
                order by region_year;
    """)
    data = cur.fetchall()

 

가져온 값을 리스트로 만들어 저장한다.

    year_crime_data = [{"year": int(row[0]), "count": row[1]} for row in data]

 

각 값은 딕셔너리로 저장이 되는데 {"year": 2020, "count": 150} 와 같은 형식으로 저장되어 year_crime_data는 최종적으로 다음과 같다.

[
    {"year": 2020, "count": 150},
    {"year": 2021, "count": 175},
    {"year": 2022, "count": 200}
]

 

월별 범죄 통계도 마찬가지로 저장해준다.

crime_data에 딕셔너리로 년도별, 월별 데이터를 모두 저장해준다.

    crime_data = {
        'year_crime_data'           :   year_crime_data,
        'month_crime_data'    :   month_crime_data
    }

    return jsonify(crime_data)

---

만약 통계자료를 SweetAlert로 출력하려면 다음과 같이 한다.

        const dataText = response.data.year_crime_data.map(item => 
            `연도: ${item.year}, 범죄 발생 수: ${item.count}`
        ).join('<br>');

        swal.fire({
            title: "범죄 통계",
            html: dataText,
            icon: 'info',
            confirmButtonText: "확인"
        });

 

연도별 범죄 통계는 resopnse.data.year_crime_data에 저장되어 있다.

이 데이터는 배열로 되어 있기 때문에 map을 사용하여 배열의 각 요소를 데이터 형식을 변형하여 dataText에 저장할 수 있다.

 

item은  {"year": 2020, "count": 150} 처럼 딕셔너리로 되어 있기 때문에 item.year으로 2020을, item.count로 150을 출력할 수 있다.  이를 백틱(`)을 사용하여 문자열로 만들어준다. -> "연도: 2020, 범죄 발생 수: 150"로 변환된다.

 

.join('<br>')은 배열 내 요소들 사이에 <br>을넣어 하나의 문자열로 만든다. 

 

예를 들어 다음과 같은 배열이 있으면,

["year: 2020, count: 150", 
 "year: 2021, count: 175"]

 

다음과 같은 문자열로 변환할 수 있다.

"연도: 2020, 범죄 발생 수: 150<br>연도: 2021, 범죄 발생 수: 175"

 

문자열을 swal.fire에 넣어주면 알람이 뜬다.

 

다음 포스팅에서는 전달받은 통계자료를 그래프로 변환하여 출력한다.