0
# Visualization Components
1

2
The DeepLearning4J UI components system provides a comprehensive set of Java classes for building custom visualizations, charts, and interactive displays. These components can be used to create standalone HTML reports or integrated into the web UI.
3

4
## Core Component System
5

6
### Component Base Class
7

8
The abstract base class for all UI components.
9

10
```java { .api }
11
public abstract class Component {
12
    // Base properties and methods for all components
13
    protected String componentType;
14
    
15
    // Abstract methods implemented by subclasses
16
    public abstract String getComponentType();
17
}
18
```
19

20
### Component Styling
21

22
Base styling system for customizing component appearance.
23

24
```java { .api }
25
public class Style {
26
    // Base styling properties
27
    protected String backgroundColor;
28
    protected String color;
29
    protected String fontFamily;
30
    protected String fontSize;
31
    
32
    // Styling methods
33
    public Style backgroundColor(String color);
34
    public Style color(String color);
35
    public Style fontFamily(String family);
36
    public Style fontSize(String size);
37
}
38
```
39

40
### Length Units
41

42
Enumeration for specifying measurement units in styling.
43

44
```java { .api }
45
public enum LengthUnit {
46
    px,     // Pixels
47
    em,     // Em units
48
    percent, // Percentage
49
    pt,     // Points
50
    rem,    // Root em units
51
    vh,     // Viewport height
52
    vw      // Viewport width
53
}
54
```
55

56
## Chart Components
57

58
### Chart Base Class
59

60
Abstract base class for all chart components.
61

62
```java { .api }
63
public abstract class Chart extends Component {
64
    protected String title;
65
    protected List<String> xAxisLabels;
66
    protected List<String> yAxisLabels;
67
    protected StyleChart style;
68
    
69
    // Chart configuration methods
70
    public Chart title(String title);
71
    public Chart setXAxisLabels(List<String> labels);
72
    public Chart setYAxisLabels(List<String> labels);
73
    public Chart setStyle(StyleChart style);
74
}
75
```
76

77
### Line Chart
78

79
Component for creating line charts and time series plots.
80

81
```java { .api }
82
public class ChartLine extends Chart {
83
    public ChartLine();
84
    public ChartLine(String title);
85
    
86
    // Data management
87
    public ChartLine addSeries(String seriesName, double[] x, double[] y);
88
    public ChartLine addSeries(String seriesName, Number[] x, Number[] y);
89
    public ChartLine addSeries(String seriesName, List<Number> x, List<Number> y);
90
    
91
    // Configuration
92
    public ChartLine setXMin(double xMin);
93
    public ChartLine setXMax(double xMax);
94
    public ChartLine setYMin(double yMin);
95
    public ChartLine setYMax(double yMax);
96
    public ChartLine setGridEnabled(boolean enabled);
97
}
98
```
99

100
### Scatter Plot
101

102
Component for creating scatter plots and point charts.
103

104
```java { .api }
105
public class ChartScatter extends Chart {
106
    public ChartScatter();
107
    public ChartScatter(String title);
108
    
109
    // Data management
110
    public ChartScatter addSeries(String seriesName, double[] x, double[] y);
111
    public ChartScatter addSeries(String seriesName, Number[] x, Number[] y);
112
    public ChartScatter addSeries(String seriesName, List<Number> x, List<Number> y);
113
    
114
    // Point styling
115
    public ChartScatter setPointSize(int size);
116
    public ChartScatter setPointShape(String shape);
117
}
118
```
119

120
### Histogram Chart
121

122
Component for creating histograms and distribution plots.
123

124
```java { .api }
125
public class ChartHistogram extends Chart {
126
    public ChartHistogram();
127
    public ChartHistogram(String title);
128
    
129
    // Data management
130
    public ChartHistogram addBin(double binMin, double binMax, double count);
131
    public ChartHistogram addBins(double[] binEdges, double[] counts);
132
    public ChartHistogram addBins(List<Double> binEdges, List<Double> counts);
133
    
134
    // Configuration
135
    public ChartHistogram setBinCount(int count);
136
    public ChartHistogram setNormalized(boolean normalized);
137
}
138
```
139

140
### Bar Charts
141

142
Components for creating horizontal and vertical bar charts.
143

