Visual Components

Initialisierung

document.addEventListener('kryzo:ready', async ({ detail: { VISUAL } }) => {
    /* Ab hier stellen alle VISUAL Funktionen & Elemente zur Verfügung */
});

GanttChart

Das GanttChart ermöglicht die Visualisierung zeitbasierter Abläufe, Aufgaben und Projektphasen innerhalb einer horizontalen Zeitleiste. Es eignet sich insbesondere zur Darstellung von Projektplänen, Entwicklungszyklen, Produktionsprozessen oder anderen terminabhängigen Vorgängen. Aufgaben können frei positioniert, farblich hervorgehoben und mit einem individuellen Fortschrittswert versehen werden. Änderungen an Zeiträumen oder Fortschritten lassen sich zur Laufzeit animiert aktualisieren und ermöglichen dadurch die Umsetzung interaktiver Projekt- und Statusübersichten.

Einbindung

VISUAL.ganttChart(el, {
    today:    new Date(),
    padLeft:  120,
    rowH:     32,
    tipBg:    '#1a1a2e',
    tipColor: '#fff',
    tasks: [
        { label: 'Design',     start: '2024-01-01', end: '2024-01-12', color: '#4082dd', progress: 1.0  },
        { label: 'Frontend',   start: '2024-01-08', end: '2024-01-28', color: '#29ccb6', progress: 0.65 },
        { label: 'Backend',    start: '2024-01-10', end: '2024-02-05', color: '#763bdb', progress: 0.4  },
        { label: 'Testing',    start: '2024-01-25', end: '2024-02-10', color: '#f5a623', progress: 0.1  },
        { label: 'Deployment', start: '2024-02-08', end: '2024-02-15', color: '#1cd453', progress: 0    },
    ],
});

Update

VISUAL.update(el, {
    tasks: [
        { label: 'Design', start: '2024-01-01', end: '2024-01-15', color: '#4082dd', progress: 1.0 },
        // ...
    ]
},3000);        // Dauer Animation - default: 600

Beispiel

BubbleChart

BubbleCharts ermöglichen die gleichzeitige Darstellung mehrerer Dimensionen innerhalb eines einzigen Diagramms. Die Position einer Blase auf der X- und Y-Achse repräsentiert zwei Wertebereiche, während ihre Größe einen zusätzlichen Kennwert visualisiert. Dadurch lassen sich Zusammenhänge, Verteilungen und Ausreißer innerhalb komplexer Datensätze besonders effektiv darstellen.

Einbindung

VISUAL.bubbleChart(el, {
    height:   220,
    xLabel:   'Umsatz',
    yLabel:   'Wachstum',
    rMin:     6,
    rMax:     40,
    tipBg:    '#1a1a2e',        // Tooltip Hintergrund
    tipColor: '#ffffff',        // Tooltip Textfarbe
    bubbles: [
        { x: 20,  y: 80,  r: 30, color: '#4082dd', label: 'Alpha',  value: 1200 },
        { x: 55,  y: 45,  r: 18, color: '#29ccb6', label: 'Beta',   value: 740  },
        { x: 75,  y: 60,  r: 22, color: '#763bdb', label: 'Gamma',  value: 890  },
        { x: 40,  y: 25,  r: 10, color: '#f5a623', label: 'Delta',  value: 310  },
        { x: 90,  y: 85,  r: 14, color: '#1cd453', label: 'Omega',  value: 520  },
    ],
});

Update

VISUAL.update(el, {
    bubbles: [
        { x: 35, y: 70, r: 25, color: '#4082dd', label: 'Alpha', value: 1450 },
        // ...
    ]
},3000);        // Dauer Animation - default: 600

Beispiel

Pie Charts

Pie Charts ermöglichen die Darstellung von Anteilen und Verteilungen innerhalb eines Datensatzes in einer leicht verständlichen Kreis- oder Donut-Darstellung. Jeder Abschnitt repräsentiert einen prozentualen Anteil am Gesamtwert und kann individuell beschriftet und eingefärbt werden.

Einbindung

