Edit Capacity Indicator

Name

Also known as (comma separated)

Brief definition Shows available workload capacity.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "name", "type": "text", "label": "Person", "default": "Priya Nair" }, { "id": "load", "type": "number", "label": "Load (%)", "default": 62, "min": 0, "max": 100, "step": 1 }, { "id": "threshold", "type": "number", "label": "Threshold (%)", "default": 80, "min": 0, "max": 100, "step": 1 }, { "id": "status", "type": "select", "label": "Status", "default": "available", "options": [ "available", "busy", "over" ] }, { "id": "color", "type": "color", "label": "Colour", "default": "#A8E6C1", "presets": [ "#A8E6C1", "#F5C2E0", "#BFD9F2", "#D9C8F0", "#E8A020", "#241430" ] } ]

Templates (JSON object keyed by format) { "html": "<div class=\"capacity capacity--{{status}}\" style=\"--c:{{color}};\">\n <div class=\"capacity__head\">\n <span class=\"capacity__name\">{{name}}</span>\n <span class=\"capacity__status\">\n <svg viewBox=\"0 0 8 8\" width=\"8\" height=\"8\" aria-hidden=\"true\" class=\"capacity__glyph\"><circle cx=\"4\" cy=\"4\" r=\"4\"/></svg>\n <span class=\"capacity__status-text\">status</span>\n </span>\n </div>\n <div class=\"capacity__track\" role=\"img\" aria-label=\"{{load}} percent of capacity used, threshold at {{threshold}} percent\">\n <div class=\"capacity__fill\" style=\"width:{{load}}%;\"></div>\n <div class=\"capacity__threshold\" style=\"left:{{threshold}}%;\"></div>\n </div>\n <div class=\"capacity__figures\">{{load}}% used · limit {{threshold}}%</div>\n</div>\n<style>\n.capacity { font: 14px/1.4 system-ui, sans-serif; color: #241430; max-width: 280px; }\n.capacity__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }\n.capacity__name { font-weight: 600; }\n.capacity__status { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; }\n.capacity__glyph { fill: var(--c); }\n.capacity--available .capacity__status-text::before { content: \"Available\"; }\n.capacity--busy .capacity__status-text::before { content: \"Busy\"; }\n.capacity--over .capacity__status-text::before { content: \"Over capacity\"; }\n.capacity--over .capacity__glyph { fill: #b3261e; }\n.capacity__track { position: relative; height: 10px; border-radius: 999px; background: #24143014; overflow: visible; }\n.capacity__fill { height: 100%; border-radius: 999px; background: var(--c); }\n.capacity--over .capacity__fill { background: #b3261e; }\n.capacity__threshold { position: absolute; top: -3px; width: 2px; height: 16px; background: #241430; }\n.capacity__figures { margin-top: 6px; font-size: 12px; opacity: .75; }\n</style>", "tailwind": "<div class=\"capacity-tw capacity-tw--{{status}} max-w-xs font-sans text-[#241430]\" style=\"--c:{{color}};\">\n <div class=\"flex justify-between items-center mb-1.5\">\n <span class=\"font-semibold\">{{name}}</span>\n <span class=\"capacity-tw__status inline-flex items-center gap-1 text-xs\">\n <svg viewBox=\"0 0 8 8\" width=\"8\" height=\"8\" aria-hidden=\"true\"><circle cx=\"4\" cy=\"4\" r=\"4\" fill=\"var(--c)\"/></svg>\n <span class=\"capacity-tw__status-text\"></span>\n </span>\n </div>\n <div class=\"relative h-2.5 rounded-full bg-[#24143014]\" role=\"img\" aria-label=\"{{load}} percent of capacity used, threshold at {{threshold}} percent\">\n <div class=\"capacity-tw__fill h-full rounded-full\" style=\"width:{{load}}%;background:var(--c);\"></div>\n <div class=\"absolute -top-[3px] w-0.5 h-4 bg-[#241430]\" style=\"left:{{threshold}}%;\"></div>\n </div>\n <div class=\"mt-1.5 text-xs opacity-75\">{{load}}% used · limit {{threshold}}%</div>\n</div>\n<style>\n.capacity-tw--available .capacity-tw__status-text::before { content: \"Available\"; }\n.capacity-tw--busy .capacity-tw__status-text::before { content: \"Busy\"; }\n.capacity-tw--over .capacity-tw__status-text::before { content: \"Over capacity\"; }\n.capacity-tw--over .capacity-tw__fill { background: #b3261e !important; }\n</style>", "react": "export function CapacityIndicator({\n name = \"{{name}}\",\n load = {{load}},\n threshold = {{threshold}},\n status = \"{{status}}\",\n color = \"{{color}}\",\n}) {\n const statusText = { available: \"Available\", busy: \"Busy\", over: \"Over capacity\" }[status] ?? \"Available\";\n const fillColor = status === \"over\" ? \"#b3261e\" : color;\n return (\n <div style={{ font: \"14px/1.4 system-ui, sans-serif\", color: \"#241430\", maxWidth: 280 }}>\n <div style={{ display: \"flex\", justifyContent: \"space-between\", alignItems: \"center\", marginBottom: 6 }}>\n <span style={{ fontWeight: 600 }}>{name}</span>\n <span style={{ display: \"inline-flex\", alignItems: \"center\", gap: 5, fontSize: 12 }}>\n <svg viewBox=\"0 0 8 8\" width=\"8\" height=\"8\" aria-hidden=\"true\"><circle cx=\"4\" cy=\"4\" r=\"4\" fill={fillColor} /></svg>\n {statusText}\n </span>\n </div>\n <div role=\"img\" aria-label={`${load} percent of capacity used, threshold at ${threshold} percent`}\n style={{ position: \"relative\", height: 10, borderRadius: 999, background: \"#24143014\" }}>\n <div style={{ height: \"100%\", width: `${load}%`, borderRadius: 999, background: fillColor }} />\n <div style={{ position: \"absolute\", top: -3, left: `${threshold}%`, width: 2, height: 16, background: \"#241430\" }} />\n </div>\n <div style={{ marginTop: 6, fontSize: 12, opacity: 0.75 }}>{load}% used · limit {threshold}%</div>\n </div>\n );\n}" }