ui: chartjs

src/main/angular/.editorconfig

@@ -0,0 +1,18 @@
+# Editor configuration, see https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.ts]
+# noinspection EditorConfigKeyCorrectness
+quote_type = single
+ij_typescript_use_double_quotes = false
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

src/main/angular/.gitignore

@@ -0,0 +1,42 @@
+# See https://docs.github.com/get-started/getting-started-with-git/ignoring-files for more about ignoring files.
+
+# Compiled output
+/dist
+/tmp
+/out-tsc
+/bazel-out
+
+# Node
+/node_modules
+npm-debug.log
+yarn-error.log
+
+# IDEs and editors
+.idea/
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# Visual Studio Code
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+.history/*
+
+# Miscellaneous
+/.angular/cache
+.sass-cache/
+/connect.lock
+/coverage
+/libpeerconnection.log
+testem.log
+/typings
+
+# System files
+.DS_Store
+Thumbs.db

src/main/angular/README.md

@@ -0,0 +1,59 @@
+# Angular
+
+This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 20.3.1.
+
+## Development server
+
+To start a local development server, run:
+
+```bash
+ng serve
+```
+
+Once the server is running, open your browser and navigate to `http://localhost:4200/`. The application will automatically reload whenever you modify any of the source files.
+
+## Code scaffolding
+
+Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
+
+```bash
+ng generate component component-name
+```
+
+For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
+
+```bash
+ng generate --help
+```
+
+## Building
+
+To build the project run:
+
+```bash
+ng build
+```
+
+This will compile your project and store the build artifacts in the `dist/` directory. By default, the production build optimizes your application for performance and speed.
+
+## Running unit tests
+
+To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
+
+```bash
+ng test
+```
+
+## Running end-to-end tests
+
+For end-to-end (e2e) testing, run:
+
+```bash
+ng e2e
+```
+
+Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
+
+## Additional Resources
+
+For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.

src/main/angular/angular.json

@@ -0,0 +1,120 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "angular": {
+      "projectType": "application",
+      "schematics": {
+        "@schematics/angular:component": {
+          "style": "less",
+          "skipTests": true
+        },
+        "@schematics/angular:class": {
+          "skipTests": true
+        },
+        "@schematics/angular:directive": {
+          "skipTests": true
+        },
+        "@schematics/angular:guard": {
+          "skipTests": true
+        },
+        "@schematics/angular:interceptor": {
+          "skipTests": true
+        },
+        "@schematics/angular:pipe": {
+          "skipTests": true
+        },
+        "@schematics/angular:resolver": {
+          "skipTests": true
+        },
+        "@schematics/angular:service": {
+          "skipTests": true
+        }
+      },
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular/build:application",
+          "options": {
+            "browser": "src/main.ts",
+            "polyfills": [
+              "zone.js"
+            ],
+            "tsConfig": "tsconfig.app.json",
+            "inlineStyleLanguage": "less",
+            "assets": [
+              {
+                "glob": "**/*",
+                "input": "public"
+              }
+            ],
+            "styles": [
+              "src/styles.less"
+            ]
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kB",
+                  "maximumError": "1MB"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "4kB",
+                  "maximumError": "8kB"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "optimization": false,
+              "extractLicenses": false,
+              "sourceMap": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular/build:dev-server",
+          "configurations": {
+            "production": {
+              "buildTarget": "angular:build:production"
+            },
+            "development": {
+              "buildTarget": "angular:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        },
+        "extract-i18n": {
+          "builder": "@angular/build:extract-i18n"
+        },
+        "test": {
+          "builder": "@angular/build:karma",
+          "options": {
+            "polyfills": [
+              "zone.js",
+              "zone.js/testing"
+            ],
+            "tsConfig": "tsconfig.spec.json",
+            "inlineStyleLanguage": "less",
+            "assets": [
+              {
+                "glob": "**/*",
+                "input": "public"
+              }
+            ],
+            "styles": [
+              "src/styles.less"
+            ]
+          }
+        }
+      }
+    }
+  }
+}

