by-lib

Diese Angular-Bibliothek (by-lib) bietet wiederverwendbare, visuell ansprechende Komponenten zur Darstellung von Klimadaten (Temperatur, Luftfeuchtigkeit, VPD) sowie einen integrierten Logic Analyzer für digitale Zustände.

🌐 Offizielle Testseite: https://bylib.bbnb.link/

Installation

Um die Bibliothek in deinem Angular-Projekt zu verwenden, installiere sie über npm (sobald sie veröffentlicht ist):

npm install by-lib

Hauptkomponente <by-lib>

Die Hauptkomponente ist äußerst flexibel und unterstützt verschiedene Darstellungsmodi, die über das [mode] Input gesteuert werden.

1. Einzelwert-Anzeigen (mode="line" | "lineV" | "circle" | "rectangle")

Für die Darstellung der aktuellen Ist-Werte.

<!-- Horizontale Balken -->
<by-lib mode="line" [data]="myData" [config]="myConfig"></by-lib>

<!-- Vertikale Balken -->
<by-lib mode="lineV" [data]="myData" [config]="myConfig"></by-lib>

<!-- Kreisdiagramme -->
<by-lib mode="circle" [data]="myData" [config]="myConfig"></by-lib>

<!-- Einfache Rechteck-Karten (Mit optionalem cardPadding, cardMinWidth, cardWidth und cardMaxWidth zur Steuerung der Größe) -->
<by-lib mode="rectangle" [data]="myData" [config]="myConfig" [cardPadding]="'10px'" [cardMinWidth]="'80px'" [cardWidth]="'120px'" [cardMaxWidth]="'150px'"></by-lib>

2. Kombiniertes Diagramm & Logic Analyzer (mode="multiple")

Dieser Modus zeigt historische analoge Daten (z.B. Temperaturverlauf) als Liniendiagramm an. Zusätzlich kann darunter ein Logic Analyzer eingeblendet werden, der bis zu 6 digitale Signale (z.B. Schaltzustände von Relais) zeitsynchron zum analogen Diagramm darstellt.

✨ Neu: Die Legende ist nun interaktiv! Durch Klicken auf einen Namen in der Legende (unterhalb des Diagramms) können einzelne Linien (z.B. Temperatur, RLF) oder Logic-Analyzer-Spuren dynamisch ein- und ausgeblendet werden.

<by-lib 
  mode="multiple" 
  [config]="myConfig" 
  [historyData]="myHistoryData"
  [logicConfig]="myLogicConfig"
  [logicHistory]="myLogicHistory">
</by-lib>

Datenmodelle (Types)

Die Typdefinitionen sind darauf ausgelegt, maximale Flexibilität zu bieten – alle Eigenschaften sind optional (?).

Analoge Daten & Konfiguration

Aktuelle Werte (DataInput):

export interface DataInput {
  temp?: number;
  rlf?: number;
  vpd?: number;
  solltemp?: number;
  sollvpd?: number;
}

Verlaufswerte (HistoryDataInput):

export interface HistoryDataInput {
  timestamps?: string[];
  historytemp?: number[];
  historyrlf?: number[];
  historyvpd?: number[];
  historysolltemp?: number[];
  historysollvpd?: number[];
}

Konfiguration & Styling (ConfigInput):

export interface ConfigInput {
  // Sichtbarkeit
  Statustemp?: boolean;
  Statusrlf?: boolean;
  Statusvpd?: boolean;
  Statussolltemp?: boolean;
  Statussollvpd?: boolean;
  
  // Namen
  Nametemp?: string;
  Namerlf?: string;
  Namevpd?: string;
  Namesolltemp?: string;
  Namesollvpd?: string;
  
  // Farben
  Colortemp?: string;
  Colorrlf?: string;
  Colorvpd?: string;
  Colorsolltemp?: string;
  Colorsollvpd?: string;

  // Linienstärke (nur für 'multiple' Modus)
  Widthtemp?: number;
  Widthrlf?: number;
  Widthvpd?: number;
  Widthsolltemp?: number;
  Widthsollvpd?: number;

