# Statistics 19 - Total Assets Breakdown

> A total assets card showing the overall value with growth, a segmented distribution bar with tooltips, and a legend listing each revenue source with its amount and share.

A shadcn/ui block from the [@shadcn-space](https://shadcnspace.com/?utm_source=shadcn.exchange) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/shadcn-space/statistics-19).

- Page, with a live preview: https://shadcn.exchange/r/shadcn-space/statistics-19
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/shadcn-space/statistics-19-light-0d0c687da82c14ea.png
- Registry item: https://shadcnspace.com/r/statistics-19.json
- Listed: 2026-10-20, source last changed 2026-10-20

## Install

```bash
npx shadcn@latest add https://shadcn.exchange/r/shadcn-space/statistics-19.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- npm packages: `lucide-react`
- Registry items: `card`, `chart`

## Files

### `src/components/shadcn-space/blocks/statistics-19/page.tsx`

```tsx
import Statistic from "@/components/shadcn-space/blocks/statistics-19/statistics";

export default function StatisticsPage() {
  return <Statistic />;
}
```

### `src/components/shadcn-space/blocks/statistics-19/statistics.tsx`

```tsx
"use client";

import { Wallet } from "lucide-react";
import { cn } from "@/lib/utils";
import { Card, CardHeader, CardTitle } from "@/components/ui/card";
import {
  ChartContainer,
  ChartTooltip,
  type ChartConfig,
} from "@/components/ui/chart";
import {
  Bar,
  BarChart,
  Rectangle,
  XAxis,
  YAxis,
  type BarShapeProps,
  type TooltipContentProps,
} from "recharts";

const allAssets = [
  {
    key: "product",
    indicatorClass: "bg-primary",
    name: "Product Sales",
    value: "$312,500.45",
    percentage: "(65%)",
    count: 29,
    opacity: 1,
  },
  {
    key: "service",
    indicatorClass: "bg-primary/80",
    name: "Service Revenue",
    value: "$125,000.25",
    percentage: "(26%)",
    count: 14,
    opacity: 0.8,
  },
  {
    key: "other",
    indicatorClass: "bg-primary/40",
    name: "Other Income",
    value: "$40,730.20",
    percentage: "(9%)",
    count: 9,
    opacity: 0.4,
  },
];

const chartData = allAssets.flatMap(
  ({ key, name, percentage, opacity, count }) =>
    Array.from({ length: count }, () => ({
      key,
      name,
      percentage,
      opacity,
      value: 1,
    })),
);

const chartConfig = {
  value: {
    label: "Assets",
    color: "var(--primary)",
  },
} satisfies ChartConfig;

const AssetTooltip = ({ active, payload }: TooltipContentProps) => {
  const item = payload?.[0]?.payload as (typeof chartData)[number] | undefined;
  if (!active || !item) return null;

  return (
    <div className="relative w-max -translate-x-1/2 rounded-md border border-border bg-background px-2 py-1.5 text-foreground shadow-sm">
      <span className="font-medium text-xs">{item.name}</span>
      <span className="opacity-70 text-xs"> {item.percentage}</span>
      <span className="absolute -bottom-1.5 left-1/2 size-2.5 -translate-x-1/2 rotate-45 rounded-xs bg-foreground" />
    </div>
  );
};

const Statistics = () => {
  return (
    <div className="lg:py-16 sm:py-10 py-8 px-4">
      <Card className="h-full gap-0! w-full max-w-md mx-auto overflow-visible!">
        <CardHeader className="border-b border-border">
          <CardTitle className="flex items-center gap-2">
            <Wallet size={16} className="text-muted-foreground" />
            Total Assets
          </CardTitle>
        </CardHeader>

        <div className="border-b border-border px-5 py-6 flex flex-col gap-6 shrink-0">
          <div className="flex flex-col gap-1">
            <span className="text-2xl font-semibold tracking-tight text-foreground">
              $478,230.90
            </span>
            <div className="flex items-center gap-2 flex-wrap">
              <span className="text-sm font-normal text-teal-400">+15.7%</span>
              <span className="text-sm font-normal text-muted-foreground">
                +$65,000
              </span>
              <span className="text-sm font-normal text-muted-foreground">
                vs last month
              </span>
            </div>
          </div>

          <div className="flex flex-col gap-3">
            <span className="text-sm font-medium text-foreground">
              Distribution
            </span>
            <ChartContainer
              config={chartConfig}
              className="aspect-auto h-5 w-full"
            >
              <BarChart
                data={chartData}
                margin={{ top: 0, right: 0, bottom: 0, left: 0 }}
                barCategoryGap={2}
              >
                <XAxis hide height={0} />
                <YAxis hide width={0} domain={[0, 1]} />
                <ChartTooltip
                  cursor={false}
                  offset={0}
                  position={{ y: -36 }}
                  allowEscapeViewBox={{ x: true, y: true }}
                  wrapperStyle={{ zIndex: 50, pointerEvents: "none" }}
                  content={(props) => <AssetTooltip {...props} />}
                />
                <Bar
                  dataKey="value"
                  fill="var(--color-value)"
                  radius={2}
                  isAnimationActive={false}
                  shape={(props: BarShapeProps) => (
                    <Rectangle {...props} fillOpacity={props.payload.opacity} />
                  )}
                />
              </BarChart>
            </ChartContainer>
          </div>
        </div>

        <div className="flex flex-col">
          {allAssets.map((item) => (
            <div
              key={item.key}
              className="flex items-center p-4 gap-4 border-b border-border last:border-b-0 last:pb-0"
            >
              <div className="flex flex-1 items-center gap-3 min-w-0">
                <span
                  className={cn(
                    "shrink-0 size-2 rounded-full",
                    item.indicatorClass,
                  )}
                />
                <span className="text-sm font-normal text-foreground">
                  {item.name}
                </span>
              </div>
              <div className="flex items-center gap-1 shrink-0">
                <span className="text-sm font-medium text-foreground">
                  {item.value}
                </span>
                <span className="text-sm font-normal text-muted-foreground">
                  {item.percentage}
                </span>
              </div>
            </div>
          ))}
        </div>
      </Card>
    </div>
  );
};

export default Statistics;
```