{"id":43310227,"url":"https://github.com/remmob/timescale-plotly-card","last_synced_at":"2026-02-06T22:00:48.838Z","repository":{"id":335905514,"uuid":"1146776181","full_name":"remmob/timescale-plotly-card","owner":"remmob","description":"This is a Home assistant lovelace card, that is used with the timescale_database_reader integration. ","archived":false,"fork":false,"pushed_at":"2026-02-03T21:39:25.000Z","size":33,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-02-04T09:12:24.655Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/remmob.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-01-31T16:58:38.000Z","updated_at":"2026-02-03T21:39:29.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/remmob/timescale-plotly-card","commit_stats":null,"previous_names":["remmob/timescale-plotly-card"],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/remmob/timescale-plotly-card","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/remmob%2Ftimescale-plotly-card","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/remmob%2Ftimescale-plotly-card/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/remmob%2Ftimescale-plotly-card/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/remmob%2Ftimescale-plotly-card/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/remmob","download_url":"https://codeload.github.com/remmob/timescale-plotly-card/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/remmob%2Ftimescale-plotly-card/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29178536,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-06T20:14:21.878Z","status":"ssl_error","status_checked_at":"2026-02-06T20:14:21.443Z","response_time":59,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2026-02-01T21:06:01.918Z","updated_at":"2026-02-06T22:00:48.832Z","avatar_url":"https://github.com/remmob.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Timescale Plotly Card\n\n[![hacs_badge](https://img.shields.io/badge/HACS-Custom-orange.svg)](https://github.com/custom-components/hacs)\n\n \u003e **Note:**  \u003cspan style=\"font-size: 2em\"\u003e⚠️\u003c/span\u003e This card is under heavy development. Features and options may change frequently.\n\n\nA custom Lovelace card for Home Assistant that displays Timescale database historical data using interactive Plotly charts.\n\n## Features\n\n- 📊 Interactive Plotly charts with zoom, pan, hover, and download\n- ⏱️ Time selector buttons (1u, 2u, 3u, 6u, 12u, 24u, Custom)\n- 📅 Custom date range picker\n- ⚡ Automatic smart downsampling (default: ~80 points per view)\n- 🎨 Fully customizable CSS styling\n- 🔄 Auto-refresh support (default: 300 seconds, configurable)\n- 💾 Direct TimescaleDB queries via WebSocket\n- 🎯 Crosshair and hover tooltips\n- 📈 Auto-scaling Y-axis with configurable margins\n\n## Requirements\n\n\u003e **Note:** The Timescale database Reader integration supports any TimescaleDB database. It has been tested with databases using the `ltss` table (from the [LTSS integration](https://github.com/freol35241/ltss)) and with [Scribe](https://github.com/jonathan-gatard/scribe). You do not need a special Home Assistant database; any compatible TimescaleDB schema will work. \nThis means you can show data from other sources (e.g., IoT devices, sensors) stored in TimescaleDB.\nSee the Timescale Database Reader [README](https://github.com/remmob/timescale_database_reader) for details and example queries.\n\n## Installation\n\n### HACS (Recommended)\n\n1. Add this repository as a custom repository in HACS:\n   - Go to HACS → Frontend\n   - Click ⋮ → Custom repositories\n   - Add URL: `https://github.com/remmob/timescale-plotly-card`\n   - Category: Lovelace\n2. Click Install\n3. Refresh browser (Ctrl+Shift+R)\n\n### Manual\n\n1. Copy `timescale-plotly-card.js` to `config/www/community/timescale-plotly-card/`\n2. Add resource in Home Assistant:\n   - Settings → Dashboards → Resources\n   - Add `/hacsfiles/timescale-plotly-card/timescale-plotly-card.js` as JavaScript Module\n3. Refresh browser (Ctrl+Shift+R)\n\n## Basic Configuration\n\n```yaml\ntype: custom:timescale-plotly-card\nsensor_id: sensor.temperature_woonkamer\ntitle: Temperatuur Woonkamer\n\n# Time selection\nshow_time_selector: true\ndefault_range: 24h\nauto_refresh: 300\n\n# Data\ndownsample: 300\ny_margin: 5\nheight: 400\n\n# Chart styling\nline_color: rgb(75, 192, 192)\nline_width: 2\nfill_color: rgba(75, 192, 192, 0.2)\nunit: °C\n\n# Axes\nxaxis_title: Tijd\nyaxis_title: Temperatuur\ngrid_color: rgba(128,128,128,0.2)\n\n# Modebar\nshow_modebar: true\nmodebar_bg_color: rgba(255,255,255,0.9)\nmodebar_radius: 4px\n```\n\n## Modebar Icons\n\nThe toolbar in the top-right corner provides:\n- 📷 **Download**: Save chart as PNG image\n- 🔍 **Zoom**: Box select to zoom in\n- ➕ **Zoom In**: Zoom in to center\n- ➖ **Zoom Out**: Zoom out from center\n- 🏠 **Reset**: Reset axes to original view\n\n## Troubleshooting\n\n### Card doesn't load\n1. Clear browser cache (Ctrl+Shift+R)\n2. Check browser console for errors\n3. Verify resource is registered in HA\n\n### No data shown\n1. Check `sensor_id` matches entity in TimescaleDatabase\n2. Verify time range has data\n3. Check Home Assistant logs for websocket errors\n\n## Credits\n\n- Built with [Plotly.js](https://plotly.com/javascript/)\n- Integrates with [TimescaleDB](https://www.timescale.com/)\n- For [Home Assistant](https://www.home-assistant.io/)\n\n### Required Options\n\n| Option | Type | Description |\n|--------|------|-------------|\n| `sensor_id` | string | **Required**. Entity ID from TimescaleDB |\n\n### Time Selection\n\n| Option | Type | Default | Description |\n|--------|------|---------|-------------|\n| `show_time_selector` | boolean | `true` | Show time range buttons |\n| `default_range` | string | `24h` | Initial range: `1h`, `2h`, `3h`, `6h`, `12h`, `24h`, `custom` |\n| `auto_refresh` | number | `300` | Auto-refresh interval in seconds (0 = disabled) |\n\n### Data Options\n\n| Option | Type | Default | Description |\n|--------|------|---------|-------------|\n| `downsample` | number | auto | Downsample interval in seconds. Auto: ~80 points |\n| `y_margin` | number | `5` | Y-axis margin above/below data values (bottom margin is 0 when min is between 0 and `y_margin`) |\n| `height` | number | `400` | Chart height in pixels |\n| `nan_as_zero` | boolean | `false` | Treat NaN values as 0 in the series |\n\n### Tooltip \u0026 Status Text\n\n| Option | Type | Default | Description |\n|--------|------|---------|-------------|\n| `tooltip_label_text` | string | friendly name | Label used in tooltip and status text |\n\n### Chart Styling\n\n| Option | Type | Default | Description |\n|--------|------|---------|-------------|\n| `line_color` | string | `rgb(75,192,192)` | Line color |\n| `line_width` | number | `2` | Line thickness |\n| `fill_color` | string | `rgba(75,192,192,0.2)` | Fill color under line |\n| `unit` | string | `''` | Y-axis unit label |\n\n### Layout Options\n\n| Option | Type | Default | Description |\n|--------|------|---------|-------------|\n| `margin_top` | number | `50` | Top margin |\n| `margin_right` | number | `60` | Right margin |\n| `margin_bottom` | number | `40` | Bottom margin |\n| `margin_left` | number | `50` | Left margin |\n\n### Axis Styling\n\n| Option | Type | Default | Description |\n|--------|------|---------|-------------|\n| `xaxis_title` | string | `Time` | X-axis title |\n| `yaxis_title` | string | auto | Y-axis title |\n| `grid_color` | string | rgba | Grid line color |\n| `xaxis_tick_padding` | number | `6` | Space between grid and bottom tick labels |\n| `yaxis_tick_padding` | number | `6` | Space between grid and left tick labels |\n\n### Selector \u0026 Button Styling\n\n| Option | Type | Default | Description |\n|--------|------|---------|-------------|\n| `selector_background_color` | string | card bg | Time selector bar background |\n| `button_background_color` | string | primary bg | Time button background |\n| `button_border_color` | string | divider | Time button border |\n| `button_text_color` | string | primary text | Time button text color |\n| `button_radius` | string | `4px` | Time button border radius |\n| `button_hover_color` | string | secondary bg | Hover background color |\n| `button_hover_text_color` | string | button_text_color | Hover text color |\n| `button_active_color` | string | primary color | Active button background/border |\n| `button_active_text_color` | string | `white` | Active button text color |\n\n### Custom Range Styling\n\n| Option | Type | Default | Description |\n|--------|------|---------|-------------|\n| `custom_range_background_color` | string | card bg | Custom range bar background |\n| `custom_range_border_color` | string | divider | Custom range top border |\n| `custom_range_text_color` | string | primary text | Label text color |\n| `custom_range_label_size` | string | `13px` | Label font size |\n\n### Date Input Styling\n\n| Option | Type | Default | Description |\n|--------|------|---------|-------------|\n| `date_input_background_color` | string | primary bg | Input background |\n| `date_input_border_color` | string | divider | Input border |\n| `date_input_text_color` | string | primary text | Input text color |\n| `date_input_padding` | string | `4px 8px` | Input padding |\n| `date_input_radius` | string | `4px` | Input border radius |\n| `date_input_size` | string | `13px` | Input font size |\n| `date_input_accent_color` | string | primary color | Accent color (icons/selection) |\n| `date_input_scheme` | string | `dark` | Browser popup scheme `dark`/`light` |\n| `date_input_focus_color` | string | rgba | Focus ring color |\n| `date_input_caret_color` | string | input text | Caret color |\n| `date_input_field_background_color` | string | `transparent` | Inner field background |\n| `date_picker_icon_filter` | string | `invert(0.9)` | Picker icon filter |\n| `date_picker_icon_opacity` | string | `0.8` | Picker icon opacity |\n\n### Apply Button Styling\n\n| Option | Type | Default | Description |\n|--------|------|---------|-------------|\n| `apply_button_padding` | string | `6px 16px` | Apply button padding |\n| `apply_button_background_color` | string | primary color | Apply background |\n| `apply_button_border_color` | string | `transparent` | Apply border |\n| `apply_button_text_color` | string | `white` | Apply text color |\n| `apply_button_radius` | string | `4px` | Apply border radius |\n| `apply_button_size` | string | `13px` | Apply font size |\n| `apply_button_hover_color` | string | primary color | Apply hover background |\n| `apply_button_hover_filter` | string | `brightness(1.05)` | Apply hover filter |\n\n### Status Text Styling\n\n| Option | Type | Default | Description |\n|--------|------|---------|-------------|\n| `status_text_color` | string | secondary text | Status text color |\n| `status_text_size` | string | `12px` | Status text size |\n| `status_text_padding` | string | `8px 16px` | Status text padding |\n| `status_text_weight` | string | `normal` | Status text weight |\n\n### Modebar Icon Styling\n\n| Option | Type | Default | Description |\n|--------|------|---------|-------------|\n| `modebar_icon_color` | string | primary text | Modebar icon color |\n| `modebar_icon_hover_color` | string | primary color | Modebar icon hover color |\n| `modebar_icon_active_color` | string | primary color | Modebar icon active color |\n\n### Axis Styling\n\n| Option | Type | Default | Description |\n|--------|------|---------|-------------|\n| `xaxis_title` | string | `Tijd` | X-axis title |\n| `yaxis_title` | string | unit | Y-axis title |\n| `grid_color` | string | `rgba(128,128,128,0.2)` | Grid line color |\n\n### Background Colors\n\n| Option | Type | Default | Description |\n|--------|------|---------|-------------|\n| `paper_bg_color` | string | `rgba(0,0,0,0)` | Outer background |\n| `plot_bg_color` | string | `rgba(0,0,0,0)` | Chart area background |\n| `font_color` | string | `var(--primary-text-color)` | Text color |\n| `hover_bg_color` | string | `rgba(0,0,0,0.8)` | Hover tooltip background |\n\n### Button Styling\n\n| Option | Type | Default | Description |\n|--------|------|---------|-------------|\n| `selector_background_color` | string | `var(--card-background-color)` | Time selector background |\n| `button_background_color` | string | `var(--primary-background-color)` | Button background |\n| `button_border_color` | string | `var(--divider-color)` | Button border color |\n| `button_text_color` | string | `var(--primary-text-color)` | Button text color |\n| `button_active_color` | string | `var(--primary-color)` | Active button color |\n| `button_radius` | string | `4px` | Button border radius |\n\n### Modebar Styling\n\n| Option | Type | Default | Description |\n|--------|------|---------|-------------|\n| `show_modebar` | boolean | `true` | Show Plotly modebar |\n| `modebar_bg_color` | string | `rgba(255,255,255,0.9)` | Modebar background (aliases: `modebar_bgcolor`, `modebar_bg`) |\n| `modebar_radius` | string | `4px` | Modebar border radius |\n\n## Complete Example\n\n```yaml\ntype: custom:timescale-plotly-card\nsensor_id: sensor.temperature_woonkamer\ntitle: Temperatuur Woonkamer\nname: Temperatuur\ndays: 7\ndownsample: 3600  # seconds\nheight: 400\nline_color: rgb(75, 192, 192)\nfill_color: rgba(75, 192, 192, 0.2)\nunit: °C\n```\n\n### Options\n\n| Name | Type | Required | Default | Description |\n|------|------|----------|---------|-------------|\n| `sensor_id` | string | **Yes** | - | Entity ID in TimescaleDB |\n| `title` | string | No | TimescaleDB Data | Card title |\n| `name` | string | No | sensor_id | Series name in legend |\n| `days` | number | No | 7 | Number of days to show |\n| `downsample` | number | No | 3600 | Aggregation interval in seconds |\n| `height` | number | No | 400 | Chart height in pixels |\n| `line_color` | string | No | rgb(75,192,192) | Line color (RGB) |\n| `fill_color` | string | No | rgba(75,192,192,0.2) | Fill color (RGBA) |\n| `unit` | string | No | '' | Y-axis unit label |\n\n## Examples\n\n### Temperature (7 days)\n```yaml\ntype: custom:timescale-plotly-card\nsensor_id: sensor.temperature_woonkamer\ntitle: Temperatuur\ndays: 7\ndownsample: 3600\nunit: °C\nline_color: rgb(255, 99, 132)\n```\n\n### Humidity (3 days, 10-min aggregation)\n```yaml\ntype: custom:timescale-plotly-card\nsensor_id: sensor.humidity_bathroom\ntitle: Luchtvochtigheid\ndays: 3\ndownsample: 600\nunit: '%'\nline_color: rgb(54, 162, 235)\n```\n\n### Power (14 days, hourly)\n```yaml\ntype: custom:timescale-plotly-card\nsensor_id: sensor.power_consumption\ntitle: Energieverbruik\ndays: 14\ndownsample: 3600\nunit: kW\nline_color: rgb(75, 192, 75)\n```\n\n## Support\n\nFor issues and feature requests, please use the [GitHub issue tracker](https://github.com/remmob/timescale-plotly-card/issues).\n\n---\n©2026 Bommer Software | Author: Mischa Bommer\n\n\u003e **Note:** This integration is a work in progress. Features and functionality may change or be incomplete.\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fremmob%2Ftimescale-plotly-card","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fremmob%2Ftimescale-plotly-card","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fremmob%2Ftimescale-plotly-card/lists"}