From 0f82413bc8bcae21ea75abac49db9bfb27f288be Mon Sep 17 00:00:00 2001
From: Yevgeniy <prokopenko.yevgeniy@gmail.com>
Date: Sun, 31 Oct 2021 00:09:50 +0600
Subject: [PATCH] Use import from 'lit' package

---
 package.json |  1 +
 src/main.js  | 24 +++++++++++-------------
 2 files changed, 12 insertions(+), 13 deletions(-)

diff --git a/package.json b/package.json
index 59c3bcd..e835ac5 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
   "author": "Yevgeniy Prokopenko",
   "license": "MIT",
   "dependencies": {
+    "lit": "^2.0.2",
     "chart.js": "^3.5.1",
     "chartjs-plugin-datalabels": "^2.0.0"
   },
diff --git a/src/main.js b/src/main.js
index 23fcbff..25916cb 100644
--- a/src/main.js
+++ b/src/main.js
@@ -5,13 +5,11 @@ import {
   weatherIconsDay,
   weatherIconsNight
 } from './const.js';
-import { Chart, registerables } from 'chart.js';
+import {LitElement, html} from 'lit';
+import {Chart, registerables} from 'chart.js';
 import ChartDataLabels from 'chartjs-plugin-datalabels';
 Chart.register(...registerables, ChartDataLabels);
 
-const LitElement = Object.getPrototypeOf(customElements.get("ha-panel-lovelace"));
-const html = LitElement.prototype.html;
-
 class WeatherChartCard extends LitElement {
 
   static getStubConfig() {
@@ -123,7 +121,7 @@ class WeatherChartCard extends LitElement {
     this.forecastItems = Math.round(card.offsetWidth / 56);
   }
 
-  drawChart({ config, language, weather, forecastItems } = this) {
+  drawChart({config, language, weather, forecastItems} = this) {
     if (!weather || !weather.attributes || !weather.attributes.forecast) {
       return [];
     }
@@ -320,7 +318,7 @@ class WeatherChartCard extends LitElement {
     });
   }
 
-  updateChart({ weather, forecastItems, forecastChart } = this) {
+  updateChart({weather, forecastItems, forecastChart} = this) {
     if (!weather || !weather.attributes || !weather.attributes.forecast) {
       return [];
     }
@@ -348,7 +346,7 @@ class WeatherChartCard extends LitElement {
     }
   }
 
-  render({ config, _hass, weather, forecastItems } = this) {
+  render({config, _hass, weather, forecastItems} = this) {
     if (!config || !_hass) {
       return html``;
     }
@@ -380,7 +378,7 @@ class WeatherChartCard extends LitElement {
           height: ${this.iconSize}px;
         }
         .card {
-          padding-top: ${config.title? '0px' : '16px'};
+          padding-top: ${config.title ? '0px' : '16px'};
           padding-right: 16px;
           padding-bottom: 16px;
           padding-left: 16px;
@@ -456,7 +454,7 @@ class WeatherChartCard extends LitElement {
     `;
   }
 
-  renderMain({ config, sun, weather, temperature } = this) {
+  renderMain({config, sun, weather, temperature} = this) {
     if (config.show_main == false)
       return html``;
     return html`
@@ -483,7 +481,7 @@ class WeatherChartCard extends LitElement {
     `;
   }
 
-  renderAttributes({ config, humidity, pressure, windSpeed, windDirection } = this) {
+  renderAttributes({config, humidity, pressure, windSpeed, windDirection} = this) {
     if (this.unitSpeed === 'm/s') {
       windSpeed = Math.round(windSpeed * 1000 / 3600);
     }
@@ -495,8 +493,8 @@ class WeatherChartCard extends LitElement {
     return html`
       <div class="attributes">
         <div>
-          <ha-icon icon="hass:water-percent"></ha-icon> ${Math.round(humidity)} %<br>
-          <ha-icon icon="hass:gauge"></ha-icon> ${Math.round(pressure)} ${this.ll('units')[this.unitPressure]}
+          <ha-icon icon="hass:water-percent"></ha-icon> ${humidity} %<br>
+          <ha-icon icon="hass:gauge"></ha-icon> ${pressure} ${this.ll('units')[this.unitPressure]}
         </div>
         <div>
           ${this.renderSun()}
@@ -509,7 +507,7 @@ class WeatherChartCard extends LitElement {
     `;
   }
 
-  renderSun({ sun, language } = this) {
+  renderSun({sun, language} = this) {
     if ( sun == undefined)
       return html``;
     return html`