Merge pull request #153 from mlamberts78/develop

Develop
mlamberts78 · Mar 29, 2024 · 930a68b · 930a68b
2 parents ed625c8 + d4068bd
commit 930a68b
Show file tree

Hide file tree

Showing 5 changed files with 138 additions and 5 deletions.
diff --git a/README.md b/README.md
@@ -56,6 +56,7 @@ HACS is a third party community store and is not included in Home Assistant out
 | show_wind_gust_speed  | boolean | false                    | Show or hide wind gust speed on the card.                                                          |
 | show_visibility       | boolean | false                    | Show or hide visibility on the card.                                                               |
 | show_description      | boolean | false                    | Show or hide the weather description on the card.                                                  |
+| show_last_changed     | boolean | false                    | Show or hide when last data changed on the card.                                                   |
 | use_12hour_format     | boolean | false                    | Display time in 12-hour format (AM/PM) instead of 24-hour format.                                  |
 | icons                 | string  | none                     | Path to the location of custom icons in svg format, for example `/local/weather-icons/`.           |
 | animated_icons        | boolean | false                    | Enable the use of animated icons                                                                   |
@@ -88,6 +89,7 @@ HACS is a third party community store and is not included in Home Assistant out
 | style                | string  | style1                   | Change chart style, options: 'style1' or 'style2'                                                  |
 | type                 | string  | daily                    | Show daily or hourly forecast if available, options: 'daily' or 'hourly'                           |
 | number_of_forecasts  | number  | 0                        | Overrides the number of forecasts to display. Set to "0" for automatic mode.                       |
+| disable_animation    | boolean | false                    | Disable the chart animation.                                                                       |
 
 ##### Units of measurement
 

diff --git a/dist/weather-chart-card.js b/dist/weather-chart-card.js
@@ -17,8 +17,8 @@ const locale = {
       'in': 'in'
     },
     'cardinalDirections': [
-      'N', 'N-NE', 'NE', 'E-NE', 'E', 'E-SE', 'SE', 'S-SE',
-      'S', 'S-SW', 'SW', 'W-SW', 'W', 'W-NW', 'NW', 'N-NW', 'N'
+      'S', 'S-SV', 'SV', 'V-SV', 'V', 'V-JV', 'JV', 'J-JV',
+      'J', 'J-JZ', 'JZ', 'Z-JZ', 'Z', 'Z-SZ', 'SZ', 'S-SZ', 'S'
     ],
     'clear-night': 'Jasná noc',
     'cloudy': 'Zataženo',
