# vizceral-vue

> Vizceral Vue Implementation ispired by [`vizceral-react`](https://github.com/Netflix/vizceral-react)

Latest version **0.1.4** (published 2018-04-20) · 0 weekly downloads

## Install

```sh
npm install vizceral-vue
pnpm add vizceral-vue
yarn add vizceral-vue
bun add vizceral-vue
```

## Health

**Score 10/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; low quality score; large bundle; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.4 |
| Published | 2018-04-20 |
| First published | 2018-04-18 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 4 |
| Unpacked size | 31.3 MB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Maintainers | manico_ |

## Links

- npm: https://www.npmjs.com/package/vizceral-vue
- npm.io page: https://npm.io/package/vizceral-vue

## Dependencies (4)

- [vue](https://npm.io/package/vue.md) ^2.5.13
- [lodash](https://npm.io/package/lodash.md) ^4.17.5
- [vizceral](https://npm.io/package/vizceral.md) ^4.6.0
- [webfontloader](https://npm.io/package/webfontloader.md) ^1.6.28

## Recent versions

- 0.1.4 (latest) — 2018-04-20
- 0.1.3 — 2018-04-20
- 0.1.2 — 2018-04-19
- 0.1.1 — 2018-04-19
- 0.1.0 — 2018-04-18

## README

# vizceral-vue

Vizceral Vue Implementation ispired by [`vizceral-react`](https://github.com/Netflix/vizceral-react)

## Setup

Install package:

```
npm install vizceral-vue --save
```

Import component and start using it:

```
import VizceralVue from 'vizceral-vue';
Vue.use(VizceralVue);
```

Example of usage:

```js
import Vizceral from 'vizceral-vue';

<vizceral-vue
  :traffic="trafficData"
  :view="currentView"
  :showLabels="showLabels"
  :physicsOptions="physicsOptions"
  :filters="filters"
  :matchesFound="matchesFound"
  :match="searchTerm"
  :modes="modes"
  :definitions="definitions"
  :styles="styles"
/>
```

## Props

#### allowDraggingOfNodes

```js
// Default: false
allowDraggingOfNodes: Boolean
```

Nodes can be repositioned through dragging if and only if this is true.

#### definitions

```js
// Default: {}
definitions: Object
```

Object map of definitions. Refer to [github.com/Netflix/Vizceral/wiki/Configuration#definitions-for-data-to-display](https://github.com/Netflix/Vizceral/wiki/Configuration#definitions-for-data-to-display)

#### filters

```js
// Default: []
filters: Array
```

Array of filter definitions and current values to filter out nodes and connections. Refer to
[github.com/Netflix/Vizceral/wiki/Configuration#filters](https://github.com/Netflix/Vizceral/wiki/Configuration#filters)

#### match

```js
// Default: ''
match: String
```

A search string to highlight nodes that match.

#### modes

```js
modes: Object
```

Map of modes to mode type, e.g. `{ detailedNode: 'volume' }`.

#### objectHighlight

```js
objectHighlight: Object
```

Pass in an object to highlight.

#### showLabels

```js
// Default: true
showLabels: Boolean
```

Whether or not to show labels on the nodes.

#### styles

```js
// Default: {}
styles: Object
```

Styles to override default properties.

#### targetFramerate

```js
// Default: null
targetFramerate: Number
```

Target framerate for rendering engine

#### traffic

```js
// Default: {}
traffic: Object
```

The traffic data. See [github.com/Netflix/Vizceral/wiki/How-to-Use#graph-data-format](https://github.com/Netflix/Vizceral/wiki/How-to-Use#graph-data-format) for specification.

---
_Source: https://npm.io/package/vizceral-vue · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._