Overscan polygon

OVERSCANUI KIT

It does not close over a gap. A shape display puts each parameter on a spoke so a problem is seen as a change of shape before any number is read, and every spoke is scaled through its own normal band so that normal is a regular shape: a deviation is a spike or a dent. A spoke with no data, or invalid data, leaves the polygon open, because closing through zero or straight across its neighbours would draw a shape that can look normal with a parameter missing. Unvalidated and stale spokes draw dashed, and a configured value is marked apart from the value observed.

demo/polygon.html, from this page

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

<ov-polygon
  src="models/polygon-normal.json"
  max-age="10"
></ov-polygon>

import { OvPolygon } from 'overscan/react'

<OvPolygon
  src="models/polygon-normal.json"
  max-age="10"
/>

import { OvPolygon } from 'overscan/vue'

<OvPolygon
  src="models/polygon-normal.json"
  max-age="10"
/>

import OvPolygon from 'overscan/svelte/OvPolygon.svelte'

<OvPolygon
  src="models/polygon-normal.json"
  max-age="10"
/>

all valid, all normal

one spoke no data

one spoke invalid

one unvalidated, one stale

two outside normal

configured beside observed

variation: src="models/polygon-gap.json"

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

<ov-polygon
  src="models/polygon-gap.json"
  max-age="10"
></ov-polygon>

import { OvPolygon } from 'overscan/react'

<OvPolygon
  src="models/polygon-gap.json"
  max-age="10"
/>

import { OvPolygon } from 'overscan/vue'

<OvPolygon
  src="models/polygon-gap.json"
  max-age="10"
/>

import OvPolygon from 'overscan/svelte/OvPolygon.svelte'

<OvPolygon
  src="models/polygon-gap.json"
  max-age="10"
/>

terminal

variation: src="models/polygon-invalid.json"

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

<ov-polygon
  src="models/polygon-invalid.json"
  max-age="10"
></ov-polygon>

import { OvPolygon } from 'overscan/react'

<OvPolygon
  src="models/polygon-invalid.json"
  max-age="10"
/>

import { OvPolygon } from 'overscan/vue'

<OvPolygon
  src="models/polygon-invalid.json"
  max-age="10"
/>

import OvPolygon from 'overscan/svelte/OvPolygon.svelte'

<OvPolygon
  src="models/polygon-invalid.json"
  max-age="10"
/>

industrial

variation: src="models/polygon-doubt.json"

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

<ov-polygon
  src="models/polygon-doubt.json"
  max-age="10"
></ov-polygon>

import { OvPolygon } from 'overscan/react'

<OvPolygon
  src="models/polygon-doubt.json"
  max-age="10"
/>

import { OvPolygon } from 'overscan/vue'

<OvPolygon
  src="models/polygon-doubt.json"
  max-age="10"
/>

import OvPolygon from 'overscan/svelte/OvPolygon.svelte'

<OvPolygon
  src="models/polygon-doubt.json"
  max-age="10"
/>

cyber

antiseptic

esper

neo

machina

holo

aegis

vector