# Dashboard metrics and filters

> A reporting period picker, removable applied-filter chips with the full filter builder, and metric cards with accessible sparklines, comparison, loading and…

Language: en
Canonical: https://texuli.com/examples/data-dashboard-metrics/
Markdown: https://texuli.com/examples/data-dashboard-metrics.md (this page). Every texuli.com page has a Markdown twin at its URL plus `.md` (the home page is https://texuli.com/index.md), and any page URL answers `Accept: text/markdown` with its twin instead of HTML.
Last Updated: 2026-11-13

---

[All examples](https://texuli.com/examples/)

A reporting period picker, removable applied-filter chips with the full filter builder, and metric cards with accessible sparklines, comparison, loading and empty states.

[Dashboard metrics and filters](https://texuli.com/examples/data-dashboard-metrics/)

`data-dashboard-metrics` · `data/dashboard-metrics`

 data dashboard

 Props
- `fields`
- `saved`
- `sparkline`
- `trend`
- `value`

Live example loads in an isolated same-origin preview frame.

Source (data-dashboard-metrics/DashboardMetricsDemo.svelte)

```
<script lang="ts">
import { Sparkline } from '@texuli/charts/sparkline-lite';
import { FilterBar, type FilterGroup } from '@texuli/data';
import { MetricCard } from '@texuli/data/dashboard';
import type { FilterField } from '@texuli/data/filter-builder';
import { DateRangePicker } from 'texuli/date';

const today = '2026-03-10';
let period = $state({ start: '2026-03-01', end: '2026-03-10' });
let filters = $state<FilterGroup>({
  type: 'group',
  op: 'and',
  children: [{ type: 'condition', field: 'region', operator: 'eq', value: 'North' }],
});
const fields: FilterField[] = [
  { key: 'region', header: 'Region', type: 'enum', options: ['North', 'South', 'West'] },
  { key: 'revenue', header: 'Revenue', type: 'number' },
  { key: 'account', header: 'Account', type: 'text' },
];
const revenue = [12, 15, 13, 18, 17, 22, 24, 21, 28, 31];
const accounts = [4, 5, 5, 6, 7, 6, 8, 9, 9, 11];
</script>

<section class="dashboard-metrics" data-example="data-dashboard-metrics" aria-labelledby="dashboard-metrics-title">
  <header>
    <h2 id="dashboard-metrics-title">Revenue overview</h2>
    <DateRangePicker label="Reporting period" bind:value={period} presets today={today} maxDays={90} />
  </header>
  <FilterBar fields={fields} bind:value={filters} saved={false} />
  <div class="dashboard-metrics__grid">
    <MetricCard title="Revenue" value="$48,290" comparison="vs. previous period" trend="up" trendLabel="12%" >
      {#snippet sparkline()}<Sparkline values={revenue} label="Revenue trend over the reporting period" period="Mar 1–10" />{/snippet}
    </MetricCard>
    <MetricCard title="Active accounts" value="1,284" comparison="vs. previous period" trend="up" trendLabel="4.8%">
      {#snippet sparkline()}<Sparkline values={accounts} label="Active accounts trend over the reporting period" period="Mar 1–10" />{/snippet}
    </MetricCard>
    <MetricCard title="Conversion rate" value="3.6%" comparison="vs. previous period" trend="down" trendLabel="0.4 points" />
    <MetricCard title="Forecast" loading />
    <MetricCard title="Support tickets" empty />
  </div>
</section>

<style>
  .dashboard-metrics { display: grid; gap: 1.25rem; padding: 1.5rem; }
  .dashboard-metrics header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
  .dashboard-metrics h2 { margin: 0; }
  .dashboard-metrics__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: 1rem; }
</style>
```

## For agents

A worked example rendered live in the browser; the isolated preview frame (`/examples/preview/<id>/`) shows the same example without the site shell, and the example page next to it carries its code. The live parts run in the browser and are not in this Markdown; the operations below do the same work through the read-only MCP server at https://texuli.com/mcp (no sign-in; see https://texuli.com/auth.md).

MCP operations ([reference](https://github.com/DailybotHQ/texuli/blob/main/packages/tools/docs/ops.md#operations)):

- `example.search`: Find component examples.
- `component.get`: Read a component manifest.

Docs:

- [Component docs for agents (llms.txt)](https://texuli.com/llms/llms.txt)
- [Catalog manifest snapshot (JSON)](https://texuli.com/catalog/catalog.json)
- [@texuli/examples README](https://github.com/DailybotHQ/texuli/blob/main/packages/examples/README.md)
- [texuli README](https://github.com/DailybotHQ/texuli/blob/main/packages/texuli/README.md)