MetricTiles

Code

import { MetricTiles } from "@fadymondy/nasaq/web";export function Kpis() {  return (    <MetricTiles      metrics={[        { id: "users", label: "Users", value: 48210, previous: 42980, sparkline: [4, 6, 5, 9, 8, 12] },        { id: "bounce", label: "Bounce rate", value: 0.388, previous: 0.412, format: { style: "percent", maximumFractionDigits: 1 }, invert: true },      ]}    />  );}

Analytics · beta

Live examples and controls: MetricTiles in the lab.

InstallCopy Anchor Link

npx shadcn@latest add https://docs.nasaqui.com/r/metric-tiles.json

MetricTiles lays out StatCards for an analytics report. Give it each metric's value and the value for the comparison period; it works out the change, tones it (up is good unless invert), and prints "was 42,980" next to it. With onSelect the tiles become a single-choice group that picks which metric a chart below shows, as Google Analytics and Search Console do.

When to useCopy Anchor Link

• The top of any analytics page: users, sessions, clicks, views, latency.
• Metrics that must be read against the previous period.
• A tile row that also switches a chart's metric.

When not to useCopy Anchor Link

• One number with no comparison: use StatCard.
• Many exact rows: use DataTable.
• A series over time: use TimeSeriesPanel.

ImportCopy Anchor Link

import { MetricTiles } from "@fadymondy/nasaq/web";

Quick startCopy Anchor Link

import { MetricTiles } from "@fadymondy/nasaq/web";

export function Kpis() {
  return (
    <MetricTiles
      metrics={[
        { id: "users", label: "Users", value: 48210, previous: 42980, sparkline: [4, 6, 5, 9, 8, 12] },
        { id: "bounce", label: "Bounce rate", value: 0.388, previous: 0.412, format: { style: "percent", maximumFractionDigits: 1 }, invert: true },
      ]}
    />
  );
}

AnatomyCopy Anchor Link

MetricTiles           data-slot="metric-tiles"  (a StatGrid; role="group")
  StatCard            one per metric; a button with aria-pressed when onSelect is set

APICopy Anchor Link

MetricTilesCopy Anchor Link

MetricTileDataCopy Anchor Link

ExamplesCopy Anchor Link

Selectable tiles driving a chart:

import { MetricTiles, TimeSeriesPanel } from "@fadymondy/nasaq/web";
import { useState } from "react";

export function Report({ tiles, series }: { tiles: React.ComponentProps<typeof MetricTiles>["metrics"]; series: React.ComponentProps<typeof TimeSeriesPanel>["data"] }) {
  const [metric, setMetric] = useState("clicks");
  return (
    <>
      <MetricTiles metrics={tiles} selected={metric} onSelect={setMetric} />
      <TimeSeriesPanel metrics={[{ id: "clicks", label: "Clicks" }, { id: "impressions", label: "Impressions" }]} data={series} metric={metric} onMetricChange={setMetric} />
    </>
  );
}

Duration shown as text:

import { MetricTiles } from "@fadymondy/nasaq/web";

export const Time = () => <MetricTiles metrics={[{ id: "t", label: "Avg. engagement time", value: 98, previous: 104, display: "1m 38s", previousDisplay: "1m 44s" }]} />;

Arabic:

import { MetricTiles } from "@fadymondy/nasaq/web";

export const Ar = () => <MetricTiles comparisonLabel="مقارنة بالفترة السابقة" metrics={[{ id: "u", label: "المستخدمون", value: 48210, previous: 42980 }]} />;

AccessibilityCopy Anchor Link

Without onSelect the tiles are a labelled group of text. With it, each tile is a button with aria-pressed, reachable with Tab and toggled with Enter or Space. The change is shown by an arrow, a sign and a colour together. Localise label, sparklineLabel and comparisonLabel.

RTL & i18nCopy Anchor Link

• Logical properties throughout; arrows and sparklines mirror.
• Every figure uses the active locale with Western digits and is bidi-isolated (Num), so +12.4% keeps its order in Arabic.
• Built-in strings ("vs previous period", "was") are available in English and Arabic.

Styling & tokensCopy Anchor Link

• Colours come from tokens (--primary, --nq-success, --nq-warning, --nq-danger, --nq-tag-*); never pass raw hex.
• Target [data-slot="metric-tiles"]; extend with className.

Do / Don'tCopy Anchor Link

• Do pass previous so every tile shows its change.
• Do set invert for metrics where lower is better.
• Don't put more than about six tiles in a row.
• Don't pass a percentage as 12.4; pass the fraction 0.124.

RelatedCopy Anchor Link

• stat-card
• time-series-panel
• chart
• numeric

LabCopy Anchor Link

https://docs.nasaqui.com/?path=/docs/components-analytics-metric-tiles--docs