|
179 | 179 | grid-template-columns: repeat(2, 1fr); |
180 | 180 | gap: 20px; |
181 | 181 | } |
182 | | - .chart-card-wide { grid-column: 1 / -1; } |
183 | | - |
184 | 182 | @media (max-width: 800px) { |
185 | 183 | .charts-grid { grid-template-columns: 1fr; } |
186 | | - .chart-card-wide { grid-column: unset; } |
187 | 184 | } |
188 | 185 |
|
189 | 186 | .chart-card { |
|
222 | 219 | .dot-blue { background: var(--accent); } |
223 | 220 | .dot-pink { background: var(--accent-2); } |
224 | 221 | .dot-teal { background: var(--accent-3); } |
| 222 | + .dot-orange { background: #f5a524; } |
225 | 223 | </style> |
226 | 224 | </head> |
227 | 225 | <body> |
|
289 | 287 | </div> |
290 | 288 | </div> |
291 | 289 |
|
292 | | - <div class="chart-card chart-card-wide"> |
| 290 | + <div class="chart-card"> |
| 291 | + <div class="chart-card-header"> |
| 292 | + <div class="chart-card-title"><span class="dot dot-teal"></span>생성된 일간 리포트 수</div> |
| 293 | + <div class="chart-card-subtitle">최근 5주</div> |
| 294 | + </div> |
| 295 | + <div class="chart-card-body"> |
| 296 | + <canvas id="completedDailyChart" height="140"></canvas> |
| 297 | + </div> |
| 298 | + </div> |
| 299 | + |
| 300 | + <div class="chart-card"> |
293 | 301 | <div class="chart-card-header"> |
294 | | - <div class="chart-card-title"><span class="dot dot-teal"></span>생성된 주간 리포트 수</div> |
| 302 | + <div class="chart-card-title"><span class="dot dot-orange"></span>생성된 주간 리포트 수</div> |
295 | 303 | <div class="chart-card-subtitle">최근 5주</div> |
296 | 304 | </div> |
297 | 305 | <div class="chart-card-body"> |
298 | | - <canvas id="completedChart" height="90"></canvas> |
| 306 | + <canvas id="completedWeeklyChart" height="140"></canvas> |
299 | 307 | </div> |
300 | 308 | </div> |
301 | 309 | </div> |
|
304 | 312 | const rawLabels = [[${vm.labels}]]; |
305 | 313 | const rawSignupCounts = [[${vm.signupCounts}]].map(v => parseInt(v, 10)); |
306 | 314 | const rawAssignedCounts = [[${vm.assignedQuestionCounts}]].map(v => parseInt(v, 10)); |
307 | | - const rawCompletedCounts = [[${vm.completedWeeklyReportCounts}]].map(v => parseInt(v, 10)); |
| 315 | + const rawCompletedDailyCounts = [[${vm.completedDailyReportCounts}]].map(v => parseInt(v, 10)); |
| 316 | + const rawCompletedWeeklyCounts = [[${vm.completedWeeklyReportCounts}]].map(v => parseInt(v, 10)); |
308 | 317 |
|
309 | 318 | const slicedRawLabels = rawLabels.slice(-5); |
310 | 319 | const labels = slicedRawLabels.map(label => { |
|
313 | 322 | }); |
314 | 323 | const signupCounts = rawSignupCounts.slice(-5); |
315 | 324 | const assignedCounts = rawAssignedCounts.slice(-5); |
316 | | - const completedCounts = rawCompletedCounts.slice(-5); |
| 325 | + const completedDailyCounts = rawCompletedDailyCounts.slice(-5); |
| 326 | + const completedWeeklyCounts = rawCompletedWeeklyCounts.slice(-5); |
317 | 327 |
|
318 | 328 | Chart.defaults.color = '#8b91a8'; |
319 | 329 | Chart.defaults.font.family = "'DM Mono', monospace"; |
|
332 | 342 | const configs = [ |
333 | 343 | { id: 'signupChart', label: '가입자 수', data: signupCounts, color: 'rgba(108,143,255,1)' }, |
334 | 344 | { id: 'assignedChart', label: '할당 질문 수', data: assignedCounts, color: 'rgba(255,126,179,1)' }, |
335 | | - { id: 'completedChart', label: '주간 리포트 생성 수', data: completedCounts, color: 'rgba(77,232,194,1)' }, |
| 345 | + { id: 'completedDailyChart', label: '일간 리포트 생성 수', data: completedDailyCounts, color: 'rgba(77,232,194,1)' }, |
| 346 | + { id: 'completedWeeklyChart', label: '주간 리포트 생성 수', data: completedWeeklyCounts, color: 'rgba(245,165,36,1)' }, |
336 | 347 | ]; |
337 | 348 |
|
338 | 349 | configs.forEach(({ id, label, data, color }) => { |
|
0 commit comments