src/main/angular/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "angular",
+  "version": "0.0.0",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "build": "ng build",
+    "watch": "ng build --watch --configuration development",
+    "test": "ng test"
+  },
+  "prettier": {
+    "printWidth": 100,
+    "singleQuote": true,
+    "overrides": [
+      {
+        "files": "*.html",
+        "options": {
+          "parser": "angular"
+        }
+      }
+    ]
+  },
+  "private": true,
+  "dependencies": {
+    "@angular/common": "^20.3.0",
+    "@angular/compiler": "^20.3.0",
+    "@angular/core": "^20.3.0",
+    "@angular/forms": "^20.3.0",
+    "@angular/platform-browser": "^20.3.0",
+    "@angular/router": "^20.3.0",
+    "@stomp/ng2-stompjs": "^8.0.0",
+    "@stomp/stompjs": "^7.2.0",
+    "chartjs-adapter-date-fns": "^3.0.0",
+    "date-fns": "^4.1.0",
+    "ng2-charts": "^8.0.0",
+    "rxjs": "~7.8.0",
+    "tslib": "^2.3.0",
+    "zone.js": "~0.15.0"
+  },
+  "devDependencies": {
+    "@angular/build": "^20.3.1",
+    "@angular/cli": "^20.3.1",
+    "@angular/compiler-cli": "^20.3.0",
+    "@types/jasmine": "~5.1.0",
+    "jasmine-core": "~5.9.0",
+    "karma": "~6.4.0",
+    "karma-chrome-launcher": "~3.2.0",
+    "karma-coverage": "~2.2.0",
+    "karma-jasmine": "~5.1.0",
+    "karma-jasmine-html-reporter": "~2.1.0",
+    "less": "^4.2.0",
+    "typescript": "~5.9.2"
+  }
+}

src/main/angular/src/app/COMMON.ts