@@ -1332,6 +1332,15 @@ class WeatherChartCardEditor extends s {
           </label>
         ` : ''}
       </div>
+          <div class="switch-container">
+            <ha-switch
+              @change="${(e) => this._valueChanged(e, 'show_last_changed')}"
+              .checked="${this._config.show_last_changed !== false}"
+            ></ha-switch>
+            <label class="switch-label">
+              Show when last data changed
+            </label>
+          </div>
           <div class="switch-container">
             <ha-switch
               @change="${(e) => this._valueChanged(e, 'use_12hour_format')}"
@@ -1509,6 +1518,15 @@ class WeatherChartCardEditor extends s {
               Rounding Temperatures
             </label>
           </div>
+          <div class="switch-container">
+            <ha-switch
+              @change="${(e) => this._valueChanged(e, 'forecast.disable_animation')}"
+              .checked="${forecastConfig.disable_animation !== false}"
+            ></ha-switch>
+            <label class="switch-label">
+              Disable Chart Animation
+            </label>
+          </div>
 	  <div class="textfield-container">
           <ha-select
             naturalMenuWidth
@@ -17764,6 +17782,7 @@ static getStubConfig(hass, unusedEntities, allEntities) {
     show_dew_point: false,
     show_wind_gust_speed: false,
     show_visibility: false,
+    show_last_changed: false,
     use_12hour_format: false,
     icons_size: 25,
     animated_icons: false,
@@ -17779,6 +17798,7 @@ static getStubConfig(hass, unusedEntities, allEntities) {
       round_temp: false,
       type: 'daily',
       number_of_forecasts: '0', 
+      disable_animation: false, 
     },
   };
 }
@@ -17813,6 +17833,7 @@ setConfig(config) {
     show_dew_point: false,
     show_wind_gust_speed: false,
     show_visibility: false,
+    show_last_changed: false,
     show_description: false,
     ...config,
     forecast: {
@@ -18323,6 +18344,7 @@ drawChart({ config, language, weather, forecastItems } = this) {
     },
     options: {
       maintainAspectRatio: false,
+      animation: config.forecast.disable_animation === true ? { duration: 0 } : {},
       layout: {
         padding: {
           bottom: 10,
@@ -18527,7 +18549,7 @@ updateChart({ config, language, weather, forecastItems } = this) {
         .card {
           padding-top: ${config.title ? '0px' : '16px'};
           padding-right: 16px;
-          padding-bottom: 16px;
+          padding-bottom: ${config.show_last_changed === true ? '2px' : '16px'};
           padding-left: 16px;
         }
         .main {
@@ -18626,6 +18648,12 @@ updateChart({ config, language, weather, forecastItems } = this) {
           margin-top: 5px;
           font-weight: 400;
         }
+        .updated {
+          font-size: 13px;
+          align-items: right;
+          font-weight: 300;
+          margin-bottom: 1px;
+        }
       </style>
 
       <ha-card header="${config.title}">
@@ -18637,6 +18665,7 @@ updateChart({ config, language, weather, forecastItems } = this) {
           </div>
           ${this.renderForecastConditionIcons()}
           ${this.renderWind()}
+          ${this.renderLastUpdated()}
         </div>
       </ha-card>
     `;
@@ -18998,6 +19027,42 @@ renderWind({ config, weather, windSpeed, windDirection, forecastItems } = this)
   `;
 }
 
+renderLastUpdated() {
+  const lastUpdatedString = this.weather.last_changed;
+  const lastUpdatedTimestamp = new Date(lastUpdatedString).getTime();
+  const currentTimestamp = Date.now();
+  const timeDifference = currentTimestamp - lastUpdatedTimestamp;
+
+  const minutesAgo = Math.floor(timeDifference / (1000 * 60));
+  const hoursAgo = Math.floor(minutesAgo / 60);
+
+  const locale = this.language;
+
+  const formatter = new Intl.RelativeTimeFormat(locale, { numeric: 'auto' });
+
+  let formattedLastUpdated;
+
+  if (hoursAgo > 0) {
+    formattedLastUpdated = formatter.format(-hoursAgo, 'hour');
+  } else {
+    formattedLastUpdated = formatter.format(-minutesAgo, 'minute');
+  }
+
+  const showLastUpdated = this.config.show_last_changed == true;
+
+  if (!showLastUpdated) {
+    return x``;
+  }
+
+  return x`
+    <div class="updated">
+      <div>
+        ${formattedLastUpdated}
+      </div>
+    </div>
+  `;
+}
+
   _fire(type, detail, options) {
     const node = this.shadowRoot;
     options = options || {};

diff --git a/package.json b/package.json
@@ -17,7 +17,8 @@
   "dependencies": {
     "chart.js": "^4.4.1",
     "chartjs-plugin-datalabels": "^2.2.0",
-    "lit": "^2.8.0"
+    "lit": "^2.8.0",
+    "relative-time": "^1.0.0"
   },
   "devDependencies": {
     "eslint": "^8.56.0",

diff --git a/src/main.js b/src/main.js
@@ -43,6 +43,7 @@ static getStubConfig(hass, unusedEntities, allEntities) {
     show_dew_point: false,
     show_wind_gust_speed: false,
     show_visibility: false,
+    show_last_changed: false,
     use_12hour_format: false,
     icons_size: 25,
     animated_icons: false,
@@ -58,6 +59,7 @@ static getStubConfig(hass, unusedEntities, allEntities) {
       round_temp: false,
       type: 'daily',
       number_of_forecasts: '0', 
+      disable_animation: false, 
     },
   };
 }
@@ -92,6 +94,7 @@ setConfig(config) {
     show_dew_point: false,
     show_wind_gust_speed: false,
     show_visibility: false,
+    show_last_changed: false,
     show_description: false,
     ...config,
     forecast: {
@@ -602,6 +605,7 @@ drawChart({ config, language, weather, forecastItems } = this) {
     },
     options: {
       maintainAspectRatio: false,
+      animation: config.forecast.disable_animation === true ? { duration: 0 } : {},
       layout: {
         padding: {
           bottom: 10,
@@ -806,7 +810,7 @@ updateChart({ config, language, weather, forecastItems } = this) {
         .card {
           padding-top: ${config.title ? '0px' : '16px'};
           padding-right: 16px;
-          padding-bottom: 16px;
+          padding-bottom: ${config.show_last_changed === true ? '2px' : '16px'};
           padding-left: 16px;
         }
         .main {
@@ -905,6 +909,12 @@ updateChart({ config, language, weather, forecastItems } = this) {
           margin-top: 5px;
           font-weight: 400;
         }
+        .updated {
+          font-size: 13px;
+          align-items: right;
+          font-weight: 300;
+          margin-bottom: 1px;
+        }
       </style>
 
       <ha-card header="${config.title}">
@@ -916,6 +926,7 @@ updateChart({ config, language, weather, forecastItems } = this) {
           </div>
           ${this.renderForecastConditionIcons()}
           ${this.renderWind()}
+          ${this.renderLastUpdated()}
         </div>
       </ha-card>
     `;
@@ -1277,6 +1288,42 @@ renderWind({ config, weather, windSpeed, windDirection, forecastItems } = this)
   `;
 }
 
+renderLastUpdated() {
+  const lastUpdatedString = this.weather.last_changed;
+  const lastUpdatedTimestamp = new Date(lastUpdatedString).getTime();
+  const currentTimestamp = Date.now();
+  const timeDifference = currentTimestamp - lastUpdatedTimestamp;
+
+  const minutesAgo = Math.floor(timeDifference / (1000 * 60));
+  const hoursAgo = Math.floor(minutesAgo / 60);
+
+  const locale = this.language;
+
+  const formatter = new Intl.RelativeTimeFormat(locale, { numeric: 'auto' });
+
+  let formattedLastUpdated;
+
+  if (hoursAgo > 0) {
+    formattedLastUpdated = formatter.format(-hoursAgo, 'hour');
+  } else {
+    formattedLastUpdated = formatter.format(-minutesAgo, 'minute');
+  }
+
+  const showLastUpdated = this.config.show_last_changed == true;
+
+  if (!showLastUpdated) {
+    return html``;
+  }
+
+  return html`
+    <div class="updated">
+      <div>
+        ${formattedLastUpdated}
+      </div>
+    </div>
+  `;
+}
+
   _fire(type, detail, options) {
     const node = this.shadowRoot;
     options = options || {};

diff --git a/src/weather-chart-card-editor.js b/src/weather-chart-card-editor.js
@@ -501,6 +501,15 @@ class WeatherChartCardEditor extends LitElement {
           </label>
         ` : ''}
       </div>
+          <div class="switch-container">
+            <ha-switch
+              @change="${(e) => this._valueChanged(e, 'show_last_changed')}"
+              .checked="${this._config.show_last_changed !== false}"
+            ></ha-switch>
+            <label class="switch-label">
+              Show when last data changed
+            </label>
+          </div>
           <div class="switch-container">
             <ha-switch
               @change="${(e) => this._valueChanged(e, 'use_12hour_format')}"
@@ -678,6 +687,15 @@ class WeatherChartCardEditor extends LitElement {
               Rounding Temperatures
             </label>
           </div>
+          <div class="switch-container">
+            <ha-switch
+              @change="${(e) => this._valueChanged(e, 'forecast.disable_animation')}"
+              .checked="${forecastConfig.disable_animation !== false}"
+            ></ha-switch>
+            <label class="switch-label">
+              Disable Chart Animation
+            </label>
+          </div>
 	  <div class="textfield-container">
           <ha-select
             naturalMenuWidth