diff --git a/README.md b/README.md index 293c0a2..3a5be81 100644 --- a/README.md +++ b/README.md @@ -122,6 +122,9 @@ The `current` object controls the display of current weather information and att | `show_sun_times` | boolean | `true` | Displays sunrise and sunset times in the hourly forecast, and uses specific icons to visualize clear night conditions. | | `use_color_thresholds` | boolean | `false` | Replaces solid temperature lines with a gradient based on actual values when using forecast chart mode. Colors transition at fixed intervals: -10° (Cold), 0° (Freezing), 8° (Chilly), 18° (Mild), 26° (Warm), and 34° (Hot). These thresholds are specified in degrees Celsius (°C). | +> [!IMPORTANT] +> **Canvas width limit:** To ensure cross-browser compatibility and prevent rendering issues, the canvas width is capped at 16384 pixels in `chart` mode. At a standard item width of 50px, this supports approximately 320 entries (roughly two weeks of data) which is more than enough to cover reliable weather data from most forecast services. Any data exceeding this limit will be truncated. + ### Forecast Actions Actions support standard Home Assistant card actions. However, one additional action has been defined: `toggle-forecast` will toggle the forecast between daily and hourly forecast. diff --git a/src/components/wfc-forecast-chart.ts b/src/components/wfc-forecast-chart.ts index 9cbacfa..7c57879 100644 --- a/src/components/wfc-forecast-chart.ts +++ b/src/components/wfc-forecast-chart.ts @@ -6,6 +6,7 @@ import { styleMap } from "lit/directives/style-map.js"; import ChartDataLabels from "chartjs-plugin-datalabels"; import { getRelativePosition } from "chart.js/helpers"; import { actionHandler } from "../hass"; +import { logger } from "../logger"; import { ExtendedHomeAssistant, ForecastActionDetails, @@ -63,6 +64,21 @@ type ForecastLineStyle = Pick< | "borderDash" >; +// A safe maximum canvas width to avoid exceeding browser limits. This limit covers +// most of the modern mobile and desktop browsers and covers enough forecast data +// for reliable forecast information. This roughly covers over 300 forecast items +// which should be more than enough to provide a reliable forecast view. +const MAX_CANVAS_WIDTH = 16384; + +/** + * A chart component to display weather forecast data. + * + * It supports both daily and hourly forecasts, rendering temperature and precipitation data. + * This component manages its own chart instance and updates it based on property changes. + * + * Note: As canvas width limits vary between browsers, this component enforces a conservative + * hard maximum canvas width (MAX_CANVAS_WIDTH) chosen to provide broad browser compatibility. + */ @customElement("wfc-forecast-chart") export class WfcForecastChart extends LitElement { @property({ attribute: false }) hass!: ExtendedHomeAssistant; @@ -117,11 +133,12 @@ export class WfcForecastChart extends LitElement { } render(): TemplateResult | typeof nothing { - if (!this.forecast?.length || this.itemWidth <= 0) { + const forecast = this.safeForecast; + if (!forecast?.length || this.itemWidth <= 0) { return nothing; } - const count = this.forecast.length; + const count = forecast.length; const gaps = Math.max(count - 1, 0); const totalWidthCalc = `calc(${count} * var(--forecast-item-width) + ${gaps} * var(--forecast-item-gap))`; @@ -154,7 +171,9 @@ export class WfcForecastChart extends LitElement { @pointerdown=${this._onPointerDown} @action=${this._onForecastAction} > -
${this.renderHeaderItems()}
+
+ ${this.renderHeaderItems(forecast)} +
- ${this.forecast.map( + ${forecast.map( (item) => html`
f.datetime), + labels: data.map((f) => f.datetime), datasets: [ { - data: this.forecast.map((f) => f.temperature), + data: data.map((f) => f.temperature), yAxisID: "yTemp", datalabels: { anchor: "end", @@ -266,7 +286,7 @@ export class WfcForecastChart extends LitElement { ...tempLineStyle, }, { - data: this.forecast.map((f) => f.templow ?? null), + data: data.map((f) => f.templow ?? null), yAxisID: "yTemp", datalabels: { anchor: "start", @@ -280,7 +300,7 @@ export class WfcForecastChart extends LitElement { ...templowLineStyle, }, { - data: this.forecast.map((f) => + data: data.map((f) => f.precipitation && f.precipitation !== 0 ? f.precipitation : null ), backgroundColor: precipColor, @@ -508,16 +528,20 @@ export class WfcForecastChart extends LitElement { * 4. Enforces a hard minimum buffer (5° at the bottom) to guarantee sufficient "degree distance" for labels, regardless of how condensed the chart scale is. * 5. Round values to the nearest integer for cleaner grid lines. * + * @param forecast - The forecast data to compute the scale limits for. * @returns An object containing `minTemp` and `maxTemp` properties. */ - private computeScaleLimits(): { minTemp: number; maxTemp: number } { - const temps = this.forecast.map((f) => f.temperature); - const lows = this.forecast.map((f) => f.templow ?? f.temperature); + private computeScaleLimits(forecast: ForecastAttribute[]): { + minTemp: number; + maxTemp: number; + } { + const temps = forecast.map((f) => f.temperature); + const lows = forecast.map((f) => f.templow ?? f.temperature); const dataMin = Math.min(...lows); const dataMax = Math.max(...temps); - const hasLowTempData = this.forecast.some( + const hasLowTempData = forecast.some( (f) => f.templow !== undefined && f.templow !== null ); @@ -543,11 +567,11 @@ export class WfcForecastChart extends LitElement { return { minTemp, maxTemp }; } - private renderHeaderItems(): TemplateResult[] { + private renderHeaderItems(forecast: ForecastAttribute[]): TemplateResult[] { const parts: TemplateResult[] = []; let currentDay: string | undefined; - this.forecast.forEach((item) => { + forecast.forEach((item) => { if (!item.datetime) { return; } @@ -579,6 +603,38 @@ export class WfcForecastChart extends LitElement { return parts; } + /** + * Returns a subset of the forecast that fits within the hardware canvas limit. + * This calculation includes the gap width to ensure exact layout synchronization. + */ + private get safeForecast(): ForecastAttribute[] { + if (!this.forecast?.length || this.itemWidth <= 0) return []; + + const gap = this._getGapValue(); + + const maxItems = Math.floor( + (MAX_CANVAS_WIDTH + gap) / (this.itemWidth + gap) + ); + + if (this.forecast.length > maxItems) { + logger.debug( + `Truncating forecast to ${maxItems} items to stay under ${MAX_CANVAS_WIDTH}px (including ${gap}px gaps).` + ); + + return this.forecast.slice(0, maxItems); + } + + return this.forecast; + } + + private _getGapValue(): number { + const style = getComputedStyle(this); + + const gapValue = style.getPropertyValue("--forecast-item-gap").trim(); + + return parseFloat(gapValue) || 0; + } + private _onPointerDown(event: PointerEvent) { this._lastChartEvent = event; } @@ -610,7 +666,7 @@ export class WfcForecastChart extends LitElement { const index = this._chart.data.labels?.indexOf(label as string) ?? -1; if (index === -1) return; - const selectedForecast = this.forecast[index]; + const selectedForecast = this.safeForecast[index]; if (!selectedForecast) return; const actionDetails: ForecastActionDetails = { diff --git a/test/weather-forecast-chart.test.ts b/test/weather-forecast-chart.test.ts index bcd1bb3..e6ef8c0 100644 --- a/test/weather-forecast-chart.test.ts +++ b/test/weather-forecast-chart.test.ts @@ -546,4 +546,60 @@ describe("weather-forecast-card chart", () => { ); }); }); + + it("should truncate forecast to stay under MAX_CANVAS_WIDTH", async () => { + const expectedItems = 327; + const largeForecast = Array.from({ length: 500 }, (_, i) => ({ + datetime: new Date(Date.now() + i * 3600000).toISOString(), + temperature: 20, + condition: "sunny", + })); + + const styles = { + "--forecast-item-gap": "0px", + }; + + const card = await fixture(html` + + `); + + const chartElement = card.shadowRoot!.querySelector( + "wfc-forecast-chart" + ) as WfcForecastChart; + chartElement.forecast = largeForecast; + chartElement.itemWidth = 50; + + Object.entries(styles).forEach(([key, value]) => { + chartElement.style.setProperty(key, value); + }); + + await chartElement.updateComplete; + + // MAX_CANVAS_WIDTH = 16384 + // itemWidth = 50, gap = 0 + // maxItems = floor((16384 + 0) / (50 + 0)) = 327 + + // @ts-expect-error private + const safeForecast = chartElement.safeForecast; + expect(safeForecast.length).toBe(expectedItems); + + const header = chartElement.querySelector(".wfc-forecast-chart-header"); + const headerItems = header!.querySelectorAll(".wfc-forecast-slot"); + expect(headerItems.length).toBe(expectedItems); + + const footer = chartElement.querySelector(".wfc-forecast-chart-footer"); + const footerItems = footer!.querySelectorAll(".wfc-forecast-slot"); + expect(footerItems.length).toBe(expectedItems); + + // @ts-expect-error private + const chartInstance = chartElement._chart; + expect(chartInstance?.data.labels?.length).toBe(expectedItems); + }); });