144
```java { .api }
145
public class ChartHorizontalBar extends Chart {
146
    public ChartHorizontalBar();
147
    public ChartHorizontalBar(String title);
148
    
149
    // Data management
150
    public ChartHorizontalBar addSeries(String seriesName, List<String> labels, List<Number> values);
151
    public ChartHorizontalBar addSeries(String seriesName, String[] labels, double[] values);
152
    
153
    // Configuration
154
    public ChartHorizontalBar setStacked(boolean stacked);
155
    public ChartHorizontalBar setBarWidth(double width);
156
}
157
```
158

159
### Stacked Area Chart
160

161
Component for creating stacked area charts and filled line plots.
162

163
```java { .api }
164
public class ChartStackedArea extends Chart {
165
    public ChartStackedArea();
166
    public ChartStackedArea(String title);
167
    
168
    // Data management
169
    public ChartStackedArea addSeries(String seriesName, double[] x, double[] y);
170
    public ChartStackedArea addSeries(String seriesName, List<Number> x, List<Number> y);
171
    
172
    // Configuration
173
    public ChartStackedArea setFillOpacity(double opacity);
174
    public ChartStackedArea setStrokeWidth(double width);
175
}
176
```
177

178
### Timeline Chart
179

180
Component for creating timeline and Gantt-style charts.
181

182
```java { .api }
183
public class ChartTimeline extends Chart {
184
    public ChartTimeline();
185
    public ChartTimeline(String title);
186
    
187
    // Data management
188
    public ChartTimeline addTimelineEvent(String label, long startTime, long endTime);
189
    public ChartTimeline addTimelineEvent(String label, long startTime, long endTime, String color);
190
    
191
    // Configuration
192
    public ChartTimeline setTimeFormat(String format);
193
    public ChartTimeline setShowLabels(boolean show);
194
}
195
```
196

197
## Chart Styling
198

199
### StyleChart
200

201
Styling configuration specific to chart components.
202

203
```java { .api }
204
public class StyleChart extends Style {
205
    // Chart-specific styling
206
    protected String titleColor;
207
    protected String axisColor;
208
    protected String gridColor;
209
    protected String legendPosition;
210
    
211
    // Chart styling methods
212
    public StyleChart titleColor(String color);
213
    public StyleChart axisColor(String color);
214
    public StyleChart gridColor(String color);
215
    public StyleChart legendPosition(String position);
216
    public StyleChart width(double width, LengthUnit unit);
217
    public StyleChart height(double height, LengthUnit unit);
218
    public StyleChart margin(double top, double right, double bottom, double left, LengthUnit unit);
219
}
220
```
221

222
## Layout Components
223

224
### ComponentDiv
225

226
Container component for grouping and laying out other components.
227

228
```java { .api }
229
public class ComponentDiv extends Component {
230
    public ComponentDiv();
231
    public ComponentDiv(StyleDiv style, Component... components);
232
    
233
    // Content management
234
    public ComponentDiv addComponent(Component component);
235
    public ComponentDiv addComponents(Component... components);
236
    public ComponentDiv addComponents(List<Component> components);
237
    
238
    // Styling
239
    public ComponentDiv setStyle(StyleDiv style);
240
}
241
```
242

243
### StyleDiv
244

245
Styling configuration for div containers.
246

247
```java { .api }
248
public class StyleDiv extends Style {
249
    // Layout properties
250
    protected String display;
251
    protected String flexDirection;
252
    protected String justifyContent;
253
    protected String alignItems;
254
    protected String padding;
255
    protected String margin;
256
    protected String border;
257
    
258
    // Layout methods
259
    public StyleDiv display(String display);
260
    public StyleDiv flexDirection(String direction);
261
    public StyleDiv justifyContent(String justify);
262
    public StyleDiv alignItems(String align);
263
    public StyleDiv padding(double padding, LengthUnit unit);
264
    public StyleDiv margin(double margin, LengthUnit unit);
265
    public StyleDiv border(String border);
266
}
267
```
268

269
## Data Components
270

271
### ComponentTable
272

273
Component for displaying tabular data.
274

275
```java { .api }
276
public class ComponentTable extends Component {
277
    public ComponentTable();
278
    public ComponentTable(String[][] content, String[] header);
279
    
280
    // Content management
281
    public ComponentTable header(String... header);
282
    public ComponentTable content(String[][] content);
283
    public ComponentTable addRow(String... row);
284
    
285
    // Styling
286
    public ComponentTable setStyle(StyleTable style);
287
}
288
```
289

