{
  "name": "Delta",
  "category": "Dashboard",
  "subcategory": null,
  "description": "Trend indicator showing delta value with up/down arrow + color.",
  "thumbnail": "/preview-cards/delta.png",
  "hasDocsPage": true,
  "nugetPackage": "Lumeo",
  "files": [
    "UI/Delta/Delta.razor"
  ],
  "dependencies": [],
  "packageDependencies": [],
  "cssVars": [
    "--color-destructive",
    "--color-muted",
    "--color-muted-foreground",
    "--radius"
  ],
  "api": {
    "name": "Delta",
    "category": "Dashboard",
    "subcategory": null,
    "description": "Trend indicator showing delta value with up/down arrow + color.",
    "nugetPackage": "Lumeo",
    "files": [
      "UI/Delta/Delta.razor"
    ],
    "namespace": "Lumeo",
    "inheritsFrom": null,
    "implements": [],
    "parameters": [
      {
        "name": "Value",
        "type": "double",
        "default": null,
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "Format",
        "type": "DeltaFormat",
        "default": "DeltaFormat.Percent",
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "Positive",
        "type": "DeltaDirection",
        "default": "DeltaDirection.Good",
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "ShowArrow",
        "type": "bool",
        "default": "true",
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "Culture",
        "type": "System.Globalization.CultureInfo?",
        "default": null,
        "description": "Overrides CurrentCulture for number formatting (decimal separator, group separator). Leave null to honour ASP.NET request localization — a de-DE user sees +12,5% while an en-US user sees +12.5%.",
        "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": "DeltaFormat",
        "values": [
          "Percent",
          "Absolute"
        ],
        "description": null
      },
      {
        "name": "DeltaDirection",
        "values": [
          "Good",
          "Bad"
        ],
        "description": null
      }
    ],
    "records": [],
    "cssVars": [
      "--color-destructive",
      "--color-muted",
      "--color-muted-foreground",
      "--radius"
    ],
    "examples": [
      {
        "title": "Percent Delta",
        "code": "<Delta Value=\"12.5\" />\n<Delta Value=\"-3.2\" />\n<Delta Value=\"0\" />"
      },
      {
        "title": "Absolute Delta",
        "code": "<Delta Value=\"420\" Format=\"Delta.DeltaFormat.Absolute\" />\n<Delta Value=\"-88\" Format=\"Delta.DeltaFormat.Absolute\" />"
      },
      {
        "title": "Inverted Positive (Lower is Better)",
        "code": "<Delta Value=\"-5.1\" Positive=\"Delta.DeltaDirection.Bad\" />\n<Delta Value=\"2.3\" Positive=\"Delta.DeltaDirection.Bad\" />"
      },
      {
        "title": "No Arrow",
        "code": "<Delta Value=\"7.4\" ShowArrow=\"false\" />\n<Delta Value=\"-1.9\" ShowArrow=\"false\" />"
      }
    ],
    "subComponents": {},
    "parseFailed": false,
    "parseError": null
  },
  "$schema": "https://lumeo.nativ.sh/registry-component-schema.json",
  "key": "delta",
  "docsUrl": "https://lumeo.nativ.sh/components/delta",
  "sourceUrl": [
    {
      "file": "UI/Delta/Delta.razor",
      "url": "https://github.com/Brain2k-0005/Lumeo/tree/master/src/Lumeo/UI/Delta/Delta.razor"
    }
  ],
  "source": [
    {
      "path": "UI/Delta/Delta.razor",
      "content": "@namespace Lumeo\n\n<span class=\"@RootClasses\" @attributes=\"AdditionalAttributes\">\n    @if (ShowArrow)\n    {\n        @if (IsUp)\n        {\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><polyline points=\"18 15 12 9 6 15\"/></svg>\n        }\n        else if (IsDown)\n        {\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><polyline points=\"6 9 12 15 18 9\"/></svg>\n        }\n    }\n    <span>@FormattedValue</span>\n</span>\n\n@code {\n    [Parameter] public double Value { get; set; }\n    [Parameter] public DeltaFormat Format { get; set; } = DeltaFormat.Percent;\n    [Parameter] public DeltaDirection Positive { get; set; } = DeltaDirection.Good;\n    [Parameter] public bool ShowArrow { get; set; } = true;\n    /// <summary>\n    /// Overrides <see cref=\"System.Globalization.CultureInfo.CurrentCulture\"/> for\n    /// number formatting (decimal separator, group separator). Leave null to honour\n    /// ASP.NET request localization — a <c>de-DE</c> user sees <c>+12,5%</c> while\n    /// an <c>en-US</c> user sees <c>+12.5%</c>.\n    /// </summary>\n    [Parameter] public System.Globalization.CultureInfo? Culture { get; set; }\n    [Parameter] public string? Class { get; set; }\n    [Parameter(CaptureUnmatchedValues = true)] public Dictionary<string, object>? AdditionalAttributes { get; set; }\n\n    private System.Globalization.CultureInfo EffectiveCulture => Culture ?? System.Globalization.CultureInfo.CurrentCulture;\n\n    private bool IsUp => Value > 0;\n    private bool IsDown => Value < 0;\n\n    private string FormattedValue\n    {\n        get\n        {\n            var culture = EffectiveCulture;\n            var sign = Value > 0 ? \"+\" : \"\";\n            var absFormat = Format switch\n            {\n                DeltaFormat.Percent =>\n                    $\"{sign}{Value.ToString(\"0.##\", culture)}%\",\n                _ =>\n                    $\"{sign}{Value.ToString(\"0.##\", culture)}\"\n            };\n            return absFormat;\n        }\n    }\n\n    private string ColorClasses\n    {\n        get\n        {\n            // Good = positive delta is \"good\" (green), negative is \"bad\" (red)\n            // Bad = inverted (e.g. churn rate where lower is better)\n            var goodColor = \"bg-positive-light text-positive-text\";\n            var badColor = \"bg-destructive-light text-destructive-text\";\n            var neutral = \"bg-muted text-muted-foreground\";\n\n            if (Value == 0) return neutral;\n\n            var isGood = Positive == DeltaDirection.Good ? IsUp : IsDown;\n            return isGood ? goodColor : badColor;\n        }\n    }\n\n    private string RootClasses =>\n        $\"inline-flex items-center gap-0.5 rounded-full px-2 py-0.5 text-xs font-medium {ColorClasses} {Class}\".Trim();\n\n    public enum DeltaFormat { Percent, Absolute }\n    public enum DeltaDirection { Good, Bad }\n}\n"
    }
  ],
  "slots": [],
  "serviceDependencies": [],
  "cascadingDependencies": [],
  "relatedComponents": [],
  "keyboardInteractions": [],
  "tests": [
    "tests/Lumeo.Tests/Components/Delta/DeltaTests.cs",
    "tests/Lumeo.Tests/Components/KpiCard/KpiCardTests.cs"
  ],
  "mdSummary": "# Delta\n\nTrend indicator showing delta value with up/down arrow + color.\n\n**Package:** `Lumeo` · **Category:** Dashboard\n**Docs:** https://lumeo.nativ.sh/components/delta\n\n## Parameters\n| Owner | Name | Type | Default | Description |\n|---|---|---|---|---|\n| Delta | Value | `double` | `` |  |\n| Delta | Format | `DeltaFormat` | `DeltaFormat.Percent` |  |\n| Delta | Positive | `DeltaDirection` | `DeltaDirection.Good` |  |\n| Delta | ShowArrow | `bool` | `true` |  |\n| Delta | Culture | `System.Globalization.CultureInfo?` | `` | Overrides CurrentCulture for number formatting (decimal separator, group separator). Leave null to honour ASP.NET request localization — a de-DE user sees +12,5% while an en-US user sees +12.5%. |\n| Delta | Class | `string?` | `` |  |\n| Delta | AdditionalAttributes | `Dictionary<string, object>?` | `` |  |\n\n## Slots\n- (none)\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<Delta />\n```\n\n## CSS variables\n`--color-destructive`, `--color-muted`, `--color-muted-foreground`, `--radius`\n\n## Files\n- `UI/Delta/Delta.razor`\n"
}