CngxDelta
projects/common/data/display/delta/delta.component.ts
Import#
import { CngxDelta } from '@cngx/common/data'
Description#
Sentiment-aware delta indicator. Where CngxTrend colours strictly by
direction (up = green), CngxDelta colours by sentiment: a polarity
of lower-is-better makes a drop read as an improvement (churn, latency,
error rate). The arrow glyph always tracks the raw direction, so colour is
never the only signal - a green value can carry a down arrow, and the SR
label speaks the sentiment word.
Sentiment, direction, glyph and the formatted magnitude are each a
computed() off the single value/polarity input pair (Pillar 1); the
colour class and the arrow are bound from independent signals so they can
diverge (Pillar 2).
Basic (higher-is-better default)
<cngx-delta [value]="5.3" />Lower-is-better (a drop is good)
<cngx-delta [value]="-2.1" polarity="lower-is-better" />Absolute magnitude
<cngx-delta [value]="1240" mode="absolute" [format]="{ maximumFractionDigits: 0 }" />Metadata#
Host#
Index#
Inputs#
Intl.NumberFormatOptions | undefinedIntl.NumberFormatOptions applied to the magnitude in either mode.
DeltaPolarityHow to read the sign. higher-is-better (default) treats a rise as
positive; lower-is-better inverts it; neutral disables sentiment
(direction still renders, colour stays neutral).
'higher-is-better'HostBindings#
| Binding | Expression |
|---|---|
[class.cngx-delta--positive] | sentiment() === 'positive' |
[class.cngx-delta--negative] | sentiment() === 'negative' |
[class.cngx-delta--neutral] | sentiment() === 'neutral' |
[attr.aria-label] | resolvedLabel() |
Default visuals for CngxDelta. The host carries .cngx-delta - an
inline-flex pair of a direction arrow and the formatted magnitude. Three
sentiment modifiers pin the colour to the semantic intent; unlike
CngxTrend the colour follows sentiment, not raw direction, so a
lower-is-better drop renders green while the arrow still points down.
Sentiment modifiers
--positive- good change, success-coded--negative- bad change, danger-coded--neutral- flat or polarity-disabled, muted
Inheritance
--cngx-delta-positive-color->--cngx-color-success--cngx-delta-negative-color->--cngx-color-danger--cngx-delta-neutral-color- leaf neutral token, swaps in dark mode
Dark mode
Three hooks lift the sentiment colours to the foundation's dark variant - the neutral text gains lightness, the sentiment colours shed chroma and gain L to track the foundation's dark success and danger tones:
prefers-color-scheme: dark[data-color-scheme="dark"]/.darkclass[data-color-scheme="light"]/.lightclass (explicit pin)
Index#
Layout
Typography
Variant / Neutral
Variant / Positive
Variant / Negative
Layout
Typography
Variant / Neutral
<color>oklch(0.36 0.02 290)Colour of the .cngx-delta--neutral modifier - flat or
polarity-disabled.
Variant / Positive
<color>oklch(0.65 0.18 145)Colour of the .cngx-delta--positive modifier. Falls back to
--cngx-color-success.
See: [[--cngx-color-success]]
Variant / Negative
<color>oklch(0.65 0.22 25)Colour of the .cngx-delta--negative modifier. Falls back to
--cngx-color-danger.
See: [[--cngx-color-danger]]