@kipk/ha-better-history 0.1.2 → 0.1.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +42 -24
- package/dist/data/resolve-config.d.ts +2 -0
- package/dist/decorate-BpZs5bHP.js +2353 -0
- package/dist/define.js +1 -1
- package/dist/ha-better-history-PA3nPDOW.js +2370 -0
- package/dist/ha-better-history.d.ts +19 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +3 -2
- package/dist/picker.d.ts +1 -0
- package/dist/picker.js +2 -0
- package/dist/render/chart.d.ts +2 -1
- package/dist/series-picker-element-BVn3IHNz.js +140 -0
- package/dist/types/config.d.ts +9 -0
- package/dist/ui/entity-picker.d.ts +3 -0
- package/dist/ui/series-picker-element.d.ts +38 -0
- package/package.json +8 -1
- package/dist/ha-better-history-BY4eqV1H.js +0 -4410
package/README.md
CHANGED
|
@@ -6,6 +6,9 @@ Standalone web component for Home Assistant history charts. Built with **Lit 3**
|
|
|
6
6
|
|
|
7
7
|
**Status: WIP** — API not yet stable.
|
|
8
8
|
|
|
9
|
+
If this component helps you, you can support development on
|
|
10
|
+
[Buy Me a Coffee](https://buymeacoffee.com/kipk).
|
|
11
|
+
|
|
9
12
|
## Why ha-better-history?
|
|
10
13
|
|
|
11
14
|
`ha-better-history` keeps the familiar Home Assistant history-chart experience, but exposes it as a reusable web component with extra controls for dashboards, dialogs, and custom cards.
|
|
@@ -46,25 +49,32 @@ All properties are camelCase in JS and kebab-case as HTML attributes (for boolea
|
|
|
46
49
|
|
|
47
50
|
### Top-level attributes (HTML)
|
|
48
51
|
|
|
49
|
-
| Attribute
|
|
50
|
-
|
|
|
51
|
-
| `hours`
|
|
52
|
-
| `show-date-picker`
|
|
53
|
-
| `show-entity-picker`
|
|
54
|
-
| `show-import-button`
|
|
55
|
-
| `show-
|
|
56
|
-
| `show-
|
|
57
|
-
| `
|
|
58
|
-
| `
|
|
59
|
-
| `
|
|
60
|
-
| `
|
|
61
|
-
| `
|
|
62
|
-
| `
|
|
63
|
-
| `
|
|
64
|
-
| `
|
|
65
|
-
| `
|
|
66
|
-
| `
|
|
67
|
-
| `
|
|
52
|
+
| Attribute | Type | Default | Description |
|
|
53
|
+
| -------------------------- | --------- | ----------- | --------------------------------------------------------------- |
|
|
54
|
+
| `hours` | `number` | `24` | Time range in hours before `endDate` |
|
|
55
|
+
| `show-date-picker` | `boolean` | `false` | Show `ha-date-range-picker` above the chart |
|
|
56
|
+
| `show-entity-picker` | `boolean` | `false` | Show entity picker + attribute browser |
|
|
57
|
+
| `show-import-button` | `boolean` | `false` | Show a JSON import button in the tools panel |
|
|
58
|
+
| `show-export-button` | `boolean` | `true` | Show the JSON export button in the tools panel |
|
|
59
|
+
| `show-time-range-selector` | `boolean` | `true` | Show the no-refetch range zoom control in the tools panel |
|
|
60
|
+
| `show-line-mode-buttons` | `boolean` | `true` | Show stair/line/column mode buttons in the tools panel |
|
|
61
|
+
| `show-legend` | `boolean` | `true` | Legend below the chart |
|
|
62
|
+
| `show-tooltip` | `boolean` | `true` | Multi-series tooltip on hover |
|
|
63
|
+
| `show-grid` | `boolean` | `true` | Show graph grid lines |
|
|
64
|
+
| `show-scale` | `boolean` | `true` | Show axis spines, ticks, and X/Y labels |
|
|
65
|
+
| `show-controls` | `boolean` | `true` | Show the date/entity picker controls bar when enabled |
|
|
66
|
+
| `width` | `string` | `"100%"` | CSS width of the component wrapper |
|
|
67
|
+
| `height` | `string` | — | CSS height; if omitted, computed from graph count |
|
|
68
|
+
| `line-mode` | `string` | `"stair"` | Global numeric display mode: `"stair"`, `"line"`, or `"column"` |
|
|
69
|
+
| `line-width` | `string` | `"2.5"` | Global stroke width for numeric lines |
|
|
70
|
+
| `background-color` | `string` | transparent | CSS background color for the component wrapper |
|
|
71
|
+
| `graph-title` | `string` | — | Optional title above the chart |
|
|
72
|
+
| `title-font-family` | `string` | HA theme | Optional title font-family override |
|
|
73
|
+
| `title-font-size` | `string` | HA theme | Optional title font-size override |
|
|
74
|
+
| `title-color` | `string` | HA theme | Optional title color override |
|
|
75
|
+
| `language` | `string` | HA locale | Language code for labels (`"en"`, `"fr"`, …) |
|
|
76
|
+
| `debug-performance` | `boolean` | `false` | Enable verbose performance logs for profiling |
|
|
77
|
+
| `tools-open` | `boolean` | `false` | Open/close the viewer tools panel from outside |
|
|
68
78
|
|
|
69
79
|
### JS-only properties
|
|
70
80
|
|
|
@@ -94,8 +104,13 @@ interface BetterHistoryConfig {
|
|
|
94
104
|
showDatePicker?: boolean; // default: false
|
|
95
105
|
showEntityPicker?: boolean; // default: false
|
|
96
106
|
showImportButton?: boolean; // default: false
|
|
107
|
+
showExportButton?: boolean; // default: true
|
|
108
|
+
showTimeRangeSelector?: boolean; // default: true
|
|
109
|
+
showLineModeButtons?: boolean; // default: true
|
|
97
110
|
showLegend?: boolean; // default: true
|
|
98
111
|
showTooltip?: boolean; // default: true
|
|
112
|
+
showGrid?: boolean; // default: true
|
|
113
|
+
showScale?: boolean; // default: true
|
|
99
114
|
width?: string; // default: "100%"
|
|
100
115
|
height?: string;
|
|
101
116
|
lineMode?: "stair" | "line" | "column"; // default: "stair"
|
|
@@ -110,6 +125,7 @@ interface BetterHistoryConfig {
|
|
|
110
125
|
series?: SeriesConfig[]; // explicit series list
|
|
111
126
|
defaultEntities?: string[]; // shown in entity picker when enabled
|
|
112
127
|
disableClimateOverlay?: boolean; // default: false
|
|
128
|
+
debugPerformance?: boolean; // default: false; verbose perf logs
|
|
113
129
|
|
|
114
130
|
// Attribute units
|
|
115
131
|
attributeUnits?: AttributeUnitMap; // map attribute dot-paths to display units
|
|
@@ -124,6 +140,7 @@ Each series describes what to plot and how it should be displayed.
|
|
|
124
140
|
interface SeriesConfig {
|
|
125
141
|
entity: string; // Required: entity_id (e.g. "climate.living")
|
|
126
142
|
attribute?: string | string[]; // Dotted path or array; omit = entity.state
|
|
143
|
+
forced?: boolean; // default: true; false = removable from picker chips
|
|
127
144
|
label?: string; // Legend label; default = friendly_name or attribute path
|
|
128
145
|
color?: string; // CSS color; default = automatic palette
|
|
129
146
|
unit?: string; // Override unit (for axis grouping and label)
|
|
@@ -294,21 +311,22 @@ chart.config = {
|
|
|
294
311
|
chart.config = {
|
|
295
312
|
defaultEntities: ["climate.living", "sensor.outdoor_temp"],
|
|
296
313
|
series: [
|
|
297
|
-
{ entity: "climate.living", attribute: "current_temperature", label: "Indoor" }
|
|
314
|
+
{ entity: "climate.living", attribute: "current_temperature", label: "Indoor" },
|
|
315
|
+
{ entity: "sensor.grid_power", label: "Grid power", forced: false }
|
|
298
316
|
]
|
|
299
317
|
};
|
|
300
318
|
</script>
|
|
301
319
|
```
|
|
302
320
|
|
|
303
|
-
The entity picker lets users browse entity attributes and add/remove series at runtime. The attribute browser includes a local search field that finds top-level attributes, nested dotted paths, and primitive values inside attribute dictionaries. Non-default series are removable via chip buttons. Selected source chips can be dragged to reorder user-added graphs without refetching history; the chip order previews while dragging and is restored if the drag is cancelled.
|
|
321
|
+
The entity picker lets users browse entity attributes and add/remove series at runtime. The attribute browser includes a local search field that finds top-level attributes, nested dotted paths, and primitive values inside attribute dictionaries. Non-default series are removable via chip buttons. Configured series are fixed by default; set `forced: false` on a `SeriesConfig` to show it as a removable chip in the graph picker. Selected source chips can be dragged to reorder user-added graphs without refetching history; the chip order previews while dragging and is restored if the drag is cancelled.
|
|
304
322
|
|
|
305
323
|
### Viewer tools
|
|
306
324
|
|
|
307
325
|
The viewer toolbar appears above the graph when `tools-open` is `true`. It includes:
|
|
308
326
|
|
|
309
|
-
- a time range selector that zooms inside the already loaded history range without refetching data
|
|
310
|
-
- a display mode switch for stair, line, and column rendering
|
|
311
|
-
- a JSON export button
|
|
327
|
+
- a time range selector that zooms inside the already loaded history range without refetching data, unless `show-time-range-selector` or `config.showTimeRangeSelector` is `false`;
|
|
328
|
+
- a display mode switch for stair, line, and column rendering, unless `show-line-mode-buttons` or `config.showLineModeButtons` is `false`;
|
|
329
|
+
- a JSON export button, unless `show-export-button` or `config.showExportButton` is `false`;
|
|
312
330
|
- an optional JSON import button when `show-import-button` or `config.showImportButton` is `true`.
|
|
313
331
|
|
|
314
332
|
Drag the highlighted range selection to pan the zoomed graph through the loaded period while keeping the same visible duration. A minimum drag target stays available even when the visible range is tiny, and the minimum zoom span adapts to the loaded range.
|