{
  "name": "Statistic",
  "category": "Data Display",
  "subcategory": "Status & Indicators",
  "description": "Big-number statistic display with label and unit.",
  "thumbnail": "/preview-cards/statistic.png",
  "hasDocsPage": true,
  "nugetPackage": "Lumeo",
  "files": [
    "UI/Statistic/Statistic.razor"
  ],
  "dependencies": [],
  "packageDependencies": [
    "Blazicons.Lucide"
  ],
  "cssVars": [
    "--color-border",
    "--color-destructive",
    "--color-foreground",
    "--color-muted",
    "--color-muted-foreground",
    "--radius"
  ],
  "api": {
    "name": "Statistic",
    "category": "Data Display",
    "subcategory": "Status & Indicators",
    "description": "Big-number statistic display with label and unit.",
    "nugetPackage": "Lumeo",
    "files": [
      "UI/Statistic/Statistic.razor"
    ],
    "namespace": "Lumeo",
    "inheritsFrom": null,
    "implements": [],
    "parameters": [
      {
        "name": "Title",
        "type": "string?",
        "default": null,
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "Value",
        "type": "string?",
        "default": null,
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "Prefix",
        "type": "RenderFragment?",
        "default": null,
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "Suffix",
        "type": "RenderFragment?",
        "default": null,
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "Precision",
        "type": "int?",
        "default": null,
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "Culture",
        "type": "System.Globalization.CultureInfo?",
        "default": null,
        "description": "Culture used when Precision is set. Default (null) falls back to CurrentCulture so a de-DE user sees 12,34 and an en-US user sees 12.34 automatically.",
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "ShowTrend",
        "type": "bool",
        "default": null,
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "TrendValue",
        "type": "string?",
        "default": null,
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "TrendDirection",
        "type": "TrendType",
        "default": "TrendType.Up",
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "Size",
        "type": "StatisticSize",
        "default": "StatisticSize.Medium",
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "Variant",
        "type": "StatisticVariant",
        "default": "StatisticVariant.Default",
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "Class",
        "type": "string?",
        "default": null,
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "AdditionalAttributes",
        "type": "Dictionary<string, object>?",
        "default": null,
        "description": null,
        "isCascading": false,
        "captureUnmatched": true
      }
    ],
    "events": [],
    "enums": [
      {
        "name": "TrendType",
        "values": [
          "Up",
          "Down"
        ],
        "description": null
      },
      {
        "name": "StatisticSize",
        "values": [
          "Small",
          "Medium",
          "Large"
        ],
        "description": null
      },
      {
        "name": "StatisticVariant",
        "values": [
          "Default",
          "Minimal",
          "Bordered"
        ],
        "description": "Default = plain (no decoration). Minimal = alias for Default (explicit opt-in to no chrome). Bordered = rounded border card wrapper."
      }
    ],
    "records": [],
    "cssVars": [
      "--color-border",
      "--color-destructive",
      "--color-foreground",
      "--color-muted",
      "--color-muted-foreground",
      "--radius"
    ],
    "examples": [
      {
        "title": "Basic Statistics",
        "code": "<Statistic Title=\"Total Users\" Value=\"12,847\" />\n<Statistic Title=\"Revenue\" Value=\"48250\" Precision=\"2\">\n    <Prefix><Lumeo.Text As=\"span\">$</Lumeo.Text></Prefix>\n</Statistic>"
      },
      {
        "title": "With Trend",
        "code": "<Statistic Title=\"Sales\" Value=\"1,234\" ShowTrend=\"true\" TrendValue=\"+12.5%\" TrendDirection=\"Statistic.TrendType.Up\" />\n<Statistic Title=\"Returns\" Value=\"42\" ShowTrend=\"true\" TrendValue=\"-3.2%\" TrendDirection=\"Statistic.TrendType.Down\" />"
      },
      {
        "title": "Size (interactive)",
        "code": "<Segmented @bind-Value=\"_size\">\n    <SegmentedItem Value=\"@Statistic.StatisticSize.Small\">Small</SegmentedItem>\n    <SegmentedItem Value=\"@Statistic.StatisticSize.Medium\">Medium</SegmentedItem>\n    <SegmentedItem Value=\"@Statistic.StatisticSize.Large\">Large</SegmentedItem>\n</Segmented>\n<Statistic Title=\"Monthly Revenue\" Value=\"48,290\" Size=\"@_size\" ShowTrend=\"true\" TrendValue=\"+12%\" TrendDirection=\"Statistic.TrendType.Up\">\n    <Prefix><Lumeo.Text As=\"span\">$</Lumeo.Text></Prefix>\n</Statistic>\n\n@code { private Statistic.StatisticSize _size = Statistic.StatisticSize.Medium; }"
      },
      {
        "title": "Variant (interactive)",
        "code": "<Segmented @bind-Value=\"_variant\">\n    <SegmentedItem Value=\"@Statistic.StatisticVariant.Default\">Default</SegmentedItem>\n    <SegmentedItem Value=\"@Statistic.StatisticVariant.Minimal\">Minimal</SegmentedItem>\n    <SegmentedItem Value=\"@Statistic.StatisticVariant.Bordered\">Bordered</SegmentedItem>\n</Segmented>\n<Grid Columns=\"3\" Gap=\"4\">\n    <Statistic Title=\"Users\" Value=\"12,847\" Variant=\"@_variant\" />\n    <Statistic Title=\"Revenue\" Value=\"48,290\" Variant=\"@_variant\" ShowTrend=\"true\" TrendValue=\"+8%\" TrendDirection=\"Statistic.TrendType.Up\">\n        <Prefix><Lumeo.Text As=\"span\">$</Lumeo.Text></Prefix>\n    </Statistic>\n    <Statistic Title=\"Churn\" Value=\"2.1\" Variant=\"@_variant\" ShowTrend=\"true\" TrendValue=\"-0.3%\" TrendDirection=\"Statistic.TrendType.Down\">\n        <Suffix><Lumeo.Text As=\"span\">%</Lumeo.Text></Suffix>\n    </Statistic>\n</Grid>\n\n@code { private Statistic.StatisticVariant _variant = Statistic.StatisticVariant.Default; }"
      }
    ],
    "subComponents": {},
    "parseFailed": false,
    "parseError": null
  },
  "$schema": "https://lumeo.nativ.sh/registry-component-schema.json",
  "key": "statistic",
  "docsUrl": "https://lumeo.nativ.sh/components/statistic",
  "sourceUrl": [
    {
      "file": "UI/Statistic/Statistic.razor",
      "url": "https://github.com/Brain2k-0005/Lumeo/tree/master/src/Lumeo/UI/Statistic/Statistic.razor"
    }
  ],
  "source": [
    {
      "path": "UI/Statistic/Statistic.razor",
      "content": "@namespace Lumeo\n\n<div class=\"@CssClass\" @attributes=\"AdditionalAttributes\">\n    @if (!string.IsNullOrEmpty(Title))\n    {\n        <p class=\"@TitleClass\">@Title</p>\n    }\n    <div class=\"flex items-baseline gap-1\">\n        @if (Prefix is not null)\n        {\n            <span class=\"@ValueClass\">@Prefix</span>\n        }\n        <span class=\"@ValueClass\">@FormattedValue</span>\n        @if (Suffix is not null)\n        {\n            <span class=\"@SuffixClass\">@Suffix</span>\n        }\n    </div>\n    @if (ShowTrend)\n    {\n        <div class=\"mt-1 flex items-center gap-1 text-sm @TrendClasses\">\n            @if (TrendDirection == TrendType.Up)\n            {\n                <Blazicon Svg=\"Lucide.TrendingUp\" class=\"h-4 w-4\" />\n            }\n            else\n            {\n                <Blazicon Svg=\"Lucide.TrendingDown\" class=\"h-4 w-4\" />\n            }\n            @if (!string.IsNullOrEmpty(TrendValue))\n            {\n                <span>@TrendValue</span>\n            }\n        </div>\n    }\n</div>\n\n@code {\n    [Parameter] public string? Title { get; set; }\n    [Parameter] public string? Value { get; set; }\n    [Parameter] public RenderFragment? Prefix { get; set; }\n    [Parameter] public RenderFragment? Suffix { get; set; }\n    [Parameter] public int? Precision { get; set; }\n\n    /// <summary>\n    /// Culture used when <see cref=\"Precision\"/> is set. Default (null) falls back to\n    /// <see cref=\"System.Globalization.CultureInfo.CurrentCulture\"/> so a <c>de-DE</c>\n    /// user sees <c>12,34</c> and an <c>en-US</c> user sees <c>12.34</c> automatically.\n    /// </summary>\n    [Parameter] public System.Globalization.CultureInfo? Culture { get; set; }\n\n    private System.Globalization.CultureInfo EffectiveCulture => Culture ?? System.Globalization.CultureInfo.CurrentCulture;\n    [Parameter] public bool ShowTrend { get; set; }\n    [Parameter] public string? TrendValue { get; set; }\n    [Parameter] public TrendType TrendDirection { get; set; } = TrendType.Up;\n    [Parameter] public StatisticSize Size { get; set; } = StatisticSize.Medium;\n    [Parameter] public StatisticVariant Variant { get; set; } = StatisticVariant.Default;\n    [Parameter] public string? Class { get; set; }\n    [Parameter(CaptureUnmatchedValues = true)] public Dictionary<string, object>? AdditionalAttributes { get; set; }\n\n    private string CssClass => $\"{VariantClass} {Class}\".Trim();\n\n    private string VariantClass => Variant switch\n    {\n        StatisticVariant.Minimal => \"\",\n        StatisticVariant.Bordered => \"rounded-lg border border-border/60 p-4\",\n        _ => \"\"\n    };\n\n    private string TitleClass => Size switch\n    {\n        StatisticSize.Small => \"text-xs text-muted-foreground\",\n        StatisticSize.Large => \"text-base text-muted-foreground\",\n        _ => \"text-sm text-muted-foreground\"\n    };\n\n    private string ValueClass => Size switch\n    {\n        StatisticSize.Small => \"text-lg font-semibold text-foreground\",\n        StatisticSize.Large => \"text-4xl font-semibold text-foreground\",\n        _ => \"text-2xl font-semibold text-foreground\"\n    };\n\n    private string SuffixClass => Size switch\n    {\n        StatisticSize.Small => \"text-xs text-muted-foreground\",\n        StatisticSize.Large => \"text-base text-muted-foreground\",\n        _ => \"text-sm text-muted-foreground\"\n    };\n\n    private string FormattedValue\n    {\n        get\n        {\n            if (Value is null) return \"\";\n            if (Precision.HasValue)\n            {\n                // Accept either invariant or the user's culture for the input string (both\n                // \"1234.5\" and \"1234,5\" parse for a de-DE user). Render via the effective\n                // culture so the thousands/decimal separators match the request locale.\n                if (double.TryParse(Value, System.Globalization.NumberStyles.Any, System.Globalization.CultureInfo.InvariantCulture, out var numericValue)\n                    || double.TryParse(Value, System.Globalization.NumberStyles.Any, EffectiveCulture, out numericValue))\n                {\n                    return numericValue.ToString($\"N{Precision.Value}\", EffectiveCulture);\n                }\n            }\n            return Value;\n        }\n    }\n\n    private string TrendClasses => TrendDirection switch\n    {\n        TrendType.Up => \"text-success\",\n        TrendType.Down => \"text-destructive\",\n        _ => \"\"\n    };\n\n    public enum TrendType { Up, Down }\n    public enum StatisticSize { Small, Medium, Large }\n    /// <summary>\n    /// Default = plain (no decoration). Minimal = alias for Default (explicit opt-in to no chrome).\n    /// Bordered = rounded border card wrapper.\n    /// </summary>\n    public enum StatisticVariant { Default, Minimal, Bordered }\n}\n"
    }
  ],
  "slots": [
    {
      "name": "Prefix",
      "owner": "Statistic",
      "type": "RenderFragment?",
      "description": null
    },
    {
      "name": "Suffix",
      "owner": "Statistic",
      "type": "RenderFragment?",
      "description": null
    }
  ],
  "serviceDependencies": [],
  "cascadingDependencies": [],
  "relatedComponents": [],
  "keyboardInteractions": [],
  "tests": [
    "tests/Lumeo.Tests/Components/Statistic/StatisticTests.cs"
  ],
  "mdSummary": "# Statistic\n\nBig-number statistic display with label and unit.\n\n**Package:** `Lumeo` · **Category:** Data Display/Status & Indicators\n**Docs:** https://lumeo.nativ.sh/components/statistic\n\n## Parameters\n| Owner | Name | Type | Default | Description |\n|---|---|---|---|---|\n| Statistic | Title | `string?` | `` |  |\n| Statistic | Value | `string?` | `` |  |\n| Statistic | Prefix | `RenderFragment?` | `` |  |\n| Statistic | Suffix | `RenderFragment?` | `` |  |\n| Statistic | Precision | `int?` | `` |  |\n| Statistic | Culture | `System.Globalization.CultureInfo?` | `` | Culture used when Precision is set. Default (null) falls back to CurrentCulture so a de-DE user sees 12,34 and an en-US user sees 12.34 automatically. |\n| Statistic | ShowTrend | `bool` | `` |  |\n| Statistic | TrendValue | `string?` | `` |  |\n| Statistic | TrendDirection | `TrendType` | `TrendType.Up` |  |\n| Statistic | Size | `StatisticSize` | `StatisticSize.Medium` |  |\n| Statistic | Variant | `StatisticVariant` | `StatisticVariant.Default` |  |\n| Statistic | Class | `string?` | `` |  |\n| Statistic | AdditionalAttributes | `Dictionary<string, object>?` | `` |  |\n\n## Slots\n- `Prefix` (Statistic) — RenderFragment slot\n- `Suffix` (Statistic) — RenderFragment slot\n\n## Events\n- (none)\n\n## Sub-components\n- (none)\n\n## Cascading values it expects\n- (none)\n\n## Services it injects\n- (none)\n\n## Keyboard\n—\n\n## Example\n```razor\n<Statistic />\n```\n\n## CSS variables\n`--color-border`, `--color-destructive`, `--color-foreground`, `--color-muted`, `--color-muted-foreground`, `--radius`\n\n## Files\n- `UI/Statistic/Statistic.razor`\n"
}