@@ -0,0 +1,190 @@
+import {StompService} from "@stomp/ng2-stompjs";
+import {filter, map, Subscription} from "rxjs";
+import {HttpClient} from '@angular/common/http';
+import {Injectable} from '@angular/core';
+import {RxStompState} from '@stomp/rx-stomp';
+
+export type FromJson<T> = (json: any) => T;
+
+export type Next<T> = (item: T) => any;
+
+export type Compare<T> = (a: T, b: T) => number;
+
+export function stompServiceFactory() {
+  const stomp = new StompService({
+    url: url('ws', ['websocket']),
+    debug: false,
+    heartbeat_in: 2000,
+    heartbeat_out: 2000,
+    reconnect_delay: 2000,
+    headers: {},
+  });
+  stomp.activate();
+  return stomp;
+}
+
+export function validateNumber(json: any): number {
+  if (typeof json !== 'number') {
+    throw new Error("Not a number: " + JSON.stringify(json));
+  }
+  return json;
+}
+
+export function validateString(json: any): string {
+  if (typeof json !== 'string') {
+    throw new Error("Not a string: " + JSON.stringify(json));
+  }
+  return json;
+}
+
+export function validateDate(json: any): Date {
+  return new Date(Date.parse(validateString(json)));
+}
+
+export function validateBoolean(json: any): boolean {
+  if (typeof json !== 'boolean') {
+    throw new Error("Not a boolean: " + JSON.stringify(json));
+  }
+  return json;
+}
+
+export function validateList<T>(json: any, fromJson: FromJson<T>): T[] {
+  return json.map(fromJson);
+}
+
+export function url(protocol: string, path: any[]): string {
+  const secure = location.protocol.endsWith('s:') ? 's' : '';
+  return `${protocol}${secure}://${location.hostname}:8080/${path.join('/')}`;
+}
+
+export const compareDates = (a: Date, b: Date) => a.getTime() - b.getTime();
+
+export const compareStrings = (a: string, b: string) => a.localeCompare(b);
+
+export const compareNumbers = (a: number, b: number) => a - b;
+
+export const compareBool = (a: boolean, b: boolean) => (a ? 1 : 0) - (b ? 1 : 0);
+
+export function compareNullable<T>(compare: Compare<T>): Compare<T | null | undefined> {
+  return (a: T | null | undefined, b: T | null | undefined) => {
+    const aNull = a === null || a === undefined;
+    const bNull = b === null || b === undefined;
+    if (aNull) {
+      if (bNull) {
+        return 0;
+      } else {
+        return +1;
+      }
+    } else {
+      if (bNull) {
+        return -1;
+      } else {
+        return compare(a, b);
+      }
+    }
+  };
+}
+
+export function mapNotNull<T, R>(t: T | null | undefined, mapper: (t: T) => R): R | null {
+  if (t === null || t === undefined) {
+    return null;
+  }
+  return mapper(t);
+}
+
+export function mapNotNullOrGet<T, R>(t: T | null | undefined, mapper: (t: T) => R, getFallback: () => R): R {
+  if (t === null || t === undefined) {
+    return getFallback();
+  }
+  return mapper(t);
+}
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ApiService {
+
+  constructor(
+    private readonly http: HttpClient,
+    private readonly stompService: StompService,
+  ) {
+    this.websocketConnected(() => this._websocketError = false);
+    this.websocketDisconnected(() => this._websocketError = true);
+  }
+
+  get websocketError(): boolean {
+    return this._websocketError;
+  }
+
+  getSingle<T>(path: any[], fromJson: FromJson<T>, next: Next<T>): void {
+    this.http.get<any>(url('http', path)).pipe(map(fromJson)).subscribe(next);
+  }
+
+  getList<T>(path: any[], fromJson: FromJson<T>, next: Next<T[]>): void {
+    this.http.get<any[]>(url('http', path)).pipe(map(list => list.map(fromJson))).subscribe(next);
+  }
+
+  postSingle<T>(path: any[], data: any, fromJson: FromJson<T>, next: Next<T>): void {
+    this.http.post<any>(url('http', path), data).pipe(map(fromJson)).subscribe(next);
+  }
+
+  postList<T>(path: any[], data: any, fromJson: FromJson<T>, next: Next<T[]>): void {
+    this.http.post<any[]>(url('http', path), data).pipe(map(list => list.map(fromJson))).subscribe(next);
+  }
+
+  private _websocketError: boolean = false;
+
+  websocketConnected(next: Next<void>): Subscription {
+    return this.stompService.connectionState$.pipe(filter(state => state === RxStompState.OPEN)).subscribe(_ => next());
+  }
+
+  websocketDisconnected(next: Next<void>): Subscription {
+    return this.stompService.connectionState$.pipe(filter(state => state !== RxStompState.OPEN)).subscribe(_ => next());
+  }
+
+  subscribe<T>(topic: any[], fromJson: FromJson<T>, next: Next<T>): Subscription {
+    return this.stompService
+      .subscribe(topic.join("/"))
+      .pipe(
+        map(message => message.body),
+        map(b => JSON.parse(b)),
+        map(j => fromJson(j)),
+      )
+      .subscribe(next);
+  }
+
+}
+
+export abstract class CrudService<T> {
+
+  protected constructor(
+    readonly api: ApiService,
+    readonly path: any[],
+    readonly fromJson: FromJson<T>,
+  ) {
+    //
+  }
+
+  findAll(next: Next<T[]>): void {
+    this.getList(["findAll"], next);
+  }
+
+  protected getSingle(path: any[], next: Next<T>) {
+    this.api.getSingle<T>([...this.path, ...path], this.fromJson, next);
+  }
+
+  protected getList(path: any[], next: Next<T[]>) {
+    this.api.getList<T>([...this.path, ...path], this.fromJson, next);
+  }
+
+  protected postSingle(path: any[], data: any, next: Next<T>) {
+    this.api.postSingle<T>([...this.path, ...path], data, this.fromJson, next);
+  }
+
+  subscribe(next: Next<T>): Subscription {
+    const subs: Subscription[] = [];
+    subs.push(this.api.subscribe([...this.path], this.fromJson, next));
+    return new Subscription(() => subs.forEach(sub => sub.unsubscribe()));
+  }
+
+}

src/main/angular/src/app/app.config.ts

@@ -0,0 +1,17 @@
+import {ApplicationConfig, provideBrowserGlobalErrorListeners, provideZoneChangeDetection} from '@angular/core';
+import {provideRouter} from '@angular/router';
+
+import {routes} from './app.routes';
+import {provideHttpClient} from '@angular/common/http';
+import {stompServiceFactory} from './COMMON';
+import {StompService} from '@stomp/ng2-stompjs';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideBrowserGlobalErrorListeners(),
+    provideZoneChangeDetection({eventCoalescing: true}),
+    provideRouter(routes),
+    provideHttpClient(),
+    {provide: StompService, useFactory: stompServiceFactory},
+  ]
+};

src/main/angular/src/app/app.html

