# williamleng/wecom-dashboard architecture

> Architecture diagram of the GitHub repository williamleng/wecom-dashboard, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-29). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/williamleng/wecom-dashboard
- Repository: https://github.com/williamleng/wecom-dashboard

## Overview

This is a monthly WeCom smart-guide metrics dashboard. Users pass an access gate, inspect monthly indicators and trends, filter metric groups, open metric details, and export the displayed data. The browser app loads a pre-generated JSON snapshot; the included Python generator builds that snapshot from a monthly Excel workbook. The README is only a title, so the dashboard capabilities and data-generation flow are based on the sampled source; unsampled page details are not expanded.

Main entry points: [`v2/app.js`](https://github.com/williamleng/wecom-dashboard/blob/main/v2/app.js) (Dashboard app), [`scripts/generate-v2-data.py`](https://github.com/williamleng/wecom-dashboard/blob/main/scripts/generate-v2-data.py) (Workbook generator), [`v2/data/dashboard-data.json`](https://github.com/williamleng/wecom-dashboard/blob/main/v2/data/dashboard-data.json) (Dashboard snapshot)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_interaction["Dashboard interaction"]
  node_app["Dashboard app<br/>[app.js]"]
  node_access["Access gate<br/>[app.js]"]
  node_month["Month selection<br/>[app.js]"]
  node_groupfilter["Group filter<br/>[app.js]"]
  node_metricdetail["Metric detail<br/>[app.js]"]
  node_export["JSON export<br/>[app.js]"]
end

subgraph group_analytics["Metrics and analysis"]
  node_highlights["Highlights<br/>[app.js]"]
  node_insight["Usage insight<br/>[app.js]"]
  node_monthlyanalysis["Monthly analysis<br/>[app.js]"]
  node_trendcharts["Trend charts<br/>[app.js]"]
  node_metriccomparison["Metric comparison<br/>[app.js]"]
end

subgraph group_data["Dashboard data"]
  node_generator["Workbook generator"]
  node_snapshot["Dashboard snapshot"]
end

node_user(("Dashboard user"))
node_workbook["Monthly workbook"]

node_user -->|"uses"| node_app
node_app -->|"checks access"| node_access
node_app -->|"fetches JSON"| node_snapshot
node_app -->|"selects month"| node_month
node_app -->|"filters groups"| node_groupfilter
node_app -->|"renders"| node_highlights
node_app -->|"renders"| node_insight
node_app -->|"renders"| node_monthlyanalysis
node_app -->|"renders"| node_trendcharts
node_app -->|"ranks metrics"| node_metriccomparison
node_app -->|"opens details"| node_metricdetail
node_app -->|"downloads JSON"| node_export
node_user -.->|"runs generation"| node_generator
node_generator -->|"reads workbook"| node_workbook
node_generator -->|"writes JSON"| node_snapshot

click node_app "https://github.com/williamleng/wecom-dashboard/blob/main/v2/app.js"
click node_access "https://github.com/williamleng/wecom-dashboard/blob/main/v2/app.js"
click node_month "https://github.com/williamleng/wecom-dashboard/blob/main/v2/app.js"
click node_groupfilter "https://github.com/williamleng/wecom-dashboard/blob/main/v2/app.js"
click node_metricdetail "https://github.com/williamleng/wecom-dashboard/blob/main/v2/app.js"
click node_export "https://github.com/williamleng/wecom-dashboard/blob/main/v2/app.js"
click node_highlights "https://github.com/williamleng/wecom-dashboard/blob/main/v2/app.js"
click node_insight "https://github.com/williamleng/wecom-dashboard/blob/main/v2/app.js"
click node_monthlyanalysis "https://github.com/williamleng/wecom-dashboard/blob/main/v2/app.js"
click node_trendcharts "https://github.com/williamleng/wecom-dashboard/blob/main/v2/app.js"
click node_metriccomparison "https://github.com/williamleng/wecom-dashboard/blob/main/v2/app.js"
click node_generator "https://github.com/williamleng/wecom-dashboard/blob/main/scripts/generate-v2-data.py"
click node_snapshot "https://github.com/williamleng/wecom-dashboard/blob/main/v2/data/dashboard-data.json"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_app,node_access,node_month,node_groupfilter,node_metricdetail,node_export,node_user toneBlue
class node_highlights,node_insight,node_monthlyanalysis,node_trendcharts,node_metriccomparison toneAmber
class node_generator,node_snapshot toneMint
class node_workbook toneIndigo
```

## Components

### Dashboard interaction

- [Dashboard app](https://github.com/williamleng/wecom-dashboard/blob/main/v2/app.js): `v2/app.js`
- [Access gate](https://github.com/williamleng/wecom-dashboard/blob/main/v2/app.js): `v2/app.js`
- [Month selection](https://github.com/williamleng/wecom-dashboard/blob/main/v2/app.js): `v2/app.js`
- [Group filter](https://github.com/williamleng/wecom-dashboard/blob/main/v2/app.js): `v2/app.js`
- [Metric detail](https://github.com/williamleng/wecom-dashboard/blob/main/v2/app.js): `v2/app.js`
- [JSON export](https://github.com/williamleng/wecom-dashboard/blob/main/v2/app.js): `v2/app.js`

### Metrics and analysis

- [Highlights](https://github.com/williamleng/wecom-dashboard/blob/main/v2/app.js): `v2/app.js`
- [Usage insight](https://github.com/williamleng/wecom-dashboard/blob/main/v2/app.js): `v2/app.js`
- [Monthly analysis](https://github.com/williamleng/wecom-dashboard/blob/main/v2/app.js): `v2/app.js`
- [Trend charts](https://github.com/williamleng/wecom-dashboard/blob/main/v2/app.js): `v2/app.js`
- [Metric comparison](https://github.com/williamleng/wecom-dashboard/blob/main/v2/app.js): `v2/app.js`

### Dashboard data

- [Workbook generator](https://github.com/williamleng/wecom-dashboard/blob/main/scripts/generate-v2-data.py): `scripts/generate-v2-data.py`
- [Dashboard snapshot](https://github.com/williamleng/wecom-dashboard/blob/main/v2/data/dashboard-data.json): `v2/data/dashboard-data.json`

### Other components

- **Dashboard user**
- **Monthly workbook**

## Connections

- Dashboard user → Dashboard app: uses
- Dashboard app → Access gate: checks access
- Dashboard app → Dashboard snapshot: fetches JSON
- Dashboard app → Month selection: selects month
- Dashboard app → Group filter: filters groups
- Dashboard app → Highlights: renders
- Dashboard app → Usage insight: renders
- Dashboard app → Monthly analysis: renders
- Dashboard app → Trend charts: renders
- Dashboard app → Metric comparison: ranks metrics
- Dashboard app → Metric detail: opens details
- Dashboard app → JSON export: downloads JSON
- Dashboard user → Workbook generator: runs generation
- Workbook generator → Monthly workbook: reads workbook
- Workbook generator → Dashboard snapshot: writes JSON