refactor: Improve MoonHorizon chart layout and responsiveness

ngocjohn · Dec 6, 2024 · f398435 · f398435
1 parent 2a19f84
commit f398435
Show file tree

Hide file tree

Showing 5 changed files with 88 additions and 89 deletions.
diff --git a/src/components/moon-data.ts b/src/components/moon-data.ts
@@ -16,18 +16,50 @@ export class LunarBaseData extends LitElement {
 
   static get styles(): CSSResultGroup {
     return [
-      mainStyles,
-      unsafeCSS(swiperStyleCss),
       css`
-        #moon-data-container {
-          padding-inline: 12px;
+        section {
+          display: block;
+          width: 100%;
+          height: auto;
+          overflow: hidden;
         }
 
+        .swiper-container {
+          width: 100%;
+          height: 100%;
+          display: block;
+          backdrop-filter: blur(4px);
+        }
+        .swiper-wrapper {
+          width: 100%;
+          height: 100%;
+        }
+        .swiper-slide {
+          display: block;
+          width: fit-content;
+        }
+
+        .swiper-pagination {
+          position: relative !important;
+        }
+
+        .swiper-pagination-bullet {
+          background-color: var(--swiper-theme-color);
+          transition: all 0.3s ease-in-out !important;
+        }
+
+        .swiper-pagination-bullet-active {
+          width: 12px !important;
+          border-radius: 0.5rem !important;
+          opacity: 0.7;
+        }
         .moon-phase-name {
           font-size: 1.5rem;
-          padding: 0.5rem;
+          padding-block: 0.5rem;
         }
       `,
+      mainStyles,
+      unsafeCSS(swiperStyleCss),
     ];
   }
 

diff --git a/src/components/moon-horizon-dynamic.ts b/src/components/moon-horizon-dynamic.ts
@@ -23,15 +23,14 @@ export class MoonHorizonDynamic extends LitElement {
   @property({ attribute: false }) moon!: Moon;
   @property({ attribute: false }) card!: LunarPhaseCard;
   @property({ type: Number }) cardWidth: number = 0;
-  @property({ type: Number }) cardHeight: number = 0;
 
   @state() public _midnightColor: Record<string, string> = {};
 
   @state() dynamicChart!: Chart;
 
   protected async firstUpdated(): Promise<void> {
-    await new Promise((resolve) => setTimeout(resolve, 0));
     await this.extractColorData();
+    await new Promise((resolve) => setTimeout(resolve, 0));
     this.initChart();
   }
 
@@ -46,14 +45,20 @@ export class MoonHorizonDynamic extends LitElement {
   }
 
   protected updated(_changedProperties: PropertyValues): void {
-    if (_changedProperties.has('cardWidth')) {
-      const newHeight = this.cardWidth / 2;
+    if (!this.card.config || !this.moon) return;
+    if (_changedProperties.has('cardWidth') && this.cardWidth > 0) {
       if (this.dynamicChart) {
-        this.dynamicChart.resize(this.cardWidth, newHeight);
+        this.dynamicChart.resize(this.cardWidth, this.cardHeight);
       }
     }
   }
 
+  get cardHeight(): number {
+    let height = this.cardWidth * 0.5;
+    height = this.card.config.hide_header ? height : height - 48;
+    return height;
+  }
+
   static get styles(): CSSResultGroup {
     return [
       styles,
@@ -119,10 +124,10 @@ export class MoonHorizonDynamic extends LitElement {
   }
 
   get chartPlugins(): Plugin[] {
+    const expandChartArea = this._expandChartArea();
     const nowPosition = this._nowPosition();
     const midnightPositon = this._midnightPosition();
     const timeMarkers = this._timesMarkersPlugin();
-    const expandChartArea = this._expandChartArea();
     return [nowPosition, midnightPositon, timeMarkers, expandChartArea];
   }
 
@@ -180,7 +185,7 @@ export class MoonHorizonDynamic extends LitElement {
     return html`
       <div id="horizon-dynamic-chart">
         <div id="blur-overlay"></div>
-        <canvas id="dynamic-chart" width="${this.cardWidth}"></canvas>
+        <canvas id="dynamic-chart" width="${this.cardWidth}" height="${this.cardHeight}"></canvas>
       </div>
     `;
   }
@@ -454,11 +459,13 @@ export class MoonHorizonDynamic extends LitElement {
     return {
       id: 'midnightLine',
       beforeDraw: (chart: Chart) => {
-        const {
-          ctx,
-          chartArea: { left, right, bottom, top },
-        } = chart;
+        const { ctx, chartArea, scales } = chart;
 
+        // Ensure chartArea and scales are available
+        if (!chartArea || !scales.x || !scales.y) {
+          return;
+        }
+        const { left, right, bottom, top } = chartArea;
         const midX = chart.scales.x.getPixelForValue(closestTimeIndex);
         const midY = chart.scales.y.getPixelForValue(0);
         const gradientHeight = (bottom - top) * 0.8;
@@ -582,17 +589,13 @@ export class MoonHorizonDynamic extends LitElement {
   private _expandChartArea = (): Plugin => {
     return {
       id: 'expandChartArea',
-      beforeDraw: (chart: Chart) => {
-        chart.chartArea.left = 0;
+      beforeRender: (chart: Chart) => {
         chart.chartArea.right = chart.width;
-        chart.chartArea.top = 0;
         chart.chartArea.bottom = chart.height;
       },
 
       afterUpdate: (chart: Chart) => {
-        chart.chartArea.left = 0;
         chart.chartArea.right = chart.width;
-        chart.chartArea.top = 0;
         chart.chartArea.bottom = chart.height;
       },
     };

diff --git a/src/components/moon-horizon.ts b/src/components/moon-horizon.ts
@@ -1,5 +1,5 @@
 import { formatDateTime, HomeAssistant, formatDateTimeWithSeconds } from 'custom-card-helpers';
-import { LitElement, html, CSSResultGroup, TemplateResult, css } from 'lit';
+import { LitElement, html, CSSResultGroup, TemplateResult, css, PropertyValues } from 'lit';
 import { customElement, state, property } from 'lit/decorators.js';
 
 import type { ChartDataset } from 'chart.js/auto';
@@ -42,10 +42,16 @@ export class MoonHorizon extends LitElement {
   @state() private _lastTime: string | null = null;
 
   protected async firstUpdated(): Promise<void> {
-    await new Promise((resolve) => setTimeout(resolve, 20));
+    await new Promise((resolve) => setTimeout(resolve, 10));
     this.setupChart();
   }
 
+  protected shouldUpdate(_changedProperties: PropertyValues): boolean {
+    if (_changedProperties.has('cardWidth')) {
+      this._chart?.resize();
+    }
+    return true;
+  }
   static get styles(): CSSResultGroup {
     return [
       styles,

diff --git a/src/css/editor.css b/src/css/editor.css
@@ -208,8 +208,9 @@ img.bg-thumbnail {
   display: flex;
   flex-direction: column;
   gap: 8px;
-  position: absolute;
+  /* position: absolute; */
   bottom: auto;
+  padding: 1rem 0;
 }
 
 .version .update {

diff --git a/src/css/style.css b/src/css/style.css
@@ -9,10 +9,6 @@
   --lunar-card-label-font-size: 14px;
 }
 
-*:focus {
-  outline: none;
-}
-
 *,
 *::before,
 *::after {
@@ -32,7 +28,6 @@ ha-card {
   border: none;
   --primary-text-color: var(--lunar-card-label-font-color, var(--primary-text-color));
   --swiper-theme-color: var(--lunar-card-label-font-color, var(--primary-text-color));
-  animation: fadeIn 0.4s ease-in;
 }
 
 ha-card.--background {
@@ -46,15 +41,22 @@ ha-card.--background {
   --swiper-theme-color: var(--lunar-card-label-font-color, #e1e1e1);
 }
 
-ha-card.--flex-col .lunar-card-content {
+/* ha-card.--flex-col .lunar-card-content {
   flex-direction: column;
   gap: 1rem;
-}
+} */
 
 ha-card.--reverse .lunar-card-content {
   flex-direction: row-reverse;
 }
 
+ha-card:not(.--reverse) #main-content[padding] {
+  padding-right: 1.2rem;
+}
+
+ha-card.--reverse #main-content[padding] {
+  padding-left: 1.2rem;
+}
 
 /* ha-card.--default-header .lunar-card-content {
   padding: 0.5rem;
@@ -64,15 +66,16 @@ ha-card.--reverse .lunar-card-content {
   padding-top: 8px;
 } */
 
-ha-card.--horizon.--dynamic-graph .lunar-card-content {
+ha-card.--dynamic-graph .lunar-card-content {
   padding: 0;
   transition: none;
+  /* display: block; */
 }
 
-/* ha-card.--horizon .lunar-card-content {
+ha-card.--horizon .lunar-card-content {
   display: block;
-  padding: 8px 0 12px;
-} */
+  /* padding: 8px 0 12px; */
+}
 
 ha-card>.loading {
   display: block;
@@ -165,6 +168,10 @@ h1 {
   line-height: 120%;
 }
 
+
+
+
+
 .btn-action {
   display: block;
   color: var(--lunar-card-label-font-color);
@@ -195,7 +202,7 @@ h1 {
   align-items: center;
   font-size: var(--lunar-card-label-font-size, 14px);
   text-transform: var(--lunar-card-label-text-transform, none);
-  transition: all 0.4s ease-in-out;
+  transition: all 300ms ease-in-out;
 }
 
 
@@ -238,25 +245,12 @@ h1 {
 }
 
 
-@keyframes fadeIn {
-  0% {
-    opacity: 0;
-  }
-
-  100% {
-    opacity: 1;
-  }
-}
-
-.slide-animation {
-  animation: fadeIn 1s ease-out forwards;
-}
 
 .moon-data {
   width: 100%;
   box-sizing: border-box;
   margin: 0;
-  padding-inline: 0.5rem;
+  /* padding-inline: 0.5rem; */
 }
 
 .moon-data-item {
@@ -301,7 +295,7 @@ h1 {
   text-wrap: nowrap;
 }
 
-/* SWIPER */
+
 lunar-base-data {
   display: block;
   width: 100%;
@@ -310,44 +304,6 @@ lunar-base-data {
   overflow: hidden;
 }
 
-section {
-  display: block;
-  width: 100%;
-  height: auto;
-  overflow: hidden;
-}
-
-.swiper-container {
-  width: 100%;
-  height: 100%;
-  display: block;
-  backdrop-filter: blur(4px);
-}
-
-/* .swiper-wrapper {
-  margin-bottom: 1rem;
-} */
-
-.swiper-slide {
-  display: block;
-  width: fit-content;
-}
-
-.swiper-pagination {
-  position: relative !important;
-}
-
-.swiper-pagination-bullet {
-  background-color: var(--swiper-theme-color);
-  transition: all 0.3s ease-in-out !important;
-}
-
-.swiper-pagination-bullet-active {
-  width: 12px !important;
-  border-radius: 0.5rem !important;
-  opacity: 0.7;
-}
-
 
 
 /* CALENDAR */
@@ -403,6 +359,7 @@ section {
   max-height: 500px;
   transition: all 0.4s ease-in-out;
   width: 100%;
+  padding-inline: 1rem;
 }
 
 ha-icon-button.calendar-info-btn[active] {