@@ -0,0 +1,3 @@
+<app-plot></app-plot>
+
+<router-outlet/>

src/main/angular/src/app/app.routes.ts

@@ -0,0 +1,3 @@
+import { Routes } from '@angular/router';
+
+export const routes: Routes = [];

src/main/angular/src/app/app.ts

@@ -0,0 +1,13 @@
+import { Component, signal } from '@angular/core';
+import { RouterOutlet } from '@angular/router';
+import {Plot} from './plot/plot';
+
+@Component({
+  selector: 'app-root',
+  imports: [RouterOutlet, Plot],
+  templateUrl: './app.html',
+  styleUrl: './app.less'
+})
+export class App {
+  protected readonly title = signal('angular');
+}

src/main/angular/src/app/plot/plot.html

@@ -0,0 +1,3 @@
+<div #container class="container">
+  <canvas #chartCanvas></canvas>
+</div>

src/main/angular/src/app/plot/plot.less

@@ -0,0 +1,4 @@
+.container {
+  width: 100%;
+  height: 100%;
+}

src/main/angular/src/app/plot/plot.ts

@@ -0,0 +1,202 @@
+import {AfterViewInit, Component, ElementRef, OnDestroy, ViewChild} from '@angular/core';
+import {BarController, BarElement, CategoryScale, Chart, ChartDataset, ChartType, Filler, Legend, LinearScale, LineController, LineElement, PointElement, TimeScale, Title, Tooltip} from 'chart.js';
+import {SeriesService} from "../series/series.service";
+import 'chartjs-adapter-date-fns';
+import {Series} from '../series/Series';
+import {Interval} from '../series/Interval';
+import {MinMaxAvg, PointMapper, toAvg, toBool, toDelta, toMax, toMin} from '../series/MinMaxAvg';
+import {SeriesType} from '../series/SeriesType';
+
+Chart.register(
+  CategoryScale,
+  LinearScale,
+  BarController,
+  BarElement,
+  LineController,
+  LineElement,
+  PointElement,
+  Title,
+  Tooltip,
+  Legend,
+  TimeScale,
+  Filler,
+);
+
+const ENERGY_PRODUCE = 1;
+
+const POWER_PRODUCE = 1 + 1;
+
+const ENERGY_DELIVER = 5;
+
+const POWER_DELIVER = 5 + 1;
+
+const ENERGY_PURCHASE = 3;
+
+const POWER_PURCHASE = 3 + 1;
+
+const GARDEN_TEMPERATURE = 8;
+
+const BEDROOM_TEMPERATURE = 12;
+
+const BUFFER_TEMPERATURE = 24;
+
+const CIRCUIT_SUPPLY_TEMPERATURE = 20;
+
+const HEATER = 28;
+
+@Component({
+  selector: 'app-plot',
+  imports: [],
+  templateUrl: './plot.html',
+  styleUrl: './plot.less'
+})
+export class Plot implements AfterViewInit, OnDestroy {
+
+  @ViewChild('chartCanvas')
+  canvasRef!: ElementRef<HTMLCanvasElement>;
+
+  @ViewChild('container')
+  chartContainer!: ElementRef<HTMLDivElement>;
+
+  private chart!: Chart;
+
+  constructor(
+    readonly seriesService: SeriesService,
+  ) {
+    //
+  }
+
+  private interval = Interval.FIVE;
+
+  private FACTOR = 0.5;
+
+  private duration = (this.interval === Interval.FIVE ? 24 * 60 / 5 : this.interval === Interval.HOUR ? 7 * 24 : this.interval === Interval.DAY ? 31 : this.interval === Interval.WEEK ? 52 : 99) * this.FACTOR;
+
+  ngAfterViewInit() {
+    this.chart = new Chart(this.canvasRef.nativeElement, {
+      type: 'line',
+      data: {
+        datasets: [],
+      },
+      options: {
+        responsive: true,
+        maintainAspectRatio: false,
+        animation: false,
+        plugins: {
+          legend: {
+            display: true,
+            labels: {
+              usePointStyle: true,
+            },
+          },
+          tooltip: {
+            position: 'nearest',
+            mode: 'x',
+            usePointStyle: true,
+          },
+        },
+        scales: {
+          x: {
+            type: 'time',
+          },
+        }
+      }
+    });
+
+    this.scaleRight = false;
+    this.fetch(HEATER, "line", '#ff7373', 1, undefined, true, MinMaxAvg.AVG);
+    this.fetch(ENERGY_PRODUCE, "bar", '#53d32b', 1, 'a', false, MinMaxAvg.AVG);
+    this.fetch(ENERGY_PURCHASE, "bar", '#ff8000', 1, 'a', false, MinMaxAvg.AVG);
+    this.fetch(ENERGY_DELIVER, "bar", '#ff5bfc', -1, 'a', false, MinMaxAvg.AVG);
+    // this.fetch(POWER_PRODUCE, "bar", '#53d32b', 1, undefined, false);
+    // this.fetch(POWER_PURCHASE, "bar", '#ff8000', 1, undefined, false);
+    // this.fetch(POWER_DELIVER, "bar", '#ff5bfc', -1, undefined, false);
+    this.fetch(GARDEN_TEMPERATURE, "line", '#00aa00', 1, undefined, false, MinMaxAvg.AVG);
+    this.fetch(BEDROOM_TEMPERATURE, "line", '#0000FF', 1, undefined, false, MinMaxAvg.AVG);
+    this.fetch(BUFFER_TEMPERATURE, "line", '#AA00AA', 1, undefined, false, MinMaxAvg.AVG);
+    this.fetch(CIRCUIT_SUPPLY_TEMPERATURE, "line", '#FF0000', 1, undefined, false, MinMaxAvg.AVG);
+    // this.fetch(POWER_PRODUCE, "line", '#ffc400', 1, undefined, false, MinMaxAvg.MAX);
+  }
+
+  scaleRight: boolean = false;
+
+  private fetch(id: number, type: ChartType, color: string, factor: number, stack: string | undefined, fill: any, minMaxAvg: MinMaxAvg) {
+    this.chart.data.datasets.push({
+      data: [],
+      type: type,
+      fill: fill,
+      stack: stack,
+      pointRadius: 4,
+      borderWidth: 1,
+      barThickness: 'flex',
+      borderColor: color,
+      pointBackgroundColor: color,
+      backgroundColor: color + "33",
+    });
+    const dataset: ChartDataset<any, any> = this.chart.data.datasets[this.chart.data.datasets.length - 1];
+    this.seriesService.getById(id, series => {
+      if (this.chart.options.scales) {
+        if (!this.chart.options.scales["y-" + series.unit]) {
+          this.chart.options.scales["y-" + series.unit] = {
+            display: series.unit !== "",
+            min: series.unit !== "" ? undefined : 0,
+            max: series.unit !== "" ? undefined : 4,
+            beginAtZero: true,
+            position: this.scaleRight ? 'right' : 'left',
+            title: {
+              display: true,
+              text: series.unit,
+            },
+          }
+          this.scaleRight = !this.scaleRight;
+        }
+      }
+      dataset.label = series.name;
+      dataset.yAxisID = "y-" + series.unit;
+      dataset.pointStyle = type === 'bar' || series.type === SeriesType.BOOL ? 'rect' : 'crossRot';
+      dataset.spanGaps = series.type === SeriesType.BOOL ? Infinity : this.interval.spanGaps;
+      if (series.type === SeriesType.BOOL) {
+        dataset.pointRadius = 0;
+      }
+      this.points(series, this.interval, 0, this.duration, minMaxAvg, factor, dataset);
+    });
+  }
+
+  ngOnDestroy(): void {
+    this.chart.destroy();
+  }
+
+  private points(
+    series: Series,
+    interval: Interval,
+    offset: number,
+    duration: number,
+    type: MinMaxAvg,
+    factor: number,
+    dataset: ChartDataset<any, any>[][number],
+  ) {
+    let mapper: PointMapper;
+    switch (series.type) {
+      case SeriesType.BOOL:
+        mapper = toBool;
+        break;
+      case SeriesType.DELTA:
+        mapper = toDelta;
+        break;
+      case SeriesType.VARYING:
+        mapper = type === MinMaxAvg.MIN ? toMin : type === MinMaxAvg.MAX ? toMax : toAvg;
+        break;
+    }
+    this.seriesService.points(
+      series,
+      interval,
+      offset,
+      duration,
+      points => {
+        dataset.data = mapper(points, factor);
+        this.chart.update();
+      },
+    );
+  }
+
+}

