Problem
In cost/finance dashboards, increases are bad (cost went up) and decreases are good (cost went down). Currently, the only way to flip the color logic is via the downIsGood prop on each individual <BigValue> or <Delta> component.
For dashboards with 20-40+ KPI components, this means adding downIsGood={true} to every single one. It's tedious, error-prone (easy to miss one), and clutters the markdown.
Proposed Solution
Support a global downIsGood default via one of these mechanisms (in order of preference):
-
Theme-level config in evidence.config.yaml:
theme:
defaults:
downIsGood: true
-
Page-level frontmatter:
-
Svelte context — a wrapper component that sets context for all children:
<DeltaDefaults downIsGood={true}>
<BigValue ... />
<BigValue ... />
</DeltaDefaults>
Any of these would eliminate the need to repeat downIsGood on every component.
Use Case
- Cost dashboards: All deltas represent costs — up is bad, down is good
- Regional conventions: In some markets (e.g., China/Asia), stock-market-style coloring uses red for up and green for down. A global flip would support this without per-component overrides.
Current Workaround
Add downIsGood={true} to every <BigValue> and <Delta> component individually. Works but doesn't scale.
Additional Context
Looking at the source (_Delta.svelte), the downIsGood prop simply flips text-positive/text-negative CSS classes. A global default would be a small change — just check context/config before falling back to false.
Problem
In cost/finance dashboards, increases are bad (cost went up) and decreases are good (cost went down). Currently, the only way to flip the color logic is via the
downIsGoodprop on each individual<BigValue>or<Delta>component.For dashboards with 20-40+ KPI components, this means adding
downIsGood={true}to every single one. It's tedious, error-prone (easy to miss one), and clutters the markdown.Proposed Solution
Support a global
downIsGooddefault via one of these mechanisms (in order of preference):Theme-level config in
evidence.config.yaml:Page-level frontmatter:
Svelte context — a wrapper component that sets context for all children:
Any of these would eliminate the need to repeat
downIsGoodon every component.Use Case
Current Workaround
Add
downIsGood={true}to every<BigValue>and<Delta>component individually. Works but doesn't scale.Additional Context
Looking at the source (
_Delta.svelte), thedownIsGoodprop simply flipstext-positive/text-negativeCSS classes. A global default would be a small change — just check context/config before falling back tofalse.