Rules Hub
Coding Rules Library
Rule priority, scope & exceptions
Use this to align rules with the senior-level structure (P0/P1/P2, scope, exceptions/tradeoffs).
Use API time-series values as the chart x-axis source of truth
If the backend already returns timestamps for graph points, the chart should use those timestamps directly instead of synthesizing index-based x-axis values.
Bad example
| 1 | const points = graphData.points.map((point, index) => ({ |
| 2 | index, |
| 3 | primaryValue: point.portfolioPrc, |
| 4 | comparisonValue: point.benchmarkPrc |
| 5 | })); |
| 6 |
|
| 7 | <XAxis dataKey="index" /> |
Explanation (EN)
The UI discards the real timestamp and invents a synthetic x-axis. That can mislabel ticks and drift away from the actual backend data.
Objašnjenje (HR)
UI odbacuje stvarni timestamp i izmisljava sintetsku x-os. To moze krivo oznaciti tickove i odlutati od stvarnih backend podataka.
Good example
| 1 | const points = graphData.points.map(point => ({ |
| 2 | timestamp: point.timestamp, |
| 3 | primaryValue: point.portfolioPrc, |
| 4 | comparisonValue: point.benchmarkPrc |
| 5 | })); |
| 6 |
|
| 7 | <XAxis dataKey="timestamp" ticks={getChartTicks(points.map(point => point.timestamp))} /> |
Explanation (EN)
The chart stays aligned with the API contract. Tick labels are derived from real timestamps instead of guessed positions.
Objašnjenje (HR)
Graf ostaje uskladen s API contractom. Oznake tickova proizlaze iz stvarnih timestampova umjesto iz nagadenih pozicija.
Exceptions / Tradeoffs (EN)
A synthetic x-axis is acceptable only when the backend truly does not provide a stable domain value and the approximation is documented.
Iznimke / Tradeoffi (HR)
Sintetska x-os je prihvatljiva samo kada backend stvarno ne daje stabilnu domensku vrijednost i kada je aproksimacija dokumentirana.