feat(project): 프로젝트 페이지에 아사나식 대시보드 탭 추가
보드/리스트/달력/타임라인 옆에 "대시보드" 탭 신설. 서버 재조회 없이 이미 로드된 tasks(visibleTasks(), 스코프 토글도 그대로 따름)로 클라이언트에서 즉시 집계: - 통계 카드 4개(완료/미완료/마감초과/전체), 숫자가 0에서 카운트업 - 미완료 작업 합계(섹션별) — 세로 막대, 보드 컬럼과 같은 순서 - 작업 합계(완료 상태별) — SVG 도넛(완료=초록/미완료=포인트컬러), 등장 시 획이 0에서 목표 길이까지 그려짐 - 예정된 작업 합계(담당자별) — 일정 있는 미완료 업무만, 상위 10명+기타 막대/도넛 둘 다 호버 시 값 우선 툴팁, 카드는 순차 페이드인(아사나 느낌). 차트 라이브러리 추가 없이 순수 SVG/CSS로 구현. 탭 5개로 늘면서 좁은 화면에서 텍스트가 줄바꿈되던 버그도 같이 고침(pj-view-tabs flex-shrink).
This commit is contained in:
@@ -1,7 +1,7 @@
|
||||
{% extends "erp_base.html" %}
|
||||
|
||||
{% block head_extra %}
|
||||
<link rel="stylesheet" href="/static/project.css?v=20260917g" />
|
||||
<link rel="stylesheet" href="/static/project.css?v=20260917h" />
|
||||
<link rel="stylesheet" href="/static/vendor/material-symbols/material-symbols.css" />
|
||||
{% endblock %}
|
||||
|
||||
@@ -45,5 +45,5 @@
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<script src="/static/project.js?v=20260917l" defer></script>
|
||||
<script src="/static/project.js?v=20260917m" defer></script>
|
||||
{% endblock %}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
{% extends "erp_base.html" %}
|
||||
|
||||
{% block head_extra %}
|
||||
<link rel="stylesheet" href="/static/project.css?v=20260917g" />
|
||||
<link rel="stylesheet" href="/static/project.css?v=20260917h" />
|
||||
<link rel="stylesheet" href="/static/vendor/material-symbols/material-symbols.css" />
|
||||
{% endblock %}
|
||||
|
||||
@@ -393,5 +393,5 @@
|
||||
<script>
|
||||
window.PJ_COLORS = {{ ["#4573d2","#37a3a3","#62a420","#e8a33d","#e8384f","#aa62e3","#f06a6a","#5a6772"] | tojson }};
|
||||
</script>
|
||||
<script src="/static/project.js?v=20260917l" defer></script>
|
||||
<script src="/static/project.js?v=20260917m" defer></script>
|
||||
{% endblock %}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
{% extends "erp_base.html" %}
|
||||
|
||||
{% block head_extra %}
|
||||
<link rel="stylesheet" href="/static/project.css?v=20260917g" />
|
||||
<link rel="stylesheet" href="/static/project.css?v=20260917h" />
|
||||
<!-- 구글 머티리얼 심볼(담당자 아이콘 등) — self-host -->
|
||||
<link rel="stylesheet" href="/static/vendor/material-symbols/material-symbols.css" />
|
||||
<!-- 타임라인 vis-timeline — self-host -->
|
||||
@@ -100,6 +100,7 @@
|
||||
<button type="button" class="pj-tab" data-view="list">리스트</button>
|
||||
<button type="button" class="pj-tab" data-view="calendar">달력</button>
|
||||
<button type="button" class="pj-tab" data-view="timeline">타임라인</button>
|
||||
<button type="button" class="pj-tab" data-view="dashboard">대시보드</button>
|
||||
</div>
|
||||
<h1 class="pj-project-title">{{ project.name }}</h1>
|
||||
<!-- 아사나처럼 기본은 "이 프로젝트"만 보여준다. 전체 프로젝트 보기는
|
||||
@@ -171,6 +172,11 @@
|
||||
<tbody></tbody>
|
||||
</table>
|
||||
</div>
|
||||
<!-- 대시보드 — 통계 카드/차트는 전부 클라이언트가 그린다(보드/리스트와
|
||||
같은 방식, 서버 재조회 없이 이미 로드된 tasks 로 즉시 집계). -->
|
||||
<div class="pj-view" data-view="dashboard" hidden>
|
||||
<div class="pj-dash" id="pj-dash"></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ── 우측: 내 업무 (홈 화면과 동일) ── -->
|
||||
@@ -461,5 +467,5 @@
|
||||
</script>
|
||||
|
||||
<script src="/static/vendor/vis-timeline/vis-timeline-graph2d.min.js"></script>
|
||||
<script src="/static/project.js?v=20260917l" defer></script>
|
||||
<script src="/static/project.js?v=20260917m" defer></script>
|
||||
{% endblock %}
|
||||
|
||||
Reference in New Issue
Block a user