# SegmentBar

> Small charts that Recharts does not give you, a proportion bar with a legend of values, a progress ring, a centred funnel with step conversion and a table-row trend cell with a sparkline or mini bar.

Source: https://docs.nasaqui.com/components/chart-extras

## Install

```bash
npx shadcn@latest add https://docs.nasaqui.com/r/chart-extras.json
```

Four small charts built next to [`ChartContainer`](https://docs.nasaqui.com/components/chart). They are HTML and SVG, not Recharts, because they have no axes: a bar cut into shares,
a ring, a funnel and a row cell. `TrendCell` reuses the existing `Sparkline` and `MiniBar` and adds the figure and its change beside them.

Every one of them carries its meaning in text as well as colour: the legend of `SegmentBar` lists each value and share, the ring prints its percentage, `FunnelSteps`
writes the conversion between steps, and `TrendCell` shows an arrow and a signed figure.

## When to use

- `SegmentBar`: how a whole splits (channels, plan mix, ticket status, storage by type), or how much of a capacity is used.
- `ProgressRing`: one completion or utilisation figure in a card, a list row or a table.
- `FunnelSteps`: a short funnel with the conversion between steps in a card. Use `FunnelChart` for a segment comparison or a saved funnel list.
- `TrendCell`: a table column that needs a figure, its change and a mini trend.

## When not to use

- Time series with axes and tooltips: use [`ChartContainer`](https://docs.nasaqui.com/components/chart).
- A limit with warning thresholds and a hint: use [`UsageMeter`](https://docs.nasaqui.com/components/usage-meter).
- A single KPI with a delta: use [`StatCard`](https://docs.nasaqui.com/components/stat-card).

## Import

```tsx
import { SegmentBar, ProgressRing, FunnelSteps, TrendCell } from "@fadymondy/nasaq/web";
```

## Quick start

```tsx
import { ProgressRing, SegmentBar } from "@fadymondy/nasaq/web";

export function Overview() {
  return (
    <div className="flex items-center gap-6">
      <ProgressRing value={72} label="Onboarding" caption="of 25 steps" />
      <SegmentBar
        className="flex-1"
        segments={[
          { id: "organic", label: "Organic", value: 4200 },
          { id: "paid", label: "Paid", value: 2100 },
          { id: "referral", label: "Referral", value: 900 },
        ]}
      />
    </div>
  );
}
```

## Anatomy

```
SegmentBar               data-slot="segment-bar"
├─ bar (role="img")      the segments; data-slot="segment-bar-segment" on each
└─ ul                    data-slot="segment-bar-legend": swatch, label, value, share
ProgressRing             data-slot="progress-ring" data-tone role="progressbar"
FunnelSteps              data-slot="funnel-steps"
├─ funnel-steps-step     label, count, share of the first step, the bar
├─ funnel-steps-link     conversion and people lost between two steps, the biggest drop badge
└─ funnel-steps-summary  overall conversion
TrendCell                data-slot="trend-cell" data-trend="up|down|flat"
```

## API

### SegmentBar

`div` props plus:

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `segments` | `{ id, label, value, color? }[]` | required | Parts of the whole. Zero and negative values draw nothing but stay in the legend. |
| `total` | `number` | sum of values | The whole. Larger than the sum leaves an empty track (6 of 10 seats). |
| `format` | `FormatNumberOptions` | plain number | Intl options for legend values. |
| `legend` | `boolean` | `true` | Legend with value and share per segment. |
| `inlineLabels` | `boolean` | `true` | Share inside segments of at least 10%. |
| `patterned` | `boolean` | `false` | Hatch patterns over the fills, so segments differ by more than colour. |
| `size` | `"sm" \| "md" \| "lg"` | `"md"` | Bar thickness. |
| `label` | `string` | shares summary | Accessible name of the bar. |
| `restLabel` | `ReactNode` | none | Legend row for the empty track. |
| `labels` | `Partial<ChartExtrasLabels>` | en / ar | Text overrides. |

### ProgressRing

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `value` | `number` | required | Current value. |
| `max` / `min` | `number` | `100` / `0` | The range that fills the ring. |
| `tone` | `"default" \| "info" \| "success" \| "warning" \| "danger" \| "auto"` | `"default"` | `"auto"` turns warning at `warnAt` and danger at `dangerAt` of the range. |
| `warnAt` / `dangerAt` | `number` | `0.8` / `0.95` | Fractions for `tone="auto"`. |
| `size` | `number` | `96` | Diameter in px. |
| `thickness` | `number` | `8` | Stroke width in a 100 unit box. |
| `children` | `ReactNode` | the percentage | The middle figure. |
| `caption` | `ReactNode` | none | Small text under it. |
| `label` | `string` | required | What is measured (accessible name). |
| `valueText` | `string` | "<n>% complete" | Spoken value. |

### FunnelSteps

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `steps` | `{ id, label, count, detail? }[]` | required | In order, first step is the widest. |
| `format` | `FormatNumberOptions` | plain number | Intl options for counts. |
| `summary` | `boolean` | `true` | Overall conversion line. |
| `label` | `string` | "Funnel steps" | Accessible name. |

### TrendCell

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `value` | `number \| ReactNode` | required | The figure. |
| `format` | `FormatNumberOptions` | none | For a numeric `value`. |
| `data` | `readonly number[]` | none | Values for the small chart, oldest first. |
| `variant` | `"line" \| "bar"` | `"line"` | `Sparkline` or `MiniBar`. |
| `delta` | `number` | none | Change as a fraction (0.124 is +12.4%). |
| `invert` | `boolean` | `false` | Down is good. |
| `highlight` | `number` | last bar | Bar to emphasise. |
| `chartLabel` | `string` | none | Spoken summary of the small chart. |

### Helpers

`segmentShares(segments, total?)`, `ringFraction(value, max, min)`, `ringGeometry(fraction, strokeWidth)`, `ringToneFor(fraction, warnAt, dangerAt)`, `funnelBarShare(count, first, min)`. Pure functions.

## Examples

A capacity bar:

```tsx
import { SegmentBar } from "@fadymondy/nasaq/web";

export const Seats = () => (
  <SegmentBar
    total={20}
    restLabel="Free"
    segments={[
      { id: "admin", label: "Admins", value: 3 },
      { id: "member", label: "Members", value: 11 },
    ]}
  />
);
```

Usage ring that warns:

```tsx
import { ProgressRing } from "@fadymondy/nasaq/web";

export const Storage = () => (
  <ProgressRing value={92} tone="auto" label="Storage used" caption="46 of 50 GB" />
);
```

A table column:

```tsx
import { TrendCell, type DataTableColumn } from "@fadymondy/nasaq/web";

type Row = { id: string; revenue: number; change: number; weeks: number[] };
export const column: DataTableColumn<Row> = {
  id: "revenue",
  header: "Revenue",
  align: "end",
  cell: (r) => <TrendCell value={r.revenue} format={{ style: "currency", currency: "SAR", maximumFractionDigits: 0 }} delta={r.change} data={r.weeks} chartLabel="Revenue, last 8 weeks" />,
  sortValue: (r) => r.revenue,
};
```

Arabic:

```tsx
import { FunnelSteps } from "@fadymondy/nasaq/web";

export const Ar = () => (
  <FunnelSteps
    steps={[
      { id: "visit", label: "زيارة", count: 12000 },
      { id: "cart", label: "إضافة للسلة", count: 3400 },
      { id: "paid", label: "دفع", count: 910 },
    ]}
  />
);
```

## Accessibility

There is no keyboard interaction. The `SegmentBar` bar is `role="img"` with a summary of shares (or your `label`) and the legend is a real list. `ProgressRing` is a
`progressbar` with `aria-valuenow`, `aria-valuemin`, `aria-valuemax` and `aria-valuetext`. Each `FunnelSteps` step is announced "Step 2 of 4", and the
biggest drop is a badge with an icon and text. `TrendCell` has a visually hidden "up / down / no change" next to its arrow. Localise `label`, `chartLabel`, segment labels and `labels`.

## RTL & i18n

- Bars grow from the inline start, so `SegmentBar` reads right to left in Arabic; the ring fills the opposite way and the middle text is not mirrored.
- `TrendCell` charts run right to left (they reuse `Sparkline` and `MiniBar`).
- Numbers and percentages use the active locale with Western digits, and are bidi-isolated (`Num`).

## Styling & tokens

- Colours are the chart palette (`CHART_COLORS`), `--primary`, `--nq-success`, `--nq-warning`, `--nq-danger`, `--nq-info`, `--nq-surface-soft`. Pass token strings in `color`.
- Target `[data-slot="segment-bar-segment"]`, `[data-slot="progress-ring"][data-tone="danger"]`, `[data-slot="trend-cell"][data-trend="down"]`; extend with `className`.

## Do / Don't

- Do keep segment counts under about six; group the tail as "Other".
- Do keep the legend on. It is what makes the bar readable without colour.
- Don't use a ring for something that is not a share of a whole or of a target.
- Don't put more than one `ProgressRing` tone meaning on a page without a caption saying what it means.

## Related

- [`ChartContainer`](https://docs.nasaqui.com/components/chart)
- [`FunnelChart`](https://docs.nasaqui.com/components/funnel-chart)
- [`UsageMeter`](https://docs.nasaqui.com/components/usage-meter)
- [`StatCard`](https://docs.nasaqui.com/components/stat-card)

## Lab

https://docs.nasaqui.com/?path=/docs/components-charts-maps-extra-charts--docs

## Code

### React

```tsx
import { ProgressRing, SegmentBar } from "@fadymondy/nasaq/web";

export function Overview() {
  return (
    <div className="flex items-center gap-6">
      <ProgressRing value={72} label="Onboarding" caption="of 25 steps" />
      <SegmentBar
        className="flex-1"
        segments={[
          { id: "organic", label: "Organic", value: 4200 },
          { id: "paid", label: "Paid", value: 2100 },
          { id: "referral", label: "Referral", value: 900 },
        ]}
      />
    </div>
  );
}
```

### shadcn

```tsx
import { ProgressRing, SegmentBar } from "@/components/ui/chart-extras";

export function Overview() {
  return (
    <div className="flex items-center gap-6">
      <ProgressRing value={72} label="Onboarding" caption="of 25 steps" />
      <SegmentBar
        className="flex-1"
        segments={[
          { id: "organic", label: "Organic", value: 4200 },
          { id: "paid", label: "Paid", value: 2100 },
          { id: "referral", label: "Referral", value: 900 },
        ]}
      />
    </div>
  );
}
```

### Vue

```vue
<script setup lang="ts">
import { NqFunnelSteps, NqProgressRing, NqSegmentBar, NqTrendCell } from "@fadymondy/nasaq/vue";

const segments = [
  { id: "organic", label: "Organic", value: 4200 },
  { id: "paid", label: "Paid", value: 2100 },
  { id: "referral", label: "Referral", value: 900 },
];
const seats = [
  { id: "admin", label: "Admins", value: 3 },
  { id: "member", label: "Members", value: 11 },
];
const steps = [
  { id: "visit", label: "Visit", count: 12000, detail: "/" },
  { id: "cart", label: "Add to cart", count: 3400, detail: "cart_add" },
  { id: "paid", label: "Paid", count: 910 },
];
</script>

<template>
  <div class="grid gap-8">
    <div class="flex items-center gap-6">
      <NqProgressRing :value="72" label="Onboarding" caption="of 25 steps" />
      <NqSegmentBar class="flex-1" :segments="segments" />
    </div>
    <NqSegmentBar :total="20" rest-label="Free" :segments="seats" />
    <div class="flex items-center gap-6">
      <NqProgressRing :value="92" tone="auto" label="Storage used" caption="46 of 50 GB" />
      <NqProgressRing :value="40" tone="success" label="Tests passing" />
    </div>
    <NqFunnelSteps :steps="steps" />
    <div class="grid max-w-xs gap-4">
      <NqTrendCell :value="48210" :delta="0.124" :data="[4, 6, 5, 9, 8, 12]" chart-label="Revenue, last 6 weeks" />
      <NqTrendCell :value="1320" :delta="-0.08" invert variant="bar" :data="[3, 5, 4, 8, 6, 3]" chart-label="Refunds, last 6 weeks" />
    </div>
  </div>
</template>
```

### Blade

```blade
@php
    $segments = [
        ['id' => 'organic', 'label' => 'Organic', 'value' => 4200],
        ['id' => 'paid', 'label' => 'Paid', 'value' => 2100],
        ['id' => 'referral', 'label' => 'Referral', 'value' => 900],
    ];
    $seats = [
        ['id' => 'admin', 'label' => 'Admins', 'value' => 3],
        ['id' => 'member', 'label' => 'Members', 'value' => 11],
    ];
    $steps = [
        ['id' => 'visit', 'label' => 'Visit', 'count' => 12000, 'detail' => '/'],
        ['id' => 'cart', 'label' => 'Add to cart', 'count' => 3400, 'detail' => 'cart_add'],
        ['id' => 'paid', 'label' => 'Paid', 'count' => 910],
    ];
@endphp
<div class="grid gap-8">
    <div class="flex items-center gap-6">
        <x-nq::chart-extras.progress-ring :value="72" label="Onboarding" caption="of 25 steps" />
        <x-nq::chart-extras.segment-bar class="flex-1" :segments="$segments" />
    </div>
    <x-nq::chart-extras.segment-bar :total="20" rest-label="Free" :segments="$seats" />
    <div class="flex items-center gap-6">
        <x-nq::chart-extras.progress-ring :value="92" tone="auto" label="Storage used" caption="46 of 50 GB" />
        <x-nq::chart-extras.progress-ring :value="40" tone="success" label="Tests passing" />
    </div>
    <x-nq::chart-extras.funnel-steps :steps="$steps" />
    <div class="grid max-w-xs gap-4">
        <x-nq::chart-extras.trend-cell :value="48210" :delta="0.124" :data="[4, 6, 5, 9, 8, 12]" chart-label="Revenue, last 6 weeks" />
        <x-nq::chart-extras.trend-cell :value="1320" :delta="-0.08" invert variant="bar" :data="[3, 5, 4, 8, 6, 3]" chart-label="Refunds, last 6 weeks" />
    </div>
</div>
```

### HTML + Alpine

```html
<div class="grid gap-8">
    <div class="flex items-center gap-6">
        <div data-slot="progress-ring" data-tone="default" role="progressbar" aria-label="Onboarding" aria-valuemin="0" aria-valuemax="100" aria-valuenow="72" aria-valuetext="72% complete" style="width: 96px; height: 96px" class="relative inline-grid shrink-0 place-items-center">
    <svg viewBox="0 0 100 100" aria-hidden="true" class="absolute inset-0 size-full -rotate-90 rtl:-scale-x-100 rtl:rotate-90">
        <circle cx="50" cy="50" r="46" fill="none" stroke-width="8" class="stroke-nq-surface-soft" />
                    <circle cx="50" cy="50" r="46" fill="none" stroke-width="8" stroke-linecap="round" stroke-dasharray="208.099 80.927" style="stroke: var(--primary)" class="transition-[stroke-dasharray] duration-300 ease-nq motion-reduce:transition-none" />
            </svg>
    <div class="relative flex max-w-[70%] flex-col items-center text-center leading-tight">
        <span class="inline-flex items-center gap-1 text-label tabular-nums text-foreground" style="font-size: 19.2px">
                        <bdi data-slot="num" data-numeric="" class="tabular-nums">72%</bdi>
        </span>
        <span class="text-caption text-muted-foreground">of 25 steps</span>    </div>
</div>
        <div data-slot="segment-bar" class="flex min-w-0 flex-col gap-3 flex-1">
    <div role="img" aria-label="Breakdown: Organic 58%, Paid 29%, Referral 12%" class="flex w-full gap-0.5 overflow-hidden rounded-full bg-nq-surface-soft h-4">
                                    <span data-slot="segment-bar-segment" title="Organic: 4,200 (58.3%)" style="flex-grow: 4200; flex-basis: 0; background-color: var(--primary);" class="flex min-w-1 items-center justify-center overflow-hidden text-caption text-primary-foreground first:rounded-s-full last:rounded-e-full">
                    <span class="px-1 tabular-nums [text-shadow:0_0_2px_rgb(0_0_0/0.35)]">58%</span>                </span>
                                                <span data-slot="segment-bar-segment" title="Paid: 2,100 (29.2%)" style="flex-grow: 2100; flex-basis: 0; background-color: var(--nq-tag-blue);" class="flex min-w-1 items-center justify-center overflow-hidden text-caption text-primary-foreground first:rounded-s-full last:rounded-e-full">
                    <span class="px-1 tabular-nums [text-shadow:0_0_2px_rgb(0_0_0/0.35)]">29%</span>                </span>
                                                <span data-slot="segment-bar-segment" title="Referral: 900 (12.5%)" style="flex-grow: 900; flex-basis: 0; background-color: var(--nq-tag-teal);" class="flex min-w-1 items-center justify-center overflow-hidden text-caption text-primary-foreground first:rounded-s-full last:rounded-e-full">
                    <span class="px-1 tabular-nums [text-shadow:0_0_2px_rgb(0_0_0/0.35)]">12%</span>                </span>
                                </div>
            <ul data-slot="segment-bar-legend" class="grid gap-x-6 gap-y-1.5 text-body-sm [grid-template-columns:repeat(auto-fill,minmax(15rem,1fr))]">
                            <li class="flex min-w-0 items-center gap-2">
                    <span aria-hidden="true" class="size-2.5 shrink-0 rounded-[2px]" style="background-color: var(--primary);"></span>
                    <span class="min-w-0 flex-1 truncate text-muted-foreground">Organic</span>
                    <span class="tabular-nums text-foreground"><bdi data-slot="num" data-numeric="" class="tabular-nums">4,200</bdi>
</span>
                    <span class="w-12 text-end tabular-nums text-muted-foreground"><bdi data-slot="num" data-numeric="" class="tabular-nums">58%</bdi>
</span>
                </li>
                            <li class="flex min-w-0 items-center gap-2">
                    <span aria-hidden="true" class="size-2.5 shrink-0 rounded-[2px]" style="background-color: var(--nq-tag-blue);"></span>
                    <span class="min-w-0 flex-1 truncate text-muted-foreground">Paid</span>
                    <span class="tabular-nums text-foreground"><bdi data-slot="num" data-numeric="" class="tabular-nums">2,100</bdi>
</span>
                    <span class="w-12 text-end tabular-nums text-muted-foreground"><bdi data-slot="num" data-numeric="" class="tabular-nums">29%</bdi>
</span>
                </li>
                            <li class="flex min-w-0 items-center gap-2">
                    <span aria-hidden="true" class="size-2.5 shrink-0 rounded-[2px]" style="background-color: var(--nq-tag-teal);"></span>
                    <span class="min-w-0 flex-1 truncate text-muted-foreground">Referral</span>
                    <span class="tabular-nums text-foreground"><bdi data-slot="num" data-numeric="" class="tabular-nums">900</bdi>
</span>
                    <span class="w-12 text-end tabular-nums text-muted-foreground"><bdi data-slot="num" data-numeric="" class="tabular-nums">12%</bdi>
</span>
                </li>
                                </ul>
    </div>
    </div>
    <div data-slot="segment-bar" class="flex min-w-0 flex-col gap-3">
    <div role="img" aria-label="Breakdown: Admins 15%, Members 55%" class="flex w-full gap-0.5 overflow-hidden rounded-full bg-nq-surface-soft h-4">
                                    <span data-slot="segment-bar-segment" title="Admins: 3 (15%)" style="flex-grow: 3; flex-basis: 0; background-color: var(--primary);" class="flex min-w-1 items-center justify-center overflow-hidden text-caption text-primary-foreground first:rounded-s-full last:rounded-e-full">
                    <span class="px-1 tabular-nums [text-shadow:0_0_2px_rgb(0_0_0/0.35)]">15%</span>                </span>
                                                <span data-slot="segment-bar-segment" title="Members: 11 (55%)" style="flex-grow: 11; flex-basis: 0; background-color: var(--nq-tag-blue);" class="flex min-w-1 items-center justify-center overflow-hidden text-caption text-primary-foreground first:rounded-s-full last:rounded-e-full">
                    <span class="px-1 tabular-nums [text-shadow:0_0_2px_rgb(0_0_0/0.35)]">55%</span>                </span>
                            <span aria-hidden="true" style="flex-grow: 6; flex-basis: 0"></span>    </div>
            <ul data-slot="segment-bar-legend" class="grid gap-x-6 gap-y-1.5 text-body-sm [grid-template-columns:repeat(auto-fill,minmax(15rem,1fr))]">
                            <li class="flex min-w-0 items-center gap-2">
                    <span aria-hidden="true" class="size-2.5 shrink-0 rounded-[2px]" style="background-color: var(--primary);"></span>
                    <span class="min-w-0 flex-1 truncate text-muted-foreground">Admins</span>
                    <span class="tabular-nums text-foreground"><bdi data-slot="num" data-numeric="" class="tabular-nums">3</bdi>
</span>
                    <span class="w-12 text-end tabular-nums text-muted-foreground"><bdi data-slot="num" data-numeric="" class="tabular-nums">15%</bdi>
</span>
                </li>
                            <li class="flex min-w-0 items-center gap-2">
                    <span aria-hidden="true" class="size-2.5 shrink-0 rounded-[2px]" style="background-color: var(--nq-tag-blue);"></span>
                    <span class="min-w-0 flex-1 truncate text-muted-foreground">Members</span>
                    <span class="tabular-nums text-foreground"><bdi data-slot="num" data-numeric="" class="tabular-nums">11</bdi>
</span>
                    <span class="w-12 text-end tabular-nums text-muted-foreground"><bdi data-slot="num" data-numeric="" class="tabular-nums">55%</bdi>
</span>
                </li>
                                        <li class="flex min-w-0 items-center gap-2">
                    <span aria-hidden="true" class="size-2.5 shrink-0 rounded-[2px] border border-border bg-nq-surface-soft"></span>
                    <span class="min-w-0 flex-1 truncate text-muted-foreground">Free</span>
                    <span class="tabular-nums text-foreground"><bdi data-slot="num" data-numeric="" class="tabular-nums">6</bdi>
</span>
                    <span class="w-12"></span>
                </li>
                    </ul>
    </div>
    <div class="flex items-center gap-6">
        <div data-slot="progress-ring" data-tone="warning" role="progressbar" aria-label="Storage used" aria-valuemin="0" aria-valuemax="100" aria-valuenow="92" aria-valuetext="92% complete" style="width: 96px; height: 96px" class="relative inline-grid shrink-0 place-items-center">
    <svg viewBox="0 0 100 100" aria-hidden="true" class="absolute inset-0 size-full -rotate-90 rtl:-scale-x-100 rtl:rotate-90">
        <circle cx="50" cy="50" r="46" fill="none" stroke-width="8" class="stroke-nq-surface-soft" />
                    <circle cx="50" cy="50" r="46" fill="none" stroke-width="8" stroke-linecap="round" stroke-dasharray="265.904 23.122" style="stroke: var(--nq-warning)" class="transition-[stroke-dasharray] duration-300 ease-nq motion-reduce:transition-none" />
            </svg>
    <div class="relative flex max-w-[70%] flex-col items-center text-center leading-tight">
        <span class="inline-flex items-center gap-1 text-label tabular-nums text-foreground" style="font-size: 19.2px">
            <svg aria-hidden="true" class="size-[0.8em] shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"/>
  <path d="M12 9v4"/>
  <path d="M12 17h.01"/>
</svg>            <bdi data-slot="num" data-numeric="" class="tabular-nums">92%</bdi>
        </span>
        <span class="text-caption text-muted-foreground">46 of 50 GB</span>    </div>
</div>
        <div data-slot="progress-ring" data-tone="success" role="progressbar" aria-label="Tests passing" aria-valuemin="0" aria-valuemax="100" aria-valuenow="40" aria-valuetext="40% complete" style="width: 96px; height: 96px" class="relative inline-grid shrink-0 place-items-center">
    <svg viewBox="0 0 100 100" aria-hidden="true" class="absolute inset-0 size-full -rotate-90 rtl:-scale-x-100 rtl:rotate-90">
        <circle cx="50" cy="50" r="46" fill="none" stroke-width="8" class="stroke-nq-surface-soft" />
                    <circle cx="50" cy="50" r="46" fill="none" stroke-width="8" stroke-linecap="round" stroke-dasharray="115.611 173.416" style="stroke: var(--nq-success)" class="transition-[stroke-dasharray] duration-300 ease-nq motion-reduce:transition-none" />
            </svg>
    <div class="relative flex max-w-[70%] flex-col items-center text-center leading-tight">
        <span class="inline-flex items-center gap-1 text-label tabular-nums text-foreground" style="font-size: 19.2px">
                        <bdi data-slot="num" data-numeric="" class="tabular-nums">40%</bdi>
        </span>
            </div>
</div>
    </div>
    <div data-slot="funnel-steps" role="group" aria-label="Funnel steps" class="flex min-w-0 flex-col">
            <div data-slot="funnel-steps-step" class="flex flex-col">
                        <div class="flex items-baseline justify-between gap-3 text-body-sm">
                <span class="min-w-0 truncate text-foreground">
                    <span class="sr-only">Step 1 of 3. </span>
                    Visit
                    <bdi dir="ltr" class="ms-2 text-caption text-muted-foreground">/</bdi>                </span>
                <span class="shrink-0 tabular-nums text-foreground">
                    <bdi data-slot="num" data-numeric="" class="tabular-nums">12,000</bdi>
                                    </span>
            </div>
            <div class="mt-1 flex h-7 justify-center" aria-hidden="true">
                <span class="h-full rounded-control" style="width: 100%; background-color: var(--primary); opacity: 1"></span>
            </div>
        </div>
            <div data-slot="funnel-steps-step" class="flex flex-col">
                            <div data-slot="funnel-steps-link" class="flex flex-wrap items-center justify-center gap-x-3 gap-y-1 py-1.5 text-caption text-muted-foreground">
                    <svg aria-hidden="true" class="size-3.5 shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M12 5v14"/>
  <path d="m19 12-7 7-7-7"/>
</svg>                    <span class="tabular-nums">28.3% continued</span>
                    <span aria-hidden="true">·</span>
                    <span class="tabular-nums">8,600 left</span>
                                    </div>
                        <div class="flex items-baseline justify-between gap-3 text-body-sm">
                <span class="min-w-0 truncate text-foreground">
                    <span class="sr-only">Step 2 of 3. </span>
                    Add to cart
                    <bdi dir="ltr" class="ms-2 text-caption text-muted-foreground">cart_add</bdi>                </span>
                <span class="shrink-0 tabular-nums text-foreground">
                    <bdi data-slot="num" data-numeric="" class="tabular-nums">3,400</bdi>
                    <span class="ms-2 text-caption text-muted-foreground"><bdi data-slot="num" data-numeric="" class="tabular-nums">28.3%</bdi>
</span>                </span>
            </div>
            <div class="mt-1 flex h-7 justify-center" aria-hidden="true">
                <span class="h-full rounded-control" style="width: 28.333%; background-color: var(--primary); opacity: 0.817"></span>
            </div>
        </div>
            <div data-slot="funnel-steps-step" class="flex flex-col">
                            <div data-slot="funnel-steps-link" class="flex flex-wrap items-center justify-center gap-x-3 gap-y-1 py-1.5 text-caption text-muted-foreground">
                    <svg aria-hidden="true" class="size-3.5 shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M12 5v14"/>
  <path d="m19 12-7 7-7-7"/>
</svg>                    <span class="tabular-nums">26.8% continued</span>
                    <span aria-hidden="true">·</span>
                    <span class="tabular-nums">2,490 left</span>
                                            <span data-slot="badge"     class="inline-flex h-5 shrink-0 items-center gap-1 whitespace-nowrap rounded-[4px] border px-1.5 text-caption font-medium [&_svg]:size-3 border-nq-warning/40 bg-nq-warning-soft text-nq-warning-text"><svg aria-hidden="true" class="size-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"/>
  <path d="M12 9v4"/>
  <path d="M12 17h.01"/>
</svg>Biggest drop</span>
                                    </div>
                        <div class="flex items-baseline justify-between gap-3 text-body-sm">
                <span class="min-w-0 truncate text-foreground">
                    <span class="sr-only">Step 3 of 3. </span>
                    Paid
                                    </span>
                <span class="shrink-0 tabular-nums text-foreground">
                    <bdi data-slot="num" data-numeric="" class="tabular-nums">910</bdi>
                    <span class="ms-2 text-caption text-muted-foreground"><bdi data-slot="num" data-numeric="" class="tabular-nums">7.6%</bdi>
</span>                </span>
            </div>
            <div class="mt-1 flex h-7 justify-center" aria-hidden="true">
                <span class="h-full rounded-control" style="width: 7.583%; background-color: var(--primary); opacity: 0.633"></span>
            </div>
        </div>
                <p data-slot="funnel-steps-summary" class="mt-3 flex items-center justify-between gap-3 border-t border-border pt-3 text-body-sm">
            <span class="text-muted-foreground">Overall conversion</span>
            <span class="text-label tabular-nums text-foreground"><bdi data-slot="num" data-numeric="" class="tabular-nums">7.6%</bdi>
</span>
        </p>
    </div>
    <div class="grid max-w-xs gap-4">
        <div data-slot="trend-cell" data-trend="up" class="flex items-center justify-end gap-3">
    <div class="flex flex-col items-end leading-tight">
        <span class="text-body-sm tabular-nums text-foreground"><bdi data-slot="num" data-numeric="" class="tabular-nums">48,210</bdi>
</span>
                    <span class="inline-flex items-center gap-0.5 text-caption tabular-nums text-nq-success-text">
                <svg aria-hidden="true" class="size-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m5 12 7-7 7 7"/>
  <path d="M12 19V5"/>
</svg>                <span class="sr-only">up </span>
                <span dir="ltr" class="tabular-nums">+12.4%</span>
            </span>
            </div>
                        <div data-slot="sparkline"  role="img" aria-label="Revenue, last 6 weeks"  class="shrink-0 h-8 w-20">
    <svg viewBox="0 0 128 32" preserveAspectRatio="none" class="size-full overflow-visible rtl:-scale-x-100" aria-hidden="true" focusable="false">
        <defs>
            <linearGradient id="nq-spark-aab44d0c" x1="0" y1="0" x2="0" y2="1">
                <stop offset="0%" stop-color="var(--nq-success)" stop-opacity="0.3" />
                <stop offset="100%" stop-color="var(--nq-success)" stop-opacity="0" />
            </linearGradient>
        </defs>
        <path d="M2,20.67C10.27,19.11,18.53,16,26.8,16C35.07,16,43.33,18.33,51.6,18.33C59.87,18.33,68.13,9,76.4,9C84.67,9,92.93,11.33,101.2,11.33C109.47,11.33,117.73,5.11,126,2L126.00,30.00L2.00,30.00Z" fill="url(#nq-spark-aab44d0c)" stroke="none" />        <path d="M2,20.67C10.27,19.11,18.53,16,26.8,16C35.07,16,43.33,18.33,51.6,18.33C59.87,18.33,68.13,9,76.4,9C84.67,9,92.93,11.33,101.2,11.33C109.47,11.33,117.73,5.11,126,2" fill="none" stroke="var(--nq-success)" stroke-width="1.5" vector-effect="non-scaling-stroke" stroke-linejoin="round" stroke-linecap="round" />
    </svg>
</div>
            </div>
        <div data-slot="trend-cell" data-trend="down" class="flex items-center justify-end gap-3">
    <div class="flex flex-col items-end leading-tight">
        <span class="text-body-sm tabular-nums text-foreground"><bdi data-slot="num" data-numeric="" class="tabular-nums">1,320</bdi>
</span>
                    <span class="inline-flex items-center gap-0.5 text-caption tabular-nums text-nq-success-text">
                <svg aria-hidden="true" class="size-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M12 5v14"/>
  <path d="m19 12-7 7-7-7"/>
</svg>                <span class="sr-only">down </span>
                <span dir="ltr" class="tabular-nums">-8%</span>
            </span>
            </div>
                        <div data-slot="mini-bar"  role="img" aria-label="Refunds, last 6 weeks"  class="shrink-0 h-8 w-20">
    <div class="flex size-full items-end gap-0.5 pt-0.5">
                    <span class="min-w-0 flex-1 rounded-[2px]"
                style="height: 37.5%; background-color: var(--nq-success); opacity: 0.35"></span>
                    <span class="min-w-0 flex-1 rounded-[2px]"
                style="height: 62.5%; background-color: var(--nq-success); opacity: 0.35"></span>
                    <span class="min-w-0 flex-1 rounded-[2px]"
                style="height: 50%; background-color: var(--nq-success); opacity: 0.35"></span>
                    <span class="min-w-0 flex-1 rounded-[2px]"
                style="height: 100%; background-color: var(--nq-success); opacity: 0.35"></span>
                    <span class="min-w-0 flex-1 rounded-[2px]"
                style="height: 75%; background-color: var(--nq-success); opacity: 0.35"></span>
                    <span class="min-w-0 flex-1 rounded-[2px]"
                style="height: 37.5%; background-color: var(--nq-success); opacity: 1"></span>
            </div>
</div>
            </div>
    </div>
</div>
```