QFlow

2D network traffic visualization built on PixiJS 8. Renders audit log data as animated pulses between source and destination nodes.

@qpoint-io/qflow · v0.1.0

Live Demo

Loading traffic visualization...

Mock audit log data with 500 entries. Press Play to start the animated flow.

npm install @qpoint-io/qflow pixi.js

pixi.js is a peer dependency. pixi-ease and simplex-noise are bundled as regular dependencies.

import { TrafficViz } from '@qpoint-io/qflow'

Prop	Type	Default	Description
auditLogs	Array	[]	Array of audit log objects. Required data source for the visualization.
mode	String	'live'	Visualization mode.
showControls	Boolean	true	Show playback controls (play/pause, speed selector).
clientConfig	Object	{ ... }	Client node configuration: sizeAlong, clientDimmension, shape, color, overRides.

Event	Description
ready	Emitted when the PixiJS application is initialized and the stage is rendered

For imperative mounting without the Vue component wrapper.

import { useTrafficViz } from '@qpoint-io/qflow'

QFlow ships 7 positioning strategies for arranging source and destination nodes. Import individually and pass to PixiStage.

GridLayout

Uniform grid — evenly spaced rows and columns.

ArcLayout

Bounded-arc packing with configurable angular spread.

RadialLayout

Concentric rings radiating from center.

PackedGridLayout

Space-efficient packed grid for dense node sets.

PyramidLayout

Pyramid arrangement — largest nodes at the base.

CircularPackedLayout

Circle-packing algorithm for organic arrangement.

ZonedLayout

Composite layout stub for ingress/internal/egress zones.

Export	Description
DecorationImage	Base class for static image overlays with texture caching and async loading.
FaviconImage	Subclass that auto-loads favicons from domain names via Google's favicon proxy.

SSR: PixiJS requires browser globals (canvas, WebGL). Always wrap in <ClientOnly> when used in Nuxt/SSR apps.