Project Structure

Every DashTemplate template follows the same file layout so you can jump between projects without re-learning the structure.

## Top-level layout

my-template/
├── index.html          ← single entry point
├── css/
│   └── style.css       ← template-specific CSS
├── js/
│   └── charts.js       ← ECharts instances and data config
└── assets/
    └── icons/          ← SVG icons used in this template

Shared resources used by all templates live one level up in shared/:

shared/
├── dt-core.css         ← CSS custom properties, reset, typography
└── dt-utils.js         ← lightweight helpers (formatters, colour palettes)

## index.html

The entry point contains all page markup. It is structured in three parts:

Head — meta tags, font imports, CSS links.
Body — semantic HTML layout (header, sidebar, main grid).
Scripts — ECharts CDN import, then a <script type="module"> that imports js/charts.js.

<!-- Typical script block at end of <body> -->
<script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
<script type="module" src="js/charts.js"></script>

## css/style.css

Template styles are kept deliberately thin. They only cover layout rules specific to this dashboard. All design tokens (colours, spacing, typography) are imported from ../shared/dt-core.css as CSS custom properties.

/* css/style.css */
@import url('../../shared/dt-core.css');   /* design tokens */

/* ── Layout ─────── */
.dt-layout { display: grid; grid-template-columns: 240px 1fr; }

/* ── KPI cards ──── */
.kpi-card { background: var(--dt-surface); border-radius: var(--dt-radius-lg); }

## js/charts.js

This is the main file you will edit. It has three sections:

Section	Purpose
`/* CONFIG */`	API endpoint URLs or static data objects
`/* CHARTS */`	ECharts option objects — one per chart
`/* INIT */`	Initialise charts and attach event listeners

/* ── CONFIG ─────────────────────── */
const API_BASE = '/api/v1';          // change to your endpoint

/* ── CHARTS ─────────────────────── */
const revenueOption = {
  xAxis: { data: ['Jan','Feb','Mar'] },
  series: [{ data: [4200, 3800, 5100] }],
};

/* ── INIT ───────────────────────── */
const revenueChart = echarts.init(document.getElementById('revenue-chart'));
revenueChart.setOption(revenueOption);

## Naming conventions

Pattern	Meaning
`id="*-chart"`	ECharts mount point
`id="kpi-*"`	KPI card value element (updated via JS)
`.dt-*`	Utility classes from `dt-core.css`
`/* DATA */`	Comment marker for all editable data blocks

💡 Search for /* DATA */ in any template file to find every place you need to substitute your own values.