290
### StyleTable
291

292
Styling configuration for table components.
293

294
```java { .api }
295
public class StyleTable extends Style {
296
    // Table-specific styling
297
    protected String borderCollapse;
298
    protected String borderColor;
299
    protected String headerBackgroundColor;
300
    protected String evenRowColor;
301
    protected String oddRowColor;
302
    
303
    // Table styling methods
304
    public StyleTable borderCollapse(String collapse);
305
    public StyleTable borderColor(String color);
306
    public StyleTable headerBackgroundColor(String color);
307
    public StyleTable alternatingRowColors(String evenColor, String oddColor);
308
    public StyleTable width(double width, LengthUnit unit);
309
}
310
```
311

312
### ComponentText
313

314
Component for displaying formatted text.
315

316
```java { .api }
317
public class ComponentText extends Component {
318
    public ComponentText();
319
    public ComponentText(String text);
320
    public ComponentText(String text, StyleText style);
321
    
322
    // Content management
323
    public ComponentText setText(String text);
324
    public ComponentText append(String text);
325
    
326
    // Styling
327
    public ComponentText setStyle(StyleText style);
328
}
329
```
330

331
### StyleText
332

333
Styling configuration for text components.
334

335
```java { .api }
336
public class StyleText extends Style {
337
    // Text-specific styling
338
    protected String fontWeight;
339
    protected String textAlign;
340
    protected String textDecoration;
341
    protected String lineHeight;
342
    protected String whiteSpace;
343
    
344
    // Text styling methods
345
    public StyleText fontWeight(String weight);
346
    public StyleText textAlign(String align);
347
    public StyleText textDecoration(String decoration);
348
    public StyleText lineHeight(String height);
349
    public StyleText whiteSpace(String whiteSpace);
350
}
351
```
352

353
## Interactive Components
354

355
### DecoratorAccordion
356

357
Component for creating collapsible accordion interfaces.
358

359
```java { .api }
360
public class DecoratorAccordion extends Component {
361
    public DecoratorAccordion();
362
    
363
    // Content management
364
    public DecoratorAccordion addSection(String title, Component content);
365
    public DecoratorAccordion addSection(String title, Component content, boolean defaultOpen);
366
    
367
    // Configuration
368
    public DecoratorAccordion setAllowMultipleOpen(boolean allow);
369
    public DecoratorAccordion setStyle(StyleAccordion style);
370
}
371
```
372

373
### StyleAccordion
374

375
Styling configuration for accordion components.
376

377
```java { .api }
378
public class StyleAccordion extends Style {
379
    // Accordion-specific styling
380
    protected String headerBackgroundColor;
381
    protected String headerColor;
382
    protected String contentBackgroundColor;
383
    protected String borderColor;
384
    
385
    // Accordion styling methods
386
    public StyleAccordion headerBackgroundColor(String color);
387
    public StyleAccordion headerColor(String color);
388
    public StyleAccordion contentBackgroundColor(String color);
389
    public StyleAccordion borderColor(String color);
390
}
391
```
392

393
## Standalone Component System
394

395
### StaticPageUtil
396

397
Utility class for generating standalone HTML pages with components.
398

399
```java { .api }
400
public class StaticPageUtil {
401
    // Generate standalone HTML
402
    public static String generateHTML(Component component);
403
    public static String generateHTML(List<Component> components);
404
    public static String generateHTML(Component component, String title);
405
    
406
    // File operations
407
    public static void writeHTMLToFile(Component component, File file) throws IOException;
408
    public static void writeHTMLToFile(List<Component> components, File file) throws IOException;
409
}
410
```
411

412
### ComponentObject
413

414
Wrapper class for components in standalone mode.
415

416
```java { .api }
417
public class ComponentObject {
418
    public ComponentObject(Component component);
419
    
420
    // Component access
421
    public Component getComponent();
422
    public String getComponentAsJson();
423
}
424
```
425

426
### ClassPathResource
427

428
Utility for handling classpath resources in standalone components.
429

430
```java { .api }
431
public class ClassPathResource {
432
    public ClassPathResource(String path);
433
    
434
    // Resource access
435
    public InputStream getInputStream() throws IOException;
436
    public String getAsString() throws IOException;
437
    public byte[] getAsBytes() throws IOException;
438
}
439
```
440

