Skip to content

Commit

Permalink
Add Calendar popup modal option (#51)
Browse files Browse the repository at this point in the history 
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.
  • Loading branch information
@ngocjohn
ngocjohn authored Dec 10, 2024
1 parent 7923efa commit fbfedca
Show file tree
Hide file tree
Showing 24 changed files with 274 additions and 93 deletions.
14 changes: 13 additions & 1 deletion src/components/moon-base-data.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,7 @@ export class LunarBaseData extends LitElement {
.moon-phase-name {
font-size: 1.5rem;
padding-block: 1rem;
white-space: nowrap;
}
`,
mainStyles,
Expand Down Expand Up @@ -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 => {
Expand Down
41 changes: 29 additions & 12 deletions src/components/moon-calendar-popup.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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));
Expand All @@ -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;
Expand All @@ -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;
Expand Down Expand Up @@ -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;
}
}
`,
];
}
Expand All @@ -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">
Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -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);
}

Expand Down
64 changes: 39 additions & 25 deletions src/components/moon-horizon-chart.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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,
},
},
};

Expand Down Expand Up @@ -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';
Expand Down Expand Up @@ -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;
},
};
};
Expand Down
12 changes: 6 additions & 6 deletions src/components/moon-horizon-dynamic.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand All @@ -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);
Expand All @@ -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;
}

Expand Down Expand Up @@ -95,6 +94,7 @@ export class LunarHorizonDynamic extends LitElement {
box-sizing: border-box;
border-radius: 24px;
will-change: backdrop-filter;
margin: -2px;
}
#dynamic-chart {
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -383,7 +383,7 @@ export class LunarHorizonDynamic extends LitElement {
ctx.restore();
},

afterDatasetsDraw: (chart: Chart) => {
afterDatasetDraw: (chart: Chart) => {
const dataSet = chart.getDatasetMeta(0);
const {
ctx,
Expand Down Expand Up @@ -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;
},
Expand Down
19 changes: 16 additions & 3 deletions src/components/moon-star-field.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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`
Expand Down Expand Up @@ -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;
}
}
Loading

0 comments on commit fbfedca

Please sign in to comment.