From d1c42aa6aa0948f4c475370daa7c571cab9fb150 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Patrick=20Ha=C3=9Fel?= Date: Thu, 20 Nov 2025 16:28:08 +0100 Subject: [PATCH] charts: minX/maxX FIX --- src/main/angular/src/app/config.service.ts | 5 +- .../location/energy/charts/energy-charts.ts | 95 +++++++++++-------- src/main/angular/src/app/series/Interval.ts | 13 +-- 3 files changed, 61 insertions(+), 52 deletions(-) diff --git a/src/main/angular/src/app/config.service.ts b/src/main/angular/src/app/config.service.ts index 82e6027..b7fcd0a 100644 --- a/src/main/angular/src/app/config.service.ts +++ b/src/main/angular/src/app/config.service.ts @@ -42,13 +42,10 @@ export class ConfigService { } private read(key: string): string | null { - const value = localStorage.getItem(key); - console.log("LOAD", key, value); - return value; + return localStorage.getItem(key); } private writeBoolean(key: string, value: boolean | null): void { - console.log("STORE", key, value); if (value !== null && value !== undefined) { localStorage.setItem(key, value + ""); } else { diff --git a/src/main/angular/src/app/location/energy/charts/energy-charts.ts b/src/main/angular/src/app/location/energy/charts/energy-charts.ts index 0e45e3e..65ec6e0 100644 --- a/src/main/angular/src/app/location/energy/charts/energy-charts.ts +++ b/src/main/angular/src/app/location/energy/charts/energy-charts.ts @@ -7,6 +7,7 @@ import {ChartConfiguration} from 'chart.js'; import {de} from 'date-fns/locale'; import {PointSeries} from '../../../point/PointSeries'; import {formatNumber} from '@angular/common'; +import {PointResponse} from '../../../point/PointResponse'; const COLOR_BACK_PURCHASE = "#ffb9b9"; const COLOR_BACK_DELIVER = "#ff59ff"; @@ -78,6 +79,7 @@ class EnergyCharts { this.add(energyDeliver, COLOR_BACK_DELIVER, -1, "a"); this.add(energySelf, COLOR_BACK_SELF, 1, "a"); this.add(energyPurchase, COLOR_BACK_PURCHASE, 1, "a"); + this.options = this.newOptions(result); this.chart?.update(); }); } @@ -89,7 +91,7 @@ class EnergyCharts { this.data.datasets.push({ type: 'bar', categoryPercentage: 1.0, - barPercentage: 1.0, + barPercentage: 0.95, data: pointSeries.points.map(p => { return {x: p[0] * 1000, y: p[1] * factor}; }), @@ -104,55 +106,64 @@ class EnergyCharts { datasets: [], }; - protected options: ChartConfiguration['options'] = { - responsive: true, - maintainAspectRatio: false, - animation: false, - scales: { - x: { - type: 'time', - time: { - displayFormats: { - minute: "HH:mm", - hour: "HH:mm", - day: "dd.MM" + protected options: ChartConfiguration['options'] = {}; + + private newOptions(result: PointResponse): ChartConfiguration['options'] { + return { + responsive: true, + maintainAspectRatio: false, + animation: false, + scales: { + 'x': { + type: 'time', + min: result.begin.getTime(), + max: result.end.getTime() - (this._interval?.inner?.millis || 0), + time: { + displayFormats: { + minute: "HH:mm", + hour: "HH:mm", + day: "dd.MM" + }, }, - }, - adapters: { - date: { - locale: de + adapters: { + date: { + locale: de + }, }, + bounds: 'ticks', }, + y: { + suggestedMax: 0.5, + suggestedMin: -0.1, + } }, - y: { - suggestedMax: 0.5, - suggestedMin: -0.1, - } - }, - interaction: { - mode: 'index', - intersect: false - }, - plugins: { - legend: { - display: false, - }, - tooltip: { + + interaction: { mode: 'index', - intersect: false, - itemSort: (a, b) => b.datasetIndex - a.datasetIndex, - callbacks: { - label: (ctx) => { - const groups = /^Energie (?.+)\[(?.+)]$/.exec(ctx.dataset.label || '')?.groups; - if (groups) { - return `${groups['name']}: ${ctx.parsed.y === null ? '-' : formatNumber(ctx.parsed.y, 'de-DE', '0.2-2')} ${groups['unit']}`; - } - return ctx.label; + intersect: false + }, + plugins: { + legend: { + display: false, + }, + tooltip: { + mode: 'index', + intersect: false, + itemSort: (a, b) => b.datasetIndex - a.datasetIndex, + callbacks: { + label: (ctx) => { + const groups = /^.*Energie (?.+)\[(?.+)]$/.exec(ctx.dataset.label || '')?.groups; + if (groups) { + const value = ctx.parsed.y === null ? '-' : formatNumber(Math.abs(ctx.parsed.y), 'de-DE', '0.2-2'); + return `${value} ${groups['unit']} ${groups['name']}`; + } + return ctx.dataset.label; + }, }, }, }, - }, - }; + }; + } } diff --git a/src/main/angular/src/app/series/Interval.ts b/src/main/angular/src/app/series/Interval.ts index 06c37fa..4989933 100644 --- a/src/main/angular/src/app/series/Interval.ts +++ b/src/main/angular/src/app/series/Interval.ts @@ -1,19 +1,20 @@ export class Interval { - static readonly FIVE = new Interval('FIVE'); + static readonly FIVE = new Interval('FIVE', 5 * 60 * 1000); - static readonly HOUR = new Interval('HOUR', this.FIVE); + static readonly HOUR = new Interval('HOUR', 60 * 60 * 1000, this.FIVE); - static readonly DAY = new Interval('DAY', this.FIVE); + static readonly DAY = new Interval('DAY', 24 * 60 * 60 * 1000, this.FIVE); - static readonly WEEK = new Interval('WEEK', this.HOUR); + static readonly WEEK = new Interval('WEEK', 7 * 24 * 60 * 60 * 1000, this.HOUR); - static readonly MONTH = new Interval('MONTH', this.DAY); + static readonly MONTH = new Interval('MONTH', 30 * 24 * 60 * 60 * 1000, this.DAY); - static readonly YEAR = new Interval('YEAR', this.DAY); + static readonly YEAR = new Interval('YEAR', 365 * 24 * 60 * 60 * 1000, this.DAY); constructor( readonly name: string, + readonly millis: number, readonly inner: Interval = this, ) { //