{ "generatedFrom": "statistic.contract.json", "component": "Statistic", "slug": "statistic", "group": "Data Display", "tier": "leaf-lit", "summary": "A single headline number with a caption, prefix/suffix (text or icon), precision, trend colour and a loading skeleton.", "install": { "package": "@ahaslides-product/design", "registry": "https://npm.pkg.github.com", "scope": "@ahaslides-product", "auth": "Published to GitHub Packages — needs a GitHub token with read:packages. Configure the @ahaslides-product scope in .npmrc before installing.", "npmrc": "@ahaslides-product:registry=https://npm.pkg.github.com\n//npm.pkg.github.com/:_authToken=${GITHUB_TOKEN} # a GitHub token with read:packages", "command": "npm i @ahaslides-product/design", "tokenLayer": "import '@ahaslides-product/design/tokens.css';", "import": "import '@ahaslides-product/design/aha-statistic';", "element": "aha-statistic", "registers": "aha-statistic" }, "feeds": { "doc": "https://ahaslides-product.github.io/ahaslides-design/statistic/index.html", "md": "https://ahaslides-product.github.io/ahaslides-design/statistic/statistic.md", "agentJson": "https://ahaslides-product.github.io/ahaslides-design/statistic.agent.json", "llms": "https://ahaslides-product.github.io/ahaslides-design/statistic.llms.txt", "index": "https://ahaslides-product.github.io/ahaslides-design/llms.txt" }, "recommendedSnippet": "html", "vibeCode": "Emit the HTML snippet by default — is a standard custom element that renders on open — React/Vue are thin adapters over the same element. Paste into an .html file and it renders with no build step.", "frameworks": { "react": { "via": "web-component", "ref": "aha-statistic" }, "vue": { "via": "web-component", "ref": "aha-statistic" }, "html": { "via": "web-component", "ref": "aha-statistic", "runnable": "paste-and-run — no build step, renders on open" } }, "props": [ { "name": "label", "type": "string", "default": "—", "desc": "The caption above the value" }, { "name": "value", "type": "string | number", "default": "—", "desc": "The headline figure" }, { "name": "precision", "type": "number", "default": "—", "desc": "Format value to N decimal places with en-US thousands separators (non-numeric values left verbatim)" }, { "name": "prefix", "type": "string", "default": "—", "desc": "Small text before the value (e.g. a currency mark)" }, { "name": "suffix", "type": "string", "default": "—", "desc": "Small text after the value (e.g. %, unit)" }, { "name": "prefix-icon", "type": "icon name", "default": "—", "desc": "A DS icon before the value (e.g. system-currency-circle-dollar)" }, { "name": "suffix-icon", "type": "icon name", "default": "—", "desc": "A DS icon after the value" }, { "name": "trend", "type": "up | down", "default": "—", "desc": "Tint the value success-green/error-red + a matching trend arrow glyph" }, { "name": "loading", "type": "boolean", "default": "false", "desc": "Show a shimmer skeleton in place of the figure" } ], "tokens": [ "text-default", "text-secondary", "text-tertiary", "color-success", "color-error", "bg-container-secondary", "split", "radius-xs", "font-product" ], "spec": [ { "label": "Caption", "value": "14/22 #4A4A4A" }, { "label": "Value", "value": "24/32 SemiBold #1A1A1A" }, { "label": "Prefix / suffix", "value": "14/22 Regular #8A8A8A, text or a 16px DS icon" }, { "label": "Precision", "value": "value formatted to N decimals, en-US thousands separators" }, { "label": "Trend", "value": "up color-success #16C49A + trend-up glyph · down color-error #F5222D + trend-down glyph" }, { "label": "Loading", "value": "shimmer skeleton (label + value bars), motion-token animation, role=status" } ], "opinion": { "whenToUse": [ { "what": "Statistic", "when": "a single KPI on a dashboard or results screen" }, { "what": "Badge", "when": "a small count attached to another element" }, { "what": "Progress", "when": "a value's share of a whole" } ], "note": "Caption names the metric in sentence case — 'Active players', not 'ACTIVE PLAYERS'. Use trend only when up/down carries meaning; the element pairs the tint with a trend arrow glyph so colour is never the sole signal. Reach for prefix-icon/suffix-icon (a currency mark, a %) over a decorative image; set precision for money/rates so the figure reads consistently.", "dsv3": "COVERED — DS V3 ships a real Statistic component set (key 6f817785…, 'Display statistic number') plus Components/Trend + Trend Group (the coloured up/down indicator). Element enumerated against that taxonomy: title (label) + big value + precision + prefix/suffix (text or icon) + trend colour with a matching Trend glyph + loading. Trend bound to --aha-color-success / --aha-color-error; value 24/32 SemiBold per antd Statistic. Node-id/screenshot navigation is seat-gated, so the matrix is read from the component-set taxonomy, not a pixel match." }, "surfaces": [ "dashboard", "audience" ], "snippets": { "html": "\n\n\n\n
\n \n \n \n
\n", "react": "import '@ahaslides-product/design/icons'; // registers for prefix/suffix icons\nimport '@ahaslides-product/design/aha-statistic'; // registers \n\n// The custom element renders its own shadow DOM; React just passes attributes.\n// Note: hyphenated attrs (prefix-icon, suffix-icon) are written as-is on the custom element.\nfunction Kpi({ label, value, suffix, precision, prefixIcon, trend, loading }) {\n return (\n \n );\n}\n\n// usage\n\n\n\n", "vue": "// main.ts — register the elements + mark aha-* as custom elements\nimport '@ahaslides-product/design/icons'; // registers for prefix/suffix icons\nimport '@ahaslides-product/design/aha-statistic';\napp.config.compilerOptions.isCustomElement = (tag) => tag.startsWith('aha-');\n\n// Component.vue\n\n" } }