@kipk/ha-better-history 0.1.3 → 0.1.4

package/README.md

@@ -49,25 +49,32 @@ All properties are camelCase in JS and kebab-case as HTML attributes (for boolea
 
 ### Top-level attributes (HTML)
 
-| Attribute            | Type      | Default     | Description                                                     |
-| -------------------- | --------- | ----------- | --------------------------------------------------------------- |
-| `hours`              | `number`  | `24`        | Time range in hours before `endDate`                            |
-| `show-date-picker`   | `boolean` | `false`     | Show `ha-date-range-picker` above the chart                     |
-| `show-entity-picker` | `boolean` | `false`     | Show entity picker + attribute browser                          |
-| `show-import-button` | `boolean` | `false`     | Show a JSON import button in the tools panel                    |
-| `show-legend`        | `boolean` | `true`      | Legend below the chart                                          |
-| `show-tooltip`       | `boolean` | `true`      | Multi-series tooltip on hover                                   |
-| `width`              | `string`  | `"100%"`    | CSS width of the component wrapper                              |
-| `height`             | `string`  | —           | CSS height; if omitted, computed from graph count               |
-| `line-mode`          | `string`  | `"stair"`   | Global numeric display mode: `"stair"`, `"line"`, or `"column"` |
-| `line-width`         | `string`  | `"2.5"`     | Global SVG stroke width for numeric lines                       |
-| `background-color`   | `string`  | transparent | CSS background color for the component wrapper                  |
-| `graph-title`        | `string`  | —           | Optional title above the chart                                  |
-| `title-font-family`  | `string`  | HA theme    | Optional title font-family override                             |
-| `title-font-size`    | `string`  | HA theme    | Optional title font-size override                               |
-| `title-color`        | `string`  | HA theme    | Optional title color override                                   |
-| `language`           | `string`  | HA locale   | Language code for labels (`"en"`, `"fr"`, …)                    |
-| `tools-open`         | `boolean` | `false`     | Open/close the viewer tools panel from outside                  |
+| Attribute                  | Type      | Default     | Description                                                     |
+| -------------------------- | --------- | ----------- | --------------------------------------------------------------- |
+| `hours`                    | `number`  | `24`        | Time range in hours before `endDate`                            |
+| `show-date-picker`         | `boolean` | `false`     | Show `ha-date-range-picker` above the chart                     |
+| `show-entity-picker`       | `boolean` | `false`     | Show entity picker + attribute browser                          |
+| `show-import-button`       | `boolean` | `false`     | Show a JSON import button in the tools panel                    |
+| `show-export-button`       | `boolean` | `true`      | Show the JSON export button in the tools panel                  |
+| `show-time-range-selector` | `boolean` | `true`      | Show the no-refetch range zoom control in the tools panel       |
+| `show-line-mode-buttons`   | `boolean` | `true`      | Show stair/line/column mode buttons in the tools panel          |
+| `show-legend`              | `boolean` | `true`      | Legend below the chart                                          |
+| `show-tooltip`             | `boolean` | `true`      | Multi-series tooltip on hover                                   |
+| `show-grid`                | `boolean` | `true`      | Show graph grid lines                                           |
+| `show-scale`               | `boolean` | `true`      | Show axis spines, ticks, and X/Y labels                         |
+| `show-controls`            | `boolean` | `true`      | Show the date/entity picker controls bar when enabled           |
+| `width`                    | `string`  | `"100%"`    | CSS width of the component wrapper                              |
+| `height`                   | `string`  | —           | CSS height; if omitted, computed from graph count               |
+| `line-mode`                | `string`  | `"stair"`   | Global numeric display mode: `"stair"`, `"line"`, or `"column"` |
+| `line-width`               | `string`  | `"2.5"`     | Global stroke width for numeric lines                           |
+| `background-color`         | `string`  | transparent | CSS background color for the component wrapper                  |
+| `graph-title`              | `string`  | —           | Optional title above the chart                                  |
+| `title-font-family`        | `string`  | HA theme    | Optional title font-family override                             |
+| `title-font-size`          | `string`  | HA theme    | Optional title font-size override                               |
+| `title-color`              | `string`  | HA theme    | Optional title color override                                   |
+| `language`                 | `string`  | HA locale   | Language code for labels (`"en"`, `"fr"`, …)                    |
+| `debug-performance`        | `boolean` | `false`     | Enable verbose performance logs for profiling                   |
+| `tools-open`               | `boolean` | `false`     | Open/close the viewer tools panel from outside                  |
 
 ### JS-only properties
 
@@ -97,8 +104,13 @@ interface BetterHistoryConfig {
   showDatePicker?: boolean;          // default: false
   showEntityPicker?: boolean;        // default: false
   showImportButton?: boolean;        // default: false
+  showExportButton?: boolean;        // default: true
+  showTimeRangeSelector?: boolean;   // default: true
+  showLineModeButtons?: boolean;     // default: true
   showLegend?: boolean;              // default: true
   showTooltip?: boolean;             // default: true
+  showGrid?: boolean;                // default: true
+  showScale?: boolean;               // default: true
   width?: string;                    // default: "100%"
   height?: string;
   lineMode?: "stair" | "line" | "column"; // default: "stair"
@@ -113,6 +125,7 @@ interface BetterHistoryConfig {
   series?: SeriesConfig[];           // explicit series list
   defaultEntities?: string[];        // shown in entity picker when enabled
   disableClimateOverlay?: boolean;   // default: false
+  debugPerformance?: boolean;        // default: false; verbose perf logs
 
   // Attribute units
   attributeUnits?: AttributeUnitMap; // map attribute dot-paths to display units
@@ -311,9 +324,9 @@ The entity picker lets users browse entity attributes and add/remove series at r
 
 The viewer toolbar appears above the graph when `tools-open` is `true`. It includes:
 
-- a time range selector that zooms inside the already loaded history range without refetching data;
-- a display mode switch for stair, line, and column rendering;
-- a JSON export button;
+- 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`;
+- a display mode switch for stair, line, and column rendering, unless `show-line-mode-buttons` or `config.showLineModeButtons` is `false`;
+- a JSON export button, unless `show-export-button` or `config.showExportButton` is `false`;
 - an optional JSON import button when `show-import-button` or `config.showImportButton` is `true`.
 
 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.

package/dist/data/resolve-config.d.ts

@@ -12,6 +12,8 @@ export interface ResolveConfigOpts {
     showEntityPicker?: boolean;
     showLegend?: boolean;
     showTooltip?: boolean;
+    showGrid?: boolean;
+    showScale?: boolean;
     width?: string;
     height?: string;
     lineMode?: BetterHistoryLineMode;

package/dist/{decorate-DcIY_31L.js → decorate-BpZs5bHP.js}

@@ -798,8 +798,13 @@ var fe = e`
   }
 
   .chart-surface {
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
     position: relative;
     overflow-y: auto;
+    padding-block: 16px;
     flex: 1;
     min-height: 0;
   }
@@ -852,7 +857,7 @@ var fe = e`
 
   .line {
     fill: none;
-    stroke-width: 2.5;
+    stroke-width: var(--better-history-line-width, 2.5);
     stroke-linecap: round;
     stroke-linejoin: round;
     vector-effect: non-scaling-stroke;
@@ -923,10 +928,11 @@ var fe = e`
     display: flex;
     flex-wrap: wrap;
     gap: 6px;
-    margin-top: 6px;
+    margin: 6px calc(40 / 720 * 100%) 0;
     padding: 0 6px 8px 6px;
     font-size: 12px;
     color: var(--better-history-muted-color, var(--secondary-text-color, #888));
+    box-sizing: border-box;
   }
 
   .legend-item {
@@ -1030,8 +1036,8 @@ var fe = e`
     flex-wrap: wrap;
     align-items: center;
     gap: 8px;
-    margin-bottom: 8px;
-    width: 100%;
+    margin: 0 calc(40 / 720 * 100%) 8px;
+    box-sizing: border-box;
   }
 
   .tool-icon-button,
@@ -1062,30 +1068,32 @@ var fe = e`
 
   .tools-panel {
     display: block;
-    margin-bottom: 8px;
+    margin: 0 calc(40 / 720 * 100%) 8px;
     padding: 7px 8px;
     border: 1px solid var(--better-history-border-color, var(--divider-color, #444));
     border-radius: var(--better-history-radius, 8px);
     background: color-mix(in srgb, var(--better-history-bg, var(--card-background-color, #1e1e2e)) 96%, var(--primary-text-color, #fff) 4%);
+    box-sizing: border-box;
   }
 
   .tool-range {
     min-width: 0;
   }
 
-  .tool-range-head,
+  .tool-range-row,
   .tool-actions,
   .range-values {
     display: flex;
     align-items: center;
   }
 
-  .tool-range-head {
-    display: grid;
-    grid-template-columns: minmax(0, 1fr) auto auto;
-    align-items: center;
+  .tool-range-row {
     gap: 8px;
-    margin-bottom: 4px;
+  }
+
+  .tool-range-control {
+    flex: 1 1 auto;
+    min-width: 120px;
   }
 
   .tool-label {
@@ -1179,22 +1187,21 @@ var fe = e`
 
   .range-selection-hit {
     position: absolute;
-    top: 50%;
-    width: max(36px, 8%);
-    height: 22px;
+    left: 2px;
+    right: 2px;
+    top: 0;
+    bottom: 0;
+    min-width: 18px;
     border-radius: 999px;
-    background: color-mix(in srgb, var(--better-history-info-color, var(--info-color, var(--primary-color, #03a9f4))) 8%, transparent);
+    background: transparent;
     cursor: grab;
     pointer-events: auto;
     touch-action: none;
-    transform: translate(-50%, -50%);
     z-index: 1;
   }
 
   .range-selection-hit::before {
-    left: 12px;
-    right: 12px;
-    opacity: 0.42;
+    display: none;
   }
 
   .range-selection-hit[dragging] {
@@ -1277,6 +1284,7 @@ var fe = e`
     height: 30px;
     border: 0;
     border-right: 1px solid var(--better-history-border-color, var(--divider-color, #444));
+    transition: background-color 120ms ease;
   }
 
   .mode-button:last-child {
@@ -1290,6 +1298,16 @@ var fe = e`
     border-radius: var(--better-history-radius, 8px);
     color: var(--better-history-text-color, var(--primary-text-color, #fff));
     font-size: 12px;
+    transition: background-color 120ms ease;
+  }
+
+  .mode-button:hover,
+  .tool-action-button:not(:disabled):hover {
+    background: color-mix(in srgb, var(--primary-color, #03a9f4) 12%, transparent);
+  }
+
+  .tool-reset-button {
+    flex: 0 0 auto;
   }
 
   .tool-action-button:disabled {
@@ -1301,12 +1319,20 @@ var fe = e`
   }
 
   @container (max-width: 360px) {
-    .tool-range-head {
-      grid-template-columns: minmax(0, 1fr) auto;
+    .tool-range-row {
+      flex-wrap: wrap;
+    }
+
+    .tool-range-control {
+      flex: 1 1 0;
+      min-width: 0;
+    }
+
+    .tool-actions {
+      flex: 1 1 100%;
     }
 
     .tool-actions {
-      grid-column: 1 / -1;
       justify-content: flex-end;
     }
   }
@@ -1350,8 +1376,7 @@ var fe = e`
     }
 
     .range-selection-hit {
-      width: max(44px, 12%);
-      height: 30px;
+      min-width: 24px;
     }
 
     .range-slider::-webkit-slider-thumb {

package/dist/define.js

@@ -1,4 +1,4 @@
-import { t as e } from "./ha-better-history-Bf_QcE8w.js";
+import { t as e } from "./ha-better-history-PA3nPDOW.js";
 //#region src/define.ts
 customElements.get("ha-better-history") || customElements.define("ha-better-history", e);
 //#endregion