Swim UX Toolkit
The Swim UX toolkit implements seamlessly animated user interface widgets, including gauges, pie charts, line, area, and bubble charts, and geospatial map overlays. These fully encapsulated widgets can be embedded into any web application framework, or directly into any web page. Swim UX is a part of the broader Swim System framework.
The Swim UX toolkit consists of the following component libraries:
@swim/ux– umbrella package that depends on, and re-exports, all Swim UX libraries.
@swim/gauge– multi-dial, fully animated, Canvas rendered gauge widget.
@swim/pie– multi-slice, fully animatable, canvas rendered pie chart widget.
@swim/chart– multi-plot, fully animatable, canvas rendered chart widget, suppporting line, area, and bubble graphs, with customizeable axes, and kinematic multitouch scale gestures for panning and zooming with momentum.
@swim/map– canvas views for efficiently rendering geospatially located map overlays, including fully animatable views for lines, circles, and polygons.
@swim/mapbox– support for overlaying
@swim/mapviews on Mapbox maps.
For an npm-managed project,
npm install @swim/ux to make it a dependency.
TypeScript sources will be installed into
node_modules/@swim/ux/lib/main. And a pre-built UMD script, which
@swim/ux component libraries, can be found in
Browser applications can load
swim-ux.js, along with its
swim-ui.js dependencies, from the Swim CDN.
<script src="https://cdn.swim.ai/js/latest/swim-core.js"></script> <script src="https://cdn.swim.ai/js/latest/swim-ui.js"></script> <script src="https://cdn.swim.ai/js/latest/swim-ux.js"></script>
Alternatively, the standalone
swim-system.js script may be loaded
from the Swim CDN, which bundles
@swim/ux along with all other
@swim/ux can be imported as an ES6 module from TypeScript and other
ES6-compatible environments. All component libraries are re-exported,
in their entirety, from the top-level
import * as swim from "@swim/ux";
@swim/ux can also be used with CommonJS-compatible module systems.
All component libraries are re-exported, in their entirety, from the
var swim = require("@swim/ux");
When loaded by a web browser, the
swim-ux.js script adds all component
library exports to the global
swim namespace. The
swim-ui.js have already been loaded.
swim-system.js script also adds all
@swim/ux component library
exports to the global
swim namespace, making it a drop-in replacement
swim-ux.js when additional
@swim/system frameworks are needed.
swim-ux-js can be built against the currently checked out
swim-ui-js sources by compiling it from the parent
Install build dependencies:
swim-ux-js $ npm install
bin/build.js script to build the Swim UX toolkit. The build script
watch commands, described below.
All build script commands take an optional
-p) option to
restrict the build to a comma-separated list of projects.
Each project supports multiple output targets; typical targets for a project
main, to build the main sources, and
test, to build the test
sources. A specific target can be built for a project by appending a colon
:) and the target name to the project name. For example, to build just the
main sources of the
util project, pass
-p util:main to the build script.
Most build commands take a
-d) option to expedite development
builds by skipping the minification step.
bin/build.js help to see a complete list of build commands. Run
bin/build.js <command> --help to see a list of options supported by a
particular build command.
compile build script command to compile, bundle, and minify
dist subdirectory of each project. To compile all targets,
of all projects, run:
swim-ux-js $ bin/build.js compile
To compile a subset of projects and targets, include a
option, with a comma-separated list of
For example, to build the
main target of the
pie project, and all
targets of the
ux project, run:
swim-ux-js $ bin/build.js compile -p pie:main,ux
test build script command to compile and run unit tests.
For example, to compile and test the
chart project, run:
swim-ux-js $ bin/build.js test -p chart
Continuous development builds
watch build script command to automatically rebuild projects when
dependent source files change. For example, to continuously recompile the
main target of the
gauge project when any source file in the project–or
in one of the project's transitive local dependencies–changes, run:
swim-ux-js $ bin/build.js watch -p gauge:main
-d) option to expedite recompilation by skipping the
minification step. Add the
-t) option to automatically run unit
tests after each successful compilation. For example, to continuosly compile
and test the
chart project, bypassing minification, and skipping generation
of the main script, run:
swim-ux-js $ bin/build.js watch -p chart:test -d -t