TPS-1470: Decouple KPI trend arrow direction from positive/negative colors by mad-raccoon · Pull Request #424 · embeddable-hq/remarkable-ui

mad-raccoon · 2026-09-14T08:20:06Z

Why is this pull-request needed?

Consumers of KpiChart/KpiTrend can only toggle a single invertChangeColors/reverseTrend boolean, which drives both the trend badge's color (positive/negative) and its arrow icon direction together. A customer using KpiChartNumberComparisonPro (in embeddable-hq/remarkable-pro) wanted to reverse the colors without also flipping the arrow, which isn't possible today.

Main changes

KpiTrend gains a new optional reverseColor prop that controls the badge color independently of reverseTrend (which now controls only the arrow icon direction). reverseColor defaults to reverseTrend, so any existing usage that only passes reverseTrend renders identically to before. (Named to match the existing reverseTrend prop on the same component, rather than introducing a different verb.)
KpiChartChange (and KpiChart, which wraps it) gain a new optional invertTrendDirection prop. It defaults to mirroring invertChangeColors when not provided, so nothing changes for existing consumers until they explicitly set it. (invertChangeColors itself is unchanged — it's already-published API.)
Added tests covering the new independent-control behavior and confirming the default/fallback keeps prior behavior unchanged.
Added a Storybook story (IncreasingWithReversedColorOnly) and argTypes control demonstrating the decoupled reverseColor.
Added a changeset (minor, since this is a purely additive, backwards-compatible API change).

Companion change: embeddable-hq/remarkable-pro#279 adds a "Reverse trend direction" input to KpiChartNumberComparisonPro and LineChartComparisonWithKpiTabsPro, with backwards-compatible config migration, ready to wire into invertTrendDirection once this is released.

Test evidence

Ran the full repo suite locally: lint (eslint:fix), prettier:write, type-check (tsc --noEmit), npm run build (tsup, including .d.ts generation), and npm test — all tests pass (840 baseline + new coverage for KpiTrend, KpiChartChange, and KpiChart), across 67 files. madge --circular reports no circular dependencies.

https://www.loom.com/share/e6283cbbdca24d7db6633c688b952224

…olors KpiChart/KpiChartChange gain a new optional `reverseTrendDirection` prop, and KpiTrend gains a new optional `invertColor` prop. Both default to mirroring the existing `invertChangeColors`/`reverseTrend` value, so current consumers keep looking exactly the same until they opt in to setting color and arrow direction independently. Companion change to embeddable-hq/remarkable-pro#279, which adds a "Reverse trend direction" input to KpiChartNumberComparisonPro and LineChartComparisonWithKpiTabsPro and is ready to wire into this new prop once this ships.

coderabbitai · 2026-09-14T08:20:20Z

Important

Review skipped

Auto incremental reviews are disabled on this repository.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Essentials

Run ID: 9433ee6c-b85a-4dde-bddb-e2a62d123041

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

🔍 Trigger review

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Essentials

Run ID: 61dd11e5-8600-4304-8a9d-9cc98eaf71f6

📥 Commits

Reviewing files that changed from the base of the PR and between 8b59f09 and 3fcefd7.

📒 Files selected for processing (9)

.changeset/kpi-trend-direction-tps-1470.md
src/components/charts/kpis/KpiChart.test.tsx
src/components/charts/kpis/KpiChart.tsx
src/components/charts/kpis/KpiChart.types.ts
src/components/charts/kpis/components/KpiChartChange.test.tsx
src/components/charts/kpis/components/KpiChartChange.tsx
src/components/shared/KpiTrend/KpiTrend.stories.tsx
src/components/shared/KpiTrend/KpiTrend.test.tsx
src/components/shared/KpiTrend/KpiTrend.tsx

Included review availability: 3 reviews are currently available. Your included PR review attempts over the past 7 days set your current allowance at 5 reviews per hour.

Walkthrough

The KPI trend components now control arrow direction and badge color independently. New optional props preserve existing behavior by default. Tests and Storybook coverage validate the separate controls.

Changes

KPI trend controls

Layer / File(s)	Summary
KpiTrend color control `src/components/shared/KpiTrend/KpiTrend.tsx`, `src/components/shared/KpiTrend/KpiTrend.test.tsx`, `src/components/shared/KpiTrend/KpiTrend.stories.tsx`	`KpiTrend` adds `invertColor`. Badge color uses this prop, while arrow direction continues to use `reverseTrend`. Tests and a Storybook story cover independent color inversion.
KpiChart direction propagation `src/components/charts/kpis/KpiChart.types.ts`, `src/components/charts/kpis/KpiChart.tsx`, `src/components/charts/kpis/components/KpiChartChange.tsx`, `src/components/charts/kpis/components/KpiChartChange.test.tsx`, `src/components/charts/kpis/KpiChart.test.tsx`, `.changeset/kpi-trend-direction-tps-1470.md`	`KpiChart` adds `reverseTrendDirection` and forwards it through `KpiChartChange`. `KpiChartChange` separates arrow direction from badge color and preserves the previous fallback behavior. Tests cover the new combinations, and the changeset documents the release.

Priority: ⬇️ Low

Estimated code review effort: 2 (Simple) | ~12 minutes

Change: Feature

Merge Risk: ⚪ Minimal · up to 3fcef

The new optional controls retain prior defaults while allowing direction and color to be configured independently. No merge-blocking issue is identified.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 8…
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Title check	✅ Passed	The title clearly and concisely states the primary change: separating KPI trend arrow direction from positive/negative colors.
Description check	✅ Passed	The description includes the required rationale, main changes, and test evidence. It is complete and directly related to the pull request, although some prop names differ from the implemented names in…

✨ Finishing Touches

📝 Generate docstrings

Create stacked PR
Commit on current branch

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch TPS-1470-reverse-trend-direction

_{Comment @coderabbitai help to get the list of available commands.}

…ency KpiTrend already had `reverseTrend` for direction; the new color prop should use the same verb rather than mixing "invert"/"reverse" on the same component. `invertChangeColors` on KpiChart/KpiChartChange is unchanged (already-published API).

…stency with invertChangeColors

Addresses SonarCloud warnings on KpiChartChange.tsx (use the opposite operator instead of !(a !== b)). Logically equivalent, no behavior change.

sonarqubecloud · 2026-09-14T14:56:50Z

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
100.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

mad-raccoon mentioned this pull request Sep 14, 2026

TPS-1470: Split reverse trend direction from positive/negative colors embeddable-hq/remarkable-pro#279

Merged

mad-raccoon added 5 commits September 14, 2026 09:28

Trim unneeded/verbose comments (review pass)

e665bd8

Rename reverseTrendDirection -> invertTrendDirection for naming consi…

510fd57

…stency with invertChangeColors

Drop ticket number from code comment

9d354f3

Drop ticket number from test names and changeset text

4c308f8

mad-raccoon changed the title ~~TPS-1470: decouple KPI trend arrow direction from positive/negative colors~~ Decouple KPI trend arrow direction from positive/negative colors Sep 14, 2026

mad-raccoon added 2 commits September 14, 2026 10:52

Rename changeset file to drop ticket number

95c6d14

Remove old changeset file (renamed, dropping ticket number)

164e0d3

mad-raccoon changed the title ~~Decouple KPI trend arrow direction from positive/negative colors~~ TPS-1470: Decouple KPI trend arrow direction from positive/negative colors Sep 14, 2026

mad-raccoon requested review from a team, anthony-ext, baseilos, cwbuecheler, erinfellows, hjkmarshall, mikhail-terekhov and yashrajk17 September 14, 2026 10:02

miguelopezv approved these changes Sep 14, 2026

View reviewed changes

mad-raccoon added 2 commits September 14, 2026 15:50

fix: use === instead of double negation for trend color/direction checks

770d7a4

Addresses SonarCloud warnings on KpiChartChange.tsx (use the opposite operator instead of !(a !== b)). Logically equivalent, no behavior change.

docs: shorten invertTrendDirection JSDoc comment

52633b9

mad-raccoon merged commit 3bc11b1 into main Sep 14, 2026
4 checks passed

mad-raccoon deleted the TPS-1470-reverse-trend-direction branch September 14, 2026 14:57

Navigation Menu

TPS-1470: Decouple KPI trend arrow direction from positive/negative colors - #424

TPS-1470: Decouple KPI trend arrow direction from positive/negative colors#424
mad-raccoon merged 10 commits into
mainfrom
TPS-1470-reverse-trend-direction

mad-raccoon commented Sep 14, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot commented Sep 14, 2026 •

edited

Loading

Review skipped

Uh oh!

sonarqubecloud Bot commented Sep 14, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

mad-raccoon commented Sep 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Why is this pull-request needed?

Main changes

Test evidence

Uh oh!

coderabbitai Bot commented Sep 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review skipped

Walkthrough

Changes

Uh oh!

sonarqubecloud Bot commented Sep 14, 2026

Quality Gate passed

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

mad-raccoon commented Sep 14, 2026 •

edited

Loading

coderabbitai Bot commented Sep 14, 2026 •

edited

Loading