The HPCC Visualization Framework is a comprehensive TypeScript/JavaScript-based data visualization library that provides charting, graphing, and dashboard capabilities. Published as scoped NPM packages under @hpcc-js, this framework is designed to work seamlessly with the HPCC Systems big data platform while being flexible enough for general-purpose visualization needs.
- Quick Start: Covers the basics on how to include the framework into your web application.
- Tutorials: Starting with a simple "hello world", the tutorials walk through the basics of instantiating visualizations, fetching data and creating dashboards.
- Gallery: Interactive gallery with live code examples and a property editor for discovering the capabilities of each visualization.
This is a Lerna-based monorepo with packages organized in the /packages/ directory. Each package has its own package.json, build configuration, and TypeScript setup. Packages are published independently to NPM under the @hpcc-js/ scope.
- Vite is the primary compiler and bundler for all packages
- TypeScript source code with strict configuration
- Multiple module formats: ESM, UMD, and IIFE
- Source maps generated for all builds
- PostCSS for CSS processing and minification
@hpcc-js/common- Base widgets, utilities, and D3 re-exports@hpcc-js/api- TypeScript interfaces and API definitions@hpcc-js/util- Utility functions and helpers
@hpcc-js/chart- Charts (Bar, Line, Pie, Scatter, etc.)@hpcc-js/graph- Graph visualizations and network diagrams@hpcc-js/map- Geographic visualizations with Leaflet integration@hpcc-js/tree- Tree and hierarchy visualizations@hpcc-js/timeline- Timeline and temporal visualizations
@hpcc-js/layout- Layout containers and dashboard components@hpcc-js/form- Form controls and input widgets@hpcc-js/html- HTML-based components and React integration
@hpcc-js/marshaller- Data marshalling and dashboard orchestration@hpcc-js/comms- Communication with HPCC Systems platform@hpcc-js/codemirror- Code editors for various languages
- Modern browsers (Chrome, Firefox, Edge, Safari)
- Node.js for server-side rendering and data processing
- ES6 modules (primary format for tree-shaking and modern bundlers)
- UMD (Universal Module Definition for broad compatibility)
- IIFE (Immediately Invoked Function Expression for direct browser usage)
- CommonJS support for Node.js environments
- Vite (recommended)
- Webpack
- Rollup.js
- Parcel
- Direct CDN usage via unpkg
To install via npm, use npm install with the specific packages you need. Each package is scoped with "@hpcc-js":
npm install @hpcc-js/chart @hpcc-js/map @hpcc-js/commonFor quick prototyping, you can load packages directly from unpkg CDN:
<script src="https://unpkg.com/@hpcc-js/util"></script>
<script src="https://unpkg.com/@hpcc-js/api"></script>
<script src="https://unpkg.com/@hpcc-js/common"></script>
<script src="https://unpkg.com/@hpcc-js/chart"></script>You can see all available packages at: https://www.npmjs.com/search?q=maintainer:hpcc-js
import { Bar } from "@hpcc-js/chart";
const chart = new Bar()
.target("placeholder")
.columns(["Subject", "Year 1", "Year 2", "Year 3"])
.data([
["Geography", 75, 68, 65],
["English", 45, 55, -52],
["Math", 98, 92, 90],
["Science", 66, 60, 72]
])
.render();require(["@hpcc-js/chart"], function(hpccChart) {
const chart = new hpccChart.Bar()
.target("placeholder")
.columns(["Subject", "Year 1", "Year 2", "Year 3"])
.data([
["Geography", 75, 68, 65],
["English", 45, 55, -52],
["Math", 98, 92, 90],
["Science", 66, 60, 72]
])
.render();
});<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Simple Bar Chart</title>
<script src="https://unpkg.com/@hpcc-js/util"></script>
<script src="https://unpkg.com/@hpcc-js/common"></script>
<script src="https://unpkg.com/@hpcc-js/api"></script>
<script src="https://unpkg.com/@hpcc-js/chart"></script>
</head>
<body>
<div id="placeholder" style="width:800px; height:600px;"></div>
<script>
const hpccChart = window["@hpcc-js/chart"];
const chart = new hpccChart.Bar()
.target("placeholder")
.columns(["Subject", "Year 1", "Year 2", "Year 3"])
.data([
["Geography", 75, 68, 65],
["English", 45, 55, -52],
["Math", 98, 92, 90],
["Science", 66, 60, 72]
])
.render();
</script>
</body>
</html>- Node.js LTS (18.x or later recommended)
- Git for version control
- Clone the repository:
git clone https://github.com/hpcc-systems/Visualization.git Visualization
cd Visualization- Install dependencies:
npm install- Build all packages:
npm run build- Start the development server:
cd demos/gallery
npm run bundle-watchThe gallery will be available at http://localhost:5500 with hot reloading for development.
# Build all packages
npm run build
# Clean all build artifacts
npm run clean# Lint all packages
npm run lint
# Fix linting issues automatically
npm run lint-fix# Run all tests
npm run test
# Run browser tests
npm run test-browser
# Run Node.js tests
npm run test-node# Navigate to a specific package
cd packages/chart
# Build just this package
npm run build
# Run tests for this package
npm run testTo completely reset your development environment:
npm run clean
npm run uninstall
rm -rf node_modules
npm installThis framework is designed to work with the HPCC Systems big data platform, providing:
- ECL (Enterprise Control Language) integration
- Roxie query integration through
@hpcc-js/comms - Workunit result visualization
- ESP (Enterprise Services Platform) connectivity
- Real-time data streaming capabilities
We welcome contributions! Please see our Contributing Guidelines.
This project is licensed under the Apache-2.0 License - see the LICENSE file for details.