Add Calendar popup modal option (ngocjohn#51)

This pull request includes several refactorings and a new feature. The refactorings improve the default chart layout size, font size calculation for moon-phase-name, and the calendar popup grid item font size. The config for legend and legend alignment has also been removed. Additionally, a new feature has been added to include a Calendar popup modal option.

Author: ngocjohn

src/components/moon-base-data.ts

@@ -56,6 +56,7 @@ export class LunarBaseData extends LitElement {
         .moon-phase-name {
           font-size: 1.5rem;
           padding-block: 1rem;
+          white-space: nowrap;
         }
       `,
       mainStyles,
@@ -122,7 +123,18 @@ export class LunarBaseData extends LitElement {
 
   private _renderPhaseName(): TemplateResult {
     if (!this.moon.config.hide_header) return html``;
-    return html` <div class="moon-phase-name">${this.moon.phaseName}</div> `;
+    return html` <div class="moon-phase-name" style=${this._computeFontSize()}>${this.moon.phaseName}</div> `;
+  }
+
+  private _computeFontSize() {
+    const parentEl = this.shadowRoot?.querySelector('.moon-phase-name') as HTMLElement;
+    if (!parentEl) return;
+    const parentWidth = parentEl.clientWidth;
+    const scrollWidth = parentEl.scrollWidth;
+    const fontSize = parseFloat(window.getComputedStyle(parentEl).fontSize);
+    const ratio = parentWidth / scrollWidth;
+    const newFontSize = fontSize * ratio;
+    return `font-size: ${newFontSize}px`;
   }
 
   private _chunkObject = (obj: MoonData, size: number): MoonDataItem => {

src/components/moon-calendar-popup.ts

@@ -25,7 +25,7 @@ export class LunarCalendarPopup extends LitElement {
       styles,
       css`
         #lunar-calendar {
-          max-width: 500px;
+          /* max-width: 500px; */
           margin: 0 auto;
           backdrop-filter: blur(10px);
           background: var(--ha-card-background-color, var(--secondary-background-color));
@@ -47,8 +47,9 @@ export class LunarCalendarPopup extends LitElement {
           justify-content: space-between;
           align-items: center;
           font-weight: 600;
-          font-size: 1.3rem;
+          font-size: initial;
         }
+
         .calendar-header__month {
           display: flex;
           align-items: center;
@@ -75,11 +76,6 @@ export class LunarCalendarPopup extends LitElement {
           cursor: default;
           /* gap: 2px 4px; */
         }
-        @media screen and (max-width: 800px) {
-          #calendar-grid {
-            grid-template-rows: auto;
-          }
-        }
         .day-of-week {
           text-align: center;
           font-weight: 500;
@@ -128,6 +124,19 @@ export class LunarCalendarPopup extends LitElement {
             color: var(--accent-color);
           }
         }
+        @media screen and (max-width: 800px) {
+          #calendar-grid {
+            grid-template-rows: auto;
+          }
+          .calendar-header {
+            font-size: 1rem;
+            font-weight: 400;
+          }
+          .calendar-day > .day-symbol {
+            font-size: 1rem;
+            padding: 0;
+          }
+        }
       `,
     ];
   }
@@ -145,10 +154,7 @@ export class LunarCalendarPopup extends LitElement {
       <div id="lunar-calendar" class=${backgroundClass}>
         <div class="calendar-header">
           ${renderNavButton(ICON.CLOSE, () => {
-            this.card._calendarPopup = false;
-            if (this.card._calendarInfo) {
-              this.card._calendarInfo = false;
-            }
+            this._handleClose();
             this.viewDate = DateTime.local().startOf('month');
           })}
           <div class="calendar-header__year">
@@ -203,6 +209,17 @@ export class LunarCalendarPopup extends LitElement {
     `;
   }
 
