> ## Documentation Index
> Fetch the complete documentation index at: https://docs.usedatabrain.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Metrics

> Build individual visualizations and KPIs to power your dashboards

## What is a Metric?

A metric is an individual visualization or KPI that displays data from your connected data sources. Metrics are the building blocks of dashboards - they can be charts, tables, single-value cards, or other visual representations of your data.

## Types of Charts

<CardGroup cols={3}>
  <Card title="Charts" icon="chart-column">
    Bar, line, pie, area, scatter, and more
  </Card>

  <Card title="Tables" icon="table">
    Data grids with sorting and pagination
  </Card>

  <Card title="Single Values" icon="hashtag">
    KPIs with trend indicators
  </Card>

  <Card title="Gauges" icon="gauge">
    Progress and goal tracking
  </Card>

  <Card title="Funnel & Flow" icon="arrow-right-left">
    Conversion & flow analysis
  </Card>

  <Card title="Geo Maps" icon="map">
    Location-based visualizations
  </Card>
</CardGroup>

## Creating Metrics

DataBrain offers multiple ways to create metrics:

### Visual Builder

Drag-and-drop interface for building metrics without SQL. Select dimensions, measures, and apply transformations visually.

### Custom SQL

Write your own SQL queries for complete control over the data. Perfect for complex transformations and calculations.

### AI Chat Mode

Describe what you want in natural language, and let AI generate the metric for you. "Show me revenue by region for the last quarter"

<Card title="Create a Metric" icon="plus" href="/guides/onboarding-and-configuration/create-a-metric">
  Step-by-step guide to creating metrics
</Card>

## Chart Types

DataBrain supports 20+ chart types:

<Tabs>
  <Tab title="Common Charts">
    * **Bar Chart** - Compare values across categories
    * **Line Chart** - Show trends over time
    * **Pie Chart** - Display proportions
    * **Area Chart** - Visualize cumulative trends
    * **Scatter Plot** - Show correlation
  </Tab>

  <Tab title="Advanced Charts">
    * **Combo Chart** - Mix bars and lines
    * **Stacked Bar** - Show composition
    * **Waterfall** - Visualize sequential changes
    * **Funnel** - Display conversion rates
    * **Sankey** - Flow diagrams
  </Tab>

  <Tab title="Tables & More">
    * **Table** - Data grid with sorting
    * **Pivot Table** - Multi-dimensional analysis
    * **Single Value** - KPI card
    * **Gauge** - Progress indicator
  </Tab>
</Tabs>

## Metric Filters

Add filters to control what data appears in your metric:

### Static Filters

Fixed conditions applied to the metric query.
Option Types include:

1. Auto Filter - Automatically fetches values from a selected database column.
2. Manual Filter - Allows custom value labels in the frontend while using database values for filtering.
3. Range Filter - Filters data based on a specified range.
4. Date Filter - Filters data by a single date or a date range.

### Variable Filters

Dynamic filters that users can modify. Great for interactive dashboards.\
[Learn more about variable filters →](https://docs.usedatabrain.com/guides/metric/apply-metric-filter/metric-filter-variable)

### Custom SQL Filters

Advanced filtering using custom SQL expressions.
[Learn more about custom SQL filters →](https://docs.usedatabrain.com/guides/metric/apply-metric-filter/metric-filter-custom)

## Customization & Styling

### Chart Appearance

* Colors and palettes
* Fonts and text sizing
* Axis labels and formatting
* Legend position
* Grid lines and ticks

<Card title="Chart Appearance" icon="paintbrush" href="/guides/visualizations-actions-and-appearance/chart-appearance">
  Customize chart styling and appearance
</Card>

### Metric Actions

Configure what happens when users interact with your metrics:

#### Click Actions

* Drill down to detailed data
* Navigate to other dashboards
* Open custom URLs
* Apply filters to other metrics

#### Drill Down

Create hierarchical exploration paths. Click on a region to see cities, click a city to see stores.

#### Cross-Dashboard Drill Down

Navigate to related dashboards while preserving filter context.

<Card title="Chart Actions" icon="hand-pointer" href="/guides/visualizations-actions-and-appearance/chart-actions">
  Configure interactive chart actions
</Card>

## Advanced Features

### Custom Columns

Create calculated fields using formulas and functions. No SQL required.

```
Revenue Per Customer = Total Revenue / Customer Count
```

### Metric Expressions

Build complex KPIs with custom expressions for single-value cards.

```
((Current Month - Previous Month) / Previous Month) * 100
```

### AI Summary

Generate natural language summaries of metric data automatically.

### Dynamic Properties

Create conditional formatting and styling based on data values.

<Card title="Dynamic Properties" icon="wand-magic-sparkles" href="/guides/metric/dynamic-property">
  Add conditional formatting to metrics
</Card>

## Metric Management

### Organize Metrics

* Archive unused metrics
* Tag and categorize
* Search and filter
* View unpublished drafts

### Share & Export

* Download as images (PNG, JPEG)
* Export underlying data (CSV, Excel)
* Share specific metrics
* Embed individual metrics

### Version Control

* Track metric changes
* Restore previous versions
* View edit history

<Card title="Edit a Metric" icon="pen-to-square" href="/guides/metric/edit-a-metric">
  Learn how to edit and manage metrics
</Card>

## Embedding Metrics

Embed individual metrics into your application:

```html theme={"dark"}
<dbn-metric 
  token="your-guest-token" 
  metric-id="your-metric-id" 
/>
```

Embedded metrics support:

* Custom styling
* Event handlers
* Responsive sizing
* Filter controls

<Card title="Embed Metrics" icon="code" href="/developer-docs">
  Developer guide for embedding metrics
</Card>

## Best Practices

<AccordionGroup>
  <Accordion title="Choose the Right Chart Type" icon="chart-bar">
    Match your chart type to your data and message. Use bars for comparisons, lines for trends, pies for proportions.
  </Accordion>

  <Accordion title="Keep It Simple" icon="minimize">
    Don't overcrowd charts. Focus on the key message and remove unnecessary elements.
  </Accordion>

  <Accordion title="Use Meaningful Titles" icon="heading">
    Write clear, descriptive titles that tell users what they're looking at.
  </Accordion>

  <Accordion title="Add Context" icon="info-circle">
    Include footnotes, descriptions, and tooltips to help users interpret the data.
  </Accordion>

  <Accordion title="Optimize Performance" icon="gauge-high">
    Limit data points, use aggregations, and apply filters to keep queries fast.
  </Accordion>
</AccordionGroup>

## Performance Tips

* **Use Aggregations** - Pre-aggregate data in your queries
* **Apply Filters** - Limit the data range with date filters
* **Leverage Caching** - Enable query result caching
* **Optimize SQL** - Write efficient custom SQL queries
* **Limit Rows** - Set reasonable row limits for tables

## Next Steps

<CardGroup cols={2}>
  <Card title="Create Your First Metric" icon="plus" href="/guides/onboarding-and-configuration/create-a-metric">
    Build a metric step-by-step
  </Card>

  <Card title="Metric with AI" icon="sparkles" href="/guides/onboarding-and-configuration/create-a-metric/create-a-metric-using-chat-mode">
    Use AI to generate metrics
  </Card>

  <Card title="Custom SQL Metrics" icon="code" href="/guides/onboarding-and-configuration/create-a-metric/create-a-metric-using-custom-sql">
    Write custom SQL queries
  </Card>

  <Card title="Chart Appearance" icon="palette" href="/guides/visualizations-actions-and-appearance/chart-appearance">
    Customize metric styling
  </Card>
</CardGroup>