Options
All
  • Public
  • Public/Protected
  • All
Menu

Framework @swim/vis

@swim/vis

package documentation chat

@swim/vis implements procedurally animated, interactive diagrams, including gauges, pie charts, and line, area, and bubble charts. These fully encapsulated widgets can be embedded into any web application framework, or directly into any web page. @swim/vis is a part of the broader @swim/toolkit framework.

Framework

The @swim/vis umbrella package depends on, and re-exports, the following component libraries:

  • @swim/gauge (npm, doc) – multi-dial, fully animatable, canvas rendered gauge widget.
  • @swim/pie (npm, doc) – multi-slice, fully animatable, canvas rendered pie chart widget.
  • @swim/chart (npm, doc) – 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/vis builds on the @swim/core and @swim/ui frameworks; it has no additional required dependencies.

Installation

npm

For an npm-managed project, npm install @swim/vis to make it a dependency. TypeScript sources will be installed into node_modules/@swim/vis/main. Transpiled JavaScript and TypeScript definition files install into node_modules/@swim/vis/lib/main. And a pre-built UMD script, which bundles all @swim/vis component libraries, can be found in node_modules/@swim/vis/dist/main/swim-vis.js.

Browser

Browser applications can load swim-vis.js, along with its swim-core.js, swim-mesh.js, and swim-ui.js dependencies, from the SwimOS CDN.

<!-- Development -->
<script src="https://cdn.swimos.org/js/latest/swim-core.js"></script>
<script src="https://cdn.swimos.org/js/latest/swim-mesh.js"></script>
<script src="https://cdn.swimos.org/js/latest/swim-ui.js"></script>
<script src="https://cdn.swimos.org/js/latest/swim-vis.js"></script>

<!-- Production -->
<script src="https://cdn.swimos.org/js/latest/swim-core.min.js"></script>
<script src="https://cdn.swimos.org/js/latest/swim-mesh.min.js"></script>
<script src="https://cdn.swimos.org/js/latest/swim-ui.min.js"></script>
<script src="https://cdn.swimos.org/js/latest/swim-vis.min.js"></script>

Alternatively, the swim-toolkit.js script may be loaded, along with its swim-system.js dependency, from the SwimOS CDN. The swim-toolkit.js script bundles @swim/vis together with all other @swim/toolkit frameworks.

<!-- Development -->
<script src="https://cdn.swimos.org/js/latest/swim-system.js"></script>
<script src="https://cdn.swimos.org/js/latest/swim-toolkit.js"></script>

<!-- Production -->
<script src="https://cdn.swimos.org/js/latest/swim-system.min.js"></script>
<script src="https://cdn.swimos.org/js/latest/swim-toolkit.min.js"></script>

Usage

ES6/TypeScript

@swim/vis can be imported as an ES6 module from TypeScript and other ES6-compatible environments. All component libraries are re-exported by the umbrella @swim/vis module.

import * as swim from "@swim/vis";

CommonJS

@swim/vis can also be used with CommonJS-compatible module systems. All component libraries are re-exported by the umbrella @swim/vis module.

var swim = require("@swim/vis");

Browser

When loaded by a web browser, the swim-vis.js script adds all component library exports to the global swim namespace. The swim-vis.js script requires that swim-core.js, swim-mesh.js, and swim-ui.js have already been loaded.

The swim-toolkit.js script also adds all @swim/vis component library exports to the global swim namespace, making it a drop-in replacement for swim-ui.js and swim-vis.js when additional @swim/toolkit frameworks are needed.

Index

References

References

AnyAreaPlotView

Re-exports AnyAreaPlotView

AnyAxisView

Re-exports AnyAxisView

AnyBubblePlotView

Re-exports AnyBubblePlotView

AnyChartView

Re-exports AnyChartView

AnyDataPointView

Re-exports AnyDataPointView

AnyDialView

Re-exports AnyDialView

AnyGaugeView

Re-exports AnyGaugeView

AnyGraphView

Re-exports AnyGraphView

AnyLinePlotView

Re-exports AnyLinePlotView

AnyPieView

Re-exports AnyPieView

AnyPlotView

Re-exports AnyPlotView

AnyScatterPlotView

Re-exports AnyScatterPlotView

AnySeriesPlotView

Re-exports AnySeriesPlotView

AnySliceView

Re-exports AnySliceView

AnyTickView

Re-exports AnyTickView

AreaPlotComponent

Re-exports AreaPlotComponent

AreaPlotComponentObserver

Re-exports AreaPlotComponentObserver