src/main/angular/src/app/series/Interval.ts

@@ -0,0 +1,36 @@
+import {validateString} from "../COMMON";
+
+export class Interval {
+
+  private static values: Interval[] = [];
+
+  static readonly FIVE = new Interval("FIVE", 5 * 60 * 1000);
+
+  static readonly HOUR = new Interval("HOUR", 60 * 60 * 1000);
+
+  static readonly DAY = new Interval("DAY", 24 * 60 * 60 * 1000);
+
+  static readonly WEEK = new Interval("WEEK", 7 * 24 * 60 * 60 * 1000);
+
+  static readonly MONTH = new Interval("MONTH", 31 * 24 * 60 * 60 * 1000);
+
+  static readonly YEAR = new Interval("YEAR", 366 * 24 * 60 * 60 * 1000);
+
+  private constructor(
+    readonly name: string,
+    readonly spanGaps: number,
+  ) {
+    Interval.values.push(this);
+  }
+
+  static fromJson(json: any): Interval {
+    const name = validateString(json)
+    const interval = Interval.values.filter(i => i.name === name)[0];
+    if (!interval) {
+      throw new Error(`Not an Interval: ${JSON.stringify(json)}`);
+    }
+    return interval;
+  }
+
+}
+

src/main/angular/src/app/series/MinMaxAvg.ts

