The Chart Components module provides integration between PatternFly React Charts and the PatternFly Java component library. This module enables Java developers working with GWT or J2CL to use PatternFly's charting capabilities without writing JavaScript directly. The integration is achieved through a web components bridge that wraps React-based charts from @patternfly/react-charts as custom HTML elements.
This document provides an overview of the chart integration architecture, available chart types, and the build system. For detailed information about specific aspects:
The chart system consists of three primary layers that bridge the gap between Java code and React-based visualization libraries:
Sources: charts/pom.xml1-77 charts/npm/package.json1-63 charts/npm/README.md1-87
The charts module follows the standard PatternFly Java multi-module structure with additional NPM packaging:
Sources: charts/pom.xml30-49 charts/npm/package.json23-61
The module provides five primary chart types as web components, each mapping to a corresponding PatternFly React Charts component:
| Web Component | PatternFly React Component | Use Case |
|---|---|---|
<pfj-chart-donut> | ChartDonut | Proportional data visualization with center label |
<pfj-chart-donut-threshold> | ChartDonutThreshold | Donut chart with threshold indicators |
<pfj-chart-donut-utilization> | ChartDonutUtilization | Resource utilization display (e.g., storage, CPU) |
<pfj-chart-bullet> | ChartBullet | Progress against target with qualitative ranges |
<pfj-chart-pie> | ChartPie | Simple proportional data visualization |
Sources: charts/npm/README.md7-15
The chart module relies on a specific set of NPM dependencies that provide the underlying charting functionality:
Sources: charts/npm/package.json34-61 charts/npm/pnpm-lock.yaml11-88
The charts module is configured as a gwt-lib package that includes both Java source code and JavaScript resources:
Key Configuration Elements:
gwt-lib enables GWT module packaging with JavaScript resourcespatternfly-java-code-parent provides common build configurationspatternfly-java-core and patternfly-java-tokens for foundational functionality.java and .js files are packaged as resources for GWT compilationThe module includes JavaScript files from both src/main/java and src/main/resources directories, allowing JavaScript externs to be packaged alongside Java source code.
Sources: charts/pom.xml19-77
The charts module defines a GWT module named org.patternfly.Charts that can be inherited by applications:
This module name is used in GWT compilation and in application module descriptors to include chart functionality.
Sources: charts/pom.xml68-73
The chart module uses a hybrid build system that coordinates Maven and NPM:
The Maven build produces a JAR containing Java classes and JavaScript externs, while the NPM build produces a distributable web component bundle for browser consumption.
Sources: charts/pom.xml51-76 charts/npm/package.json24-28
The NPM package provides development scripts for local testing and iteration:
| Script | Command | Purpose |
|---|---|---|
dev | parcel serve demo.html --port 5173 --no-cache | Local development server with hot reload |
build | parcel build src/charts.js --no-cache | Production build of web components |
clean | rimraf .parcel-cache dist | Clean build artifacts |
These scripts enable developers to test web component functionality independently before integrating with the Java build system.
Sources: charts/npm/package.json25-28
The charts NPM package uses pnpm as its package manager with specific workspace configuration:
This configuration optimizes build times by excluding unnecessary native dependencies while ensuring required binary packages are built locally.
Sources: charts/npm/pnpm-workspace.yaml1-8
The following example from the NPM package documentation demonstrates how chart web components are used in HTML with JavaScript configuration:
In PatternFly Java applications, this same web component is created and configured from Java code using the Elemento builder API, with the JavaScript externs providing type safety for property access.
Sources: charts/npm/README.md33-74
The charts module includes JavaScript externs files that provide type information to the J2CL compiler, preventing property name mangling and enabling type-safe interaction with web component properties. These externs are packaged in src/main/resources/META-INF/externs/ and included in the final JAR artifact.
Sources: charts/pom.xml52-64
The chart system is distributed through two primary channels:
patternfly-java-charts artifact containing Java classes and externs@patternfly-java/charts package containing bundled web componentsBoth distributions are versioned independently, though they are typically released in coordination. Applications must include both dependencies to use chart functionality.
Refresh this wiki