AreaPlotTrait

Re-exports AreaPlotTrait

AreaPlotTraitObserver

Re-exports AreaPlotTraitObserver

AreaPlotView

Re-exports AreaPlotView

AreaPlotViewInit

Re-exports AreaPlotViewInit

AreaPlotViewObserver

Re-exports AreaPlotViewObserver

AxisComponent

Re-exports AxisComponent

AxisComponentObserver

Re-exports AxisComponentObserver

AxisOrientation

Re-exports AxisOrientation

AxisTrait

Re-exports AxisTrait

AxisTraitObserver

Re-exports AxisTraitObserver

AxisView

Re-exports AxisView

AxisViewInit

Re-exports AxisViewInit

AxisViewObserver

Re-exports AxisViewObserver

BottomAxisComponent

Re-exports BottomAxisComponent

BottomAxisTrait

Re-exports BottomAxisTrait

BottomAxisView

Re-exports BottomAxisView

BottomTickView

Re-exports BottomTickView

BubblePlotComponent

Re-exports BubblePlotComponent

BubblePlotComponentObserver

Re-exports BubblePlotComponentObserver

BubblePlotTrait

Re-exports BubblePlotTrait

BubblePlotTraitObserver

Re-exports BubblePlotTraitObserver

BubblePlotView

Re-exports BubblePlotView

BubblePlotViewInit

Re-exports BubblePlotViewInit

BubblePlotViewObserver

Re-exports BubblePlotViewObserver

ChartComponent

Re-exports ChartComponent

ChartComponentObserver

Re-exports ChartComponentObserver

ChartTrait

Re-exports ChartTrait

ChartTraitObserver

Re-exports ChartTraitObserver

ChartView

Re-exports ChartView

ChartViewInit

Re-exports ChartViewInit

ChartViewObserver

Re-exports ChartViewObserver

ContinuousScaleAnimator

Re-exports ContinuousScaleAnimator

DataPointCategory

Re-exports DataPointCategory

DataPointComponent

Re-exports DataPointComponent

DataPointComponentObserver

Re-exports DataPointComponentObserver

DataPointLabel

Re-exports DataPointLabel

DataPointLabelFunction

Re-exports DataPointLabelFunction

DataPointLabelPlacement

Re-exports DataPointLabelPlacement

DataPointTrait

Re-exports DataPointTrait

DataPointTraitObserver

Re-exports DataPointTraitObserver

DataPointView

Re-exports DataPointView

DataPointViewInit

Re-exports DataPointViewInit

DataPointViewObserver

Re-exports DataPointViewObserver

DataSetComponent

Re-exports DataSetComponent

DataSetComponentObserver

Re-exports DataSetComponentObserver

DataSetTrait

Re-exports DataSetTrait

DataSetTraitObserver

Re-exports DataSetTraitObserver

DialComponent

Re-exports DialComponent

DialComponentObserver

Re-exports DialComponentObserver

DialLabel

Re-exports DialLabel

DialLabelFunction

Re-exports DialLabelFunction

DialLegend

Re-exports DialLegend

DialLegendFunction

Re-exports DialLegendFunction

DialTrait

Re-exports DialTrait

DialTraitObserver

Re-exports DialTraitObserver

DialView

Re-exports DialView

DialViewArrangement

Re-exports DialViewArrangement

DialViewInit

Re-exports DialViewInit

DialViewObserver

Re-exports DialViewObserver

GaugeComponent

Re-exports GaugeComponent

GaugeComponentObserver

Re-exports GaugeComponentObserver

GaugeTitle

Re-exports GaugeTitle

GaugeTitleFunction

Re-exports GaugeTitleFunction

GaugeTrait

Re-exports GaugeTrait

GaugeTraitObserver

Re-exports GaugeTraitObserver

GaugeView

Re-exports GaugeView

GaugeViewInit

Re-exports GaugeViewInit

GaugeViewObserver

Re-exports GaugeViewObserver

GraphComponent

Re-exports GraphComponent

GraphComponentObserver

Re-exports GraphComponentObserver

GraphTrait

Re-exports GraphTrait

GraphTraitObserver

Re-exports GraphTraitObserver

GraphView

Re-exports GraphView

GraphViewInit

Re-exports GraphViewInit

GraphViewObserver

Re-exports GraphViewObserver

LeftAxisComponent

Re-exports LeftAxisComponent

LeftAxisTrait

Re-exports LeftAxisTrait

LeftAxisView

Re-exports LeftAxisView

LeftTickView

