LimitsPanel
<caos-limits-panel>
a grouped board of allowances, each drawn as a usage bar, summarising the ones under pressure
May be placed on a page inside an app, an app’s home page and a record page.
Inputs
Section titled “Inputs”| Name | Attribute | Description | Type | Default | Required |
|---|---|---|---|---|---|
limits |
property only | The allowances to draw: { label, used, maximum, group?, unit? }[]. A property rather than an attribute because it is structured data. Setting it re-renders. Groups are drawn in the order they first appear and are never sorted. |
json | none declared | Optional |
warnAt |
warn-at, markup only |
Percentage at which a limit counts as approaching, for both the bars and the summary count. | number | 75 | Optional |
dangerAt |
danger-at, markup only |
Percentage at which a limit counts as at its limit, for both the bars and the summary count. | number | 90 | Optional |
emptyText |
empty-text, markup only |
What to say when there are no limits to draw. | text | No limits reported. | Optional |
Events
Section titled “Events”Not documented yet — this piece has not said.
Not documented yet — this piece has not said.
Styling hooks
Section titled “Styling hooks”Not documented yet — this piece has not said.
Methods
Section titled “Methods”Not documented yet — this piece has not said.
Readable state
Section titled “Readable state”| Name | Type | What it tells you |
|---|---|---|
pressure |
{ danger: number; warning: number; total: number } | How many limits sit at each level, by the same rule the bars colour themselves with. Read it to drive a badge or a tab count elsewhere without recomputing the thresholds and risking a different answer. |
Styling parts
Section titled “Styling parts”| Part | Which piece of it | When it is there |
|---|---|---|
::part(panel) |
The outer column holding the summary and the groups. | Always |
::part(summary) |
The one-line verdict above the groups. | Always |
::part(group) |
One group section. | Always |
::part(group-name) |
A group heading. | Always |
::part(limit) |
Each usage bar the panel renders. | Always |
When to use it
Section titled “When to use it”When several finite allowances are read together and the question is about the SET — is anything under pressure — rather than about any one of them.
What to use instead
Section titled “What to use instead”- UsageBar — there is one allowance, or the bars sit in a layout of their own that the panel would fight.
- DataTable — the limits are being compared column by column, sorted or exported — a table is for reading values against each other, this panel is for spotting pressure.
Accessibility
Section titled “Accessibility”The summary is a role="status" live region, so a refresh that moves the organisation into trouble is announced rather than only redrawn — the case where somebody is watching a long import and is not looking at this panel. Each group is a <section> labelled by its heading, so the bars inside it are reachable as a named group. The bars carry their own meter semantics; pressure is stated in the summary text as well as in colour.
Examples
Section titled “Examples”An organisation under pressure
Section titled “An organisation under pressure”The Org Status screen: every allowance grouped by the period it resets on, with one line at the top answering the only question anybody brings to the screen — is anything about to run out. The count is computed from the same rule that coloured the bars below it.
{ "id": "example", "section": "An organisation under pressure", "columns": 1, "items": [ { "id": "limits_panel_1", "type": "component", "key": "limits_panel", "inputs": { "limits": [ { "label": "API calls", "used": 9600, "maximum": 10000, "group": "Hourly", "unit": "calls" }, { "label": "Streaming events", "used": 800, "maximum": 1000, "group": "Hourly", "unit": "events" }, { "label": "Asynchronous jobs", "used": 120, "maximum": 250, "group": "Hourly", "unit": "jobs" }, { "label": "Bulk jobs", "used": 10, "maximum": 500, "group": "Daily", "unit": "jobs" }, { "label": "Outbound mail", "used": 430, "maximum": 1000, "group": "Daily", "unit": "messages" }, { "label": "File storage", "used": 42, "maximum": 100, "group": "Monthly", "unit": "GB" } ] } } ]}<caos-limits-panel id="limitsPanel1"></caos-limits-panel>// What an attribute cannot hold, set as a property — the same values the preview is drawn with.const limitsPanel1 = document.getElementById('limitsPanel1');limitsPanel1.limits = [ { "label": "API calls", "used": 9600, "maximum": 10000, "group": "Hourly", "unit": "calls" }, { "label": "Streaming events", "used": 800, "maximum": 1000, "group": "Hourly", "unit": "events" }, { "label": "Asynchronous jobs", "used": 120, "maximum": 250, "group": "Hourly", "unit": "jobs" }, { "label": "Bulk jobs", "used": 10, "maximum": 500, "group": "Daily", "unit": "jobs" }, { "label": "Outbound mail", "used": 430, "maximum": 1000, "group": "Daily", "unit": "messages" }, { "label": "File storage", "used": 42, "maximum": 100, "group": "Monthly", "unit": "GB" }];Nothing to worry about
Section titled “Nothing to worry about”The same panel with room to spare. The summary says so in words rather than leaving a reader to conclude it from an absence of red.
{ "id": "example", "section": "Nothing to worry about", "columns": 1, "items": [ { "id": "limits_panel_1", "type": "component", "key": "limits_panel", "inputs": { "limits": [ { "label": "API calls", "used": 1200, "maximum": 10000, "group": "Hourly", "unit": "calls" }, { "label": "Bulk jobs", "used": 10, "maximum": 500, "group": "Daily", "unit": "jobs" } ] } } ]}<caos-limits-panel id="limitsPanel1"></caos-limits-panel>// What an attribute cannot hold, set as a property — the same values the preview is drawn with.const limitsPanel1 = document.getElementById('limitsPanel1');limitsPanel1.limits = [ { "label": "API calls", "used": 1200, "maximum": 10000, "group": "Hourly", "unit": "calls" }, { "label": "Bulk jobs", "used": 10, "maximum": 500, "group": "Daily", "unit": "jobs" }];Limits with no period
Section titled “Limits with no period”Allowances that do not reset on a cycle sit in a section with no heading rather than under an invented one — the panel does not know what to call a group the caller did not name.
{ "id": "example", "section": "Limits with no period", "columns": 1, "items": [ { "id": "limits_panel_1", "type": "component", "key": "limits_panel", "inputs": { "limits": [ { "label": "Permission set licences", "used": 48, "maximum": 50, "unit": "seats" }, { "label": "Custom objects", "used": 210, "maximum": 400 } ] } } ]}<caos-limits-panel id="limitsPanel1"></caos-limits-panel>// What an attribute cannot hold, set as a property — the same values the preview is drawn with.const limitsPanel1 = document.getElementById('limitsPanel1');limitsPanel1.limits = [ { "label": "Permission set licences", "used": 48, "maximum": 50, "unit": "seats" }, { "label": "Custom objects", "used": 210, "maximum": 400 }];