From 19e590148d1ae3a028b98b4239b26e38bfcd14d9 Mon Sep 17 00:00:00 2001 From: troinine Date: Wed, 31 Dec 2025 20:58:19 +0200 Subject: [PATCH 1/4] fix: implement hard limit for canvas width when using forecast mode --- README.md | 3 + src/components/wfc-forecast-chart.ts | 88 +++++++++++++++++++++++----- test/weather-forecast-chart.test.ts | 56 ++++++++++++++++++ 3 files changed, 131 insertions(+), 16 deletions(-) diff --git a/README.md b/README.md index 293c0a2..d252e31 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 compatibility across different browsers and prevent rendering errors, the canvas width is capped at 16384 pixels when using forecast chart mode. This limit is sufficient for most forecast services. However, any data exceeding this width 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..18ceb1f 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 enought 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 includes logic to compute + * a safe maximum width based on the user's environment. + */ @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); + }); }); From bc1d5d0b0c83cc718b15f945e0444fea9f61482a Mon Sep 17 00:00:00 2001 From: Tero Roininen Date: Wed, 31 Dec 2025 21:54:32 +0200 Subject: [PATCH 2/4] fix: review fix Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> Signed-off-by: Tero Roininen --- src/components/wfc-forecast-chart.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/wfc-forecast-chart.ts b/src/components/wfc-forecast-chart.ts index 18ceb1f..d72d2ee 100644 --- a/src/components/wfc-forecast-chart.ts +++ b/src/components/wfc-forecast-chart.ts @@ -65,7 +65,7 @@ type ForecastLineStyle = Pick< >; // A safe maximum canvas width to avoid exceeding browser limits. This limit covers -// most of the modern mobile and desktop browsers and covers enought forecast data +// 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; From 2fbafad75e6ddd144758fc1dd8892624c2004173 Mon Sep 17 00:00:00 2001 From: troinine Date: Wed, 31 Dec 2025 22:01:17 +0200 Subject: [PATCH 3/4] docs: review fix --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index d252e31..3a5be81 100644 --- a/README.md +++ b/README.md @@ -123,7 +123,7 @@ The `current` object controls the display of current weather information and att | `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 compatibility across different browsers and prevent rendering errors, the canvas width is capped at 16384 pixels when using forecast chart mode. This limit is sufficient for most forecast services. However, any data exceeding this width will be truncated. +> **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 From dc76d15e3c257d819e5286f19410bbedf55fc76e Mon Sep 17 00:00:00 2001 From: Tero Roininen Date: Wed, 31 Dec 2025 22:02:16 +0200 Subject: [PATCH 4/4] fix: review fix Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> Signed-off-by: Tero Roininen --- src/components/wfc-forecast-chart.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/wfc-forecast-chart.ts b/src/components/wfc-forecast-chart.ts index d72d2ee..7c57879 100644 --- a/src/components/wfc-forecast-chart.ts +++ b/src/components/wfc-forecast-chart.ts @@ -76,8 +76,8 @@ const MAX_CANVAS_WIDTH = 16384; * 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 includes logic to compute - * a safe maximum width based on the user's environment. + * 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 {