@@ -0,0 +1,95 @@
+export class Point {
+
+  constructor(
+    public x: number,
+    public y: number,
+  ) {
+    //
+  }
+
+}
+
+export  type PointMapper = (p: number[][], factor: number) => Point[];
+
+// noinspection JSUnusedLocalSymbols
+export function toBool(points: number[][], factor: number): Point[] {
+  const result = [];
+  let postPone: Point | null = null;
+  for (const p of points) {
+    const state = p[2] > 0;
+    const begin = {
+      x: p[0] * 1000,
+      y: state ? 1 : 0,
+    };
+    const end = {
+      x: p[1] * 1000,
+      y: state ? 1 : 0,
+    };
+    if (postPone) {
+      postPone.x = begin.x;
+      result.push(postPone);
+      postPone = null;
+    }
+    result.push(begin);
+    if (begin.x !== end.x) {
+      result.push(end);
+    } else {
+      postPone = end;
+    }
+  }
+  if (postPone) {
+    // postPone.x = Date.now();
+    result.push(postPone);
+  }
+  return result;
+}
+
+export function toDelta(points: number[][], factor: number): Point[] {
+  const result = [];
+  for (const p of points) {
+    result.push({
+      x: p[0] * 1000,
+      y: (p[2] - p[1]) * factor,
+    });
+  }
+  return result;
+}
+
+export function toMin(points: number[][], factor: number): Point[] {
+  const result = [];
+  for (const p of points) {
+    result.push({
+      x: p[0] * 1000,
+      y: p[1] * factor,
+    });
+  }
+  return result;
+}
+
+export function toMax(points: number[][], factor: number): Point[] {
+  const result = [];
+  for (const p of points) {
+    result.push({
+      x: p[0] * 1000,
+      y: p[2] * factor,
+    });
+  }
+  return result;
+}
+
+export function toAvg(points: number[][], factor: number): Point[] {
+  const result = [];
+  for (const p of points) {
+    result.push({
+      x: p[0] * 1000,
+      y: p[3] * factor,
+    });
+  }
+  return result;
+}
+
+export enum MinMaxAvg {
+  MIN = "MIN",
+  MAX = "MAX",
+  AVG = "AVG",
+}

src/main/angular/src/app/series/Series.ts

@@ -0,0 +1,24 @@
+import {validateNumber, validateString} from "../COMMON";
+import {SeriesType} from './SeriesType';
+
+export class Series {
+
+  constructor(
+    readonly id: number,
+    readonly name: string,
+    readonly unit: string,
+    readonly type: SeriesType,
+  ) {
+    //
+  }
+
+  static fromJson(json: any): Series {
+    return new Series(
+      validateNumber(json.id),
+      validateString(json.name),
+      validateString(json.unit),
+      validateString(json.type) as SeriesType,
+    );
+  }
+
+}

src/main/angular/src/app/series/SeriesType.ts

