True Cost of Water
A dashboard that breaks the cost of water into Raw Water, Energy, and Chemicals & Consumables, with KPI cards, a cost trend line, a cost-distribution donut, and a per-category detail table.
True Cost is a demonstration prototype. It runs entirely on static dummy
data (dummyData/trueCostDummyData.js), makes no API calls, and is routed
only in the demo app (/true_cost). There is no production route, no
TRUE_COST permission, and no dataSource/controller/store layer. Every
figure on the page (₹ amounts, percentages, totals) is illustrative, not real.
- Reached at:
/true_costin the demo app only →TrueCostPage(libs/trueCost/src/TrueCostPage.jsx) - Data:
libs/trueCost/src/dummyData/trueCostDummyData.js(imported directly) - Library:
libs/trueCost/— components + helper only (no data layer)
What's on the page
Selecting a period (Current presets or a Custom day/month/year) swaps which slice of the dummy dataset is shown.
| Area | Component | What it shows | On click / action |
|---|---|---|---|
| Filter bar | TrueCostFormControl | Current/Custom selector, the period sub-menu, and a date picker for custom day/month | Changing a selector swaps the period. (The "+ Edit expense" button has no handler.) |
| KPI cards | TrueCostHeaderCards | Total Water Cost (₹), Average Water Cost (₹/kl), Total Water Used (kl) | — |
| Cost trend | TrueCostCard → SplitGraphView / TotalViewGraph | A line chart, Total or Split by category | Total/Split radio toggle; in Split, three category checkboxes (unchecking all reverts to Total) |
| Cost distribution | TrueCostPiechart | A donut of the three categories with a centred total | — |
| Category detail | TrueCostTableComponent + TrueCostTable | A table of cost lines for the selected category | Tabs switch category (Raw Water / Energy / Chemicals); Sort menu (A–Z or Cost high→low) |
Data (dummy)
trueCostDummyData is one static object keyed current (presets: last 7 days,
month, last month, last 3 months, year, last year) and custom (days / months /
years). Each period holds the same five blocks:
| Block | Feeds |
|---|---|
headercard | The three KPI cards |
tableCard | The per-category detail table (rawWater, energy, chemicals) |
pieChartData | The distribution donut |
splitGraph / totalGraph | The trend line chart |
Date labels are generated with moment() at import time, so they are always
relative to today. helper/trueCostHelper.js provides the period enum and small
change handlers — it does no data fetching.
Charts & libraries
| Purpose | Library |
|---|---|
| Line + pie charts | recharts |
| UI / theming | @mui/material (MUI 7) |
| Dates | moment |
Charts use Recharts (consistent with the app standard). Exact versions live in
package.json.
Edge cases & state
Because the data is a synchronous local object, there is no loading, empty, or error state — only local component state:
- Total vs Split trend toggle (Split adds per-category checkboxes; all-off reverts to Total).
- Category tabs + sort (A–Z / cost descending) on the detail table.
- Defensive guards only (e.g. the donut returns nothing for non-array data).
Code reference
| File | Role |
|---|---|
TrueCostPage.jsx | Orchestrator; selects the dummy-data slice |
dummyData/trueCostDummyData.js | All figures (static) |
helper/trueCostHelper.js | Period enum + change handlers |
components/TrueCostFormControl.jsx | Period filter bar |
components/TrueCostHeaderCards.jsx | KPI cards |
components/TrueCostCard.jsx | Trend card (Total/Split) + distribution |
components/TrueCostPiechart.jsx | Recharts donut |
components/SplitGraphView.jsx · TotalViewGraph.jsx | Recharts line charts |
components/TrueCostTableComponent.jsx · TrueCostTable.jsx | Category tabs/sort + detail table |
Related
- Applications → Demo — where this prototype lives
- Water Balance · Water Neutrality — production sustainability features
- Component Library → Charts — the Recharts standard