코로나19 백신 접종 현황 차트 페이지 만들기 - (2) 소스 구조 및 view 코드

Node.js/예제 2021. 5. 29. 00:23

1. 전체 소스 구조

전체 소스 구조는 위와 같다. public 폴더 아래 js 폴더에는 각 차트에 대한 frontend script 코드들이 포함되어 있다. route는 차트 페이지, 지도 페이지, 검색 테이블 페이지로 분리하였다. (getdata에는 backend에서 사용되는 공통 함수들을 따로 분리해놓았다.)

app.js 코드에는 route 분리, view engine, middleware에 대한 최소한의 설정을 위한 코드로만 구성하였다.

app.js

const express = require('express');
const path = require('path');

const charts = require('./routes/charts');
const map = require('./routes/map');
const table = require('./routes/table');

const app = express();

app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

app.use(express.static(__dirname + '/public'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));

app.use('/', charts);
app.use('/map', map);
app.use('/table', table);

app.listen(3000, () => {
  console.log('server started on port 3000');
});

2. views

view는 공통으로 사용되는 부분과 각 페이지별로 사용되는 부분을 분리하여 include를 통해 조합하여 사용할 수 있게 구성하였다.

header.ejs - 페이지 전체에 대한 공통 헤더 부분

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>COVID-19 Vaccination Info</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script 
      src="https://code.jquery.com/jquery-3.6.0.min.js" 
      integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" 
      crossorigin="anonymous">
    </script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script 
      src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js" 
      integrity="sha512-qTXRIMyZIFb8iQcfjXWCO8+M5Tbc38Qi5WzdPOYZHIlZpzBHG3L3by84BBBOiRGiEb7KKtAOAs5qYdUiZiQNNQ==" 
      crossorigin="anonymous">
    </script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script src="js/common.js"></script>
    <link href="style.css" type="text/css" rel="stylesheet" />

hc.ejs - highcharts 모듈. charts 페이지에서만 사용된다.

    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="https://code.highcharts.com/maps/modules/data.js"></script>
    <script src="https://code.highcharts.com/maps/modules/exporting.js"></script>
    <script src="https://code.highcharts.com/maps/modules/offline-exporting.js"></script>    
    <script src="https://code.highcharts.com/modules/drilldown.js"></script>
    <script src="https://code.highcharts.com/modules/series-label.js"></script>
    <script src="https://code.highcharts.com/modules/export-data.js"></script>
    <script src="https://code.highcharts.com/modules/accessibility.js"></script>
    <script src="https://code.highcharts.com/highcharts-more.js"></script>
    <script src="https://code.highcharts.com/modules/solid-gauge.js"></script>
    <script src="https://code.highcharts.com/modules/heatmap.js"></script>
    <script src="https://code.highcharts.com/modules/wordcloud.js"></script>

hm.ejs - highmaps 모듈. map 페이지에서 사용됨

    <script src="https://code.highcharts.com/maps/highmaps.js"></script>
    <script src="https://code.highcharts.com/maps/modules/data.js"></script>
    <script src="https://code.highcharts.com/maps/modules/exporting.js"></script>
    <script src="https://code.highcharts.com/maps/modules/offline-exporting.js"></script>
    <script src="https://code.highcharts.com/mapdata/custom/world.js"></script>

dt.ejs - datatables cdn 및 css link. search 페이지에서 사용됨

    <script src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>
    <link href="https://cdn.datatables.net/1.10.24/css/jquery.dataTables.min.css" type="text/css" rel="stylesheet" />

navbar.ejs - 세 페이지에서 공통으로 사용되는 상단바

<ul class="navul" id="navBar">
  <li class="navli"><a href="/">Charts</a></li>
  <li class="navli"><a href="/map">Map</a></li>
  <li class="navli"><a href="/table">Search</a></li>
</ul>

charts.ejs - charts 페이지

<%- include('header') %>
<%- include('hc') %>
  </head>
  <body>
    <div class="container">
      <%- include('navbar') %>
      <div class="divrow">
        <div class="compbox chartdiv1" id="metric">
          <div class="metric-div">
            <div class="metric-content">
              <div class="metric-text" style="padding-top:50px;">Number of people vaccinated in the world</div>
            </div>
            <div class="metric-content num-value" id="pvValue"></div>
          </div>
          <div class="metric-div">
            <div class="metric-content" style="height:20%">
              <div class="metric-text">Number of people fully vaccinated in the world</div>
            </div>
            <div class="metric-content num-value" style="height:80%" id="pfvValue"></div>
          </div>
        </div>
        <div class="compbox chartdiv1" id="piechart"></div>
        <div class="compbox chartdiv1" id="column"></div>
      </div>
      <div class="divrow">
        <div class="compbox chartdiv2" id="basicline"></div>
        <div class="compbox chartdiv2" id="heatmap"></div>
      </div>
    </div>
    
    <script src="js/metric.js"></script>
    <script src="js/piechart.js"></script>
    <script src="js/column.js"></script>
    <script src="js/basicline.js"></script>
    <script src="js/heatmap.js"></script>
    <script>
      drawMetricChart();
      drawPieChart();
      drawColumnChart();
      drawLineChart();
      drawHeatMap();
    </script>
  </body>  