@@ -0,0 +1,5 @@
+export enum SeriesType {
+  BOOL = "BOOL",
+  DELTA = "DELTA",
+  VARYING = "VARYING",
+}

src/main/angular/src/app/series/series.service.ts

@@ -0,0 +1,31 @@
+import {Injectable} from '@angular/core';
+import {ApiService, CrudService, Next, validateNumber} from "../COMMON";
+import {Series} from './Series';
+import {Interval} from './Interval';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class SeriesService extends CrudService<Series> {
+
+  constructor(
+    api: ApiService,
+  ) {
+    super(api, ['Series'], Series.fromJson);
+  }
+
+  points(series: Series, interval: Interval, offset: number, duration: number, next: Next<number[][]>): void {
+    const request = {
+      id: series.id,
+      interval: interval.name,
+      offset: offset,
+      duration: duration,
+    };
+    this.api.postList([...this.path, 'points'], request, (outer: any[]) => outer.map(validateNumber), next);
+  }
+
+  getById(id: number, next: Next<Series>) {
+    this.getSingle([id], next);
+  }
+
+}

src/main/angular/src/index.html

@@ -0,0 +1,14 @@
+<!doctype html>
+<!--suppress HtmlUnknownTarget -->
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Angular</title>
+  <base href="/">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
+</head>
+<body>
+<app-root></app-root>
+</body>
+</html>

src/main/angular/src/main.ts

@@ -0,0 +1,6 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { appConfig } from './app/app.config';
+import { App } from './app/app';
+
+bootstrapApplication(App, appConfig)
+  .catch((err) => console.error(err));

src/main/angular/src/styles.less

@@ -0,0 +1,4 @@
+html, body {
+  height: 100%;
+  margin: 0;
+}

src/main/angular/tsconfig.app.json

@@ -0,0 +1,15 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/app",
+    "types": []
+  },
+  "include": [
+    "src/**/*.ts"
+  ],
+  "exclude": [
+    "src/**/*.spec.ts"
+  ]
+}

src/main/angular/tsconfig.json

@@ -0,0 +1,31 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "skipLibCheck": true,
+    "isolatedModules": true,
+    "experimentalDecorators": true,
+    "importHelpers": true,
+    "target": "ES2022",
+    "module": "preserve"
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "typeCheckHostBindings": true,
+    "strictTemplates": true
+  },
+  "files": [],
+  "references": [
+    {
+      "path": "./tsconfig.app.json"
+    }
+  ]
+}

src/main/angular/tsconfig.spec.json

@@ -0,0 +1,14 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/spec",
+    "types": [
+      "jasmine"
+    ]
+  },
+  "include": [
+    "src/**/*.ts"
+  ]
+}

src/main/java/de/ph87/data/series/SeriesController.java

@@ -4,6 +4,7 @@ import lombok.NonNull;
 import lombok.RequiredArgsConstructor;
 import org.springframework.web.bind.annotation.CrossOrigin;
 import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.PathVariable;
 import org.springframework.web.bind.annotation.PostMapping;
 import org.springframework.web.bind.annotation.RequestBody;
 import org.springframework.web.bind.annotation.RequestMapping;
@@ -26,9 +27,9 @@ public class SeriesController {
     return seriesRepository.findAllDto();
   }
 
-  @PostMapping("findByName")
-  public SeriesDto findByName(@NonNull @RequestBody final String name) {
-    return seriesRepository.findDtoByName(name);
+  @GetMapping("{id}")
+  public SeriesDto getById(@PathVariable final long id) {
+    return seriesRepository.getDtoById(id);
   }
 
   @PostMapping("points")

src/main/java/de/ph87/data/series/SeriesRepository.java

@@ -12,9 +12,11 @@ public interface SeriesRepository extends ListCrudRepository<Series, Long> {
   @NonNull
   Optional<Series> findByName(@NonNull String seriesName);
 
-  @Query("select new de.ph87.data.series.SeriesDto(s) from Series s where s.name = :name")
-  SeriesDto findDtoByName(@NonNull String name);
+  @NonNull
+  @Query("select new de.ph87.data.series.SeriesDto(s) from Series s where s.id = :id")
+  SeriesDto getDtoById(long id);
 
+  @NonNull
   @Query("select new de.ph87.data.series.SeriesDto(t) from Series t")
   List<SeriesDto> findAllDto();