charts: minX/maxX FIX

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);
+    return localStorage.getItem(key);
-    console.log("LOAD", key, value);
-    return value;
   }
 
   private writeBoolean(key: string, value: boolean | null): void {
-    console.log("STORE", key, value);
     if (value !== null && value !== undefined) {
       localStorage.setItem(key, value + "");
     } else {

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,13 +106,18 @@ class EnergyCharts {
     datasets: [],
   };
 
-  protected options: ChartConfiguration['options'] = {
+  protected options: ChartConfiguration['options'] = {};
+
+  private newOptions(result: PointResponse): ChartConfiguration['options'] {
+    return {
       responsive: true,
       maintainAspectRatio: false,
       animation: false,
       scales: {
-      x: {
+        'x': {
           type: 'time',
+          min: result.begin.getTime(),
+          max: result.end.getTime() - (this._interval?.inner?.millis || 0),
           time: {
             displayFormats: {
               minute: "HH:mm",
@@ -123,12 +130,14 @@ class EnergyCharts {
               locale: de
             },
           },
+          bounds: 'ticks',
         },
         y: {
           suggestedMax: 0.5,
           suggestedMin: -0.1,
         }
       },
+
       interaction: {
         mode: 'index',
         intersect: false
@@ -143,16 +152,18 @@ class EnergyCharts {
           itemSort: (a, b) => b.datasetIndex - a.datasetIndex,
           callbacks: {
             label: (ctx) => {
-            const groups = /^Energie (?<name>.+)\[(?<unit>.+)]$/.exec(ctx.dataset.label || '')?.groups;
+              const groups = /^.*Energie (?<name>.+)\[(?<unit>.+)]$/.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']}`;
+                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.label;
+              return ctx.dataset.label;
             },
           },
         },
       },
     };
+  }
 
 }
 

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,
   ) {
     //