---

name: Add Evidence Page description: Create new Evidence.dev dashboard page with charts and tables

Add Evidence Page

When to Use

• Adding new visualization/dashboard
• Creating charts for existing DLT data

File Structure

Copy├── pages/<category>/<page>.md    # Page with charts
└── sources/nfcore_db/<query>.sql # SQL data source

Page Template

Copy---
title: Page Title
sidebar_position: 1
---

Brief description of what this page shows.

```sql summary_query
SELECT COUNT(*) as total FROM nfcore_db.<table_name>

CopySELECT
  date_trunc('week', created_at) as week,
  COUNT(*) as count
FROM nfcore_db.<table_name>
GROUP BY 1
ORDER BY 1

SQL Source Template

File: sources/nfcore_db/<query>.sql

CopySELECT
  column1,
  column2,
  COUNT(*) as count
FROM <table_name>
GROUP BY 1, 2
ORDER BY count DESC

Component Reference

DataTable with Columns

Copy<DataTable data={query} search=true totalRow=true>
  <Column id="name" title="Name"/>
  <Column id="count" title="Count" align="right"/>
  <Column id="url" contentType=link linkLabel="View"/>
  <Column id="score" contentType=colorscale colorScale=negative/>
</DataTable>

Stacked AreaChart with Colors

Copy<AreaChart
  data={query}
  x=date
  y={["category_a", "category_b", "category_c"]}
  seriesColors={['#2ecc71', '#f39c12', '#e74c3c']}
  title="Distribution Over Time"
/>

Date Filtering Pattern

Copy<DateRange name="date_range" data={base_query} dates=timestamp defaultValue="Last 90 Days"/>

```sql filtered_query
SELECT * FROM nfcore_db.<table>
WHERE timestamp >= '${inputs.date_range.start}'
  AND timestamp <= '${inputs.date_range.end}'

Testing

Copynpm run dev
# Open http://localhost:3000/path/to/page

Checklist

1. Create SQL source in sources/nfcore_db/
2. Create page in pages/<category>/
3. Add frontmatter (title, sidebar_position)
4. Add summary metrics (BigValue)
5. Add time series chart (LineChart/AreaChart)
6. Add detail table (DataTable)
7. Test with npm run dev