Edit Workload Indicator

Name

Also known as (comma separated)

Brief definition Shows current workload.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "person", "type": "text", "label": "Person", "default": "Jordan Lee" }, { "id": "load", "type": "number", "label": "Current workload (%)", "default": 88, "min": 0, "max": 150, "step": 1 }, { "id": "status", "type": "select", "label": "Status", "default": "heavy", "options": [ "light", "balanced", "heavy", "overloaded" ] }, { "id": "color", "type": "color", "label": "Colour", "default": "#E8A020", "presets": [ "#A8E6C1", "#F5C2E0", "#BFD9F2", "#D9C8F0", "#E8A020", "#241430" ] } ]

Templates (JSON object keyed by format) { "html": "<div class=\"workload workload--{{status}}\" style=\"--c:{{color}};\">\n <div class=\"workload__head\">\n <span class=\"workload__person\">{{person}}</span>\n <span class=\"workload__status\"></span>\n </div>\n <div class=\"workload__bar\" role=\"img\" aria-label=\"{{person}} is at {{load}} percent of capacity\">\n <div class=\"workload__fill\" style=\"width:{{load}}%;\"></div>\n </div>\n</div>\n<style>\n.workload { font: 14px/1.4 system-ui, sans-serif; color: #241430; max-width: 260px; }\n.workload__head { display: flex; justify-content: space-between; margin-bottom: 6px; }\n.workload__status { font-size: 12px; font-weight: 600; }\n.workload--light .workload__status::before { content: \"Light\"; color: #2f8f4e; }\n.workload--balanced .workload__status::before { content: \"Balanced\"; color: #241430; }\n.workload--heavy .workload__status::before { content: \"Heavy\"; color: var(--c); }\n.workload--overloaded .workload__status::before { content: \"⚠ Overloaded\"; color: #b3261e; }\n.workload__bar { height: 8px; border-radius: 999px; background: #24143014; overflow: hidden; }\n.workload__fill { height: 100%; background: var(--c); border-radius: 999px; }\n.workload--overloaded .workload__fill { background: #b3261e; }\n</style>", "tailwind": "<div class=\"workload-tw workload-tw--{{status}} max-w-xs font-sans text-[#241430]\" style=\"--c:{{color}};\">\n <div class=\"flex justify-between mb-1.5\">\n <span>{{person}}</span>\n <span class=\"workload-tw__status text-xs font-semibold\"></span>\n </div>\n <div class=\"h-2 rounded-full bg-[#24143014] overflow-hidden\" role=\"img\" aria-label=\"{{person}} is at {{load}} percent of capacity\">\n <div class=\"workload-tw__fill h-full rounded-full\" style=\"width:{{load}}%;background:var(--c);\"></div>\n </div>\n</div>\n<style>\n.workload-tw--light .workload-tw__status::before { content: \"Light\"; color: #2f8f4e; }\n.workload-tw--balanced .workload-tw__status::before { content: \"Balanced\"; color: #241430; }\n.workload-tw--heavy .workload-tw__status::before { content: \"Heavy\"; color: var(--c); }\n.workload-tw--overloaded .workload-tw__status::before { content: \"⚠ Overloaded\"; color: #b3261e; }\n.workload-tw--overloaded .workload-tw__fill { background: #b3261e !important; }\n</style>", "react": "export function WorkloadIndicator({\n person = \"{{person}}\",\n load = {{load}},\n status = \"{{status}}\",\n color = \"{{color}}\",\n}) {\n const statusText = { light: \"Light\", balanced: \"Balanced\", heavy: \"Heavy\", overloaded: \"⚠ Overloaded\" }[status] ?? \"Balanced\";\n const statusColor = { light: \"#2f8f4e\", balanced: \"#241430\", heavy: color, overloaded: \"#b3261e\" }[status] ?? \"#241430\";\n const fillColor = status === \"overloaded\" ? \"#b3261e\" : color;\n return (\n <div style={{ font: \"14px/1.4 system-ui, sans-serif\", color: \"#241430\", maxWidth: 260 }}>\n <div style={{ display: \"flex\", justifyContent: \"space-between\", marginBottom: 6 }}>\n <span>{person}</span>\n <span style={{ fontSize: 12, fontWeight: 600, color: statusColor }}>{statusText}</span>\n </div>\n <div role=\"img\" aria-label={`${person} is at ${load} percent of capacity`} style={{ height: 8, borderRadius: 999, background: \"#24143014\", overflow: \"hidden\" }}>\n <div style={{ height: \"100%\", width: `${load}%`, background: fillColor, borderRadius: 999 }} />\n </div>\n </div>\n );\n}" }