magma-dashboard

magma-dashboard — Building a sales dashboard with Evidence.dev

Purpose

Work skill for Section 7.4 (Building a BI Dashboard) of Inflearn's "Hermes × Codex Virtual Office". Read the refined views prepared in Supabase into an Evidence.dev project to a single Markdown+SQL pageand build a dashboard, then deploy it as a static build. Do not stop at creating charts — verifying and reporting whether the numbers you made match the original is part of this skill's procedure.

Prerequisites

An Evidence project is already scaffolded (npx degit evidence-dev/template <폴더> + npm install). If not, guide the user to create one first.
node 18 or higher.
The data source is a Supabase view (v_sales , etc.). If the view does not exist, do not build the dashboard; stop and report.

Procedure

Source connection. sources/magma/connection.yamlCreate.

name: magma
type: postgres
options:
  host: aws-1-ap-northeast-2.pooler.supabase.com
  port: 5432
  database: postgres
  ssl:
    sslmode: require

Keep connection information only in the project root .env(do not expose values on screen, in files, or in reports).

EVIDENCE_SOURCE__magma__user=postgres.프로젝트ref
EVIDENCE_SOURCE__magma__password=(DB 비밀번호)

CA certificate. The Supabase pooler uses a self-signed family certificate, so connecting as-is causes a self-signed certificate in certificate chain error. Do not disable certificate verification (rejectUnauthorized: false is prohibited — it is a setting that turns off man-in-the-middle attack protection). Instead, obtain the official Supabase CA and add it to the trust list.
```
curl -sL "https://supabase-downloads.s3.ap-southeast-1.amazonaws.com/prod/ssl/prod-ca-2021.crt" -o prod-ca-2021.crt
# 이후 모든 evidence 명령 앞에:
NODE_EXTRA_CA_CERTS=./prod-ca-2021.crt npm run sources
```
(The same file can also be obtained from the SSL item under Database Settings in the Supabase dashboard.)
Source definition and loading. sources/magma/sales.sql에 select * from v_sales 한 줄. npm run sourcesand record the number of loaded rows.
Page authoring. pages/index.mdCreate the dashboard in references/components.md. Default composition order:
- 4 KPIs (total revenue, number of orders, number of purchasing customers, average order value)
- Time trend (monthly revenue line)
- Composition (monthly channel stacked bar + channel donut)
- Ranking (category and region horizontal bars)
- Patterns (day-of-week and time-of-day heatmap)
- Details (product-level performance table — revenue, quantity, margin rate)
Verification (required — do not omit). Once the page renders, query the original directly for the following, compare against the on-screen values, and report the comparison table to the user.
- Do total revenue, number of orders, and number of customers match the v_sales direct aggregation
- Does the sum of the composition chart equal the total (if a filter silently drops rows, it will diverge here)
- If there are values with erratic digits or values close to a 100% ratio in the table, point out and report that it may be a data refinement issueDo not modify arbitrarily — whether to discard or keep is decided by the user.
Build and deploy (on request). NODE_EXTRA_CA_CERTS=./prod-ca-2021.crt npm run build → build/ Static output. Vercel deployment proceeds after user confirmation, and specify the project name(if omitted, the folder name becomes the project name).

Rules

DB connection info goes only in .env. Do not expose values in chat, reports, or commits.
Do not use any setting that disables certificate verification.
Do not use the like '%' pattern as a filter default — it silently discards NULL rows (measured: 825 rows with empty category were dropped, reducing total revenue by 15%). Handle select-all by omitting the where clause or with an explicit branch.
Abbreviate the KRW axis in units of 100 million (fmt specified) — if left in won units, the axis labels overlap.
Do not report "completed" without verification.

Pitfalls (measured 2026-08-01)

Symptom	Cause	Handling
`self-signed certificate in certificate chain`	Supabase pooler's own CA	Add the CA from procedure 2. Do not disable verification
Total revenue is less than the DB	`like '%'` filter excludes NULL rows	Apply the filter principle from the rules
Only a few top rows in the table have margin rates around 99%	Original unit price outliers passed cleaning	Do not fix — point it out and report; the cleaning criteria are decided by the user
Only 0 o'clock in the heatmap is abnormally large	Dates without a time are parsed as midnight	Report the data provenance as well
Changed a view column but the screen is unchanged	Evidence does not automatically refresh the source cache	`npm run sources` rerun
There is no donut chart component	Not provided by Evidence	`references/components.md`use the ECharts donut snippet from

Deliverables

pages/index.md dashboard page
Verification comparison table (screen values vs. source aggregates)
(when deploying) build/ static output and public URL