VISUAL.pieChart(el, {
    size:       220,
    innerR:     0.44,   // 0 = Vollkreis (Pie), > 0 = Donut
    totalLabel: 'gesamt',
    slices: [
        { label: 'Latine usu ex duo', value: 38, color: '#4082dd' },
        { label: 'Chord vocibus',     value: 24, color: '#29ccb6' },
        { label: 'Uex duo latine',    value: 18, color: '#1cd453' },
        { label: 'Adole scens dui',   value: 12, color: '#763bdb' },
        { label: 'Primis tritani',    value:  8, color: '#f5a623' },
    ],
});

Update

VISUAL.update(el, {
    slices: [
        { label: 'Latine usu ex duo', value: 45, color: '#4082dd' },
        // ...
    ]
},3000);        // Dauer Animation - default: 600

Beispiel

BarChart

BarCharts bieten eine kompakte Möglichkeit zur Visualisierung einzelner Messwerte in Balkenform. Jeder Wert wird als vertikale Säule dargestellt, wodurch sich Entwicklungen, Vergleiche und Verteilungen innerhalb eines Datensatzes schnell erfassen lassen.

Einbindung

VISUAL.barChart(el, {
    height:   60,
    barWidth: 6,
    gap:      6,
    rx:       3,
    color:    '#29ccb6',
    xLabels:  ['1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18'],
    values: [60, 40, 80, 55, 90, 45, 70, 35, 85, 50, 75, 30, 95, 65, 40, 80, 55, 70],
});

Update

VISUAL.update(el, {
    values: [10, 30, 90, 25, 40, 65, 10, 45, 55, 30, 25, 30, 95, 65, 40, 80, 55, 70],
},3000);        // Dauer Animation - default: 600

Beispiel

DotMatrix Chart

DotMatrix Charts ermöglichen die Darstellung diskreter Daten in einer rasterbasierten Punktmatrix. Werte werden dabei als aktivierte oder deaktivierte Zellen visualisiert, wodurch sich Muster, Verteilungen und Intensitäten besonders kompakt und visuell klar abbilden lassen.

Einbindung

