Bỏ qua để đến nội dung
Documentation

5-tab Charts (Multi-view Dashboard)

5-tab Charts (Multi-view Dashboard)

Phần tiêu đề “5-tab Charts (Multi-view Dashboard)”

Executive Dashboard đã upgrade với 5 tabs charts — visual drill-down thay vì chỉ KPI number.

Commit reference: 9445abf (task Batch 2).

5 tabs

Phần tiêu đề “5 tabs”

KPI cards như dashboard cũ:

  • KCN, Lấp đầy %, Lô trống, HĐ hiệu lực, Khách thuê
  • Section Gia hạn (90/60/30/expired)
  • Section CSKH (SR mở, overdue)
  • Section Bảo trì (mở, BH, O&M, cảnh báo)

Chi tiết: Executive Dashboard.

Kỹ thuật

Phần tiêu đề “Kỹ thuật”

Charts render SVG inline (không dùng chart library ngoài):

  • Fast load
  • Không cần OWL widget custom
  • Work với Odoo form view standard
  • Theme-aware (dark mode support future)

Model: parkone.dashboard.chart.mixin (AbstractModel) — shared giữa zone.dashboard + parkone.demo.dashboard.

Data refresh

Phần tiêu đề “Data refresh”
  • Live compute mỗi lần open tab
  • Không cache (real-time)
  • Load time per tab: <1s
  • Total dashboard 5 tabs: ~2-3s first open

Filter tương thích tabs

Phần tiêu đề “Filter tương thích tabs”

Time period + KCN filter (nếu có) apply cho tất cả tabs.

Vd filter “This quarter” → doanh thu 3 tháng, funnel 3 tháng, …

Interactive features

Phần tiêu đề “Interactive features”

Hover tooltip

Phần tiêu đề “Hover tooltip”

Mọi element (bar, donut segment, pie slice) show tooltip with:

  • Label
  • Value
  • Percentage (nếu applicable)

Click drill-down

Phần tiêu đề “Click drill-down”
  • Bar tháng → mở list invoices của tháng đó
  • Donut KCN → mở form KCN
  • Pie warranty → mở list equipment status tương ứng
  • Row maintenance → mở request detail

Export

Phần tiêu đề “Export”

Icon top-right mỗi tab:

  • 📊 Export data → CSV
  • 🖨️ Print → PDF page

Customization

Phần tiêu đề “Customization”

Admin có thể:

  • Add tab mới (custom Python)
  • Modify chart colors (SCSS)
  • Change chart type (bar → line, donut → pie)

File source: models/parkone_dashboard_chart_mixin.py

Performance

Phần tiêu đề “Performance”

Nếu KCN có 500+ equipment / 1000+ contracts:

  • Tab load 3-5s
  • Consider adding index PostgreSQL
  • Or aggregate table (materialized view)

Contact BSD support nếu cần optimize.

Mobile responsive

Phần tiêu đề “Mobile responsive”

5-tab dashboard responsive:

  • Mobile: tabs vertical stack, chart smaller
  • Tablet: 2-column charts within tab
  • Desktop: full width

FAQ

Phần tiêu đề “FAQ”

Chart không hiện data — sao?

Phần tiêu đề “Chart không hiện data — sao?”
  • Data chưa có (KCN mới, chưa Invoice)
  • Filter quá strict (vd This week nhưng chưa có data tuần này)

Nới filter → verify.

Muốn thêm tab thứ 6 (vd Financials)

Phần tiêu đề “Muốn thêm tab thứ 6 (vd Financials)”

Custom Python — extend zone.dashboard với:

financial_chart_html = fields.Html(compute='_compute_charts')


def _render_financial_chart(self):
    # Custom SVG generation
    ...

Add <page string="💵 Financial"> vào XML view.

Chart color không phù hợp brand

Phần tiêu đề “Chart color không phù hợp brand”
  • Sửa SCSS trong addons/parkone/static/src/parkone_demo_dashboard/parkone_demo_dashboard.scss
  • Rebuild assets
  • Deploy

Liên kết liên quan

Phần tiêu đề “Liên kết liên quan”
Chia sẻ: