feat: add sparklines to show historical data trends (#9)

* feat: add sparklines to show historical data trends

- Show mini line charts at the bottom of each rectangle
- Support configurable periods: 12h, 24h, 7d, 30d
- Customizable line and fill styles via CSS
- Use HA statistics API for efficient data fetching
- Cache history data with 5-minute TTL
- Fix icon contrast to match label contrast logic

* feat: add sparkline.attribute for JSON mode, unify config naming

- Add sparkline.attribute to use inline data arrays in JSON mode
- Unify config to use 'attribute' everywhere (param is deprecated alias)
- Add dev sandbox with mock HA data for rapid testing
- Fix HVAC icons (fire/snowflake) by removing hardcoded icon attr
- Improve sparkline styling (gradient fill, line opacity 0.15/0.25)
- Add opacity defaults for labels (0.9), icons (0.85), values (0.85)
- Update README: remove param mentions, add JSON sparkline docs
- Update contribution section with coffee joke

* fix: pass sparklineData through squarify layout

* chore: add eslint-plugin-unicorn for better code quality

- Enforces descriptive variable names (prevent-abbreviations)
- Uses Number.parseInt/parseFloat instead of global functions
- Uses String.slice() instead of substring()
- Uses for-of loops instead of forEach
- Various code style improvements

* refactor: remove eslint-plugin-unicorn, improve code style

- Remove unicorn plugin (too many disabled rules for little value)
- Keep good changes: Number.parseInt, slice(), function scoping
- Apply parameter destructuring in extractClimateInfo, extractLightInfo
- Use descriptive callback names (rect instead of r)

* refactor: extract utility functions from treemap-card

- Move squarify.ts to utils/
- Extract matchesPattern to utils/predicates.ts
- Extract getGradientColor, getHvacColor, applyOpacity to utils/colors.ts
- Extract getLightBackgroundColor to utils/lights.ts
- Add sparkline unit tests (100% coverage)
- Exclude index.ts, types.ts from coverage

* perf: extract and optimize data preparation with single-pass algorithm

- Extract prepareTreemapData to src/utils/data.ts
- Single-pass algorithm for calculating min/max stats (~2x faster)
- Add performance regression test to catch future slowdowns
- Add vitest bench file for interactive benchmarking
- Fix TypeScript errors in test helpers (callWS mock)

* perf: add shouldUpdate, caching, and debouncing optimizations

- Add shouldUpdate() to skip re-renders when irrelevant hass changes
- Cache _resolveData() result based on entity states hash
- Debounce sparkline fetching (100ms) to reduce API calls
- Add disconnectedCallback() cleanup for debounce timer

These optimizations significantly reduce CPU usage when multiple
treemap cards are on the same dashboard with frequent hass updates.

* test: lock in 1.7x performance gain threshold (measured ~2x)

* docs: add 'Why Treemap Card?' sales pitch to README

* docs: rewrite sales pitch to be more human

* docs: use simple bullet points

* chore: remove local dev scripts from package.json

* docs: simplify installation, remove horizontal lines

* test: separate performance tests from unit tests

* docs: add individual card screenshots for light/dark modes

* docs: add light/dark mode screenshots to README

* docs: center and add spacing to inline images

* docs: try borderless table for screenshots

* docs: revert top to single screenshot, add table to sparkline section

* chore: add changeset for sparklines release

* docs: update sparkline note - climate entities have statistics

* feat: add HVAC action bars and climate temperature fallback for sparklines

- Climate entities now show temperature sparklines using associated
  temperature sensor if the climate entity has no statistics data
- Added HVAC action bars at the bottom of sparklines showing when
  heating/cooling was active over the time period
- Configurable via sparkline.hvac options (show, height, colors)
- Bars automatically use orange for heating, blue for cooling

* docs: add climate HVAC bars to changeset

* feat(sandbox): add climate HVAC bars example and mock history

* feat: render HVAC activity as colored sparkline fill

- Color sparkline fill sections where heating/cooling was active
- Quantize HVAC segments to 15-minute blocks for cleaner visualization
- Climate entities show line only by default, fill only where HVAC active
- Extract temperature from climate entity history (current_temperature attr)
- Remove debug console.log statements
- Add tests for HVAC sparkline rendering

* docs: update climate sparkline screenshots

* docs: add climate sparkline section to README

* docs: fix climate image formatting in README

---------

Co-authored-by: Ondrej Machala <[email protected]>

Author: omachala

.changeset/sparklines-feature.md

@@ -0,0 +1,22 @@
+---
+'ha-treemap-card': minor
+---
+
+Sparklines are here! Each rectangle now shows a mini chart of historical data.
+
+- **Enabled by default** - to disable, add `sparkline.show: false` to your config
+- Configurable time periods: `12h`, `24h` (default), `7d`, or `30d`
+- Works with entity sensors (uses HA long-term statistics) and JSON mode (uses data array from attribute)
+- Fully customizable line and fill styles via CSS
+- **Climate entities**: Shows temperature history with HVAC action bars (heating/cooling periods displayed at the bottom)
+
+Major performance overhaul - the card is now industry-grade:
+
+- Render multiple cards with hundreds of rectangles without breaking a sweat
+- Runs smoothly on low-end devices like Raspberry Pi
+- Added performance regression tests to keep the bar high
+
+Other improvements:
+
+- Icons now adapt to background color for better readability (same as labels)
+- Config cleanup: use `attribute` everywhere (old `param` still works)

README.md

@@ -103,7 +103,7 @@ export default tseslint.config(
       complexity: 'off', // Render functions can be complex
 
       // ===== Code Style =====
-      'prefer-destructuring': 'off', // Not always clearer
+      // prefer-destructuring is off - too many dynamic property accesses in this codebase
       'object-shorthand': ['error', 'always'],
 
       // Allow unbound methods for Lit event handlers

eslint.config.js

@@ -6,17 +6,17 @@
   "main": "dist/treemap-card.js",
   "packageManager": "[email protected]",
   "scripts": {
-    "dev": "vite build --watch --outDir /home/ondrej/dockers/homeassistant/config/www --emptyOutDir=false",
+    "dev": "vite serve --config vite.dev.config.ts",
     "build": "vite build",
-    "ha": "./deploy.sh",
     "test": "vitest",
     "test:run": "vitest run",
+    "test:perf": "vitest run --config vitest.perf.config.ts",
     "typecheck": "tsc --noEmit",
     "lint": "eslint src/",
     "lint:fix": "eslint src/ --fix",
     "format": "prettier --write .",
     "format:check": "prettier --check .",
-    "check": "pnpm typecheck && pnpm format:check && pnpm lint && pnpm test:run",
+    "check": "pnpm typecheck && pnpm format:check && pnpm lint && pnpm test:run && pnpm test:perf",
     "fix": "pnpm format && pnpm lint:fix",
     "prepare": "simple-git-hooks"
   },