{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "metrics-grid",
  "title": "Metrics Grid",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-svelte/blocks/metrics-grid/MetricsGrid.svelte",
      "content": "<script lang=\"ts\">\n  // Six-tile KPI grid. Each tile renders a labeled KPI header (title +\n  // big number / percentage / count) above a small chart -- pie or\n  // horizontal bar -- that gives the breakdown.\n  //\n  // Per the registry's primitive-vs-block rule: tile shapes are spelled\n  // out inline as siblings. Different tiles use different chart types\n  // (donut, full pie, horizontal bar) -- those differences are the whole\n  // point of the layout, so they don't hide behind a wrapper.\n  import { PieChart } from '$lib/components/ui/pie-chart'\n  import { BarChart } from '$lib/components/ui/bar-chart'\n\n  // --- KPI 1: status pie (e.g. successful / partially / error) ---\n  const totalRuns = 770\n  const runsByStatus = [\n    { name: 'Successful', value: 638 },\n    { name: 'Partial', value: 0 },\n    { name: 'Error / Skipped', value: 132 },\n  ]\n\n  // --- KPI 2: disposition split ---\n  const totalProcessed = 638\n  const dispositionSplit = [\n    { name: 'Non-disputable', value: 168 },\n    { name: 'Disputable', value: 470 },\n  ]\n\n  // --- KPI 3: classification breakdown ---\n  const totalClassified = 638\n  const classification = [\n    { name: 'Type A', value: 525 },\n    { name: 'Type B', value: 113 },\n  ]\n\n  // --- KPI 4: top reasons (horizontal bar) ---\n  const skipReasons = [\n    { reason: 'CREDIT_NOTE', count: 11 },\n    { reason: 'CUSTOMS_INSPECT', count: 5 },\n    { reason: 'NEGATIVE_COST', count: 8 },\n  ]\n  const totalSkipped = $derived(skipReasons.reduce((a, r) => a + r.count, 0))\n\n  // --- KPI 5: error reasons (horizontal bar) ---\n  const errorReasons = [\n    { reason: 'INVALID_CUTOFF', count: 3 },\n    { reason: 'NO_SHIPMENT_DATA', count: 20 },\n    { reason: 'SELF_BILLING', count: 42 },\n    { reason: 'MISSING_OBLIGATORY_FIELD', count: 2 },\n    { reason: 'MISSING_OBLIGATORY_TIME', count: 4 },\n    { reason: 'UNABLE_TO_CLASSIFY', count: 40 },\n  ]\n  const totalErrors = $derived(errorReasons.reduce((a, r) => a + r.count, 0))\n\n  // --- KPI 6: workflow status ---\n  const openShare = 0.7602\n  const workflowStatus = [\n    { name: 'Open', value: 485 },\n    { name: 'Pending', value: 151 },\n    { name: 'Closed', value: 2 },\n  ]\n\n  const pieOption = {\n    legend: { show: false },\n    series: [\n      {\n        radius: ['0%', '70%'],\n        label: {\n          show: true,\n          formatter: (p: any) => `${p.value}\\n(${p.percent}%)`,\n          fontSize: 11,\n          color: 'var(--foreground)',\n          fontWeight: 600,\n        },\n        labelLine: { show: false },\n      },\n    ],\n  }\n\n  const donutOption = {\n    legend: { show: false },\n    series: [\n      {\n        radius: ['40%', '70%'],\n        label: {\n          show: true,\n          formatter: (p: any) => `${p.value}\\n(${p.percent}%)`,\n          fontSize: 11,\n          color: 'var(--foreground)',\n          fontWeight: 600,\n        },\n        labelLine: { show: false },\n      },\n    ],\n  }\n\n  const horizontalBarOption = {\n    legend: { show: false },\n    xAxis: { type: 'value' as const, axisLabel: { fontSize: 10 } },\n    yAxis: { type: 'category' as const, axisLabel: { fontSize: 10 } },\n    grid: { left: 16, right: 16, top: 8, bottom: 24, containLabel: true },\n    series: [\n      {\n        type: 'bar' as const,\n        barMaxWidth: 18,\n        itemStyle: { borderRadius: [0, 3, 3, 0] },\n      },\n    ],\n  }\n</script>\n\n<div data-slot=\"metrics-grid\" class=\"space-y-4\">\n  <h2 class=\"text-primary text-sm font-semibold tracking-tight\">Results Overview</h2>\n\n  <div class=\"grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3\">\n    <!-- Tile 1: Runs by status (pie) -->\n    <article class=\"bg-card border-border rounded-lg border p-4\">\n      <h3 class=\"text-muted-foreground text-xs font-semibold tracking-wider uppercase\">Runs by status</h3>\n      <div class=\"text-primary mt-1 mb-2 text-2xl font-semibold\">{totalRuns} runs</div>\n      <div class=\"text-muted-foreground mb-3 flex items-center gap-3 text-xs\">\n        <span class=\"inline-flex items-center gap-1.5\"\n          ><span class=\"size-2 rounded-full\" style=\"background: var(--chart-1)\"></span>Successful</span\n        >\n        <span class=\"inline-flex items-center gap-1.5\"\n          ><span class=\"size-2 rounded-full\" style=\"background: var(--chart-4)\"></span>Error / Skipped</span\n        >\n      </div>\n      <PieChart data={runsByStatus} option={pieOption} height=\"220\" />\n    </article>\n\n    <!-- Tile 2: Disposition split (pie) -->\n    <article class=\"bg-card border-border rounded-lg border p-4\">\n      <h3 class=\"text-muted-foreground text-xs font-semibold tracking-wider uppercase\">Disposition split</h3>\n      <div class=\"text-primary mt-1 mb-2 text-2xl font-semibold\">{totalProcessed} processed</div>\n      <div class=\"text-muted-foreground mb-3 flex items-center gap-3 text-xs\">\n        <span class=\"inline-flex items-center gap-1.5\"\n          ><span class=\"size-2 rounded-full\" style=\"background: var(--chart-1)\"></span>Non-disputable</span\n        >\n        <span class=\"inline-flex items-center gap-1.5\"\n          ><span class=\"size-2 rounded-full\" style=\"background: var(--chart-3)\"></span>Disputable</span\n        >\n      </div>\n      <PieChart data={dispositionSplit} option={pieOption} height=\"220\" />\n    </article>\n\n    <!-- Tile 3: Classification (pie) -->\n    <article class=\"bg-card border-border rounded-lg border p-4\">\n      <h3 class=\"text-muted-foreground text-xs font-semibold tracking-wider uppercase\">Classification</h3>\n      <div class=\"text-primary mt-1 mb-2 text-2xl font-semibold\">{totalClassified} classified</div>\n      <div class=\"text-muted-foreground mb-3 flex items-center gap-3 text-xs\">\n        <span class=\"inline-flex items-center gap-1.5\"\n          ><span class=\"size-2 rounded-full\" style=\"background: var(--chart-1)\"></span>Type A</span\n        >\n        <span class=\"inline-flex items-center gap-1.5\"\n          ><span class=\"size-2 rounded-full\" style=\"background: var(--chart-3)\"></span>Type B</span\n        >\n      </div>\n      <PieChart data={classification} option={pieOption} height=\"220\" />\n    </article>\n\n    <!-- Tile 4: Skip reasons (horizontal bar) -->\n    <article class=\"bg-card border-border rounded-lg border p-4\">\n      <h3 class=\"text-muted-foreground text-xs font-semibold tracking-wider uppercase\">Top skip reasons</h3>\n      <div class=\"text-primary mt-1 mb-2 text-2xl font-semibold\">{totalSkipped} skipped</div>\n      <div class=\"text-muted-foreground mb-3 text-xs\">By trigger</div>\n      <BarChart data={skipReasons} xField=\"reason\" yField=\"count\" option={horizontalBarOption} height=\"220\" />\n    </article>\n\n    <!-- Tile 5: Error reasons (horizontal bar) -->\n    <article class=\"bg-card border-border rounded-lg border p-4\">\n      <h3 class=\"text-muted-foreground text-xs font-semibold tracking-wider uppercase\">Top error reasons</h3>\n      <div class=\"text-primary mt-1 mb-2 text-2xl font-semibold\">{totalErrors} errors</div>\n      <div class=\"text-muted-foreground mb-3 text-xs\">By failure mode</div>\n      <BarChart data={errorReasons} xField=\"reason\" yField=\"count\" option={horizontalBarOption} height=\"220\" />\n    </article>\n\n    <!-- Tile 6: Workflow status (donut + highlight) -->\n    <article class=\"bg-card border-border rounded-lg border p-4\">\n      <h3 class=\"text-muted-foreground text-xs font-semibold tracking-wider uppercase\">Workflow status</h3>\n      <div class=\"text-primary mt-1 mb-2 text-2xl font-semibold\">{(openShare * 100).toFixed(2)}% open</div>\n      <div class=\"text-muted-foreground mb-3 flex items-center gap-3 text-xs\">\n        <span class=\"inline-flex items-center gap-1.5\"\n          ><span class=\"size-2 rounded-full\" style=\"background: var(--chart-1)\"></span>Open</span\n        >\n        <span class=\"inline-flex items-center gap-1.5\"\n          ><span class=\"size-2 rounded-full\" style=\"background: var(--chart-5)\"></span>Pending</span\n        >\n        <span class=\"inline-flex items-center gap-1.5\"\n          ><span class=\"size-2 rounded-full\" style=\"background: var(--chart-3)\"></span>Closed</span\n        >\n      </div>\n      <PieChart data={workflowStatus} option={donutOption} donut={true} height=\"220\" />\n    </article>\n  </div>\n</div>\n",
      "type": "registry:block",
      "target": "~/src/lib/components/blocks/metrics-grid/MetricsGrid.svelte"
    }
  ],
  "dependencies": [],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/svelte/pie-chart.json",
    "https://uipkge.dev/r/svelte/bar-chart.json"
  ],
  "description": "Six-tile KPI status grid. Each tile pairs a stat header (count / percentage) with a small pie or horizontal bar chart that breaks the metric down. Different tiles use different chart types so each KPI reads at a glance.",
  "categories": [
    "analytics",
    "dashboard"
  ]
}