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

# Breakdowns

export const Icon = ({name}) => {
  return <div className="h-4 w-4 fill-gray-800 dark:fill-gray-100 text-gray-800 dark:text-gray-100 inline-block align-middle">
            <svg className="w-4 h-4 bg-gray-800 dark:bg-gray-100" style={{
    maskImage: `url('https://mintlify.b-cdn.net/v6.5.1/solid/${name}.svg')`,
    maskRepeat: "no-repeat",
    maskPosition: "center center"
  }} />
        </div>;
};

export const IconText = ({name, text, iconSource = "mintlify", iconLocation = "before", iconType = "solid"}) => {
  const sourceUrl = iconSource === 'local' ? `url('/images/icons/${name}.svg')` : `url('https://mintlify.b-cdn.net/v6.5.1/${iconType}/${name}.svg')`;
  return <>
            <div className="inline-block pl-2">
                {iconLocation === 'before' && <div className="h-3.5 w-3.5 fill-gray-800 dark:fill-gray-100 text-gray-800 dark:text-gray-100 inline-block align-middle mr-2">
                        <svg className="w-4 h-4 bg-gray-800 dark:bg-gray-100 " style={{
    maskImage: sourceUrl,
    maskRepeat: "no-repeat",
    maskPosition: "center center"
  }} />
                    </div>}
                <span className="inline-block align-middle font-semibold fill-gray-800 dark:fill-gray-100 text-gray-800 dark:text-gray-100 pl-1 pr-2">{text}</span>
                {iconLocation === 'after' && <div className="h-3.5 w-3.5 fill-gray-800 dark:fill-gray-100 text-gray-800 dark:text-gray-100 inline-block align-middle mr-2">
                        <svg className="w-4 h-4 bg-gray-800 dark:bg-gray-100 pr-3" style={{
    maskImage: sourceUrl,
    maskRepeat: "no-repeat",
    maskPosition: "center center"
  }} />
                    </div>}
            </div>
        </>;
};

Breakdowns allow you to compare metric values across a certain property.

They help you answer questions such as:

* How many Added To Cart events do I have *per country*
* How many Website visits do I have *per device type*
* How much Spend *per Ad Campaign*
* How much Purchases can be *first-party attributed per Channel*

## Applying a Breakdown

1. Click on <IconText name="plus" text="Add breakdown" />.
   <Frame>
     <img src="https://mintcdn.com/converge/zWlDFBz7l1F_0PFn/images/insights-dashboards/breakdown-icon.png?fit=max&auto=format&n=zWlDFBz7l1F_0PFn&q=85&s=be12b0fd2a83628d102e677decdb2911" alt="filter-icon" width="574" height="130" data-path="images/insights-dashboards/breakdown-icon.png" />
   </Frame>
2. Choose a property to break down, e.g. **Channel**
   <Frame>
     <img src="https://mintcdn.com/converge/zWlDFBz7l1F_0PFn/images/insights-dashboards/breakdown-example-channel.png?fit=max&auto=format&n=zWlDFBz7l1F_0PFn&q=85&s=10e1055839c80c3f0b6ac5d863a78a29" alt="filter-icon" width="574" height="130" data-path="images/insights-dashboards/breakdown-example-channel.png" />
   </Frame>
3. Done, your metric should be broken down across this dimension
   <Frame>
     <img src="https://mintcdn.com/converge/zWlDFBz7l1F_0PFn/images/insights-dashboards/breakdown-example-full-viz.png?fit=max&auto=format&n=zWlDFBz7l1F_0PFn&q=85&s=d34fa669017e73398af3cbc5bd176d13" alt="multiple metrics" width="2189" height="905" data-path="images/insights-dashboards/breakdown-example-full-viz.png" />
   </Frame>