</html>

worldmap.ejs - map 페이지

<%- include('header') %>
<%- include('hm') %>
  </head>
  <body>
    <div class="container">
      <%- include('navbar') %>      
      <div class="mapdiv" id="worldmap"></div>
    </div>    
  </body>
  <script src="js/worldmap.js"></script>
  <script>
    const ulInnerHtml = document.getElementById("navBar").innerHTML;
    const newBtns = `
      <li class="navli right" onclick="drawWorldMap('tv')"><a href="#">Total Vaccinated</a></li>
      <li class="navli right" onclick="drawWorldMap('pfv')"><a href="#">People Fully Vaccinated</a></li>
      <li class="navli right" onclick="drawWorldMap('pv')"><a href="#">People Vaccinated</a></li>
    `;
    document.getElementById("navBar").innerHTML = ulInnerHtml + newBtns;
    drawWorldMap('pv')
  </script>
</html>

table.ejs - search 페이지

<%- include('header') %>
<%- include('dt') %>
  </head>
  <body>
    <div class="container">
      <%- include('navbar') %>
      <div class="tablediv">
        <table id="table" class="display" style="width: 100%">
          <thead>
            <tr id="tableTr"></tr>
          </thead>
        </table>        
      </div>
    </div>
    <script src="js/datatable.js"></script>
    <script>      
      const ulInnerHtml = document.getElementById("navBar").innerHTML;
      const newBtns = `
        <div class="country-search-area">
          <input class="country-input" type="input" id="countryFilter" onclick="clearInput(this);">
          <label class="label-text">Country search</label>
        </div>
      `;
      document.getElementById("navBar").innerHTML = ulInnerHtml + newBtns;      
      getCountryList();
      drawDataTable("South Korea");
    </script>
  </body>  
</html>

style.css

.container {
  padding: 5px;
  background-color: #ecf2f9;
}

.navul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #555;
  width: 1496px;
  margin-left: 5px;
}

.navli {
  float: left;
}

.navli.right {
  float: right;
}

.navli a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.navli a:hover {
  background-color: #111;
}

.divrow {
  display: inline-flex;
}

.compbox {
  margin: 5px;
  border: 1px solid #bfbfbf;
}

.chartdiv1 {
  width: 490px;
  height: 310px;
}

.chartdiv2 {
  width: 741px;
  height: 310px;
}

.mapdiv {
  margin-top: 5px;
  margin-left: 5px;
  width: 1496px;
  height: 635px;
}

.tablediv {
  margin-top: 5px;
  margin-left: 6px;
  width: 1495px;
  height: 635px;
}

#metric {
  background-color: #ffffff;
}

.metric-div {
  height: 50%;
}

.metric-div .num-value {
  font-size: 40px;
  font-weight: bold;
  text-align: center;
}

.metric-text {
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  color: #555;
}

#pvValue {
  color: rgb(86, 159, 226);
}

#pfvValue {
  color: rgb(223, 91, 120);
}

.metric-content {
  height: 50%;
}

.country-search-area {
  margin-right: 16px;
  margin-top: 10px;
}

.btn-normal:hover {
  background-color: #949494;
}

.country-input {
  float: right;
  height: 25px;
  width: 250px;
  margin-top: 1px;
  border-radius: 0.25rem;
  border: 1px solid transparent;
}

.label-text {
  float: right;
  color: #ffffff;
  line-height: 1.5;
  font-weight: 500;
  margin-right: 10px;
  margin-top: 2px;
}

.ui-autocomplete {
  background: #ffffff;
  border-radius: 0px;
  border: 1px solid #949494;
}

.ui-menu {
  width: 250px;
  padding: 2px;
}

.ui-menu .ui-menu-item {  
  height: 30px;
  font-size: 16px;
  list-style: none;
}

.ui-menu .ui-menu-item:hover {
  background: rgb(221, 221, 221);  
}

.text-center {
  text-align: center;
}

'Node.js > 예제' 카테고리의 다른 글

코로나19 백신 접종 현황 차트 페이지 만들기 - (4) charts 페이지 및 metric (0)	2021.05.29
코로나19 백신 접종 현황 차트 페이지 만들기 - (3) node.js elasticsearch 모듈 설치와 사용 (0)	2021.05.29
코로나19 백신 접종 현황 차트 페이지 만들기 - (1) elasticsearch 세팅 및 데이터 업로드하기 (1)	2021.05.28
코로나19 백신 접종 현황 차트 페이지(node.js, elasticsearch) (0)	2021.05.27
kaitai struct로 binary 파일 읽기(wtmp) (0)	2021.04.11

ABOUT ME

atsc의 블로그 atsc의 블로그

'Node.js > 예제' 카테고리의 다른 글

티스토리툴바

ABOUT ME

'Node.js > 예제' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바