Skip to content

Commit

Permalink
added: tooltip addition text always on setting
Browse files Browse the repository at this point in the history 
fixed: some usability bugs
refactoring: refactoring of some code
  • Loading branch information
@mentalilll
mentalilll committed Aug 7, 2024
1 parent c294972 commit f2a7e48
Show file tree
Hide file tree
Showing 8 changed files with 118 additions and 96 deletions.
49 changes: 25 additions & 24 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -142,30 +142,31 @@ calculateVPD: |2-

## Configuration Parameters

| Name | Type | Required | Default | Description |
|-------------------------|----------------|--------------|-----------------------------------------|-----------------------------------------------------------------------------------------------------|
| type | string | **required** | | Must be `custom:ha-vpd-chart`. |
| air_text | string | optional | `Air` | The text used for temperature readings. Default is "Air". |
| rh_text | string | optional | `RH` | The text used for humidity readings. Default is "RH". |
| kpa_text | string | optional | `kPa` | The text used for kPa readings. Default is "kPa". |
| min_temperature | number | optional | `5` | Minimum temperature in the chart. Default is 5. |
| min_humidity | number | optional | `10` | Minimum humidity in the chart. Default is 10. |
| max_temperature | number | optional | `35` | Maximum temperature in the chart. Default is 35. |
| max_humidity | number | optional | `90` | Maximum humidity in the chart. Default is 90. |
| min_height | number | optional | `200` | Minimum height of the chart as px. Default is 200. |
| leaf_temperature_offset | number\|string | optional | `2`\|`input_number.leaf_offset_example` | Sets the Temperature Offset of the Leaf | |
| sensors | list | **required** | | A list of sensors with their temperature and humidity entity IDs, and an optional name for display. |
| vpd_phases | list | optional | See description | A list of VPD phases and their classes for visual representation. See below for defaults. |
| enable_tooltip | boolean | optional | `true` | Tooltip enabled by default. |
| is_bar_view | boolean | optional | `true` | Enable Bar view of this chart for fast information of sensors |
| enable_axes | boolean | optional | `true` | Enable Axes on the Chart |
| enable_ghostmap | boolean | optional | `true` | Enable Ghostmap on the Chart |
| enable_triangle | boolean | optional | `true` | Enable Triangle instead of Circle for tooltip marker |
| enable_crosshair | boolean | optional | `true` | Enable MouseHover Crosshair |
| enable_fahrenheit | boolean | optional | `false` | Enable Fahrenheit instead of Celsius |
| enable_zoom | boolean | optional | `true` | Enable zoom function for chart |
| enable_legend | boolean | optional | `true` | Enable Legend function for chart |
| calculateVPD | string | optional | See description | Custom function to calculate VPD. |
| Name | Type | Required | Default | Description |
|---------------------------------|----------------|--------------|-----------------------------------------|-----------------------------------------------------------------------------------------------------|
| type | string | **required** | | Must be `custom:ha-vpd-chart`. |
| air_text | string | optional | `Air` | The text used for temperature readings. Default is "Air". |
| rh_text | string | optional | `RH` | The text used for humidity readings. Default is "RH". |
| kpa_text | string | optional | `kPa` | The text used for kPa readings. Default is "kPa". |
| min_temperature | number | optional | `5` | Minimum temperature in the chart. Default is 5. |
| min_humidity | number | optional | `10` | Minimum humidity in the chart. Default is 10. |
| max_temperature | number | optional | `35` | Maximum temperature in the chart. Default is 35. |
| max_humidity | number | optional | `90` | Maximum humidity in the chart. Default is 90. |
| min_height | number | optional | `200` | Minimum height of the chart as px. Default is 200. |
| leaf_temperature_offset | number\|string | optional | `2`\|`input_number.leaf_offset_example` | Sets the Temperature Offset of the Leaf | |
| sensors | list | **required** | | A list of sensors with their temperature and humidity entity IDs, and an optional name for display. |
| vpd_phases | list | optional | See description | A list of VPD phases and their classes for visual representation. See below for defaults. |
| enable_tooltip | boolean | optional | `true` | Tooltip enabled by default. |
| is_bar_view | boolean | optional | `true` | Enable Bar view of this chart for fast information of sensors |
| enable_axes | boolean | optional | `true` | Enable Axes on the Chart |
| enable_ghostmap | boolean | optional | `true` | Enable Ghostmap on the Chart |
| enable_triangle | boolean | optional | `true` | Enable Triangle instead of Circle for tooltip marker |
| enable_crosshair | boolean | optional | `true` | Enable MouseHover Crosshair |
| enable_fahrenheit | boolean | optional | `false` | Enable Fahrenheit instead of Celsius |
| enable_zoom | boolean | optional | `true` | Enable zoom function for chart |
| enable_show_always_informations | boolean | optional | `true` | Enable show always tooltip informations for chart |
| enable_legend | boolean | optional | `true` | Enable Legend function for chart |
| calculateVPD | string | optional | See description | Custom function to calculate VPD. |

**Default `vpd_phases` Configuration:**

Expand Down
Binary file modified assets/bar_view.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified assets/bar_view_light.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions dist/chart.css
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
ha-card {
overflow: hidden;
height: 100%;
}

div.vpd-chart-view, div.vpd-chart-view .vpd-card-container {
Expand Down
11 changes: 10 additions & 1 deletion dist/chart.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -400,6 +400,7 @@ export const chart = {
}

let tooltip = null;

if (this.enable_tooltip) {
tooltip = this.querySelector(`.custom-tooltip[data-index="${index}"]`) || document.createElement('div');
tooltip.style.bottom = `${100 - percentageTemperature}%`;
Expand All @@ -408,6 +409,9 @@ export const chart = {

tooltip.setAttribute('data-index', index.toString());

if (this.enable_show_always_informations) {
tooltip.querySelector('.tooltipAdditionalInformations').style.display = 'inline';
}
let kpaText = tooltip.querySelector('.kpaText_' + index);
let rhText = tooltip.querySelector('.sensorHumidity_' + index);
let temperatureText = tooltip.querySelector('.sensorAir_' + index);
Expand Down Expand Up @@ -502,7 +506,12 @@ export const chart = {
this.querySelectorAll('.custom-tooltip').forEach(tooltip => {
tooltip.style.opacity = '1';
tooltip.className = tooltip.className.split(' ').filter(c => c !== 'active').join(' ');
this.querySelectorAll('.tooltipAdditionalInformations').forEach(tooltip => tooltip.style.display = 'none');
if (this.enable_show_always_informations) {
this.querySelectorAll('.tooltipAdditionalInformations').forEach(tooltip => tooltip.style.display = 'inline');
} else {
this.querySelectorAll('.tooltipAdditionalInformations').forEach(tooltip => tooltip.style.display = 'none');
}

this.positionTooltip(tooltip, parseFloat(tooltip.style.left));
});
this.querySelectorAll(`.history-circle-${index}`).forEach(circle => circle.style.display = 'none');
Expand Down
Loading

0 comments on commit f2a7e48

Please sign in to comment.