Overscan donut

OVERSCANUI KIT

It never rescales the parts to 100%. Each part is drawn as a share of the declared whole, and whatever the parts do not cover is its own hatched wedge, UNATTRIBUTED, with its value. A part with no reading is not drawn, and the unattributed wedge names it rather than silently growing. Parts past the whole carry on round an outer ring in the alarm colour, OVER BY n. With no whole the donut refuses to draw proportions at all, because a circle of the parts' own sum is exactly the rescaling it exists to refuse. The scenes below are one case each; the buttons act on the theme rows under them.

demo/donut.html, from this page

import 'overscan'
import 'overscan/overscan.css'

<ov-donut
  whole="4.2"
  unit="M$"
  label="FY27 BUDGET"
  parts="SALARIES=2.1, HARDWARE=0.8, LICENCES=0.4, TRAVEL=0.3"
></ov-donut>

import { OvDonut } from 'overscan/react'

<OvDonut
  whole="4.2"
  unit="M$"
  label="FY27 BUDGET"
  parts="SALARIES=2.1, HARDWARE=0.8, LICENCES=0.4, TRAVEL=0.3"
/>

import { OvDonut } from 'overscan/vue'

<OvDonut
  whole="4.2"
  unit="M$"
  label="FY27 BUDGET"
  parts="SALARIES=2.1, HARDWARE=0.8, LICENCES=0.4, TRAVEL=0.3"
/>

import OvDonut from 'overscan/svelte/OvDonut.svelte'

<OvDonut
  whole="4.2"
  unit="M$"
  label="FY27 BUDGET"
  parts="SALARIES=2.1, HARDWARE=0.8, LICENCES=0.4, TRAVEL=0.3"
/>

a budget with 0.6 nobody has claimed

PDU-B stopped reporting, and is named

162 mustered for 150 seats: over by 12

no capacity declared: listed, not drawn

a battery charging is not a share: refused

every post filled: nothing unattributed

variation: whole="12" unit="kW" label="RACK 14" parts="PDU-A=4.8, PDU-B=null, COOLING=2.1, LIGHTS=0.3"

import 'overscan'
import 'overscan/overscan.css'

<ov-donut
  whole="12"
  unit="kW"
  label="RACK 14"
  parts="PDU-A=4.8, PDU-B=null, COOLING=2.1, LIGHTS=0.3"
></ov-donut>

import { OvDonut } from 'overscan/react'

<OvDonut
  whole="12"
  unit="kW"
  label="RACK 14"
  parts="PDU-A=4.8, PDU-B=null, COOLING=2.1, LIGHTS=0.3"
/>

import { OvDonut } from 'overscan/vue'

<OvDonut
  whole="12"
  unit="kW"
  label="RACK 14"
  parts="PDU-A=4.8, PDU-B=null, COOLING=2.1, LIGHTS=0.3"
/>

import OvDonut from 'overscan/svelte/OvDonut.svelte'

<OvDonut
  whole="12"
  unit="kW"
  label="RACK 14"
  parts="PDU-A=4.8, PDU-B=null, COOLING=2.1, LIGHTS=0.3"
/>

terminal

variation: whole="150" unit="SEATS" label="LIFEBOAT 2" parts="PORT WATCH=78, STBD WATCH=84"

import 'overscan'
import 'overscan/overscan.css'

<ov-donut
  whole="150"
  unit="SEATS"
  label="LIFEBOAT 2"
  parts="PORT WATCH=78, STBD WATCH=84"
></ov-donut>

import { OvDonut } from 'overscan/react'

<OvDonut
  whole="150"
  unit="SEATS"
  label="LIFEBOAT 2"
  parts="PORT WATCH=78, STBD WATCH=84"
/>

import { OvDonut } from 'overscan/vue'

<OvDonut
  whole="150"
  unit="SEATS"
  label="LIFEBOAT 2"
  parts="PORT WATCH=78, STBD WATCH=84"
/>

import OvDonut from 'overscan/svelte/OvDonut.svelte'

<OvDonut
  whole="150"
  unit="SEATS"
  label="LIFEBOAT 2"
  parts="PORT WATCH=78, STBD WATCH=84"
/>

industrial

variation: unit="GB" label="VOLUME /DATA" parts="DB=340, LOGS=212, CACHE=96"

import 'overscan'
import 'overscan/overscan.css'

<ov-donut
  unit="GB"
  label="VOLUME /DATA"
  parts="DB=340, LOGS=212, CACHE=96"
></ov-donut>

import { OvDonut } from 'overscan/react'

<OvDonut
  unit="GB"
  label="VOLUME /DATA"
  parts="DB=340, LOGS=212, CACHE=96"
/>

import { OvDonut } from 'overscan/vue'

<OvDonut
  unit="GB"
  label="VOLUME /DATA"
  parts="DB=340, LOGS=212, CACHE=96"
/>

import OvDonut from 'overscan/svelte/OvDonut.svelte'

<OvDonut
  unit="GB"
  label="VOLUME /DATA"
  parts="DB=340, LOGS=212, CACHE=96"
/>

cyber

antiseptic

esper

neo

machina

holo

aegis

vector