Re-exports LeftTickView

LinePlotComponent

Re-exports LinePlotComponent

LinePlotComponentObserver

Re-exports LinePlotComponentObserver

LinePlotTrait

Re-exports LinePlotTrait

LinePlotTraitObserver

Re-exports LinePlotTraitObserver

LinePlotView

Re-exports LinePlotView

LinePlotViewInit

Re-exports LinePlotViewInit

LinePlotViewObserver

Re-exports LinePlotViewObserver

NumberTickGenerator

Re-exports NumberTickGenerator

PieComponent

Re-exports PieComponent

PieComponentObserver

Re-exports PieComponentObserver

PieTitle

Re-exports PieTitle

PieTitleFunction

Re-exports PieTitleFunction

PieTrait

Re-exports PieTrait

PieTraitObserver

Re-exports PieTraitObserver

PieView

Re-exports PieView

PieViewInit

Re-exports PieViewInit

PieViewObserver

Re-exports PieViewObserver

PlotComponent

Re-exports PlotComponent

PlotComponentObserver

Re-exports PlotComponentObserver

PlotTrait

Re-exports PlotTrait

PlotTraitObserver

Re-exports PlotTraitObserver

PlotType

Re-exports PlotType

PlotView

Re-exports PlotView

PlotViewInit

Re-exports PlotViewInit

PlotViewObserver

Re-exports PlotViewObserver

RightAxisComponent

Re-exports RightAxisComponent

RightAxisTrait

Re-exports RightAxisTrait

RightAxisView

Re-exports RightAxisView

RightTickView

Re-exports RightTickView

ScaledFlags

Re-exports ScaledFlags

ScaledView

Re-exports ScaledView

ScaledViewInit

Re-exports ScaledViewInit

ScaledViewObserver

Re-exports ScaledViewObserver

ScaledXView

Re-exports ScaledXView

ScaledXViewObserver

Re-exports ScaledXViewObserver

ScaledXYView

Re-exports ScaledXYView

ScaledXYViewObserver

Re-exports ScaledXYViewObserver

ScaledYView

Re-exports ScaledYView

ScaledYViewObserver

Re-exports ScaledYViewObserver

ScatterPlotComponent

Re-exports ScatterPlotComponent

ScatterPlotComponentObserver

Re-exports ScatterPlotComponentObserver

ScatterPlotTrait

Re-exports ScatterPlotTrait

ScatterPlotTraitObserver

Re-exports ScatterPlotTraitObserver

ScatterPlotType

Re-exports ScatterPlotType

ScatterPlotView

Re-exports ScatterPlotView

ScatterPlotViewInit

Re-exports ScatterPlotViewInit

ScatterPlotViewObserver

Re-exports ScatterPlotViewObserver

SeriesPlotComponent

Re-exports SeriesPlotComponent

SeriesPlotComponentObserver

Re-exports SeriesPlotComponentObserver

SeriesPlotHitMode

Re-exports SeriesPlotHitMode

SeriesPlotTrait

Re-exports SeriesPlotTrait

SeriesPlotTraitObserver

Re-exports SeriesPlotTraitObserver

SeriesPlotType

Re-exports SeriesPlotType

SeriesPlotView

Re-exports SeriesPlotView

SeriesPlotViewInit

Re-exports SeriesPlotViewInit

SeriesPlotViewObserver

Re-exports SeriesPlotViewObserver

SliceComponent

Re-exports SliceComponent

SliceComponentObserver

Re-exports SliceComponentObserver

SliceLabel

Re-exports SliceLabel

SliceLabelFunction

Re-exports SliceLabelFunction

SliceLegend

Re-exports SliceLegend

SliceLegendFunction

Re-exports SliceLegendFunction

SliceTrait

Re-exports SliceTrait

SliceTraitObserver

Re-exports SliceTraitObserver

SliceView

Re-exports SliceView

SliceViewInit

Re-exports SliceViewInit

SliceViewObserver

Re-exports SliceViewObserver

TickGenerator

Re-exports TickGenerator

TickOrientation

Re-exports TickOrientation

TickState

Re-exports TickState

TickView

Re-exports TickView

TickViewInit

Re-exports TickViewInit

TickViewObserver

Re-exports TickViewObserver

TimeTickGenerator

Re-exports TimeTickGenerator

TopAxisComponent

Re-exports TopAxisComponent

TopAxisTrait

Re-exports TopAxisTrait

TopAxisView

Re-exports TopAxisView

TopTickView

Re-exports TopTickView

Generated using TypeDoc