VISUAL.dotMatrix(el, {
    cols: 10, rows: 8,
    dotR: 5, gap: 6,
    yLabels: ['01','03','05','07','09','11','13','15'],
    legend: [
        { label: 'DESERUNT GRAECE IRUIRE', color: '#ccc' },
        { label: 'PRIMIS TRITANI',          color: '#8E5BF1' },
    ],
    colorActive:   '#8E5BF1',
    colorInactive: '#d0d0d0',
    matrix: [
        [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1], // Zeile 0 = unten
        [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
        [0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
        [0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,0],
        [0,0,0,1,1,1,1,1,1,1,1,1,1,1,0,0],
        [0,0,0,1,1,1,1,1,1,1,1,1,0,0,0,0],
        [0,0,0,0,0,0,1,1,1,0,0,0,0,0,0,0],
        [0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0]
    ],
});

Update

VISUAL.update(el, {
    matrix: [
        [0,0,1,1,1,0,1,1,1,0,0,1,1,1,1,1],
        ...
    ]
},3000);        // Dauer Animation - default: 600

Beispiel

AreaChart

AreaCharts dienen zur Darstellung von zeit- oder verlaufsbasierten Datenreihen in einer flächigen Visualisierung. Mehrere Serien können gleichzeitig innerhalb eines Charts abgebildet werden, wodurch sich Entwicklungen, Trends und Unterschiede zwischen Datensätzen direkt vergleichen lassen. Die Komponente ist für dynamische Daten ausgelegt und unterstützt animierte Updates ohne vollständige Neuinitialisierung.

Einbindung

VISUAL.areaChart(el, {
    height:   200,
    statsH:   72,
    stats: [
        { value: 23, label: 'LATINE USU',      color: '#3b2de0' },
        { value: 56, label: 'TRACTATOS',       color: '#4a6fe8' },
        { value: 23, label: 'USU LATINE',      color: '#29b8cc' },
        { value: 56, label: 'TRAC LATINE',     color: '#29ccb6' },
    ],
    xLabels: ['01','02','03','04','05','06','07','08','09','10'],
    series: [
        { values: [20, 45, 70, 90, 85, 75, 88, 72, 50, 25], color: '#3b2de0' },
        { values: [10, 35, 60, 78, 65, 55, 72, 58, 38, 15], color: '#4a6fe8' },
        { values: [8,  28, 52, 68, 55, 45, 62, 48, 30, 10], color: '#29b8cc' },
        { values: [5,  18, 40, 52, 42, 35, 50, 35, 20, 5 ], color: '#29ccb6' },
    ],
});

Update

// Selbe Anzahl pro Parameter wie bei Initialisierung verwenden

VISUAL.update(el, {
    stats:  [ { value: 31 }, { value: 62 }, { value: 91 }, { value: 72 } ],
    series: [ ... ],
},3000);        // Dauer Animation - default: 600

Beispiel

RingCharts

RingCharts bieten eine kompakte Möglichkeit zur Visualisierung mehrdimensionaler Daten in ringförmiger Darstellung. Mehrere Werte können dabei gleichzeitig innerhalb eines gemeinsamen Containers dargestellt und visuell voneinander abgegrenzt werden. Jeder Ring repräsentiert dabei eine eigenständige Datenreihe mit individuellen Parametern wie Wert, Maximalwert, Farbe und Beschriftung.

Einbindung

VISUAL.ringChart(el, {
    gap:       10,
    ringWidth: 10,
    rings: [
        { value: 29.472, max: 100,  label: 'LATINE USU EX DUO', color: '#6c8ebf', unit: '' },
        { value: 38.552, max: 100,  label: 'CHORD VOCIBUS',      color: '#5ba89e' },
        { value: 31.346, max: 100,  label: 'UEX DUO LATINE',     color: '#6dbf85' },
        { value: 30.255, max: 100,  label: 'ADOLE SCENS DUI',    color: '#a08ebf' },
    ]
});

Update

VISUAL.update(el, {
    rings: [
        { value: 35.1, color: '#6c8ebf' },
        // ... selbe Anzahl wie bei Initialisierung verwenden
    ]
},3000);        // Dauer Animation - default: 600

Beispiel

Gauge Element

Das Gauge Element dient zur visuellen Darstellung numerischer Werte innerhalb eines definierten Wertebereichs. Typische Anwendungsfälle sind Statusanzeigen, System-Monitoring, Performance-Daten, Auslastungen oder Dashboard-Komponenten. Nach der Initialisierung können Werte, Farben und weitere Eigenschaften jederzeit dynamisch aktualisiert werden, ohne das Element neu erzeugen zu müssen. Dadurch eignet sich das Gauge insbesondere für Echtzeitdaten und regelmäßig aktualisierte Anwendungsoberflächen.

Einbindung

/*
    Das Gauge-Element ist responsive und passt sich immer 
    dem Eltern-Element mit 100% Breite und Aspect Ratio 1 / 1 an.
*/
VISUAL.gauge(document.querySelector('.cpu'), {
    value: 72, min: 0, max: 100,
    unit:  '%', label: 'CPU',
    color: '#378ADD'
});

Update Daten

VISUAL.update(document.querySelector('.cpu'), { 
    value: 95, 
    color: '#E24B4A' 
},3000);        // Dauer Animation - default: 600

Beispiel

Progress Bar

Die Progress Bar dient zur visuellen Darstellung von Fortschritts- oder Statuswerten innerhalb definierter Minimal- und Maximalbereiche. Sie eignet sich insbesondere für Systemmetriken, Ladezustände, Prozesse oder dynamische Datenanzeigen in Dashboards und UI-Komponenten.

VISUAL.progressBar(document.querySelector('.cpu'), {
    value:      72,                     /* Aktueller Wert */
    min:        0,                      /* Min Wert */
    max:        100,                    /* Max Wert */
    label:      'CPU',                  /* Text linkes Label */
    labelWidth: '25%',                  /* Breite des Labels */
    unit:       '%',                    /* Anzuzeigende Einheit */
    color:      'var(--primary)',       /* Farbe gefüllter Track der Progressbar */
    height:     8                       /* Höhe der Progressbar */
});

Update Daten

VISUAL.update(document.querySelector('.cpu'), { 
    value: 95,
    color: 'green'
},3000);        // Dauer Animation - default: 600