441
## Component Utilities
442

443
### Utils
444

445
General utility functions for UI components.
446

447
```java { .api }
448
public class Utils {
449
    // Color utilities
450
    public static String rgb(int r, int g, int b);
451
    public static String rgba(int r, int g, int b, double alpha);
452
    public static String hex(String hexColor);
453
    
454
    // Data conversion utilities
455
    public static double[] listToDoubleArray(List<Number> list);
456
    public static String[] listToStringArray(List<String> list);
457
    
458
    // Formatting utilities
459
    public static String formatNumber(double number, int decimalPlaces);
460
    public static String formatPercent(double value);
461
}
462
```
463

464
## Usage Examples
465

466
### Creating a Basic Line Chart
467

468
```java
469
import org.deeplearning4j.ui.components.chart.ChartLine;
470
import org.deeplearning4j.ui.components.chart.style.StyleChart;
471

472
// Create training loss chart
473
ChartLine lossChart = new ChartLine("Training Loss")
474
    .addSeries("Training Loss", trainingIterations, trainingLosses)
475
    .addSeries("Validation Loss", validationIterations, validationLosses)
476
    .setXMin(0)
477
    .setYMin(0)
478
    .setGridEnabled(true);
479

480
// Apply styling
481
StyleChart style = new StyleChart()
482
    .width(800, LengthUnit.px)
483
    .height(400, LengthUnit.px)
484
    .titleColor("#333333")
485
    .axisColor("#666666");
486

487
lossChart.setStyle(style);
488
```
489

490
### Creating a Histogram
491

492
```java
493
import org.deeplearning4j.ui.components.chart.ChartHistogram;
494

495
// Create weight distribution histogram
496
ChartHistogram weightHist = new ChartHistogram("Weight Distribution")
497
    .addBins(binEdges, binCounts)
498
    .setBinCount(50)
499
    .setNormalized(true);
500
```
501

502
### Building a Dashboard Layout
503

504
```java
505
import org.deeplearning4j.ui.components.component.ComponentDiv;
506
import org.deeplearning4j.ui.components.component.style.StyleDiv;
507
import org.deeplearning4j.ui.components.text.ComponentText;
508

509
// Create header
510
ComponentText header = new ComponentText("Training Dashboard")
511
    .setStyle(new StyleText().fontSize("24px").fontWeight("bold"));
512

513
// Create layout container
514
StyleDiv containerStyle = new StyleDiv()
515
    .display("flex")
516
    .flexDirection("column")
517
    .padding(20, LengthUnit.px);
518

519
ComponentDiv dashboard = new ComponentDiv(containerStyle)
520
    .addComponent(header)
521
    .addComponent(lossChart)
522
    .addComponent(weightHist);
523
```
524

525
### Generating Standalone HTML Report
526

527
```java
528
import org.deeplearning4j.ui.standalone.StaticPageUtil;
529

530
// Create components
531
List<Component> reportComponents = Arrays.asList(
532
    header,
533
    lossChart,
534
    weightHist,
535
    statisticsTable
536
);
537

538
// Generate HTML
539
String htmlReport = StaticPageUtil.generateHTML(reportComponents, "Training Report");
540

541
// Write to file
542
File reportFile = new File("training-report.html");
543
StaticPageUtil.writeHTMLToFile(reportComponents, reportFile);
544
```
545

546
### Creating Data Tables
547

548
```java
549
import org.deeplearning4j.ui.components.table.ComponentTable;
550
import org.deeplearning4j.ui.components.table.style.StyleTable;
551

552
// Create statistics table
553
String[] headers = {"Layer", "Parameters", "Mean", "Std Dev"};
554
String[][] data = {
555
    {"Layer 1", "1000", "0.15", "0.32"},
556
    {"Layer 2", "2000", "0.08", "0.28"},
557
    {"Layer 3", "500", "0.12", "0.25"}
558
};
559

560
ComponentTable statsTable = new ComponentTable(data, headers)
561
    .setStyle(new StyleTable()
562
        .borderColor("#cccccc")
563
        .headerBackgroundColor("#f5f5f5")
564
        .alternatingRowColors("#ffffff", "#f9f9f9"));
565
```