Add dynamic horizon chart type (#45)

This pull request adds a new dynamic horizon chart type to the project. It includes the following changes: - Added a new dynamic horizon chart component called MoonHorizonDynamic. - Updated npm dependencies and optimized the MoonHorizonDynamic component. - Added a new helper function hexToRgba in the utils/helpers.ts file. These changes enhance the project by introducing a new chart type and improving the performance of the existing components.
ngocjohn · Dec 3, 2024 · 72febda · 72febda
1 parent 73a8339
commit 72febda
Show file tree

Hide file tree

Showing 27 changed files with 1,333 additions and 187 deletions.
diff --git a/package.json b/package.json
@@ -27,23 +27,26 @@
     "chart.js": "^4.4.5",
     "custom-card-helpers": "^1.7.2",
     "lit": "^3.1.4",
-    "swiper": "^11.1.14"
+    "luxon": "^3.5.0",
+    "node-vibrant": "^3.2.1-alpha.1",
+    "swiper": "^11.1.14",
+    "tinycolor2": "^1.6.0"
   },
   "devDependencies": {
+    "@babel/plugin-proposal-decorators": "^7.25.9",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-commonjs": "^28.0.1",
     "@rollup/plugin-image": "^3.0.3",
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^15.3.0",
     "@rollup/plugin-replace": "^5.0.7",
     "@rollup/plugin-terser": "^0.4.4",
-    "@types/node": "^22.9.0",
+    "@types/luxon": "^3.4.2",
+    "@types/node": "^22.10.1",
     "@typescript-eslint/eslint-plugin": "^7.15.0",
     "@typescript-eslint/parser": "^7.15.0",
     "eslint": "^8.9.0",
-    "eslint-config-airbnb-base": "^15.0.0",
     "eslint-plugin-perfectionist": "^3.9.1",
-    "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-unused-imports": "^4.1.4",
     "json5": "^2.2.3",
     "postcss-preset-env": "^9.5.12",
@@ -65,4 +68,4 @@
     "update-lang": "node scripts/update-languages",
     "import-lang": "node scripts/generate-lang-imports.js"
   }
-}
+}
diff --git a/rollup.config.js b/rollup.config.js
@@ -88,6 +88,7 @@ export default [
         banner: custombanner,
       },
     ],
+    external: ['Vibrant'],
     plugins: [...plugins],
     moduleContext: (id) => {
       const thisAsWindowForModules = [
@@ -98,6 +99,14 @@ export default [
         return 'window';
       }
     },
+    onwarn: (warning, warn) => {
+      // Ignore circular dependency warnings
+      if (warning.code === 'CIRCULAR_DEPENDENCY') {
+        return;
+      }
+      // Use default warning behavior for everything else
+      warn(warning);
+    },
     watch: {
       exclude: 'node_modules/**',
       buildDelay: 1000,

diff --git a/src/components/moon-data.ts b/src/components/moon-data.ts
@@ -1,5 +1,5 @@
-import { LitElement, html, TemplateResult, CSSResultGroup, PropertyValues, unsafeCSS } from 'lit';
-import { customElement, state } from 'lit/decorators.js';
+import { LitElement, html, TemplateResult, CSSResultGroup, PropertyValues, unsafeCSS, css } from 'lit';
+import { customElement, state, property } from 'lit/decorators.js';
 import Swiper from 'swiper';
 import { Pagination } from 'swiper/modules';
 import swiperStyleCss from 'swiper/swiper-bundle.css';
@@ -10,41 +10,28 @@ import { Moon } from '../utils/moon';
 
 @customElement('lunar-base-data')
 export class LunarBaseData extends LitElement {
-  @state() moon!: Moon;
+  @property({ attribute: false }) moon!: Moon;
+  @property({ attribute: false }) moonData!: MoonData;
   @state() swiper: Swiper | null = null;
-  @state() moonData?: MoonData;
 
   static get styles(): CSSResultGroup {
-    return [mainStyles, unsafeCSS(swiperStyleCss)];
+    return [
+      mainStyles,
+      unsafeCSS(swiperStyleCss),
+      css`
+        .moon-phase-name {
+          font-size: 1.5rem;
+          padding: 0.5rem;
+        }
+      `,
+    ];
   }
 
   protected async firstUpdated(changedProps: PropertyValues): Promise<void> {
     super.firstUpdated(changedProps);
-
-    if (this.moon) {
-      this._validateMoonData();
-    }
     this.initSwiper();
   }
 
-  private _validateMoonData() {
-    const replacer = (key: string, value: any) => {
-      if (['direction', 'position'].includes(key)) {
-        return undefined;
-      }
-      return value;
-    };
-    const moonData = JSON.parse(JSON.stringify(this.moon.moonData, replacer));
-    this.moonData = moonData;
-
-  }
-
-  protected shouldUpdate(_changedProperties: PropertyValues): boolean {
-    if (_changedProperties.has('moon') && this.moon) {
-      return true;
-    }
-    return true;
-  }
   private initSwiper(): void {
     const swiperCon = this.shadowRoot?.querySelector('.swiper-container') as HTMLElement;
     if (!swiperCon) return;
@@ -75,21 +62,33 @@ export class LunarBaseData extends LitElement {
     const dataContainer = Object.keys(chunkedData).map((key) => {
       return html`
         <div class="swiper-slide">
-          <div class="moon-data">${Object.keys(chunkedData[key]).map((key) => this.renderItem(key))}</div>
+          <div class="moon-data">
+            ${Object.keys(chunkedData[key]).map((key) => {
+              return html`${this.renderItem(key)}`;
+            })}
+          </div>
         </div>
       `;
     });
-
+    const phaseName = this._renderPhaseName();
     return html`
-      <section id="swiper">
-        <div class="swiper-container">
-          <div class="swiper-wrapper">${dataContainer}</div>
-          <div class="swiper-pagination"></div>
-        </div>
-      </section>
+      <div id="moon-data-container">
+        ${phaseName}
+        <section id="swiper">
+          <div class="swiper-container">
+            <div class="swiper-wrapper">${dataContainer}</div>
+            <div class="swiper-pagination"></div>
+          </div>
+        </section>
+      </div>
     `;
   }
 
+  private _renderPhaseName(): TemplateResult {
+    if (!this.moon.config.hide_header) return html``;
+    return html` <div class="moon-phase-name">${this.moon.phaseName}</div> `;
+  }
+
   private _chunkObject = (obj: MoonData, size: number): MoonDataItem => {
     const keys = Object.keys(obj);
 
@@ -107,7 +106,7 @@ export class LunarBaseData extends LitElement {
   };
 
   private renderItem(key: string): TemplateResult {
-    const { label, value, secondValue } = this.moon.moonData[key];
+    const { label, value, secondValue } = this.moonData[key];
     return html`
       <div class="moon-data-item">
         <span class="label">${label}</span>