  // Linienstil, z.B. '5,5' für gestrichelt (nur für 'multiple' Modus)
  Styletemp?: string; 
  Stylerlf?: string;
  Stylevpd?: string;
  Stylesolltemp?: string;
  Stylesollvpd?: string;

  // Schalter für die Hilfslinien im Diagramm (nur für 'multiple' Modus)
  ShowGrid?: boolean;

  // Schalter für die Legende unterhalb des Diagramms (nur für 'multiple' Modus)
  ShowLegend?: boolean;
}

Digitale Daten (Logic Analyzer)

Konfiguration (LogicAnalyzerConfig):

export interface LogicAnalyzerConfig {
  Status1?: boolean; // Ein-/Ausschalten der Spur 1
  Status2?: boolean;
  Status3?: boolean;
  Status4?: boolean;
  Status5?: boolean;
  Status6?: boolean;

  Name1?: string; // Beschriftung der Spur 1
  Name2?: string;
  Name3?: string;
  Name4?: string;
  Name5?: string;
  Name6?: string;

  Color1?: string; // Farbe der Linie für Spur 1
  Color2?: string;
  Color3?: string;
  Color4?: string;
  Color5?: string;
  Color6?: string;

  // Linienstärken für den Logikanalysator
  Width1?: number;
  Width2?: number;
  Width3?: number;
  Width4?: number;
  Width5?: number;
  Width6?: number;

  // Schalter für die Anzeige der Port-Namen (P1-P6) links neben den Graphen
  ShowPortLabels?: boolean;
}

Verlaufswerte (LogicAnalyzerHistory):

export interface LogicAnalyzerHistory {
  // Arrays mit true/false oder 1/0. 
  // WICHTIG: Die Länge muss identisch mit historyData.timestamps sein!
  history1?: (boolean | number)[];
  history2?: (boolean | number)[];
  history3?: (boolean | number)[];
  history4?: (boolean | number)[];
  history5?: (boolean | number)[];
  history6?: (boolean | number)[];
}

Erweiterte Chart-Typen (Neu in types.ts)

Für den Einsatz in komplexeren Multi-Diagrammen stehen nun folgende strukturierte Interfaces zur Verfügung:

export interface ChartDataPoint {
  TarihSaat: Date;
  value: number;
}

export interface PortDataPoint {
  TarihSaat: Date;
  state: 'ON' | 'OFF';
}

export interface ChartInputData {
  title?: string;
  temperature?: ChartDataPoint[];
  rlf?: ChartDataPoint[];
  vpd?: ChartDataPoint[];
  solltemp?: ChartDataPoint[];
  sollvpd?: ChartDataPoint[];
  ports?: {
    [key: string]: PortDataPoint[];
  };
  config?: {
    tempColor?: string;
    tempName?: string;
    tempWidth?: number;
    tempStyle?: string;
    
    rlfColor?: string;
    rlfName?: string;
    rlfWidth?: number;
    rlfStyle?: string;
    
    vpdColor?: string;
    vpdName?: string;
    vpdWidth?: number;
    vpdStyle?: string;
    vpdOffset?: number; // Verschiebt die rechte VPD Y-Achse nach unten, um Überlappungen mit anderen Linien zu vermeiden.
    
    solltempColor?: string;
    solltempName?: string;
    solltempWidth?: number;
    solltempStyle?: string;
    
    sollvpdColor?: string;
    sollvpdName?: string;
    sollvpdWidth?: number;
    sollvpdStyle?: string;
    
    portName?: { [key: string]: string };
    portState?: { [key: string]: boolean };
    portColors?: { [key: string]: string };
    portWidths?: { [key: string]: number };
    
    yAxisLeftRange?: [number, number];
    yAxisRightRange?: [number, number];
    portYAxisHeight?: number;
    
    Statustemp?: boolean;
    Statusrlf?: boolean;
    Statusvpd?: boolean;
    Statussolltemp?: boolean;
    Statussollvpd?: boolean;

    ShowGrid?: boolean;
    ShowLegend?: boolean;
    ShowPortLabels?: boolean;
  };
}

Entwicklung & Build

Dieses Projekt wurde mit Angular CLI Version 21.2.0 generiert.

Lizenz

MIT