From 55db2f1452cf9237436e7b3f47f15a92380cfc50 Mon Sep 17 00:00:00 2001 From: Matthias Bolte Date: Mon, 23 Sep 2024 16:46:40 +0200 Subject: [PATCH] web: Use more readable X axis format for solar forecast and day ahead prices --- .../web/src/modules/day_ahead_prices/main.tsx | 7 ++--- .../src/modules/em_energy_analysis/main.tsx | 3 +++ software/web/src/modules/meters/main.tsx | 3 +++ .../web/src/modules/solar_forecast/main.tsx | 5 ++-- .../web/src/ts/components/uplot_wrapper.tsx | 3 ++- .../src/ts/components/uplot_wrapper_2nd.tsx | 26 +++++++++++++++++-- 6 files changed, 39 insertions(+), 8 deletions(-) diff --git a/software/web/src/modules/day_ahead_prices/main.tsx b/software/web/src/modules/day_ahead_prices/main.tsx index 9672efb23..1202736c1 100644 --- a/software/web/src/modules/day_ahead_prices/main.tsx +++ b/software/web/src/modules/day_ahead_prices/main.tsx @@ -233,9 +233,10 @@ export class DayAheadPrices extends ConfigComponent<"day_ahead_prices/config", { legend_time_with_minutes={true} legend_div_ref={this.uplot_legend_div_ref} aspect_ratio={3} - x_height={30} - x_format={{weekday: 'short', hour: '2-digit'}} + x_height={50} + x_format={{hour: '2-digit', minute: '2-digit'}} x_padding_factor={0} + x_include_date={true} y_min={0} y_max={5} y_unit={"ct/kWh"} @@ -245,7 +246,7 @@ export class DayAheadPrices extends ConfigComponent<"day_ahead_prices/config", { y_sync_ref={this.uplot_wrapper_flags_ref} default_fill={true} only_show_visible={true} - padding={[15, 5, null, null] as uPlot.Padding} + padding={[15, 5, null, null]} /> diff --git a/software/web/src/modules/em_energy_analysis/main.tsx b/software/web/src/modules/em_energy_analysis/main.tsx index ee1f652fd..1fc3748e1 100644 --- a/software/web/src/modules/em_energy_analysis/main.tsx +++ b/software/web/src/modules/em_energy_analysis/main.tsx @@ -253,6 +253,7 @@ export class EMEnergyAnalysisStatus extends Component<{}, EMEnergyAnalysisStatus x_height={30} x_format={{hour: '2-digit', minute: '2-digit'}} x_padding_factor={0} + x_include_date={false} y_min={0} y_max={1500} y_unit={"W"} @@ -2026,6 +2027,7 @@ export class EMEnergyAnalysis extends Component { legend_time_with_seconds={false} aspect_ratio={3} x_height={50} + x_format={{hour: '2-digit', minute: '2-digit'}} x_padding_factor={0} x_include_date={true} y_min={0} diff --git a/software/web/src/modules/solar_forecast/main.tsx b/software/web/src/modules/solar_forecast/main.tsx index 3ea6a8b89..8586e0b29 100644 --- a/software/web/src/modules/solar_forecast/main.tsx +++ b/software/web/src/modules/solar_forecast/main.tsx @@ -488,9 +488,10 @@ export class SolarForecast extends ConfigComponent<"solar_forecast/config", {}, legend_time_with_minutes={true} legend_div_ref={this.uplot_legend_div_ref} aspect_ratio={3} - x_height={30} - x_format={{weekday: 'short', hour: '2-digit'}} + x_height={50} + x_format={{hour: '2-digit', minute: '2-digit'}} x_padding_factor={0} + x_include_date={true} y_min={0} y_max={0.1} y_unit={"kW"} diff --git a/software/web/src/ts/components/uplot_wrapper.tsx b/software/web/src/ts/components/uplot_wrapper.tsx index 5f3b94c63..629f6f7d0 100644 --- a/software/web/src/ts/components/uplot_wrapper.tsx +++ b/software/web/src/ts/components/uplot_wrapper.tsx @@ -51,6 +51,7 @@ interface UplotWrapperProps { legend_div_ref?: RefObject; aspect_ratio: number; x_height: number; + x_format: Intl.DateTimeFormatOptions; x_padding_factor: number; x_include_date: boolean; y_min?: number; @@ -142,7 +143,7 @@ export class UplotWrapper extends Component { for (let i = 0; i < splits.length; ++i) { let date = new Date(splits[i] * 1000); - let value = date.toLocaleString([], {hour: '2-digit', minute: '2-digit'}); + let value = date.toLocaleString([], this.props.x_format); if (this.props.x_include_date && foundIncr >= 3600) { let year = date.toLocaleString([], {year: 'numeric'}); diff --git a/software/web/src/ts/components/uplot_wrapper_2nd.tsx b/software/web/src/ts/components/uplot_wrapper_2nd.tsx index 90b236272..5682404f2 100644 --- a/software/web/src/ts/components/uplot_wrapper_2nd.tsx +++ b/software/web/src/ts/components/uplot_wrapper_2nd.tsx @@ -66,6 +66,7 @@ interface UplotWrapperProps { x_height: number; x_format: Intl.DateTimeFormatOptions; x_padding_factor: number; + x_include_date: boolean; y_min?: number; y_max?: number; y_unit: string; @@ -161,11 +162,32 @@ export class UplotWrapper extends Component { 3600 * 72, 3600 * 168, ], - values: (self: uPlot, splits: number[]) => { + values: (self: uPlot, splits: number[], axisIdx: number, foundSpace: number, foundIncr: number) => { let values: string[] = new Array(splits.length); + let last_year: string = null; + let last_month_and_day: string = null; for (let i = 0; i < splits.length; ++i) { - values[i] = (new Date(splits[i] * 1000)).toLocaleString([], this.props.x_format); + let date = new Date(splits[i] * 1000); + let value = date.toLocaleString([], this.props.x_format); + + if (this.props.x_include_date && foundIncr >= 3600) { + let year = date.toLocaleString([], {year: 'numeric'}); + let month_and_day = date.toLocaleString([], {month: '2-digit', day: '2-digit'}); + + if (year != last_year) { + value += '\n' + date.toLocaleString([], {year: 'numeric', month: '2-digit', day: '2-digit'}); + last_year = year; + last_month_and_day = month_and_day; + } + + if (month_and_day != last_month_and_day) { + value += '\n' + date.toLocaleString([], {month: '2-digit', day: '2-digit'}); + last_month_and_day = month_and_day; + } + } + + values[i] = value; } return values;