+  private _handleClose(): void {
+    if (this.card.config.calendar_modal) {
+      this.card._dialogOpen = false;
+    } else {
+      this.card._calendarPopup = false;
+      if (this.card._calendarInfo) {
+        this.card._calendarInfo = false;
+      }
+    }
+  }
+
   private _setEventListeners(): void {
     const grid = this.shadowRoot?.getElementById('calendar-grid');
     if (grid) {
@@ -232,7 +249,7 @@ export class LunarCalendarPopup extends LitElement {
     this.card.selectedDate = date;
     setTimeout(() => {
       this.viewDate = DateTime.local().startOf('month');
-      this.card._calendarPopup = false;
+      this._handleClose();
     }, 300);
   }
 

src/components/moon-horizon-chart.ts

@@ -46,12 +46,31 @@ export class LunarHorizonChart extends LitElement {
     this.setupChart();
   }
 
-  protected shouldUpdate(_changedProperties: PropertyValues): boolean {
+  protected updated(_changedProperties: PropertyValues): void {
     if (_changedProperties.has('cardWidth')) {
-      this._chart?.resize();
+      if (this._chart) {
+        this._chart.resize(this.cardWidth, this.cardHeight);
+      }
     }
-    return true;
   }
+
+  // protected shouldUpdate(_changedProperties: PropertyValues): boolean {
+  //   if (_changedProperties.has('moon')) {
+  //     if (this._chart) {
+  //       this._chart.data = this.chartData;
+  //       this._chart.update('none');
+  //     }
+  //   }
+  //   return true;
+  // }
+
+  get cardHeight(): number {
+    let height = this.cardWidth * 0.5 - 96;
+    height = this.card.config.hide_header ? height + 48 : height;
+
+    return height;
+  }
+
   static get styles(): CSSResultGroup {
     return [
       styles,
@@ -198,15 +217,6 @@ export class LunarHorizonChart extends LitElement {
           },
         },
 
-        onResize: () => {
-          const width = this.cardWidth;
-          const height = this.cardWidth / 2;
-          if (this._chart) {
-            this._chart.canvas.width = width;
-            this._chart.canvas.height = height;
-            this._chart.update();
-          }
-        },
         // Hover on point
         onHover: (_event, elements) => {
           if (elements.length > 0) {
@@ -236,10 +246,17 @@ export class LunarHorizonChart extends LitElement {
   }
 
   protected render(): TemplateResult {
+    const dataContainer = this.renderDataContainer();
     return html`
       <div class="moon-horizon">
-        <canvas id="moonPositionChart" width="${this.cardWidth}"></canvas>
+        <canvas id="moonPositionChart" width="${this.cardWidth}" height="${this.cardHeight}"></canvas>
       </div>
+      ${dataContainer}
+    `;
+  }
+
+  private renderDataContainer(): TemplateResult {
+    return html`
       <div class="moon-data-header">
         ${this.renderHeaderTime()}
         <ha-icon-button
@@ -397,8 +414,8 @@ export class LunarHorizonChart extends LitElement {
     // Scales
     const scales = {} as ScaleOptions;
     scales['y'] = {
-      suggestedMax: sugestedYMax + 30,
-      suggestedMin: sugestedYMin > -60 ? -60 : sugestedYMin,
+      suggestedMin: sugestedYMin,
+      suggestedMax: sugestedYMax,
       ticks: {
         ...ticksOptions,
         display: graphConfig?.y_ticks || false,
@@ -432,18 +449,15 @@ export class LunarHorizonChart extends LitElement {
     const plugins: ChartOptions['plugins'] = {};
 
     plugins['legend'] = {
-      display: graphConfig?.show_legend ?? true,
+      display: false,
       align: graphConfig?.legend_align || 'center',
       position: graphConfig?.legend_position || 'bottom',
       labels: {
         usePointStyle: false,
         boxWidth: 0,
         boxHeight: 0,
-        padding: 10,
+        padding: 4,
         color: secondaryTextColor,
-        font: {
-          size: 14,
-        },
       },
     };
 
@@ -703,7 +717,7 @@ export class LunarHorizonChart extends LitElement {
 
             const yPosition = y.getPixelForValue(0);
 
-            const lineOffset = isUp ? Math.round((yPosition - top) / 3) : Math.round((bottom - yPosition) / 2);
+            const lineOffset = isUp ? Math.round((yPosition - top) / 4) : Math.round((bottom - yPosition) / 2);
             const maxTextWidth = getMaxValueText(ctx, isUp ? 'Rise' : 'Set', formatedTime, direction);
 
             let textAlign: CanvasTextAlign = 'start';
@@ -754,16 +768,16 @@ export class LunarHorizonChart extends LitElement {
       id: 'expandChartArea',
       beforeDraw: (chart: Chart) => {
         chart.chartArea.left = 0;
-        chart.chartArea.right = chart.width;
+        chart.chartArea.right = this.cardWidth;
         chart.chartArea.top = 0;
-        chart.chartArea.bottom = chart.height;
+        chart.chartArea.bottom = this.cardHeight;
       },
 
       afterUpdate: (chart: Chart) => {
         chart.chartArea.left = 0;
-        chart.chartArea.right = chart.width;
+        chart.chartArea.right = this.cardWidth;
         chart.chartArea.top = 0;
-        chart.chartArea.bottom = chart.height;
+        chart.chartArea.bottom = this.cardHeight;
       },
     };
   };

src/components/moon-horizon-dynamic.ts

@@ -24,8 +24,7 @@ export class LunarHorizonDynamic extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
   @property({ attribute: false }) moon!: Moon;
   @property({ attribute: false }) card!: LunarPhaseCard;
-
-  @state() private cardWidth: number = 500;
+  @property({ type: Number }) public cardWidth!: number;
 
   @state() public fillColors!: FILL_COLORS;
 
@@ -49,6 +48,7 @@ export class LunarHorizonDynamic extends LitElement {
   }
 
   protected updated(_changedProperties: PropertyValues): void {
+    if (!this.card.config || !this.moon) return;
     if (_changedProperties.has('cardWidth')) {
       if (this.dynamicChart) {
         this.dynamicChart.resize(this.cardWidth, this.cardHeight);
@@ -59,7 +59,6 @@ export class LunarHorizonDynamic extends LitElement {
   get cardHeight(): number {
     let height = this.cardWidth * 0.5;
     height = this.card.config.hide_header ? height : height - 48;
-    console.log('height dynamic', height);
     return height;
   }
 
@@ -95,6 +94,7 @@ export class LunarHorizonDynamic extends LitElement {
           box-sizing: border-box;
           border-radius: 24px;
           will-change: backdrop-filter;
+          margin: -2px;
         }
 
         #dynamic-chart {
@@ -348,7 +348,7 @@ export class LunarHorizonDynamic extends LitElement {
     const index = timeLabels.indexOf(closestTime);
     return {
       id: 'nowLine',
-      beforeDatasetsDraw: (chart: Chart) => {
+      beforeDatasetDraw: (chart: Chart) => {
         const now = this._date;
         const closestTime = timeLabels.reduce((a, b) =>
           Math.abs(b - now.getTime()) < Math.abs(a - now.getTime()) ? b : a
@@ -383,7 +383,7 @@ export class LunarHorizonDynamic extends LitElement {
         ctx.restore();
       },
 
-      afterDatasetsDraw: (chart: Chart) => {
+      afterDatasetDraw: (chart: Chart) => {
         const dataSet = chart.getDatasetMeta(0);
         const {
           ctx,
@@ -609,7 +609,7 @@ export class LunarHorizonDynamic extends LitElement {
   private _expandChartArea = (): Plugin => {
     return {
       id: 'expandChartArea',
-      beforeRender: (chart: Chart) => {
+      afterRender: (chart: Chart) => {
         chart.chartArea.right = this.cardWidth;
         chart.chartArea.bottom = this.cardHeight;
       },

src/components/moon-star-field.ts

@@ -3,16 +3,23 @@ import { customElement, property, state } from 'lit/decorators.js';
 
 import { LunarPhaseCard } from '../lunar-phase-card';
 
-@customElement('moon-star-field')
+@customElement('lunar-star-field')
 export class LunarStarField extends LitElement {
   @property({ attribute: false }) _card!: LunarPhaseCard;
-  @state() public count: number = 30;
+  @state() private count: number = 30;
 
   protected firstUpdated(_changedProperties: PropertyValues): void {
     super.firstUpdated(_changedProperties);
     this._createStarfield();
   }
 
+  protected updated(_changedProperties: PropertyValues): void {
+    super.updated(_changedProperties);
+    if (_changedProperties.has('_card')) {
+      this._createStarfield();
+    }
+  }
+
   static get styles(): CSSResultGroup {
     return [
       css`
@@ -69,11 +76,17 @@ export class LunarStarField extends LitElement {
       const y = Math.random() * starfield.offsetHeight;
 
       // Random blink delay
-      const delay = 20 + Math.random() * 5;
+      const delay = 3 + Math.random() * 3;
       star.style.left = `${x}px`;
       star.style.top = `${y}px`;
       star.style.animationDelay = `${delay}s`;
       starfield.appendChild(star);
     }
   }
 }
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'lunar-star-field': LunarStarField;
+  }
+}