trafficmonitor init...1

This commit is contained in:
choi.jh 2025-11-13 16:49:54 +09:00
parent 94ff1b1d91
commit 4f937a7cc1

View File

@ -9,7 +9,6 @@
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Chart.js CDN 로드 -->
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
<style>
/* 커스텀 스타일 및 색상 변수 설정 */
:root {
@ -21,19 +20,6 @@
/* OUT 트래픽 색상 (Chart.js) */
}
body {
background-color: #f8f9fa;
font-family: 'Inter', sans-serif;
}
.dashboard-card {
transition: box-shadow 0.3s ease;
}
.dashboard-card:hover {
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}
.chart-container {
position: relative;
height: 400px;
@ -42,19 +28,20 @@
</style>
</head>
<body class="p-4 p-md-5">
<div id="app" class="container-fluid" style="max-width: 1200px;">
<body>
<div id="app" class="container-fluid">
<!-- Chart Card -->
<div class="card shadow-lg dashboard-card">
<div class="card-body p-4 p-md-5">
<!-- 동적으로 업데이트될 메인 제목 영역 -->
<h2 id="chartTitle" class="h5 card-title text-dark mb-1"><?= $viewDatas['entity']->getCustomTitle() ?>트래픽 속도 추이 (IN/OUT Kbit/s)</h2>
<!-- 동적으로 업데이트될 날짜 정보 영역 (시작일, 종료일) -->
<div class="row g-3 text-end">
<div class="col-5">기간:<input type=" date" id="startDate" class="form-control" value="<?= date('Y-m-d') ?>"></div>
<div class="col-5">~<input type="date" id="endDate" class="form-control" value="<?= date('Y-m-d') ?>">까지</div>
<div class="col-2"><button onclick=" fetchDataAndDrawChart()" id="viewChartBtn" class="mt-4 btn btn-primary btn-lg w-100 w-md-auto shadow-sm">차트 보기</button></div>
<div class="row g-3">
<div class="col-5"><input type="date" id="startDate" class="form-control" value="<?= date('Y-m-d') ?>"></div>
<div class="col-5"><input type="date" id="endDate" class="form-control" value="<?= date('Y-m-d') ?>"></div>
<div class="col-2"><button onclick="fetchDataAndDrawChart()" id="viewChartBtn" class="btn btn-primary">차트 보기</button></div>
</div>
<!-- 로딩 인디케이터 -->
<div id="loadingIndicator" class="text-center p-5 hidden" style="display: none;">
<div class="spinner-border text-primary" role="status">